/* Hallmark · shape: Stage hero + Index-First · genre: editorial · theme: Almanac (deal 2/3, seed physicslab-free-physics-articles-7ceb·733568aa·2026-11-07·r0) · job: try · draw: 4e3711
 * hero: Stage (swap: draw dealt Ledge, the constants sheet wants Stage, theme pictured) · nav: edge-aligned bar (swap: draw dealt floating pill, editorial refuses it) · footer: index columns · imagery: none (words + built product) · signature: the constants sheet
 * axes: mid/grotesk-sans/chromatic-magenta · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S4 R4 V4 · weakest: S, hero could be any reference book; led with the SI constants sheet, real and physics-only */
/* Hallmark · waive 46b · the constants sheet is the hero visual, not a bare figure headline · the sheet carries the claim with its caption */
/* ---- dark mode, derived from the Almanac tokens, never inverted ---- */
[data-theme="dark"] {
  --color-paper: oklch(16% 0.020 245); --color-paper-2: oklch(20% 0.018 245); --color-paper-3: oklch(24% 0.016 245);
  --color-ink: oklch(93% 0.008 245); --color-ink-2: oklch(86% 0.010 245); --color-muted: oklch(68% 0.014 245);
  --color-rule: oklch(38% 0.014 240); --color-rule-2: oklch(72% 0.012 240);
  --color-accent: oklch(62% 0.180 350); --color-accent-2: oklch(70% 0.160 350); --color-accent-ink: oklch(16% 0.020 245); --color-focus: oklch(62% 0.190 350);
  --color-sheet: oklch(22% 0.014 245);
}

/* ---- links, buttons, inputs (theme controls) ---- */
a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; transition: text-decoration-thickness var(--dur-micro) var(--ease-out); }
a:hover { text-decoration-thickness: 2px; }
.btn { display: inline-block; border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); padding: var(--space-sm) var(--space-lg); font: 500 var(--text-sm)/1 var(--font-display); color: var(--color-ink); background: transparent; cursor: pointer; text-decoration: none; white-space: nowrap; min-height: 48px; line-height: 1; }
.btn:hover { text-decoration: none; border-color: var(--color-accent); }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
input[type="search"], input[type="number"], input[type="email"], select { border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-pill); background: var(--color-sheet); color: var(--color-ink); font: 400 var(--text-md)/1.2 var(--font-body); padding: var(--space-sm) var(--space-md); min-height: 48px; width: 100%; }
input:focus-visible, select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
button { cursor: pointer; }
.btn:active, button:active { transform: translateY(1px); }
button:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---- header: edge-aligned bar ---- */
header.site { background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.head-in { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: var(--space-lg); min-height: 72px; flex-wrap: wrap; }
.brand { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; line-height: 1.1; white-space: nowrap; }
.brand small { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--text-sm); color: var(--color-muted); letter-spacing: 0; }
.brand:hover { text-decoration: none; }
nav.mainnav { margin-left: auto; display: flex; gap: var(--space-lg); flex-wrap: wrap; align-items: center; }
nav.mainnav a { font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--color-ink); text-decoration: none; }
nav.mainnav a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.15em; }
.themebtn { background: transparent; border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); padding: var(--space-xs) var(--space-sm); font: 500 var(--text-sm)/1 var(--font-display); color: var(--color-ink); min-height: 36px; }

