/* Two Boards: an interactive essay. Self-contained styles for two-boards.html. */
:root {
    /* grounds: one light, one alternate light, one dark */
    --paper: #F5F0E8;          /* page ground; the SGI site's cream */
    --paper-deep: #EDE6D6;     /* alternate light ground; the SGI site's cream-deep */
    --night: #24201B;          /* the only dark ground */
    --night-3: #3A342D;        /* hero light squares, primary-button hover */

    /* text: solid colors only, never alpha */
    --ink: #1C150E;            /* body, headings, labels; the SGI site's espresso */
    --ink-2: #4C4137;          /* secondary text, captions, coordinates on paper */
    --on-night: #F2ECE1;       /* headings and short lines on night */
    --on-night-2: #DAD2C5;     /* paragraphs, labels and coordinates on night */

    /* rules */
    --rule: rgba(28, 21, 14, 0.16);
    --rule-soft: rgba(28, 21, 14, 0.08);
    --rule-ui: #7C6F60;        /* borders that define a control; the chess frame */
    --rule-night: rgba(242, 236, 225, 0.16);
    --rule-ui-night: #8C8276;

    /* the two games: color means chess or weiqi and nothing else */
    --chess: #792327;          /* madder claret */
    --weiqi: #28455E;          /* ink slate */
    --chess-night: #E9B4A3;    /* chess on night, 24px and larger only */
    --weiqi-night: #AFC5D9;    /* weiqi on night, 24px and larger only */
    --hybrid-mark: #8A7560;    /* lab hybrid icon and bar only, never text */
    --copper: #B87333;         /* reading-progress line only; the main site's accent */

    /* chess board */
    --sq-light: #EEE2C9;
    --sq-dark: #B6976F;
    --sq-light-still: #DEDCD7; /* after checkmate */
    --sq-dark-still: #A9A6A0;
    --honey: #E2C46A;          /* selected square and last move */
    --check: #C8665A;

    /* weiqi board */
    --board-go: #DCC396;       /* the Chinese Weiqi Association's pale yellow */
    --go-line: #3A3125;

    --display: 'Bodoni Moda', 'Bodoni 72', Didot, 'Libre Bodoni', Georgia, serif;
    --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
    --sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
    --cjk: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
    --max: 1240px;
    --bar-h: 58px;
    --ease: cubic-bezier(0.22, 0.61, 0.24, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-move: cubic-bezier(0.65, 0, 0.35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
cite { font-style: italic; }
.cjk { font-family: var(--cjk); font-weight: 500; letter-spacing: 0.04em; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; font-family: var(--sans); font-size: 14px; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.last :focus-visible, .close :focus-visible, .foot :focus-visible { outline-color: var(--on-night); }

/* ---------- shared type ---------- */
.eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 18px; }
.eyebrow-dark { color: var(--on-night-2); }
.h2 { font-family: var(--display); font-weight: 500; font-size: clamp(38px, 5.4vw, 76px); line-height: 1; letter-spacing: -0.01em; text-wrap: balance; }
.h2-dark { color: var(--on-night); }
.h3 { font-family: var(--display); font-weight: 500; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; margin-bottom: 18px; text-wrap: balance; }
.kicker { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); }

/* ---------- buttons: a border belongs only on something you press ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px;
    background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 0; cursor: pointer;
    font-family: var(--sans); font-size: 15px; font-weight: 500; line-height: 1; transition: background-color 0.2s var(--ease);
}
.btn:hover { background: var(--night-3); }
.btn[aria-disabled="true"] { cursor: default; background: var(--night-3); }
.btn-next::after { content: '\2192'; transition: transform 0.2s var(--ease); }
.btn-next:hover::after { transform: translateX(3px); }
.last .btn, .close .btn { background: var(--on-night); color: var(--ink); border-color: var(--on-night); }
.last .btn:hover, .close .btn:hover { background: var(--paper-deep); }
.text-btn {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
    font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: inherit;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.text-btn:hover { text-decoration-color: currentColor; }

/* ---------- choices: the row component used by the strategy lab ---------- */
.choices { display: grid; border-top: 1px solid var(--rule); }
.choice {
    display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; column-gap: 16px;
    width: 100%; min-height: 56px; padding: 12px 12px 12px 6px; margin: 0;
    background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
    text-align: left; cursor: pointer; color: var(--ink);
    font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 1.4;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.choice-k {
    width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--rule-ui); display: grid; place-items: center;
    font-family: var(--sans); font-size: 13px; font-weight: 600; line-height: 1;
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.choice:hover:not(:disabled) { background: var(--paper-deep); }
.lab .choice:hover:not(:disabled) { background: var(--paper); }
.choice:hover:not(:disabled) .choice-k { border-color: var(--ink); }
.choice:hover:not(:disabled) .choice-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--rule-ui); }
.choice[aria-pressed="true"], .choice.is-picked { font-weight: 600; }
/* the pressed ring fills like a placed stone */
.choice[aria-pressed="true"] .choice-k, .choice.is-picked .choice-k { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.choice:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.choice:disabled { cursor: default; }
.choices.is-answered .choice:not(.is-picked) { color: var(--ink-2); }
.choices.is-answered .choice:not(.is-picked) .choice-k { border-color: var(--rule); color: var(--ink-2); }

/* ---------- top bar: always on a solid ground that matches the section beneath ---------- */
.bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--bar-h);
    display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 28px;
    color: var(--ink); background: rgba(245, 240, 232, 0.94); border-bottom: 1px solid var(--rule);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.bar.on-dark { color: var(--on-night); background: rgba(36, 32, 27, 0.94); border-bottom-color: var(--rule-night); }
.bar.in-hero { background: none; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* over the hero the bar takes each half's own ground: two plain halves, not a gradient */
.bar.in-hero::before, .bar.in-hero::after { content: ''; position: absolute; top: 0; bottom: 0; width: 50%; z-index: -1; }
.bar.in-hero::before { left: 0; background: rgba(36, 32, 27, 0.94); }
.bar.in-hero::after { right: 0; background: rgba(220, 195, 150, 0.94); }
.bar.in-hero .bar-home { color: var(--on-night); }
.bar.in-hero .bar-sound { color: var(--ink); }
.bar.in-hero .bar-title, .bar.in-hero .bar-progress { display: none; }
.bar :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.bar-home { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; }
.bar-title { font-family: var(--display); font-style: italic; font-size: 17px; position: absolute; left: 50%; transform: translateX(-50%); }
.bar-sound {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer;
    font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none;
}
.bar-sound svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.bar-sound .snd-body { fill: currentColor; stroke: none; }
.bar-sound .snd-wave { display: none; }
.bar-sound[aria-pressed="true"] .snd-wave { display: inline; }
.bar-sound[aria-pressed="true"] .snd-off { display: none; }
.bar-sound:hover .bar-sound-label { text-decoration: underline; text-underline-offset: 4px; }
.bar-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.bar-progress span { display: block; height: 100%; width: 100%; background: var(--copper); transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); }

/* ---------- hero ---------- */
.hero { position: relative; height: 300vh; }
html:not(.js) .hero, .reduce .hero { height: auto; }
.hero-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
.reduce .hero-stage { position: relative; }
.hero-half { position: relative; overflow: hidden; }
.hero-chess { background: var(--night); }
.hero-weiqi { background: var(--board-go); }
.hero-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: var(--hb, 1); }
/* the two questions, one on each half: set twice, each copy clipped to its half, so every
   letter reads in the color of the ground it sits on */
