/* Fonts are self-hosted (assets/fonts). TT Firs Neue and TT Firs Neue Trl: OnlineWebFonts.com, CC BY 4.0. Inter: SIL OFL. */
@font-face { font-family: 'TT Firs Neue'; font-style: normal; font-weight: normal; font-display: swap;
  src: url('./assets/fonts/tt-firs.woff2') format('woff2'), url('./assets/fonts/tt-firs.woff') format('woff'); }
@font-face { font-family: 'TT Firs Neue Trl'; font-style: normal; font-weight: normal; font-display: swap;
  src: url('./assets/fonts/tt-trl.woff2') format('woff2'), url('./assets/fonts/tt-trl.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('./assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('./assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #4b2a86;
  --bg-deep: #2e1758;
  --bg-mid: #5b34a3;
  --bg-glow: #7143c4;
  --tint-rgb: 58, 26, 112;
  --bg-rgb: 75, 42, 134;
  --accent: #a57cf4;
  --ink-soft: #5a3596;
  --card: #f5f0ff;
  --card-ink: #3b1478;
  --item-ink: #634b92;
  --dial: #8b5cf6;
  /* Materials. Heavier = larger or more structural surface. All are a white sheen on a purple-tinted base, so
     white text keeps 4.5:1 even over the brightest cloud. Never stack one glass on another (see .panel .panel). */
  --glass: linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 100%), rgba(var(--tint-rgb), 0.55);
  --glass-thick: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 100%), rgba(var(--tint-rgb), 0.76);
  --edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.36);   /* bright top edge: light catching the material */
  --edge-ring: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  --white: #fff;

  --font-display: 'TT Firs Neue', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'TT Firs Neue Trl', 'Helvetica Neue', Arial, sans-serif;
  --font-inter: 'Inter', system-ui, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);
  /* Critically damped spring (damping 1.0, response 0.35s), sampled for CSS. Pair with ~0.5s. Falls back to --ease. */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  /* Interaction timing, shared by every page (CSS transitions) and mirrored in main.js (PSSM.press / PSSM.spring).
     Press-in is instant and short; hover colour/shadow/opacity is quick; transform uses the spring curve over ~0.5s. */
  --dur-press: 90ms;      /* :active transition and the minimum visible hold of a press */
  --dur-hover: 0.25s;     /* colour, background, shadow, opacity on hover / focus */
  --dur-spring: 0.5s;     /* transform on --ease-spring (a critically damped spring has settled by ~0.5s) */
  --dur-slow: 0.7s;       /* large photo scale on hover */
  /* Hover lift scales with the surface: small controls rise least. */
  --lift-s: -2px;
  --lift-m: -3px;
  --lift-l: -4px;
  --radius-card: clamp(24px, 3vw, 28px);
  --gutter: clamp(16px, 4vw, 40px);

  /* Size-specific tracking: tighter as type grows, ~0 for body, open for small caps. */
  --track-hero: -0.05em;     /* 80px and up */
  --track-display: -0.04em;  /* 36 to 80px */
  --track-title: -0.03em;    /* 22 to 36px */
  --track-body: 0;           /* 14 to 22px running text */
  --track-small: 0.02em;     /* 11 to 13px sentence case */
  --track-caps: 0.14em;      /* small uppercase labels */
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --ease-spring: linear(0, 0.055, 0.173, 0.309, 0.441, 0.558, 0.656, 0.736, 0.8, 0.849, 0.887, 0.916, 0.938, 0.955, 0.967, 0.976, 0.982, 0.987, 0.991, 0.993, 0.995, 0.997, 0.998, 0.998, 1); }
}

* { box-sizing: border-box; }
html { background-color: var(--bg-deep); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; scroll-behavior: smooth; }
body {
  background: transparent;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; border-radius: 12px; }
/* No 300ms tap delay on anything pressable; press feedback itself comes from main.js (initPress). */
a, button, [role='button'], summary, label, input, select, textarea, [data-press] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* Anchored sections clear the floating nav. Zero specificity, so a page's own scroll-margin wins. */
:where(main [id]) { scroll-margin-top: 88px; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(165, 124, 244, 0.45); border-radius: 99px; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--white); color: var(--ink-soft); padding: 10px 14px; border-radius: 10px; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Sky: fixed cloud field behind the whole page ---------- */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, var(--bg-mid) 0%, var(--bg) 50%, var(--bg-deep) 100%); }
/* Single veil over the clouds. It is viewport-fixed, so it is identical behind every section:
   the page never shows a band where one section's tint stops and the next begins. */