/* ---- hero: Stage, head on 5 columns, sheet on 7 ---- */
.hero { background: var(--color-paper); color: var(--color-ink); border-bottom: var(--rule-hair) solid var(--color-rule); }
.hero-in { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); padding-block: var(--space-2xl) var(--space-3xl); display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-2xl); align-items: center; }
.hero h1 { font-size: var(--text-display); line-height: 0.95; letter-spacing: -0.035em; margin: 0 0 var(--space-md); }
.hero .lead { font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); max-width: 52ch; margin: 0 0 var(--space-lg); }
.hero .actions { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.searchbox { display: flex; gap: var(--space-sm); max-width: 480px; }
.searchbox input { flex: 1; min-width: 0; }
.searchbox .btn { min-height: 48px; }
.sheet { background: var(--color-sheet); border-top: var(--rule-bar) solid var(--color-ink); padding: var(--space-lg) var(--space-lg) var(--space-md); }
.sheet h2, .sheet .sheet-title { font-size: var(--text-title); margin: 0 0 var(--space-sm); }
.sheet table { width: 100%; border-collapse: collapse; }
.sheet th { font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--color-muted); text-align: left; padding: var(--space-xs) 0; border-bottom: var(--rule-bar) solid var(--color-rule-2); }
.sheet td { border-top: var(--rule-hair) solid var(--color-rule); padding: var(--space-sm) 0; font-size: var(--text-md); }
.sheet td.num, .sheet th.num { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; text-align: right; }
.sheet tr.hot td { color: var(--color-accent); }
.sheet tr.hot td.num { color: var(--color-accent); }
.sheet figcaption, .sheet .cap { font: 500 var(--text-sm)/1.4 var(--font-body); color: var(--color-muted); margin-top: var(--space-sm); }

/* ---- page frame ---- */
main { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
section.block { margin-top: var(--section-gap); }
section.block.tight { margin-top: var(--section-gap-s); }
section.block h2 { font-size: var(--text-section); margin: 0 0 var(--space-md); }
section.block .sub { font-size: var(--text-lead); color: var(--color-ink-2); margin: 0 0 var(--space-2xl); max-width: 52ch; }
section.block .head-split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-2xl); align-items: baseline; }
section.block .head-split .sub { margin-bottom: 0; }

/* ---- rows: title on 1-5, line and facts on 6-12, hairline parted ---- */
.rows { border-top: var(--rule-hair) solid var(--color-rule); }
.row { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-2xl); padding: var(--space-lg) 0; border-bottom: var(--rule-hair) solid var(--color-rule); align-items: baseline; }
.row h3, .row h2 { font-size: var(--text-title); margin: 0; }
.row h3 a, .row h2 a { text-decoration: none; }
.row h3 a:hover, .row h2 a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.row p { color: var(--color-ink-2); margin: 0; max-width: 65ch; }
.row .facts { font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-xs); }
.row .facts span + span { margin-left: var(--space-md); }

/* ---- index: dense list of the site's own items ---- */
.index-list { border-top: var(--rule-hair) solid var(--color-rule); }
.index-row { display: grid; grid-template-columns: 7fr 2fr 3fr; gap: var(--space-2xl); padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); align-items: baseline; }
.index-row h3 { font-size: var(--text-title); margin: 0; }
.index-row h3 a { text-decoration: none; }
.index-row h3 a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.index-row .kind { font: 500 var(--text-sm)/1.4 var(--font-body); color: var(--color-muted); }
.index-row .fig { font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-muted); text-align: right; }
.index-row--2 { grid-template-columns: 7fr 5fr; }

/* ---- grid: games, three across, hairline tops, no boxed cards ---- */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.grid .cell { border-top: var(--rule-bar) solid var(--color-rule-2); padding-top: var(--space-md); }
.grid .cell h3, .grid .cell h2 { font-size: var(--text-title); margin: 0 0 var(--space-xs); }
.grid .cell h3 a, .grid .cell h2 a { text-decoration: none; }
.grid .cell h3 a:hover, .grid .cell h2 a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.grid .cell p { color: var(--color-ink-2); margin: 0; }
.grid .cell .meta { font: 500 var(--text-sm)/1.4 var(--font-body); color: var(--color-muted); margin-top: var(--space-sm); }

/* ---- table: calculators and cheat sheets ---- */
table.sheet-t { width: 100%; border-collapse: collapse; }
table.sheet-t th { font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--color-muted); text-align: left; padding: var(--space-sm) 0; border-bottom: var(--rule-bar) solid var(--color-rule-2); }
table.sheet-t td { border-top: var(--rule-hair) solid var(--color-rule); padding: var(--space-md) 0; vertical-align: baseline; }
table.sheet-t td.num, table.sheet-t th.num { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; text-align: right; }
table.sheet-t td b { font-weight: 600; }
table.sheet-t td .f { font-family: var(--font-outlier); font-size: var(--text-md); }

