/* Home page (from the locked prototype): hero e-file, stacked pieces,
   journey, chapters, plan-to-review, STEP-20, ecosystem, insights, finale. */
/* ---------- Hero ---------- */
.hero { padding-block: clamp(1.5rem, 4vh, 3rem) clamp(3rem, 8vh, 5rem); }
.hero-grid { display: grid; grid-template-columns: 8fr 5fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; min-height: min(calc(100dvh - var(--nav-h) - 6rem), 44rem); }
.hero .eyebrow { font-size: .9375rem; color: var(--muted); }
.hero h1 { margin-top: 1.5rem; font-size: clamp(1.7rem, 3.05vw, 2.85rem); line-height: 1.22; }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; white-space: nowrap; }
@media (max-width: 520px) { .hero h1 .line { white-space: normal; } }
/* the intro's per-word masks on phones (home.js): the same room for descenders as .line */
.hero h1 .hw-mask { padding-bottom: .12em; margin-bottom: -.12em; }
.hero .lede { max-width: 31rem; margin-top: 1.5rem; color: var(--fg-2); font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.6; }
.hero .ctas { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2.25rem; }

/* The e-file: eight ranks from "Apply" to "Funded-trader consideration". Each
   square is narrower than the one below, like the floor in the mark. */
.stage { position: relative; width: 100%; max-width: 31rem; justify-self: end; }
.stage .drawing { top: -1.75rem; right: -2rem; width: 15rem; height: 15rem; --sq: 3.5rem; }
.file { --pad: 1.75rem; --track: 8rem; --row: 3.9rem; --promo-h: 5.75rem; --pw: 3.5rem; padding: calc(var(--pad) + var(--promo-h) - .5rem) var(--pad) calc(var(--pad) - .25rem);
  /* where the S sits over the last rank, as home.js measures it (layoutGoal), so it is drawn there from first paint */
  --my: calc(var(--pad) - .5rem + var(--row) * .602 * .72); }
.ranks { display: flex; flex-direction: column-reverse; }
.rank { display: grid; grid-template-columns: 1.5rem var(--track) minmax(0, 1fr); align-items: center; column-gap: 1rem; height: calc(var(--row) * var(--k)); }
.rank .rk { font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; }
.rank .cell { justify-self: center; width: calc(100% * var(--w)); height: 100%; background: var(--sq-a); clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%); transition: background-color .5s var(--ease); }
.rank:nth-child(odd) .cell { background: var(--sq-b); }
.rank .lbl { font-size: .9375rem; line-height: 1.3; color: var(--muted); transition: color .45s; }
.rank .lbl b { font-weight: 500; }
.rank.on .lbl, .rank.cur .lbl { color: var(--fg); }
.rank.on .cell { background: color-mix(in srgb, var(--fg) 18%, var(--bg)); }
.rank.cur .cell { background: color-mix(in srgb, var(--fg) 30%, var(--bg)); }
.rank.goal .lbl { font-weight: 600; color: var(--fg); }
.file-foot { display: grid; grid-template-columns: 1.5rem var(--track) minmax(0, 1fr); column-gap: 1rem; margin-top: .35rem; }
.file-foot .fl { grid-column: 2; text-align: center; font-family: var(--display); font-size: .75rem; color: var(--muted); }
.pawn, .queen, .promo, .veil, .flash { position: absolute; left: calc(var(--pad) + 2.5rem + var(--track) / 2); pointer-events: none; }
.pawn, .queen { top: 0; width: var(--pw); height: var(--pw); z-index: 2; transform-origin: 50% 88%; }
.pawn { transform: translate(-50%, calc(var(--py, 0px) + var(--drop, 0px))) scale(calc(var(--ps, 1) * var(--hop, 1))); }
/* With scripts, the pawn is drawn from first paint where home.js will stand it (--pr/--ps from
   src/pages/home.js): rank 1, or rank 7 without motion. Before home.js arrives on a slow network
   it never stands above rank 8 (the no-JS place) and then jumps. home.js's inline values win. */
