/* Stream Scene. Every page is a frame of his stream: the board is the scene,
   and what is said over it rides in graphite lower-third plates. The rules the
   rest of this file keeps:
   - the ground is lichess's brown board, the colours of the embed on game pages;
   - anything "on air" (names, numbers, headings) is Barlow Condensed;
   - tally red marks the one moment playing now and nothing else;
   - during the game and in the review are told apart by line form - a solid
     bar against a dashed one - so the difference does not rest on colour. */
/* Barlow and Barlow Condensed (Jeremy Tribby, SIL Open Font License - see
   fonts/OFL.txt), served from the site itself rather than Google Fonts so no
   page waits on another host before it can paint. Latin subset only. */
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 500;
  font-display: swap; src: url(fonts/barlow-500-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400;
  font-display: swap; src: url(fonts/barlow-400.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500;
  font-display: swap; src: url(fonts/barlow-500.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600;
  font-display: swap; src: url(fonts/barlow-600.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600;
  font-display: swap; src: url(fonts/barlow-condensed-600.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700;
  font-display: swap; src: url(fonts/barlow-condensed-700.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Caveat (The Caveat Project Authors, OFL - fonts/OFL-caveat.txt), for the
   doodles only. */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600;
  font-display: swap; src: url(fonts/caveat-600.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F; }

:root {
  --dark-sq: #b58863; --light-sq: #f0d9b5;
  --ground: #e9dfcc;            /* the board's light square, stepped back */
  --plate: #17181b;             /* lower-third graphite */
  --plate-2: #24262b;
  --bone: #f4f1ea;              /* type on graphite, and the light plates */
  --ink: #17181b;
  --muted: #5e5850;             /* secondary type on ground and bone: 5.9:1 */
  --on-plate-muted: #aaa49a;    /* secondary type on graphite: 7.4:1 */
  --rule: #d4c6ac;
  --tally: #d8402f;             /* playing now, and only that */
  --replay: #3f6f9f;            /* the review */
  --live: #8b5e3c;              /* during the game: the board's dark square,
                                   deepened to hold 3:1 on bone and graphite */
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --text: Barlow, ui-sans-serif, system-ui, sans-serif;
  /* Wide enough for the longest move token, "20... Qxa1+", in the condensed
     face; rem, so it grows with the reader's text size instead of clipping. */
  --move-col: 6.4rem;
  /* The type scale. Every size in this file is one of these or a display
     clamp; a new rule picks a step rather than inventing a size. */
  --fs-label: .8rem;            /* on-air labels: crumbs, tags, stamps, keys */
  --fs-small: .92rem;           /* his notes, secondary lines */
  --fs-body: 1.04rem;           /* titles of rows and themes */
  --fs-title: 1.3rem;           /* move numbers, end card */
  --fs-heading: 1.5rem;         /* section headings */
  --bone-hi: #fffdf8;           /* a light plate under the pointer */
  --shadow-ink: 23 24 27;       /* graphite, for shadows */
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
  accent-color: var(--plate);
}
* { box-sizing: border-box; }
html { scrollbar-color: var(--dark-sq) var(--ground); }
body { margin: 0; background: var(--ground); color: var(--ink);
       font: 16px/1.55 var(--text); -webkit-font-smoothing: antialiased; }
::selection { background: var(--plate); color: var(--bone); }
a { text-underline-offset: .2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--replay); outline-offset: 2px; }
.wrap, main { max-width: 1180px; margin: 0 auto; }
main { padding: 34px 28px 72px; }

/* ---- the scene ------------------------------------------------------ */
/* The board at a size where it reads as the set behind the caption rather
   than as a position, darkening toward the plate so the type has a floor. */
header.scene { position: relative; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(23,24,27,0) 25%, rgb(var(--shadow-ink) / .5)),
    repeating-conic-gradient(var(--dark-sq) 0 25%, var(--light-sq) 0 50%) 0 0 / 7.5rem 7.5rem; }
header.scene .wrap { padding: 20px 28px 0; min-height: clamp(17rem, 34vw, 25rem);
                     display: flex; flex-direction: column; }
header.scene .topline { flex: 0 0 auto; position: relative; z-index: 1; }
header.scene .lower { position: relative; z-index: 1; }

/* His sayings, inked on the board along the top band, clear of the lower
   third. Graphite at partial strength so they read on both squares without
   competing with the plates. Fewer of them as the scene narrows; none on a
   phone, where the lower third fills the scene. */
.doodles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.doodle { position: absolute; width: 150px; height: auto; fill: none;
          stroke: rgb(var(--shadow-ink) / .62); stroke-width: 2.2;
          stroke-linecap: round; stroke-linejoin: round; transform: rotate(var(--tilt, 0deg)); }
.doodle .dash { stroke-dasharray: 5 6; }
.doodle .dot { stroke-width: 4; }
.doodle text { stroke: none; fill: rgb(var(--shadow-ink) / .78);
               font: 600 19px/1 Caveat, cursive; }
.doodle text.big { font-size: 34px; }
/* Each doodle has its own width; where it goes is the place it was dealt. */
.d-frankfurt { width: 150px; } .d-tiger { width: 140px; } .d-granite { width: 145px; }
.d-gift { width: 128px; } .d-peregrination { width: 160px; } .d-hat { width: 150px; }
.d-stone { width: 132px; } .d-everest { width: 200px; }
.d-knife { width: 112px; } .d-queen { width: 150px; } .d-cannon { width: 180px; }
.d-gold { width: 150px; } .d-umbrella { width: 140px; }
/* Four places at most, along the top band clear of the lower third; every
   doodle dealt past them stays off the board. */
.s1 { top: 10px; left: 30%; --tilt: -3deg; }
.s2 { top: 16px; left: 47%; --tilt: 3deg; }
.s3 { top: 8px;  left: 63%; --tilt: -2deg; }
.s4 { top: 14px; left: 79%; --tilt: 4deg; }
.doodle:not(.s1):not(.s2):not(.s3):not(.s4) { display: none; }
@media (max-width: 1100px) { .s4 { display: none; }
                             .s1 { left: 30%; } .s2 { left: 50%; } .s3 { left: 70%; } }
@media (max-width: 760px)  { .doodles { display: none; } }

/* The breadcrumb is the stream's bug: small plates in the top corner. */
.crumbs { margin: 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0;
             font: 600 var(--fs-label)/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; }
.crumbs li { display: flex; min-width: 0; }
.crumbs a, .crumbs [aria-current="page"] { display: block; padding: 7px 10px; background: var(--plate);
             color: var(--bone); text-decoration: none; white-space: nowrap; overflow: hidden;
             text-overflow: ellipsis; max-width: 56ch; }
.crumbs a:hover { background: var(--plate-2); text-decoration: underline; }
/* The page itself is named by its lower third, so its own crumb is left to
   screen readers rather than printed twice. */
.crumbs li:has([aria-current="page"]) { position: absolute; width: 1px; height: 1px;
             overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.lower { margin-top: auto; margin-bottom: clamp(26px, 4vw, 46px); margin-left: -28px;
         display: flex; align-items: stretch; max-width: calc(100% + 28px);
         filter: drop-shadow(0 10px 18px rgb(var(--shadow-ink) / .28)); }
.lower .tally { flex: 0 0 10px; background: var(--tally); transform-origin: 50% 100%;
                animation: tally-up .7s var(--ease) both; }
.lower .name { background: var(--plate); color: var(--bone); padding: 18px 28px 16px;
               min-width: 0; max-width: 46rem; }
.lower h1 { margin: 0; font: 700 clamp(2.1rem, 5.4vw, 4.2rem)/.94 var(--cond);
            text-transform: uppercase; letter-spacing: .005em; text-wrap: balance; }
.lower .sub { margin: 9px 0 0; color: var(--on-plate-muted); font: 500 var(--fs-small)/1.4 var(--text);
              max-width: 60ch; }
.lower .tick { background: var(--bone); color: var(--plate); padding: 16px 24px;
               display: flex; flex-direction: column; justify-content: center; flex: 0 0 auto; }
.tick b { font: 700 clamp(1.9rem, 4.2vw, 3rem)/1 var(--cond); font-variant-numeric: tabular-nums;
          white-space: nowrap; }
.tick .arrow { color: var(--live); padding: 0 .16em; }
.tick small { margin-top: 7px; font: 600 var(--fs-label)/1.2 var(--cond); letter-spacing: .14em;
              text-transform: uppercase; color: var(--muted); }
@keyframes tally-up { from { transform: scaleY(0); } }

/* The game page's own caption, between the control bar and the stage. */
.lower.slim { margin: 0 0 16px -28px; filter: none; }
.lower.slim .name { padding: 12px 22px 11px; display: flex; align-items: center; }
.lower.slim h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1; }
.lower.slim .tick { padding: 9px 18px; }
.lower.slim .tick b { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.lower.slim .tick small { margin-top: 4px; }

/* Game pages drop the scene: the header is a control bar, the crumbs on the
   left and the stage switch on the right, on graphite. */
header.bar { background: var(--plate); }
header.bar .wrap { padding: 10px 28px; }
.topline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.topline .crumbs { flex: 1 1 auto; min-width: 0; }
header.bar .crumbs a { background: var(--plate-2); }


/* ---- headings ------------------------------------------------------- */
h2 { display: flex; align-items: center; gap: 12px; margin: 48px 0 16px;
     font: 700 var(--fs-heading)/1 var(--cond); letter-spacing: .06em; text-transform: uppercase; }
h2::before { content: ""; width: 28px; height: 5px; background: var(--plate); }
.key { margin: -6px 0 18px; color: var(--muted); font-size: var(--fs-small); max-width: 70ch; }
main > :first-child h2, main > section:first-child h2, .split h2 { margin-top: 0; }
h3 { display: flex; align-items: center; gap: 8px; margin: 26px 0 10px;
     font: 700 var(--fs-label)/1 var(--cond); letter-spacing: .14em; text-transform: uppercase;
     color: var(--muted); }
h3:first-of-type { margin-top: 4px; }
.dicon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor;
         stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---- series layout: captions beside the ladder ----------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 40px; align-items: start; }
.ladder ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rung { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); align-items: center;
        background: var(--bone); color: var(--ink); text-decoration: none;
        box-shadow: 0 1px 2px rgb(var(--shadow-ink) / .08);
        transition: background-color .2s var(--ease), color .2s var(--ease); }
.rung b { padding: 10px 0 10px 14px; font: 700 1.9rem/1 var(--cond); font-variant-numeric: tabular-nums; }
.rung span { padding-right: 12px; font-size: var(--fs-small); color: var(--muted); }
.rung:hover { background: var(--plate); color: var(--bone); }
.rung:hover span { color: var(--on-plate-muted); }

/* ---- themes: caption plates ------------------------------------------ */
.entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.theme { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 16px;
         background: var(--plate); color: var(--bone); padding: 12px 14px 12px 18px;
         box-shadow: 0 2px 6px rgb(var(--shadow-ink) / .16); }
.theme details { flex: 1 1 14rem; min-width: 0; }
.theme .title { font: 600 var(--fs-body)/1.3 var(--text); cursor: pointer; list-style: none;
                display: flex; align-items: baseline; gap: 12px; }
.theme .title::-webkit-details-marker { display: none; }
/* The disclosure mark, drawn: two bars that make a plus, the upright one
   dropping out when the theme is open. It always sits before the title, so it
   never floats between the title and the game numbers. */
.theme .title::before { content: ""; flex: 0 0 10px; height: 10px; align-self: center;
  background: linear-gradient(var(--on-plate-muted), var(--on-plate-muted)) center / 10px 2px no-repeat,
              linear-gradient(var(--on-plate-muted), var(--on-plate-muted)) center / 2px 10px no-repeat; }
.theme details[open] .title::before {
  background: linear-gradient(var(--bone), var(--bone)) center / 10px 2px no-repeat; }
.theme .title:hover { text-decoration: underline; }
.theme .title:focus-visible { outline-color: var(--bone); }
.blurb { margin: 8px 0 2px 22px; max-width: 70ch; color: var(--on-plate-muted); font-size: var(--fs-small); }
.refs { display: flex; flex-wrap: wrap; gap: 4px; flex: 0 1 auto; justify-content: flex-end; }
.theme .refs { margin-top: 1px; }
/* One bug per game, carrying just the episode number. It links to the first
   position it stands for; the full list is on the tooltip. */
.chip { display: inline-flex; align-items: center; justify-content: center; min-width: 2.1em;
        padding: 4px 6px; background: var(--bone); color: var(--plate); text-decoration: none;
        font: 700 var(--fs-small)/1 var(--cond); font-variant-numeric: tabular-nums;
        transition: background-color .15s var(--ease); }
.chip:hover { background: var(--light-sq); }
.chip:focus-visible { outline-color: var(--bone); }

/* ---- games and openings: light plates -------------------------------- */
/* Two columns, two rows, baseline-aligned: the number sits on the title's
   baseline and the timestamps on the note's first line. */
.entry, .row { display: grid; grid-template-columns: var(--move-col) minmax(0, 1fr);
         column-gap: 16px; row-gap: 4px; align-items: baseline;
         text-decoration: none; color: inherit; background: var(--bone);
         padding: 13px 18px; box-shadow: 0 1px 2px rgb(var(--shadow-ink) / .08);
         transition: background-color .25s var(--ease), color .25s var(--ease); }
.row { cursor: pointer; }
@media (hover: hover) { .entry:hover, .row:hover { background: var(--bone-hi); } }
.move { grid-column: 1; white-space: nowrap; font: 700 var(--fs-title)/1.1 var(--cond);
        font-variant-numeric: tabular-nums; }
.stamps { grid-column: 1; font: 600 var(--fs-label)/1.2 var(--cond); letter-spacing: .1em;
          text-transform: uppercase; color: var(--muted); }
.title { grid-column: 2; font-weight: 600; min-width: 0; color: inherit; text-decoration: none; }
a.title:hover { text-decoration: underline; }
/* 11px is the floor for functional text; an uppercase tracked label is still
   functional text. */
.tag { margin-left: 8px; font: 600 var(--fs-label)/1 var(--cond); text-transform: uppercase;
       letter-spacing: .1em; color: var(--muted); white-space: nowrap; }
.note { grid-column: 2; min-width: 0; max-width: 70ch; color: var(--muted); font-size: var(--fs-small); }

/* His side, drawn: the same two squares the board is made of. */
.side { display: inline-block; width: .82em; height: .82em; margin-right: .32em;
        vertical-align: -.06em; box-shadow: inset 0 0 0 1.5px var(--plate); }
.side-b { background: var(--plate); }
.side-w { background: var(--bone); }

/* ---- the game page --------------------------------------------------- */
main:has(.stage) { padding-top: 22px; }
.stage { background: var(--plate); box-shadow: 0 10px 28px rgb(var(--shadow-ink) / .22); }
.tabs { display: inline-flex; gap: 2px; }
.tab { border: 0; background: var(--plate-2); color: var(--on-plate-muted); cursor: pointer;
       font: 600 var(--fs-label)/1 var(--cond); letter-spacing: .12em; text-transform: uppercase;
       padding: 8px 12px; transition: background-color .15s var(--ease), color .15s var(--ease); }
.tab:hover { color: var(--bone); }
.tab[aria-pressed="true"] { background: var(--bone); color: var(--plate); }
.tab:focus-visible { outline-color: var(--bone); }
/* One box, two frames. Both stay mounted so switching never reloads the board
   or interrupts playback, and the box keeps the video's ratio in both views so
   switching does not move everything below it. The board embed is square and
   letterboxes itself inside the wider box. */
.views { position: relative; aspect-ratio: 16 / 9; }
.views iframe, .views > div { position: absolute; inset: 0; width: 100%; height: 100%;
                              border: 0; display: block; }
.views[data-view="board"] .vid { visibility: hidden; pointer-events: none; }
.views[data-view="video"] .brd { visibility: hidden; pointer-events: none; }
.brd { background: var(--plate); color-scheme: light; }

/* The video's still, standing in for the player until somebody asks to play. */
.facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0;
          background: var(--plate); cursor: pointer; display: block; }
.facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.facade .play { position: absolute; left: 50%; top: 50%; width: 5.5rem; height: 5.5rem;
                transform: translate(-50%, -50%); background: var(--plate);
                box-shadow: 0 6px 18px rgb(var(--shadow-ink) / .35);
                transition: transform .2s var(--ease), background-color .2s var(--ease); }
.facade .play::after { content: ""; position: absolute; left: 54%; top: 50%;
                       transform: translate(-50%, -50%);
                       border-style: solid; border-width: 1rem 0 1rem 1.7rem;
                       border-color: transparent transparent transparent var(--bone); }
.facade:hover .play, .facade:focus-visible .play { background: var(--plate-2);
                                                   transform: translate(-50%, -50%) scale(1.08); }
.facade:focus-visible { outline: 3px solid var(--bone); outline-offset: -3px; }

/* The key to the bars on every timestamp below. */
.legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 16px 0 10px;
          font: 600 var(--fs-label)/1 var(--cond); letter-spacing: .12em; text-transform: uppercase;
          color: var(--muted); }
.legend span, .legend button { display: inline-flex; align-items: center; gap: 8px; }
.legend span::before, .legend button::before { content: ""; width: 22px; height: 0;
                                               border-top: 4px solid var(--live); }
.legend button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink);
                 background: none; border: 0; padding: 0; min-height: 28px; cursor: pointer; }
