/* round 8 (6): at a desk no hairline over the photo's corner (the photo's own edge rounds it; the ring stays on the phone, its
   photo on top against the white page) */
@media (min-width: 901px) { .closing .panel { box-shadow: none; } }
/* (4) the band spans the hero's two edges at a desk: each row's right-most item (the Cambridge line, the source) ends on the wrap's
   right edge (the hero photo's), both rows still starting on its left; the 32 px before the source kept as its least */
@media (min-width: 901px) {
  .numbers:has(.basis:empty) .credential { margin-left: auto; }
  .numbers:has(.basis:empty) .source { margin-left: auto; padding-left: 32px; }
}
/* (5) at a desk: ≥48 px from the logo to the first menu item in every language (the bar's gaps a step tighter, «Вход» the quiet
   text link it was); the hero's text column top-aligned to the photo, so the eyebrow sits at one height in en, ru and uz */
@media (min-width: 901px) {
  .bar .wrap { gap: 48px; }
  .bar .links { gap: 24px; }
  .bar nav { gap: 22px; }
  .hero .wrap { align-items: start; min-height: 0; padding-block: 72px 56px; }
}
@media (min-width: 901px) {
  .numbers:has(.basis:empty) .wrap { flex-wrap: wrap; align-items: center; column-gap: 0; }
  .numbers:has(.basis:empty) .wrap::before { order: 3; }
  .numbers:has(.basis:empty) .counted { order: 0; }
  .numbers .counted { display: grid; grid-template-columns: auto auto auto; grid-template-areas: 'nine words faces' 'nine go faces'; column-gap: 14px; row-gap: 2px; align-items: center; }
  .numbers .counted b { grid-area: nine; }
  .numbers .counted > span:not(.faces):not(.go) { grid-area: words; align-self: end; }
  .numbers .counted .faces { grid-area: faces; margin-left: 6px; }
  .numbers .counted .go { grid-area: go; align-self: start; font-size: 14px; }
  .numbers:has(.basis:empty) ul { order: 0; flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
    margin: 0 0 0 28px; order: 1; }
  .numbers:has(.basis:empty) li { padding: 0 16px; border-left: 1px solid var(--line); }
  .numbers:has(.basis:empty) li + li::before { content: none; }
  .numbers:has(.basis:empty) ul b { display: block; font-size: 22px; font-weight: 800; line-height: 1.15; color: var(--brand-deep); margin: 0 0 2px; letter-spacing: -.01em; }
  .numbers:has(.basis:empty) ul span { display: block; font-size: 13px; line-height: 1.35; color: var(--muted); }
  .numbers:has(.basis:empty) .credential { order: 2; margin-left: 0; padding-left: 16px; border-left: 1px solid var(--line); max-width: 230px; }
  .numbers:has(.basis:empty) .source { order: 4; margin-left: auto; }
}
/* (3) the band at a desk two columns on one grid: the 9+ claim (figure, words, faces, «All results →») with the Cambridge line
   under it on the left; the three figures with their hairlines on the right, wide enough that no caption runs past two lines,
   the source directly under them, on their left edge */
@media (min-width: 901px) {
  .numbers:has(.basis:empty) .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'counted figs' 'cred src';
    column-gap: 40px; row-gap: 14px; align-items: center; }
  .numbers:has(.basis:empty) .wrap::before { content: none; display: none; }
  .numbers:has(.basis:empty) .counted { grid-area: counted; }
  .numbers:has(.basis:empty) ul { grid-area: figs; margin: 0; }
  .numbers:has(.basis:empty) .credential { grid-area: cred; align-self: start; max-width: none; margin: 0; padding: 0; border: 0; text-align: left; }
  .numbers:has(.basis:empty) .source { grid-area: src; align-self: start; margin: 0; padding: 0 0 0 16px; text-align: left; }
}
@media (min-width: 901px) {
  .numbers:has(.basis:empty) ul { display: flex; justify-content: space-between; column-gap: 24px; }
  .numbers:has(.basis:empty) li { flex: 0 1 auto; max-width: 15.5em; }
  .numbers:has(.basis:empty) .source { justify-self: stretch; text-align: center; padding: 0; }
}
/* (3) the 1440 figures three equal columns fixed on the grid, so the dividers stand where they stand in every language; the source
   left-aligned to the first figure (its hairline and padding); one-letter words held to the next (js/home.js) */
