/* M Sphinx — design tokens v2 (DESIGN-DIRECTION.md). Every module reads from here. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=Rokkitt:wght@500;700;800&family=Noto+Sans+Egyptian+Hieroglyphs&display=swap');

:root {
  /* Basalt (≈65% of the page) */
  --ink-0: #070605;        /* page */
  --ink-1: #110d0b;        /* raised */
  --ink-2: #1e1914;        /* cards */
  --line: rgba(220, 181, 109, .16);

  /* Gold ≤ 5%: logo, cartouche, foil, one gold phrase per screen */
  --gold: #dcb56d;
  --gold-hi: #f3dca6;
  --gold-lo: #8f6a2e;      /* "bronze": gold on papyrus */

  /* Ember lives in the photos; use as flat colour almost never */
  --ember: #d4562a;
  --wine: #5b1717;

  --cream: #f2eadf;
  --mute: #b3a99c;

  /* Papyrus (≈20%, two light blocks only) */
  --papyrus: #efe4cf;
  --papyrus-2: #e6d7bb;
  --ink-text: #1d1814;
  --ink-mute: #5c5248;

  /* Type. Ed wants Egyptienne (Condensed, caps). Rokkitt is the free stand-in (has Vietnamese). Swap here only. */
  --font-display: 'Egyptienne Com Bold Condensed', 'Egyptienne F', 'Rokkitt', 'Roboto Slab', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-glyph: 'Noto Sans Egyptian Hieroglyphs', serif;

  --fs-hero: clamp(64px, 11vw, 176px);
  --fs-h2: clamp(48px, 8vw, 136px);
  --fs-h3: clamp(28px, 2.6vw, 40px);
  --fs-lead: clamp(19px, 1.5vw, 22px);
  --fs-body: clamp(17px, 1.15vw, 19px);
  --fs-small: 14px;
  --lh-display: .88;

  /* Layout: 12 columns, max 1440 */
  --gutter: clamp(16px, 4vw, 64px);
  --max: 1440px;
  --col-gap: clamp(12px, 1.6vw, 28px);
  --section-y: clamp(96px, 12vw, 200px);

  /* Shapes. The temple arch is the ONE motif, for photos of people only. */
  --arch: 50% 50% 0 0 / 30% 30% 0 0;
  --radius: 2px;

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-text: cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);   /* used by the deck: lift, deal, flip */
  --dur: .9s;
  --dur-img: 1.2s;
  --dur-hover: .35s;

  --z-header: 50;
  --z-drawer: 90;
  --z-modal: 100;
}