/* Hallmark · genre: atmospheric (the UMBRA family) · macrostructure: Two Doors (the choice is the page) · theme: studied-DNA (source: perennos.com/umbra/ and css/tokens.css night ground, the same tokens as /cloud/: void, bone light as the only warm colour, Anybody 300, CourierPrime tags)
 * This is the SHELL: the whole page with no script. It is also the final no-JS / no-WebGL / reduced-motion / save-data state. The three.js chooser scene (UNIT-PAPER-run-chooser.md) is built on top of it and may not change a word, the text order or the height.
 * enrichment: none in the shell; the right column of the hero is where the scene goes · nav: N9 (wordmark only, as /umbra/) · footer: wordmark link
 * pre-emit critique (shell): P4 H4 E4 S3 R5 V4 · states: links and buttons default/hover/focus-visible/active; no disabled controls */

@font-face { font-family: "Anybody"; src: url("/fonts/anybody-latin-100-900.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; }
@font-face { font-family: "CourierPrime"; src: url("/fonts/courier-prime-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --r-void: oklch(5% 0.005 90);
  --r-light: oklch(94% 0.02 85);                 /* the page's only warm colour */
  --r-glow: oklch(94% 0.02 85 / 0.26);
  --r-soft: oklch(82% 0.006 90);
  --r-dim: oklch(64% 0.006 90);
  --r-rule: oklch(36% 0.006 90);
  --r-gutter: clamp(1.25rem, 4vw, 3.5rem);
  --r-text-h1: clamp(2.5rem, 1rem + 4.4vw, 5.25rem);
  --r-text-h2: clamp(2.25rem, 1rem + 3.4vw, 4rem);
  --r-text-pick: clamp(1.75rem, 1rem + 2.2vw, 3rem);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--r-void); color: var(--color-ink); font: 400 var(--text-base) / var(--lh-body) var(--font-display); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-inline-size: 100%; }
a { color: inherit; }
h1, h2, p, ol { margin: 0; padding: 0; }
ol { list-style: none; }
h1, h2 { font-style: normal; overflow-wrap: anywhere; min-inline-size: 0; text-wrap: balance; }

.r-skip { position: absolute; inset-inline-start: var(--space-4); inset-block-start: var(--space-4); z-index: 10; padding: var(--space-3) var(--space-4); background: var(--r-light); color: var(--r-void); transform: translateY(-200%); text-decoration: none; }
.r-skip:focus-visible { transform: none; outline: var(--focus-w) solid var(--r-light); outline-offset: 4px; }
.r-mast { position: absolute; inset: 0 0 auto 0; z-index: 3; padding: var(--space-6) var(--r-gutter); pointer-events: none; }
.r-home { display: inline-block; pointer-events: auto; }
.r-home img { inline-size: clamp(9rem, 14vw, 14rem); block-size: auto; }
.r-home:focus-visible { outline: var(--focus-w) solid var(--r-light); outline-offset: 8px; }

/* Hero: the question, and the two ways to answer it */
.r-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); padding: var(--space-20) var(--r-gutter) calc(var(--space-20) + var(--space-8)); background: var(--r-void); }
.r-hero-text { min-inline-size: 0; }
.r-tag { font: 700 var(--text-xs) / 1.5 var(--font-mono); letter-spacing: 0.14em; color: var(--r-dim); }
.r-hero h1 { margin: var(--space-6) 0 var(--space-8); font: 300 var(--r-text-h1) / 1.02 var(--font-display); letter-spacing: -0.02em; max-inline-size: 16ch; }
.r-sub { font-size: var(--text-lg); line-height: 1.5; color: var(--r-soft); max-inline-size: 52ch; }
.r-hero-side { min-inline-size: 0; align-self: center; }
.r-picks { display: grid; gap: 0; min-inline-size: 0; }
.r-pick { display: flex; align-items: center; gap: var(--space-6); min-block-size: var(--space-24); padding-block: var(--space-6); border-block-start: var(--rule-hair) solid var(--r-rule); font: 300 var(--r-text-pick) / 1.1 var(--font-display); letter-spacing: -0.01em; text-decoration: none; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.r-pick:last-child { border-block-end: var(--rule-hair) solid var(--r-rule); }
.r-pick-dot { flex: none; inline-size: var(--space-3); block-size: var(--space-3); border: 1px solid var(--r-dim); transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.r-pick:hover, .r-pick:active { border-color: var(--r-light); }
.r-pick:hover .r-pick-dot, .r-pick:active .r-pick-dot, .r-pick:focus-visible .r-pick-dot { background: var(--r-light); border-color: var(--r-light); box-shadow: 0 0 1rem 0.25rem var(--r-glow); }
.r-pick:focus-visible { outline: var(--focus-w) solid var(--r-light); outline-offset: 4px; }
.r-both { margin-block-start: var(--space-6); max-inline-size: 44ch; color: var(--r-soft); line-height: 1.5; }
.r-both a { color: var(--color-ink); font-weight: 500; text-decoration: none; border-block-end: var(--rule-hair) solid var(--r-rule); transition: border-color var(--dur-fast) var(--ease-out); }
.r-both a:hover { border-color: var(--r-light); }
.r-both a:focus-visible { outline: var(--focus-w) solid var(--r-light); outline-offset: 4px; }

/* The two paths */
.r-paths { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-block-start: var(--rule-hair) solid var(--r-rule); background: var(--color-paper); }
.r-path { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-20) var(--r-gutter) var(--space-16); scroll-margin-block-start: var(--space-6); }
.r-path + .r-path { border-block-start: var(--rule-hair) solid var(--r-rule); }
.r-h2 { font: 300 var(--r-text-h2) / 1.05 var(--font-display); letter-spacing: -0.02em; }
.r-promise { color: var(--r-soft); font-size: var(--text-lg); line-height: 1.5; max-inline-size: 48ch; }
.r-steps { display: grid; gap: 0; max-inline-size: 52ch; margin-block: var(--space-2) var(--space-4); }
.r-steps li { padding-block: var(--space-4); border-block-start: var(--rule-hair) solid var(--r-rule); color: var(--r-soft); }
.r-steps li:last-child { border-block-end: var(--rule-hair) solid var(--r-rule); }
.r-steps b { display: block; margin-block-end: var(--space-1); font: 300 var(--text-xl) / 1.2 var(--font-display); color: var(--color-ink); }
.r-btn { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--space-12); padding: var(--space-3) var(--space-8); background: var(--r-light); color: var(--r-void); font: 500 var(--text-base) / 1 var(--font-display); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out); }
.r-btn:hover { background: var(--r-soft); }
.r-btn:focus-visible { outline: var(--focus-w) solid var(--r-light); outline-offset: 4px; }
.r-btn:active { opacity: 0.85; }

