/* =========================================================================
 *  Project Yoga Johannesburg — single stylesheet
 *  Aesthetic: modern devotional; warm ivory ground, deep ink, burnt-earth accent.
 *  See PRODUCT.md and DESIGN.md for the strategy this implements.
 * ========================================================================= */


/* -------------------------------------------------------------------------
 *  1. Reset
 * ------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
ul, ol { list-style: none; }


/* -------------------------------------------------------------------------
 *  2. Design tokens
 * ------------------------------------------------------------------------- */

:root {
  /* Color — restrained, OKLCH, warm-tinted neutrals */
  --ground:        oklch(0.965 0.012 78);
  --ground-deeper: oklch(0.925 0.015 75);
  --ground-paper:  oklch(0.985 0.008 80);
  --ink:           oklch(0.20 0.025 50);
  --ink-muted:     oklch(0.45 0.020 55);
  --ink-faint:     oklch(0.65 0.015 60);
  --ink-line:      oklch(0.72 0.015 70);
  --ink-line-soft: oklch(0.82 0.014 70);
  --accent:        oklch(0.42 0.110 40);
  --accent-deep:   oklch(0.30 0.090 35);

  /* Typography */
  --font-display: "Halant", "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Fluid type scale — mobile floor, desktop ceiling */
  --type-hero-devanagari: clamp(5rem, 14vw + 1rem, 11rem);
  --type-display-1:       clamp(2.5rem, 6vw + 1rem, 5rem);
  --type-display-2:       clamp(2rem, 3.5vw + 1rem, 3.5rem);
  --type-display-3:       clamp(1.5rem, 1.5vw + 1rem, 2.25rem);
  --type-display-4:       clamp(1.25rem, 0.8vw + 1rem, 1.625rem);
  --type-body-lg:         clamp(1.125rem, 0.3vw + 1rem, 1.25rem);
  --type-body:            1.0625rem;
  --type-caption:         0.8125rem;
  --type-tiny:            0.75rem;

  /* Modified Fibonacci spacing scale */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-20: 5rem;
  --space-32: 8rem;
  --space-52: 13rem;

  /* Layout */
  --measure: 62ch;
  --max-width: 1280px;
  --page-pad: clamp(1.25rem, 4vw, 3rem);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 240ms;
  --dur: 600ms;
  --dur-slow: 900ms;
}


/* -------------------------------------------------------------------------
 *  3. Base typography
 * ------------------------------------------------------------------------- */

html {
  font-family: var(--font-body);
  font-size: 17px;
  background: var(--ground);
  color: var(--ink);
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Sticky-header offset for anchor targets so the section heading isn't hidden under the nav. */
[id] { scroll-margin-top: 5rem; }

body {
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.005em;
  background: var(--ground);
}

p { max-width: var(--measure); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: balance;
}
h2, h3, h4 { font-weight: 500; letter-spacing: -0.012em; }
h1 { font-size: var(--type-display-1); }
h2 { font-size: var(--type-display-2); }
h3 { font-size: var(--type-display-3); }
h4 { font-size: var(--type-display-4); }

.devanagari {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--type-hero-devanagari);
  line-height: 0.9;
  letter-spacing: 0;
  color: var(--ink);
}

/* "Ink-in" — the Devanagari character resolves out of soft blur and slight
   letter-spread on page load, as though ink is just settling into the paper.
   Class is added by main.js on the first rAF after DOMContentLoaded so the
   transition fires once on initial paint. */
.home-hero .devanagari {
  opacity: 0;
  filter: blur(10px);
  letter-spacing: 0.05em;
  transition:
    opacity 1400ms var(--ease),
    filter 1400ms var(--ease),
    letter-spacing 1400ms var(--ease);
}
.home-hero .devanagari.ink-in-done {
  opacity: 1;
  filter: blur(0);
  letter-spacing: 0;
}
@media (prefers-reduced-motion: reduce) {
  .home-hero .devanagari {
    opacity: 1;
    filter: blur(0);
    letter-spacing: 0;
    transition: none;
  }
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--type-caption);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.lead {
  font-size: var(--type-body-lg);
  line-height: 1.55;
  color: var(--ink);
  max-width: var(--measure);
}

.kicker {
  display: block;
  font-family: var(--font-body);
  font-size: var(--type-caption);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-4);
}

::selection { background: var(--accent); color: var(--ground); }


/* -------------------------------------------------------------------------
 *  4. Links and focus
 * ------------------------------------------------------------------------- */

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.inline-link {
  position: relative;
  color: var(--ink);
  border-bottom: 1px solid var(--ink-line);
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.inline-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.005em;
}
.arrow-link::after {
  content: "";
  width: 1.5em;
  height: 1px;
  background: var(--ink);
  transition: width var(--dur) var(--ease), background var(--dur-fast) var(--ease);
}
.arrow-link:hover { color: var(--accent); }
.arrow-link:hover::after { width: 2.25em; background: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}