html.js .pawn { --py: calc(var(--pad) + var(--promo-h) - .5rem + var(--row) * var(--pr1) - var(--pw) * .88); --ps: var(--ps1); }
html.js:not(.js-motion) .pawn { --py: calc(var(--pad) + var(--promo-h) - .5rem + var(--row) * var(--pr7) - var(--pw) * .88); --ps: var(--ps7); }
.queen { transform: translate(-50%, var(--qy, 0px)) scale(var(--qs, 1)); opacity: 0; }
.pawn .pc, .queen .pc { filter: drop-shadow(0 6px 5px rgba(0,0,0,.16)); }
.promo { top: var(--my, 0px); height: var(--promo-h); transform: translateX(-50%); color: var(--fg); z-index: 1; }
.promo [data-logo] { display: block; height: 100%; }
.veil { top: calc(var(--my, 0px) - var(--promo-h) * .45); width: calc(var(--promo-h) * 2.3); height: calc(var(--promo-h) * 1.9); z-index: 1;
  transform: translate(-50%, var(--vlift, 0px)) rotate(var(--vrot, 0deg));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: none; border-radius: 50%;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 50%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 50%, transparent 100%); }
.flash { top: calc(var(--my, 0px) + var(--promo-h) / 2); width: calc(var(--promo-h) * 1.6); height: calc(var(--promo-h) * 1.6); border-radius: 50%; z-index: 1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--fg) 14%, transparent), color-mix(in srgb, var(--fg) 5%, transparent) 55%, transparent);
  transform: translate(-50%, -50%) scale(var(--fs, .4)); opacity: 0; }
.file-note { margin-top: 1rem; padding-left: 2.5rem; max-width: 22rem; font-size: .8125rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 2.5rem; }
  .stage { justify-self: start; max-width: 26rem; }
  .stage .drawing { top: -1.5rem; right: -1rem; width: 10rem; height: 10rem; --sq: 2.5rem; }
  .file { --pad: 1.25rem; --track: 5.25rem; --row: 2.3rem; --promo-h: 3.4rem; --pw: 2.2rem; }
  .rank, .file-foot { column-gap: .75rem; }
  .rank .lbl { font-size: .8125rem; }
  .rank.goal .lbl { font-size: .8125rem; }
  .pawn, .queen, .promo, .veil, .flash { left: calc(var(--pad) + 2.25rem + var(--track) / 2); }
  .file-note { padding-left: 2.25rem; }
}
.b-intro .hero .eyebrow, .b-intro .hero h1, .b-intro .hero .lede, .b-intro .hero .ctas, .b-intro .stage { visibility: hidden; }
/* The pinned hero's scroll room (home.js: pin, end +=260%) is held from first paint, so the
   section after it is never drawn in view and then pushed away when the pin is made. home.js
   drops b-room in the same task that pins the hero; the media query is its desktop branch.
   b-room is its own flag, not b-intro: on a slow network the hero is uncovered (b-intro goes)
   before home.js arrives, and the room must stay until the pin replaces it. */
@media (min-width: 961px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .b-room #hero { margin-bottom: 260vh; }
}


/* ---------- Three pieces: vellum sheets that stack as you scroll ---------- */
.stack { margin-top: clamp(3rem, 7vw, 5rem); display: grid; gap: 22vh; padding-bottom: 6vh; }
.stack-card { position: sticky; top: calc(var(--nav-h) + 2rem + var(--i) * 1.4rem); min-height: min(62vh, 30rem);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center;
  padding: clamp(1.75rem, 4.5vw, 3.75rem); transform-origin: 50% 0%; --vl: rgba(255, 255, 255, .82); }