@media (min-width: 901px) {
  .numbers:has(.basis:empty) ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; }
  .numbers:has(.basis:empty) li { max-width: none; padding: 0 16px; }
  .numbers:has(.basis:empty) .source { justify-self: stretch; text-align: left; padding-left: 17px; }
}
@media (min-width: 901px) {
  .visit:has(.frame img) .wrap { max-width: var(--wrap); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px;
    align-items: center; text-align: left; }
  .visit:has(.frame img) .frame { margin: 0; }
  .visit:has(.frame img) .frame img { aspect-ratio: 4 / 3; }
  .visit:has(.frame img) .frame figcaption { text-align: left; }
  .visit:has(.frame img) .wrap > .text { max-width: none; margin: 0; }
  .visit:has(.frame img) .wrap > .text > * { max-width: none; margin-inline: 0; }
}
@media (min-width: 901px) { .closing { padding-bottom: 32px; } }
@media (min-width: 901px) {
  .numbers .counted .faces { display: none; }
  /* without the faces the claim's column is the words' width: held at r18's 399 px, so the figures and their dividers stand where
     they stood, the same in every language */
  .numbers:has(.basis:empty) .wrap { grid-template-columns: 399px minmax(0, 1fr); }
}

/* Round 20 (lane D's nineteenth judging, A− 8.4 / A− 8.5: the six it ranked) */
@media (min-width: 901px) {
  /* (1) the 9+ claim flush on the content line (144 px at 1440), one edge with the hero headline and the Cambridge line; the
     column held at r19's 399 px (the figures stand where they stood, in every language), the freed width the gutter before them */
  .numbers:has(.basis:empty) .counted { justify-self: start; justify-content: start; margin: 0; }
  /* (4) the hero: the headline a clear step larger, the lede a narrower measure; calls and address stay above the fold */
  .hero h1 { font-size: 64px; line-height: 1.04; letter-spacing: -.025em; }
  .hero .lead { max-width: 420px; }
  /* (6) the partners' five marks larger and spread over the row (greyscale kept) */
  .partners ul { flex-wrap: nowrap; justify-content: space-between; gap: 0 32px; }
  .partners img { height: calc(var(--h, 34) * 1.45px); }
}
@media (min-width: 901px) {
  /* (5) the logo's check on the content line (the picture's own 9 px of air pulled back); the band's foot to the sections' rhythm */
  .bar .wrap > a:first-child { margin-left: -9px; }
  .numbers + section { padding-top: 72px; }
  /* ru's lede a few px narrower (400), so «вашего пути.» does not end alone on its line (the words unchanged) */
  html[lang="ru"] .hero .lead { max-width: 400px; }
}
@media (min-width: 901px) { .news .body { padding-inline: 0; } }
/* (5) 1440: the 9+ words one line and the phone's two 9.0 avatars beside «All results →» under them (r19 (3)'s desk hide retired) */
@media (min-width: 901px) {
  .numbers .counted { grid-template-columns: auto auto 1fr; grid-template-areas: 'nine words words' 'nine faces go'; row-gap: 8px; }
  .numbers .counted .faces { display: flex; }
  .numbers .counted > span:not(.faces):not(.go) + .faces { margin-left: 0; }
  .numbers .counted > span:not(.faces):not(.go) { max-width: none; width: auto; white-space: nowrap; }
  .numbers .counted .go { align-self: center; margin-left: 4px; }
  /* D's ruling (to-e 20:0x): while the hero chip shows, the band adds a second person and never repeats the chip's student */
  .numbers .counted .face:first-child { display: none; }
}
/* (2) 1440: «9+» and its words one figure (the words on the numeral's baseline, the face and «All results →» under them), and the
   three figures' numerals on the 9+'s cap line */