/* -------------------------------------------------------------------------
 *  5. Layout helpers
 * ------------------------------------------------------------------------- */

.page { display: flex; flex-direction: column; min-height: 100vh; }
.page > main { flex: 1; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.section { padding-block: var(--space-20); }
@media (min-width: 768px) { .section { padding-block: var(--space-32); } }

.section-tight { padding-block: var(--space-12); }
@media (min-width: 768px) { .section-tight { padding-block: var(--space-20); } }

.divider {
  height: 1px;
  background: var(--ink-line-soft);
  border: 0;
  margin: 0;
}
.divider-narrow {
  width: 4rem;
  height: 1px;
  background: var(--ink-line);
  border: 0;
}

/* "stack" — vertical rhythm helper */
.stack > * + * { margin-top: var(--space-6); }
.stack-tight > * + * { margin-top: var(--space-4); }
.stack-loose > * + * { margin-top: var(--space-8); }
.stack-airy  > * + * { margin-top: var(--space-12); }

.text-measure { max-width: var(--measure); }
.text-muted { color: var(--ink-muted); }


/* -------------------------------------------------------------------------
 *  6. Buttons
 * ------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.5em;
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  text-decoration: none;
}
.btn:hover { background: var(--ink); color: var(--ground); }

.btn-accent {
  background: var(--accent);
  color: var(--ground-paper);
  border-color: var(--accent);
}
.btn-accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--ground-paper); }

.btn-ghost { border-color: var(--ink-line); color: var(--ink-muted); }
.btn-ghost:hover { color: var(--ground); background: var(--ink); border-color: var(--ink); }

/* Button row — keeps a pair (or more) of buttons uniform in size + spacing,
   stacked full-width on narrow screens, equal-width side-by-side above. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: stretch;
}
.btn-row .btn {
  flex: 1 1 auto;
  min-width: 12rem;
  justify-content: center;
  text-align: center;
}
@media (min-width: 520px) {
  .btn-row .btn { flex: 0 1 auto; }
}


/* -------------------------------------------------------------------------
 *  7. Navigation
 * ------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklch, var(--ground) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--ink-line-soft); }

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-4);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--ink);
}
.logo-icon {
  display: block;
  height: 36px;
  width: auto;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .logo-icon { height: 44px; }
}
.logo-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.05;
}
.logo-mark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
@media (min-width: 768px) {
  .logo-mark { font-size: 1.375rem; }
}
.logo-place {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 3px;
}

.site-nav-links {
  display: none;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 980px) {
  .site-nav-links { display: flex; }
}

.site-nav-links a {
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  padding: var(--space-2) 0;
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.site-nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.site-nav-links a:hover,
.site-nav-links a.is-current {
  color: var(--ink);
}
.site-nav-links a:hover::after,
.site-nav-links a.is-current::after {
  transform: scaleX(1);
}

.nav-cta { display: none; }
@media (min-width: 980px) { .nav-cta { display: inline-flex; } }

/* Mobile nav toggle */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  color: var(--ink);
}
@media (min-width: 980px) { .nav-toggle { display: none; } }

.nav-toggle .bars {
  display: block;
  position: relative;
  width: 22px;
  height: 12px;
}
.nav-toggle .bars::before,
.nav-toggle .bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease), top var(--dur-fast) var(--ease);
}
.nav-toggle .bars::before { top: 0; }
.nav-toggle .bars::after  { top: 11px; }
.nav-toggle[aria-expanded="true"] .bars::before { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after  { top: 5px; transform: rotate(-45deg); }

/* Mobile nav panel */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--ground);
  z-index: 40;
  padding: calc(var(--space-20) + var(--space-4)) var(--page-pad) var(--space-12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility 0s;
}
.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}
.mobile-nav-links a {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 6vw + 1rem, 2.5rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.1;
}
.mobile-nav-links a .index {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  vertical-align: super;
  margin-right: 0.4em;
}
.mobile-nav-footer {
  border-top: 1px solid var(--ink-line-soft);
  padding-top: var(--space-8);
  color: var(--ink-muted);
  font-size: var(--type-caption);
  letter-spacing: 0.04em;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}


/* -------------------------------------------------------------------------
 *  8. Hero — home page
 * ------------------------------------------------------------------------- */

.home-hero {
  padding-block: var(--space-12) var(--space-20);
}
@media (min-width: 768px) {
  .home-hero { padding-block: var(--space-20) var(--space-32); }
}

.home-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: end;
}
@media (min-width: 880px) {
  .home-hero-grid {
    grid-template-columns: 1fr 1.15fr;
    gap: var(--space-12);
    align-items: stretch;
  }
}

