/* 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 {
  /* Sky purples. Lightened +0.12 OKLCH L (chroma +0.02, hue held at 295) from #4b2a86 / #5b34a3 / #2e1758 / #7143c4. */
  --bg: #6d49b6;
  --bg-deep: #452d79;
  --bg-mid: #7b51d1;
  --bg-glow: #8f5fee;
  --bg-core: #885ae1;       /* centre of the landscape hero glow (was a literal #6a3fb8) */
  --tint-rgb: 58, 26, 112;  /* the dark glass tint stays put on purpose: it is what keeps white text legible on a lighter sky */
  --bg-rgb: 109, 73, 182;
  /* The old deep purple, kept as INK only (text on --accent / amber). --bg-deep is now a surface, too light for that. */
  --ink-deep: #2e1758;
  /* Nav ink: 16.8:1 on white, 13:1 on the hover tint. Deep enough that the links read as bold, not as grey-purple. */
  --nav-ink: #25104a;
  --nav-hover: #e9ddff;
  /* Donate: warm amber that no purple, white or glass surface can swallow. Ink on it is 8.8:1 (7.9:1 at the darkest stop). */
  --donate: #ffb020;
  --donate-hi: #ffc23d;
  --donate-lo: #ff9f1c;
  --donate-ink: #2a1250;
  --donate-text: #ffc247;   /* amber as TEXT on the dark footer slab: 6.9:1 */
  --donate-rim: rgba(133, 72, 0, 0.55);   /* hairline that keeps the edge defined on white and on the light mobile menu */
  --donate-glow: rgba(255, 160, 28, 0.5);
  /* Vertical rhythm. Every section contributes --space-section at its top and at its bottom, so the visible blank
     between two sections is about twice this (40px on a phone, 72px on a wide screen). Sections that need a little
     more air (before the closing band, under the hero) use -lg. Cards, panels, line heights and hero heights are untouched. */
  --space-section: clamp(20px, 2.6vw, 36px);
  --space-section-lg: clamp(32px, 4vw, 56px);
  --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 (modelled on the rendered sky: 5.1:1 glass, 6.4:1 thick).
     The tint alpha went .55 / .76 to .62 / .80 when the sky was lightened. 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.62);
  --glass-thick: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 100%), rgba(var(--tint-rgb), 0.80);
  --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.34) 0%, rgba(var(--tint-rgb), 0.58) 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(--ink-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 { background: #b38ff6; }
  .btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }
}

/* ---------- Donate ----------
   Every Donate link on the site points at zeffy.com, so ONE attribute rule family styles all of them (nav, mobile
   menu, closing bands, footer pill) whatever their class: no markup change, and a future Donate link is picked up
   for free. The footer's plain text link (.ft-link) takes the text variant in footer.css.
   :not(#zeffy) is a specificity lift (id weight, matches nothing): it beats .btn--ghost inside .band__inner.has-video
   (and every hover variant of .btn--* / .ft-btn--*) without !important. Amber is the one warm colour on the site, so
   it never blends into lilac, white or glass; the dark rim keeps its edge on white (amber on white is only 1.8:1). */
a[href*="zeffy.com"]:not(.ft-link):not(#zeffy) {
  background-color: var(--donate);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 55%);
  color: var(--donate-ink);
  font-family: var(--font-inter); font-weight: 600; letter-spacing: 0.08em; text-shadow: none; opacity: 1;
  box-shadow: inset 0 0 0 1.5px var(--donate-rim), 0 10px 26px -10px var(--donate-glow);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: transform var(--dur-spring) var(--ease-spring), box-shadow var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
