/* Thunder Reel design tokens. Neutral palette that matches the logo: pure black, white and neutral greys only.
   No tinted accent (the earlier lime and steel-blue accents were removed at the owner's request, 2026-10-27).
   Contrast on --ink #000: --bone 18.9:1, --white 21:1, --ash 6.5:1 (all WCAG AA for text). --line is decorative only. */
@font-face{font-family:"Anton";src:url(/assets/fonts/anton-latin-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-latin-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jetbrains-mono-latin-400.woff2) format("woff2");font-weight:400 500;font-style:normal;font-display:swap}
:root{
  --ink:#000000; --night:#111111; --line:#2E2E2E; --bone:#EDEDED; --white:#FFFFFF; --ash:#8E8E8E;
  --accent:#FFFFFF; --accent-hi:#FFFFFF;
  --focus:var(--accent-hi); --bg:var(--ink);
  --p1:#6B6B6B; --p2:#3A3A3A; --p3:#555555;
  --f-display:"Anton","Impact","Arial Narrow",sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-display:clamp(3.5rem,12vw,14rem); --fs-h2:clamp(2.25rem,6vw,6rem); --fs-h3:clamp(1.5rem,3vw,2.75rem);
  --fs-body:clamp(1rem,1.1vw,1.25rem); --fs-label:.75rem; --track-label:.08em;
  --hd-xl:clamp(3.5rem,11vw,12.5rem); --hd-l:clamp(3rem,9vw,9.5rem); --hd-m:clamp(2.5rem,6vw,6rem); --hd-lh:.92;
  --hd-s1:.75rem; --hd-s2:1.25rem; --hd-s3:2rem; --hd-top:clamp(7.5rem,16vh,9.5rem); --hd-bottom:clamp(3rem,10vh,6rem);
  --sp:4px; --pad-x:max(clamp(1.25rem,4vw,4rem),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)); --pad-y:clamp(4rem,12vh,10rem);
  --measure:65ch; --gap-hp:.75rem;
  --radius:0;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-inout:cubic-bezier(.65,0,.35,1);
  --d1:200ms; --d2:400ms; --d3:800ms; --d4:1200ms; --d-flip:800ms;
}
/* phones (<=767px, portrait and landscape): one spacing system. Desktop values above are untouched.
   --pad-x is the single gutter (20px at 360, 21px at 390, 23px at 414, 28px at 667 landscape; never less than the notch inset).
   --pad-y is the single section padding (56-72px), replacing 12vh (101px top + 101px bottom at 844 tall). */
@media (max-width:767px){:root{--pad-x:max(clamp(1.25rem,5.5vw,1.75rem),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));--pad-y:clamp(3.5rem,8vh,4.5rem);--hd-top:clamp(6.5rem,14vh,8rem);--hd-bottom:var(--pad-y)}}
@media (prefers-reduced-motion:reduce){:root{--d1:1ms;--d2:1ms;--d3:1ms;--d4:1ms;--d-flip:1ms}}