@media (min-width: 901px) {
  .numbers .counted b, .numbers .counted > span:not(.faces):not(.go) { align-self: baseline; }
  .numbers:has(.basis:empty) ul { align-self: start; margin-top: 5px; }
}
@media (min-width: 901px) {
  .numbers .counted .faces { display: none; }
  /* (2) the 9+ cluster two tiers again: the words on the numeral's baseline (kept), «All results →» under the numeral on the content edge */
  .numbers .counted { grid-template-areas: 'nine words' 'go go'; grid-template-columns: auto 1fr; row-gap: 6px; }
  .numbers .counted .go { grid-area: go; justify-self: start; margin-left: 0; }
}
@media (min-width: 901px) {
  .programs .mark { display: block; margin-top: auto; align-self: flex-start; }
  .programs img.mark, .programs .marks img { height: 30px; width: auto; filter: grayscale(1); opacity: .6; }
  .programs .marks { display: flex; gap: 14px; align-items: center; }
  .programs .mark.level { display: inline-block; padding: 4px 10px; border-radius: 6px; background: var(--tint); font-size: 12px; font-weight: 800;
    letter-spacing: .04em; color: var(--brand-deep); line-height: 1.4; }
  .programs ul:not(:has(dd:not(:empty))) li > .mark + dl + a, .programs ul:not(:has(dd:not(:empty))) li > .mark ~ a { margin-top: 18px; }
}
/* (2) the band's foot trimmed back to r22's, so the programmes eyebrow comes wholly above the 900 px fold again (r23 (5)'s rule) */
@media (min-width: 901px) { .numbers:has(.basis:empty) { padding-top: 24px; } }
@media (min-width: 901px) {
  .programs ul, .programs ul:not(:has(dd:not(:empty))) { grid-template-rows: repeat(5, auto); row-gap: 0; }
  .programs li, .programs ul:not(:has(dd:not(:empty))) li { display: grid; grid-row: span 5; grid-template-rows: subgrid; gap: 0; align-content: start; }
  .programs li > h3 { grid-row: 1; }
  .programs li > p, .programs ul:not(:has(dd:not(:empty))) li > p { grid-row: 2; margin: 6px 0 16px; align-self: start; }
  .programs li > .mark { grid-row: 3; display: inline-block; justify-self: start; align-self: end; margin: 0; width: max-content; max-width: 100%; white-space: nowrap; }
  .programs li > dl { grid-row: 4; margin: 16px 0 0; }
  .programs li > a, .programs ul:not(:has(dd:not(:empty))) li > a, .programs ul:not(:has(dd:not(:empty))) li > .mark ~ a { grid-row: 5; margin-top: 18px; align-self: end; }
}
/* (2) 1440: the three portraits one row of one size, each photo scaled so the head (crown to chin, --head: its share of its own
   photo's height) is the same 40 % of every frame and the eyes sit on one line (20 %); one cooler, quieter grade and a navy rise from
   the foot, so the tree, the office and the shelves read as one set. The score and name stacked on the foot. */
