/* About: hero record, purpose statement, mission and vision, the game record
   (a rank of the board the king travels), principles on a rank of pieces, and
   the closing move. Builds on site.css (tokens, .sheet, .mini, .drawing, .btn). */

/* ---------- Hero: the game record opens ---------- */
.a-hero { padding-block: clamp(2rem, 6vh, 4rem) clamp(4rem, 10vh, 7rem); }
.a-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; min-height: min(calc(100dvh - var(--nav-h) - 8rem), 40rem); }
.a-hero .eyebrow { font-size: .9375rem; color: var(--muted); }
.a-hero h1 { margin-top: 1.5rem; font-size: var(--d-1); line-height: 1.16; }
.a-hero h1 .a-ln { padding-bottom: .1em; margin-bottom: -.1em; }
.a-hero .lede { margin-top: 1.75rem; max-width: 34rem; color: var(--fg-2); font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.6; }
.a-stage { position: relative; justify-self: end; width: 100%; max-width: 24rem; }
.a-stage .drawing { top: -2.25rem; right: -2.75rem; width: 16rem; height: 16rem; --sq: 3.5rem; }
.a-rec { z-index: 1; padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 1.75rem); }
.a-board.mini { --s: clamp(4rem, 6.2vw, 5.4rem); width: fit-content; margin-inline: auto; transform: translateX(-.5rem); }
.a-board .a-king { transform: translate(100%, 200%); }
.a-board .a-king [data-piece] { inset: 10%; filter: drop-shadow(0 6px 5px rgba(0,0,0,.16)); }
.pgn { margin-top: 1.5rem; padding-top: .85rem; border-top: 1px solid var(--line); }
.pgn > div { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding-block: .28rem; }
.pgn dt { font-family: var(--sans); font-weight: 500; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pgn dd { margin: 0; font-size: .9375rem; color: var(--fg); }
.pgn .res b { font-family: var(--display); font-weight: 400; margin-right: .3rem; }
@media (max-width: 900px) {
  .a-hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 3rem; }
  .a-stage { justify-self: start; max-width: 22rem; }
  .a-stage .drawing { top: -1.5rem; right: -1rem; width: 11rem; height: 11rem; --sq: 2.75rem; }
  .a-board.mini { --s: clamp(3.4rem, 17vw, 4.5rem); }
}
/* The hero waits for its intro; a failsafe shows it if the motion layer never starts */
.js-motion .a-hero [data-intro] { visibility: hidden; animation: a-failsafe 0s linear 3s forwards; }
@keyframes a-failsafe { to { visibility: visible; } }

/* ---------- Purpose: one statement ---------- */
.a-purpose-sec { padding-block: clamp(6rem, 14vw, 11rem) clamp(5rem, 11vw, 9rem); }
.a-label { font-size: .9375rem; color: var(--muted); }
.a-statement { margin-top: 1.5rem; max-width: 62rem; font-size: clamp(1.7rem, 3.6vw, 3.3rem); line-height: 1.24; }
.a-purpose { margin-top: clamp(2rem, 5vw, 3.5rem); margin-left: auto; max-width: 32rem; color: var(--fg-2); font-size: 1.125rem; }
@media (max-width: 760px) { .a-purpose { margin-left: 0; } }

