/* Design tokens — mirrors design/DESIGN.md. Never hard-code a value elsewhere; add it here. */
:root {
  /* color primitives */
  --ink: #201f1d;
  --warm-gray: #59544d;
  --warm-gray-muted: #76716a;
  --white: #ffffff; /* page bg — Poeza's white (Faysal, 2026-08-15; supersedes warm ivory) */
  --paper: #f6f1e7; /* warm ivory — lives on as the on-dark text tone over photography */
  --greige: #e9e2d3;

  /* color semantics */
  --color-bg: var(--white);
  --color-surface: var(--greige);
  --color-text-primary: var(--warm-gray);
  --color-text-strong: var(--ink);
  --color-text-muted: var(--warm-gray-muted);
  --color-line-hairline: #cfc8c0; /* resting underline on clickable answers (appointment panel) */
  --color-border: rgba(32, 31, 29, 0.12);
  --color-on-dark: var(--paper);
  --color-veil: rgba(255, 255, 255, 0.45); /* page bg at 45% — quiets photography under video */

  /* type */
  --font-display: 'Times New Roman', Times, serif;
  --font-support: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  --size-display: clamp(4.375rem, 3rem + 6vw, 9.375rem); /* 70px -> 150px */
  --size-support: 0.75rem; /* 12px, fixed, never scales */
  --lh-display: 0.8;
  --lh-support-label: 1.5;
  --lh-support-statement: 1.67;
  --tracking-display: 0.008em;
  --tracking-label: 0.1em;
  --tracking-statement: 0.05em;

  /* spacing (base 4px) */
  --s-1: 8px;
  --s-2: 12px;
  --s-3: 16px;
  --s-4: 20px;
  --s-5: 32px;
  --s-6: 56px;
  --s-7: 96px;
  --s-8: 100px;
  --s-9: 128px;

  /* layout */
  --container-max: 1440px;
  --column-narrow: 572px;

  /* phone display size: poezabride.com drops its display to ~55px at 375px and lets
     statements stack as short wrapped lines. Ours must also fit the unbreakable word
     "APPOINTMENT." (needs ≤46px at 375px, ≤39px at 320px), hence 12vw — the ramp meets
     the 70px desktop floor at ~583px, so the override applies up to 600px. */
  --size-display-phone: clamp(2.25rem, 12vw, 4.375rem);

  /* serif moments + long-form reading. The landing scroll keeps its two-size binary
     (12px / kinetic display); these exist only off the main scroll: the finale line,
     the maison/appointment titles, and the Maison page's reading text. */
  --size-serif-moment: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --size-body: 1.0625rem; /* 17px */
  --lh-body: 1.75;

  /* layered-frames composition (Faysal 2026-08-18): concentric rectangles built by
     CONSTANT per-axis gaps — every step (backdrop→1, 1→2, 2→3) shrinks by the same
     --layered-gap-x on each side and the same --layered-gap-y on top/bottom, so the
     visible margin between successive layers is identical on both axes, background
     included. This regularizes Poeza's rhythm (its own steps drift) per Faysal's ask.
     --layered-inset = the white page margin around the backdrop (Poeza: ~45px @1440).
     Gap values are derived from poeza-1440-s7400 layer proportions (frame3 ≈ 0.36 of
     backdrop width, ≈ 0.31 of its height). */
  --layered-inset: clamp(0.75rem, 3vw, 3rem);
  --layered-gap-x: 10vw;
  --layered-gap-y: 10vh;

  /* motion */
  --ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --transition-standard: 0.4s ease-in-out;
}

/* Phones: the backdrop is a tall rectangle, so a smaller x-gap keeps the inner
   frames from collapsing to slivers while the y-gap carries the concentric rhythm. */
@media (max-width: 767px) {
  :root {
    --layered-gap-x: 9vw;
    --layered-gap-y: 8vh;
  }
}