/* The home page's ninth family, trials (hometrial.go, homeLook.Layout; owner, 2026-10-28: «сделай для пк еще варианты
   главной. Хочу перекроить подачу»): four ways to lay the first page out on a wide screen, each a band of its own over
   the site's feed, which stays whole and live:
     9.1 «Повестка» — today, the week and what is ahead side by side, the feed under them in two columns; 9.1.1 the same
         with every story's picture, the calendar narrower, no game; 9.1.2 with the pictures larger; 9.1.3 with the
         desks of 9.3 between the band and the feed;
     9.2 «Первая полоса» — the day's first story large, three more beside it, the calendar as a ribbon, the week beside
         the feed;
     9.3 «Рубрики» — the top as a row of four cards, the newest four stories of each desk, the calendar and the game as desks too,
         then the whole feed in two columns;
     9.4 «Коротко» — the day in numbered lines with their teasers, the feed under them, what is ahead beside.
   A narrow screen gets the band stacked. Built on 8.5: its header, its dense feed, its blue. */

.home-t9 { --wrap: 80rem; }

/* What the family shares: a head over a column, numbered headlines, the calendar's dates, the game. */
.t9-col { min-width: 0; }
.t9-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding-block: .9rem .7rem; border-bottom: 2px solid var(--ink); }
.t9-head h2 { margin: 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
.t9-head span, .t9-head a { font: 400 .8125rem/1.3 var(--mono); color: var(--muted); text-decoration: none; white-space: nowrap; }
.t9-head a:hover { color: var(--accent); }
.t9-sum { margin: .45rem 0 0; font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.t9-num { counter-reset: t9; list-style: none; margin: 0; padding: 0; }
.t9-num li { counter-increment: t9; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0 .55rem; padding-block: .75rem; border-bottom: 1px solid var(--rule); }
.t9-num li::before { content: counter(t9); font: 650 1.25rem/1.15 var(--sans); color: var(--accent); font-variant-numeric: tabular-nums; }
.t9-num .ranked-title { font-size: 1rem; line-height: 1.32; letter-spacing: -.01em; }
.t9-dates { list-style: none; margin: 0; padding: 0; }
.t9-dates li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 0 .8rem; align-items: center; padding-block: .6rem; border-bottom: 1px solid var(--rule); }
.t9-dates li a { color: var(--ink); text-decoration: none; font-size: .9375rem; font-weight: 550; line-height: 1.32; }
.t9-dates li a:hover { color: var(--accent); }
.t9-dates .v-dot { margin-right: .4rem; }
.t9-game { display: block; margin-top: 1rem; padding: .75rem .9rem; border-radius: .6rem; background: color-mix(in srgb, var(--accent) 8%, var(--paper));
  color: var(--ink); text-decoration: none; font-size: .9375rem; line-height: 1.4; }
.t9-game:hover { background: color-mix(in srgb, var(--accent) 14%, var(--paper)); }
.t9-game-word { margin-right: .3rem; font: 600 .6875rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.t9-gamecard { display: grid; gap: .35rem; margin-top: .9rem; color: var(--ink); text-decoration: none; }
.t9-gamecard img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .45rem; background: var(--rule); }
.t9-gamecard b { font-weight: 700; }
.t9-gamecard span { font-size: .875rem; line-height: 1.4; color: var(--ink-2); }
.t9-gamecard:hover b { color: var(--accent); }

/* The feed beside a rail, and the feed alone in two columns. */
.t9-cols { display: grid; grid-template-columns: minmax(0, 1fr) 20.5rem; gap: 0 clamp(2rem, 4vw, 3.75rem); align-items: start; }
.t9-rail { position: sticky; top: .5rem; min-width: 0; }
.t9-railbox + .t9-railbox { margin-top: 1.6rem; }
.t9-feed > .day:first-child { margin-top: 1.5rem; }
@media (min-width: 64rem) {
  .t9-feed.is-two .day { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  .t9-feed.is-two .day > .day-label { grid-column: 1 / -1; }
  .t9-feed.is-two .day > .item { border-bottom: 1px solid var(--rule); }
  .t9-feed.is-two .day > .item + .item { border-top: 0; }
}

/* 9.1 «Повестка»: today with its first picture, the week numbered, what is ahead and the game — three columns. */
.home-t91 .t9-feed > .day:first-child { margin-top: 2rem; }
.t9-agenda { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .95fr); gap: 0 clamp(1.5rem, 3vw, 2.75rem); align-items: start; margin-top: .4rem; }
.t9-story { padding-block: .8rem; }
.t9-story + .t9-story { border-top: 1px solid var(--rule); }
.t9-story .t-pic { margin-bottom: .75rem; }
.t9-story .ranked-title { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -.012em; }
.t9-story.is-lead { padding-top: 1rem; }
.t9-story.is-lead .ranked-title { font-size: 1.5rem; line-height: 1.18; letter-spacing: -.025em; }

/* 9.1.1, 9.1 again (owner, 2026-10-28: «ВСе главные новости с фото. справа колонку уже с календарем даже если придется
   шрифт уменьшить. убрать блок игра плашкой который. убрать цифры из неделя»): every story with its picture — the first
   large, the others small beside their headlines, a story without one its headline alone; the week without numbers; the
   calendar's column narrower, its lines smaller; no game. */
.home-t911 .t9-agenda { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.15fr) minmax(0, .7fr); gap: 0 clamp(1.25rem, 2.5vw, 2.25rem); }
.home-t911 .t9-story:not(.is-lead):has(.t-pic) { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0 .85rem; align-items: start; }
.home-t911 .t9-story:not(.is-lead) .t-pic { --ar: 4 / 3; margin-bottom: 0; }
.home-t911 .t9-num li { grid-template-columns: minmax(0, 1fr); }
.home-t911 .t9-num li::before { content: none; }
.home-t911 .t9-num li:has(.t-pic) { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0 .8rem; align-items: start; }
.home-t911 .t9-num .t-pic { --ar: 4 / 3; }
.home-t911 .t9-dates li { grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0 .6rem; padding-block: .5rem; }
.home-t911 .t9-dates .v-leaf { width: 2.75rem; }
.home-t911 .t9-dates .v-leaf b { font-size: 1.125rem; }
.home-t911 .t9-dates li a { font-size: .8125rem; line-height: 1.3; }
/* A story without a picture of its own says its teaser, so it does not stand bare beside the pictures (owner, of one such
   on 9.1.2: «эта новость выглядит осиротевшей без текста на главной»). */