.sky::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, rgba(var(--bg-rgb), 0.28) 0%, rgba(var(--tint-rgb), 0.5) 100%); }
.sky__par { position: absolute; inset: 0; will-change: transform; }
/* Feathered on all four sides so the image rectangle never shows a seam while it drifts. */
.sky__cloud { position: absolute; max-width: none; height: auto; will-change: transform;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
          mask-composite: intersect; }
.sky__cloud--far  { width: 120vmax; left: -10vmax; top: -30vmax; opacity: 0.35; animation: drift-a 90s ease-in-out infinite alternate; }
.sky__cloud--mid  { width: 105vmax; left: -35vmax; top: 6vmax;   opacity: 0.45; animation: drift-b 70s ease-in-out infinite alternate; transform: scaleX(-1); }
.sky__cloud--near { width: 130vmax; left: -20vmax; bottom: -62vmax; opacity: 0.6; animation: drift-a 55s ease-in-out infinite alternate-reverse; }
@keyframes drift-a { from { translate: -4vw 0; } to { translate: 6vw 0; } }
@keyframes drift-b { from { translate: 5vw 0; } to { translate: -5vw 0; } }

/* ---------- Buttons ----------
   Press feedback (scale + slight darkening, on pointer-down) is driven by main.js so it can be
   interrupted and sprung back from wherever it is. The :active rule below is only the no-JS fallback. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border-radius: 12px;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em;
  transition: opacity var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease);
}
html:not(.js-press) .btn:active { transform: scale(0.97); filter: brightness(0.94); }
.btn--white { background: var(--white); color: var(--ink-soft); }
/* Deep ink on lilac: 4.9:1 (white on the lilac is 3.1:1, below AA for 13px text). */
.btn--accent { background: var(--accent); color: var(--bg-deep); }
.btn--ghost { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); color: var(--white); }
@media (hover: hover) {
  .btn--white:hover { background: rgba(255, 255, 255, 0.9); }
  .btn--accent:hover { opacity: 0.9; }
  .btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }
}

/* ---------- Nav ----------
   Top of page: a transparent bar over the hero. After ~64px of scroll main.js floats it: a heavy glass
   material materializes behind the SAME content (--mat 0 to 1 drives blur, scale and opacity together),
   so nothing reflows when the state changes. main.js lifts the bar out of the hero (so it can sit above
   every section) and adds .is-fixed; without JS it stays an absolute bar inside the hero. */
.nav { --mat: 0; --bleed: clamp(8px, calc(var(--gutter) - 8px), 16px);
  position: absolute; inset: 0 0 auto 0; z-index: 50;
  padding: max(clamp(20px, 2vw, 24px), env(safe-area-inset-top)) var(--gutter) 0; }
.nav.is-fixed { position: fixed; }
/* The bar spans the full width and sits above everything: only the controls themselves take the pointer, so the
   transparent strip around the pill never swallows clicks meant for the page underneath. */