.hero-copy {
    position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center;
    pointer-events: none; opacity: calc(1 - var(--hf, 0)); transition: opacity 0.5s var(--ease);
}
.js.is-loading .hero-copy { opacity: 0; }
.hero-copy-a { color: var(--on-night-2); clip-path: inset(0 50% 0 0); }
.hero-copy-b { color: var(--ink); clip-path: inset(0 0 0 50%); }
/* chess asks first; the weiqi question arrives as the page starts to move */
.hero-q {
    width: min(76%, 10.5em); font-family: var(--display); font-size: clamp(30px, 3.7vw, 62px); line-height: 1.08;
    text-wrap: balance; transform: scale(var(--hs, 1));
}
.hero-q-weiqi { opacity: var(--hl2, 0); transform: translateY(calc((1 - var(--hl2, 0)) * 3vh)) scale(var(--hs, 1)); }
html:not(.js) .hero-q-weiqi { opacity: 1; transform: none; }
.hero-q-name { display: block; margin-bottom: 0.9em; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.hero-copy-b .hero-q-name { color: var(--weiqi); }
.hero-label { position: absolute; bottom: 9vh; display: flex; flex-direction: column; gap: 6px; opacity: var(--h2, 0); transform: translateY(calc((1 - var(--h2, 0)) * 2vh)); }
.hero-label-chess { left: 5vw; color: var(--on-night); }
.hero-label-weiqi { right: 5vw; text-align: right; color: var(--ink); align-items: flex-end; }
.hero-label-name { font-family: var(--display); font-size: clamp(30px, 3.4vw, 54px); line-height: 1; }
.hero-label-gloss { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.hero-label-chess .hero-label-gloss { color: var(--on-night-2); }
.hero-cue {
    position: absolute; left: 25%; bottom: 3.4vh; transform: translateX(-50%); color: var(--on-night-2);
    font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
    opacity: var(--hc, 1); padding-bottom: 34px;
}
.hero-cue::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 1px; height: 26px; background: currentColor; animation: cue 2.2s var(--ease) 5; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.reduce .hero-cue { display: none; }

/* ---------- intro ---------- */
.intro { padding: 18vh 32px 14vh; }
.intro-in { max-width: 940px; margin: 0 auto; }
.title { font-family: var(--display); font-weight: 500; text-transform: uppercase; font-size: clamp(44px, 7.4vw, 118px); line-height: 0.92; letter-spacing: 0; margin: 22px 0 40px; text-wrap: balance; }
.byline { margin: -12px 0 48px; font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-2); }
.byline a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-ui); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.byline a:hover { text-decoration-color: var(--ink); }
.byline .byline-pdf { margin-left: 24px; }
.abstract { max-width: 36em; margin: 0 0 48px; padding-top: 22px; border-top: 1px solid var(--rule); }
.abstract-label { font-family: var(--sans); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 12px; }
.abstract p { font-size: 17px; line-height: 1.62; color: var(--ink-2); }
.lede { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.62; max-width: 36em; margin-bottom: 22px; }
.kq { margin: 46px 0 42px; display: grid; gap: 16px; }
.kq blockquote { margin: 0; }
.kq blockquote p { font-family: var(--display); font-weight: 500; font-size: clamp(28px, 3.3vw, 48px); line-height: 1.1; max-width: 20em; text-wrap: balance; }
.kq figcaption { font-family: var(--sans); font-size: 13px; color: var(--ink-2); }