.legend button:hover { text-decoration: underline; }
.legend .rev::before { border-top: 4px dashed var(--replay); }
.legend .now::before { border-top-color: var(--tally); }

/* Each timestamp is its own seek target: a move discussed live and again in
   the recap gets one per moment. Its bar says which of the two it is. */
.stamp { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 7px;
         border: 0; padding: 0; background: none; position: relative; cursor: pointer;
         color: var(--muted); font: 600 var(--fs-label)/1.4 var(--cond); letter-spacing: .04em;
         font-variant-numeric: tabular-nums; }
.stamp .pin { width: 16px; height: 0; border-top: 3px solid var(--live); }
.stamp.review .pin { border-top: 3px dashed var(--replay); }
/* The label is about 34x18, under the 24x24 floor. A pseudo-element extends
   the hit area without breaking the baseline alignment padding would. */
.stamp::after { content: ""; position: absolute; inset: -6px -8px; }
.stamp:hover { color: var(--ink); text-decoration: underline; }

/* The moment being spoken goes on air: its row becomes the lower third, and
   its own bar turns tally red. The sentence it belongs to follows its stamp in
   the markup, so it needs no class of its own. */
.row.active { background: var(--plate); color: var(--bone); }
.row.active .note, .row.active .tag, .row.active .stamp { color: var(--on-plate-muted); }
.row.active .stamp.on { color: var(--bone); }
.row.active .stamp.on .pin { border-top: 3px solid var(--tally); width: 22px; }
.row.active .stamp.on + .note { color: var(--bone); }
.row.active .stamp:focus-visible, .row.active a:focus-visible { outline-color: var(--bone); }