.home-t911 :is(.t9-story, .t9-num li).is-text .t9-sum { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; margin-top: .35rem; font-size: .875rem; line-height: 1.45; }
@media (max-width: 63.99rem) {
  .home-t911 .t9-agenda { grid-template-columns: minmax(0, 1fr); }
}

/* 9.1.2, 9.1.1 with the pictures larger (owner, 2026-10-28: «есть вариант фото как то крупнее сделать?»): today's first
   story large, the next two as cards side by side under it, their pictures over their headlines; the week four cards two
   by two, the same way. */
@media (min-width: 64rem) {
  .home-t912 .t9-agenda { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, .66fr); }
  .home-t912 .t9-agenda > .t9-col:first-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.1rem; align-content: start; }
  .home-t912 .t9-agenda > .t9-col:first-child > :is(.t9-head, .t9-story.is-lead) { grid-column: 1 / -1; }
  .home-t912 .t9-story:not(.is-lead), .home-t912 .t9-story:not(.is-lead):has(.t-pic) { display: block; padding-top: 1rem; border-top: 1px solid var(--rule); }
  .home-t912 .t9-story:not(.is-lead) .t-pic { --ar: 16 / 10; margin-bottom: .6rem; }
  .home-t912 .t9-story:not(.is-lead) .ranked-title { font-size: 1rem; }
  .home-t912 .t9-num { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.1rem; padding-top: 1rem; }
  .home-t912 .t9-num li, .home-t912 .t9-num li:has(.t-pic) { display: block; padding: 0; border-bottom: 0; }
  .home-t912 .t9-num li:nth-child(n+5) { display: none; }
  .home-t912 .t9-num .t-pic { --ar: 16 / 10; margin-bottom: .55rem; }
  .home-t912 .t9-num .ranked-title { font-size: .9375rem; line-height: 1.3; }
  /* A card without a picture: a blue rule over it, its headline, its teaser to a picture's height. */
  .home-t912 :is(.t9-story:not(.is-lead), .t9-num li).is-text { padding-top: .75rem; border-top: 3px solid var(--accent); }
  .home-t912 :is(.t9-story, .t9-num li).is-text .t9-sum { -webkit-line-clamp: 6; line-clamp: 6; }
}

