/* Hallmark · genre: atmospheric · macrostructure: Marquee Hero (the display is the 3D inscription; the fold carries one statement and no CTA) · theme: custom "Perennos night + bone light" (paper dark / display grotesk-sans Anybody / neutral with one warm light) · enrichment: bespoke three.js volume scene (hand-written shaders, no library beyond three) · polish: HP3 Cursor-spotlight (the WebGL light, scoped to the hero; reduced-motion = one still frame) · nav: N9 edge-aligned · footer: Ft5 statement
 * pre-emit critique: P5 H4 E4 S5 R4 V5 · contrast: pass (40-41; rendered-background check behind the headline) · nav: N9 · footer: Ft5 · slop: pass (42-45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50-57)
 * states: links default/hover/focus-visible/active; button default/hover/focus-visible/active/disabled
 * Deviations from the generic rules, on purpose: the hero scene is ambient motion by nature (WebGL, paused off-screen, in hidden tabs and on the Pause control, one still frame under reduced motion); the cursor drives a light, not a custom cursor; the display is the 3D inscription, not 8-14vw type. */

@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 {
  --u-void: oklch(5% 0.005 90);
  --u-bone: oklch(94% 0.02 85);        /* the light: the page's only warm colour */
  --u-soft: oklch(82% 0.006 90);
  --u-dim: oklch(64% 0.006 90);
  --u-rule: oklch(36% 0.006 90);
  --u-slab-hi: oklch(20% 0.006 90);
  --u-slab-lo: oklch(8% 0.005 90);
  --u-gutter: clamp(1.25rem, 4vw, 3.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--color-paper);
  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; }

.u-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(--color-ink); color: var(--color-paper);
  transform: translateY(-200%); text-decoration: none;
}
.u-skip:focus-visible { transform: none; outline: var(--focus-w) solid var(--color-ink); outline-offset: 4px; }

/* N9: the mast is only the wordmark, pinned to the edge */
.u-mast { position: absolute; inset: 0 0 auto 0; z-index: 3; padding: var(--space-6) var(--u-gutter); pointer-events: none; }   /* the bar spans the page: let clicks through to what is under it */
.u-home { display: inline-block; pointer-events: auto; }
.u-home img { inline-size: clamp(9rem, 14vw, 14rem); block-size: auto; }
.u-home:focus-visible { outline: var(--focus-w) solid var(--color-ink); outline-offset: 8px; }

/* The stage */
.u-stage { position: relative; block-size: 100svh; min-block-size: 36rem; background: var(--u-void); overflow: clip; isolation: isolate; }
.u-canvas { position: absolute; inset: 0; z-index: 0; inline-size: 100%; block-size: 100%; display: block; opacity: 0; transition: opacity 1200ms var(--ease-out); }
.u-gl .u-canvas { opacity: 1; }

/* The poster: what the page is before (and without) WebGL. A dark slab with the inscription set upright. */
.u-poster { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; padding-inline-start: 36%; transition: opacity 900ms var(--ease-out); pointer-events: none; }
.u-gl .u-poster { opacity: 0; }
.u-poster-slab {
  display: flex; flex-direction: column; justify-content: space-around; align-items: center;
  block-size: 79svh; aspect-ratio: 1 / 5;
  background: linear-gradient(var(--u-slab-hi), var(--u-slab-lo));
  border-inline: 1px solid var(--u-rule);
}
.u-poster-slab span { font: 200 clamp(1.4rem, 6.5svh, 4rem) / 1 var(--font-display); font-stretch: 150%; color: var(--u-soft); }
@media (max-aspect-ratio: 19 / 20) {
  .u-poster { padding-inline-start: 0; align-items: start; padding-block-start: 7svh; }
  .u-poster-slab { block-size: 46svh; }
}

/* The statement */
.u-copy {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  display: grid; gap: var(--space-6);
  padding: var(--space-8) var(--u-gutter) clamp(var(--space-8), 7svh, var(--space-16));
  max-inline-size: 56rem;
}
@media (min-aspect-ratio: 19 / 20) { .u-copy { max-inline-size: min(56rem, 56vw); } }   /* keep the copy clear of the slab */
.u-h1 { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; font: 300 clamp(2rem, 0.9rem + 2.7vw, 3.75rem) / 1.04 var(--font-display); letter-spacing: -0.015em; text-wrap: balance; }
.u-h1 span { display: block; }
.u-h1-a { color: var(--u-dim); }
.u-h1-b { color: var(--color-ink); }
.u-sub { margin: 0; max-inline-size: 46ch; font: 400 clamp(1rem, 0.92rem + 0.35vw, 1.2rem) / 1.5 var(--font-display); color: var(--u-soft); }
@media (max-aspect-ratio: 19 / 20) { .u-stage { min-block-size: 40rem; } }

/* Below the fold: a hard rule, then prose in asymmetric rows (not three cards) */
.u-notes { border-block-start: var(--rule-heavy) solid var(--color-ink); background: var(--color-paper); padding: var(--space-24) var(--u-gutter) var(--space-16); }
.u-note { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-10); border-block-start: var(--rule-hair) solid var(--u-rule); }
.u-note:first-child { border-block-start: 0; padding-block-start: 0; }
.u-tag { margin: 0 0 var(--space-3); font: 700 var(--text-xs) / 1.2 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--u-dim); }
.u-note h2 { margin: 0; font: 300 clamp(1.6rem, 1rem + 1.7vw, 2.6rem) / 1.1 var(--font-display); letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: anywhere; }
.u-note > p { margin: 0; max-inline-size: var(--measure); color: var(--u-soft); }
@media (min-width: 60rem) {
  .u-note { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); align-items: end; }
}