.home-hero-text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-8);
}
.home-hero-text::before {
  content: "";
  position: absolute;
  inset: 0 -10% 0 -14%;
  z-index: -1;
  background-image: url("/img/sadhguru-1.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0.14;
  filter: grayscale(0.15) contrast(0.95);
  -webkit-mask-image:
    linear-gradient(to right, #000 0%, rgba(0,0,0,0.5) 55%, transparent 88%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image:
    linear-gradient(to right, #000 0%, rgba(0,0,0,0.5) 55%, transparent 88%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  pointer-events: none;
}
@media (min-width: 880px) {
  .home-hero-text::before { opacity: 0.18; }
}
@media (prefers-reduced-motion: no-preference) {
  .home-hero-text::before { transition: opacity 0.6s ease; }
}
.home-hero .devanagari {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}
.home-hero-headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.875rem, 3vw + 1rem, 2.875rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  max-width: 22ch;
  text-wrap: balance;
}
.home-hero-headline em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}
.home-hero-meta {
  font-size: var(--type-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.home-hero-meta::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--ink-line);
}

.home-hero-photo {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: transparent;
}
@media (min-width: 880px) {
  .home-hero-photo { aspect-ratio: 4 / 5; }
}
@media (min-width: 1180px) {
  .home-hero-photo { aspect-ratio: 5 / 6; }
}
.home-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.home-hero-caption {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  font-size: var(--type-tiny);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ground-paper);
  opacity: 0.7;
}


/* -------------------------------------------------------------------------
 *  9. Section headers
 * ------------------------------------------------------------------------- */

.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
  padding-top: var(--space-6);
  position: relative;
}
/* The hairline rule is drawn in via this pseudo-element instead of a static
   border, so it can animate left-to-right when the section header reveals.
   Like ink being drawn across the page. */
.section-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--ink-line-soft);
  transition: width 1100ms var(--ease);
  transition-delay: 80ms;
}
.section-header.is-visible::before { width: 100%; }
/* Fallback for browsers that don't trigger the reveal observer — the line
   must be present, just static. */
@media (prefers-reduced-motion: reduce) {
  .section-header::before { width: 100%; transition: none; }
}
.section-header h2 { max-width: 22ch; }
.section-header .lead { margin-top: var(--space-2); }
.section-header .number {
  font-family: var(--font-body);
  font-size: var(--type-tiny);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}


/* -------------------------------------------------------------------------
 *  10. Welcome block
 * ------------------------------------------------------------------------- */

.welcome {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}
@media (min-width: 880px) {
  .welcome { grid-template-columns: 5fr 7fr; gap: var(--space-32); align-items: start; }
}
.welcome-title {
  font-size: var(--type-display-2);
}


/* -------------------------------------------------------------------------
 *  11. Tradition block — Sadhguru / lineage preview
 * ------------------------------------------------------------------------- */

.tradition {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}
@media (min-width: 880px) {
  .tradition { grid-template-columns: 5fr 7fr; gap: var(--space-20); }
}
.tradition-figure {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: transparent;
}
.tradition-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.95);
}
.tradition-figcaption {
  margin-top: var(--space-3);
  font-size: var(--type-tiny);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}


/* -------------------------------------------------------------------------
 *  12. Editorial program list
 * ------------------------------------------------------------------------- */

.program-list { border-top: 1px solid var(--ink-line-soft); }
.program-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3) var(--space-8);
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--ink-line-soft);
  align-items: baseline;
}
@media (min-width: 768px) {
  .program-item {
    grid-template-columns: 2fr 5fr 1fr;
    padding-block: var(--space-12);
  }
}
.program-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.625rem, 2vw + 1rem, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
}
.program-name .sanskrit {
  display: block;
  font-style: italic;
  font-weight: 300;
  font-size: 0.625em;
  letter-spacing: 0;
  color: var(--ink-muted);
  margin-top: var(--space-1);
}
.program-desc {
  font-size: var(--type-body);
  line-height: 1.65;
  color: var(--ink);
  max-width: 56ch;
}
.program-action {
  display: flex;
  justify-content: flex-start;
}
@media (min-width: 768px) { .program-action { justify-content: flex-end; } }


/* -------------------------------------------------------------------------
 *  13. Pull quote (Sadhguru)
 * ------------------------------------------------------------------------- */

.pull-quote-wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.pull-quote-wrap .backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.pull-quote-wrap .backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.13;
  filter: sepia(0.30) saturate(0.65) brightness(0.95) contrast(1.05);
}
/* Side-fade so the photograph melts into the ground at the page edges */
.pull-quote-wrap .backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 50%,
      transparent 0%,
      transparent 35%,
      var(--ground) 100%);
}