@media (min-width: 901px) {
  .hero .wins { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; align-self: start; height: auto; min-height: 0; aspect-ratio: auto; }
  .hero .wins .win:first-child { grid-row: auto; }
  .hero .wins .win picture { flex: none; aspect-ratio: 176 / 290; }
  .hero .wins .win picture img { --h: max(calc(.40 / var(--head, .4) * 100cqh), 75cqw);
    top: clamp(calc(100cqh - var(--h)), calc(20cqh - var(--eye, .2) * var(--h)), 0px); }
  .hero .wins .win .cap { flex: 1 1 auto; display: grid; align-content: start; gap: 2px; padding: 10px 14px 12px; }
  .hero .wins .win .cap b, .hero .wins .win:first-child .cap b { font-size: 36px; line-height: 1; }
  .hero .wins .win .cap .name, .hero .wins .win:first-child .cap .name { font-size: 14px; white-space: normal; overflow: visible; }
}
@media (min-width: 901px) {
  .stories { padding: 56px 0; }
  .stories .wrap { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'head roll' 'head more'; column-gap: 40px; row-gap: 10px; align-items: center; }
  .stories .head { grid-area: head; margin: 0; text-align: left; max-width: 200px; }
  .stories .head p:not(.eyebrow) { display: none; }
  .stories ul { grid-area: roll; gap: 12px; }
  .stories .more { grid-area: more; justify-self: end; margin: 0; }
  .stories .story .body { padding: 14px 16px; column-gap: 14px; }
  .stories .story .name { white-space: nowrap; font-size: 16px; }
}
/* (1) THE CAP + (2) no echo: at a desk the hero already shows the three results, so the section is its head (the words in one column
   wide enough for the longest heading in every language), its line and «All results →»; the roll stays in the markup for the phone
   (and for a fourth result, which then leads as the phone's story card does) */
@media (min-width: 901px) {
  .stories { padding: 48px 0; }
  .stories .wrap { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'head more'; align-items: end; }
  .stories .head { max-width: none; }
  .stories .head h2 { min-width: max-content; }
  .stories .head p:not(.eyebrow) { display: block; margin: 8px 0 0; max-width: 62ch; color: var(--muted); }
  .stories ul { display: none; }
}
/* (2) 1440: no results section while the hero holds all three results; the band is the results (its «All results →» the one link,
   home.js points it at the full results and sends #results to the band). The phone's results exactly as r27 */
@media (min-width: 901px) {
  .stories { display: none; }
  .numbers { scroll-margin-top: 72px; }
}
@media (min-width: 901px) {
  .programs .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 32px; }
  .programs .head { grid-column: 2; grid-row: 1; align-self: start; margin-bottom: 40px; }
  .programs .lesson { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; width: min(100%, 320px); margin: 0 0 40px; }
  .programs .wrap > ul { grid-column: 1 / -1; }
}
/* (4) the programme cards at a desk: four columns of one width (the chips a touch tighter, so the long Cambridge one is one line inside its card, and wraps there, never widening it); no chip row where
   there is no chip (that card's line takes the row); every card's action on one shared line at its foot */
@media (min-width: 901px) {
  .programs ul, .programs ul:not(:has(dd:not(:empty))) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .programs li > .mark { white-space: normal; width: auto; max-width: 100%; text-wrap: balance; letter-spacing: .01em; padding: 4px 8px; }
  .programs li > .mark:empty { display: none; }
  .programs li:has(> .mark:empty) > p, .programs ul:not(:has(dd:not(:empty))) li:has(> .mark:empty) > p { grid-row: 2 / span 2; }
  .programs li > a, .programs ul:not(:has(dd:not(:empty))) li > a, .programs ul:not(:has(dd:not(:empty))) li > .mark ~ a { align-self: start; }
}
/* (5) one rule for section heads: every head centred (the desk results head, the one left-aligned, is gone with (2)) */
@media (min-width: 901px) { main .head { text-align: center; } }
/* (2) desk programmes: the class photo a full-width short band (the cards' width, about a third of a screen high) between the centred
   head and the cards: the phone's order, made wide. No photo beside the head */
@media (min-width: 901px) {
  .programs .wrap { display: block; }
  .programs .head { margin-bottom: 32px; }
  .programs .lesson { width: auto; margin: 0 0 32px; }
  .programs .lesson img { aspect-ratio: 1152 / 310; object-position: 50% 42%; }
}
/* (4) the figures band one proof block. Desk: the claim's 399 px column as before (9+ with its words on its baseline, «All results →»
   under the numeral on the content edge), now with the Cambridge credential as a mark beside «All results →» (not a third row);
   «According to Innovative Centre» directly under the three figures it qualifies, which stand where they stood. The band's link keeps
   its words (display: contents lays its parts on the band's grid; 88 px = the 9+ and its 14 px gap). The phone: 15+ stacked as
   50 000+ and 95 % */