/* 9.1.3, 9.1.2 with the desks of «Рубрики» between the band and the feed, three a row (owner, 2026-10-28: «теперь после
   главных сделай блок по 4 новости из рубрик как в другом варианте а потом ленту»). */
.home-t913 .t9-agenda + .t9-desks { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; margin-top: 2.75rem; }
.home-t913 .t9-all + .t9-feed > .day:first-child { margin-top: .5rem; }
/* On a phone «Главное» is 8.5's — the row of cards with the tabs — and the feed; the band and the desks are for a wide
   screen (owner's way since 2026-09-27: the phone's look and the computer's may differ). */
.t9-phone { display: none; }
@media (max-width: 62rem) {
  .home-t913 .t9-phone { display: block; }
  .home-t913 :is(.t9-agenda, .t9-desks, .t9-all) { display: none; }
  .home-t913 .t9-feed > .day:first-child { margin-top: 1.25rem; }
}
/* The desks one under another, the width of the page (owner: «сделай 4 но по 2 в ряд как до этого обычные новости но с
   фото», then «не так. блок 2 новости на всю ширину под ними еще 2. и следующая рубрика»): two stories a row, as the
   feed's in two columns, each with its picture beside its time, headline and two lines of the teaser. */
.t9-desk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.t9-dcard { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 0 1.1rem; align-items: start; padding-block: 1.1rem; border-bottom: 1px solid var(--rule); }
.t9-dcard.is-text { grid-template-columns: minmax(0, 1fr); }
.t9-dcard .t-pic { --ar: 16 / 10; }
.t9-dtext { min-width: 0; }
.t9-dwhen { display: block; margin-bottom: .3rem; font: 400 .75rem/1.3 var(--mono); color: var(--muted); }
.t9-dcard .ranked-title { font-size: 1.125rem; line-height: 1.25; letter-spacing: -.015em; }
.t9-dcard .t9-sum { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-top: .35rem; font-size: .875rem; line-height: 1.45; }
@media (max-width: 63.99rem) {
  .t9-desk-grid { grid-template-columns: minmax(0, 1fr); }
  .t9-dcard { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: 0 .9rem; }
  .t9-dcard .ranked-title { font-size: 1rem; }
}