/* The moves between two notes. Not a row: nothing was said about them, there
   is no moment to seek to, and they are here so the game can still be
   followed. Moves are data, so they get tabular figures. */
.gap { padding: 2px 18px; color: var(--muted); font: 600 var(--fs-small)/1.5 var(--cond);
       letter-spacing: .03em; font-variant-numeric: tabular-nums; }

/* Where the game starts and where it ends. Both are moments in the stream like
   any other, but neither is a note about a move, so they sit on the ground
   rather than on a plate. */
.row.mark { background: none; box-shadow: inset 0 0 0 1px var(--rule); }
/* Italic because these two lines are the only ones on the page that are not
   him talking: the notes are his words, these say where the game starts and
   how it ended. */
.row.mark .note { color: var(--ink); font-weight: 500; font-style: italic; }
.row.mark.active { background: var(--plate); box-shadow: none; }
.row.mark.active .note { color: var(--bone); }

/* The stop in "Video with review stops": it belongs to the move it interrupts, so it
   sits in that row rather than over the video, and it is about the review,
   so it is drawn in the review's dashes. */
.offer { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center;
         gap: 8px 10px; margin-top: 8px; padding: 9px 12px; font-size: var(--fs-small);
         color: var(--ink); background: var(--bone); border: 2px dashed var(--replay);
         max-width: 70ch; }