.nav { pointer-events: none; }
.nav__inner, .nav__menu { pointer-events: auto; }
.nav__inner { position: relative; max-width: 80rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav__inner::before { content: ''; position: absolute; z-index: -1; inset: -8px calc(var(--bleed) * -1); border-radius: 22px; pointer-events: none;
  background: var(--glass-thick);
  box-shadow: var(--edge-top), var(--edge-ring), 0 22px 44px -18px rgba(var(--tint-rgb), 0.9), 0 2px 8px rgba(var(--tint-rgb), 0.35);
  -webkit-backdrop-filter: blur(calc(var(--mat) * 20px)) saturate(calc(1 + var(--mat) * 0.6));
          backdrop-filter: blur(calc(var(--mat) * 20px)) saturate(calc(1 + var(--mat) * 0.6));
  opacity: var(--mat); transform: scale(calc(0.94 + var(--mat) * 0.06)); transform-origin: 50% 0; }
.nav__logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: var(--track-small); line-height: 1.15; }
.nav__logo img { width: 52px; height: auto; background: var(--white); border-radius: 12px; padding: 4px; }
.nav__links { display: none; gap: 8px; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  display: block; padding: 12px 18px; background: var(--white); border-radius: 12px;
  color: var(--ink-soft); font-family: var(--font-body); font-size: 11px; text-transform: uppercase; letter-spacing: var(--track-caps);
  transition: background-color var(--dur-hover) var(--ease);
}
@media (hover: hover) { .nav__links a:hover { background: rgba(255, 255, 255, 0.88); } }
.nav__cta { display: none; }
.nav__burger { width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; border-radius: 12px; }
.nav__burger span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: transform 0.35s var(--ease-ui), opacity 0.35s var(--ease-ui); }
.nav[data-open='true'] .nav__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav[data-open='true'] .nav__burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav[data-open='true'] .nav__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* Mobile menu: a thick material anchored to the burger. It grows from the burger (--ox/--oy are set by main.js
   from the burger's rect) and leaves along the same path. Blur, scale and opacity arrive together. */
.nav__menu {
  position: absolute; left: 20px; right: 20px; top: calc(100% + 14px);
  background: var(--glass-thick);
  box-shadow: var(--edge-top), var(--edge-ring), 0 30px 60px -24px rgba(var(--tint-rgb), 0.95);
  -webkit-backdrop-filter: blur(6px) saturate(1); backdrop-filter: blur(6px) saturate(1);
  border-radius: 20px; overflow: hidden; opacity: 0; visibility: hidden;
  transform: scale(0.88); transform-origin: var(--ox, calc(100% - 18px)) var(--oy, -30px);
  /* Leaving: quicker than arriving. visibility keeps closed links out of the Tab order. */
  transition: transform 0.3s var(--ease-spring), opacity 0.2s linear, -webkit-backdrop-filter 0.3s var(--ease-spring), backdrop-filter 0.3s var(--ease-spring), visibility 0s linear 0.3s;
}
.nav[data-open='true'] .nav__menu { opacity: 1; visibility: visible; transform: none;
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  transition: transform 0.5s var(--ease-spring), opacity 0.25s linear, -webkit-backdrop-filter 0.5s var(--ease-spring), backdrop-filter 0.5s var(--ease-spring), visibility 0s; }
.nav__menu ul { list-style: none; margin: 0; padding: 12px; display: grid; gap: 4px; }
.nav__menu li { opacity: 0; transform: translateY(-6px); transition: opacity 0.18s linear, transform 0.25s var(--ease-spring); }
.nav[data-open='true'] .nav__menu li { opacity: 1; transform: none; transition: opacity 0.3s linear, transform 0.5s var(--ease-spring); transition-delay: calc(var(--i) * 35ms + 60ms); }
.nav__menu a:not(.btn) { display: block; padding: 12px; font-family: var(--font-body); font-size: 13px; text-transform: uppercase; letter-spacing: var(--track-caps); border-radius: 10px; }
@media (hover: hover) { .nav__menu a:not(.btn):hover { background: rgba(255, 255, 255, 0.1); } }
.nav__menu .btn { width: 100%; margin-top: 6px; }
@media (min-width: 900px) {
  .nav__links, .nav__cta { display: flex; }
  .nav__burger, .nav__menu { display: none; }
}

/* ---------- Hero ---------- */
.hero { position: relative; display: flex; flex-direction: column; min-height: 100svh; background: var(--bg-deep); overflow: hidden; isolation: isolate; }
/* Video is portrait 1080x1920; the meditator sits ~62% down. Focus the crop on him. */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; pointer-events: none; }
/* Bottom of hero dissolves into the sky: the hero's own layers fade to transparent (mask),
   so whatever the sky shows below continues straight through. */
.hero::after { content: none; }
.hero { background: none; }
/* Background layers only (video, gradient, egg, clouds) are masked; the hero's text never fades. */
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg-deep);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%); }
.hero__bg .hero__egg { pointer-events: auto; }
/* Landscape screens: the portrait video would be cropped to a thin, zoomed slice with `cover`.
   Show the whole frame instead, centered, and fade its edges into the page purple. */