/* ---------- Mission and vision: the pawn's plan, the queen it becomes ---------- */
.mv { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(4rem, 9vw, 8rem) minmax(0, 1fr); align-items: center; }
.mv > .drawing { top: -3.5rem; bottom: -3.5rem; left: 18%; right: 18%; --sq: 4.25rem; }
.mv-card { z-index: 1; height: 100%; padding: clamp(1.75rem, 3.5vw, 3rem); }
.mv-sq { position: relative; width: clamp(4rem, 5.5vw, 5rem); aspect-ratio: 1; background: var(--tb-l); box-shadow: inset 0 0 0 1px var(--tb-edge); }
.mv-sq.d { background: var(--tb-d); }
.mv-pc { position: absolute; inset: 10% 12% 14%; z-index: 1; }
.mv-pc [data-piece] { width: 100%; height: 100%; filter: drop-shadow(0 5px 4px rgba(0,0,0,.14)); }
.mv-h { margin-top: 1.5rem; font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.2; }
.mv-card p { margin-top: .9rem; max-width: 30rem; color: var(--fg-2); font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); }
.mv-arrow { position: relative; z-index: 1; width: 100%; height: auto; overflow: visible; color: var(--fg); padding-inline: .75rem; }
.mv-line { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-dasharray: 4 5; stroke-linecap: round; }
.mv-head { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) {
  .mv { grid-template-columns: 1fr; }
  .mv > .drawing { left: 0; right: 0; top: 20%; bottom: 20%; --sq: 3rem; }
  .mv-arrow { width: 4.5rem; padding: 0; justify-self: center; transform: rotate(90deg); margin-block: 2.25rem; }
}

/* ---------- The game so far: a rank of the board, one square per move ----------
   The king stands on the present move; squares it has played are lit; the
   travelled line runs behind it; the planned move is a dashed arrow onto a
   dashed square. With motion the scene pins on desktop (.pinned) or keeps the
   board in view while the record scrolls past (.compact). */
.game { --gs: min(7.5rem, 16vw, calc((100vw - 2 * var(--gutter) - 2rem) / var(--n))); }
.g-desk { margin-top: clamp(2.5rem, 6vw, 4rem); }
.g-count { display: none; align-items: baseline; gap: .4rem; margin-bottom: .9rem; font-size: .875rem; color: var(--fg-2); }
.g-count b { font-family: var(--display); font-weight: 400; font-size: 1rem; color: var(--fg); font-variant-numeric: tabular-nums; }
.game.pinned .g-count, .game.compact .g-count { display: flex; }
.g-board { display: grid; grid-template-columns: 1.25rem auto; width: fit-content; }
.g-board > .rk { display: flex; align-items: center; justify-content: center; font-size: .75rem; color: var(--muted); }
.g-rank { position: relative; display: grid; grid-template-columns: repeat(var(--n), var(--gs)); }
.g-sq { position: relative; display: block; width: var(--gs); aspect-ratio: 1; background: var(--tb-l); text-decoration: none; --on: 0; }
.g-sq.d { background: var(--tb-d); background-image: linear-gradient(135deg, rgba(255,255,255,.07), transparent 55%); }
.g-sq.on { --on: 1; }
.g-sq::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--fg) 16%, transparent); opacity: var(--on); transition: opacity .35s; pointer-events: none; }
/* The planned square stays dashed and empty on hover: its outline darkens instead of taking the lit fill */
.g-sq:not(.planned):hover::after { opacity: max(var(--on), .45); }
.g-sq.planned { background: var(--bg); box-shadow: inset 0 0 0 1px var(--bg); outline: 1px dashed var(--line-2); outline-offset: -5px; }
.g-sq.planned:hover { outline-color: var(--fg-2); }
/* After .planned and at its specificity, so the planned square shows the focus ring too */
.g-sq:focus-visible, .g-sq.planned:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; z-index: 4; box-shadow: none; }
/* Year labels hold 4.5:1 on lit squares as well as plain ones */
.g-yr { position: absolute; right: .4rem; bottom: .35rem; font-family: var(--sans); font-weight: 500; font-size: .75rem; letter-spacing: .04em; line-height: 1; color: var(--fg-2); z-index: 1; }
.g-sq.d .g-yr { color: var(--tb-l); }
.g-sq.planned .g-yr { color: var(--muted); }
.g-dot { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; border: 1px solid var(--line-2); }
.g-trace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; color: var(--fg); }
.g-line { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.g-plan path { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 5 6; stroke-linecap: round; }
.g-plan .g-head { stroke-dasharray: none; stroke-linejoin: round; }
.g-king { position: absolute; top: 0; left: calc(var(--now) * var(--gs)); width: var(--gs); height: var(--gs); z-index: 2; pointer-events: none; }
.g-kb { position: absolute; inset: 10% 16% 20%; transform-origin: 50% 90%; }
.g-kb [data-piece] { width: 100%; height: 100%; filter: drop-shadow(0 6px 5px rgba(0,0,0,.16)); }
.g-rank > .frame { position: absolute; inset: 0; border: 1px solid var(--tb-edge); pointer-events: none; z-index: 3; }
.g-files { display: grid; grid-template-columns: repeat(var(--n), var(--gs)); }
.g-files .fl { padding-top: .45rem; text-align: center; font-family: var(--display); font-size: .75rem; color: var(--muted); }

/* the record */
.g-moves { margin-top: clamp(3rem, 7vw, 5rem); display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
.gm { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.g-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)); }
.gm.planned .g-year { color: transparent; -webkit-text-stroke: 1px var(--line-2); }
.g-card { padding: clamp(1.5rem, 3vw, 2.25rem); }
.g-no { font-family: var(--display); font-size: .8125rem; color: var(--muted); }
.g-tag { margin-left: .6rem; font-family: var(--sans); font-weight: 500; font-size: .8125rem; color: var(--fg-2); }
.g-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; }
.g-card .body { margin-top: .75rem; max-width: 36rem; color: var(--fg-2); }
.gm.planned .g-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) {
  .gm { grid-template-columns: 1fr; gap: .5rem; }
  .g-year { font-size: 2.5rem; }
}