/* ---------- story ---------- */
.story { padding: 8vh 32px 6vh; border-top: 1px solid var(--rule); }
.story-head { max-width: var(--max); margin: 0 auto 4vh; }
.story-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 64px; }
.story-visual { position: sticky; top: calc(var(--bar-h) + 16px); height: calc(100vh - var(--bar-h) - 32px); display: flex; align-items: center; }
.story-boards { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: end; }
/* piece values only where a board is large enough to carry them; the step text lists them too */
.story-fig .board { container-type: inline-size; }
@container (max-width: 240px) { .piece-values { display: none; } }
.story-fig figcaption { margin-top: 12px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); }
.story-steps { padding: 6vh 0 18vh; }
/* steps away from the reading line recede by color, not opacity, so they stay legible */
.step { min-height: 74vh; display: flex; flex-direction: column; justify-content: center; gap: 16px; color: var(--ink-2); transition: color 0.6s var(--ease); }
.step.is-active { color: var(--ink); }
.reduce .step { color: var(--ink); min-height: 0; padding: 7vh 0; }
.step p { font-size: clamp(20px, 1.85vw, 25px); line-height: 1.5; }
.step .step-big { font-family: var(--display); font-size: clamp(28px, 2.9vw, 42px); line-height: 1.12; }

/* ---------- note ---------- */
.note { background: var(--paper-deep); padding: 13vh 32px; }
.note-in { max-width: var(--max); margin: 0 auto; }
.note-title { margin-bottom: 44px; }
.note-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 56px; font-size: 18px; line-height: 1.62; }
.note-close { grid-column: 1 / -1; margin-top: 18px; font-family: var(--display); font-weight: 500; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25; max-width: 26em; text-wrap: balance; }
.note .eyebrow, .lab .eyebrow { color: var(--ink); }

