/* Hallmark · v2.0.0 · theme: custom · idea: "formats, hijacked: his own ad lines are the hero and every section borrows a format" · vibe: "edgy, inky, loud, whimsical, playful" · job: hire, ends on contact · posture: full palette, every section on its own colour field (Klein blue, newsprint, ink, ocean, signal yellow, pink, mint, orange) · axes: dark/grotesk-heavy/chromatic-yellow · faces: Antonio display / Archivo body / Gochi Hand annotations and one scribbled heading · hero: poster, giant condensed headline left, his real ad lines as draggable scraps right · nav: wordmark, a pause-motion toggle and a menu button, no inline links · footer: one line · signature: the draggable scraps of his lines */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R3 V5 · weakest: R, many interactive formats; held to one interaction per section, every loop pausable, no cursor tricks, no faked paper or tape */
/* Hallmark · waive 83 · every picture on the page is Sonny's own spec work · a portfolio's pictures are the work he is hired for */
/* Hallmark · answered 38iii · one word in the hero and the footer wordmark are cut-out letters in the page inks, a collage device and the second signature, not a colour accent on a head */
/* Hallmark · answered F8 · two scroll patterns, the statement fill and the WWF strip, each on its own section, because Sonny asked for scroll-led motion */
/* Hallmark · v2.1: colour fields, crossing tapes, "things I’ve turned into other things" with inline chips, all four WWF posters, riso offset shadows, grain, ransom-note footer cut from his own work, tagged hero scraps, scribble and kicker · sweep: static Floor checks 0 FAIL (no node on this machine, so sloplint could not run; gates walked by hand) · finish-review: in-thread · 4 findings · 4 resolved (index preview crop, M&S brief sliver, tear-off tab text clipping, flat menu) · gap: none */

:root {
  /* paper and ink */
  --color-ink: oklch(17% 0.014 265);
  --color-ink-2: oklch(21% 0.016 265);
  --color-ink-3: oklch(26% 0.018 265);
  --color-rule: oklch(34% 0.018 265);
  --color-text: oklch(95% 0.010 95);
  --color-text-dim: oklch(78% 0.014 265);

  --color-paper: oklch(95% 0.016 95);
  --color-paper-2: oklch(90% 0.018 95);
  --color-paper-rule: oklch(74% 0.018 95);
  --color-ink-text: oklch(20% 0.014 265);
  --color-ink-text-dim: oklch(40% 0.016 265);

  /* risograph inks */
  --color-signal: oklch(91% 0.19 108);
  --color-signal-2: oklch(86% 0.19 108);
  --color-signal-ink: oklch(18% 0.014 265);
  --color-pink: oklch(72% 0.20 358);
  --color-blue: oklch(66% 0.16 252);
  --color-mint: oklch(87% 0.11 165);
  --color-orange: oklch(74% 0.18 52);
  --color-klein: oklch(41% 0.23 266);
  --color-klein-2: oklch(36% 0.21 266);
  --color-ocean: oklch(22% 0.05 250);
  --color-ocean-2: oklch(28% 0.06 250);

  --color-focus: oklch(91% 0.19 108);
  --color-focus-paper: oklch(20% 0.014 265);
  --color-scrim: oklch(12% 0.012 265 / 0.72);

  /* faces */
  --font-display: "Antonio", "Arial Narrow", ui-sans-serif, sans-serif;
  --font-body: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-hand: "Gochi Hand", ui-rounded, cursive;

  /* type scale */
  --text-sm: 0.9375rem;
  --text-body: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);
  --text-lead: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);
  --text-title: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  --text-section: clamp(2.75rem, 1.6rem + 4.6vw, 6rem);
  --text-statement: clamp(2.75rem, 1.2rem + 6.4vw, 8.5rem);
  --text-display: clamp(3.5rem, 1.2rem + 8.4vw, 9rem);
  --text-scrap: clamp(1.0625rem, 0.9rem + 0.6vw, 1.5rem);
  --text-hand: clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);

  /* spacing scale */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 144px;
  --space-gutter: clamp(20px, 5vw, 64px);
  --space-section: clamp(96px, 6rem + 4vw, 176px);
  --space-section-s: clamp(72px, 4rem + 3vw, 128px);

  /* measures */
  --container: 1440px;
  --nav-h: 72px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-pill: 999px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  /* layers */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky-nav: 300;
  --z-modal: 400;
  --z-intro: 450;
  --z-grain: 500;

  color-scheme: dark;
}