/* Hallmark · shape: Manifesto (draw fae4ae) · genre: editorial · theme: Almanac (deal 1/3, seed paid-digital-book-china-271c·2c4bbda1·2026-11-10·r0) · redesign: full · job: buy
 * hero: Ledge · nav: floating bar (the theme's square corners, not a pill) · footer: mast (swapped from index columns: five destinations, no sitemap) · imagery: none, the book's own diagram and tables · signature: the book's question at poster scale over its triangle
 * axes: light/grotesk-sans/brand-red · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, a manifesto shape selling a book; the hero leads with the book's own question so the page argues before it sells */
/* Hallmark · paper lifted to L 97 at the author's request for a bright background; the theme's slate stock and magenta yield to the book's figure palette (US blue, China terracotta, Korea teal, highlight red) */
/* Hallmark · dropped the .pred row builder · the ten predictions are now static table rows, so they show with scripting off */
/* Hallmark · dropped clockH, signsH, triT, whyH · ids only; those headings and the diagram title remain on the page under new ids */
@import url("./tokens.css");
@import url("./base.css");

:root { --nav-h: 64px; }
body { color: var(--color-ink-2); background: var(--color-paper); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: var(--z-sticky-nav); background: var(--color-paper); }
.container { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
h1, h2, h3 { color: var(--color-ink); font-weight: 600; }
a { color: var(--color-ink); text-decoration-color: var(--color-accent); text-underline-offset: 0.15em; transition: text-decoration-thickness var(--dur-micro) var(--ease-out); }
a:hover { text-decoration-thickness: 2px; }
.mono { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
.lead { color: var(--color-muted); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
section { padding-block: var(--section-gap); }

/* Controls: eight states */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg);
  font: 500 var(--text-md)/1 var(--font-display); white-space: nowrap; text-decoration: none; cursor: pointer;
  color: var(--color-ink); background: transparent; border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill);
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--color-paper-2); }
.btn:active { background: var(--color-paper-3); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn--primary { color: var(--color-accent-ink); background: var(--color-accent); border-color: var(--color-accent); }
.btn--primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn--primary:active { background: var(--color-ink); border-color: var(--color-ink); }
.btn--primary[aria-disabled="true"] { opacity: 1; }

/* Nav: a floating bar */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-sticky-nav); padding-block: var(--space-sm); }
.nav__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
  min-height: var(--nav-h); padding-inline: var(--space-lg) var(--space-xs);
  background: var(--color-sheet); border: var(--rule-hair) solid var(--color-rule); border-top: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-pill);
}
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); font: 600 var(--text-md)/1 var(--font-display); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.wordmark svg { width: 22px; height: 20px; flex-shrink: 0; }
.nav__links { display: flex; align-items: center; gap: var(--space-lg); font: 500 var(--text-sm)/1 var(--font-body); }
.nav__links a { text-decoration: none; color: var(--color-muted); white-space: nowrap; }
.nav__links a:hover { color: var(--color-ink); }
.nav__end { display: flex; align-items: center; gap: var(--space-sm); }
.nav__end .btn { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.lang { display: flex; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); }
.lang a {
  display: inline-flex; align-items: center; text-decoration: none;
  min-height: 44px; padding: 0 var(--space-sm); border: 0; background: transparent; cursor: pointer;
  font: 500 var(--text-sm)/1 var(--font-body); color: var(--color-muted);
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.lang a:hover { color: var(--color-ink); background: var(--color-paper-2); }
.lang a:active { background: var(--color-paper-3); }
.lang a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.lang a[aria-current="page"] { color: var(--color-ink); background: var(--color-paper-2); }
.nav__end { flex-shrink: 0; } .lang a { white-space: nowrap; }
@media (max-width: 68rem) { .nav__links { display: none; } }
@media (max-width: 40rem) { .lang { display: none; } .nav__bar { padding-inline: var(--space-md) var(--space-xs); } }

/* Hero: Ledge, the diagram above, the question resting at the base */
.hero { padding-block: var(--space-lg) var(--space-2xl); min-height: calc(100dvh - var(--nav-h) - var(--space-lg)); display: flex; }
.hero .container { display: grid; grid-template-rows: 1fr auto; row-gap: var(--space-lg); width: 100%; }
.hero__field { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.hero__by { grid-column: 1 / 6; align-self: end; display: grid; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.hero__by { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-lg); align-items: end; }
.hero__by p { display: grid; gap: var(--space-2xs); }
.cover { display: block; height: auto; border-radius: var(--radius-pill); box-shadow: 0 1px 2px oklch(18% 0.02 245 / 0.18), 0 18px 40px -12px oklch(18% 0.02 245 / 0.45); }
.cover--hero { width: auto; height: 38dvh; max-height: 360px; min-height: 220px; aspect-ratio: 5 / 8; }
.hero__by strong { font: 500 var(--text-md)/1.3 var(--font-body); color: var(--color-ink); }
.tri { grid-column: 7 / 13; width: 100%; max-width: 520px; justify-self: end; }
.tri svg { width: 100%; height: auto; max-height: 38dvh; overflow: visible; }
.tri .edge { stroke: var(--color-rule-2); stroke-width: 1.5; fill: none; }
.tri .tw-ring { fill: none; stroke: var(--color-tw); stroke-width: 2; }
.tri text { font-family: var(--font-body); fill: var(--color-muted); }
.tri .node { font: 600 19px var(--font-display); fill: var(--color-ink); }
.tri .rel { font-size: 15px; fill: var(--color-ink-2); }
.hero__base { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); align-items: end; border-top: var(--rule-bar) solid var(--color-ink); padding-top: var(--space-lg); }
.hero h1 { grid-column: 1 / 9; max-width: 15ch; font-size: clamp(3rem, 6.4vw, 6.25rem); line-height: 0.95; letter-spacing: -0.035em; }
.hero__act { grid-column: 9 / 13; display: grid; gap: var(--space-lg); }
.hero__act .lead { max-width: 30ch; }
.hero__btns { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
@media (max-width: 60rem) {
  .hero { min-height: 0; }
  .hero__by, .tri, .hero h1, .hero__act { grid-column: 1 / -1; }
  .tri { justify-self: start; max-width: 440px; }
  .hero__field { row-gap: var(--space-lg); }
  .hero__by { order: 0; }
  .cover--hero { height: auto; width: 30vw; max-width: 160px; min-height: 0; }
}
@media (max-width: 40rem) { .tri { max-width: 300px; justify-self: center; } }

/* Readers: who the book is for, as a table */
.readers { padding-block: var(--section-gap-s) var(--section-gap); }
.readers__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-md); align-items: end; margin-bottom: var(--space-2xl); }
.readers__head h2 { grid-column: 1 / 7; }
.readers__head .lead { grid-column: 8 / 13; }
table.readers-t { width: 100%; border-collapse: collapse; }
.readers-t thead th { font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--color-muted); text-align: left; padding: 0 var(--space-lg) var(--space-sm) 0; border-bottom: var(--rule-bar) solid var(--color-rule-2); }
.readers-t tbody th, .readers-t td { text-align: left; vertical-align: top; padding: var(--space-xl) var(--space-lg) var(--space-xl) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.readers-t tbody th { width: 34%; font-weight: 400; }
.readers-t .who-t { display: block; font: 600 var(--text-title)/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--color-ink); }
.readers-t .who-s { display: block; margin-top: var(--space-xs); color: var(--color-muted); }
.readers-t td { font-size: 1.0625rem; color: var(--color-ink-2); max-width: 52ch; }
.readers-t td.ch { width: 18%; padding-right: 0; white-space: nowrap; font-size: var(--text-md); }
@media (max-width: 60rem) {
  .readers__head h2, .readers__head .lead { grid-column: 1 / -1; }
  .readers-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .readers-t tr { display: grid; row-gap: var(--space-sm); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .readers-t tbody th, .readers-t td, .readers-t td.ch { width: auto; padding: 0; border: 0; white-space: normal; }
}

/* Why now: three rows */
.why-now h2 { margin-bottom: var(--space-2xl); }
.claims { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-rule-2); }
.claim { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xs); align-items: baseline; padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.claim__fig { grid-column: 1 / 4; font: 500 clamp(2.25rem, 3.6vw, 3.5rem)/1 var(--font-outlier); letter-spacing: -0.04em; color: var(--color-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.claim h3 { grid-column: 4 / 8; font-size: var(--text-title); }
.claim p { grid-column: 8 / 13; color: var(--color-muted); }
.src { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 60rem) { .claim__fig, .claim h3, .claim p { grid-column: 1 / -1; } }

/* The sample: the book's page on the sheet */
.sample { background: var(--color-paper-2); padding-block: var(--section-gap-s); }
.sample .grid12 { row-gap: var(--space-xl); align-items: start; }
.sample__head { grid-column: 1 / 5; display: grid; gap: var(--space-md); position: sticky; top: calc(var(--nav-h) + var(--space-2xl)); }
.sheet { grid-column: 5 / 13; background: var(--color-sheet); border-top: var(--rule-bar) solid var(--color-ink); padding: var(--space-xl) var(--space-2xl) var(--space-2xl); display: grid; gap: var(--space-md); font-size: 1.1875rem; line-height: 1.65; }
.sheet__run { display: flex; justify-content: space-between; gap: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); padding-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.sheet h3 { font-size: var(--text-2xl); max-width: 22ch; margin-block: var(--space-xs); }
.sheet p { max-width: 62ch; }
.sheet .turn { font: 600 var(--text-xl)/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--color-ink); }
.sheet__more { padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-md); }
@media (max-width: 60rem) {
  .sample__head, .sheet { grid-column: 1 / -1; }
  .sample__head { position: static; }
  .sheet { padding: var(--space-lg) var(--space-lg) var(--space-xl); }
}