/* ---------- boards (shared) ---------- */
.board { position: relative; width: 100%; aspect-ratio: 1; touch-action: manipulation; }
.board > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.board-cells { position: absolute; display: grid; }
.cell {
    appearance: none; border: 0; padding: 0; margin: 0; background: transparent; cursor: default;
    width: 100%; height: 100%; border-radius: 0;
}
.board-chess .cell.can-act { cursor: grab; touch-action: none; }
.board-go .cell.can-act { cursor: pointer; }
.board.is-dragging, .board.is-dragging .cell { cursor: grabbing; }
.cell[aria-disabled="true"] { cursor: default; }
/* two-tone ring: ink outside, paper inside, visible on both squares and on stones of both colors */
.cell:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; box-shadow: inset 0 0 0 4px var(--paper); }
.board-go .cell:focus-visible { border-radius: 50%; outline-offset: -6px; }

/* chess board */
.sq-l { fill: var(--sq-light); }
.sq-d { fill: var(--sq-dark); }
.sq-l, .sq-d { transition: fill 1.2s var(--ease); }
.is-still .sq-l { fill: var(--sq-light-still); }
.is-still .sq-d { fill: var(--sq-dark-still); }
.board-frame { fill: none; stroke: var(--rule-ui); stroke-width: 1; }
.last .board-frame { display: none; }
.coord { fill: var(--ink-2); font-family: var(--sans); font-weight: 500; text-anchor: middle; dominant-baseline: central; }
.last .coord { fill: var(--on-night-2); }
.hl-honey { fill: var(--honey); fill-opacity: 0.55; }
.hl-hover { fill: var(--ink); fill-opacity: 0.1; }
.hint-dot { fill: var(--ink); fill-opacity: 0.24; }
.hint-ring { fill: none; stroke: var(--ink); stroke-opacity: 0.26; stroke-width: 8; }
.mate-box { fill: none; stroke: var(--chess); }
.arrow { fill: var(--chess); stroke: var(--chess); opacity: 0.85; }
.arrow line { fill: none; transition: stroke-dashoffset 1.2s var(--ease); }
.arrow polygon { stroke: none; transition: opacity 0.15s var(--ease); }
.piece { transition: transform 0.2s var(--ease-move), opacity 0.2s var(--ease); }
.is-demo .piece { transition-duration: 0.45s; }
.piece.dragging { transition: none; }
.piece-ghost { opacity: 0.3; }
.piece-values text { font-family: var(--sans); font-size: 30px; font-weight: 600; text-anchor: middle; dominant-baseline: central; }

/* weiqi board */
.go-stone { transition: opacity 0.35s, transform 0.35s var(--ease-out); }
.go-coords text { fill: var(--ink); font-family: var(--sans); font-weight: 500; text-anchor: middle; dominant-baseline: central; }
.go-labels text { font-family: var(--sans); font-weight: 600; text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; }

/* the play-here marker pulses a few times, then rests; it stops at once when the board is hovered or focused */
.pulse-ring { fill: none; opacity: 0.75; animation: ring 1.8s var(--ease) 6; transform-box: fill-box; transform-origin: center; }
.ring-chess { stroke: var(--chess); }
.ring-weiqi { stroke: var(--weiqi); }
@keyframes ring { 0% { opacity: 0.85; transform: scale(0.82); } 70% { opacity: 0; transform: scale(1.32); } 100% { opacity: 0; transform: scale(1.32); } }
.board:hover .pulse-ring, .board:focus-within .pulse-ring { animation: none; }
.breathe { animation: breathe 5.5s ease-in-out 3; }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.66; } }

