/* =========================================================================
   DARK SHADOW VFX — Foundational tokens
   Color, type, spacing, motion, elevation. Import this first.
   ========================================================================= */

/* ---------- Webfonts ---------------------------------------------------- */
/* Display: Bodoni Moda — sharp, high-contrast Didone for dramatic headers.
   Body:    Geist      — clean minimalist sans for UI and prose.
   Mono:    Geist Mono — for technical/credits/metadata.
   Brand:   Libre Barcode 39 Text — the studio's native face. Renders any
            text as a Code-39 barcode with the legible characters printed
            beneath. THIS is the font the logo is built from. Use for case
            numbers, chapter markers, project IDs, and decorative slugs.
            Never for body, headlines, or anything that must be read fast.
   SUBSTITUTION NOTE: Bodoni Moda + Geist remain Google Fonts stand-ins
   for ideal pairing (Bodoni 72 / GT Super Display + ABC Diatype /
   Suisse Int'l). Swap when foundry files arrive. */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;0,6..96,800;0,6..96,900;1,6..96,400;1,6..96,700&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

@font-face {
  font-family: 'DSVFX Barcode';
  src: url('fonts/LibreBarcode39Text-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Color: shadow scale (warm-leaning blacks) --------------- */
  --void:        #000000; /* the absolute. backgrounds, page base */
  --shadow:      #050505; /* near-black, panels */
  --graphite:    #0C0C0C; /* cards on void */
  --charcoal:    #141414; /* elevated surfaces */
  --ash:         #1C1C1C; /* hover states on charcoal */
  --gravel:      #242424; /* highest elevation */
  --iron:        #2E2E2E; /* hairline strokes, dividers */

  /* ---------- Color: light scale (cool-leaning whites) ---------------- */
  --bone:        #FFFFFF; /* primary text, key art */
  --pearl:       #F4F2EE; /* slightly warm paper-white, large display */
  --linen:       #E6E3DD; /* secondary surfaces in inverse mode */
  --fog:         #B8B6B0; /* secondary text */
  --smoke:       #75736E; /* tertiary text, captions */
  --mist:        #3D3B38; /* disabled, ghost strokes */

  /* ---------- Color: accents (used SPARINGLY — chiaroscuro key light) - */
  --ember:       #C8A572; /* warm tungsten — links, focus, lone highlight */
  --ember-deep:  #8C6B3F; /* pressed ember */
  --ember-glow:  rgba(200, 165, 114, 0.18); /* soft halo */
  --signal:      #FFFFFF; /* hover key — pure light against pure dark */

  /* ---------- Semantic foreground / background ----------------------- */
  --bg:          var(--void);
  --bg-elev-1:   var(--shadow);
  --bg-elev-2:   var(--graphite);
  --bg-elev-3:   var(--charcoal);
  --fg:          var(--bone);
  --fg-muted:    var(--fog);
  --fg-subtle:   var(--smoke);
  --fg-faint:    var(--mist);
  --stroke:      var(--iron);
  --stroke-soft: #1A1A1A;

  /* ---------- Typography: families ----------------------------------- */
  --font-display: 'Bodoni Moda', 'Bodoni 72', 'Didot', 'GFS Didot', serif;
  --font-sans:    'Geist', 'Suisse Int\'l', 'Söhne', 'Inter Tight', system-ui, sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --font-barcode: 'DSVFX Barcode', 'Libre Barcode 39 Text', monospace;

  /* ---------- Typography: scale (modular, ratio ≈ 1.333) ------------- */
  --t-12:  0.75rem;     /*  12 — overline, micro caption */
  --t-13:  0.8125rem;   /*  13 — caption, credit line */
  --t-14:  0.875rem;    /*  14 — small body */
  --t-16:  1rem;        /*  16 — body */
  --t-18:  1.125rem;    /*  18 — lead */
  --t-22:  1.375rem;    /*  22 — subhead */
  --t-28:  1.75rem;     /*  28 — h4 / kicker */
  --t-36:  2.25rem;     /*  36 — h3 */
  --t-48:  3rem;        /*  48 — h2 */
  --t-72:  4.5rem;      /*  72 — h1 */
  --t-112: 7rem;        /* 112 — display */
  --t-168: 10.5rem;     /* 168 — hero, cinematic */
  --t-240: 15rem;       /* 240 — feature, full-bleed type */

  /* ---------- Typography: weight ------------------------------------- */
  --w-light:    300; /* @kind font */
  --w-regular:  400; /* @kind font */
  --w-medium:   500; /* @kind font */
  --w-semibold: 600; /* @kind font */
  --w-bold:     700; /* @kind font */
  --w-black:    900; /* @kind font */

  /* ---------- Typography: tracking ----------------------------------- */
  --track-tight:   -0.04em; /* @kind font */
  --track-snug:    -0.02em; /* @kind font */
  --track-normal:  0;       /* @kind font */
  --track-wide:    0.08em;  /* @kind font */
  --track-wider:   0.16em;  /* @kind font */
  --track-widest:  0.32em;  /* @kind font */ /* overlines and label caps */

  /* ---------- Typography: leading ------------------------------------ */
  --lead-display: 0.92; /* @kind font */
  --lead-tight:   1.05; /* @kind font */
  --lead-snug:    1.18; /* @kind font */
  --lead-normal:  1.45; /* @kind font */
  --lead-loose:   1.65; /* @kind font */

  /* ---------- Spacing scale (4px base) ------------------------------- */
  --s-0:   0; /* @kind spacing */
  --s-1:   0.25rem;   /*  4 */
  --s-2:   0.5rem;    /*  8 */
  --s-3:   0.75rem;   /* 12 */
  --s-4:   1rem;      /* 16 */
  --s-5:   1.5rem;    /* 24 */
  --s-6:   2rem;      /* 32 */
  --s-7:   3rem;      /* 48 */
  --s-8:   4rem;      /* 64 */
  --s-9:   6rem;      /* 96 */
  --s-10:  8rem;      /* 128 */
  --s-11: 12rem;      /* 192 */
  --s-12: 16rem;      /* 256 */

  /* ---------- Radii (sparing — gothic system is mostly hard-edge) ---- */
  --r-none:  0; /* @kind radius */
  --r-xs:    2px;
  --r-sm:    4px;
  --r-md:    8px;
  --r-full:  9999px;

  /* ---------- Strokes ------------------------------------------------ */
  --hairline: 1px solid var(--stroke);
  --hairline-soft: 1px solid var(--stroke-soft);
  --rule:     1px solid var(--bone);

  /* ---------- Elevation / shadow (subtle — light comes from outside) - */
  --elev-0: none;
  --elev-1: 0 1px 0 0 rgba(255,255,255,0.04) inset;
  --elev-2: 0 12px 30px -16px rgba(0,0,0,0.9);
  --elev-3: 0 30px 80px -28px rgba(0,0,0,1), 0 1px 0 0 rgba(255,255,255,0.04) inset;
  --glow-key: 0 0 60px -8px var(--ember-glow); /* tungsten key light */

  /* ---------- Motion: heavy, deliberate, liquid ---------------------- */
  --ease-glide:   cubic-bezier(0.22, 0.61, 0.36, 1);     /* @kind other */ /* default */
  --ease-rack:    cubic-bezier(0.16, 0.84, 0.24, 1);     /* @kind other */ /* rack focus */
  --ease-fade:    cubic-bezier(0.4, 0, 0.2, 1);          /* @kind other */
  --ease-pull:    cubic-bezier(0.65, 0, 0.35, 1);        /* @kind other */ /* heavy in/out */
  --dur-instant:  120ms;   /* @kind other */
  --dur-fast:     240ms;   /* @kind other */
  --dur-base:     480ms;   /* @kind other */
  --dur-slow:     880ms;   /* @kind other */
  --dur-glacial:  1400ms;  /* @kind other */
  --dur-reveal:   2400ms;  /* @kind other */ /* intro / logo reveal */

  /* ---------- Layout ------------------------------------------------- */
  --max-w:        1680px;
  --gutter:       clamp(24px, 4vw, 80px); /* @kind spacing */
  --col-gap:      clamp(20px, 2.4vw, 40px);
  --grain-opacity: 0.06;  /* @kind other */ /* film grain overlay strength */
}

/* =========================================================================
   Semantic typography — apply via class or element selector
   ========================================================================= */

html { background: var(--bg); color: var(--fg); }
body {
  font-family: var(--font-sans);
  font-size: var(--t-16);
  line-height: var(--lead-normal);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.display, .h-display {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: clamp(var(--t-72), 14vw, var(--t-240));
  line-height: var(--lead-display);
  letter-spacing: var(--track-tight);
  font-style: normal;
  font-optical-sizing: auto;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: clamp(var(--t-48), 7vw, var(--t-112));
  line-height: var(--lead-display);
  letter-spacing: var(--track-tight);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: clamp(var(--t-36), 4.4vw, var(--t-72));
  line-height: var(--lead-tight);
  letter-spacing: var(--track-snug);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: clamp(var(--t-28), 2.6vw, var(--t-48));
  line-height: var(--lead-snug);
  letter-spacing: var(--track-snug);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--t-22);
  line-height: var(--lead-snug);
  letter-spacing: var(--track-snug);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--t-16);
  line-height: var(--lead-loose);
  font-weight: var(--w-regular);
  color: var(--fg-muted);
  max-width: 62ch;
  text-wrap: pretty;
}