/* Predictions: a table on the sheet */
.pred-wrap { display: grid; gap: var(--space-2xl); }
.pred-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-md); align-items: end; }
.pred-head h2 { grid-column: 1 / 7; }
.pred-head .lead { grid-column: 8 / 13; }
.pred-sheet { background: var(--color-sheet); border-top: var(--rule-bar) solid var(--color-ink); padding: var(--space-md) var(--space-xl) var(--space-lg); }
table.pred-t { width: 100%; border-collapse: collapse; }
.pred-t th { font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--color-muted); text-align: left; padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; border-bottom: var(--rule-bar) solid var(--color-rule-2); white-space: nowrap; }
.pred-t td { padding: var(--space-md) var(--space-sm) var(--space-md) 0; border-top: var(--rule-hair) solid var(--color-rule); vertical-align: middle; }
.pred-t .n { width: 3ch; font-family: var(--font-outlier); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.pred-t .call { font-size: 1.0625rem; color: var(--color-ink); }
.pred-t .who { width: 8ch; color: var(--color-muted); font-size: var(--text-sm); }
.pred-t .conf { width: 34%; }
.pred-t th.r, .pred-t td.r { text-align: right; padding-right: 0; }
.pred-t .by { width: 11ch; font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar { display: grid; grid-template-columns: minmax(0, 1fr) 4ch; align-items: center; gap: var(--space-sm); }
.bar__track { position: relative; height: 14px; background: var(--color-paper-2); }
.bar__fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p)); background: var(--c); }
.bar__track::after { content: ""; position: absolute; left: 50%; top: -5px; bottom: -5px; border-left: 1.5px dashed var(--color-ink-2); }
.bar__v { font: 500 var(--text-sm)/1 var(--font-outlier); color: var(--color-ink); text-align: right; font-variant-numeric: tabular-nums; }
.us { --c: var(--color-us); } .cn { --c: var(--color-cn); } .kr { --c: var(--color-kr); } .gl { --c: var(--color-global); }
.pred-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm) var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-bar) solid var(--color-rule-2); font-size: var(--text-sm); color: var(--color-muted); }
.pred-foot strong { font-family: var(--font-outlier); font-weight: 500; color: var(--color-ink); }
@media (max-width: 60rem) {
  .pred-head h2, .pred-head .lead { grid-column: 1 / -1; }
  .pred-sheet { padding-inline: var(--space-md); }
  .pred-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pred-t tr { display: grid; grid-template-columns: 3ch minmax(0, 1fr) auto; column-gap: var(--space-sm); row-gap: var(--space-xs); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
  .pred-t td { padding: 0; border: 0; width: auto; }
  .pred-t .n { grid-row: 1; }
  .pred-t .call { grid-column: 2 / 4; }
  .pred-t .who { grid-column: 2; }
  .pred-t .by { grid-column: 3; grid-row: 2; }
  .pred-t .conf { grid-column: 2 / 4; }
}

/* 2027: a schedule of deadlines */
.clocks { background: var(--color-paper); }
.clocks h2 { margin-bottom: var(--space-md); }
.clocks .lead { margin-bottom: var(--space-2xl); }
.sched-scroll { overflow-x: auto; }
.sched { min-width: 52rem; display: grid; grid-template-columns: 9rem repeat(12, minmax(0, 1fr)); border-top: var(--rule-bar) solid var(--color-rule-2); }
.sched > span.m { padding-block: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); border-left: var(--rule-hair) solid var(--color-rule); padding-left: var(--space-xs); }
.sched > .lane { grid-column: 1; padding: var(--space-md) var(--space-sm) var(--space-md) 0; border-top: var(--rule-hair) solid var(--color-rule); font: 600 var(--text-md)/1.2 var(--font-display); color: var(--color-ink); }
.sched > .ev { padding: var(--space-md) var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); border-left: var(--rule-bar) solid var(--c); font-size: 0.9375rem; line-height: 1.35; color: var(--color-ink-2); }
.sched > .ev time { display: block; margin-bottom: var(--space-2xs); font: 500 var(--text-sm)/1.2 var(--font-outlier); color: var(--color-ink); }
.sched > .gap { border-top: var(--rule-hair) solid var(--color-rule); }
.ev.book { --c: var(--color-accent); }

