/* =========================================================
   zodiakk — Colors & Type tokens
   Cold, editorial brutalism. Dark. Near-monochrome.
   References: utrecht.jp, Rietveld, dappboi, tight.media.
   Motion is subtle. No neon. No scanlines by default.
   ========================================================= */

@font-face {
  font-family: "VCR OSD Mono";
  src: url("fonts/VCR_OSD_MONO_1.001.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;1,9..144,300;1,9..144,400&display=swap");

:root {
  --void:      #000000;
  --pitch:     #0b0c0d;
  --coal:      #121315;
  --ash:       #1a1c1f;
  --iron:      #23262a;
  --graphite:  #34383d;
  --slate:     #55595f;
  --fog:       #7a7f85;
  --bone:      #a6abb0;
  --chalk:     #d8d9db;
  --moon:      #f2f2ef;

  --ember:     #c9422b;
  --steel:     #8a99a8;

  --bg:            var(--pitch);
  --bg-raised:     var(--coal);
  --bg-higher:     var(--ash);
  --border:        var(--iron);
  --border-strong: var(--graphite);
  --fg:            var(--chalk);
  --fg-strong:     var(--moon);
  --fg-muted:      var(--bone);
  --fg-dim:        var(--fog);
  --fg-faint:      var(--slate);
  --fg-inverse:    var(--pitch);
  --accent:        var(--moon);
  --emphasis:      var(--ember);

  --font-sans:      "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-mono:      "VCR OSD Mono", "IBM Plex Mono", ui-monospace, monospace;
  --font-editorial: "Fraunces", ui-serif, Georgia, serif;

  --fs-micro: 10px;
  --fs-xs:    11px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-md:    17px;
  --fs-lg:    21px;
  --fs-xl:    28px;
  --fs-2xl:   40px;
  --fs-3xl:   56px;
  --fs-4xl:   84px;
  --fs-5xl:   120px;
  --fs-6xl:   180px;

  --lh-tight: 0.9;
  --lh-snug:  1.04;
  --lh-body:  1.5;
  --lh-loose: 1.7;

  --ls-wide:    0.14em;
  --ls-wider:   0.2em;
  --ls-mid:     0.02em;
  --ls-body:    0;
  --ls-tight:   -0.015em;
  --ls-crunch:  -0.035em;

  --r-none: 0;
  --r-xs:   0;
  --r-sm:   0;

  --bw-hair:  1px;
  --bw:       1px;
  --bw-thick: 1px;
  --bw-heavy: 2px;

  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;
  --s-12: 256px;

  --shadow-none:  none;
  --hairline-top:     inset 0 1px 0 var(--iron);
  --hairline-bottom:  inset 0 -1px 0 var(--iron);
  --hairline-all:     inset 0 0 0 1px var(--iron);

  --ease-out:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.5, 0, 0.2, 1);
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-instant: 100ms;
  --dur-fast:    220ms;
  --dur-base:    420ms;
  --dur-slow:    800ms;
  --dur-reveal:  1400ms;

  --grid-gutter: 24px;
  --grid-cols:   12;
  --max-w:       1680px;
  --page-pad:    clamp(16px, 3vw, 32px);
}

/* =========================================================
   SEMANTIC TYPE ROLES
   ========================================================= */

.t-display-mega {
  font-family: var(--font-sans);
  font-size: clamp(72px, 14vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-crunch);
  color: var(--fg-strong);
  font-weight: 400;
}
.t-display {
  font-family: var(--font-sans);
  font-size: clamp(56px, 9vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-crunch);
  font-weight: 400;
  color: var(--fg-strong);
}

.t-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-weight: 400;
  color: var(--fg-strong);
}
.t-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-weight: 400;
  color: var(--fg-strong);
}
.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-weight: 400;
  color: var(--fg-strong);
}

.t-editorial {
  font-family: var(--font-editorial);
  font-size: var(--fs-2xl);
  line-height: 1.12;
  letter-spacing: var(--ls-tight);
  font-style: italic;
  font-weight: 300;
  color: var(--fg-strong);
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--fg);
  text-wrap: pretty;
}
.t-body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--fg);
}
.t-body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

.t-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.t-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.t-numeric {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1;
  letter-spacing: var(--ls-mid);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.t-code {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--fg);
  background: var(--ash);
  padding: 2px 6px;
}

/* =========================================================
   BASE RESETS
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--moon);
  color: var(--pitch);
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--fg-strong); }

.grain {
  position: relative;
}
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-slow) var(--ease-editorial),
    transform var(--dur-slow) var(--ease-editorial);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.reveal[data-delay="1"] { transition-delay: 60ms; }
.reveal[data-delay="2"] { transition-delay: 120ms; }
.reveal[data-delay="3"] { transition-delay: 180ms; }
.reveal[data-delay="4"] { transition-delay: 240ms; }
.reveal[data-delay="5"] { transition-delay: 300ms; }
.reveal[data-delay="6"] { transition-delay: 360ms; }
.reveal[data-delay="7"] { transition-delay: 420ms; }
.reveal[data-delay="8"] { transition-delay: 480ms; }

/* Pre-mount loading state — terse, lowercase, VCR mono. */
.boot {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding: 80px 32px;
  margin: 0;
  animation: boot-blink 2.6s steps(2, end) infinite;
}
.boot.err { color: var(--ember); animation: none; }
@keyframes boot-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.35; }
}