/* Homepage. World tokens live in world.css; this file only composes them.
   Direction contract: .impeccable/surfaces/src-index-njk.md
   The first block below is what was left of home.css (retired 2026-10-12, perf audit fix 4): the rules
   no template, data file or script can produce were dropped and the rest kept in their old order, ahead
   of the v2 rules, so the cascade is the same as when the two files loaded one after the other. */
.page-home { --well-cell: 36px; }
.page-home .paper { background-size: var(--well-cell) var(--well-cell); }
.home h2 { margin: 0 0 20px; font: 800 var(--h2)/1.08 var(--face); font-stretch: 112%; letter-spacing: -0.02em; text-wrap: balance; max-width: 26ch; }
.home h3 { margin: 0 0 8px; font: 750 clamp(1.15rem, 1.5vw, 1.4rem)/1.2 var(--face); font-stretch: 106%; }
.home section { padding-block: var(--section); }

/* ---- Hero ---- */
.hero { padding-block: clamp(20px, 3vw, 56px) 0 !important; }
.proof { grid-area: proof; } .hero-play { grid-area: play; }
.jump { margin-top: 12px; }
.jump ul { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0; padding: 0; list-style: none; }
.jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--bone-soft); font-size: 0.92rem; font-weight: 600; text-decoration-color: #4a505c; }
.jump a::before { content: ""; width: 8px; height: 8px; border-radius: 1px; background: var(--work); }
.jump li:nth-child(2) a::before { background: var(--number); }
.jump li:nth-child(3) a::before { background: var(--lesson); }
.jump li:nth-child(4) a::before { background: var(--sky); }
@media (hover: hover) { .jump a:hover { color: var(--bone); } }