@media (hover: hover) {
  a[href*="zeffy.com"]:not(.ft-link):not(#zeffy):hover {
    background-color: var(--donate-hi);
    box-shadow: inset 0 0 0 1.5px var(--donate-rim), 0 14px 32px -8px var(--donate-glow);
  }
}
/* The lift is motion: skipped entirely under reduced motion (colour and glow still respond). */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  a[href*="zeffy.com"]:not(.ft-link):not(#zeffy):hover { transform: translateY(var(--lift-s)); }
}
html:not(.js-press) a[href*="zeffy.com"]:not(.ft-link):not(#zeffy):active { transform: scale(0.97); }
/* White ring, with a dark gap inside it, so the ring reads on the sky and on white surfaces alike. */
a[href*="zeffy.com"]:not(#zeffy):focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
a[href*="zeffy.com"]:not(.ft-link):not(#zeffy):focus-visible {
  box-shadow: inset 0 0 0 1.5px var(--donate-rim), 0 0 0 2px var(--donate-ink), 0 10px 26px -10px var(--donate-glow);
}

/* ---------- 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: 12px; font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: var(--track-small); line-height: 1.15; }
.nav__logo img { width: 68px; height: auto; background: var(--white); border-radius: 14px; padding: 5px; }
.nav__links { --nl-pad: 13px; --nl-gap: 6px; display: none; gap: var(--nl-gap); list-style: none; margin: 0; padding: 0; }
/* Links: Inter at a true 600 (TT Firs Neue Trl only has a regular weight, so it can only fake bold), deep ink on a
   white pill = 16.8:1. 12px caps with .06em tracking: the eight words measure about 41.6em of Inter 600 (59 letters). */
.nav__links a {
  display: block; padding: 12px var(--nl-pad); background: var(--white); border-radius: 12px;
  color: var(--nav-ink); font-family: var(--font-inter); font-size: 12px; font-weight: 600; line-height: 1.2;
  text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
  transition: background-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
@media (hover: hover) { .nav__links a:not([aria-current='page']):hover { background: var(--nav-hover); } }
.nav__links a:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; background: var(--nav-hover); }
.nav__links a[aria-current='page']:focus-visible { background: var(--nav-ink); }
.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);
  /* A near-solid light sheet (the glass behind it is only 3% visible): every link is dark ink on a white pill, 15:1.
     It scrolls on short or landscape phones instead of clipping the last links. */
  background: rgba(247, 243, 255, 0.97);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 30px 60px -24px rgba(var(--tint-rgb), 0.95), 0 0 0 1px rgba(var(--tint-rgb), 0.25);
  -webkit-backdrop-filter: blur(6px) saturate(1); backdrop-filter: blur(6px) saturate(1);
  border-radius: 20px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px);
  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: 6px; }
.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: flex; align-items: center; min-height: 48px; padding: 12px 16px; background: var(--white); border-radius: 12px;
  color: var(--nav-ink); font-family: var(--font-inter); font-size: 14px; font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.08em;
  box-shadow: inset 0 0 0 1px rgba(37, 16, 74, 0.12);
  transition: background-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
@media (hover: hover) { .nav__menu a:not(.btn):not([aria-current='page']):hover { background: var(--nav-hover); } }
/* The sheet clips overflow, so the ring sits inside the pill. */
.nav__menu a:not(.btn):focus-visible { outline: 3px solid var(--nav-ink); outline-offset: -3px; background: var(--nav-hover); }
.nav__menu .btn { width: 100%; min-height: 52px; margin-top: 6px; }
@media (max-height: 520px) { .nav__menu a:not(.btn) { min-height: 44px; padding-block: 8px; } .nav__menu ul { gap: 4px; } }
/* 1240, not 900. Width check at 1240 (scrollbar 4px, gutter 40px => 1156px inner): logo ~98 + Inter 600 links 542
   (41.6em x 12px + 59 x .06em tracking) + 8 x 2 x 13px padding + 7 x 6px gaps = 792 + Donate ~150 + two 16px gaps = ~1072px,
   so ~107px (measured, 9%) to spare. At 1300px and up the pills get their roomier 16px / 8px spacing (~1134 of 1216). The estimate
   carries a +-6% error on the text (+-32px), well inside the slack; narrower screens keep the burger menu. */