@media (min-width: 901px) {
  .numbers:has(.basis:empty) .wrap { grid-template-columns: 88px minmax(0, max-content) minmax(0, 1fr) calc(100% - 439px);
    grid-template-areas: 'nine words words figs' 'go go cred src'; column-gap: 0; row-gap: 10px; align-items: start; }
  .numbers .counted { display: contents; }
  .numbers .counted b { grid-area: nine; align-self: baseline; }
  .numbers .counted > span:not(.faces):not(.go) { grid-area: words; align-self: baseline; justify-self: start; }
  .numbers .counted .faces { display: none; }
  .numbers .counted:focus-visible .go { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
  .numbers .counted .go { grid-area: go; align-self: start; justify-self: start; margin: 0; }
  .numbers:has(.basis:empty) .credential { grid-area: cred; align-self: start; max-width: none; margin: 0 40px 0 14px; padding: 1px 0 0 14px;
    border-left: 1px solid var(--line); line-height: 1.35; text-align: left; text-wrap: balance; }
  .numbers:has(.basis:empty) ul { grid-area: figs; margin: 5px 0 0; align-self: start; }
  .numbers:has(.basis:empty) .source { grid-area: src; align-self: start; margin: 0; padding: 0 0 0 17px; text-align: left; }
}
/* (5) desk air: one step of white between the programme cards, the visit panel and the news head */
@media (min-width: 901px) {
  .programs { padding-bottom: 40px; }
  .visit, .visit:not(:has(.frame img)) { padding-top: 40px; }
}
/* (2) desk class band: 960 px wide at most, centred over the cards, so the 1200 px file is drawn at most 1.6× at 2× (it was 1152 px, 1.9×);
   a new crop (home/img/class-band-*) higher in the room: the flags' «Innovative Centre» whole, every face in */
@media (min-width: 901px) {
  .programs .lesson { max-width: 960px; margin-inline: auto; }
  .programs .lesson img { aspect-ratio: 1200 / 375; object-position: 50% 50%; }
}
/* (5) desk news one block: three rows with rules (the title, then its line), as the phone's; the white under it the page's step */
@media (min-width: 901px) {
  .news ul { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
  .news li a, .news li a:hover { border-width: 0 0 1px; border-style: solid; border-color: transparent transparent var(--line); border-radius: 0; }
  .news .body, .news.aged .body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 40px; align-items: baseline; padding: 18px 0; }
  .news h3, .news.aged h3 { margin: 0; font-size: 18px; }
  .news { padding-bottom: 80px; }
}
@media (min-width: 901px) { .closing h2 { font-size: 36px; } }
/* (3) the desk h1 the text column's full measure (pretty: no lone last word, no narrowing); the phone keeps r30's balance */
@media (min-width: 901px) { h1 { text-wrap: pretty; } }
/* en's four short words cannot fill 552 px in two lines at 64 px (330 px, the gutter D saw) nor take one: a size step for en alone, so
   its two lines fill the measure as ru's and uz's already do (547 / 542 px) */
@media (min-width: 901px) { html[lang="en"] .hero h1 { font-size: 88px; } }
/* (2) the desk fold, en: the text column ends level with the portraits' foot (±8 px; r31 ended ≈64 px under it). The calls' and the
   lines' spacing tightened first; at 88 px it still ends ≈40 px under, so en a smaller step (72 px: two lines of the measure still).
   ru and uz unchanged */
@media (min-width: 901px) {
  html[lang="en"] .hero h1 { font-size: 72px; margin-bottom: 12px; }
  html[lang="en"] .hero .lead { margin-bottom: 22px; }
  html[lang="en"] .hero .next, html[lang="en"] .hero .where { margin-top: 6px; }
}
/* (3) the desk class band seated on the card grid with today's file: two cards wide (the grid's two columns and their gap), flush
   with cards 3–4, so its edges are the grid's edges and the 1200 px file is drawn under 2.2× smaller (never enlarged at 2×) */
@media (min-width: 901px) {
  .programs .lesson { max-width: none; width: calc((100% - 3 * 24px) / 2 + 24px); margin-inline: auto 0; }
}

/* Round 33 (lane D's r32 judging, A− 9.0 / A− 9.1; to-e 2026-11-11 04:5x) */
/* (1) the programmes row on one axis: a split head. The eyebrow and h2 left-aligned over cards 1–2, centred on the photo's height;
   the photo (564 px at 1440) over cards 3–4, as r32 seated it; the cards' grid under both. The phone unchanged */
@media (min-width: 901px) {
  .programs .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; }
  .programs .head { grid-column: 1 / span 2; grid-row: 1; align-self: center; justify-self: start; text-align: left; max-width: none; margin: 0 0 32px; }
  .programs .head h2 { margin-bottom: 0; }
  .programs .lesson { grid-column: 3 / span 2; grid-row: 1; justify-self: stretch; width: auto; margin: 0 0 32px; }
  .programs .wrap > ul { grid-column: 1 / -1; }
}
/* (5) the header's mark on the 144 px column: r32's trimmed file has no air of its own, so the 9 px pull-back above («the logo's check on the content line») is retired; drawn
   160 × 40 (was 184 × 46), so the check is no heavier than the nav's words; the sizes say 160 */