/* The well and its HUD */
.well-frame { display: grid; gap: 12px; }
.well-wrap { position: relative; padding-top: 74px; scroll-margin-top: 76px; }
.well {
  --rows: 6;
  position: relative; width: 100%; aspect-ratio: 10 / var(--rows);
  background-color: #10121a;
  background-image: linear-gradient(var(--field-line) 1px, transparent 1px), linear-gradient(90deg, var(--field-line) 1px, transparent 1px);
  background-size: 10% calc(100% / var(--rows));
  border: 2px solid #2c313d; border-radius: 3px;
  box-shadow: inset 0 0 0 1px #0a0b10, 0 18px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
/* Only capture touches while someone is playing, so a swipe on the self-playing well still scrolls the page. */
.well.is-playing { touch-action: none; }
/* Below 1000px the resting board is a short 6-row strip; a real game needs room (Hayden, 2026-10-12: "make the
   game a little bit easier"), so playing grows it to 12 rows. */
@media (max-width: 999px) { .well.is-playing { --rows: 12; } }
.well-static, .well-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.well-static { height: auto; top: auto; bottom: 0; }
.well-canvas { image-rendering: pixelated; }
.perch { position: absolute; top: -4px; right: 8px; width: 64px; transform-origin: 50% 100%; }
.perch .sprite { width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .perch.is-hop { animation: hop 480ms steps(4, end); }
  @keyframes hop { 0%, 100% { transform: none; } 40% { transform: translateY(-10px) rotate(-3deg); } }
}
.well-toast {
  position: absolute; top: 0; left: 0; right: 84px; max-height: 66px; overflow: hidden; padding: 6px 10px;
  background: var(--bone); color: var(--ink); border-radius: 3px; pointer-events: none;
  font: 700 0.78rem/1.3 var(--face); font-stretch: 106%;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  opacity: 0; transition: opacity var(--m-in) var(--ease-out);
}
.well-toast.is-on { opacity: 1; }
.well-toast:empty { display: none; }
.well-hud { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.hud-stat { display: grid; gap: 2px; margin: 0; color: var(--bone-soft); font-size: 0.78rem; font-weight: 600; }
.hud-stat strong { color: var(--number); font: 800 1.9rem/1 var(--face); font-stretch: 112%; }
.hud-next-canvas { width: 45px; height: 30px; image-rendering: pixelated; }
.well-pad { display: flex; gap: 8px; }
.pad-btn { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--radius); background: var(--field-2); box-shadow: inset 0 0 0 2px #3a3f4b, inset 0 -4px 0 rgba(0, 0, 0, 0.3); cursor: pointer; }
.pad-btn .sprite { width: 22px; height: auto; }
@media (hover: hover) { .pad-btn:hover { background: #303641; box-shadow: inset 0 0 0 2px var(--number), inset 0 -4px 0 rgba(0, 0, 0, 0.3); } }
@media (prefers-reduced-motion: no-preference) { .pad-btn { transition: transform var(--m-tap) steps(2, end), background-color var(--m-tap) var(--ease-out); } .pad-btn:active { transform: translateY(2px); } }

/* The ledger: a high-score table of claims that check out */
.proof { margin-top: 0; }
.ledger { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.ledger caption { text-align: left; color: var(--bone-soft); font-size: 0.85rem; padding-bottom: 10px; }
.ledger thead { color: var(--bone-soft); font-size: 0.75rem; text-align: left; }
.ledger th { font-weight: 700; padding: 6px 10px; border-bottom: 1px solid var(--field-line); }
.ledger td { padding: 10px; vertical-align: top; border-bottom: 1px solid var(--field-line); }
.ledger th:last-child { text-align: right; }
.ledger-line { transition: background-color var(--m-flash) var(--ease-out); }
.ledger-line.is-cleared { background: #232733; }

/* The settled stack where the playfield meets paper */
.edge { margin-top: clamp(32px, 5vw, 72px); line-height: 0; }
.edge .sprite { width: 100%; height: auto; }

/* ---- How I work: three habits, one row ---- */
.piece .sprite { height: 56px; width: auto; margin-bottom: 16px; }
.piece p { margin: 0 0 8px; color: var(--ink-soft); }
.piece a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; }

/* ---- A hit and a miss ---- */
.work { padding-top: 0 !important; }

/* ---- Off the clock ---- */
.offclock-grid { display: grid; gap: 36px; align-items: center; }
.offclock h2 { color: var(--bone); }
.offclock-copy p { max-width: 54ch; color: var(--bone); }

.offclock-yard { display: grid; grid-template-columns: auto 1fr; gap: 20px 28px; align-items: end; padding: 26px; border-radius: var(--radius); background: var(--sheet); }
.bella { padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius); }
.bella .sprite { width: clamp(132px, 13vw, 176px); height: auto; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .bella.is-happy .sprite { animation: wiggle 480ms steps(4, end); }
  @keyframes wiggle { 0%, 100% { transform: none; } 25% { transform: rotate(-4deg); } 60% { transform: rotate(3deg); } }
}
.passions { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px 22px; }
.passions li { display: grid; justify-items: center; align-content: end; gap: 6px; color: var(--ink); font-size: 0.82rem; font-weight: 650; }
.passions .sprite { height: 36px; width: auto; }


@media (min-width: 1000px) {
  .well-frame { grid-template-columns: auto auto; justify-content: start; align-items: end; gap: 18px; }
  .well { --rows: 16; width: 100%; }
  /* A fixed width: inside an auto-sized grid column a percentage width collapses to nothing
     (this shipped once at 4px; check-viewport now fails on a well under 120px). */
  .well-wrap { width: 360px; max-width: 100%; }
  .well-hud { flex-direction: column; align-items: flex-start; }
  .well-pad { display: grid; grid-template-columns: repeat(2, 48px); }
  .offclock-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
@media (max-width: 999px) {
  .ledger thead { display: none; }
  .ledger tr { display: grid; grid-template-columns: 1fr; padding: 8px 0; border-bottom: 1px solid var(--field-line); }
  .ledger td { border: 0; padding: 2px 4px; }
}
@media (max-width: 420px) {
  .offclock-yard { grid-template-columns: 1fr; justify-items: start; }
}

.offclock-more a { font-weight: 700; }
/* Homepage v2 (2026-10-11): day job and strategy first, his own sites as proof. The block world is the
   structure, not decoration: one block unit (--u) sizes cards and gaps, every section ends on a settled
   row, and color always means the same thing (amber = proof; each capability keeps its piece color). */
.home { --u: 8px; }
.h-kicker { margin: 0 0 calc(var(--u) * 1.5); display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: .95rem; color: var(--ink-soft); }
.field .h-kicker { color: var(--bone-soft); }
.h-kicker::before { content: none; }
.h-lede { max-width: 68ch; font-size: clamp(1.08rem, 1.3vw, 1.25rem); line-height: 1.55; margin: 0 0 calc(var(--u) * 4); }
.h-lede a, .h-more a { color: var(--work-ink); font-weight: 700; }
.field .h-more a { color: var(--number); }
.h-more { margin: calc(var(--u) * 3) 0 0; }
.home h2 { margin: 0 0 calc(var(--u) * 2); font-size: var(--h2); line-height: 1.04; letter-spacing: -0.02em; font-stretch: 112%; }
.home section { position: relative; }
/* Every section settles onto a row of blocks: the page reads as a stack building up. */
.h-do::after, .h-plays::after, .h-proof::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--u);
  background: repeating-linear-gradient(90deg, var(--piece-i) 0 48px, var(--piece-o) 48px 96px, var(--piece-z) 96px 144px, var(--piece-j) 144px 192px, var(--piece-s) 192px 240px, var(--piece-l) 240px 288px, var(--piece-t) 288px 336px); opacity: .9; }

/* Hero */
.h-hero { padding-block: clamp(32px, 6vw, 88px) 0; overflow: hidden; }
.h-hero-grid { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 900px) { .h-hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); } }
.h-eyebrow { margin: 0 0 calc(var(--u) * 2); color: var(--bone-soft); font-weight: 700; }
.h-eyebrow a { color: var(--bone); text-underline-offset: .18em; }
.h-name { margin: 0; color: var(--bone); font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 800; letter-spacing: .01em; }
.h-line { margin: calc(var(--u)) 0 0; max-width: 20ch; color: var(--bone); font-size: clamp(2.3rem, 5.6vw, 4.6rem); line-height: 1.02; font-weight: 800; font-stretch: 112%; letter-spacing: -.025em; text-wrap: balance; }
.li-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; background: #0a66c2; color: #fff; border-radius: 3px; font: 800 .8rem/1 var(--face); }
.h-photo { justify-self: center; width: min(100%, 380px); }
@media (max-width: 899px) { .h-photo { width: min(72%, 300px); } }

/* The day job: six capabilities, each a whole clickable block in its own color. */
.h-do { padding-block: var(--section); }
.cap-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 2); }
@media (min-width: 700px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cap-grid { grid-template-columns: repeat(3, 1fr); } }
.cap { position: relative; display: grid; align-content: start; gap: var(--u); height: 100%; padding: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 2.5); background: #fff; color: var(--ink);
  text-decoration: none; border-radius: 3px; border-top: var(--u) solid var(--tile); box-shadow: 0 1px 0 var(--paper-line), 6px 6px 0 rgba(20,22,28,.08); transition: transform .15s ease, box-shadow .15s ease; }