/* 9.2 «Первая полоса»: the day's first story large with three beside it, the calendar a ribbon under them. */
.home-t92 .t9-cols { margin-top: .25rem; }
.t9-front { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: 1.1rem; padding-bottom: 1.4rem; border-bottom: 2px solid var(--ink); }
.t9-hero .t-pic { border-radius: .6rem; }
.t9-hero-text { margin-top: 1rem; }
.t9-hero:not(:has(.t-pic)) .t9-hero-text { margin-top: 0; }
.t9-kicker { margin: 0 0 .5rem; font: 600 .75rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.t9-hero-title { margin: 0; font-size: clamp(1.75rem, 1.15rem + 1.4vw, 2.5rem); line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; }
.t9-hero-title a { color: var(--headline); text-decoration: none; }
.t9-hero-title a:hover { color: var(--accent); }
.t9-hero .t9-sum { max-width: 46rem; font-size: 1.0625rem; }
.t9-seconds { display: grid; align-content: start; }
.t9-second { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0 .9rem; align-items: start; padding-block: .9rem; border-bottom: 1px solid var(--rule); }
.t9-second:first-child { padding-top: 0; }
.t9-second:last-child { border-bottom: 0; }
.t9-second:not(:has(.t-pic)) { grid-template-columns: minmax(0, 1fr); }
.t9-second .t-pic { --ar: 4 / 3; }
.t9-second .ranked-title { font-size: 1.0625rem; line-height: 1.28; letter-spacing: -.012em; }
.t9-ribbon { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.5rem; padding-block: 1rem; border-bottom: 1px solid var(--rule); }
.t9-ribbon-head { font: 600 .8125rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.t9-ribbon-head:hover { color: var(--accent); }
.t9-ribbon ol { display: flex; gap: 1.75rem; overflow-x: auto; list-style: none; margin: 0; padding: 0; scrollbar-width: none; }
.t9-ribbon ol::-webkit-scrollbar { display: none; }
.t9-ribbon li { display: flex; align-items: center; gap: .7rem; flex: 0 0 auto; width: 15.5rem; }
.t9-ribbon .v-leaf { flex: none; }
.t9-ribbon li a { color: var(--ink); text-decoration: none; font-size: .875rem; font-weight: 550; line-height: 1.3; }
.t9-ribbon li a:hover { color: var(--accent); }
.t9-ribbon .v-dot { margin-right: .35rem; }

/* 9.3 «Рубрики»: the top as four cards, the newest stories by desk, then the whole feed. */
.home-t93 .t9-feed > .day:first-child { margin-top: .5rem; }
.t9-cards { margin-top: .4rem; }
.t9-cards-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; margin-top: 1rem; align-items: start; }
.t9-card .t-pic { margin-bottom: .65rem; }
.t9-card .ranked-title { font-size: 1.0625rem; line-height: 1.28; letter-spacing: -.012em; }
.t9-card.is-text { padding-top: .8rem; border-top: 3px solid var(--accent); }
.t9-desks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.25rem clamp(1.25rem, 2.5vw, 2rem); margin-top: 2.5rem; align-items: start; }
.t9-desk-name { margin: 0; padding-bottom: .55rem; border-bottom: 2px solid var(--ink); font: 600 .8125rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.t9-desk-name a { color: var(--ink); text-decoration: none; }
.t9-desk-name a:hover { color: var(--accent); }
.t9-desk ul { list-style: none; margin: 0; padding: 0; }
.t9-desk ul li { padding-block: .7rem; border-bottom: 1px solid var(--rule); }
.t9-desk ul time { display: block; margin-bottom: .2rem; font: 400 .75rem/1.3 var(--mono); color: var(--muted); }
.t9-desk ul a { display: block; color: var(--headline); text-decoration: none; font-size: .9375rem; font-weight: 550; line-height: 1.33; }
.t9-desk ul a:hover { color: var(--accent); }
.t9-desk-ahead .t9-dates li a { font-size: .875rem; }
.t9-all { margin: 3rem 0 0; font-size: 1.375rem; letter-spacing: -.02em; }

/* 9.4 «Коротко»: the day's top as numbered lines with their teasers, the feed under it, what is ahead beside. */
.home-t94 .t9-main .t9-feed > .day:first-child { margin-top: 2.25rem; }
.t9-brief { padding-top: 1.2rem; }
.t9-date { margin: 0; font: 400 .875rem/1.2 var(--mono); color: var(--muted); }
.t9-brief h2 { margin: .3rem 0 .9rem; font-size: clamp(2rem, 1.35rem + 1.6vw, 2.75rem); line-height: 1.05; letter-spacing: -.035em; }
.t9-brief ol { counter-reset: t9b; list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.t9-brief li { counter-increment: t9b; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0 1rem; padding-block: 1.15rem; border-bottom: 1px solid var(--rule); }
.t9-brief li::before { content: counter(t9b, decimal-leading-zero); grid-row: 1 / span 2; font: 500 1.625rem/1.1 var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; }
.t9-brief li > * { grid-column: 2; }
.t9-brief-title { margin: 0; font-size: 1.375rem; line-height: 1.22; letter-spacing: -.02em; }
.t9-brief-title a { color: var(--headline); text-decoration: none; }
.t9-brief-title a:hover { color: var(--accent); }

/* A screen too narrow for the band: its parts one under another, the cards and the desks two a row. */
@media (max-width: 63.99rem) {
  .t9-agenda, .t9-front, .t9-cols { grid-template-columns: minmax(0, 1fr); }
  .t9-rail { position: static; margin-top: 2rem; }
  .t9-cards-row, .t9-desks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t9-ribbon { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
}
@media (max-width: 40rem) {
  .t9-cards-row, .t9-desks { grid-template-columns: minmax(0, 1fr); }
  .t9-second { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .t9-brief li { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .t9-brief li::before { font-size: 1.25rem; }
  .t9-brief-title { font-size: 1.1875rem; }
}

/* The game's mark beside the menu, on a phone only, as in 8.6: on a wide screen the game has its place on the page. */
.tb-game { display: none; }
@media (max-width: 62rem) {
  .tb-game { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; color: var(--ink); }
  .tb-game svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .tb-game circle { fill: currentColor; stroke: none; }
}