/* ---------- make the last move ---------- */
.last { background: var(--night); color: var(--on-night); padding: 14vh 32px 10vh; }
.last-head { max-width: var(--max); margin: 0 auto 7vh; }
.last-intro { margin-top: 22px; font-size: clamp(19px, 1.7vw, 23px); color: var(--on-night-2); max-width: 32em; }
.last-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.panel { display: flex; flex-direction: column; }
.panel-game { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-night-2); }
.panel-q { font-family: var(--display); font-weight: 500; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.08; color: var(--on-night); margin: 10px 0 12px; }
.panel-how { font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--on-night-2); min-height: 3em; margin-bottom: 18px; }
.board-wrap { position: relative; }
/* "Checkmate." is a caption under the board, not a stamp across it */
.mate-flash {
    margin-top: 18px; pointer-events: none; min-height: 1em;
    font-family: var(--display); font-weight: 500; text-transform: uppercase; font-size: clamp(30px, 3.6vw, 52px); line-height: 1; letter-spacing: 0.02em;
    color: var(--chess-night); opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--ease), transform 0.9s var(--ease-out);
}
.panel.is-done .mate-flash { opacity: 1; transform: none; }
.go-flash { color: var(--weiqi-night); }
/* the outcome takes no space until the move is played, so the section never ends in blank night */
.outcome { margin-top: 28px; }
.outcome-in { display: grid; gap: 8px; min-height: 0; }
.js .outcome { display: grid; grid-template-rows: 0fr; margin-top: 0; transition: grid-template-rows 0.8s var(--ease), margin-top 0.8s var(--ease); }
.js .panel.is-done .outcome { grid-template-rows: 1fr; margin-top: 20px; }
.js .panel:not(.is-done) .outcome-in { overflow: hidden; }
.js .outcome-in > * { opacity: 0; transform: translateY(8px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .panel.is-done .outcome-in > * { opacity: 1; transform: none; }
.panel.is-done .outcome-in > *:nth-child(1) { transition-delay: 0.9s; }
.panel.is-done .outcome-in > *:nth-child(2) { transition-delay: 1.9s; }
.panel.is-done .outcome-in > *:nth-child(3) { transition-delay: 2.9s; }
.panel.is-done .outcome-in > *:nth-child(4) { transition-delay: 3.9s; }
.panel.is-done .outcome-in > *:nth-child(5) { transition-delay: 4.9s; }
.panel.is-done .outcome-in > *:nth-child(6) { transition-delay: 5.6s; }
.panel.is-done .outcome-in > *:nth-child(7) { transition-delay: 6.2s; }
.reduce .panel.is-done .outcome-in > * { transition-delay: 0s !important; }
/* a focused reset button shows at once, even before its turn in the sequence */
.js .panel.is-done .outcome-in > .text-btn:focus-visible { opacity: 1; transform: none; transition-delay: 0s; }
.out-line { font-family: var(--display); font-size: clamp(21px, 1.9vw, 27px); line-height: 1.22; color: var(--on-night); }
/* number first, then a plain phrase */
.out-stat { display: flex; align-items: baseline; justify-content: flex-start; gap: 14px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule-night); }
.stat-num { font-family: var(--display); font-weight: 500; font-size: 48px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--on-night); }
.stat-label { font-family: var(--sans); font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--on-night-2); }
.out-note { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--on-night-2); }
.outcome .text-btn { justify-self: start; color: var(--on-night); margin-top: 4px; }
/* the gauge is a measuring scale, not a progress bar */
.gauge { margin-top: 18px; }
.gauge-scale { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--on-night-2); margin-bottom: 12px; }
.gauge-track { position: relative; height: 1px; background: var(--rule-ui-night); }
.gauge-tick { position: absolute; top: -3px; width: 1px; height: 7px; background: var(--rule-ui-night); }
.gauge-zero { position: absolute; left: 50%; top: -8px; width: 1px; height: 17px; background: var(--on-night); }
.gauge-mark { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); left: var(--x, 50%); transition: left 2.4s var(--ease-out); }
.gauge-from { background: var(--night); border: 1.5px solid var(--on-night-2); }
.gauge-to { background: var(--on-night); box-shadow: 0 0 0 3px var(--night); }
.gauge-read { margin-top: 16px; font-family: var(--sans); font-size: 15px; color: var(--on-night-2); font-variant-numeric: tabular-nums; }
/* estimates are set in the sans, whose plus sign survives at any size */
.gauge-read strong { font-family: var(--sans); font-weight: 500; font-size: 26px; color: var(--on-night); margin-left: 4px; vertical-align: -0.08em; font-variant-numeric: tabular-nums; }
.gauge-arrow { margin: 0 6px; }