@media (min-aspect-ratio: 1/1) {
  .hero__bg { background: radial-gradient(90% 70% at 50% 45%, #6a3fb8 0%, var(--bg) 55%, var(--bg-deep) 100%); }
  .hero__video { inset: 0 auto 0 50%; width: auto; height: 100%; max-width: none; aspect-ratio: 9 / 16; transform: translateX(-50%); object-fit: cover; object-position: center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
}
/* Purple veil: dense at the top (title) and bottom (quote), clear through the middle so the meditator reads. */
.hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--tint-rgb), 0.72) 0%, rgba(var(--tint-rgb), 0.38) 24%, rgba(var(--tint-rgb), 0) 42%, rgba(var(--tint-rgb), 0) 58%, rgba(var(--tint-rgb), 0.4) 80%, rgba(var(--tint-rgb), 0.2) 100%),
    linear-gradient(90deg, rgba(var(--tint-rgb), 0.35) 0%, transparent 22%, transparent 78%, rgba(var(--tint-rgb), 0.35) 100%); }
.hero__body { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(104px, 12vw, 136px) var(--gutter) 0; }
.hero__eyebrow { margin: 0 0 18px; font-family: var(--font-body); font-size: clamp(13px, 1.4vw, 16px); font-weight: 500; line-height: 1.4; color: rgba(255, 255, 255, 0.92); letter-spacing: var(--track-small); text-shadow: 0 1px 12px rgba(var(--tint-rgb), 0.6); }
.hero__title { margin: 0; max-width: 11ch; font-size: clamp(2.8rem, 8vw, 6.25rem); font-weight: 500; line-height: 0.9; letter-spacing: var(--track-hero); justify-content: center; text-shadow: 0 2px 30px rgba(var(--tint-rgb), 0.45); }
/* Easter egg: a face in the clouds, right-hand side. Quiet at rest, glows when found. */
.hero__egg { display: none; margin: 0; position: absolute; z-index: 5; right: clamp(8px, 3vw, 56px); top: 24%; width: clamp(300px, 33vw, 560px); aspect-ratio: 1; cursor: default;
  opacity: 0.4; mix-blend-mode: screen; filter: saturate(0.9) blur(0.4px);
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, rgba(0, 0, 0, 0.55) 74%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 52%, rgba(0, 0, 0, 0.55) 74%, transparent 100%);
  transition: opacity 1.4s var(--ease), filter 1.4s var(--ease); animation: egg-float 11s ease-in-out infinite alternate; }
.hero__egg img { width: 100%; height: 100%; object-fit: cover; }
.hero__egg:hover { opacity: 0.92; filter: saturate(1.1) blur(0); }
@media (min-width: 1000px) { .hero__egg { display: block; } }
@keyframes egg-float { from { translate: 0 -8px; } to { translate: 0 10px; } }

/* Empty stage: the meditator in the video shows through here. */
.hero__stage { flex: 1; min-height: clamp(180px, 30vh, 360px); }
.hero__sub { position: relative; z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 0 var(--gutter) clamp(48px, 7vh, 72px); text-align: center; }
.hero__sub p { margin: 0; max-width: 32rem; font-weight: 500; font-size: clamp(0.95rem, 1.8vw, 1.125rem); line-height: 1.5; letter-spacing: var(--track-body); text-wrap: pretty; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 14px rgba(var(--tint-rgb), 0.7); }
.hero__sub cite { display: block; margin-top: 10px; font-style: normal; font-family: var(--font-body); font-size: 12px; line-height: 1.4; letter-spacing: var(--track-caps); text-transform: uppercase; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 10px rgba(var(--tint-rgb), 0.8); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@media (max-width: 480px) {
  .hero__sub { gap: 18px; padding-bottom: 36px; }
  .hero__actions { flex-wrap: nowrap; gap: 8px; }
  .hero__actions .btn { padding: 12px 14px; font-size: 11px; letter-spacing: 0.08em; }
}
/* Clouds drift up from below the fold on scroll; parked low so they never cover the meditator. */
.hero__clouds { position: absolute; left: 0; right: 0; bottom: -18%; z-index: 30; width: 100%; pointer-events: none; will-change: transform; opacity: 0.9; }
@media (min-width: 768px) { .hero__clouds { bottom: -48%; } }
@media (min-width: 1024px) { .hero__clouds { bottom: -78%; } }

/* ---------- Intro ---------- */
.intro { padding: clamp(80px, 12vw, 144px) var(--gutter); text-align: center; }
.intro__title { max-width: 64rem; margin: 0 auto; font-size: clamp(2.5rem, 8vw, 6.5rem); font-weight: 500; line-height: 1.05; letter-spacing: var(--track-hero); }
.intro__title .blur-text { justify-content: center; }
.intro__line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: 0.18em; }
.intro__img { position: relative; top: 0.05em; width: clamp(50px, 6vw, 88px); height: clamp(50px, 6vw, 88px); border-radius: 8px; object-fit: cover; align-self: center; }
.intro__lead { max-width: 28rem; margin: clamp(40px, 5vw, 56px) auto 0; font-weight: 500; font-size: clamp(1rem, 1.8vw, 1.15rem); line-height: 1.55; letter-spacing: var(--track-body); text-wrap: pretty; color: rgba(255, 255, 255, 0.82); }