.cap-n { font-weight: 800; color: var(--ink-soft); font-size: .85rem; }
.cap strong { font-size: 1.22rem; line-height: 1.25; }
.cap-say { color: var(--ink-soft); line-height: 1.55; }
.cap-proof { margin-top: var(--u); padding-top: var(--u); border-top: 1px solid var(--paper-line); font-size: .92rem; line-height: 1.5; color: var(--ink); }
.cap-proof b { color: #9a5a00; }
.cap:focus-visible, .play:focus-visible, .h-post:focus-visible { outline: 3px solid var(--number); outline-offset: 3px; }

/* Four plays: dark blocks, each with its piece. */
.h-plays { padding-block: var(--section); }
.play { display: grid; grid-template-columns: 48px 1fr; gap: 4px calc(var(--u) * 2); height: 100%; padding: calc(var(--u) * 3); background: var(--field-2); color: var(--bone); text-decoration: none; border-radius: 3px;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.35); transition: background .15s ease; }
.play .sprite { grid-row: span 3; width: 40px; height: auto; }
.play strong { font-size: 1.2rem; line-height: 1.25; }
.play span { color: var(--bone-soft); line-height: 1.55; }
.play em { font-style: normal; color: var(--number); font-weight: 700; font-size: .95rem; line-height: 1.45; }
@media (hover: hover) { .play:hover { background: #242833; } }

/* Receipts: three big numbers, amber always means proof. */
.h-proof { padding-block: var(--section); }
.rcpt-row { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 2); }
@media (min-width: 800px) { .rcpt-row { grid-template-columns: repeat(3, 1fr); } }
.rcpt-row a { display: grid; gap: 6px; height: 100%; padding: calc(var(--u) * 3); background: var(--field); color: var(--bone); text-decoration: none; border-radius: 3px; border-top: var(--u) solid var(--number); box-shadow: 6px 6px 0 rgba(20,22,28,.12); }
.rcpt-row strong { color: var(--number); font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; font-weight: 800; font-stretch: 110%; }
.rcpt-row span { font-weight: 700; line-height: 1.4; }
.rcpt-row em { font-style: normal; color: var(--bone-soft); font-size: .85rem; }

/* Lately */
.h-now { padding-block: var(--section); }
.h-now-grid { display: grid; gap: calc(var(--u) * 4); align-items: center; }
@media (min-width: 900px) { .h-now-grid { grid-template-columns: 1.4fr 1fr; } }
.h-post { display: grid; gap: 6px; padding: calc(var(--u) * 3); background: #fff; color: var(--ink); text-decoration: none; border-radius: 3px; border-top: var(--u) solid var(--piece-j); box-shadow: 0 1px 0 var(--paper-line), 6px 6px 0 rgba(20,22,28,.08); }
.h-post time { color: var(--ink-soft); font-size: .85rem; font-weight: 700; }
.h-post strong { font-size: 1.3rem; line-height: 1.25; }
.h-post span { color: var(--ink-soft); line-height: 1.5; }
.h-follow { padding: calc(var(--u) * 3); background: var(--field); color: var(--bone); border-radius: 3px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.35); }
.h-follow-lead { margin: 0 0 calc(var(--u) * 2); line-height: 1.5; }

/* The game, now its own section at the end. */
.h-game { padding-block: var(--section); }
.h-game-grid { display: grid; gap: calc(var(--u) * 4); align-items: start; }
@media (min-width: 900px) { .h-game-grid { grid-template-columns: 1fr 1fr; } }
.h-game-copy p { color: var(--bone-soft); max-width: 46ch; line-height: 1.55; }
/* Leftovers from the old homepage styles, overridden at the right specificity. */
.home .h-hero { padding-bottom: clamp(36px, 5vw, 72px); }
.home .offclock { padding-block: var(--section); }
.h-game .hero-play { grid-area: auto; align-self: center; justify-self: center; width: 100%; max-width: 520px; }
.h-game-grid { align-items: center; }
.play .sprite { width: 44px; }

/* One system, seven steps (2026-10-11): replaces the four plays. Seven tiles, one block piece each;
   each is a link to that step on /how-i-think/, so it looks clickable because it is. */
.h-sys-lede { max-width: min(100%, calc(480px + 18vw)); margin: 0 0 calc(var(--u) * 3); color: var(--bone-soft); font-size: 1.1rem; line-height: 1.55; }
.sys-row { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 1.5); }
@media (min-width: 640px) { .sys-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sys-row { grid-template-columns: repeat(4, 1fr); } }
/* Step seven spans two cells, so the rows come out whole (no empty slot) and the step that makes it compound gets the room. */
@media (min-width: 640px) { .sys-row li:last-child { grid-column: span 2; } }
.sys-tile { --tile: var(--piece-j); display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; height: 100%; padding: calc(var(--u) * 2.5);
  background: var(--field-2); color: var(--bone); text-decoration: none; border-radius: 3px; border-top: 6px solid var(--tile); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .35); }