.pull-quote {
  padding-block: var(--space-20);
  text-align: left;
  max-width: 30ch;
  margin-inline: auto;
  position: relative;
}
@media (min-width: 768px) {
  .pull-quote { padding-block: var(--space-32); }
}
.pull-quote blockquote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.625rem, 2.4vw + 1rem, 2.75rem);
  line-height: 1.25;
  letter-spacing: -0.014em;
  text-wrap: balance;
}
.pull-quote blockquote::before {
  content: "“";
  display: block;
  font-size: 2em;
  line-height: 0.6;
  color: var(--accent);
  margin-bottom: 0.2em;
}
.pull-quote cite {
  display: block;
  margin-top: var(--space-6);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--type-caption);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}


/* -------------------------------------------------------------------------
 *  14. Teacher block
 * ------------------------------------------------------------------------- */

.teacher {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}
@media (min-width: 880px) {
  .teacher {
    grid-template-columns: 6fr 5fr;
    gap: var(--space-20);
    align-items: center;
  }
}
.teacher-figure {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: transparent;
}
.teacher-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
.teacher-figure-small {
  background: transparent;
}

/* Stacked secondary portrait (for /about Gino section) */
.teacher-figure-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 580px) {
  .teacher-figure-pair {
    grid-template-columns: 7fr 5fr;
    grid-template-rows: auto auto;
    gap: var(--space-4);
  }
  .teacher-figure-pair .teacher-figure:first-child {
    grid-row: 1 / span 2;
  }
  .teacher-figure-pair .teacher-figure-small {
    aspect-ratio: 1 / 1;
  }
}
.teacher-figure-small {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ground-deeper);
}
.teacher-figure-small img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Narrative section with portrait — for /about Sadhguru and Isha sections */
.narrative-with-portrait {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  padding-block: var(--space-12);
}
@media (min-width: 880px) {
  .narrative-with-portrait {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-20);
    padding-block: var(--space-20);
    align-items: start;
  }
}
.narrative-portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: transparent;
  position: relative;
}
.narrative-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.narrative-portrait-caption {
  position: absolute;
  left: var(--space-3); right: var(--space-3);
  bottom: var(--space-3);
  font-size: var(--type-tiny);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ground-paper);
  text-shadow: 0 1px 2px oklch(0.2 0.03 50 / 0.6);
}
.narrative-with-portrait .prose .lead { margin-bottom: var(--space-6); }


/* -------------------------------------------------------------------------
 *  15. Begin practice (booking prompt on home)
 * ------------------------------------------------------------------------- */

.begin-practice {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  border-top: 1px solid var(--ink-line-soft);
  padding-top: var(--space-12);
}
@media (min-width: 768px) {
  .begin-practice {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
}
.begin-practice-card {
  padding: var(--space-8) 0;
}
@media (min-width: 768px) {
  .begin-practice-card {
    padding: 0 var(--space-12);
  }
  .begin-practice-card + .begin-practice-card {
    border-left: 1px solid var(--ink-line-soft);
  }
}
.begin-practice-card h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.625rem, 1.5vw + 1rem, 2.125rem);
  margin-bottom: var(--space-3);
}
.begin-practice-card p {
  color: var(--ink-muted);
  font-size: var(--type-body);
  margin-bottom: var(--space-6);
}


/* -------------------------------------------------------------------------
 *  16. Page hero (smaller, for inner pages)
 * ------------------------------------------------------------------------- */

.page-hero {
  padding-block: var(--space-12) var(--space-12);
  border-bottom: 1px solid var(--ink-line-soft);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Faded backdrop on page heroes — slightly more aggressive than pull-quotes,
   because there's denser text overlay (H1 + breadcrumb + lead). */
.page-hero > .backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.page-hero > .backdrop img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.10;
  filter: sepia(0.35) saturate(0.55) brightness(0.97) contrast(1.05);
}
.page-hero > .backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    110% 80% at 50% 50%,
    transparent 0%,
    transparent 28%,
    var(--ground) 100%
  );
}
@media (min-width: 768px) {
  .page-hero { padding-block: var(--space-20) var(--space-20); }
}
.page-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: end;
}
@media (min-width: 880px) {
  .page-hero-grid {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-20);
  }
}
.page-hero h1 {
  font-size: var(--type-display-1);
  font-weight: 300;
  max-width: 14ch;
}
.page-hero .lead {
  margin-top: var(--space-6);
}
.page-hero .breadcrumb {
  font-size: var(--type-tiny);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.page-hero .breadcrumb::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--ink-line);
}


/* -------------------------------------------------------------------------
 *  17. Editorial body — narrative pages (about, programs intro)
 * ------------------------------------------------------------------------- */

.prose {
  max-width: var(--measure);
}
.prose p { margin-bottom: var(--space-6); }
.prose p:last-child { margin-bottom: 0; }
.prose p + p { margin-top: 0; }
.prose h2, .prose h3 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }

.narrative-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-block: var(--space-12);
}
@media (min-width: 880px) {
  .narrative-section {
    grid-template-columns: 3fr 8fr;
    gap: var(--space-20);
    padding-block: var(--space-20);
  }
}
.narrative-section .kicker { margin-bottom: 0; }


/* -------------------------------------------------------------------------
 *  18. Photo strip (full-bleed image inside a section)
 * ------------------------------------------------------------------------- */

.photo-strip {
  width: 100%;
  margin-block: var(--space-12);
  margin-inline: 0;
  background: transparent;
  overflow: hidden;
}
.photo-strip img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
@media (min-width: 768px) {
  .photo-strip img { aspect-ratio: 21 / 8; height: auto; }
}
.photo-strip-caption {
  position: relative;
  z-index: 1;
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--type-tiny);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}


/* -------------------------------------------------------------------------
 *  19. Two-up callouts (about/credentials, classes/what-to-expect)
 * ------------------------------------------------------------------------- */

.callouts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 768px) {
  .callouts { grid-template-columns: repeat(3, 1fr); gap: var(--space-12); }
}
.callout {
  padding-top: var(--space-6);
  border-top: 1px solid var(--ink-line);
}
.callout h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-display-3);
  margin-bottom: var(--space-3);
}
.callout p {
  font-size: var(--type-body);
  color: var(--ink-muted);
}


/* -------------------------------------------------------------------------
 *  19b. Video embed (lite YouTube pattern)
 *  Thumbnail + play button. Iframe is injected on click via main.js,
 *  so the page loads zero YouTube assets until the visitor opts in.
 * ------------------------------------------------------------------------- */

.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background: var(--ground-deeper);
  border: 0;
  padding: 0;
  cursor: pointer;
  display: block;
  isolation: isolate;
}
.video-embed img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.video-embed:hover img { transform: scale(1.02); }
.video-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  z-index: 2;
}
.video-embed .play {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease);
}
.video-embed .play-circle {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--ground-paper) 90%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  transition: background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  box-shadow: 0 1px 0 oklch(0.2 0.03 50 / 0.08);
}
.video-embed:hover .play-circle {
  background: var(--ground-paper);
  transform: scale(1.04);
}
.video-embed .play-arrow {
  width: 0; height: 0;
  border-style: solid;
  border-width: 12px 0 12px 18px;
  border-color: transparent transparent transparent var(--ink);
  margin-left: 5px;
}
.video-embed.is-playing .play { opacity: 0; pointer-events: none; }
.video-embed:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}


/* -------------------------------------------------------------------------
 *  19c. Program entry with paired image (Programs page upgrade)
 * ------------------------------------------------------------------------- */

.programs-entry-figure {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: transparent;
}
.programs-entry-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--dur-slow) var(--ease);
}
.programs-entry-figure:hover img { transform: scale(1.02); }

.programs-entry.has-image {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-block: var(--space-12);
  border-top: 1px solid var(--ink-line-soft);
}
@media (min-width: 880px) {
  .programs-entry.has-image {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-20);
    padding-block: var(--space-20);
    align-items: center;
  }
  /* Alternate image alignment per entry — visual rhythm */
  .programs-entry.has-image.is-reversed {
    grid-template-columns: 7fr 5fr;
  }
  .programs-entry.has-image.is-reversed .programs-entry-figure { order: 2; }
}


/* -------------------------------------------------------------------------
 *  19d. Event cards (workshop & class listings)
 *
 *  Editorial-format cards — no rounded SaaS-grid feel. Each event is a
 *  vertical entry with a date column, a body column, and a Register CTA.
 * ------------------------------------------------------------------------- */

.event-list {
  border-top: 1px solid var(--ink-line-soft);
}
.event {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--ink-line-soft);
}
@media (min-width: 768px) {
  .event {
    grid-template-columns: 4fr 8fr 3fr;
    gap: var(--space-12);
    padding-block: var(--space-12);
    align-items: start;
  }
}

.event-when {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.event-dates {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  line-height: 1.05;
  letter-spacing: -0.012em;
}
.event-times {
  font-family: var(--font-body);
  font-size: var(--type-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.event-location {
  font-family: var(--font-body);
  font-size: var(--type-caption);
  color: var(--ink-faint);
  margin-top: var(--space-2);
}

.event-body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-display-3);
  margin-bottom: var(--space-1);
}
.event-body .event-sanskrit {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--type-body-lg);
  color: var(--ink-muted);
  margin-bottom: var(--space-3);
  letter-spacing: 0;
}
.event-body p {
  font-size: var(--type-body);
  color: var(--ink);
  line-height: 1.55;
  max-width: 56ch;
}
.event-body p + p { margin-top: var(--space-3); }