.u-close { background: var(--color-paper); padding: var(--space-16) var(--u-gutter) var(--space-32); border-block-start: var(--rule-hair) solid var(--u-rule); }
.u-close h2 { margin: 0 0 var(--space-6); max-inline-size: 22ch; min-inline-size: 0; overflow-wrap: anywhere; font: 300 clamp(2.25rem, 1rem + 4.2vw, 5.25rem) / 1.02 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; }
.u-close p { margin: 0; max-inline-size: var(--measure); font-size: var(--text-lg); color: var(--u-soft); }
.u-close a, .u-foot a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; text-decoration-color: var(--u-dim); transition: text-decoration-color var(--dur-fast) var(--ease-out), text-decoration-thickness var(--dur-fast) var(--ease-out); }
.u-close a:hover { text-decoration-color: var(--color-ink); text-decoration-thickness: 2px; }
.u-close a:focus-visible { outline: var(--focus-w) solid var(--color-ink); outline-offset: 4px; text-decoration: none; }
.u-close a:active { opacity: 0.8; }

/* Ft5: the footer is one sentence */
.u-foot { background: var(--color-paper); padding: var(--space-10) var(--u-gutter) var(--space-16); border-block-start: var(--rule-hair) solid var(--u-rule); }
.u-foot p { margin: 0; max-inline-size: 46ch; font: 300 var(--text-xl) / 1.3 var(--font-display); color: var(--u-soft); }

/* WCAG 2.2.2: the scene moves by itself for longer than 5 s, so it carries its own pause control (top-right, beside the wordmark) */
.u-ctrl { position: absolute; inset-block-start: var(--space-4); inset-inline-end: var(--u-gutter); z-index: 3; display: flex; gap: var(--space-2); }
.u-pause, .u-listen {
  display: none; align-items: center; min-block-size: var(--space-11); padding: 0 var(--space-4);
  font: 700 var(--text-xs) / 1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  color: var(--u-soft); background: transparent; border: var(--rule-hair) solid var(--u-rule); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.u-gl .u-pause, body[data-scene="shadow"] .u-gl .u-listen { display: inline-flex; }
.u-pause:hover, .u-listen:hover { color: var(--color-ink); border-color: var(--u-dim); }
.u-pause:focus-visible, .u-listen:focus-visible { outline: var(--focus-w) solid var(--color-ink); outline-offset: 4px; }
.u-pause:active, .u-listen:active { opacity: 0.8; }
.u-listen[data-on="true"] { color: var(--color-ink); border-color: var(--u-soft); }
.u-pause:disabled, .u-listen:disabled { opacity: 0.55; cursor: not-allowed; }
@media (max-width: 23.75rem) { .u-ctrl { flex-direction: column; align-items: flex-end; } }   /* at 320 px the wordmark and two buttons will not share a row */

@media (prefers-reduced-motion: reduce) {
  .u-canvas, .u-poster { transition-duration: 150ms; transition-timing-function: linear; }
  .u-gl .u-ctrl { display: none; }   /* nothing moves, so nothing to pause and nothing to react to a sound */
}
@media (prefers-reduced-motion: reduce) {
  body[data-scene="shadow"] .u-poster { transition-duration: 150ms; }
  body[data-scene="shadow"] .u-canvas { transition: opacity 150ms linear 150ms; }
}

/* Variant B (the lamp): the poster is a dim wall with the word laid flat, and the statement gets a scrim so the lit wall never costs it contrast */
body[data-scene="shadow"] .u-poster { padding: 0; }
body[data-scene="shadow"] .u-poster-slab { flex-direction: row; justify-content: center; gap: 0.14em; block-size: auto; aspect-ratio: auto; background: none; border: 0; }
body[data-scene="shadow"] .u-poster-slab span { font-size: clamp(2.5rem, 11vw, 9rem); color: var(--u-dim); }
body[data-scene="shadow"] .u-stage::after { content: ""; position: absolute; inset: auto 0 0 0; block-size: 55%; z-index: 1; background: linear-gradient(to top, var(--u-void) 22%, transparent); pointer-events: none; }
/* Scroll as light (the lamp page): while the scene runs and the page is at the top, the stage pins for 150svh of scroll and the lamp rakes across the wall as you go. No scene, no extra scroll: the class is added by script only once the scene is on its way. */
body[data-scene="shadow"] .u-track.u-live { block-size: calc(max(100svh, 36rem) + 150svh); }
body[data-scene="shadow"] .u-track.u-live .u-stage { position: sticky; inset-block-start: 0; }
body[data-scene="shadow"] .u-poster { transition-duration: 200ms; }
body[data-scene="shadow"] .u-canvas { transition: opacity 600ms var(--ease-out) 200ms; }   /* the poster has faded out (200 ms) before the scene fades in: the fallback and the shadow are never on screen together */
body[data-scene="shadow"] .u-h1-a { color: var(--u-soft); }   /* the lit wall can reach 9% luminance behind this line: soft keeps it above 3:1 */

/* S14 exact-address contact route */
.u-foot a { display: inline-flex; align-items: center; min-block-size: 44px; font-family: var(--font-body); font-size: 16px; white-space: nowrap; }
.u-foot a:focus-visible { outline: var(--focus-w) solid var(--color-ink); outline-offset: 4px; }
.u-foot a:active { opacity: .8; }