/* ---------- definitions ---------- */
.defs { padding: 16vh 32px 14vh; }
.defs-head, .defs-visual, .defs-control, .defs-cols { max-width: var(--max); margin-left: auto; margin-right: auto; }
.defs-intro { margin-top: 20px; font-size: 20px; color: var(--ink-2); max-width: 38em; }
.defs-visual { margin-top: 6vh; }
.defs-visual svg { width: 100%; height: auto; aspect-ratio: 1000 / 360; display: block; overflow: visible; }
.defs-control { margin-top: 4vh; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; max-width: 900px; }
.defs-end { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.defs-end-l { color: var(--chess); }
.defs-end-r { color: var(--weiqi); }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; cursor: pointer; margin: 0; }
.range::-webkit-slider-runnable-track { height: 1px; background: var(--ink); }
.range::-moz-range-track { height: 1px; background: var(--ink); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -12.5px; border-radius: 50%; background: var(--ink); border: 5px solid var(--paper); box-shadow: 0 0 0 1px var(--ink); }
.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 5px solid var(--paper); box-shadow: 0 0 0 1px var(--ink); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.defs-cols { margin-top: 7vh; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.defs-col-head { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; padding-bottom: 14px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; }
.defs-col[data-defs-col="chess"] .defs-col-head { color: var(--chess); }
.defs-col[data-defs-col="weiqi"] .defs-col-head { color: var(--weiqi); }
.defs-list li { font-family: var(--display); font-size: clamp(21px, 2vw, 28px); line-height: 1.2; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); transition: color 0.35s var(--ease); }
.defs-list li.is-faded { color: var(--ink-2); }

