/* Orvel design tokens — every design value lives here.
   Fonts: <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Onest:wght@400;500;600&display=swap" rel="stylesheet"> */
:root {
  /* ── Surfaces ── */
  --bg: #FFFFFF;            /* page */
  --surface: #FBF8F7;       /* stat cards, explore card, warm panels */
  --surface-2: #F0EBEA;     /* icon wells, "View" chip, form fields */
  --night: #1A1A1A;         /* footer band */
  --night-2: #262626;       /* lines and fields on night */
  --scrim: rgba(0, 0, 0, 1);/* hero bottom fade (used in a gradient) */

  /* ── Text ── */
  --ink: #31190B;           /* espresso: headings, body, labels (brand slot: deep) */
  --ink-rgb: 49, 25, 11;
  --text-2: #3B3B3B;        /* secondary lines (testimonial role, legal) */
  --on-dark: #FFFFFF;
  --on-dark-2: rgba(255, 255, 255, .72);
  --ghost: rgba(var(--ink-rgb), .1); /* giant background words */

  /* ── Lines ── */
  --line: rgba(var(--ink-rgb), .12);
  --line-dark: rgba(255, 255, 255, .16);

  /* ── Brand / accent ── */
  --accent: #31190B;        /* dark buttons, bullets, dots (brand slot: primary) */
  --accent-rgb: 49, 25, 11;
  --on-accent: #FFFFFF;
  --accent-soft: #F0EBEA;   /* chip / icon wells (brand slot: primary-soft) */
  --btn-light: #FFFFFF;     /* light buttons on photos */
  --btn-light-ink: #1A1A1A;

  /* ── Data / status ── */
  --star: #FB9F33;          /* review stars only */
  --success: #2F7D4F; --warning: #B7791F; --danger: #B3261E; --info: #2B5C8A;

  /* ── Fonts ── */
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Radii ── */
  --r-xs: 4px;   /* icon wells */
  --r-sm: 6px;   /* "View" chip */
  --r-img: 8px;  /* every photo */
  --r: 12px;     /* buttons, cards */
  --r-lg: 16px;  /* menu panel */
  --r-pill: 9999px;

  /* ── Spacing / layout ── */
  --container: 1360px;
  --gutter: 40px;           /* page side margin at 1440 */
  --section: 65px;          /* section top/bottom padding */
  --section-lg: 130px;      /* first section after the hero, last before footer */
  --gap-col: 80px;          /* photo ↔ text column gap */
  --gap-block: 120px;       /* between blocks inside a section */
  --btn-h: 54px;

  /* ── Shadows ── */
  --shadow-1: 0 1px 2px rgba(var(--ink-rgb), .06);
  --shadow-2: 0 24px 60px -24px rgba(0, 0, 0, .35);

  /* ── Motion ── */
  --ease: cubic-bezier(.25, .46, .45, .94);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .6s;
  --dur-fast: .35s;
}
@media (max-width: 1023px) { :root { --gutter: 28px; --section: 56px; --section-lg: 96px; --gap-col: 48px; --gap-block: 80px; } }
@media (max-width: 767px)  { :root { --gutter: 20px; --section: 36px; --section-lg: 60px; --gap-col: 30px; --gap-block: 40px; } }

/* ── Type scale ── */
.t-display { font: 400 110px/1.05 var(--font-display); letter-spacing: -2px; }           /* hero headline */
.t-ghost   { font: 400 300px/1.2 var(--font-display); letter-spacing: 0; color: var(--ghost); } /* giant background word */
.t-h1      { font: 400 72px/1.15 var(--font-display); letter-spacing: -1px; }           /* statement line, big numbers */
.t-h2      { font: 400 56px/1.2 var(--font-display); letter-spacing: -1.5px; }          /* section headings, menu links */
.t-h3      { font: 400 48px/1.4 var(--font-display); letter-spacing: -1px; }            /* card titles, testimonial quote */
.t-lead    { font: 400 24px/1.4 var(--font); letter-spacing: -.5px; }
.t-big     { font: 400 24px/1.28 var(--font); letter-spacing: -.48px; }                 /* footer links */
.t-body    { font: 400 16px/1.7 var(--font); }
.t-strong  { font: 500 18px/1.7 var(--font); }
.t-small   { font: 400 14px/1.36 var(--font); }
.t-label   { font: 400 14px/1.7 var(--font); text-transform: uppercase; }              /* eyebrow labels, in a narrow column */
@media (max-width: 1023px) {
  .t-display { font-size: 80px; } .t-ghost { font-size: 200px; } .t-h1 { font-size: 52px; }
  .t-h2 { font-size: 44px; } .t-h3 { font-size: 36px; }
}
@media (max-width: 767px) {
  .t-display { font-size: 56px; line-height: 1.05; letter-spacing: -1.5px; } .t-ghost { font-size: 84px; } .t-h1 { font-size: 37px; letter-spacing: 0; }
  .t-h2 { font-size: 36px; letter-spacing: -1px; } .t-h3 { font-size: 25px; line-height: 1.4; } .t-lead { font-size: 16px; line-height: 1.6; }
}

/* ── Motion off: reduced motion + ?static (the JS adds .static to <html>) ── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.static *, .static *::before, .static *::after { transition: none !important; animation: none !important; }