/* Glass and Grit — design tokens. Colours are sampled from the logo (parchment, ink, bandana red) and from
   the oak table his work is photographed on. Brass is for the wood; red only ever sits on parchment. */
:root {
  /* Dark stage and oak */
  --stage-950: #0e0805;
  --stage-900: #140c07;   /* page */
  --stage-800: #1c120a;
  --oak-700: #341e0f;
  --oak-500: #6f4a25;
  --oak-400: #936c40;

  /* Brass: on oak and the dark stage only (7:1 and up) */
  --brass-500: #c8963e;
  --brass-300: #e8c877;
  --brass-glow: rgba(232, 200, 119, 0.28);

  /* Parchment and ink, from the logo */
  --parchment: #e4cb93;
  --cream: #f1e3be;
  --cream-soft: #e2d3ae;   /* body text on dark */
  --ink-900: #190b04;
  --ink-700: #422111;
  --muted-cream: #5b4630;  /* small text on parchment */
  --muted-dark: #c2ad83;   /* small text on dark */

  /* Tattoo red: parchment only, display sizes or ornament */
  --red-500: #b3282d;

  /* Frosted engraving */
  --frost: rgba(255, 255, 255, 0.85);

  /* Hairlines */
  --line-dark: rgba(241, 227, 190, 0.16);
  --line-dark-strong: rgba(241, 227, 190, 0.34);
  --line-ink: rgba(25, 11, 4, 0.22);

  /* Type */
  --font-western: 'Rye', 'Western Fallback', Georgia, serif;
  --font-slab: 'Alfa Slab One', 'Slab Fallback', Georgia, serif;
  --font-body: 'Bitter', 'Body Fallback', Georgia, serif;

  --fs-display: clamp(2.5rem, 1.15rem + 5.6vw, 5.75rem);
  --fs-h2: clamp(2rem, 1.2rem + 3.4vw, 4rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --lh-display: 1.02;
  --lh-heading: 1.06;
  --lh-body: 1.6;
  --track-eyebrow: 0.14em;

  /* Space */
  --gutter-x: clamp(1rem, 4.5vw, 4rem);
  --gap: clamp(1rem, 2vw, 2rem);
  --wrap: 1280px;
  --chapter-y: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --nav-h: 64px;
  --radius: 14px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 0.25s;
  --dur-hover: 0.45s;

  /* Layers */
  --z-bar: 50;
  --z-skip: 100;
}

@media (min-width: 900px) {
  :root { --nav-h: 76px; }
}