/* Contents: an index */
.toc .grid12 { row-gap: var(--space-2xl); }
.toc h2 { grid-column: 1 / 5; align-self: start; }
.toc__parts { grid-column: 5 / 13; display: grid; gap: var(--space-xl); }
.part { display: grid; grid-template-columns: 8rem minmax(0, 1fr); column-gap: var(--gap-columns); border-top: var(--rule-bar) solid var(--color-rule-2); padding-top: var(--space-sm); }
.part h3 { font-size: var(--text-md); line-height: 1.3; padding-top: var(--space-xs); }
.part ol { list-style: none; margin: 0; padding: 0; }
.part li { display: grid; grid-template-columns: 3ch minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.part li:first-child { padding-top: var(--space-xs); }
.part .cn-n { font-family: var(--font-outlier); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.part .t { font: 600 var(--text-md)/1.35 var(--font-display); color: var(--color-ink); }
.part .h { color: var(--color-muted); font-size: 0.9375rem; }
@media (max-width: 60rem) {
  .toc h2, .toc__parts { grid-column: 1 / -1; }
  .part { grid-template-columns: minmax(0, 1fr); }
  .part li { grid-template-columns: 3ch minmax(0, 1fr); }
  .part .h { grid-column: 2; }
}

/* Author: a split */
.author { background: var(--color-paper-2); padding-block: var(--section-gap-s); }
.author .grid12 { row-gap: var(--space-2xl); align-items: start; }
.author__l { grid-column: 1 / 5; display: grid; gap: var(--space-xl); }
.route { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-rule-2); }
.route li { display: grid; grid-template-columns: 5ch minmax(0, 1fr); column-gap: var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.route time { font: 500 var(--text-sm)/1.55 var(--font-outlier); color: var(--color-ink); }
.route span { font-size: 0.9375rem; }
.route b { font-weight: 500; color: var(--color-ink); }
.author__r { grid-column: 6 / 13; display: grid; gap: var(--space-lg); font-size: 1.1875rem; line-height: 1.65; }
.author__r .first { font: 500 var(--text-xl)/1.4 var(--font-body); color: var(--color-ink); max-width: 36ch; }
@media (max-width: 60rem) { .author__l, .author__r { grid-column: 1 / -1; } }
.author__r .fields { margin: 0; border-top: var(--rule-bar) solid var(--color-rule-2); }
.author__r .fields > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: var(--gap-columns); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.author__r .fields dt { font: 600 var(--text-md)/1.5 var(--font-display); color: var(--color-ink); }
.author__r .fields dd { margin: 0; font-size: var(--text-md); line-height: 1.55; color: var(--color-ink-2); }
@media (max-width: 40rem) { .author__r .fields > div { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xs); } }


/* Buy: the offer, set on the sheet */
.buy { padding-block: var(--section-gap-s); }
.buy__sheet { background: var(--color-sheet); border-top: var(--rule-bar) solid var(--color-ink); border-bottom: var(--rule-hair) solid var(--color-rule); padding: var(--space-2xl); row-gap: var(--space-2xl); align-items: start; }
.offer { grid-column: 1 / 6; display: grid; gap: var(--space-lg); }
.cover--buy { width: 180px; aspect-ratio: 5 / 8; }
.price { display: flex; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; }
.price .mono { font-weight: 500; font-variant-numeric: tabular-nums; font-size: clamp(4.5rem, 8vw, 7.5rem); line-height: 0.9; letter-spacing: -0.04em; color: var(--color-ink); }
.price span:last-child { color: var(--color-muted); }
.buy .stores { color: var(--color-muted); font-size: var(--text-sm); max-width: 44ch; }
.facts { grid-column: 7 / 13; margin: 0; border-top: var(--rule-bar) solid var(--color-rule-2); }
.facts > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); column-gap: var(--gap-columns); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.facts dt { font: 600 var(--text-md)/1.4 var(--font-display); color: var(--color-ink); }
.facts dd { margin: 0; color: var(--color-muted); }
.facts dd .mono { color: var(--color-ink); font-size: 0.9375rem; }
@media (max-width: 60rem) { .offer, .facts { grid-column: 1 / -1; } .facts > div { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xs); } .buy__sheet { padding-inline: var(--space-lg); } }