.event-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}
@media (min-width: 768px) {
  .event-meta { align-items: flex-end; text-align: right; }
}
.event-price {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-display-4);
  letter-spacing: -0.008em;
  color: var(--ink);
}
.event-capacity,
.event-closes {
  font-family: var(--font-body);
  font-size: var(--type-tiny);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Status indicators */
.event[data-status="full"] .event-status,
.event[data-status="cancelled"] .event-status,
.event[data-status="past"] .event-status {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--type-tiny);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--ink-line);
  color: var(--ink-muted);
}
.event[data-status="full"] .event-cta,
.event[data-status="past"] .event-cta,
.event[data-status="cancelled"] .event-cta { display: none; }


/* -------------------------------------------------------------------------
 *  19e. Registration form (WhatsApp deeplink)
 * ------------------------------------------------------------------------- */

.reg-form-section {
  background: var(--ground-paper);
  border: 1px solid var(--ink-line-soft);
  border-radius: 12px;
  padding: var(--space-8);
  margin-block: var(--space-12);
}
@media (min-width: 768px) {
  .reg-form-section { padding: var(--space-12); }
}
.reg-form-section .eyebrow { margin-bottom: var(--space-3); }
.reg-form-section h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--type-display-3);
  margin-bottom: var(--space-2);
}
.reg-form-section .lead {
  margin-bottom: var(--space-8);
  max-width: 56ch;
}

.reg-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .reg-form { grid-template-columns: 1fr 1fr; }
  .reg-form .field-full { grid-column: 1 / -1; }
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field label {
  font-family: var(--font-body);
  font-size: var(--type-tiny);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.field input,
.field select {
  font-family: var(--font-body);
  font-size: var(--type-body);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-line);
  padding: var(--space-3) 0;
  transition: border-color var(--dur-fast) var(--ease);
  border-radius: 0;
}
.field input:focus,
.field select:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.field input:invalid:not(:placeholder-shown) {
  border-bottom-color: oklch(0.55 0.18 25);
}
.field input::placeholder {
  color: var(--ink-faint);
}

/* Payment-method picker — three radio cards styled as labeled tiles. */
.field-fieldset {
  grid-column: 1 / -1;
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.field-fieldset > legend {
  font-family: var(--font-body);
  font-size: var(--type-tiny);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-2);
  padding: 0;
}
.payment-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .payment-options { grid-template-columns: repeat(3, 1fr); }
}
.payment-option {
  position: relative;
  cursor: pointer;
  display: block;
}
.payment-option input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.payment-option-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-4);
  border: 1px solid var(--ink-line);
  border-radius: 8px;
  background: var(--ground);
  transition:
    border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.payment-option:hover .payment-option-label {
  border-color: var(--ink);
}
.payment-option input[type="radio"]:focus-visible + .payment-option-label {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.payment-option input[type="radio"]:checked + .payment-option-label {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 8%, var(--ground));
}
.payment-option-label .label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-display-4);
  letter-spacing: -0.008em;
  color: var(--ink);
  line-height: 1.15;
}
.payment-option-label .desc {
  font-size: var(--type-caption);
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

.reg-form-actions {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  grid-column: 1 / -1;
}
@media (min-width: 768px) {
  .reg-form-actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.reg-form .privacy {
  font-size: var(--type-caption);
  color: var(--ink-muted);
  max-width: 60ch;
}
.reg-form .privacy a { color: var(--ink); border-bottom: 1px solid var(--ink-line); }


/* Event empty state (no upcoming events) */
.event-empty {
  padding-block: var(--space-12);
  text-align: center;
  border-top: 1px solid var(--ink-line-soft);
}
.event-empty h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--type-display-3);
  margin-bottom: var(--space-3);
}
.event-empty p {
  color: var(--ink-muted);
  max-width: 48ch;
  margin-inline: auto;
}


/* -------------------------------------------------------------------------
 *  20. Momence widget placeholder
 * ------------------------------------------------------------------------- */

.momence-mount {
  margin-block: var(--space-12);
  padding: var(--space-12) var(--space-6);
  border: 1px dashed var(--ink-line);
  background: var(--ground-paper);
  min-height: 24rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.momence-mount-inner {
  max-width: 36ch;
}
.momence-mount .eyebrow { margin-bottom: var(--space-4); }
.momence-mount h3 {
  font-size: var(--type-display-3);
  margin-bottom: var(--space-3);
}
.momence-mount p {
  color: var(--ink-muted);
  font-size: var(--type-body);
  max-width: none;
}
/* When the live widget is mounted, replace the dashed placeholder styling */
.momence-mount.is-live {
  border-style: solid;
  border-color: var(--ink-line-soft);
  padding: 0;
  background: transparent;
}


/* -------------------------------------------------------------------------
 *  21. Visit grid (address / map / first-visit)
 * ------------------------------------------------------------------------- */

.visit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}
@media (min-width: 880px) {
  .visit-grid { grid-template-columns: 5fr 7fr; gap: var(--space-20); }
}
.visit-info {
  font-size: var(--type-body);
}
.visit-info .field-group {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--ink-line-soft);
}
.visit-info .field-group:first-child { padding-top: 0; }
.visit-info .field-label {
  display: block;
  font-size: var(--type-tiny);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-2);
}
.visit-info .field-value {
  font-size: var(--type-body-lg);
  color: var(--ink);
  line-height: 1.45;
}
.visit-info .field-aside {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--type-caption);
  color: var(--ink-muted);
  font-style: italic;
}

