/* ══════════════════════════════════════════════════════════════
   ONE LUNAR DAY — design tokens
   Every colour, size, rhythm and easing in the site is declared here.
   Nothing downstream should hardcode a value.
   ══════════════════════════════════════════════════════════════ */

/* ── typefaces ─────────────────────────────────────────────── */

@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-var.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── colour ───────────────────────────────────────────────
     Committed single palette. The ground is near-black rather than
     pure black so the photographs' own blacks still read as black
     against it. The ink is warm bone, not white: the band photos are
     neutral silver-grey, and a warm type colour keeps the page from
     going clinical.                                                  */
  --ground:        #050505;
  --ground-raised: #0B0B0A;
  --ink:           #EDEAE4;
  --ink-dim:       #8B8880;   /* grey biased warm, toward the ink */
  --ink-faint:     #56544F;
  --hairline:      rgb(237 234 228 / 0.13);
  --hairline-soft: rgb(237 234 228 / 0.07);
  --scrim:         rgb(5 5 5 / 0.62);
  /* Cold pale tint, reserved exclusively for focus and hover states.
     The only non-neutral in the system — used at most a few px at a time. */
  --signal:        #A9BAC6;

  /* ── type families ───────────────────────────────────────── */
  --font-display: "Bodoni Moda", Didot, "Bodoni 72", "Times New Roman", serif;
  --font-ui:      "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  /* ── type scale ───────────────────────────────────────────
     Display sizes are viewport-relative so headlines stay edge-to-edge
     from 375px to 2560px. Caption sizes stay fixed — the contrast
     between colossal and tiny is the whole editorial effect.          */
  --fs-cover:   clamp(3.25rem, 15vw, 16rem);
  --fs-display: clamp(2.25rem, 8vw, 7.5rem);
  --fs-title:   clamp(1.75rem, 4.6vw, 4rem);
  --fs-lead:    clamp(1.0625rem, 1.5vw, 1.375rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-caption: 0.6875rem;

  --lh-cover: 0.86;
  --lh-tight: 1.06;
  --lh-body:  1.8;

  --tr-caption: 0.28em;   /* tracking for tiny uppercase labels */
  --tr-nav:     0.22em;

  /* ── spacing & rhythm ─────────────────────────────────────── */
  --gutter:     clamp(1.5rem, 5.5vw, 6.5rem);
  --section-y:  clamp(5rem, 16vh, 12rem);
  --stack-sm:   clamp(1rem, 2vh, 1.5rem);
  --stack-md:   clamp(2rem, 5vh, 3.5rem);
  --stack-lg:   clamp(3rem, 9vh, 6rem);
  --measure:    62ch;

  /* ── motion ───────────────────────────────────────────────
     Long, decelerating, no overshoot. Nothing springs or bounces.     */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-fast:  360ms;
  --dur-mid:   720ms;
  --dur-slow:  1200ms;
  --dur-cover: 1600ms;

  --z-grain: 90;
  --z-nav:   100;
}