/* ---------- Cards ---------- */
.cards { display: grid; gap: clamp(16px, 2vw, 24px); padding: 0 var(--gutter) clamp(64px, 8vw, 96px); }
.card { width: 100%; max-width: 64rem; margin: 0 auto; border-radius: var(--radius-card); background: var(--card); color: var(--card-ink); overflow: hidden; display: grid; grid-template-columns: 1fr; min-height: 400px; }
@media (min-width: 768px) { .card { grid-template-columns: 45% 1fr; min-height: 420px; } }
.card__text { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: clamp(24px, 4vw, 40px); order: 2; }
@media (min-width: 768px) { .card__text { order: 1; } }
.card__label { margin: 0; font-family: var(--font-body); font-size: 12px; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.16em; color: var(--item-ink); } /* lilac on the light card is 2.8:1; item-ink is 6.3:1 */
.card__body { margin: 0; max-width: 36ch; font-weight: 500; font-size: clamp(1rem, 2.5vw, 1.35rem); line-height: 1.45; letter-spacing: var(--track-body); text-wrap: pretty; }
.card__meta { margin: 0; font-family: var(--font-body); font-size: 13px; line-height: 1.5; letter-spacing: var(--track-small); color: var(--item-ink); }
.card__link { align-self: flex-start; margin-top: 6px; }
.card__visual { position: relative; order: 1; min-height: 280px; overflow: hidden; }
@media (min-width: 768px) { .card__visual { order: 2; } }

.card__visual--photo { margin: 12px; min-height: 340px; border-radius: calc(var(--radius-card) - 8px); }
.card__visual--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.card__visual--list { display: grid; place-items: center; padding: clamp(20px, 3vw, 32px); }

/* Two-up card for Why / What */
.card--split { grid-template-columns: 1fr; min-height: 0; }
@media (min-width: 768px) { .card--split { grid-template-columns: 1fr 1fr; } }
.card--split .card__text { order: 0; justify-content: flex-start; }
.card--split .card__text + .card__text { border-top: 1px solid rgba(var(--tint-rgb), 0.14); }
@media (min-width: 768px) { .card--split .card__text + .card__text { border-top: 0; border-left: 1px solid rgba(var(--tint-rgb), 0.14); } }
.card__h { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1; letter-spacing: var(--track-display); font-weight: 500; color: var(--item-ink); }