.map-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ground-deeper);
  border: 1px solid var(--ink-line-soft);
}
.map-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  filter: grayscale(0.4) saturate(0.85) brightness(0.97);
}


/* -------------------------------------------------------------------------
 *  22. Footer
 * ------------------------------------------------------------------------- */

.site-footer {
  background: var(--ground-deeper);
  border-top: 1px solid var(--ink-line-soft);
  margin-top: var(--space-32);
  padding-block: var(--space-20) var(--space-8);
}
.site-footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--ink-line-soft);
}
@media (min-width: 768px) {
  .site-footer-top {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-12);
  }
}
.site-footer h4 {
  font-family: var(--font-body);
  font-size: var(--type-tiny);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-4);
}
.site-footer .footer-address {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--type-display-3);
  line-height: 1.25;
  max-width: 24ch;
  color: var(--ink);
}
.site-footer .footer-contact a {
  font-size: var(--type-body);
  color: var(--ink);
  display: inline-block;
}
.site-footer .footer-contact .field-aside { color: var(--ink-muted); font-size: var(--type-caption); }
.site-footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-6);
  font-size: var(--type-tiny);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
@media (min-width: 768px) {
  .site-footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.site-footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}


/* -------------------------------------------------------------------------
 *  22b. Soft-edge photography
 *  Major photographs feather into the warm-paper ground using two layered
 *  effects:
 *
 *    (1) A radial mask fades the image alpha to transparent at corners and
 *        outer edges. This dissolves the rectangle silhouette.
 *
 *    (2) A pseudo-element overlay paints a soft, blurred warm-ivory vignette
 *        ON TOP of the image, ensuring all four edges visibly haze into the
 *        page ground regardless of image content. This is what produces the
 *        actually-visible softening — a mask alone is too subtle.
 *
 *  Note: the container's background must be transparent so the page ground
 *  shows through where the image is masked away or where the vignette hazes
 *  the edges.
 * ------------------------------------------------------------------------- */

.home-hero-photo > img,
.tradition-figure > img,
.teacher-figure > img,
.teacher-figure-small > img,
.narrative-portrait > img,
.programs-entry-figure > img {
  -webkit-mask-image: radial-gradient(
    ellipse 115% 100% at 50% 50%,
    black 0%,
    black 50%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 115% 100% at 50% 50%,
    black 0%,
    black 50%,
    transparent 100%
  );
}

/* Photo strips are very wide — fade horizontally too. */
.photo-strip > img {
  -webkit-mask-image: radial-gradient(
    ellipse 110% 150% at 50% 50%,
    black 0%,
    black 55%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 110% 150% at 50% 50%,
    black 0%,
    black 55%,
    transparent 100%
  );
}

/* Soft ground-colored vignette OVER each image, painting a haze on all
   four edges. This is the dominant visible effect — the mask supports it. */
.home-hero-photo,
.tradition-figure,
.teacher-figure,
.teacher-figure-small,
.narrative-portrait,
.programs-entry-figure,
.photo-strip {
  position: relative;
  border-radius: 12px;
}

/* Coherent radius across all rectangular media for visual consistency. */
.video-embed,
.map-frame,
.momence-mount {
  border-radius: 12px;
}
.video-embed img,
.map-frame iframe {
  border-radius: 12px;
}
.home-hero-photo::after,
.tradition-figure::after,
.teacher-figure::after,
.teacher-figure-small::after,
.narrative-portrait::after,
.programs-entry-figure::after,
.photo-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 60px 12px var(--ground),
    inset 0 0 18px 0   var(--ground);
}
/* In sections that sit on the deeper ground, the vignette must match
   THAT colour to blend correctly. */
section[style*="--ground-deeper"] .home-hero-photo::after,
section[style*="--ground-deeper"] .tradition-figure::after,
section[style*="--ground-deeper"] .teacher-figure::after,
section[style*="--ground-deeper"] .narrative-portrait::after,
section[style*="--ground-deeper"] .programs-entry-figure::after,
section[style*="--ground-deeper"] .photo-strip::after,
section[style*="ground-deeper"] .home-hero-photo::after,
section[style*="ground-deeper"] .tradition-figure::after,
section[style*="ground-deeper"] .teacher-figure::after,
section[style*="ground-deeper"] .narrative-portrait::after,
section[style*="ground-deeper"] .programs-entry-figure::after,
section[style*="ground-deeper"] .photo-strip::after {
  box-shadow:
    inset 0 0 60px 12px var(--ground-deeper),
    inset 0 0 18px 0   var(--ground-deeper);
}


