/* ==========================================================================
   RITUAL — Foundation
   Tokens · reset · base type · buttons · utilities.
   Rebuilt fresh from the RITUAL by Rest & Retreat design system.
   Load this first on every page.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400&family=Marcellus&family=Marcellus+SC&display=swap');

:root {
  /* ── Core neutral palette (greige monochrome) ──────────────── */
  --parchment:    #E9E6E3;   /* default page background          */
  --off-white:    #F2F0EE;   /* cards, elevated surfaces         */
  --espresso:     #2E2C2D;   /* primary text + dark sections     */
  --espresso-2:   #3D3A3B;   /* hover on espresso fills          */
  --sand:         #B4ADA6;   /* accent, borders, badges, CTAs    */
  --sand-deep:    #A39C95;   /* hover on sand fills              */
  --sand-muted:   #5A534F;   /* captions, secondary body (AA ≥4.5:1) */
  --white:        #FFFFFF;

  /* Neutralised "sage" — kept as token names, now greige tones  */
  --sage:         #E6E3E0;   /* soft neutral surface             */

  /* Landing alternation surfaces — greige, no hue. Clearer step than
     parchment/off-white; --alt-surface-2 stays ≈parchment to preserve AA. */
  --alt-surface-1: #F4F2F0;  /* lighter step */
  --alt-surface-2: #E6E3E0;  /* deeper step  */
  --sage-deep:    #2A2827;   /* deep neutral (rare dark accent)  */
  --sage-accent:  #5E5A57;   /* eyebrow / icon                   */
  --sage-border:  #D3CEC9;

  /* Borders + foregrounds                                       */
  --border:        #B4ADA6;
  --border-light:  #D6D1CD;
  --fg-1:  var(--espresso);
  --fg-2:  var(--sand-muted);
  --fg-3:  #6A645E;
  --fg-inv-1: var(--off-white);
  --fg-inv-2: rgba(242, 240, 238, 0.62);
  --fg-inv-3: rgba(242, 240, 238, 0.32);

  /* ── Type ──────────────────────────────────────────────────── */
  --font-display: 'Marcellus', Georgia, serif;        /* headings + prices */
  --font-caps:    'Marcellus SC', 'Marcellus', serif; /* spaced labels + CTAs */
  --font-body:    'Jost', system-ui, sans-serif;      /* body + micro-copy */

  --t-hero:    clamp(2.75rem, 7vw, 6rem);
  --t-h1:      clamp(2.5rem, 5.5vw, 4.5rem);
  --t-h2:      clamp(2rem, 4vw, 3.25rem);
  --t-h3:      clamp(1.35rem, 2.4vw, 1.9rem);
  --t-lead:    clamp(1.05rem, 1.7vw, 1.3rem);
  --t-body:    1rem;
  --t-small:   0.875rem;
  --t-eyebrow: 0.72rem;
  --t-caption: 0.72rem;

  --track-tight:  0.02em;
  --track-normal: 0.05em;
  --track-wide:   0.1em;
  --track-wider:  0.18em;
  --track-widest: 0.3em;

  --lh-tight: 1.08;
  --lh-snug:  1.3;
  --lh-base:  1.75;
  --lh-loose: 1.85;

  /* ── Layout ────────────────────────────────────────────────── */
  --max-width: 1180px;
  --max-narrow: 760px;
  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --section-v: clamp(4.5rem, 9vw, 8.5rem);

  /* ── Radii — minimal, never pills ──────────────────────────── */
  --r-sm: 2px;
  --r:    4px;

  /* ── Shadow — almost flat, espresso-tinted, layered (contact + ambient) ── */
  --shadow-sm:
    0 1px 2px rgba(46, 43, 38, 0.06),
    0 4px 14px rgba(46, 43, 38, 0.08);
  --shadow-md:
    0 2px 5px rgba(46, 43, 38, 0.08),
    0 10px 32px rgba(46, 43, 38, 0.13);
  --shadow-lg:
    0 4px 10px rgba(46, 43, 38, 0.10),
    0 18px 56px rgba(46, 43, 38, 0.20);
  --focus-ring: 0 0 0 3px rgba(46, 43, 38, 0.14);

  /* Neutral separator for content images (not pure black — house law) */
  --outline-img: rgba(46, 44, 45, 0.10);

  /* ── Motion ────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fast: 0.18s;
  --slow: 0.35s;
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* The HTML `hidden` attribute must always win — otherwise display:grid/flex rules
   (e.g. .vgrid, .dash-scroll-row) leave skeleton/empty states visible. */