/* ---- well: a tinted paper step with a firm rule ---- */
.well { background: var(--color-paper-2); border-top: var(--rule-bar) solid var(--color-rule-2); padding: var(--space-lg); }
.well h3 { margin: 0 0 var(--space-sm); }

/* ---- ink band: the close, and the calculator result ---- */
.band--ink { background: var(--color-ink); color: var(--color-paper); }
.band--ink h2 { color: var(--color-paper); }
.band--ink .lead { color: var(--color-paper-2); }
.band--ink .btn { border-color: var(--color-paper); color: var(--color-paper); }
.band-in { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); padding-block: var(--section-gap-s); display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-2xl); align-items: center; }

/* ---- article: long document, 65ch measure ---- */
.article { max-width: 65ch; margin-inline: auto; }
.article h1 { font-size: var(--text-display-s); line-height: 1.05; margin: var(--space-md) 0 var(--space-sm); }
.article h2 { font-size: var(--text-section); margin: var(--space-2xl) 0 var(--space-md); border-bottom: var(--rule-bar) solid var(--color-rule-2); padding-bottom: var(--space-sm); }
.article h3 { font-size: var(--text-title); margin: var(--space-lg) 0 var(--space-xs); }
.article p { margin: var(--space-md) 0; line-height: 1.65; }
.article .lede { font-size: var(--text-lead); color: var(--color-ink-2); margin: 0 0 var(--space-lg); }
.article .cat { font: 500 var(--text-sm)/1.4 var(--font-body); color: var(--color-muted); }
.crumb { font-size: var(--text-sm); color: var(--color-muted); margin: 0; }
.crumb a { color: var(--color-muted); text-decoration: none; }
.crumb a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.formula { background: var(--color-sheet); border-top: var(--rule-bar) solid var(--color-ink); padding: var(--space-md) var(--space-lg); margin: var(--space-lg) 0; }
.formula .f { font-family: var(--font-outlier); font-size: 22px; font-weight: 500; }
.formula .m { color: var(--color-muted); margin-top: var(--space-xs); font-size: var(--text-md); }
.callout { background: var(--color-paper-2); border-top: var(--rule-bar) solid var(--color-rule-2); padding: var(--space-md) var(--space-lg); margin: var(--space-lg) 0; }
.callout p { margin: 0; }
.example { background: var(--color-paper-2); border-top: var(--rule-bar) solid var(--color-rule-2); padding: var(--space-lg); margin: var(--space-lg) 0; }
.example h3 { margin: 0 0 var(--space-sm); }
.example p { white-space: pre-line; margin: 0; }
.mistakes li, .qs li { margin: var(--space-sm) 0; }
details { margin: var(--space-sm) 0; background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule); padding: var(--space-sm) var(--space-md); }
details summary { cursor: pointer; font-weight: 600; font-family: var(--font-display); }
details p { margin: var(--space-sm) 0 0; }
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); margin-top: var(--space-2xl); border-top: var(--rule-bar) solid var(--color-rule-2); padding-top: var(--space-md); }
.prevnext a { text-decoration: none; }
.prevnext a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.prevnext .pn-label { display: block; font: 500 var(--text-sm)/1.4 var(--font-body); color: var(--color-muted); margin-bottom: var(--space-xs); }
.prevnext .pn-next { text-align: right; }

/* ---- calculator tool: sheet + ink result ---- */
.toolcard { max-width: 760px; margin-inline: auto; }
.toolcard label { display: block; margin: var(--space-md) 0 var(--space-xs); font-weight: 600; font-family: var(--font-display); }
.toolcard label .unit { color: var(--color-muted); font-weight: 400; font-family: var(--font-body); }
.result { background: var(--color-ink); color: var(--color-paper); padding: var(--space-lg); margin-top: var(--space-lg); }
.result .rv { font-family: var(--font-outlier); font-size: 30px; font-weight: 500; color: var(--color-accent); }
.result .rl { font-size: var(--text-sm); color: var(--color-paper-2); }
.result .steps { margin-top: var(--space-md); font-size: 15px; color: var(--color-paper); }
.result .steps li { margin: var(--space-4) 0; }
.modebar { display: flex; gap: 0; flex-wrap: wrap; margin: var(--space-md) 0; border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); width: fit-content; overflow: hidden; }
.modebar button { border: 0; border-right: var(--rule-hair) solid var(--color-ink); background: transparent; color: var(--color-ink); padding: var(--space-sm) var(--space-md); font: 500 var(--text-sm)/1 var(--font-display); min-height: 44px; white-space: nowrap; }
.modebar button:last-child { border-right: 0; }
.modebar button.on { background: transparent; color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--color-accent); }