@media (min-width: 1240px) {
  .nav__links, .nav__cta { display: flex; }
  .nav__burger, .nav__menu { display: none; }
}
@media (min-width: 1300px) { .nav__links { --nl-pad: 16px; --nl-gap: 8px; } }
/* Below the desktop breakpoint the Donate button stays in the bar, just left of the burger (logo | Donate | burger).
   margin-left:auto pushes it and the burger to the right edge; the burger keeps its own 44px box and the row gap. */
@media (max-width: 1239.98px) {
  .nav__cta { display: inline-flex; margin-left: auto; }
  .nav a.nav__cta:not(#zeffy) { min-height: 44px; padding: 10px 14px; font-size: 12px; letter-spacing: 0.06em; }
}
@media (max-width: 359.98px) {
  .nav__inner { gap: 8px; }
  .nav a.nav__cta:not(#zeffy) { padding-inline: 10px; font-size: 11px; letter-spacing: 0.03em; }
}

/* ---------- 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%, var(--bg-core) 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); max-width: 30rem; font-size: clamp(16px, 1.9vw, 21px); font-weight: 500; line-height: 1.35; text-wrap: balance; color: rgba(255, 255, 255, 0.95); 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.25rem, 5.4vw, 4.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) var(--space-section-lg); 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.92); text-shadow: 0 1px 10px rgba(var(--tint-rgb), 0.8); }
@media (max-width: 480px) {
  .hero__sub { gap: 18px; padding-bottom: var(--space-section-lg); }
}
/* 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: var(--space-section) 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.92); }

/* ---------- Cards ---------- */
.cards { display: grid; gap: clamp(16px, 2vw, 24px); padding: var(--space-section) var(--gutter); }
/* What / Why / How row sits straight under the hero (whose own bottom padding is the gap above it). */
.cards--lead { padding-top: 0; }
.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__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); }