/* Meditation items */
.med-list { display: grid; gap: 12px; width: 100%; max-width: 340px; list-style: none; margin: 0; padding: 0; }
.med { display: flex; width: 100%; min-height: 112px; background: var(--white); border-radius: 16px; overflow: hidden; text-align: left; transition: transform var(--dur-spring) var(--ease-spring), box-shadow var(--dur-hover) var(--ease); }
@media (hover: hover) { .med:hover { transform: translateY(var(--lift-s)); box-shadow: 0 14px 30px -18px rgba(var(--tint-rgb), 0.55); } }
.med__text { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 12px; }
.med__title { font-family: var(--font-inter); font-size: clamp(1.02rem, 3.5vw, 1.15rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.005em; color: var(--item-ink); }
.med__play { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.med__thumb { position: relative; width: 110px; flex: none; }
.med__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
/* Chip: the lightest material (small, sits on a photo), so a gentle blur and no heavy shadow. */
.med__badge { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 99px; background: rgba(var(--tint-rgb), 0.6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--edge-top);
  font-family: var(--font-inter); font-size: 11px; letter-spacing: var(--track-small); color: var(--white); }

/* ---------- Wisdom ---------- */
.wisdom { padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(80px, 10vw, 128px); text-align: center; }
.wisdom__label { margin: 0 0 28px; font-family: var(--font-body); font-size: 12px; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
/* All quotes share one grid cell, so the stage sizes to the tallest — no fixed min-height. */
.wisdom__stage { position: relative; max-width: 56rem; margin: 0 auto; display: grid; font-size: clamp(1.4rem, 3.6vw, 2.6rem); }
.quote { grid-area: 1 / 1; margin: 0; align-self: center; opacity: 0; visibility: hidden; transition: opacity 0.9s var(--ease), visibility 0s 0.9s; }
.quote.is-active { opacity: 1; visibility: visible; transition: opacity 0.9s var(--ease), visibility 0s; }
.quote p { margin: 0; font-weight: 500; line-height: 1.15; letter-spacing: var(--track-title); justify-content: center; }
.quote footer { margin-top: 22px; font-family: var(--font-body); font-size: 13px; line-height: 1.5; letter-spacing: var(--track-small); color: rgba(255, 255, 255, 0.7); }
.wisdom__dots { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.wisdom__dots button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; }
.wisdom__dots button::before { content: ''; width: 26px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.4); transform: scaleX(0.31); transition: transform var(--dur-spring) var(--ease-spring), background-color var(--dur-hover) var(--ease); }
.wisdom__dots button[aria-current='true']::before { transform: scaleX(1); background: var(--white); }

/* ---------- Grant / Donate band ---------- */
.band { padding: 0 var(--gutter) clamp(64px, 8vw, 96px); }
.band__inner { max-width: 64rem; margin: 0 auto; border-radius: var(--radius-card); padding: clamp(32px, 6vw, 64px); background: radial-gradient(120% 140% at 0% 0%, #b48cff 0%, #8b5cf6 38%, #6532c9 70%, var(--bg-deep) 100%); display: grid; gap: 28px; align-items: end; }
/* Background video behind the CTA card. The gradient stays underneath as the poster-less fallback. */
.band__inner.has-video { position: relative; overflow: hidden; isolation: isolate; }
.band__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.band__inner.has-video::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--tint-rgb), 0.9) 0%, rgba(var(--tint-rgb), 0.76) 50%, rgba(var(--tint-rgb), 0.6) 100%),
    linear-gradient(180deg, transparent 40%, rgba(var(--tint-rgb), 0.45) 100%); }
/* Text and buttons sit on the video: give them a solid backing and full-strength type. */
.band__inner.has-video .band__eyebrow { color: #fff; text-shadow: 0 1px 10px rgba(var(--tint-rgb), 0.8); }
.band__inner.has-video .btn--ghost { background: rgba(var(--tint-rgb), 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); color: #fff; }
.band__inner.has-video .btn--ghost:hover { background: rgba(var(--tint-rgb), 0.78); }
.band__inner.has-video > :not(.band__video) { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .band__video { display: none; } }
@media (prefers-reduced-transparency: reduce) { .band__inner.has-video::before { background: var(--bg-deep); } }
@media (min-width: 768px) { .band__inner { grid-template-columns: 1.3fr 1fr; } }
.band__eyebrow { margin: 0 0 12px; font-family: var(--font-body); font-size: 12px; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.band h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1; letter-spacing: var(--track-display); font-weight: 500; }
.band__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 768px) { .band__actions { justify-content: flex-end; } }

/* ---------- Footer ---------- */
.footer { background: linear-gradient(to bottom, transparent 0%, rgba(30, 12, 60, 0.55) 100%); padding: 0 var(--gutter) 40px; }
.footer__inner { max-width: 64rem; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.18); font-family: var(--font-body); font-size: 13px; color: rgba(255, 255, 255, 0.75); }
.footer__social { display: flex; gap: 8px; }
.footer__social a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); transition: background-color 0.25s var(--ease); }
.footer__social a:hover { background: rgba(255, 255, 255, 0.24); }

/* ---------- Video modal ----------
   Opened and closed by main.js from the trigger's position: the dialog scales (and fades) about the trigger's
   centre and returns along the same path. The dim is its own layer (.modal-dim) so it fades in step with the
   dialog. The native ::backdrop is kept only for focus containment and outside-click. */