@media (hover: hover) { .sys-tile:hover { background: #2c303b; } }
.sys-tile:focus-visible { outline: 3px solid var(--number); outline-offset: 3px; }
.sys-tile--i { --tile: var(--piece-i); } .sys-tile--o { --tile: var(--piece-o); } .sys-tile--t { --tile: var(--piece-t); }
.sys-tile--s { --tile: var(--piece-s); } .sys-tile--z { --tile: var(--piece-z); } .sys-tile--l { --tile: var(--piece-l); }
.sys-tile-piece { width: 48px; height: 24px; fill: var(--tile); }
.sys-tile-n { justify-self: end; font-weight: 800; color: var(--bone-soft); font-size: .9rem; }
.sys-tile strong { grid-column: 1 / -1; font-size: 1.12rem; line-height: 1.25; }
.sys-tile-gate { grid-column: 1 / -1; color: var(--bone-soft); font-size: .95rem; line-height: 1.5; }
.h-sys-compound { max-width: none; margin: calc(var(--u) * 3) 0 0; padding: calc(var(--u) * 2.5) calc(var(--u) * 3); background: var(--bone); color: var(--ink); font-weight: 600; font-size: 1.08rem; line-height: 1.5; border-radius: 3px; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .18); }
.h-sys-compound q { font-weight: 800; }

/* Off the clock, in real photos (2026-10-11: "not seeing a lot of the images i gave you"). A small wall
   of block-framed photos; frames don't lift on hover, because these aren't links. */
.offclock-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 3) calc(var(--u) * 2.5); margin-bottom: calc(var(--u) * 4); padding: 0 12px 12px 0; }
.offclock-wall .wall-wide { grid-column: 1 / -1; }
.offclock-wall .pframe-img img { aspect-ratio: 4 / 3; }
.offclock-wall .wall-wide .pframe-img img { aspect-ratio: 21 / 8; }
.offclock-wall .pframe figcaption { margin-top: 16px; color: var(--bone-soft); font-size: .9rem; font-weight: 600; }
@media (min-width: 900px) {
  .home .offclock-grid { align-items: start; grid-template-rows: auto 1fr; }
  .home .offclock-copy { grid-column: 1; grid-row: 1; }
  .home .offclock-yard { grid-column: 1; grid-row: 2; align-self: start; }
  .home .offclock-wall { grid-column: 2; grid-row: 1 / span 2; margin-bottom: 0; }
}