/* ---------- lab: one ruled column, not a box inside a box ---------- */
.lab { background: var(--paper-deep); padding: 15vh 32px 14vh; }
.lab-head { max-width: var(--max); margin: 0 auto 7vh; }
.lab-intro { margin-top: 20px; font-size: 20px; max-width: 34em; color: var(--ink); }
.lab-card { max-width: 760px; margin: 0 auto; min-height: 420px; }
.lab-meta { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid var(--ink); margin-bottom: 22px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.lab-dots { display: flex; gap: 6px; }
.lab-dots span { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--ink-2); background: transparent; }
.lab-dots span.is-done { background: var(--ink); border-color: var(--ink); }
.lab-q { font-family: var(--display); font-weight: 500; font-size: clamp(28px, 3vw, 44px); line-height: 1.1; margin-bottom: 26px; text-wrap: balance; }
.lab .choice { font-family: var(--serif); font-size: 19px; font-weight: 400; }
.lab .choice.is-picked { font-weight: 500; }
.lab-reveal { margin-top: 26px; display: grid; gap: 14px; }
.lab-verdict { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.lab-verdict:focus { outline: none; }
.lab-verdict:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.lab-verdict svg { width: 18px; height: 18px; }
.lab-verdict.v-chess svg { color: var(--chess); }
.lab-verdict.v-weiqi svg { color: var(--weiqi); }
.lab-verdict.v-hybrid svg { color: var(--hybrid-mark); }
.lab-why { font-size: 19px; line-height: 1.55; }
.lab-pros { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: 16px; line-height: 1.5; }
.lab-pros b { display: block; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.lab-next { justify-self: start; margin-top: 8px; }
.lab-sum-title { font-family: var(--display); font-weight: 500; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; margin-bottom: 26px; }
.lab-bars { display: grid; gap: 14px; margin-bottom: 28px; }
.lab-bar { display: grid; grid-template-columns: 110px 1fr 28px; align-items: center; gap: 14px; font-family: var(--sans); font-size: 14px; font-weight: 500; }
.lab-bar-track { height: 6px; background: var(--paper); }
.lab-bar-fill { display: block; height: 100%; width: var(--w, 0%); transition: width 1s var(--ease-out); }
.lab-bar.b-chess .lab-bar-fill { background: var(--chess); }
.lab-bar.b-weiqi .lab-bar-fill { background: var(--weiqi); }
.lab-bar.b-hybrid .lab-bar-fill { background: var(--hybrid-mark); }
.lab-sum-text { font-size: 19px; line-height: 1.6; margin-bottom: 12px; }

/* ---------- mistake ---------- */
.mistake { padding: 16vh 32px 14vh; }
.mistake-in { max-width: var(--max); margin: 0 auto; }
.mistake-title { font-family: var(--display); font-weight: 500; font-size: clamp(36px, 5.2vw, 78px); line-height: 1.02; max-width: 15em; text-wrap: balance; }
.mistake-grid { margin-top: 9vh; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.mistake-grid-rev { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.mistake-grid-rev .mistake-visual { order: 2; }
.mistake-text { display: grid; gap: 16px; align-content: start; }
.mistake-text p { font-size: 20px; line-height: 1.55; }
/* two ruled lists: a square marks chess, a stone marks weiqi */
.mistake-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--rule); }
.mistake-list li { display: flex; align-items: baseline; gap: 12px; padding: 9px 0 10px; border-bottom: 1px solid var(--rule-soft); font-family: var(--display); font-weight: 500; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2; }
.mistake-list li::before { content: ''; flex: none; width: 8px; height: 8px; transform: translateY(-0.1em); }
.mistake-list-chess li { color: var(--chess); }
.mistake-list-chess li::before { background: var(--chess); }
.mistake-list-weiqi li { color: var(--weiqi); }
.mistake-list-weiqi li::before { background: var(--weiqi); border-radius: 50%; }
.mistake-close { margin-top: 11vh; padding-top: 6vh; border-top: 1px solid var(--rule); font-family: var(--display); font-weight: 500; font-size: clamp(34px, 5vw, 76px); line-height: 1.02; display: grid; }
.mistake-close span:last-child { font-style: italic; }

/* ---------- closing ---------- */
.close { background: var(--night); color: var(--on-night); padding: 22vh 32px 20vh; }
.close-in { max-width: var(--max); margin: 0 auto; }
.close-title { font-family: var(--display); font-weight: 500; text-transform: uppercase; font-size: clamp(46px, 9vw, 150px); line-height: 0.9; letter-spacing: 0; text-wrap: balance; color: var(--on-night); }
.close-sub { margin-top: 5vh; font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.5vw, 34px); color: var(--on-night-2); max-width: 24em; }
.close-lines { margin-top: 13vh; display: grid; gap: 6px; font-family: var(--display); font-weight: 500; font-size: clamp(24px, 2.7vw, 40px); line-height: 1.2; }
.close-lines p:nth-child(1) { color: var(--chess-night); }
.close-lines p:nth-child(2) { color: var(--weiqi-night); }
.close-lines p:nth-child(3) { color: var(--on-night); margin-top: 16px; }

/* ---------- sources ---------- */
.sources { padding: 12vh 32px 10vh; }
.sources-in { max-width: 900px; margin: 0 auto; }
.sources-title { font-family: var(--display); font-weight: 500; font-size: 32px; line-height: 1.1; letter-spacing: 0; color: var(--ink); margin-bottom: 28px; }
.src-group + .src-group { margin-top: 36px; }
.src-list { display: grid; gap: 14px; }
.src-list li { font-size: 16px; line-height: 1.55; padding-left: 1.4em; text-indent: -1.4em; }
.src-note { display: block; color: var(--ink-2); font-size: 15px; text-indent: 0; }
.src-list a { text-decoration-color: var(--rule-ui); text-underline-offset: 3px; overflow-wrap: anywhere; }
.src-list a:hover { text-decoration-color: currentColor; }
.src-sub { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 12px; }

/* ---------- footer ---------- */
.foot { background: var(--night); color: var(--on-night-2); padding: 64px 32px 32px; font-family: var(--sans); font-size: 14px; border-top: 1px solid var(--rule-night); }
.foot-in { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; }
.foot-name { font-family: var(--display); font-size: 24px; color: var(--on-night); text-decoration: none; }
.foot-langs { display: flex; gap: 18px; margin: 12px 0 14px; font-size: 16px; }
.foot-langs [lang="zh-Hans"] { letter-spacing: 0.3em; }
.foot-langs [lang="ar"] { font-family: 'Noto Naskh Arabic', 'Segoe UI', serif; font-size: 18px; }
.foot-tag { font-family: var(--serif); font-style: italic; font-size: 17px; margin-bottom: 12px; }
.foot-mail { color: var(--on-night); text-decoration: none; }
.foot-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; align-content: start; }
.foot-nav a { text-decoration: none; color: var(--on-night-2); }
.foot-nav a:hover, .foot-mail:hover { color: var(--on-night); }
.foot-bottom { max-width: var(--max); margin: 44px auto 0; padding-top: 20px; border-top: 1px solid var(--rule-night); font-size: 12px; letter-spacing: 0.06em; }

/* ---------- scroll reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ---------- display type ---------- */
/* every line in the display face is set a little heavier, with the sturdier small-size cut,
   so its thin strokes hold up on every screen instead of fading to hairlines */