/* Breath Awareness Meditation: a full-width card, heading and blurb on top, the two playlists side by side below. */
.card--wide { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.card--wide .card__text { order: 0; justify-content: flex-start; padding-bottom: 0; }
.card--wide .card__visual { order: 0; min-height: 0; place-items: stretch; }
.card--wide .card__body { max-width: 52ch; }
.card--wide .med-list { max-width: none; }
@media (min-width: 640px) { .card--wide .med-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }

/* Quote and attribution inside a card: the name links to Patriji's page on pssmovement.org. */
.card__quote { margin: 0; max-width: 40ch; }
.card__meta a { text-decoration: underline; text-underline-offset: 3px; color: inherit; }
.card__meta a:focus-visible { outline: 2px solid var(--card-ink); outline-offset: 3px; border-radius: 6px; }

/* Three-up card: Why / What / How. One column on phones, three from 960px. */
.card--trio { grid-template-columns: minmax(0, 1fr); min-height: 0; }
@media (min-width: 960px) { .card--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card--trio .card__text { order: 0; justify-content: flex-start; min-width: 0; }
.card--trio .card__text + .card__text { border-top: 1px solid rgba(var(--tint-rgb), 0.14); }
@media (min-width: 960px) { .card--trio .card__text + .card__text { border-top: 0; border-left: 1px solid rgba(var(--tint-rgb), 0.14); } }
.trio__h { margin: 0; font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.05; letter-spacing: var(--track-title); font-weight: 500; color: var(--item-ink); text-wrap: balance; }
.trio__p { margin: 0; font-weight: 500; font-size: 1rem; line-height: 1.5; letter-spacing: var(--track-body); text-wrap: pretty; }
.trio__alt { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-body); font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 3px; color: var(--item-ink); }
.card--trio .trio__alt { margin-top: auto; }
.trio__alt:focus-visible { outline: 2px solid var(--card-ink); outline-offset: 3px; border-radius: 6px; }

/* Click-to-load video: a still and a play button until pressed, then the YouTube iframe takes its place (home.js). */
.vid { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: 16px; overflow: hidden; background: #000; }
.vid__btn { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; }
.vid__btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid__btn:focus-visible { outline: 2px solid var(--card-ink); outline-offset: -4px; border-radius: 16px; box-shadow: inset 0 0 0 4px var(--white); }
.vid__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 60px; height: 60px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; padding-left: 3px;
  box-shadow: 0 10px 30px -10px rgba(var(--tint-rgb), 0.9); transition: transform var(--dur-spring) var(--ease-spring); }
@media (hover: hover) { .vid__btn:hover .vid__play { transform: scale(1.08); } }
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
html:not(.js) .vid__btn { display: none; }

/* ---------- Wisdom ---------- */
.wisdom { padding: var(--space-section) var(--gutter); 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.9); }
/* 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.9); }
.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); }

/* ---------- Monthly newsletter ---------- */
.news { padding: var(--space-section) var(--gutter); }
.news__panel { max-width: 64rem; margin: 0 auto; color: var(--white); }
.news__stage { display: grid; }
.news__stage > * { grid-area: 1 / 1; min-width: 0; }
.news__title { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 500; line-height: 1; letter-spacing: var(--track-display); text-wrap: balance; }
.news__lead { margin: 16px 0 0; max-width: 36rem; 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.94); }
.news__nojs { margin: 20px 0 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.55; }
.news__nojs a, .news__contact a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
html:not(.js) .news__body { display: none; }
.news__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 16px; margin-top: 24px; }
@media (min-width: 720px) { .news__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.news__field { margin-top: 12px; }
.news__label { display: block; font-family: var(--font-body); font-size: 1rem; font-weight: 500; line-height: 1.3; letter-spacing: var(--track-body); }
.news__input { display: block; width: 100%; min-height: 52px; margin: 8px 0 0; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(var(--tint-rgb), 0.6);
  background: var(--white); color: var(--card-ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.45; letter-spacing: var(--track-body);
  -webkit-appearance: none; appearance: none; transition: border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease); }
.news__input:focus-visible, .news__btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
@media (hover: hover) { .news__input:hover { border-color: var(--card-ink); } }
.news__field.is-invalid .news__input { border-color: var(--card-ink); box-shadow: 0 0 0 3px rgb(var(--tint-rgb)), 0 0 0 5px var(--white); }
.news__error { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 700; line-height: 1.45; }
.news__error[hidden] { display: none; }
.news__error svg { flex: none; margin-top: 2px; }
.news__summary, .news__failure { margin-top: 20px; padding: 16px 18px; border-radius: 16px; background: var(--white); color: var(--card-ink);
  box-shadow: inset 4px 0 0 var(--card-ink), inset 0 0 0 1px rgba(var(--tint-rgb), 0.5); font-family: var(--font-body); font-size: 1rem; line-height: 1.5; }
.news__summary[hidden], .news__failure[hidden] { display: none; }
.news__summary:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.news__summary-title { margin: 0; font-size: 1.125rem; font-weight: 500; line-height: 1.25; letter-spacing: var(--track-title); }
.news__summary-list { margin: 8px 0 0; padding: 0; list-style: none; }
.news__summary-list a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.news__failure a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.news__btn { width: 100%; min-height: 52px; margin-top: 24px; }
.news__btn:disabled { opacity: 0.72; cursor: progress; }
@media (min-width: 720px) { .news__btn { width: auto; } }
.news__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.news__done { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; opacity: 0; }
.news__done[hidden] { display: none; }
.news__done-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--white); color: var(--ink-soft); }
.news__contact { margin: 28px 0 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.news__contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--white); }
.news__summary-list a:focus-visible, .news__failure a:focus-visible { outline: 2px solid var(--card-ink); outline-offset: 3px; border-radius: 6px; }
.news__nojs a:focus-visible, .news__contact a:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; border-radius: 6px; }
@media (prefers-contrast: more) { .news__input { border-color: var(--card-ink); border-width: 2px; } }