/* ---- games: quiz options, bars, sims ---- */
.quizopt { display: block; width: 100%; text-align: left; background: var(--color-sheet); border: var(--rule-hair) solid var(--color-rule-2); color: var(--color-ink); border-radius: var(--radius-pill); padding: var(--space-sm) var(--space-md); margin: var(--space-sm) 0; cursor: pointer; font-size: var(--text-md); min-height: 48px; }
.quizopt:hover { border-color: var(--color-accent); }
.quizopt.right { border-color: var(--color-success); background: color-mix(in oklab, var(--color-success) 12%, var(--color-sheet)); }
.quizopt.wrong { border-color: var(--color-error); background: color-mix(in oklab, var(--color-error) 12%, var(--color-sheet)); }
.bar { height: 10px; background: var(--color-rule); border-radius: var(--radius-pill); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--color-accent); }
canvas.sim { width: 100%; max-width: 820px; background: var(--color-ink); border-radius: var(--radius-pill); display: block; }
.simctl { display: flex; gap: var(--space-lg); flex-wrap: wrap; margin: var(--space-md) 0; align-items: end; }
.simctl label { display: block; font-weight: 600; font-size: var(--text-sm); font-family: var(--font-display); }
.simctl input[type="range"] { width: 180px; min-height: 0; padding: 0; border: 0; background: transparent; }
.simctl output { font-family: var(--font-outlier); font-weight: 500; color: var(--color-accent); }

/* ---- footer: index columns + colophon ---- */
footer.site { background: var(--color-paper); color: var(--color-ink); border-top: var(--rule-bar) solid var(--color-ink); margin-top: var(--section-gap); }
.foot-in { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); padding-block: var(--space-2xl) var(--space-lg); }
.foot-mast { font-family: var(--font-display); font-weight: 600; font-size: var(--text-section); letter-spacing: var(--tracking-display); color: var(--color-ink); margin: 0 0 var(--space-2xl); }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.foot-cols .foot-h { font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); margin: 0 0 var(--space-sm); }
.foot-cols p { margin: 0; line-height: 1.9; }
.foot-cols a { text-decoration: none; }
.foot-cols a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.colophon { border-top: var(--rule-hair) solid var(--color-rule); margin-top: var(--space-2xl); padding-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }

/* ---- search results ---- */
#results .res { border-top: var(--rule-hair) solid var(--color-rule); padding: var(--space-md) 0; }
#results .res h2 { font-size: var(--text-title); margin: 0 0 var(--space-xs); }
#results .res h2 a { text-decoration: none; }
#results .res h2 a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
#results .res p { color: var(--color-ink-2); margin: 0; }
#results .res .meta { font: 500 var(--text-sm)/1.4 var(--font-body); color: var(--color-muted); margin-top: var(--space-xs); }

/* ---- responsive: stack under 60rem ---- */
@media (max-width: 60rem) {
  .hero-in { grid-template-columns: 1fr; gap: var(--space-xl); }
  .row { grid-template-columns: 1fr; gap: var(--space-xs); }
  .index-row { grid-template-columns: 1fr; gap: var(--space-xs); }
  .index-row .fig { text-align: left; }
  .grid { grid-template-columns: 1fr; }
  .band-in { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr; }
  section.block .head-split { grid-template-columns: 1fr; gap: var(--space-xs); }
  .prevnext { grid-template-columns: 1fr; }
  .prevnext .pn-next { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  a, .btn { transition: none; }
}