/* pages.css: THE STANDARD (1.18, PR 6). The other pages: the teachers' guide
   (its counters, a class period in three bars, the standards matrix), the
   standards page (a real table that stacks on a phone, a coverage strip),
   About (the game beside its device, the constellation, the five rules as an
   editorial list, the contact), the rulebook (nine beats on the film's
   parts), the documents (numbered, an index, an Updated label, a print
   sheet) and the 404 (a tape that never listed). Linked last by those pages
   (the `pages` head flag) and by the comps; the home never loads it. */

/* ── a page's head: crumb, eyebrow, title, lede, on the page's width ──── */
/* longhands: the rulebook's head is also the .wrap, whose side gutter must stay */
.phead { display: grid; gap: var(--s4); padding-top: var(--sec-y-minor); padding-bottom: var(--s6); }
.phead .crumb, .phead .eyebrow, .phead .t-h2, .phead .t-lede { margin: 0; }
.phead .t-h2 { max-width: 24ch; }

/* ── the counters (D5): four figures on a hairline ────────────────────── */
.counters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); margin: var(--s4) 0 0; padding-top: var(--s5); border-top: 1px solid var(--hair); }
@media (min-width: 720px) { .counters { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.counters div { display: grid; gap: 6px; min-width: 0; }
.counters dt { font: 600 12px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.counters dd { margin: 0; font: 700 clamp(36px, 4vw, 56px)/1 var(--num); letter-spacing: -0.035em; color: var(--gold-lt); font-variant-numeric: tabular-nums; }
.counters dd small { display: block; font: 600 12px/1.3 var(--mono); letter-spacing: 0.14em; color: var(--ink-mute); margin-top: 6px; }

/* ── the bars: a class period in three, a domain's lesson count ───────── */
.bars-fig { margin: var(--s5) 0 var(--s6); }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--s4); align-items: baseline; }
.bars .bar__k { font: 600 15px/1.3 var(--sans); color: var(--ink); }
.bars .bar__k a { color: var(--ink); text-decoration: none; }
.bars .bar__k a:hover { color: var(--gold-lt); }
.bars .bar__v { font: 600 12px/1.3 var(--mono); letter-spacing: 0.12em; color: var(--ink-mute); text-align: right; white-space: nowrap; }
.bars .bar__t { grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; background: var(--hair); position: relative; overflow: hidden; }
.bars .bar__t::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 50%); border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-lt)); }
.bars-fig figcaption { margin-top: var(--s3); }
.bars--matrix { margin: var(--s5) 0 var(--s6); }
.contact { display: grid; gap: var(--s3); padding: var(--s5); margin: var(--s7) 0; }
.contact .t-label { color: var(--ink-mute); }
.contact .t-body { margin: 0; }

/* ── the standards matrix (D6): a coverage strip, a table that stacks ── */
.coverage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s3); margin: var(--s6) 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .coverage { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.coverage li { display: grid; gap: 6px; padding-top: var(--s3); border-top: 1px solid var(--hair); min-width: 0; }
.coverage b { font: 700 clamp(28px, 3vw, 40px)/1 var(--num); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.coverage span { font: 600 12px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.coverage i { display: block; height: 4px; border-radius: 2px; background: var(--hair); position: relative; overflow: hidden; }
.coverage i::before { content: ''; position: absolute; inset: 0; width: var(--w, 50%); border-radius: 2px; background: var(--gold); }
.smatrix { width: 100%; border-collapse: collapse; margin: var(--s6) 0 var(--s7); }
.smatrix th, .smatrix td { text-align: left; vertical-align: top; padding: var(--s4) var(--s4) var(--s4) 0; border-top: 1px solid var(--hair); }
.smatrix thead th { font: 600 12px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); border-top: 0; padding-top: 0; }
.smatrix tbody th { width: 34%; font-weight: 400; }
.smatrix tbody th b { display: block; font: 600 19px/1.25 var(--num); letter-spacing: -0.015em; color: var(--ink); margin-bottom: 4px; }
.smatrix tbody th span { display: block; font: 400 15px/1.5 var(--sans); color: var(--ink2); }
.smatrix td { font: 400 15px/1.5 var(--sans); color: var(--ink2); }
.smatrix td.sim b { color: var(--pearl); font-weight: 600; }
.lchips { display: flex; flex-wrap: wrap; gap: 8px; }
.lchip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--hair); color: var(--ink); font: 600 13px/1.25 var(--sans); text-decoration: none !important; transition: border-color var(--d-ui) var(--ease), color var(--d-ui) var(--ease); }
.lchip:hover { border-color: var(--hair-strong); color: var(--gold-lt); }
@media (max-width: 719px) {
  .smatrix thead { display: none; }
  .smatrix, .smatrix tbody, .smatrix tr, .smatrix th, .smatrix td { display: block; width: auto; }
  .smatrix tr { display: grid; gap: var(--s3); padding: var(--s4) 0; border-top: 1px solid var(--hair); }
  .smatrix th, .smatrix td, .smatrix tbody th { border: 0; padding: 0; width: auto; }
  .smatrix td.sim b { display: none; }
  .smatrix td::before { content: attr(data-l); display: block; font: 600 12px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; }
}