.lead {
  font-family: var(--font-sans);
  font-size: var(--t-22);
  line-height: var(--lead-normal);
  color: var(--fg);
  font-weight: var(--w-light);
  max-width: 48ch;
}

.overline, .eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-12);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--t-13);
  color: var(--fg-subtle);
  letter-spacing: var(--track-wide);
}

.credit {
  font-family: var(--font-mono);
  font-size: var(--t-12);
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
  text-transform: uppercase;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.94em;
  letter-spacing: 0;
}

/* Brand decorative face — Libre Barcode 39 Text.
   Renders any string as a Code-39 barcode with the legible text below.
   Use SPARINGLY: case numbers, chapter slugs, footer ID strings.
   Surround text with asterisks for Code-39 start/stop sentinels — the
   font ignores them in the legible row but pads the bars correctly. */
.barcode {
  font-family: var(--font-barcode);
  font-weight: 400;
  letter-spacing: 0;
  /* the font has its own internal sizing — choose a generous px size */
  font-size: 48px;
  line-height: 1;
  color: var(--bone);
  font-variant-ligatures: none;
}
.barcode--sm { font-size: 32px; }
.barcode--lg { font-size: 72px; }
.barcode--xl { font-size: 120px; }

/* Italic accent — Bodoni's italic is its quiet superpower */
.italic-accent { font-style: italic; font-family: var(--font-display); }

/* Underline link style — slow underline grow on hover */
a {
  color: inherit;
  text-decoration: none;
  position: relative;
  transition: color var(--dur-base) var(--ease-glide);
}
a.under {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--dur-slow) var(--ease-glide), color var(--dur-base);
  padding-bottom: 2px;
}
a.under:hover { background-size: 100% 1px; }

/* =========================================================================
   Film grain overlay — apply to body or page wrapper
   ========================================================================= */
.grain::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}