html[data-theme="dark"] .stack-card { --vl: rgba(28, 28, 28, .84); }
.stack-card .inner { display: contents; }
.stack-card .who { font-weight: 500; font-size: .9375rem; color: var(--fg-2); }
.stack-card .who .nt { font-family: var(--display); font-size: .75rem; color: var(--muted); margin-left: .5rem; font-variant-numeric: tabular-nums; }
.stack-card h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 2.5vw, 2.15rem); line-height: 1.15; letter-spacing: -.01em; margin-top: .6rem; }
.stack-card p.body { margin-top: 1rem; color: var(--fg-2); max-width: 30rem; font-size: 1.125rem; }
.stack-card .link { margin-top: .9rem; font-size: .9375rem; }
.stack-card .mini { --s: clamp(3rem, 6vw, 4.75rem); }
@media (max-width: 760px) {
  .stack { gap: 12vh; }
  .stack-card { grid-template-columns: 1fr; gap: 1.5rem; min-height: 0; top: calc(var(--nav-h) + .75rem + var(--i) * .75rem); }
  .stack-card .mini { --s: 3.1rem; }
}


/* ---------- The game so far: the journey as a game record ----------
   A rail runs down the left. A king travels it as you scroll and stops on the
   present; the planned move is dashed and outlined. */
.journey { position: relative; margin-top: clamp(3rem, 7vw, 5rem); --rail-x: 1.5rem; --gut: 5rem; padding-left: var(--gut); }
.j-rail, .j-plan { position: absolute; left: var(--rail-x); top: 0; bottom: 0; width: 1px; transform-origin: 50% 0; pointer-events: none; }
.j-rail { background: var(--fg); }
.j-plan { display: none; background: repeating-linear-gradient(to bottom, var(--line-2) 0 6px, transparent 6px 12px); }
.journey.laid .j-plan { display: block; }
.j-piece { position: absolute; left: calc(var(--rail-x) - 1.4rem); top: 0; width: 2.8rem; height: 2.8rem; z-index: 2; pointer-events: none; }
.j-piece [data-piece] { width: 100%; height: 100%; filter: drop-shadow(0 6px 5px rgba(0,0,0,.16)); }
.j-moves { display: grid; gap: clamp(3rem, 8vw, 6rem); }
.jm { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.jm .dot { position: absolute; top: 50%; left: calc(var(--rail-x) - var(--gut) - 5.5px); width: 11px; height: 11px; background: var(--fg); box-shadow: 0 0 0 1px var(--fg); transform: translateY(-50%) rotate(45deg); transition: background-color .45s var(--ease); }
.js-motion .jm:not(.arrived) .dot { background: var(--bg); }
.jm.planned .dot { background: var(--bg); box-shadow: 0 0 0 1px var(--line-2); }
.j-year { font-family: var(--display); font-size: clamp(3rem, 7vw, 6.25rem); line-height: 1; letter-spacing: -.02em; color: color-mix(in srgb, var(--fg) 14%, var(--bg)); will-change: transform; }
.jm.planned .j-year { color: transparent; -webkit-text-stroke: 1px var(--line-2); }
.j-card { padding: clamp(1.5rem, 3vw, 2.25rem); }
.j-no { font-family: var(--display); font-size: .8125rem; color: var(--muted); }
.j-no .j-tag { margin-left: .6rem; font-family: var(--sans); font-weight: 500; font-size: .8125rem; color: var(--fg-2); }
.j-card h3 { margin-top: .5rem; font-family: var(--display); font-weight: 400; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.3; }
.j-card p.body { margin-top: .75rem; color: var(--fg-2); max-width: 36rem; }
.jm.planned .j-card { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; outline: 1px dashed var(--line-2); outline-offset: -1px; }
@media (max-width: 760px) {
  .journey { --rail-x: .6rem; --gut: 2.5rem; }
  .jm { grid-template-columns: 1fr; gap: .5rem; }
  .j-year { font-size: 2.5rem; }
  .jm .dot { top: 1.25rem; }
  .j-piece { width: 2rem; height: 2rem; left: calc(var(--rail-x) - 1rem); }
}

/* ---------- Four chapters ---------- */
.phases { margin-top: clamp(3rem, 6vw, 4.5rem); display: grid; gap: 1.25rem; }
.phase { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.phase .num { font-family: var(--display); font-size: clamp(2.75rem, 5vw, 4rem); line-height: 1; letter-spacing: -.02em; }
.phase .card { padding: clamp(1.5rem, 3vw, 2.25rem); }
.phase .ch { font-weight: 500; font-size: .9375rem; color: var(--muted); }
.phase h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.2; margin-top: .4rem; }
.phase .summary { margin-top: .6rem; color: var(--fg-2); }
.topics { margin-top: .75rem; }
.topics summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; font-size: .9375rem; color: var(--fg-2); }
.topics summary::-webkit-details-marker { display: none; }
.topics summary::after { content: ""; width: 8px; height: 8px; border-right: 1.25px solid currentColor; border-bottom: 1.25px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .4s var(--ease); }
.topics[open] summary::after { transform: rotate(-135deg); }
.topics ul { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem 1.5rem; margin-top: .35rem; }
.topics li { color: var(--fg-2); font-size: .96875rem; }
.pan-board { display: none; }
/* Phones and tablets: a native horizontal strip that snaps chapter by chapter */
@media (max-width: 960px) {
  .phases { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: .5rem var(--gutter) 1.5rem; scrollbar-width: thin; }
  .phase { flex: none; width: min(82vw, 26rem); scroll-snap-align: start; grid-template-columns: 1fr; gap: .25rem; }
  .phase .num { font-size: 2.75rem; }
  .topics ul { grid-template-columns: 1fr; }
}
/* Desktop with motion: pinned horizontal pan (.pan-on is set by motion.js).
   Numerals and the board drawing move at their own speeds under the vellum. */