/* Footer: a mast */
.foot { padding-block: var(--section-gap-s) var(--space-2xl); }
.foot .grid12 { row-gap: var(--space-2xl); }
.foot__mark { grid-column: 1 / -1; font: 600 clamp(2.75rem, 7vw, 6.5rem)/0.95 var(--font-display); letter-spacing: -0.035em; color: var(--color-ink); border-bottom: var(--rule-bar) solid var(--color-ink); padding-bottom: var(--space-lg); overflow-wrap: break-word; min-width: 0; }
.signup { grid-column: 1 / 7; display: grid; gap: var(--space-sm); max-width: 32rem; }
.signup h3 { font-size: var(--text-title); }
.signup p.note { color: var(--color-muted); }
.signup label { font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--color-ink); margin-top: var(--space-xs); }
.signup__row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.signup input {
  flex: 1 1 14rem; min-width: 0; min-height: 48px; padding: 0 var(--space-md);
  font: 400 var(--text-md)/1 var(--font-body); color: var(--color-ink); background: var(--color-sheet);
  border: 1px solid var(--color-muted); border-radius: var(--radius-pill); outline: 2px solid transparent; outline-offset: -3px;
}
.signup input:hover { border-color: var(--color-ink-2); }
.signup input:focus-visible { outline-color: var(--color-focus); }
.signup input[aria-invalid] { border-color: var(--color-error); }
.signup input:disabled { opacity: 0.55; cursor: not-allowed; }
.signup__help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }
.foot__links { grid-column: 8 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--gap-columns); align-content: start; list-style: none; margin: 0; padding: 0; }
.foot__links a { text-decoration: none; }
.foot__links a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.foot__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm) var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 60rem) { .signup, .foot__links { grid-column: 1 / -1; } }