@media (min-width: 901px) {
  .bar .wrap > a:first-child { margin-left: 0; }
  .bar img { height: 40px; }
}
/* Round 34 (lane D's r33 judging, A− 9.1 / A− 9.2; to-e 2026-11-11 05:5x) */
/* (1) the programme cards at 901–1100 px: a 2 × 2 grid, so «Cambridge English», ru «Английский язык» and the Cambridge chip stay
   inside their cards in every language (four columns there were ~195 px). 1440 and the phone unchanged */
@media (min-width: 901px) and (max-width: 1100px) {
  .programs ul, .programs ul:not(:has(dd:not(:empty))) { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
}
/* Round 35 (lane D's r34 judging, A− 9.2 / A− 9.3; to-e 2026-11-11 06:2x) */
/* (2) every programme card the same parts: no words on the page name a chip for IELTS or SAT / AP that their titles do not (r26 (6)),
   so at 901–1100 px each card's line keeps one measure (24 em, ~ two thirds of the card) and the foot link stays pinned to the card's foot:
   IELTS's and SAT / AP's room reads as air under a line the same width as their neighbours', not as a missing chip */
@media (min-width: 901px) and (max-width: 1100px) {
  .programs li > p { max-width: 24em; text-wrap: balance; }
}
/* Round 36 (lane D's r35 judging; to-e 2026-11-11 07:2x) */
/* (2) one card skeleton at 901–1100: the mark chip leaves its own band and sits in the title row (right, small), so a card with no
   chip loses no band and all four share title · line · link; 2 × 2, the 24 em line and the links level per row kept */
@media (min-width: 901px) and (max-width: 1100px) {
  .programs li, .programs ul:not(:has(dd:not(:empty))) li { grid-template-columns: max-content minmax(0, 1fr); column-gap: 12px; }
  .programs li > :is(p, dl, a), .programs ul:not(:has(dd:not(:empty))) li > :is(p, dl, a) { grid-column: 1 / -1; }
  .programs li > h3, .programs ul:not(:has(dd:not(:empty))) li > h3 { grid-column: 1; }
  .programs li > .mark, .programs ul:not(:has(dd:not(:empty))) li > .mark { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; max-width: 100%;
    white-space: normal; text-wrap: balance; text-align: right; font-size: 11px; padding: 3px 7px; }
  .programs li > p, .programs li:has(> .mark:empty) > p, .programs ul:not(:has(dd:not(:empty))) li > p,
  .programs ul:not(:has(dd:not(:empty))) li:has(> .mark:empty) > p { grid-row: 2; }
}