/* clip-path, not overflow: clip: an overflow-clipped section makes Chrome record a whole-screen
   layout shift each time the pin engages and releases (CLS 1.0); clip-path clips the same way */
.pan-on #academy { position: relative; padding-block: 0; clip-path: inset(0); }
.pan-on #academy > .wrap { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--nav-h) + 1rem); padding-bottom: 2.25rem; }
.pan-on .track { display: flex; align-items: flex-start; position: relative; }
.pan-on .track > .sec-head { flex: none; width: min(27rem, 30vw); padding-right: 3rem; padding-top: 7.25rem; }
.pan-on .track > .sec-head h2 { font-size: clamp(1.4rem, 2.1vw, 2rem); }
.pan-on .phases { display: flex; flex: none; gap: 4.5rem; margin-top: 0; padding-right: 1rem; }
.pan-on .phase { display: block; position: relative; flex: none; width: clamp(28rem, 38vw, 36rem); padding-top: 7.25rem; }
.pan-on .phase .num { position: absolute; z-index: 0; top: .5rem; left: -1rem; font-size: clamp(5.5rem, 7.5vw, 7.25rem); line-height: 1; will-change: transform; }
.pan-on .phase .card { position: relative; z-index: 1; }
.pan-on .pan-board { display: block; position: absolute; z-index: 0; left: 20rem; right: -40rem; top: 58%; height: 9rem; --sq: 4.5rem; opacity: .9; }
.pan-rail { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 1rem; margin-top: clamp(2rem, 5vh, 3.25rem); }
.pan-rail .bar { grid-column: 1 / -1; height: 1px; background: var(--line); position: relative; margin-bottom: .85rem; }
.pan-rail .bar i { position: absolute; inset: -.5px 0; background: var(--fg); transform: scaleX(0); transform-origin: 0 50%; }
.pan-rail span { font-weight: 500; font-size: .9375rem; color: var(--muted); transition: color .35s; }
.pan-rail span.on { color: var(--fg); }