/* ── About: the game, the constellation, the rules, who, the contact ─── */
.about__game { margin: var(--s4) 0 var(--s7); max-width: var(--w-prose); }
.about__game p { margin: 0 0 var(--s4); }
.rules { list-style: none; margin: var(--s5) 0 var(--s7); padding: 0; counter-reset: rule; }
.rules li { counter-increment: rule; display: grid; grid-template-columns: 80px 1fr; gap: var(--s4); padding: var(--s5) 0; border-top: 1px solid var(--hair); font: 400 17px/1.62 var(--sans); color: var(--ink2); margin: 0; }
.rules li::before { content: counter(rule, decimal-leading-zero); font: 700 clamp(44px, 5vw, 64px)/0.9 var(--num); letter-spacing: -0.04em; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.rules li b { display: block; font: 600 clamp(19px, 1.8vw, 24px)/1.25 var(--num); letter-spacing: -0.015em; color: var(--ink); margin-bottom: var(--s2); }
@media (max-width: 599px) { .rules li { grid-template-columns: 1fr; gap: var(--s2); } }
.who { font: 400 clamp(18px, 1.6vw, 22px)/1.5 var(--sans); color: var(--ink); max-width: 52ch; }
.mailto { margin: var(--s3) 0 var(--s4); }
.mailto a { display: inline; font: 700 clamp(24px, 4.2vw, 52px)/1.15 var(--num); letter-spacing: -0.03em; color: var(--gold-lt); text-decoration: none !important; background: linear-gradient(var(--gold-lt), var(--gold-lt)) no-repeat 0 100% / 0 2px; transition: background-size 700ms var(--ease-out); overflow-wrap: anywhere; }
.mailto a:hover, .mailto a:focus-visible, .is-in .mailto a, .mailto.is-in a { background-size: 100% 2px; }

/* ── the rulebook: nine beats on the film's parts ─────────────────────── */
.dossier--book { padding-top: var(--s4); padding-bottom: var(--s8); }
.dossier--book .dossier__main { max-width: 820px; gap: var(--s7); }
.beat { display: grid; gap: var(--s4); padding: var(--s6) 0 0; border-top: 1px solid var(--hair); scroll-margin-top: calc(var(--site-head-h) + var(--s5)); }
.beat__head { display: flex; align-items: baseline; gap: var(--s2); margin: 0; font: 600 13px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink2); }
.beat__head b { color: var(--gold); font-weight: 600; }
.beat h2 { max-width: 44ch; margin: 0; }
.beat__fig { position: relative; margin: var(--s2) 0; min-width: 0; }
.beat__fig--film { padding: var(--s4) var(--s4) 30px; }
.beat__fig--film .film__plot { aspect-ratio: 1000 / 420; transform: none; min-height: 0; }
.beat__fig--film .film__plot--tall { display: none; }
@media (max-width: 599px) {
  .beat__fig--film .film__plot--wide { display: none; }
  .beat__fig--film .film__plot--tall { display: block; }
  .beat__fig--film .film__plot { aspect-ratio: 390 / 330; }
}
.beat .t-body { margin: 0; }
.beat .rule { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: baseline; margin: 0; padding-top: var(--s3); border-top: 1px dashed var(--hair); font: 400 15px/1.5 var(--sans); color: var(--ink2); max-width: 64ch; }
.beat .rule .t-label { color: var(--ink-mute); white-space: nowrap; }
.chainrow { list-style: none; margin: 0; padding: var(--s5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.chainrow li { margin: 0; font: 700 clamp(22px, 3vw, 36px)/1 var(--num); letter-spacing: -0.02em; color: var(--ink2); }
.chainrow li + li::before { content: '›'; margin-right: var(--s3); color: var(--ink-mute); font-weight: 400; }
.chainrow .surge { color: var(--gold-lt); text-shadow: 0 0 14px rgba(var(--gold-rgb), 0.5); }
.beat__fig--race { padding: var(--s5) var(--s5) var(--s4); display: grid; gap: var(--s3); }
.beat__fig--race .t-label { color: var(--ink-mute); }
.beat__fig--race .t-label b { color: var(--ink); font: 700 16px/1 var(--num); letter-spacing: 0; }
.beat__fig--race .race { margin: var(--s3) 0 var(--s6); }
.race__marks { display: flex; justify-content: space-between; gap: var(--s4); }
.race__marks .down { color: var(--down); }
.more { list-style: none; margin: 0; padding: 0; display: grid; }
.more li { margin: 0; }
.more li a { display: grid; gap: 4px; padding: var(--s4) 0; border-top: 1px solid var(--hair); color: var(--ink); text-decoration: none !important; }
.more .rt { font: 600 19px/1.25 var(--num); letter-spacing: -0.015em; transition: color var(--d-ui) var(--ease); }
.more .rd { font: 400 15px/1.5 var(--sans); color: var(--ink-mute); max-width: 64ch; }
.more li a:hover .rt { color: var(--gold-lt); }
.rest { display: grid; gap: var(--s3); padding-top: var(--s6); border-top: 1px solid var(--hair); }
.rest .t-h3 { margin: var(--s4) 0 0; }
.rest .t-body { margin: 0; }
.rest .t-body b { color: var(--ink); }

/* ── the documents: numbered, an index, an Updated label, a print sheet ── */
.dossier--doc { padding-top: var(--s6); padding-bottom: var(--s8); }
.dossier--doc .dossier__main { max-width: 640px; }
.dossier--doc .prose { margin: 0; }
@media (min-width: 900px) {
  .toc--doc { max-height: calc(100svh - var(--site-head-h) - var(--s6)); overflow-y: auto; scrollbar-width: thin; }
  .toc--doc a { min-height: 32px; font-size: 14px; }
}
.legal { counter-reset: sec; }
.legal h1 { margin: 0 0 var(--s4); }
.legal .updated { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s3); margin: 0 0 var(--s3); font: 600 15px/1.4 var(--num); color: var(--ink); }
.legal .updated .t-label { color: var(--ink-mute); }
.legal .covers { font: 400 14px/1.5 var(--sans); color: var(--ink-mute); margin: 0 0 var(--s7); }
.legal h2 { counter-increment: sec; display: grid; grid-template-columns: 40px 1fr; gap: var(--s2); align-items: baseline; font-size: clamp(21px, 2vw, 26px); line-height: 1.2; letter-spacing: -0.018em; margin: var(--s7) 0 var(--s3); scroll-margin-top: calc(var(--site-head-h) + var(--s4)); }
.legal h2::before { content: counter(sec, decimal-leading-zero); font: 600 13px/1 var(--mono); letter-spacing: 0.12em; color: var(--ink-mute); }
.legal p, .legal li { color: var(--ink2); }
.legal .btn { margin: var(--s2) 0; }
@media print {
  .site-head, .site-foot, .toc, #cookieChoice, #cookieState, .kurus-cameo { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .dossier { display: block; padding: 0; }
  .legal h1, .legal h2, .legal p, .legal li, .legal strong, .legal .updated, .legal .covers { color: #000 !important; }
  .legal h2::before { color: #555; }
  .legal a { color: #000; text-decoration: underline; }
}

/* ── the 404: a tape that never listed ────────────────────────────────── */
.lost { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: var(--s7) 0; }
.lost__in { width: min(560px, 100%); display: grid; justify-items: center; gap: var(--s3); }
.lost h1, .lost .eyebrow { margin: 0; }
.lost .whisper { font: italic 500 16px/1.6 var(--disp); color: var(--ink2); margin: 0 auto var(--s4); max-width: 44ch; }
.lost nav { display: grid; gap: var(--s2); justify-items: center; width: 100%; }
.lost nav .btn { width: min(340px, 100%); }
.lost__tape { position: relative; width: 100%; margin: 0 0 var(--s3); display: grid; gap: var(--s3); }
.lost__line { display: block; width: 100%; height: auto; overflow: visible; }
.lost__line path { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(var(--gold-rgb), 0.45)); animation: lost-draw 1.8s var(--ease-io) 200ms forwards; }
@keyframes lost-draw { to { stroke-dashoffset: 0; } }
.lost__marks { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: var(--s6); }
.lost__marks li { display: grid; gap: 4px; margin: 0; font: 600 12px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.lost__marks li b { font: 700 24px/1 var(--num); color: var(--ink); }
.lost .kurus-cameo { margin: var(--s3) 0 0; }
@media (prefers-reduced-motion: reduce) { .lost__line path { animation: none; stroke-dashoffset: 0; } }

/* ONE PATH (1.20): About points at the Learn hub's six ways; no second list */
.about__ways { display: grid; gap: var(--s3); padding: var(--s7) 0; margin: var(--s7) 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.about__ways > * { margin: 0; }