.modal { width: min(960px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 20px; background: #000; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 50px 100px -30px rgba(0, 0, 0, 0.75); }
.modal::backdrop { background: transparent; }
.modal-dim { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0; visibility: hidden;
  background: rgba(30, 12, 60, 0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal__frame { aspect-ratio: 16 / 9; width: 100%; }
.modal__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.modal__close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: var(--ink-soft); font-size: 22px; line-height: 1; z-index: 2; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }

/* ==========================================================================
   Subpage primitives (shared by wisdom / events / references / testimonials).
   Page-specific styles live in each page's own page.css.
   ========================================================================== */
.nav--page { position: absolute; }
.nav__links a[aria-current='page'] { background: var(--accent); color: var(--bg-deep); }
.nav__menu a[aria-current='page'] { background: rgba(255, 255, 255, 0.14); }

/* Page hero: no video. The fixed cloud sky shows through; a soft veil keeps type legible. */
.page-hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: clamp(520px, 78svh, 820px); padding: clamp(128px, 16vw, 176px) var(--gutter) clamp(72px, 10vw, 120px); isolation: isolate; }
.page-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 42%, rgba(var(--tint-rgb), 0.38) 0%, rgba(var(--tint-rgb), 0.2) 55%, transparent 85%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); }
.page-hero__eyebrow { margin: 0 0 20px; font-family: var(--font-body); font-size: clamp(13px, 1.3vw, 15px); font-weight: 500; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 12px rgba(var(--tint-rgb), 0.6); }
/* Wide container keeps the H1 to two or three lines. */
.page-hero__title { margin: 0; max-width: 18ch; font-size: clamp(2.6rem, 6.4vw, 5.75rem); font-weight: 500; line-height: 0.95; letter-spacing: var(--track-hero); justify-content: center; text-shadow: 0 2px 30px rgba(var(--tint-rgb), 0.45); }
.page-hero__lead { margin: 28px auto 0; max-width: 40rem; font-family: var(--font-body); font-weight: 500; font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.6; letter-spacing: var(--track-body); text-wrap: pretty; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 14px rgba(var(--tint-rgb), 0.6); }
.page-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 36px; }

/* Sections: cinematic chapters with generous vertical rhythm. */
.section { position: relative; padding: clamp(80px, 12vw, 168px) var(--gutter); }
.section--tight { padding-block: clamp(48px, 7vw, 96px); }
.section__inner { max-width: 72rem; margin: 0 auto; }
.section__head { max-width: 46rem; margin: 0 0 clamp(40px, 6vw, 72px); }
.section__head--center { margin-inline: auto; text-align: center; }
.eyebrow { margin: 0 0 16px; font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.section__title { margin: 0; font-size: clamp(2rem, 4.6vw, 3.75rem); font-weight: 500; line-height: 1.02; letter-spacing: var(--track-display); }
.section__lead { margin: 20px 0 0; font-family: var(--font-body); font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.6; letter-spacing: var(--track-body); text-wrap: pretty; color: rgba(255, 255, 255, 0.84); }

/* Glass panel: for content that sits on the purple sky (light .card is the other surface).
   A large surface, so it is the thicker regular material: deeper blur, bright top edge, deeper shadow.
   Mark any other translucent surface with data-glass to inherit the reduced-transparency / contrast overrides. */
.panel { position: relative; border-radius: var(--radius-card); padding: clamp(24px, 3.4vw, 40px);
  background: var(--glass);
  box-shadow: var(--edge-top), var(--edge-ring), 0 34px 70px -40px rgba(var(--tint-rgb), 0.95), 0 2px 8px rgba(var(--tint-rgb), 0.25);
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); }
/* Never stack glass on glass: a surface nested inside one becomes a solid, darker layer with no blur of its own.
   (Light glass is never placed on a light .card either.) */