/* ---------- From plan to review: one trade, analysed like a game ---------- */
.life-sec { padding-block: clamp(5rem, 10vw, 8rem); }
.life { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: clamp(2rem, 5vw, 4.5rem); }
.life-left h2 { font-size: clamp(1.5rem, 2.6vw, 2.3rem); }
.life-left .sub { margin-top: 1rem; color: var(--fg-2); max-width: 30rem; }
.moves { margin-top: 2rem; display: grid; gap: .25rem; }
.mv { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 2rem; gap: .5rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.mv .no { font-family: var(--display); font-size: 1rem; line-height: 1.5; }
.mv h3 { font-family: var(--display); font-weight: 400; font-size: 1rem; line-height: 1.5; letter-spacing: 0; }
.mv p { margin-top: .3rem; font-size: .96875rem; line-height: 1.55; color: var(--fg-2); }
.mv .ann { font-family: var(--display); font-weight: 400; font-size: 1.0625rem; line-height: 1.4; text-align: right; letter-spacing: .04em; }
.life.anim .mv { color: var(--muted); }
.life.anim .mv p, .life.anim .mv .ann { color: var(--muted); }
.life.anim .mv.on { color: var(--fg); }
.life.anim .mv.on p { color: var(--fg-2); }
.life.anim .mv.on .ann { color: var(--fg); }
.life.anim .mv:not(.on) p { display: none; }
/* tall screens: inactive moves keep their text (dimmed), so changing move never changes the
   list's height (no layout shift). Shorter screens need the room, so there only the active
   move shows its text. */
@media (min-height: 900px) {
  .life.anim.pinned .mv p { transition: opacity .4s var(--ease), color .4s; }
  .life.anim.pinned .mv:not(.on) p { display: block; opacity: .45; }
}
.life-desk { display: flex; flex-direction: column; min-width: 0; }
.desk-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.honest { font-size: .875rem; color: var(--fg-2); }
/* The chess clock: pressed after every move, it shows which move you are on */
.clock { display: flex; align-items: flex-end; gap: 3px; position: relative; padding-top: 9px; }
.clock .lever { position: absolute; top: 0; left: 50%; width: 30px; height: 6px; margin-left: -15px; background: var(--fg); border-radius: 3px 3px 0 0; transform: translateX(var(--lx, -24px)) rotate(var(--lr, -6deg)); transform-origin: 50% 100%; }
.clock .face { display: flex; align-items: baseline; gap: .4rem; min-width: 5.25rem; justify-content: center; padding: .35rem .75rem; border: 1px solid var(--line-2); font-size: .8125rem; color: var(--fg-2); background: var(--bg); }
.clock .face b { font-family: var(--display); font-weight: 400; font-size: 1rem; color: var(--fg); }
.clock .face:first-of-type { border-radius: 10px 2px 2px 10px; }
.clock .face:last-of-type { border-radius: 2px 10px 10px 2px; }
.desk-tabs { display: flex; gap: .25rem; margin-top: .75rem; }
.desk-tabs button { position: relative; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .9rem; font-family: var(--display); font-size: .875rem; color: var(--muted); border: 1px solid transparent; transition: color .3s, border-color .3s; }
.desk-tabs button:hover { color: var(--fg); border-color: var(--line); }
.desk-tabs button[aria-current="step"] { color: var(--fg); border-color: var(--line-2); }
.life-chart { position: relative; flex: 1; min-height: 22rem; margin-top: .75rem; }
.life-chart > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lc-grid line { stroke: var(--line); stroke-width: 1; }
.lc-up rect { fill: var(--bg); stroke: var(--fg); stroke-width: 1.2; }
.lc-up line { stroke: var(--fg); stroke-width: 1.2; }
.lc-dn rect { fill: var(--down); stroke: var(--down); stroke-width: 1.2; }
.lc-dn line { stroke: var(--down); stroke-width: 1.2; }
.lc-target { stroke: var(--fg); stroke-width: 1.6; }
.lc-entry { stroke: var(--fg); stroke-width: 1.3; stroke-dasharray: 6 4; }
.lc-stop { stroke: var(--fg-2); stroke-width: 1.3; stroke-dasharray: 2 3; }
.lc-bracket { stroke: var(--fg); stroke-width: 1.3; fill: none; }
.lc-ghost { display: none; }
.life.anim .lc-ghost { display: inline; }
.lc-ghost line { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 2 5; }
.lc-ghost path { stroke: var(--fg); stroke-width: 1.8; fill: none; }
.lc-ring { fill: var(--bg); stroke: var(--fg); stroke-width: 2; }
.life-chart text { font-family: var(--sans); fill: var(--fg); font-weight: 500; }
.life-chart text.m { fill: var(--fg-2); }
.life-chart text.ann { font-family: var(--display); font-weight: 400; letter-spacing: .04em; }
/* The scoresheet: a vellum sheet laid over the chart; the chart reads through it */
.scoresheet { padding: 1.1rem 1.25rem 1rem; }
.scoresheet .ss-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .875rem; color: var(--fg-2); margin-bottom: .5rem; }
.scoresheet .ss-h b { font-family: var(--display); font-weight: 400; font-size: .875rem; color: var(--fg); }
.ss { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ss th { text-align: left; font-weight: 500; color: var(--muted); font-size: .75rem; padding: .25rem 0; border-bottom: 1px solid var(--line-2); }
.ss td { padding: .45rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ss td:first-child { width: 2rem; font-family: var(--display); font-size: .8125rem; }
.ss td:last-child { width: 2.25rem; text-align: right; font-family: var(--display); font-weight: 400; font-size: .9375rem; letter-spacing: .04em; }
.ss td small { display: block; font-size: .8125rem; color: var(--fg-2); }
.ss tr.struck .mvtxt { position: relative; color: var(--fg-2); }
.ss tr.struck .mvtxt::after { content: ""; position: absolute; left: 0; right: 0; top: .72em; height: 1.25px; background: var(--fg); transform-origin: 0 50%; transform: scaleX(var(--st, 1)); }
.ss-key { margin-top: .65rem; font-size: .8125rem; color: var(--fg-2); }
.ss-key b { font-family: var(--display); font-weight: 400; margin-right: .15rem; }
/* Over the chart the scoresheet is thin tracing paper: the price history stays legible through it */
.scoresheet.over { position: absolute; z-index: 2; left: 0; bottom: 2%; width: min(21rem, 43%); padding: .9rem 1.05rem .8rem;
  --vl: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(2.5px) saturate(1.05); backdrop-filter: blur(2.5px) saturate(1.05); }
html[data-theme="dark"] .scoresheet.over { --vl: rgba(24, 24, 24, .66); }
.scoresheet.over .ss td { padding: .32rem 0; }
.scoresheet.over .ss td small { font-size: .75rem; }
.scoresheet.over .ss-key { margin-top: .45rem; font-size: .75rem; }
.scoresheet.after { display: none; margin-top: 2rem; }
@media (max-width: 1023px) {
  .life { grid-template-columns: 1fr; }
  .life-desk { order: -1; }
  .life-left { display: contents; }
  .life-left .intro { order: -2; }
  .life-desk { position: sticky; top: calc(var(--nav-h) + .5rem); z-index: 3; background: var(--bg); padding-bottom: .5rem; }
  .life-chart { height: min(40vh, 18rem); min-height: 0; flex: none; }
  .scoresheet.over { display: none; }
  .scoresheet.after { display: block; }
}
/* Compact (no pin): the desk stays in view while the moves scroll past it */
.life.compact .life-desk { position: sticky; top: calc(var(--nav-h) + .5rem); align-self: start; z-index: 3; background: var(--bg); }
/* paper above the sticky desk, so moves scrolling underneath never peek out when the nav steps aside */
.life.compact .life-desk::before { content: ""; position: absolute; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); bottom: 100%; height: calc(var(--nav-h) + .5rem); background: var(--bg); }
.life.compact .mv { min-height: 44vh; align-content: start; }
.life.compact .mv:not(.on) p { display: block; }
/* Pinned on desktop: the whole scene fills one screen */
.life.pinned { height: 100dvh; padding-top: calc(var(--nav-h) + 1rem); padding-bottom: 1.25rem; align-items: stretch; }
.life.pinned .life-left { display: flex; flex-direction: column; justify-content: center; }
.life.pinned .moves { margin-top: 1.5rem; }

/* ---------- STEP-20 on the home page: the twenty trades in one row ---------- */
.sec-link { margin-top: .75rem !important; }
.strip-stage { position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); }
.strip-stage .drawing { left: -2rem; bottom: -2.25rem; width: 38%; height: 140%; --sq: 3.25rem; }
.strip-card { z-index: 1; padding: clamp(.9rem, 2vw, 1.5rem); }
.tboard.strip { grid-template-columns: repeat(20, minmax(0, 1fr)); grid-template-rows: auto; }
.tboard.strip .frame { left: 0; bottom: 0; }
.tboard.strip .n { position: absolute; left: .3rem; top: .2rem; z-index: 2; font-size: .75rem; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; }
.tboard.strip .sq.d .n { color: #f3f2ee; opacity: .85; }
html[data-theme="dark"] .tboard.strip .sq .n { color: var(--fg-2); opacity: .75; }
.strip-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2.5rem; margin-top: 2rem; }
.strip-foot .count { margin-top: 0; }
@media (max-width: 760px) { .tboard.strip { grid-template-columns: repeat(10, minmax(0, 1fr)); } .tboard.strip .n { font-size: .625rem; left: .2rem; } }

