/* Hallmark · macrostructure: bespoke single-screen wordmark · tone: austere · anchor hue: 255 cool
 * theme: custom (vibe: "frontier lab, precise, quiet, cool paper") · paper oklch(97.6% 0.004 250) · accent oklch(52% 0.11 255)
 * display: Hanken Grotesk · statement: Newsreader · axes: light / grotesk-sans / cool
 * Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4
 */
@font-face { font-family: "Hanken Grotesk"; src: url("/assets/fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader.woff2") format("woff2"); font-weight: 300 500; font-display: swap; }

:root {
  color-scheme: light;
  --color-paper: oklch(97.6% 0.004 250);
  --color-ink: oklch(19% 0.012 255);
  --color-ink-2: oklch(44% 0.012 255);
  --color-ink-3: oklch(57% 0.01 255);
  --color-rule: oklch(88% 0.006 255);
  --color-field: oklch(19% 0.012 255 / 0.18);
  --color-focus: oklch(52% 0.14 255);
  --font-display: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px;
  --gutter: clamp(20px, 5vw, 72px);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 220ms;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-paper: oklch(14.5% 0.008 255);
    --color-ink: oklch(95% 0.004 255);
    --color-ink-2: oklch(76% 0.008 255);
    --color-ink-3: oklch(62% 0.008 255);
    --color-rule: oklch(28% 0.008 255);
    --color-field: oklch(95% 0.004 255 / 0.15);
    --color-focus: oklch(80% 0.11 255);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; background: var(--color-paper); color: var(--color-ink); }
body { font: 400 16px/1.55 var(--font-display); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 2px; }

.stage { position: relative; isolation: isolate; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-xl); padding-inline: var(--gutter); padding-block: clamp(20px, 3.5vw, 36px); }
.field { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 18%, #000 62%); mask-image: linear-gradient(90deg, transparent 18%, #000 62%); }

.top { display: flex; justify-content: flex-end; gap: var(--space-lg); font-size: 14px; }
.top a { text-decoration: none; color: var(--color-ink-2); white-space: nowrap; }

.hero { align-self: center; display: grid; gap: clamp(20px, 3vw, 36px); min-width: 0; }
.wordmark { margin: 0; font-family: var(--font-display); font-weight: 650; font-size: clamp(56px, 15vw, 224px); line-height: 0.84; letter-spacing: -0.058em; overflow-wrap: anywhere; min-width: 0; }
.wordmark .labs { font-weight: 300; letter-spacing: -0.045em; color: var(--color-ink-2); }
.statement { margin: 0; max-width: 24ch; font-family: var(--font-serif); font-weight: 340; font-size: clamp(22px, 2.5vw, 34px); line-height: 1.24; letter-spacing: -0.012em; text-wrap: balance; font-variation-settings: "opsz" 36; }

.base { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg); align-items: end; padding-top: var(--space-md); border-top: 1px solid var(--color-rule); font-size: 14px; color: var(--color-ink-2); }
.work, .contact { display: grid; gap: var(--space-xs); }
.label { font-size: 12px; letter-spacing: 0.02em; color: var(--color-ink-3); }
.contact { text-align: right; }
.link { position: relative; text-decoration: none; color: var(--color-ink); font-weight: 500; white-space: nowrap; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out); }
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }
.muted { color: var(--color-ink-3); }

@media (max-width: 640px) {
  .base { grid-template-columns: minmax(0, 1fr); }
  .contact { text-align: left; }
  .field { -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 75%); mask-image: linear-gradient(180deg, transparent 30%, #000 75%); }
}
@media (prefers-reduced-motion: reduce) { .link::after { transition: none; } }