/* Afterword band: the book's night cover, inverted ink */
.bigq { background: var(--color-ink); color: oklch(88% 0.010 245); }
.bigq h2, .bigq h3, .bigq .claim__fig { color: var(--color-sheet); }
.bigq .lead, .bigq .claim p, .bigq .src { color: oklch(78% 0.012 245); }
.bigq a { color: var(--color-sheet); }
.bigq__head { display: grid; gap: var(--space-md); max-width: 52rem; margin-bottom: var(--space-2xl); }
.bigq__kicker { font: 500 var(--text-sm)/1 var(--font-outlier); letter-spacing: 0.04em; text-transform: uppercase; color: oklch(72% 0.13 30); }
.bigq h2 { font-size: var(--text-section); line-height: 1.05; letter-spacing: var(--tracking-display); }
.bigq .claims { border-top-color: oklch(60% 0.012 245); }
.bigq .claim { border-bottom-color: oklch(36% 0.016 245); }
.bigq__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); margin-top: var(--space-2xl); align-items: start; }
.bigq__control { grid-column: 1 / 7; display: grid; gap: var(--space-md); }
.bigq__control h3 { font-size: var(--text-title); }
.bigq__ask { font-size: var(--text-md); }
.bigq__ask strong { font-family: var(--font-outlier); font-weight: 500; color: var(--color-sheet); }
.bigq__quote { grid-column: 8 / 13; margin: 0; padding-left: var(--space-lg); border-left: var(--rule-bar) solid var(--color-accent); }
.bigq__quote p { font: 400 italic var(--text-xl)/1.35 var(--font-body); color: var(--color-sheet); }
.bigq__quote footer { margin-top: var(--space-md); font-size: var(--text-sm); color: oklch(72% 0.012 245); }
.bigq .src { margin-top: var(--space-2xl); }
@media (max-width: 60rem) { .bigq__control, .bigq__quote { grid-column: 1 / -1; } }