[hidden] { display: none !important; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background-color: var(--parchment);
  letter-spacing: 0;
  -webkit-text-size-adjust: 100%;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; transition: color var(--fast) var(--ease); }
::selection { background: var(--sand); color: var(--espresso); }

/* ── Headings ────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--fg-1);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); letter-spacing: var(--track-normal); }
h2 { font-size: var(--t-h2); letter-spacing: var(--track-normal); }
h3 { font-size: var(--t-h3); letter-spacing: var(--track-normal); }
p  { line-height: var(--lh-base); text-wrap: pretty; }

/* ── Reusable text atoms ─────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-caps);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--fg-2);
  display: block;
}
.lead {
  font-size: var(--t-lead);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}
.wordmark {
  font-family: var(--font-caps);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  padding-left: 0.3em;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.55em;
  padding: 0.95em 2.1em;
  font-family: var(--font-caps);
  font-size: 0.74rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease),
              transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.96); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.btn--primary { background: var(--espresso); border-color: var(--espresso); color: var(--off-white); }
.btn--primary:hover { background: var(--espresso-2); border-color: var(--espresso-2); }
.btn--gold { background: var(--sand); border-color: var(--sand); color: var(--espresso); }
.btn--gold:hover { background: var(--sand-deep); border-color: var(--sand-deep); }
.btn--outline { background: transparent; border-color: var(--espresso); color: var(--espresso); }
.btn--outline:hover { background: var(--espresso); color: var(--off-white); }
.btn--ghost { background: transparent; border-color: rgba(245,242,236,0.4); color: var(--off-white); }
.btn--ghost:hover { background: rgba(245,242,236,0.08); border-color: rgba(245,242,236,0.85); }
.btn--lg { padding: 1.1em 2.6em; font-size: 0.78rem; }
.btn--block { width: 100%; }

/* ── Layout helpers ──────────────────────────────────────────── */
.section { padding: var(--section-v) var(--gutter); }
.inner { max-width: var(--max-width); margin: 0 auto; }
.inner--narrow { max-width: var(--max-narrow); margin: 0 auto; }
.bg-parchment { background: var(--parchment); }
.bg-off-white { background: var(--off-white); }
.bg-espresso  { background: var(--espresso); color: var(--off-white); }
.bg-alt-1     { background: var(--alt-surface-1); }
.bg-alt-2     { background: var(--alt-surface-2); }
.bg-sage      { background: var(--sage); }
.text-center  { text-align: center; }
/* Equal-width digits for any dynamic number (prices, stats, timestamps) — no layout shift */
.tabular-nums { font-variant-numeric: tabular-nums; }
/* Subtle edge depth on content images (thumbnails, photos). Opt-in — not on logos/icons. */
.img-outline  { outline: 1px solid var(--outline-img); outline-offset: -1px; }

/* ── Cross-page transition (View Transitions API) ────────────── */
/* Progressive enhancement: supporting browsers crossfade between pages
   instead of a hard white cut; others keep today's behaviour. */
@view-transition { navigation: auto; }

/* ── Reveal-on-scroll ────────────────────────────────────────── */
/* Hidden-before-reveal styles are gated on `.has-motion`, which the reveal
   JS sets on <html> when it initialises — with JS disabled (or failed),
   in print, and to crawlers every section is fully visible. */
.has-motion [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(4px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease), filter var(--slow) var(--ease);
  will-change: opacity, transform;
}
.has-motion [data-reveal].is-in { opacity: 1; transform: none; filter: blur(0); }
.has-motion [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(4px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease), filter var(--slow) var(--ease);
}
[data-reveal-group].is-in > * { opacity: 1; transform: none; filter: blur(0); }
[data-reveal-group].is-in > *:nth-child(2) { transition-delay: 0.08s; }
[data-reveal-group].is-in > *:nth-child(3) { transition-delay: 0.16s; }
[data-reveal-group].is-in > *:nth-child(4) { transition-delay: 0.24s; }
[data-reveal-group].is-in > *:nth-child(5) { transition-delay: 0.32s; }
[data-reveal-group].is-in > *:nth-child(6) { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; filter: none !important; }
  .toast, .toast.toast-hiding, .player-modal-overlay { transition: none !important; transform: none !important; }
  .btn:active { transform: none !important; }
  html { scroll-behavior: auto; }
  /* Page navigations cut instantly instead of crossfading. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}