/* ============================================================
   Jude & Rox — design tokens
   Palette source: Ressa Design Collective material board,
   Magari venue plan p.1 — walnut wood / mid tone limewash /
   dark green textiles. Do not add colours outside this set.
   ============================================================ */

:root {
  /* --- materials (from the board) --- */
  --walnut:        #4E3A2A;
  --walnut-light:  #7A5F47;
  --limewash:      #CFC8BA;
  --limewash-pale: #E3DDD1;
  --forest:        #37432F;
  --forest-deep:   #232C1E;
  --moss:          #66735C;

  /* --- grounds & ink --- */
  --paper:         #F5F1E6;
  --paper-2:       #ECE6D7;
  --surface:       #FBF8F1;
  --ink:           #1C1F18;
  --ink-soft:      #4A4E43;
  --muted:         #6C7063;
  --on-dark:       #EDEFE7;
  --on-dark-soft:  rgba(237, 239, 231, 0.72);

  /* --- hero scrim ---
     Weighted for a bright image: the eyebrow and date are small text
     over whatever photograph lands there, so it has to hold on a pale
     frame as well as a dark one. */
  --scrim-top:    rgba(29, 37, 25, 0.62);
  --scrim-mid:    rgba(29, 37, 25, 0.46);
  --scrim-bottom: rgba(29, 37, 25, 0.78);

  /* --- lines --- */
  --rule:          rgba(28, 31, 24, 0.17);
  --rule-soft:     rgba(28, 31, 24, 0.09);
  --rule-on-dark:  rgba(237, 239, 231, 0.22);

  /* --- type --- */
  --f-display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --f-body:    "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --f-script:  "Italianno", "Snell Roundhand", cursive;

  /* modular scale, 1.25 */
  --t-xs:   0.6875rem;  /* 11px  — labels */
  --t-sm:   0.8125rem;  /* 13px  — captions */
  --t-base: 1rem;       /* 16px  — body */
  --t-md:   1.1875rem;  /* 19px  — lede */
  --t-lg:   1.5rem;     /* 24px */
  --t-xl:   2rem;       /* 32px  — section heads */
  --t-2xl:  2.75rem;    /* 44px */

  --track-label: 0.2em;   /* uppercase label letter-spacing */
  --track-util:  0.14em;

  /* --- rhythm --- */
  --gap-xs: 0.5rem;
  --gap-sm: 1rem;
  --gap:    1.75rem;
  --gap-lg: 3rem;
  --gap-xl: 5.5rem;

  --pad-section: clamp(4.5rem, 9vw, 8rem);
  --pad-edge:    clamp(1.25rem, 5vw, 3.5rem);

  /* Edge padding that also clears the notch / home indicator. In
     landscape the notch is on the left or right, so each side is
     computed separately. env() resolves to 0 on devices without one. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --pad-l:  max(var(--pad-edge), env(safe-area-inset-left, 0px));
  --pad-r:  max(var(--pad-edge), env(safe-area-inset-right, 0px));

  --measure: 62ch;        /* running text width */
  --page:    1180px;      /* outer content max */
  --page-narrow: 720px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The site commits to one visual world — the room it invites people
   into. No dark-mode inversion: every colour below is painted
   explicitly so the page holds on any host background. */
:root { color-scheme: light; }

/* Landscape phones: a 390px-tall viewport can't afford 150px of
   section padding at every boundary, a 70px nav, or a scroll cue
   crowding the hero. Height-gated so tablets and desktops are
   untouched. */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --pad-section: clamp(2.5rem, 6vh, 3.5rem);
  }
}