/* Pinned (desktop with motion): the whole scene holds one screen. The heading
   sits top left, the board top right over the record card, the year bottom left. */
.a-game-sec:has(.game.pinned) { padding-block: 0; }
.game.pinned { height: 100dvh; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(1.5rem, 4vw, 4rem); align-content: center;
  padding-top: calc(var(--nav-h) + clamp(.75rem, 3vh, 2rem)); padding-bottom: clamp(1rem, 4vh, 2.5rem);
  --gs: min(7.5rem, 13.5vh, calc((66vw - 2 * var(--gutter) - 2rem) / var(--n))); }
.game.pinned .g-head { grid-column: 1; grid-row: 1; align-self: end; }
.game.pinned .sec-head h2 { font-size: clamp(1.5rem, 2.4vw, 2.25rem); }
.game.pinned .g-desk { grid-column: 2; grid-row: 1; align-self: end; margin-top: 0; margin-left: -1.25rem; }
.game.pinned .g-moves { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(1.75rem, 5vh, 3.25rem); display: grid; }
.game.pinned .gm { grid-area: 1 / 1; pointer-events: none; }
.game.pinned .gm.cur { pointer-events: auto; }
.game.pinned .g-card .body { max-width: 40rem; }

/* Compact (phones, short screens): the board stays in view while the record scrolls past */
.game.compact .g-desk { position: sticky; top: calc(var(--nav-h) + .5rem); z-index: 3; background: var(--bg); padding-block: .75rem 1rem; }
.game.compact .g-desk.stuck::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); }
.game.compact .g-desk::after { content: ""; position: absolute; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); top: 100%; height: 1.5rem; background: linear-gradient(var(--bg), transparent); pointer-events: none; }
.game.compact .g-moves { margin-top: 2rem; }
.game.compact .gm { min-height: 40vh; align-content: start; }