/* Blog cards: shared by the home page and /blog/. */
/* ---------- Category pill: one tint per subject, dark ink on pale so it reads on glass and on the light card ---------- */
.pill { display: inline-block; flex: none; padding: 5px 12px; border-radius: 999px; font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: var(--track-small); white-space: nowrap; }
.pill--practice { background: #e4d8ff; color: #3b1478; }
.pill--living { background: #d7f0dc; color: #1d4a2c; }
.pill--family { background: #ffe1d6; color: #7a2c18; }
.pill--community { background: #d8e3ff; color: #1a2b7c; }
.pill--wisdom { background: #fbe9c4; color: #5c3a05; }
.pill--latest { background: var(--card-ink); color: var(--white); }

/* ---------- Card ---------- */
.blog-item { display: flex; min-width: 0; }
.blog-card { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 12px; border-radius: var(--radius-card);
  transition: transform var(--dur-spring) var(--ease-spring), box-shadow var(--dur-hover) var(--ease); }
.blog-card--glass { background: var(--glass);
  box-shadow: var(--edge-top), var(--edge-ring), 0 34px 70px -40px rgba(var(--tint-rgb), 0.95);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); }
.blog-card__body { display: flex; flex: none; flex-direction: column; gap: 10px; padding: clamp(14px, 1.8vw, 20px) clamp(8px, 1.2vw, 14px) 10px; }
.blog-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.blog-card__title { margin: 0; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 500; line-height: 1.12; letter-spacing: var(--track-title); text-wrap: balance; }
.blog-card__text { margin: 0; max-width: 46ch; font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.94); text-wrap: pretty; }
.blog-card__meta { margin: 0; font-family: var(--font-body); font-size: 13px; line-height: 1.4; letter-spacing: var(--track-small); color: rgba(255, 255, 255, 0.92); }

/* ---------- Photo frame ---------- */
.blog-media { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 10; border-radius: calc(var(--radius-card) - 8px); background: var(--bg-deep); }
.blog-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, center); transition: transform var(--dur-slow) var(--ease-spring); }
.blog-media::after { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(var(--tint-rgb), 0.34); opacity: 0; transition: opacity var(--dur-hover) var(--ease); }
/* Corner brackets: eight thin strokes on one layer, so the markup stays a single image. */
.blog-media::before { --l: 12px; --w: 1.5px; --c: linear-gradient(#fff, #fff);
  content: ''; position: absolute; inset: 15px; z-index: 2; opacity: 0; scale: 1.03; transition: opacity var(--dur-hover) var(--ease), scale var(--dur-spring) var(--ease-spring);
  background: var(--c) left top / var(--l) var(--w), var(--c) left top / var(--w) var(--l), var(--c) right top / var(--l) var(--w), var(--c) right top / var(--w) var(--l),
    var(--c) left bottom / var(--l) var(--w), var(--c) left bottom / var(--w) var(--l), var(--c) right bottom / var(--l) var(--w), var(--c) right bottom / var(--w) var(--l);
  background-repeat: no-repeat; }
.blog-media__go { position: absolute; left: 50%; top: 50%; z-index: 3; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; border-radius: 50%; color: var(--white);
  background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); opacity: 0; scale: 0.7; transition: opacity var(--dur-hover) var(--ease), scale var(--dur-spring) var(--ease-spring); }
@media (hover: hover) {
  .blog-card:hover { transform: translateY(var(--lift-m)); }
  .blog-card:hover .blog-media img { transform: scale(1.06); }
  .blog-card:hover .blog-media::after, .blog-card:hover .blog-media::before, .blog-card:hover .blog-media__go { opacity: 1; }
  .blog-card:hover .blog-media::before { scale: 1; }
  .blog-card:hover .blog-media__go { scale: 1; }
}

.blog-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); margin-top: clamp(16px, 2vw, 24px); }
@media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  .blog-card, .blog-media img, .blog-media::before, .blog-media__go { transition: none; }
  .blog-card:hover { transform: none; }
  .blog-card:hover .blog-media img { transform: none; }
}

