@font-face{font-family:"Zodiak";src:url(../fonts/zodiak-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Zodiak";src:url(../fonts/zodiak-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:block}
@font-face{font-family:"Switzer";src:url(../fonts/switzer-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url(../fonts/switzer-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url(../fonts/switzer-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(../fonts/plex-mono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
/* metric-matched fallbacks so the swap does not shift layout */
@font-face{font-family:"Zodiak Fallback";src:local("Georgia");size-adjust:96%;ascent-override:96%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:"Switzer Fallback";src:local("Arial");size-adjust:101%;ascent-override:94%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Plex Mono Fallback";src:local("Courier New");size-adjust:100%;ascent-override:102%;descent-override:30%;line-gap-override:0%}
/* =====================================================================
   Design tokens: "Long Exposure" direction, isaacadekunle.com V3
   Port 1:1 into the Astro build (src/styles/tokens.css).
   Contrast pairs: worked by hand in DESIGN_DIRECTION.md section 7.1; ../../tools/contrast.mjs
   re-checks them (not run in the design session).
   ===================================================================== */
:root {
  /* ---- Grounds: the page moves from night (ISOLATE) to blue hour (TRACE) to first light (RELEASE) */
  --c-night: #0e0c0a;          /* hero + ISOLATE ground: warm blackout, not neutral black */
  --c-blue-hour: #111822;      /* TRACE ground */
  --c-dawn: #eee6d8;           /* RELEASE ground: first light, warm paper */

  /* ---- Text */
  --c-text-on-dark: #f3ece0;
  --c-muted-on-dark: #a99f91;
  --c-text-on-light: #1c1915;
  --c-muted-on-light: #5b5348;

  /* ---- The Line (light) */
  --c-light-core: #ffe3b8;     /* filament core: tungsten white */
  --c-light-glow: #ff9a3d;     /* halo: sodium amber. Never used for text. */
  --c-ink-line: #1c1915;       /* the Line once it reaches daylight */

  /* ---- Art support */
  --c-mark-dim: #4a4238;       /* unlit marks in the ISOLATE field */
  --c-mark-lit: #ffd9a0;       /* marks under the lamp */
  --c-rule-dark: rgba(243, 236, 224, 0.12);
  --c-rule-light: rgba(28, 25, 21, 0.16);

  /* ---- Semantic: Human gate ONLY (where a person decides). Never decorative. */
  --c-gate-dark: #ff7a63;
  --c-gate-light: #a2301c;

  /* ---- Focus */
  --c-focus-dark: #ffc46b;
  --c-focus-light: #1c1915;

  /* ---- Text panels that scroll over full-bleed art */
  --c-panel-night: rgba(14, 12, 10, 0.86);
  --c-panel-blue: rgba(17, 24, 34, 0.88);
  --c-panel-dawn: rgba(238, 230, 216, 0.92);

  /* ---- Type: Zodiak (display) + Switzer (text) from Fontshare, IBM Plex Mono (labels). Self-hosted woff2. */
  --font-display: "Zodiak", "Zodiak Fallback", Georgia, "Times New Roman", serif;
  --font-text: "Switzer", "Switzer Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "Plex Mono", "Plex Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale (390 -> 1440). Ratio about 1.25 on mobile, 1.333 on desktop. */
  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);   /* tags, meta */
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);        /* body */
  --step-1: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem);    /* lead / step text */
  --step-2: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);        /* h3 */
  --step-3: clamp(2rem, 1.6rem + 1.9vw, 3.375rem);          /* h2 */
  --step-4: clamp(2.375rem, 1.55rem + 3.6vw, 5.25rem);      /* act titles */
  --step-h1: clamp(1.75rem, 1.05rem + 2.1vw, 3.1rem);        /* hero statement */

  --lh-tight: 1.04;
  --lh-snug: 1.2;
  --lh-body: 1.55;
  --measure: 34rem;

  /* ---- Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  /* ---- Layout grid: 4 cols / 20px gutter at 390; 12 cols / 24px gutter at 1440 */
  --page-margin: clamp(1.25rem, 0.5rem + 3.2vw, 3.5rem);
  --max-width: 85rem;          /* 1360px */
  --grid-gap: clamp(1rem, 0.8rem + 0.6vw, 1.5rem);

  /* ---- Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* arrivals, lamp settle */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* camera moves */
  --ease-line: cubic-bezier(0.45, 0.05, 0.2, 1);    /* the Line drawing */
  --dur-1: 160ms;   /* focus, hover */
  --dur-2: 320ms;   /* notch / tick appear */
  --dur-3: 640ms;   /* gate arm, active-product camera pan */
  --dur-draw: 1800ms; /* hero line on load */
  --scrub-damping: 0.14; /* JS: share of the gap closed per frame (feels like GSAP scrub: 0.6) */

  --radius: 2px;   /* nearly square: nothing here is a rounded SaaS card */
}