.r-hybrid { padding: var(--space-20) var(--r-gutter) var(--space-32); border-block-start: var(--rule-heavy) solid var(--r-light); background: var(--r-void); scroll-margin-block-start: var(--space-6); }
.r-hybrid-h { font: 300 var(--r-text-h2) / 1.05 var(--font-display); letter-spacing: -0.02em; }
.r-hybrid-h span { display: block; }
.r-hybrid-line { margin-block-start: var(--space-8); max-inline-size: 56ch; color: var(--r-soft); font-size: var(--text-lg); line-height: 1.5; }
.r-foot { padding: var(--space-6) var(--r-gutter) var(--space-12); border-block-start: var(--rule-hair) solid var(--r-rule); font: 700 var(--text-xs) / 1.5 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.r-foot a { display: inline-flex; align-items: center; min-block-size: var(--space-11); text-decoration: none; white-space: nowrap; }
.r-foot a:hover { color: var(--r-soft); }
.r-foot a:focus-visible { outline: var(--focus-w) solid var(--r-light); outline-offset: 4px; }

@media (min-width: 1000px) {
  .r-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); align-items: center; padding-block: var(--space-20) var(--space-32); }
  .r-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r-path + .r-path { border-block-start: 0; border-inline-start: var(--rule-hair) solid var(--r-rule); }
}
@media (max-width: 600px) {
  .r-hero { gap: var(--space-10); }
  .r-path { padding-block: var(--space-16) var(--space-12); }
  .r-hybrid { padding-block: var(--space-16) var(--space-24); }
}
@media (prefers-reduced-motion: reduce) {
  .r-pick, .r-pick-dot, .r-btn, .r-both a { transition: none; }
}