/* ---------- Latest blog posts (home) ---------- */
.home-blog { padding: var(--space-section) var(--gutter); }
.home-blog__inner { max-width: 64rem; margin: 0 auto; }
.home-blog__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(20px, 3vw, 32px); }
.home-blog__head .section__title { text-shadow: 0 2px 30px rgba(var(--tint-rgb), 0.45); }
.home-blog__head .eyebrow { color: rgba(255, 255, 255, 0.92); }
/* Three posts: the first spans the row on tablets so no card sits alone, then three across. */
@media (min-width: 640px) and (max-width: 959.98px) {
  .blog-grid--three .blog-item:first-child { grid-column: 1 / -1; }
  .blog-grid--three .blog-item:first-child .blog-media { aspect-ratio: 21 / 9; }
}
@media (min-width: 960px) {
  .blog-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Narrow cards: the tag sits above the title, so the title keeps the full width. */
  .blog-grid--three .blog-card__top { flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
}

/* ---------- Donate band ---------- */
/* A little more air under the closing band: the footer slab rises over part of it (see --ft-overlap). */
.band { padding: var(--space-section) var(--gutter) var(--space-section-lg); }
.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.92); }
.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(--nav-ink); color: var(--white); box-shadow: inset 0 -3px 0 var(--accent); }  /* white on deep ink 16.8:1 */
.nav__menu a[aria-current='page'] { background: var(--nav-ink); color: var(--white); box-shadow: inset 5px 0 0 var(--accent); }
.nav__menu a[aria-current='page']:focus-visible { background: var(--nav-ink); color: var(--white); outline-color: var(--white); }

/* 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: flex-start; text-align: center;
  /* No forced height: a tall centred hero left 100px+ of blank under the heading. The top padding clears the nav. */
  min-height: 0; padding: clamp(112px, 13vw, 152px) var(--gutter) var(--space-section); isolation: isolate; }
.page-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(85% 75% at 50% 58%, rgba(var(--tint-rgb), 0.46) 0%, rgba(var(--tint-rgb), 0.26) 60%, transparent 90%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 78%, 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.92); 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 0 2px rgba(var(--tint-rgb), 0.4), 0 1px 14px rgba(var(--tint-rgb), 0.7); }
.page-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 36px; }

/* Sections: chapters separated by one tight, shared rhythm (--space-section above and below each). */
.section { position: relative; padding: var(--space-section) var(--gutter); }
.section--tight { padding-block: calc(var(--space-section) * 0.75); }
.section__inner { max-width: 72rem; margin: 0 auto; }
.section__head { max-width: 46rem; margin: 0 0 clamp(20px, 3vw, 40px); }
.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.9); }
.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.92); }
/* Bare-sky copy: the same tint halo as .page-hero__lead. It lifts the worst cloud highlight (~3.4:1 for pure white) to ~4.6-4.9:1 without darkening the sky. Forced-colors drops text-shadow on its own. */
.intro__lead, .section__lead, .eyebrow, .wisdom__label, .quote footer, .interlude__text, .interlude__cite cite { text-shadow: 0 0 2px rgba(var(--tint-rgb), 0.35), 0 1px 14px rgba(var(--tint-rgb), 0.6); }
.card .eyebrow, .card .section__lead { text-shadow: none; }

/* 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.94); }
.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, which now carries its own closing air (--space-section-lg), so this spacer adds none. */
.page-end { height: 0; }

/* ---------- 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: #f7f3ff; -webkit-backdrop-filter: none; backdrop-filter: none; }  /* light sheet: its links are dark ink */
  .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: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 2px var(--nav-ink); }
  .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 2px var(--nav-ink); }
  .nav__menu a:not(.btn) { box-shadow: inset 0 0 0 2px var(--nav-ink); }
  .nav__links a[aria-current='page'], .nav__menu a[aria-current='page'] { box-shadow: inset 0 0 0 2px var(--white), inset 0 0 0 4px var(--nav-ink); }
  /* Donate: flat amber, a solid ink border, no gradient or glow. */
  a[href*="zeffy.com"]:not(.ft-link):not(#zeffy) { background-image: none; box-shadow: inset 0 0 0 2px var(--donate-ink); }
  a[href*="zeffy.com"]:not(.ft-link):not(#zeffy):hover { box-shadow: inset 0 0 0 3px var(--donate-ink); }
}

/* ---------- 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; }
}