/* Build pages
   Bold Talks structure (Ground) in a teal palette: cool mineral ground and
   deep teal ink in light, deep teal ground in dark, with Bold Talks signal
   yellow and violet as the accents. Follows the reader's system setting.
   (Moved off the loops-tutorial cream and amber on 2026-09-10, because that
   pair read as Anthropic's default look.)

   Deliberate divergence from Ground's measure rule, Colin's call on
   2026-09-10: no max-width on paragraphs or any running text. Text runs the
   full width of its column. */

:root {
  --ground: #EEF3F1;
  --ground-2: #F8FBFA;
  --surface: #E4ECEA;
  --rule: #CCDAD7;
  --rule-soft: #DDE7E5;
  --ink: #0E2426;
  --ink-2: #34504E;
  --muted: #4A6361;
  --signal: #FFCC1A;      /* Bold Talks yellow. Fills and marks only on this ground, never text */
  --on-signal: #0E2426;
  --accent-ink: #0A6A62;  /* links and small emphasis, 5.8:1 on --ground */
  --teal: #0F766E;
  --teal-fill: #0F766E;
  --focus: #0E2426;
  --code-bg: #0C1B1D;
  --code-text: #E8F1EF;
  --code-dim: #7F9895;
  --code-accent: #FFD21F;
  --code-teal: #52C3B6;
  --chart-a: #008A7C;     /* gestures. Pair validated against --ground: CVD and contrast pass */
  --chart-b: #6D3FD1;     /* shuffle, Bold Talks violet */
  --blocks: linear-gradient(110deg,
    #0F766E 0%, #0F766E 28%, #FFCC1A 28%, #FFCC1A 48%,
    #0B4F4A 48%, #0B4F4A 68%, #6D3FD1 68%, #6D3FD1 88%, #0F766E 88%);

  --display: "Helvetica Neue", "Arial Narrow", Inter, system-ui, sans-serif;
  --body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "SF Mono", "JetBrains Mono", Menlo, ui-monospace, monospace;
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --rail: 128px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0A1A1C;
    --ground-2: #0F2426;
    --surface: #143033;
    --rule: #22444A;
    --rule-soft: #1A363B;
    --ink: #E8F1EF;
    --ink-2: #B9CDCA;
    --muted: #95ABA8;
    --signal: #FFD21F;
    --accent-ink: #FFD21F;
    --teal: #3FC1B0;
    --teal-fill: #2FA396;
    --focus: #FFD21F;
    --code-bg: #071315;
    --chart-a: #2FA396;
    --chart-b: #9F7BF0;
    --blocks: linear-gradient(110deg,
      #3FC1B0 0%, #3FC1B0 28%, #FFD21F 28%, #FFD21F 48%,
      #1C7F74 48%, #1C7F74 68%, #9F7BF0 68%, #9F7BF0 88%, #3FC1B0 88%);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
a:hover { border-bottom-color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--signal); color: var(--on-signal); }

.strip { height: 12px; background: var(--blocks); }

.shell { max-width: 1280px; margin: 0 auto; padding-inline: var(--gutter); padding-block: clamp(2rem, 5vw, 3.5rem) 5rem; }

.crumb { font: 500 12px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.crumb a { color: var(--ink-2); }

/* ---- type ---- */
.display {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.9;
  text-wrap: balance;
  margin: 0;
}
h1.display { font-size: clamp(3.4rem, 12vw, 9.5rem); margin-top: 1.2rem; }
h2.display { font-size: clamp(1.9rem, 4.4vw, 3.4rem); }
h3 { font: 700 1.12rem/1.35 var(--body); margin: 0; }

.lede { font-size: clamp(1.2rem, 2.1vw, 1.6rem); line-height: 1.45; color: var(--ink); margin: 1.6rem 0 0; text-wrap: pretty; }
p { margin: 1rem 0 0; text-wrap: pretty; }
.body > p:first-child, .body > h3:first-child { margin-top: 0; }
.dim { color: var(--ink-2); }
b, strong { font-weight: 700; }

.kicker { font: 500 11.5px/1.5 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-2); margin: 0; }

.evidence { font: 400 12px/1.65 var(--mono); color: var(--ink-2); margin: 0.8rem 0 0; }
.evidence::before { content: ""; display: inline-block; width: 14px; border-top: 1px solid var(--rule); vertical-align: 0.35em; margin-right: 0.6em; }

/* ---- facts under the title ---- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 2rem; margin: 2.2rem 0 0; border-top: 1px solid var(--rule); }
.facts div { padding: 0.8rem 0; border-bottom: 1px solid var(--rule-soft); }
.facts dt { font: 500 11.5px/1.6 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.facts dd { margin: 0.2rem 0 0; font-size: 16px; }
.status { display: inline-flex; align-items: center; gap: 0.55rem; }
.status::before { content: ""; width: 10px; height: 10px; background: var(--signal); flex: none; }
.status--live::before { background: var(--teal-fill); }

/* ---- the rail ---- */
.sec { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 0 clamp(1rem, 3vw, 2.5rem); align-items: start; }
.sec > .kicker { padding-top: 0.7rem; display: flex; gap: 0.6rem; align-items: flex-start; }
.sec > .kicker::before { content: ""; width: 10px; height: 10px; margin-top: 0.15rem; flex: none; background: var(--teal-fill); }
.sec--warm > .kicker::before { background: var(--signal); }
@media (max-width: 760px) { .sec { grid-template-columns: 1fr; gap: 0.8rem; } }
.body { min-width: 0; }
.body > h2 + p, .body > h2 + .lede { margin-top: 1.2rem; }

hr { border: 0; border-top: 1px solid var(--rule); margin: clamp(3rem, 8vh, 5rem) 0; }

/* ---- stats ---- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); margin-top: 1.8rem; }
.stat { background: var(--ground); padding: 1.4rem 1.25rem 1.2rem 0; }
.stat + .stat { padding-left: 1.25rem; }
@media (max-width: 760px) { .stat + .stat { padding-left: 0; } }
.stat b { display: block; font: 800 clamp(2.2rem, 4.6vw, 3.6rem)/1 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 0.5rem; color: var(--ink-2); font-size: 15px; line-height: 1.45; }

/* ---- the sequence ---- */
.steps { list-style: none; counter-reset: step; margin: 1.8rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.step { counter-increment: step; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 0 1.2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--rule-soft); }
.step::before { content: counter(step, decimal-leading-zero); font: 800 1.9rem/1 var(--display); letter-spacing: -0.03em; color: var(--teal); font-variant-numeric: tabular-nums; }
.step p { color: var(--ink-2); margin-top: 0.4rem; }
.step code, p code, li code, td code { font: 400 0.88em/1.4 var(--mono); background: var(--surface); border: 1px solid var(--rule-soft); padding: 0.05em 0.35em; }

/* ---- plates: every image and video sits in one ---- */
.plate { margin: 1.4rem 0 0; border: 1px solid var(--rule); background: var(--ground-2); }
.plate__frame { display: grid; place-items: center; padding: clamp(0.7rem, 2vw, 1.3rem); }
.plate__frame img, .plate__frame video { width: auto; max-height: 560px; }
.plate--wide .plate__frame img { width: 100%; max-height: none; }
.plate figcaption { border-top: 1px solid var(--rule-soft); padding: 0.75rem 1rem 0.85rem; font: 400 12.5px/1.6 var(--mono); color: var(--ink-2); }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; align-items: start; }
.pair .plate { margin-top: 1.4rem; }

/* ---- lists of decisions and gaps ---- */
.items { list-style: none; margin: 1.6rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.items li { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 0.3rem 2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule-soft); }
.items h3 { font-size: 1.02rem; }
.items p { margin: 0; color: var(--ink-2); }
@media (max-width: 760px) { .items li { grid-template-columns: 1fr; } }

/* ---- tables ---- */
.table-wrap { overflow-x: auto; margin-top: 1.6rem; }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
th, td { text-align: left; padding: 0.7rem 1.2rem 0.7rem 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
th { font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); border-bottom-color: var(--rule); }
td { color: var(--ink-2); }
td:first-child { color: var(--ink); font-family: var(--mono); font-size: 13.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }

/* ---- code ---- */
.code { margin: 1.6rem 0 0; background: var(--code-bg); color: var(--code-text); border: 1px solid var(--rule); overflow-x: auto; }
.code__head { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 1rem; border-bottom: 1px solid #22363B; font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.08em; color: var(--code-dim); }
.code pre { margin: 0; padding: 1rem 1.1rem 1.2rem; font: 400 13.5px/1.6 var(--mono); tab-size: 4; }
.code .c { color: var(--code-dim); }
.code .k { color: var(--code-teal); }
.code .s { color: var(--code-accent); }

/* ---- chart ---- */
.chart { margin-top: 1.6rem; border: 1px solid var(--rule); background: var(--ground-2); padding: 1rem 1rem 0.6rem; overflow-x: auto; }
.chart svg { display: block; width: 100%; min-width: 560px; height: auto; }
.chart .axis { stroke: var(--rule); stroke-width: 1; }
.chart .grid { stroke: var(--rule-soft); stroke-width: 1; }
.chart .tick { fill: var(--ink-2); font: 400 12px var(--mono); }
.chart .row { fill: var(--ink); font: 600 14px var(--body); }
.chart .rowsub { fill: var(--ink-2); font: 400 12px var(--mono); }
.chart .thr { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 5 4; }
.chart .thrlabel { fill: var(--ink); font: 600 12px var(--mono); }
.chart .dot-a { fill: var(--chart-a); stroke: var(--ground-2); stroke-width: 2; }
.chart .dot-b { fill: var(--chart-b); stroke: var(--ground-2); stroke-width: 2; }
.chart .dot-a:hover, .chart .dot-b:hover { stroke: var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: 1.4rem; padding: 0.7rem 0 0.3rem; font: 400 12.5px/1.4 var(--mono); color: var(--ink-2); }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.5em; vertical-align: -0.05em; background: var(--chart-a); }
.legend span.b::before { background: var(--chart-b); }
details.numbers { margin-top: 0.8rem; }
details.numbers summary { cursor: pointer; font: 500 12.5px/1.6 var(--mono); color: var(--accent-ink); }

/* ---- video embeds: 16:9, full width of the plate ---- */
.embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--code-bg); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.plate--wide .plate__frame { display: block; }

/* ---- swatches (the design system page) ---- */
.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 1rem; }
.sw { background: var(--ground-2); display: flex; flex-direction: column; }
.sw i { display: block; height: 72px; border-bottom: 1px solid var(--rule-soft); }
.sw span { display: block; padding: 0.6rem 0.75rem 0.7rem; font: 400 12px/1.5 var(--mono); color: var(--ink-2); }
.sw span b { display: block; color: var(--ink); font-weight: 600; }
.body > h3 { margin-top: 0; }

/* ---- footer ---- */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font: 400 12.5px/1.6 var(--mono); color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 1.4rem 0 0; padding: 0; }
.chips li { font: 400 12px/1 var(--mono); color: var(--ink-2); border: 1px solid var(--rule); padding: 0.5rem 0.6rem; }

@media (prefers-reduced-motion: no-preference) {
  a { transition: border-color 0.15s ease; }
}