.h2, .h3, .title, .hero-q, .hero-label-name, .bar-title, .kq blockquote p, .step .step-big, .note-close,
.panel-q, .mate-flash, .out-line, .stat-num, .defs-list li,
.lab-q, .lab-sum-title, .mistake-title, .mistake-list li, .mistake-close, .close-title,
.close-lines, .sources-title, .foot-name { font-weight: 560; font-variation-settings: 'opsz' 24; }
/* mid-size lines (roughly 20 to 50px) show the thinnest strokes, so they go a little heavier than the big titles */
.kq blockquote p, .step .step-big, .note-close, .defs-list li, .lab-q, .lab-sum-title,
.mistake-list li, .h3, .sources-title { font-weight: 620; }
/* light text on the night ground reads thinner than dark text on paper, so it goes a step heavier there */
.last .h2, .panel-q, .mate-flash, .out-line, .last .stat-num, .close-title, .close-lines, .foot-name, .hero-label-chess .hero-label-name, .hero-copy-a .hero-q { font-weight: 640; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
    .story-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    /* the sticky panel starts at the very top and pads past the bar, so text never shows through above it */
    .story-visual { top: 0; height: auto; z-index: 2; background: var(--paper); padding: calc(var(--bar-h) + 12px) 0 14px; border-bottom: 1px solid var(--rule-soft); }
    /* the pinned pair of boards never takes more than about half the screen, leaving room for the text */
    .story-boards { gap: 14px; max-width: min(100%, calc(100svh - 200px)); margin-inline: auto; }
    /* interactive boards never grow taller than the screen, so a drag can always finish */
    .board-wrap { width: 100%; max-width: min(100%, 78svh); margin-inline: auto; }
    .story-fig figcaption { margin-top: 6px; }
    .step { min-height: 62vh; }
    .last-grid, .defs-cols, .mistake-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
    .mistake-grid-rev { grid-template-columns: minmax(0, 1fr); }
    .mistake-grid-rev .mistake-visual { order: 0; }
    .mistake-visual { max-width: 460px; }
    .note-cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .foot-in { grid-template-columns: minmax(0, 1fr); }
}
/* landscape phones: too short for a pinned panel, so the boards simply scroll with the text */
@media (max-width: 980px) and (max-height: 560px) {
    .story-visual { position: relative; top: auto; padding-top: 12px; }
    .story-boards { max-width: min(100%, 560px); }
}
@media (max-width: 760px) {
    :root { --bar-h: 52px; }
    body { font-size: 18px; }
    .bar { padding: 0 16px; }
    .bar-title { display: none; }
    /* the word leaves the screen but stays as the button's name */
    .bar-sound-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .bar-sound { min-width: 44px; justify-content: center; padding: 0; }
    .bar.in-hero::before { width: 100%; }
    .bar.in-hero::after { display: none; }
    .bar.in-hero .bar-sound { color: var(--on-night); }
    .hero { background: var(--board-go); }
    .hero-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 1fr; }
    .hero-copy-a { clip-path: inset(0 0 50% 0); }
    .hero-copy-b { clip-path: inset(50% 0 0 0); }
    .hero-label { bottom: auto; }
    .hero-label-chess { top: auto; bottom: calc(50% + 12px); left: 18px; }
    .hero-label-weiqi { bottom: 12px; right: 18px; }
    .hero-cue { left: 50%; color: var(--ink); }
    /* the phone boards sit below the bar and above their labels */
    .hero-chess .hero-svg { top: var(--bar-h); height: calc(100% - var(--bar-h)); }
    .hero-weiqi .hero-svg { height: calc(100% - 72px); }
    .bar.in-hero.on-wood::before { background: rgba(220, 195, 150, 0.94); }
    .bar.in-hero.on-wood .bar-home, .bar.in-hero.on-wood .bar-sound { color: var(--ink); }
    .hero-copy { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 1fr; }
    .hero-q { width: min(84%, 12em); }
    .intro { padding: 14vh 22px 10vh; }
    .step p { font-size: 20px; }
    .story, .last, .defs, .lab, .mistake, .note, .close, .sources, .foot { padding-left: 22px; padding-right: 22px; }
    .note-cols { grid-template-columns: minmax(0, 1fr); }
    .defs-control { grid-template-areas: "l r" "s s"; grid-template-columns: 1fr 1fr; }
    .defs-end-l { grid-area: l; } .defs-end-r { grid-area: r; text-align: right; } .range { grid-area: s; }
    .lab-pros { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .lab-bar { grid-template-columns: 84px 1fr 24px; }
    .mistake-list { grid-template-columns: minmax(0, 1fr); }
}
/* reduced motion: states change instantly; nothing fades, slides, or loops */
.reduce *, .reduce *::before, .reduce *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
}