/* ---------- Approved photographs and evidence (only rendered when the admin adds some) ---------- */
.ev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.ev-fig { padding: .6rem .6rem .9rem; }
.ev-fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.03); border-radius: 2px; }
html[data-theme="dark"] .ev-fig img { filter: grayscale(1) brightness(.85) contrast(1.05); }
.ev-fig figcaption { margin-top: .75rem; padding-inline: .3rem; font-size: .9375rem; color: var(--fg-2); }

/* ---------- STEP-20: a tournament board ---------- */
.step-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.count { margin-top: 2rem; display: flex; align-items: baseline; gap: .75rem; }
.count b { font-family: var(--display); font-weight: 400; font-size: clamp(2.75rem, 5vw, 4.25rem); line-height: 1; letter-spacing: -.02em; }
.count span { color: var(--fg-2); }
.board-legend { display: grid; gap: .55rem; margin-top: 1.75rem; font-size: .9375rem; max-width: 24rem; }
.board-legend li { display: flex; gap: .8rem; align-items: center; color: var(--fg-2); }
.board-legend .key { position: relative; width: 1.75rem; height: 1.75rem; flex: none; display: flex; align-items: center; justify-content: center; }
.board-legend .key [data-piece] { width: 100%; height: 100%; }
.board-legend .c { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); }
.detail { margin-top: 1.5rem; min-height: 4.5rem; font-size: .9375rem; color: var(--fg-2); max-width: 26rem; }
.detail b { display: block; color: var(--fg); font-weight: 600; }
.board-stage { position: relative; }
.board-stage .drawing { bottom: -2.5rem; left: -2.5rem; width: 62%; height: 78%; --sq: 3.75rem; }
.board-card { z-index: 1; padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem) clamp(.75rem, 2vw, 1.25rem) clamp(.5rem, 1.5vw, 1rem); }
.tboard { display: grid; grid-template-columns: 1.25rem repeat(5, 1fr); grid-template-rows: repeat(4, auto) 1.5rem; position: relative; }
.tboard .rk, .tboard .fl { font-size: .75rem; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.tboard .fl { font-family: var(--display); font-size: .75rem; }
.tboard .sq { position: relative; aspect-ratio: 1; background: var(--tb-l); border: 0; display: flex; align-items: center; justify-content: center; }
.tboard .sq.d { background: var(--tb-d); background-image: linear-gradient(135deg, rgba(255,255,255,.07), transparent 55%); }
.tboard .sq:focus-visible { outline-offset: -3px; z-index: 3; }
.tboard .sq[aria-pressed="true"]::before { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--fg); z-index: 2; }
.tboard .frame { position: absolute; left: 1.25rem; right: 0; top: 0; bottom: 1.5rem; border: 1px solid var(--tb-edge); pointer-events: none; }
.tboard .man { position: absolute; left: 14%; right: 14%; top: 10%; bottom: 10%; z-index: 1; }
.tboard .man.tip { transform: translate(-20%, 8%) rotate(80deg) scale(.7); transform-origin: 50% 88%; }
.tboard .ring { position: absolute; inset: 9%; overflow: visible; pointer-events: none; z-index: 1; }
.tboard .ring circle { fill: none; stroke: var(--fg); stroke-width: 1.4; stroke-dasharray: 4 4; }
.tboard .sq.d .ring circle { stroke: var(--tb-l); }
.tboard .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.tboard .sq.d .dot { background: var(--tb-l); opacity: .7; }
.tboard .sq[data-s="submitted"] .man { opacity: .55; }
@media (max-width: 960px) { .step-grid { grid-template-columns: 1fr; } .board-stage .drawing { bottom: -1.5rem; left: -1rem; width: 70%; height: 60%; --sq: 2.75rem; } }