/* -------------------------------------------------------------------------
 *  23. Entrance animations
 * ------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Figures with reveal use a more pronounced scale instead of translate —
   the image "settles" into place rather than rising. */
figure[data-reveal],
.home-hero-photo[data-reveal] {
  transform: scale(1.04);
  transform-origin: center;
}
figure[data-reveal].is-visible,
.home-hero-photo[data-reveal].is-visible {
  transform: scale(1);
}
[data-reveal][data-reveal-delay="100"] { transition-delay: 100ms; }
[data-reveal][data-reveal-delay="200"] { transition-delay: 200ms; }
[data-reveal][data-reveal-delay="300"] { transition-delay: 300ms; }


/* -------------------------------------------------------------------------
 *  23b. Scroll-driven "breathe" — major headings and pull-quote text scale
 *  up as they enter the viewport centre and scale back down as they exit.
 *
 *  Implemented with native CSS scroll-driven animations (Chrome 115+,
 *  Firefox 121+, Safari TP). Browsers without support get no animation,
 *  which is the correct fallback (text just sits at its normal size).
 * ------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
  .section-header h2,
  .programs-entry-body h2,
  .narrative-with-portrait h2,
  .home-hero-headline {
    animation-name: scroll-breathe-subtle;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
    transform-origin: left center;
    will-change: transform;
  }

  .pull-quote blockquote {
    animation-name: scroll-breathe;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
    transform-origin: center;
    will-change: transform;
  }

  /* Devanagari hero word — slightly more dramatic since it's the focal point. */
  .home-hero .devanagari {
    animation-name: scroll-breathe-strong;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
    transform-origin: left center;
    will-change: transform;
  }
}

@keyframes scroll-breathe-subtle {
  0%   { transform: scale(0.94); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(0.94); }
}

@keyframes scroll-breathe {
  0%   { transform: scale(0.90); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(0.90); }
}

@keyframes scroll-breathe-strong {
  0%   { transform: scale(0.82); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(0.82); }
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  /* Explicit override for scroll-driven animations — keep text at full scale. */
  .section-header h2,
  .programs-entry-body h2,
  .narrative-with-portrait h2,
  .home-hero-headline,
  .pull-quote blockquote,
  .home-hero .devanagari {
    animation: none !important;
    transform: none !important;
  }
}


/* -------------------------------------------------------------------------
 *  23c. Floating WhatsApp button
 *
 *  Fixed bottom-right action that's always one tap away. Uses the official
 *  WhatsApp brand green because that's the recognisable affordance — visitors
 *  scan for it. The rest of the page stays in the restrained warm-paper
 *  palette; this single saturated mark earns its presence by serving a
 *  clearly functional purpose (it's not decoration).
 * ------------------------------------------------------------------------- */

.fab-whatsapp {
  position: fixed;
  bottom: 18px;
  right: 18px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 100;
  box-shadow:
    0 6px 18px oklch(0.6 0.18 150 / 0.30),
    0 2px 4px oklch(0.15 0.02 50 / 0.18);
  transition:
    transform 260ms var(--ease),
    box-shadow 260ms var(--ease),
    background 200ms var(--ease);
}
.fab-whatsapp:hover {
  transform: scale(1.05);
  background: #1ebe5d;
  box-shadow:
    0 10px 24px oklch(0.6 0.18 150 / 0.40),
    0 3px 6px oklch(0.15 0.02 50 / 0.22);
}
.fab-whatsapp:active { transform: scale(0.98); }
.fab-whatsapp:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.fab-whatsapp svg {
  width: 30px;
  height: 30px;
  display: block;
  fill: currentColor;
}
@media (min-width: 768px) {
  .fab-whatsapp {
    width: 62px;
    height: 62px;
    bottom: 26px;
    right: 26px;
  }
  .fab-whatsapp svg { width: 32px; height: 32px; }
}

/* Subtle one-time entrance — fades in after the page settles, so it
   doesn't compete with the hero. No pulse, no bounce. */
.fab-whatsapp {
  opacity: 0;
  transform: translateY(8px);
  animation: fab-in 800ms var(--ease) 600ms forwards;
}
@keyframes fab-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .fab-whatsapp { opacity: 1; transform: none; animation: none; }
}


/* -------------------------------------------------------------------------
 *  24. Utility tweaks
 * ------------------------------------------------------------------------- */

.is-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.no-wrap { white-space: nowrap; }