.panel .panel, .panel [data-glass], .card .panel, .card [data-glass] { background: rgba(var(--tint-rgb), 0.88); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Long-form reading. */
.prose { max-width: 68ch; font-family: var(--font-body); font-size: clamp(1rem, 1.1vw, 1.0625rem); line-height: 1.7; letter-spacing: var(--track-body); color: rgba(255, 255, 255, 0.9); }
.prose h2, .prose h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: var(--track-title); line-height: 1.1; color: var(--white); }
.prose h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); margin: 2.2em 0 0.6em; }
.prose h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin: 1.8em 0 0.5em; letter-spacing: -0.02em; }
.prose p { margin: 0 0 1.1em; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.25em; }
.prose li { margin: 0.35em 0; }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--white); font-weight: 600; }
.prose a { color: #d8c6ff; text-decoration: underline; text-underline-offset: 3px; }
.card .prose, .prose--ink { color: var(--card-ink); }
.card .prose h2, .card .prose h3, .prose--ink h2, .prose--ink h3 { color: var(--item-ink); }

/* Scroll-scrub paragraph: words brighten as they cross the viewport (main.js initScrub). */
[data-scrub] .w { opacity: 0.18; transition: opacity 0.25s linear; }
[data-scrub] .w.is-lit { opacity: 1; }

/* Shared CTA band on subpages reuses .band; this spacer keeps the footer breathing. */
.page-end { height: clamp(24px, 4vw, 48px); }

/* ---------- Motion primitives ----------
   main.js plays each reveal with WAAPI (opacity/transform, plus a blur on words), then adds .is-in and cancels the
   animation. So a revealed element carries no leftover animation effect: its own transform, hover and press styles
   work normally and nothing keeps will-change layers alive. Until then the element is held hidden. */
.blur-text { display: flex; flex-wrap: wrap; column-gap: 0.25em; }
.blur-text .w { display: inline-block; }
.blur-text .w:not(.is-in) { will-change: transform, filter, opacity; }
.js [data-reveal]:not(.is-in) { opacity: 0; }
.js .blur-text .w:not(.is-in) { opacity: 0; }
.js [data-card]:not(.is-in), .js [data-blur-in]:not(.is-in), .js [data-drop]:not(.is-in) { opacity: 0; }

/* ---------- Accessibility: transparency and contrast ---------- */
@media (prefers-reduced-transparency: reduce) {
  .panel, [data-glass] { background: rgb(var(--tint-rgb)); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav__inner::before { background: rgb(var(--tint-rgb)); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav__menu, .nav[data-open='true'] .nav__menu { background: rgb(var(--tint-rgb)); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .med__badge { background: rgb(var(--tint-rgb)); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .modal-dim { background: rgb(30, 12, 60); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .panel .panel, .panel [data-glass], .card .panel, .card [data-glass] { background: rgb(var(--tint-rgb)); }
}
@media (prefers-contrast: more) {
  .panel, [data-glass] { background: rgb(var(--tint-rgb)); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 2px var(--white); }
  .nav__inner::before { background: rgb(var(--tint-rgb)); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 2px var(--white); }
  .nav__menu, .nav[data-open='true'] .nav__menu { background: rgb(var(--tint-rgb)); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 2px var(--white); }
  .med__badge { background: rgb(var(--tint-rgb)); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--white); }
  .modal { box-shadow: 0 0 0 2px var(--white); }
  .modal-dim { background: rgb(30, 12, 60); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .panel .panel, .panel [data-glass], .card .panel, .card [data-glass] { background: rgb(var(--tint-rgb)); }
  .card { box-shadow: inset 0 0 0 2px var(--card-ink); }
  .btn--ghost { box-shadow: inset 0 0 0 2px var(--white); }
  .eyebrow, .section__lead, .page-hero__eyebrow, .page-hero__lead, .band__eyebrow, .wisdom__label, .quote footer, .intro__lead { color: var(--white); }
  .card__label { color: var(--item-ink); }
  .nav__links a, .nav__logo img { box-shadow: inset 0 0 0 1px var(--ink-soft); }
}

/* ---------- Reduced motion ----------
   Not "no feedback": slides, springs, parallax and blur-ins are replaced by short opacity cross-fades
   (reveals are faded by main.js; the surfaces below keep an opacity transition). */
@media (prefers-reduced-motion: reduce) {
  html, html body { scroll-behavior: auto; }
  [data-scrub] .w { opacity: 1 !important; transition: none; }
  .hero__egg { animation: none; }
  .sky__cloud { animation: none; }
  .sky__par { transform: none !important; }
  .hero__clouds { transform: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .quote, .quote.is-active { transition: opacity 0.35s linear, visibility 0s linear 0.35s !important; }
  .quote.is-active { transition: opacity 0.35s linear, visibility 0s !important; }
  .nav__inner::before { transform: none; transition: opacity 0.25s linear !important; }
  .nav__menu { transform: none; transition: opacity 0.2s linear, visibility 0s linear 0.2s !important; }
  .nav[data-open='true'] .nav__menu { transition: opacity 0.2s linear, visibility 0s !important; }
  .nav__menu li, .nav[data-open='true'] .nav__menu li { transform: none; }
  .modal, .modal-dim { transition: opacity 0.22s linear !important; }
}