/* ---------- Ecosystem ---------- */
#ecosystem { overflow-x: clip; }
.eco { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; margin-top: clamp(3rem, 7vw, 5rem); }
.eco .mark-word { height: clamp(2.75rem, 5vw, 4rem); color: var(--fg); display: flex; align-items: center; }
.eco .mark-word svg { max-width: 100%; height: auto !important; max-height: 100%; }
.eco .zx { font-family: var(--display); font-weight: 400; letter-spacing: .32em; font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1; height: clamp(2.75rem, 5vw, 4rem); display: flex; align-items: center; }
.eco p { margin-top: 1.5rem; color: var(--fg-2); max-width: 26rem; font-size: 1.125rem; }
.eco .amp { font-family: var(--display); font-size: clamp(1.75rem, 3.2vw, 2.6rem); line-height: 1; color: var(--muted); align-self: center; }
@media (max-width: 860px) { .eco { grid-template-columns: 1fr; } .eco .amp { align-self: start; } }

/* ---------- Insights: a short index ---------- */
.index { margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; gap: 2.25rem; }
.entry { position: relative; }
.entry .meta { font-size: .875rem; color: var(--muted); }
.entry h3 { margin-top: .5rem; font-family: var(--display); font-weight: 400; font-size: clamp(1.05rem, 1.6vw, 1.4rem); line-height: 1.45; max-width: 48rem; }
.entry h3 a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease); }
.entry h3 a::after { content: ""; position: absolute; inset: 0; }
.entry:hover h3 a { background-size: 100% 1px; }
.all-link { margin-top: 2.75rem; }