/* ---------- Principles: a rank of pieces ---------- */
.pr { margin-top: clamp(3rem, 7vw, 5rem); display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.pr-sq { position: relative; aspect-ratio: 1; background: var(--tb-l); border-block: 1px solid var(--tb-edge); }
.pr-sq.d { background: var(--tb-d); background-image: linear-gradient(135deg, rgba(255,255,255,.07), transparent 55%); }
.pr-i:first-child .pr-sq { border-left: 1px solid var(--tb-edge); }
.pr-i:last-child .pr-sq { border-right: 1px solid var(--tb-edge); }
.pr-sq .shadow { bottom: 13%; width: 46%; height: 9%; }
.pr-pc { position: absolute; inset: 17% 20% 15%; z-index: 1; }
.pr-pc [data-piece] { width: 100%; height: 100%; transition: transform .6s var(--ease); filter: drop-shadow(0 8px 7px rgba(0,0,0,.14)); }
.pr-i:hover .pr-pc [data-piece] { transform: translateY(-5%); }
.pr-co { position: absolute; left: .5rem; bottom: .4rem; font-family: var(--display); font-size: .75rem; line-height: 1; color: var(--tb-d); }
.pr-sq.d .pr-co { color: var(--tb-l); }
.pr-t { padding: 1.5rem clamp(.75rem, 1.6vw, 1.75rem) 0 0; }
.pr-t h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1rem, 1.35vw, 1.3rem); line-height: 1.3; }
.pr-g { margin-top: .5rem; font-size: .875rem; color: var(--muted); }
.pr-t .body { margin-top: .6rem; color: var(--fg-2); font-size: 1rem; }
@media (max-width: 960px) and (min-width: 761px) {
  .pr { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.5rem; }
  .pr-sq { border: 1px solid var(--tb-edge); }
}
@media (max-width: 760px) {
  .pr { grid-template-columns: 1fr; }
  .pr-i { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: 1.25rem; align-items: start; padding-block: 1.1rem; border-top: 1px solid var(--line); }
  .pr-i:first-child { border-top: 0; }
  .pr-sq { border: 1px solid var(--tb-edge); }
  .pr-t { padding: .15rem 0 0; }
  .pr-t h3 { font-size: 1.125rem; }
}

/* ---------- Closing: take your seat ---------- */
.a-finale { position: relative; overflow: hidden; padding-block: clamp(5.5rem, 12vw, 9rem) clamp(3rem, 6vw, 5rem); }
.a-panel { position: relative; z-index: 2; max-width: 44rem; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem); text-align: center; }
.a-panel h2 { font-size: clamp(2.1rem, 6vw, 4.75rem); line-height: 1.1; }
.a-panel p { max-width: 30rem; margin: 1.5rem auto 0; color: var(--fg-2); font-size: 1.125rem; }
.a-panel .ctas { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; margin-top: 2rem; }
.a-panel .note { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 1.75rem; margin-top: 1.25rem; font-size: .9375rem; color: var(--fg-2); }
.a-move { position: relative; z-index: 1; width: fit-content; margin: clamp(2rem, 4vw, 3rem) auto 0; }
.a-mini { --s: clamp(2.6rem, 5vw, 3.6rem); }
.a-mini .piece { transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%)); }
.a-move .notation { margin-top: .75rem; text-align: center; font-family: var(--display); font-size: .9375rem; color: var(--fg-2); }

/* ---------- Game record: motion hooks (custom properties written by js/about.js) ---------- */
.g-king { transform: translateX(calc(var(--kx, 0) * var(--gs))); }
.g-kb { transform: translateY(calc(var(--lift, 0) * -28%)); }
.g-king .shadow { transform: translateX(-50%) scale(calc(1 - var(--lift, 0) * .35)); opacity: calc(1 - var(--lift, 0) * .45); }
.game.pinned .g-sq.cur::before, .game.compact .g-sq.cur::before { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--fg); z-index: 2; pointer-events: none; }

/* SplitText masks: room for descenders (y, g, comma) while lines and words rise.
   The .sec-head h2 masks come from Site.textReveals (.rv-line-mask in site.css). */
.a-hero h1 .a-ln-mask, .a-panel h2 .a-w-mask { padding-bottom: .16em; margin-bottom: -.16em; }
/* Dark theme: the board's own coordinates would vanish on graphite squares */
html[data-theme="dark"] .g-yr, html[data-theme="dark"] .g-sq.d .g-yr { color: var(--fg-2); }
html[data-theme="dark"] .pr-co, html[data-theme="dark"] .pr-sq.d .pr-co { color: var(--muted); }
html[data-theme="dark"] .g-sq::after { background: color-mix(in srgb, var(--fg) 9%, transparent); }