/* ============================================================
   TOKENS — verbatim from the source design language
   ============================================================ */
:root {
  --canvas:       oklch(95.9% 0.008 79);
  --canvas-card:  oklch(99.5% 0.004 79);
  --accent:       oklch(52% 0.145 152);
  --accent-deep:  oklch(45% 0.122 152);
  --band:         oklch(26% 0.048 168);
  --band-mid:     oklch(34% 0.050 168);
  --band-deep:    oklch(20% 0.042 168);
  --gold:         oklch(72% 0.105 73);
  --ink:          oklch(24% 0.022 55);
  --ink-soft:     oklch(44% 0.027 58);
  --on-dark:      oklch(95.9% 0.008 79);
  --on-dark-soft: oklch(95.9% 0.008 79 / 0.70);
  --serif:        "Fraunces", serif;
  --sans:         "Karla", sans-serif;
  --ease-out:     cubic-bezier(.22,.9,.28,1);
  --ease-soft:    cubic-bezier(.4,.05,.2,1);
  --hairline:     oklch(24% 0.022 55 / 0.14);
  --section-y:    clamp(5rem, 11vw, 8.5rem);
  --z-content:    2;
}

/* ─── Reset ──────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* clip (not hidden) blocks sideways panning on mobile Safari without
   creating a second scroll container */
html { overflow-x: clip; }
body {
  font-family: var(--sans);
  background: var(--canvas);
  color: var(--ink);
  line-height: 1.6;
  font-size: 1rem;
  overflow-x: hidden;
  font-kerning: normal;
}
h1, h2, h3, h4 { font-optical-sizing: auto; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
::selection { background: var(--accent); color: var(--canvas); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hero :focus-visible,
.ritual :focus-visible,
.signup :focus-visible,
.footer :focus-visible,
.nav:not(.scrolled) :focus-visible {
  outline-color: var(--gold);
}

.skip-link {
  position: absolute; left: -9999px; top: 1rem; z-index: 9999;
  padding: .6rem 1.2rem; background: var(--accent); color: var(--canvas);
  border-radius: 99px; font: 600 .8rem var(--sans);
  letter-spacing: .12em; text-transform: uppercase;
}
.skip-link:focus { left: 1rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
}

/* ─── Grain overlay ──────────────────── */
/* .grain is oversized so its shift animation never exposes an edge, but a
   fixed element is clipped by NOTHING — not even body{overflow-x:hidden} —
   so on iOS Safari the page could be panned sideways to reach it. The
   .grain-clip wrapper pins a viewport-sized clipping box around it. */
.grain-clip {
  position: fixed; inset: 0; overflow: clip;
  pointer-events: none; z-index: 120;
}
.grain {
  position: absolute; inset: -50%; width: 200%; height: 200%;
  pointer-events: none; opacity: .07; will-change: transform;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  animation: grainShift 1.2s steps(4) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-2%,1.5%); }
  50%  { transform: translate(1.5%,-1%); }
  75%  { transform: translate(-1%,-2%); }
  100% { transform: translate(0,0); }
}

/* ─── Blob frame — shared organic photo/decoration treatment ─ */
.blob-frame {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 46% 54% 52% 48% / 55% 47% 53% 45%;
  animation: blobMorph 18s ease-in-out infinite alternate;
}
.blob-frame.offscreen { animation-play-state: paused; }
@keyframes blobMorph {
  0%   { border-radius: 46% 54% 52% 48% / 55% 47% 53% 45%; }
  33%  { border-radius: 56% 44% 42% 58% / 45% 58% 42% 55%; }
  66%  { border-radius: 44% 56% 58% 42% / 58% 44% 56% 44%; }
  100% { border-radius: 52% 48% 44% 56% / 48% 54% 46% 54%; }
}

/* ─── Scroll reveal ──────────────────── */
.reveal {
  opacity: 0; transform: translateY(34px);
  transition: opacity .95s var(--ease-out), transform 1.05s var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }

/* ─── Kickers ────────────────────────── */
.sec-kicker {
  display: inline-flex; align-items: center; gap: .7rem;
  font: 600 .75rem var(--sans); letter-spacing: .30em;
  text-transform: uppercase; color: var(--accent-deep); margin-bottom: 1rem;
}
.sec-kicker::before {
  content: ""; width: 2rem; height: 1px; background: var(--accent); flex-shrink: 0;
}
.sec-kicker--dark { color: var(--gold); }
.sec-kicker--dark::before { background: var(--gold); }

.section-title {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  font-weight: 300; line-height: 1.08; letter-spacing: -.01em;
  margin-bottom: 1.2rem; text-wrap: balance;
}
.section-title em { font-style: italic; color: var(--accent); }
.section-title--dark { color: var(--on-dark); }
.section-title--dark em { color: var(--gold); }

.section-intro {
  font-size: 1.05rem; color: var(--ink-soft);
  max-width: 560px; margin: 0 auto; line-height: 1.65;
}
.section-intro--dark { color: var(--on-dark-soft); line-height: 1.7; }
.section-header { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ─── Buttons ────────────────────────── */
.btn-solid, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .95rem 1.9rem; border-radius: 99px;
  font: 600 .8rem/1 var(--sans); letter-spacing: .16em;
  text-transform: uppercase; cursor: pointer; border: none;
}
.btn-solid {
  background: var(--accent); color: var(--canvas);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .3s, color .3s;
}
.btn-solid:hover {
  background: var(--accent-deep); transform: translateY(-3px);
  box-shadow: 0 14px 28px -12px oklch(52% 0.145 152 / 0.45);
}
.btn-solid:active { transform: translateY(1px); transition-duration: .08s; }
.btn-solid--gold { background: var(--gold); color: var(--band-deep); }
.btn-solid--gold:hover { background: oklch(78% 0.105 73); box-shadow: 0 14px 28px -12px oklch(72% 0.105 73 / 0.4); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1.5px solid oklch(24% 0.022 55 / 0.28);
  transition: transform .35s var(--ease-out), border-color .3s, color .3s;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); }
.btn-ghost--dark { color: var(--on-dark); border-color: oklch(95.9% 0.008 79 / 0.35); }
.btn-ghost--dark:hover { border-color: var(--gold); color: var(--gold); }