/* The brand phrase links to the system; one dated, sourced result sits on the first screen (Codex's
   audience review, 2026-10-11: the homepage promised proof before showing any). Amber means proof. */

/* Steps are neutral site-wide (color = outcome only). */
.sys-tile, .sys-tile--i, .sys-tile--o, .sys-tile--t, .sys-tile--s, .sys-tile--z, .sys-tile--l, .sys-tile--j { --tile: var(--step); }
/* Capability cards are neutral; the chips under each say which pieces of the system it is. */
.cap { --tile: #1d2027; }

/* What I look for (2026-10-11): the moat idea, four different sites, each a question nobody answered
   well, what got built, and one amber number. Cards aren't links; the site names are. */
.h-moat { padding-block: var(--section); }
.moat-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 2); }
@media (min-width: 760px) { .moat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1300px) { .moat-grid { grid-template-columns: repeat(4, 1fr); } }
.moat { display: grid; grid-template-rows: auto 1fr auto; gap: calc(var(--u) * 1.5); padding: calc(var(--u) * 3); background: var(--field-2); border-radius: 3px; box-shadow: inset 0 -5px 0 rgba(0,0,0,.35); }
.moat p { margin: 0; line-height: 1.5; }
.moat span { display: block; font-size: .8rem; font-weight: 800; color: var(--bone-soft); margin-bottom: 2px; }
.moat-q { font-size: 1.15rem; font-weight: 800; color: var(--bone); }
.moat-built { color: var(--bone-soft); }
.moat-built a { color: var(--bone); font-weight: 800; }
.moat-n { padding-top: calc(var(--u) * 1.5); border-top: 2px solid #3a3f4b; color: var(--bone); font-weight: 600; }
.moat-n strong { font-size: 1.8rem; color: var(--proof); line-height: 1; margin-right: 4px; }
.moat-n span { margin: 6px 0 0; font-weight: 600; }

/* The homepage ends on a choice, not the game (2026-10-11 retention audit). */
.h-end { padding-block: var(--section-tight); }
.h-end-grid { display: grid; gap: 16px; align-items: center; }
@media (min-width: 900px) { .h-end-grid { grid-template-columns: auto 1fr; gap: 32px; } }
.h-end h2 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.h-end-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

/* Ask Bella on the homepage (2026-10-11): second section, right after the hero answers who this is. */

/* The game, second on the page (2026-10-12): clear a line, unlock a real result. */
.h-game-how { margin: 14px 0 0; color: var(--bone-soft); font-size: .95rem; line-height: 1.55; }
.h-game-how b { color: var(--bone); }
.well-unlocked { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.well-unlocked:empty::before { content: "Nothing unlocked yet. Clear a line."; display: block; padding: 12px 14px; border: 2px dashed #3a3f4b; border-radius: 3px; color: var(--bone-soft); font-size: .92rem; }
.well-unlocked li { position: relative; padding: 10px 14px 10px 30px; background: var(--field-2); border-radius: 3px; line-height: 1.45; color: var(--bone-soft); box-shadow: inset 0 -3px 0 rgba(0,0,0,.3); }
.well-unlocked li::before { content: ""; position: absolute; left: 12px; top: 15px; width: 9px; height: 9px; background: var(--proof); }
.well-unlocked li b { color: var(--bone); }
@media (prefers-reduced-motion: no-preference) { .well-unlocked li:first-child { animation: unlock-in .32s steps(4, end) both; } @keyframes unlock-in { from { transform: translateY(-16px); opacity: 0; } } }
/* One live high score under the game (2026-10-12), linking to the full board on /log/. */
.h-hiscore { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin: 14px 0 0; color: var(--bone-soft); font-size: .95rem; line-height: 1.45; }
.h-hiscore-k { padding: 3px 8px; background: var(--piece-o); color: #0e1014; font: 400 .85rem/1.2 "DotGothic16", ui-monospace, monospace; border-radius: 2px; }
.h-hiscore strong { color: var(--number); }
.h-hiscore a { display: inline-block; padding-block: 10px; color: var(--bone); font-weight: 700; }

/* Hero, rebuilt 2026-10-12 from what his WordPress hero did better: one line in his words with one
   colored word, his promise in the outcome colors, a quiet dated proof strip and three light routes. */
.h-hero { padding-block: clamp(28px, 5vw, 72px) clamp(32px, 5vw, 64px); }
@media (min-width: 900px) { .h-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); } }
.h-eyebrow { margin: 0 0 14px; font-size: .95rem; }
.h-eyebrow .h-name { display: inline; font-size: inherit; color: var(--bone); letter-spacing: 0; }
.h-line { max-width: 17ch; margin: 0; font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.4rem); line-height: 1.04; }
.h-vis { font-style: normal; color: var(--found); }
.h-promise { margin: 18px 0 0; color: #d6dbe2; font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); line-height: 1.45; }
.h-o { font-weight: 800; } .h-o--found { color: var(--found); } .h-o--understood { color: var(--understood); } .h-o--chosen { color: #f08a72; }
.h-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 28px 0 0; padding: 14px 0; list-style: none; border-block: 1px solid var(--field-line); }
.h-proof li { display: grid; gap: 4px; padding: 0 14px; border-left: 1px solid var(--field-line); }
.h-proof li:first-child { padding-left: 0; border-left: 0; }
.h-proof strong { color: var(--number); font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1.1; }
.h-proof span { color: var(--bone-soft); font-size: .84rem; line-height: 1.35; }
@media (max-width: 599px) { .h-proof { grid-template-columns: 1fr; gap: 10px; } .h-proof li { grid-template-columns: 7.2em 1fr; align-items: baseline; padding: 0; border: 0; } }
.h-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.h-routes a { display: grid; gap: 2px; min-height: 56px; padding: 10px 14px; background: var(--field-2); border: 1px solid var(--field-line); border-radius: 6px; color: var(--bone); text-decoration: none; }
.h-routes a b { font-size: 1rem; }
.h-routes a span { color: var(--bone-soft); font-size: .8rem; }
.h-routes li:first-child a { border-color: var(--number); box-shadow: inset 0 -3px 0 var(--number); }
@media (hover: hover) { .h-routes a:hover { background: #22262f; } }
@media (max-width: 599px) { .h-routes { grid-template-columns: 1fr; } .h-routes a { grid-template-columns: auto 1fr; align-items: baseline; gap: 10px; } }
.h-photo { width: min(100%, 320px); }
@media (max-width: 899px) { .h-photo { width: min(56vw, 240px); justify-self: start; } }
.h-sys-compound a { color: inherit; font-weight: 700; text-underline-offset: .2em; }

/* Hold, score and the arcade scoreboard (Hayden, 2026-10-12: "need to be able to hold a piece", "still don't
   see the scoreboard?"). The podium styling borrows from the Pokemon Lineup board on The Quack Report. */
.pad-btn--hold { width: auto; padding: 0 14px; color: var(--bone); font: 800 0.9rem/1 var(--face); letter-spacing: .02em; }
.well-initials { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; gap: 8px; padding: 14px; background: var(--bone); color: var(--ink); border-radius: 3px; box-shadow: 0 -8px 24px rgba(0,0,0,.35); }
.well-initials[hidden] { display: none; }
.well-initials-h { margin: 0; font: 850 1.05rem/1.2 var(--face); }
.well-initials label { font-size: .85rem; font-weight: 650; color: #47505f; }
.well-initials-row { display: flex; gap: 8px; }
.well-initials input { width: 5.2ch; min-height: 48px; padding: 0 10px; font: 850 1.6rem/1 var(--face); letter-spacing: .25em; text-transform: uppercase; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 4px; }
.well-initials-msg { margin: 0; min-height: 1.2em; font-size: .85rem; color: #8a2a17; }
.scoreboard { margin-top: 18px; padding: 14px 16px; background: #10121a; border: 2px solid #2c313d; border-radius: 6px; }
.scoreboard[hidden] { display: none; }
.scoreboard h3 { margin: 0 0 10px; font: 850 1rem/1.2 var(--face); color: var(--number); letter-spacing: .04em; text-transform: uppercase; }
.scoreboard-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sb-row { display: grid; grid-template-columns: 2ch 4ch 1fr auto; gap: 10px; align-items: baseline; padding: 6px 8px; border-radius: 3px; color: var(--bone); font-variant-numeric: tabular-nums; }
.sb-rank { color: var(--bone-soft); font-weight: 700; }
.sb-name { font: 850 1.05rem/1 var(--face); letter-spacing: .12em; }
.sb-score { font-weight: 800; text-align: right; }
.sb-lines { color: var(--bone-soft); font-size: .82rem; }
.sb-row--p1 { background: rgba(242, 179, 61, .16); } .sb-row--p1 .sb-rank { color: #f2b33d; }
.sb-row--p2 { background: rgba(214, 220, 228, .10); } .sb-row--p2 .sb-rank { color: #d6dce4; }
.sb-row--p3 { background: rgba(201, 123, 74, .14); } .sb-row--p3 .sb-rank { color: #c97b4a; }
.sb-row.is-you { box-shadow: inset 0 0 0 2px var(--number); }
.scoreboard-note { margin: 10px 0 0; color: var(--bone-soft); font-size: .82rem; }
/* Phones: the controls sit right under the board, full width, so the board and the buttons fit on one screen
   while playing; stats and the Pause and music buttons follow. */
@media (max-width: 999px) {
  .well-hud .well-pad { order: -1; flex: 1 1 100%; display: grid; grid-template-columns: repeat(4, 1fr) 1.3fr; gap: 6px; }
  .well-hud .well-pad[hidden] { display: none; }
  .well-hud .pad-btn { width: auto; height: 52px; }
}