.offer .go { font: 600 var(--fs-label)/1 var(--cond); letter-spacing: .1em; text-transform: uppercase;
             color: var(--bone); background: var(--plate-2); border: 0;
             padding: 8px 12px; cursor: pointer; }
.offer .go:hover { background: var(--plate); }
/* Both buttons in this box fill up, for different reasons: "Carry on" counts
   down the seconds before it happens by itself, and "Watch that now" becomes
   the clock for the detour once taken, which is a wait of unknown length. Same
   paint either way: the fill is the review's blue, and the label stays light
   over both halves. */
.offer .go.filling { background-image: linear-gradient(to right,
                         var(--replay) 0 var(--p, 0%), transparent var(--p, 0%)); }
/* The detour's clock is not a button any more once it is running; the
   countdown still is, right up to the moment it runs out. */
.offer .go.running { cursor: default; }
.offer .go.running:hover { background-color: var(--plate-2); }

/* The list scrolls on its own so the stage stays put. offsetTop is measured
   against this box, hence position: relative. */
.scroller { position: relative; max-height: clamp(14rem, 46vh, 40rem); overflow-y: auto;
            padding: 2px 0 12px 2px; scrollbar-gutter: stable;
            scrollbar-color: var(--dark-sq) var(--rule); }
.scroller .entries { gap: 5px; }
/* The end card doubles as the scroll runway: it is what lets the final note
   reach the top of the box, so the space below the list carries navigation
   instead of being blank. */
.endcard { display: flex; flex-direction: column; justify-content: center; gap: 12px;
           min-height: clamp(9rem, 31vh, 26rem); margin-top: 8px; padding: 18px 20px;
           background: var(--plate); color: var(--on-plate-muted); }
.endcard .title { font: 700 var(--fs-title)/1.1 var(--cond); letter-spacing: .04em; text-transform: uppercase;
                  color: var(--bone); }
.endcard .links { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.endcard a { color: var(--bone); font-size: var(--fs-small); }
.endcard a:focus-visible { outline-color: var(--bone); }
.endcard .side { box-shadow: inset 0 0 0 1.5px var(--bone); }

/* ---- the root page: who this is ------------------------------------- */
.about { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 26px; align-items: start;
         background: var(--bone); padding: 20px 22px; box-shadow: 0 1px 2px rgb(var(--shadow-ink) / .08); }
.about figure { margin: 0; }
.about img { display: block; width: 100%; height: auto; }
.about figcaption, .about .credit { margin: 7px 0 0; font-size: var(--fs-label); color: var(--muted); }
.about figcaption a, .about .credit a { color: var(--muted); }
.about h2 { margin: 0 0 10px; }
.about blockquote { margin: 0; font-size: var(--fs-small); max-width: 70ch; }
.about blockquote p { margin: 0 0 10px; }

/* ---- prose: the privacy page ----------------------------------------- */
.prose { max-width: 70ch; }
.prose p, .prose li { margin: 0 0 12px; }
.prose ul { padding-left: 1.2em; }
.prose a { color: var(--ink); }
main .prose h2 { margin-top: 40px; }
main .prose h2:first-child { margin-top: 0; }

/* ---- footer --------------------------------------------------------- */
footer.privacy { border-top: 1px solid var(--rule); color: var(--muted); font-size: var(--fs-label); }
footer.privacy .wrap { padding: 16px 28px 28px; max-width: 1180px; }
footer.privacy a { color: var(--muted); }

/* ---- narrow --------------------------------------------------------- */
/* Content-driven: the note column stops being readable below about 30ch,
   which with the number column and the padding lands at ~560px; the ladder
   needs the room before that. */
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ladder ol { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
  .ladder h2 { margin-top: 36px; }
}
@media (max-width: 560px) {
  main { padding: 24px 16px 56px; }
  header.scene .wrap, header.bar .wrap, footer.privacy .wrap { padding-left: 16px; padding-right: 16px; }
  .lower { flex-wrap: wrap; margin-left: -16px; max-width: calc(100% + 16px); }
  .lower .name { flex: 1 1 calc(100% - 10px); padding: 14px 18px 13px; }
  .lower .tick { flex: 1 1 100%; margin-left: 10px; padding: 11px 18px; }
  .entry, .row { grid-template-columns: minmax(0, 1fr); row-gap: 5px; padding: 12px 14px; }
  .move, .stamps, .stamp, .title, .note, .offer { grid-column: 1; }
  .tag { margin-left: 0; display: block; margin-top: 4px; }
  .scroller { max-height: 72svh; }
  .lower.slim { margin: 0 0 12px -16px; flex-wrap: nowrap; }
  /* On a phone the tick folds into the plate as one line, so the stage rises. */
  .lower.slim .name { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 16px; }
  .lower.slim .tick { display: none; }
  .lower.slim .name::after { content: attr(data-tick); font: 600 var(--fs-label)/1.2 var(--cond);
                             letter-spacing: .14em; text-transform: uppercase; color: var(--on-plate-muted); }
  .theme { padding: 11px 12px 11px 14px; }
  .about { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 14px; padding: 14px; }
  .crumbs a, .crumbs [aria-current="page"] { max-width: 24ch; }
}

/* Landscape phones: the stage alone can fill the viewport, so cap it by
   height and let the page scroll rather than squeezing the list to one row. */
@media (max-height: 460px) and (orientation: landscape) {
  .views { aspect-ratio: auto; height: 62vh; }
  .scroller { max-height: 60vh; }
  .endcard { min-height: 40vh; }
}

/* ---- touch ---------------------------------------------------------- */
@media (pointer: coarse) {
  .stamp::after { inset: -10px -12px; }
  .tab { padding: 11px 14px; }
  .chip { padding: 7px 8px; }
  .legend button { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}