/* ---------- Your move: the first move of a new game ---------- */
.finale { position: relative; overflow: hidden; padding-block: clamp(5.5rem, 12vw, 9rem) clamp(3rem, 6vw, 5rem); }
.move-panel { position: relative; z-index: 2; max-width: 44rem; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem); text-align: center; }
.move-panel h2 { font-size: clamp(2.25rem, 6.5vw, 5.25rem); line-height: 1.1; }
.move-panel p { max-width: 30rem; margin: 1.5rem auto 0; color: var(--fg-2); font-size: 1.125rem; }
.move-panel .ctas { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; margin-top: 2rem; }
.move-panel .note { margin-top: 1.5rem; }
.first-move { position: relative; z-index: 1; width: fit-content; margin: clamp(-2.5rem, -3vw, -1.5rem) auto 0; }
.first-move .mini { --s: clamp(2.4rem, 5.5vw, 3.6rem); grid-template-columns: 1rem repeat(8, var(--s)); }
.first-move .mini .frame { width: calc(var(--s) * 8); }
.first-move .mini .trace { width: calc(var(--s) * 8); }
.first-move .notation { margin-top: .75rem; text-align: center; font-family: var(--display); font-size: .9375rem; color: var(--fg-2); }
@media (max-width: 460px) { .first-move .mini { --s: 2.2rem; } }
/* whole-pixel squares keep the 8 x 3 trace exactly proportional (DrawSVG measures it) */
@supports (width: round(1.5px, 1px)) {
  .first-move .mini { --s: round(down, clamp(2.4rem, 5.5vw, 3.6rem), 1px); }
  @media (max-width: 460px) { .first-move .mini { --s: round(down, 2.2rem, 1px); } }
}


/* ---------- Replaces the prototype's inline styles ---------- */
#serves { padding-top: clamp(3rem, 6vw, 5rem); }
.board-legend .k-sub { display: block; width: 100%; height: 100%; opacity: .55; }
.board-legend .k-tip { display: block; width: 100%; height: 100%; transform: rotate(84deg) translate(18%, 4%); transform-origin: 50% 88%; }
.board-legend .k-ring { position: absolute; inset: -2px; overflow: visible; }
.board-legend .k-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }