/* =========================================================================
   djjs.us public sanctuary (homepage, privacy, 404, kiosk base, admin desks)
   Palette (v1.3.8 luxury system): Midnight Onyx #0D0B09 canvas with radial amber underlays · #161311 panels with a 1px
   rgba(217,119,6,.35) gold border (dark) / Sacred Parchment #FCFBF7 (light) · Imperial Crimson #78122B · Deep Burgundy
   #4C0519 · Radiant Temple Amber #D97706.
   v1.0.3: public pages open in Temple Dark (onyx canvas, parchment text); light is the visitor's choice.
   Type: Cinzel display capitals (eyebrows, kickers, menu pillars), Cormorant Garamond headings, Plus Jakarta Sans body
   (line-height 1.7), Mukta for Devanagari. Tactile layer (glass panels, 4px lift with amber edge glow, focus rings,
   golden scrollbars, hero particles in assets/js/hero-particles.js): "v1.3.8 luxury design system" at the end.
   Breakpoints: < 640 phones · 640–1023 tablets (mobile header + drawer) · ≥ 1024 desktop header · ≥ 1280 wide.
   Hover styles live inside @media (hover: hover) and (pointer: fine), so nothing sticks after a tap on iOS.
   Festival themes (navratri, diwali, janmashtami, winter, holi, gurupurnima) tint the hero, the swaroop
   halo, the garland and the emblem: see "Festival themes".
   ========================================================================= */

/* ---------- Fonts (self-hosted, SIL Open Font License: assets/fonts/OFL-*.txt) ---------- */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-500-normal.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-600-normal.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-500-italic.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-400-normal.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; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext-400-normal.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: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-500-normal.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; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext-500-normal.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: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-600-normal.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; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext-600-normal.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: "Mukta"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/mukta-latin-400-normal.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Mukta"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/mukta-devanagari-400-normal.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Mukta"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/mukta-latin-500-normal.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Mukta"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/mukta-devanagari-500-normal.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Mukta"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/mukta-latin-600-normal.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Mukta"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/mukta-devanagari-600-normal.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF; }
/* v1.3.8: Cinzel, the classical display capitals (latin only; SIL OFL, assets/fonts/OFL-Cinzel.txt) */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/cinzel-latin-500-normal.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; }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/cinzel-latin-600-normal.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; }
/* Metric-matched fallbacks (no layout shift when the web fonts swap in): local Arial / Times New Roman
   resized to Plus Jakarta Sans / Cormorant's average glyph width, ascent and descent. */
@font-face { font-family: "Jakarta Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto");
  size-adjust: 105.08%; ascent-override: 98.78%; descent-override: 21.13%; line-gap-override: 0%; }
@font-face { font-family: "Cinzel Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Times"), local("Liberation Serif");
  size-adjust: 100.9%; ascent-override: 97.1%; descent-override: 36.7%; line-gap-override: 0%; } /* v1.3.8: measured on uppercase Cinzel 600 */
@font-face { font-family: "Cormorant Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Times"), local("Liberation Serif");
  size-adjust: 97.62%; ascent-override: 94.65%; descent-override: 29.4%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */
/* Colours are scoped to [data-theme] so any block (e.g. the media desk's dark preview) can switch theme. */
:root, [data-theme="light"] {
  --parchment: #FCFBF7;                           /* Sacred Parchment */
  --surface: #FCFBF7;                             /* v1.3.8: cards and panels are Sacred Parchment, set off by the gold border */
  --sunken: #F5EFE4;
  --line: #E8DCC8;
  --champagne: rgba(245, 158, 11, 0.2);           /* border-amber-500/20: the champagne hairline */
  --champagne-strong: rgba(217, 119, 6, 0.45);
  --ink: #1E1412;
  --muted: #6A564E;                               /* 6.6:1 on parchment */
  --accent: #78122B;                              /* text and line accents */
  --vermilion: #78122B;                           /* fills: buttons, nodes */
  --vermilion-deep: #4C0519;
  --night: #3A0A18;
  --on-vermilion: #FFF7EE;
  --amber: #D97706;
  --amber-ink: #92400E;
  --amber-glow: #F59E0B;
  --gold-text: #8A4B0B;                           /* 6.6:1 on parchment */
  --wa: #0F7A6C;                                  /* WhatsApp, dark enough for white text */
  --danger: #B42318;
  --success: #2F6B3A;
  --focus: #78122B;
  --card-border: rgba(217, 119, 6, 0.3);          /* v1.3.8: the gold hairline of cards and panels */
  --glass-panel: rgba(252, 251, 247, 0.82);       /* v1.3.8: glass panels (blur 12px) */
  --edge-glow: 0 0 0 1px rgba(217, 119, 6, 0.55), 0 18px 40px -18px rgba(217, 119, 6, 0.45), 0 10px 24px -16px rgba(76, 5, 25, 0.25);
  --canvas-underlay: radial-gradient(1200px 760px at 88% -8%, rgba(217, 119, 6, 0.07), transparent 62%);
  --scroll-thumb: rgba(180, 100, 10, 0.55);
  --header-bg: rgba(252, 251, 247, 0.78);
  --header-bg-solid: rgba(252, 251, 247, 0.94);
  --header-bg-opaque: #FCFBF7;
  --glass: rgba(252, 251, 247, 0.86);
  --swaroop-bg: #F4E7CF;
  --particle: rgba(217, 119, 6, 0.32);
  --aura: rgba(245, 158, 11, 0.1);                /* blur-3xl bg-amber-500/10 */
  --season-glow: rgba(245, 158, 11, 0.12);        /* festival light behind the hero portrait */
  --season-tint: rgba(120, 18, 43, 0.05);         /* festival wash in the hero's far corner */
  /* Elevation: soft, layered, warm (maroon-tinted) shadows */
  --shadow-soft: 0 1px 2px rgba(58, 10, 24, 0.06), 0 8px 24px -12px rgba(58, 10, 24, 0.16), 0 24px 48px -28px rgba(120, 18, 43, 0.22);
  --shadow-lift: 0 2px 4px rgba(58, 10, 24, 0.07), 0 14px 32px -14px rgba(58, 10, 24, 0.22), 0 32px 64px -30px rgba(120, 18, 43, 0.3);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236A564E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  color-scheme: light;
}
/* Temple Dark: Midnight Onyx, Deep Vermilion, Radiant Amber, gold-leaf borders */
[data-theme="dark"] {
  --parchment: var(--onyx);
  --surface: #161311;                             /* elevated surfaces: cards and panels */
  --sunken: #110E0B;
  --line: rgba(245, 158, 11, 0.2);
  --champagne: rgba(245, 158, 11, 0.2);
  --champagne-strong: rgba(245, 158, 11, 0.45);
  --ink: #FCFBF7;                                 /* Crisp Parchment */
  --muted: #BBA996;                               /* 8.6:1 on onyx */
  --accent: #F2B54C;
  --vermilion: #78122B;
  --vermilion-deep: #A0183F;
  --night: #1C0910;
  --on-vermilion: #FFF7EE;
  --amber: #E8962A;
  --amber-ink: #F5B544;
  --amber-glow: #F59E0B;
  --gold-text: #F2B54C;
  --wa: #0F7A6C;
  --danger: #F87171;
  --success: #6EE7A1;
  --focus: #FCD34D;
  --card-border: rgba(217, 119, 6, 0.35);
  --glass-panel: rgba(28, 25, 23, 0.6);
  --edge-glow: 0 0 0 1px rgba(217, 119, 6, 0.6), 0 18px 44px -16px rgba(217, 119, 6, 0.38), 0 24px 48px -24px rgb(0 0 0 / 0.7);
  --canvas-underlay: radial-gradient(1400px 900px at 86% -10%, rgba(217, 119, 6, 0.1), transparent 60%),
    radial-gradient(1100px 820px at -12% 22%, rgba(120, 18, 43, 0.13), transparent 62%);
  --scroll-thumb: rgba(217, 119, 6, 0.6);
  --header-bg: rgba(13, 11, 9, 0.74);
  --header-bg-solid: rgba(13, 11, 9, 0.92);
  --header-bg-opaque: #0D0B09;
  --glass: rgba(22, 18, 14, 0.86);
  --swaroop-bg: #1D1510;
  --particle: rgba(245, 180, 76, 0.55);
  --aura: rgba(245, 158, 11, 0.1);
  --season-glow: rgba(245, 158, 11, 0.16);
  --season-tint: rgba(120, 18, 43, 0.22);
  --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 24px -12px rgb(0 0 0 / 0.55), 0 0 0 1px rgba(245, 158, 11, 0.04);
  --shadow-lift: 0 2px 2px rgb(0 0 0 / 0.3), 0 16px 32px -10px rgb(0 0 0 / 0.55), 0 32px 60px -24px rgb(0 0 0 / 0.6);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23BBA996' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  color-scheme: dark;
}
:root {
  /* The four brand colours, the same in both modes */
  --sacred-parchment: #FCFBF7;
  --deep-vermilion: #78122B;                      /* kept name: now Imperial Crimson */
  --imperial-crimson: #78122B;
  --deep-burgundy: #4C0519;
  --radiant-amber: #D97706;                       /* Radiant Temple Amber */
  --onyx: #0D0B09;                                /* Midnight Onyx: Temple Dark's ground */
  --gold-leaf: linear-gradient(90deg, transparent, rgba(217, 119, 6, 0.55) 18%, #F2C14E 50%, rgba(217, 119, 6, 0.55) 82%, transparent);
  --season-aura: rgba(245, 158, 11, 0.2);         /* the swaroop's glowing halo */
  --season-ring: rgba(245, 158, 11, 0.16);        /* the ring around the Sangat Portal pill */

  --display: "Cinzel", "Cinzel Fallback", "Cormorant Garamond", "Cormorant Fallback", "Mukta", Georgia, serif;
  --serif: "Cormorant Garamond", "Cormorant Fallback", "Tiro Devanagari Hindi", "Iowan Old Style", Georgia, serif;
  --sans: "Plus Jakarta Sans", "Jakarta Fallback", "Mukta", system-ui, -apple-system, "Segoe UI", "Noto Sans Devanagari", "Noto Sans Gurmukhi", sans-serif;
  --deva: "Mukta", "Tiro Devanagari Hindi", "Noto Sans Devanagari", var(--sans);
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 0.75, 0.2);

  --wrap: 1280px;                                 /* 1360px from 1600px, 1440px from 1880px: no oversized side margins */
  --gutter: clamp(16px, 4.5vw, 56px);
  --safe-x: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --header-h: 80px;
  --section: clamp(64px, 8vw, 112px);
  --radius-card: 20px;
  --t-fast: 160ms;                                /* micro-interactions: 150–220 ms */
  --t-base: 200ms;

  /* Type scale */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-h2: clamp(2.125rem, 1.35rem + 3.3vw, 3.75rem);
  --fs-h1: clamp(2.6rem, 1.5rem + 4.9vw, 5.5rem);
}

@media (min-width: 1600px) { :root { --wrap: 1360px; } }
@media (min-width: 1880px) { :root { --wrap: 1440px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 20px); }
/* No sideways page scroll, without creating a second scroller. Only <body> carries the rule: while <html> stays
   overflow: visible, body's value moves to the viewport (clip → hidden there), so neither <html> nor <body> becomes a
   scroll container. Setting it on both (as before) made <body> one on iOS Safari 15, which has no overflow: clip: the
   sticky header stopped sticking and composited layers (headings mid-reveal) drifted over the text while scrolling.
   Wide decorative layers are clipped by their own sections (.hero, .sanctuary, .page …), never by the page. */
body { overflow-x: hidden; }
@supports (overflow-x: clip) { body { overflow-x: clip; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.1; margin: 0; letter-spacing: -0.012em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
address { font-style: normal; }
button { font: inherit; color: inherit; touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
::selection { background: rgba(245, 158, 11, 0.35); color: var(--ink); }
[hidden] { display: none !important; }
[lang="hi"] { font-family: var(--deva); }
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--accent); text-decoration-thickness: 2px; }
}

.wrap { width: min(100% - 2 * max(var(--gutter), var(--safe-x)), var(--wrap)); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--vermilion); color: var(--on-vermilion); padding: 12px 18px; border-radius: 999px; font-weight: 600; }
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }
.lead { font-family: var(--serif); font-size: var(--fs-lg); line-height: 1.5; color: var(--ink); font-weight: 500; }

/* Eyebrows: small gold capitals, with the lotus ornament on section heads */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.75em; margin: 0 0 1.1rem;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-text);
}
.eyebrow .ornament { color: var(--amber); flex: none; }
.section-head--center .eyebrow--ornate, .page__inner--center .eyebrow { flex-direction: column; gap: 0.7rem; }
.eyebrow--light { color: #F2C978; }
.ornament { display: block; }

/* Reveal on scroll (site.js adds .reveal-ready only when IntersectionObserver exists and motion is welcome) */
.reveal-ready [data-reveal]:not(.is-in) { opacity: 0; }
.reveal-ready [data-reveal].is-in { animation: reveal-up 900ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes reveal-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* The Brahm Gyan story's heading fades in without movement: no transformed layers over text while iOS Safari scrolls. */
.reveal-ready .science [data-reveal].is-in { animation-name: reveal-fade; }
@keyframes reveal-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Buttons (every button, pill and chip is at least 48 × 48) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 48px; min-width: 48px; padding: 0.55em 1.5em;
  border: 1px solid transparent; border-radius: 999px; text-wrap: balance;
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; line-height: 1.15; letter-spacing: 0.01em; text-decoration: none; text-align: center;
  cursor: pointer; -webkit-user-select: none; user-select: none; touch-action: manipulation;
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease), box-shadow 220ms var(--ease), filter var(--t-base) var(--ease);
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.98); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn--primary {
  background: linear-gradient(180deg, #8A1634 0%, #78122B 55%, #5E0E24 100%); color: var(--on-vermilion);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(94, 14, 36, 0.9), 0 12px 28px -14px rgba(120, 18, 43, 0.75);
}
.btn--ghost { background: transparent; color: var(--accent); border-color: var(--champagne-strong); }
.btn--quiet { background: transparent; color: var(--accent); padding-inline: 1em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-decoration-color: var(--champagne-strong); }
.btn--gold, .btn--member {
  background: linear-gradient(135deg, #F8D888 0%, #E7AE45 52%, #C98A22 100%); color: #2A0A14;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 1px rgba(201, 138, 34, 0.6), 0 14px 32px -14px rgba(217, 119, 6, 0.85);
}
.btn--wa { background: var(--wa); color: #FFFFFF; box-shadow: 0 10px 24px -14px rgba(15, 122, 108, 0.9); }
.btn--lg { min-height: 56px; padding: 0.6em 1.9em; font-size: 1rem; }
.btn--sm { min-height: 44px; padding: 0.5em 1.15em; font-size: 0.875rem; }
@media (pointer: coarse) { .btn--sm { min-height: 48px; } }
.btn--block { width: 100%; }
.icon-btn {
  display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none; padding: 0;
  border: 1px solid var(--champagne); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.text-link { font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--champagne-strong); padding-bottom: 1px; }
.link-like { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-align: left; }
.gyan__closing .link-like { display: inline-flex; align-items: center; min-height: 48px; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover, .btn--gold:hover, .btn--wa:hover, .btn--portal:hover { transform: translateY(-1px); }
  .btn--primary:hover { background: linear-gradient(180deg, #961A3A 0%, #7F1430 55%, #4C0519 100%); color: var(--on-vermilion); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(106, 15, 43, 0.9), 0 16px 34px -14px rgba(120, 18, 43, 0.85); }
  .btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: rgba(245, 158, 11, 0.07); }
  .btn--quiet:hover { color: var(--accent); text-decoration-color: currentColor; }
  .btn--gold:hover, .btn--member:hover { color: #2A0A14; filter: brightness(1.05) saturate(1.05); }
  .btn--wa:hover { color: #FFFFFF; filter: brightness(1.08); }
  .icon-btn:hover:not(:disabled) { border-color: var(--champagne-strong); color: var(--accent); }
  .text-link:hover { border-color: var(--accent); }
}

/* ---------- Header: refined on desktop, a fixed glass bar under 1024px ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px);
  border-bottom: 1px solid var(--champagne);
  transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.site-header.is-scrolled { background: var(--header-bg-solid); box-shadow: 0 12px 32px -22px rgba(58, 10, 24, 0.45); }
/* Phones and tablets: a solid bar. iOS Safari composites backdrop-filter on a sticky bar lazily during momentum
   scrolling, so section titles could show through it unblurred and read as text layered over text (#mission). */
@media (max-width: 1023.98px) {
  .site-header, .site-header.is-scrolled { background: var(--header-bg-opaque); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.site-header__inner { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 12px; min-height: 48px; color: var(--ink); text-decoration: none; flex: 0 1 auto; min-width: 0; }
.brand__logo { height: 50px; width: auto; max-width: 72px; object-fit: contain; flex: none; filter: drop-shadow(0 3px 8px rgba(217, 119, 6, 0.22)); }
.brand__name { display: grid; font-family: var(--serif); font-size: 1.22rem; font-weight: 600; line-height: 1.02; letter-spacing: 0.005em; }
.brand__line { display: block; white-space: nowrap; }
.nav { display: flex; gap: clamp(18px, 2vw, 34px); margin-left: auto; }
.nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 48px; white-space: nowrap;
  color: var(--ink); text-decoration: none; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: var(--gold-leaf);
  transform: scaleX(0); transform-origin: 50% 50%; transition: transform 320ms var(--ease);
}
.header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.btn--portal {
  min-height: 48px; padding: 0 1.3em; font-size: 0.875rem; flex: none;
  background: linear-gradient(180deg, #8A1634 0%, #78122B 55%, #5E0E24 100%); color: var(--on-vermilion);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 4px var(--season-ring), 0 10px 24px -14px rgba(120, 18, 43, 0.8);
}
.btn--portal.btn--member { background: linear-gradient(135deg, #F8D888 0%, #E7AE45 52%, #C98A22 100%); color: #2A0A14; }
.tool-btn {
  position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; flex: none;
  border-radius: 999px; border: 1px solid var(--champagne); background: transparent; color: var(--ink); cursor: pointer;
  font-size: 1.15rem; line-height: 1;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.i-moon, .i-sun, .i-bell { font-family: var(--emoji); line-height: 1; }
.i-sun { display: none; }
[data-theme="dark"] .i-sun { display: inline; }
[data-theme="dark"] .i-moon { display: none; }
[data-bell].is-on { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }
.tool-btn[data-bell].is-on::after { content: ""; position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--vermilion); box-shadow: 0 0 0 2px var(--parchment); }
.menu-btn {
  display: none; place-items: center; width: 48px; height: 48px; padding: 0; flex: none;
  border: 1px solid var(--champagne-strong); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer;
}
.menu-btn__bars { position: relative; display: block; width: 20px; height: 14px; }
.menu-btn__bars span, .menu-btn__bars::before, .menu-btn__bars::after { content: ""; position: absolute; right: 0; height: 1.6px; border-radius: 2px; background: currentColor; }
.menu-btn__bars::before { top: 0; width: 20px; }
.menu-btn__bars span { top: 6.2px; width: 13px; }
.menu-btn__bars::after { bottom: 0; width: 20px; }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { color: var(--accent); }
  .nav a:hover::after { transform: scaleX(1); }
  .btn--portal:hover { color: var(--on-vermilion); filter: brightness(1.08); }
  .btn--portal.btn--member:hover { color: #2A0A14; }
  .tool-btn:hover, .menu-btn:hover { border-color: var(--champagne-strong); background: rgba(245, 158, 11, 0.07); }
}
@media (max-width: 1279.98px) { .nav a.nav__wide { display: none; } }
/* Signed in, the golden pill carries the member's name: give it the room of the wide nav items up to 1599px. */
@media (max-width: 1599.98px) { .site-header:has(.btn--member) .nav a.nav__wide { display: none; } }
@media (max-width: 1279.98px) { .site-header:has(.btn--member) .nav { gap: clamp(14px, 1.5vw, 24px); } }
.btn--portal [data-pill-label] { white-space: nowrap; }
.tool-btn:active, .menu-btn:active, .drawer__close:active, .drawer__tool:active { transform: scale(0.95); }
.tool-btn, .menu-btn { transition: border-color var(--t-base) var(--ease), background-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-fast) var(--ease); }
@media (max-width: 1023.98px) {
  :root { --header-h: 64px; }
  .nav, .btn--portal, .tool-btn--bell { display: none; }
  .header-actions { margin-left: auto; }
  .menu-btn { display: inline-grid; }
  .brand { gap: 10px; }
  .brand__logo { height: 42px; max-width: 56px; }
  .brand__name { font-size: 1.08rem; }
}
@media (max-width: 359.98px) { .brand__name { font-size: 0.98rem; } .brand__logo { height: 36px; } }
/* ☀ the 24-Hour Akhand Sadhna Dial trigger (includes/sadhna-global.php glyph; the drawer: assets/js/sadhna-global.js).
   Room for it: signed in, the golden pill keeps only the greeting up to 1535px (" • Portal Dashboard" is span.pill-more,
   site.js) and a long name ends in an ellipsis (the full greeting is its aria-label); up to 1279px "Mission" yields
   (the crest and the hero lead there) and the gaps tighten, so the wordmark never runs under the nav. Phones under
   390px get 44px tools; under 360px the dial is reached from the menu drawer only. */
.tool-btn--dial { background: radial-gradient(circle at 50% 46%, rgba(252, 211, 77, 0.26), transparent 70%); }
.tool-btn--dial .djjs-dial-glyph { width: 28px; height: 28px; }
html:not(.js) [data-djjs-dial-open] { display: none; }
@media (min-width: 1024px) {
  .btn--member [data-pill-label] { display: inline-block; max-width: 21em; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
}
@media (min-width: 1024px) and (max-width: 1535.98px) {
  .btn--member .pill-more { display: none; }
  .btn--member [data-pill-label] { max-width: 12.5em; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .site-header__inner { gap: 14px; }
  .site-header .nav a[href$="#mission"] { display: none; }
  .site-header .nav, .site-header:has(.btn--member) .nav { gap: clamp(14px, 1.4vw, 18px); }
  .site-header .btn--portal { padding: 0 1em; }
  .btn--member [data-pill-label] { max-width: 9.5em; }
  .site-header .brand__name { font-size: 1.1rem; }
}
@media (max-width: 389.98px) {
  .site-header .tool-btn, .site-header .menu-btn { width: 44px; height: 44px; }
  .site-header .header-actions { gap: 6px; }
}
@media (max-width: 359.98px) { .site-header .tool-btn--dial { display: none; } }

/* ---------- Drawer: slides in from the right, dark glass (backdrop-blur-xl bg-stone-950/90) ---------- */
.drawer {
  position: fixed; inset: 0 0 0 auto; margin: 0 0 0 auto;
  width: min(400px, 88vw); max-width: none; height: 100vh; height: 100dvh; max-height: none;
  padding: calc(14px + env(safe-area-inset-top, 0px)) max(22px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) 22px;
  border: 0; border-left: 1px solid rgba(245, 158, 11, 0.25); border-radius: 0;
  background: rgba(12, 10, 9, 0.95);                /* v1.3.8: .9 → .95, the page never ghosts through where blur isn't composited */
  -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3);
  color: #F3E9DA; --focus: #FCD34D;
  box-shadow: -40px 0 80px -30px rgba(0, 0, 0, 0.65);
  display: none; flex-direction: column; gap: 20px; overflow-y: auto; overscroll-behavior: contain;
}
.drawer[open] { display: flex; }
.drawer::before { /* a soft gold aura at the top of the glass */
  content: ""; position: absolute; inset: 0 0 auto; height: 260px; pointer-events: none;
  background: radial-gradient(80% 100% at 80% 0%, rgba(245, 158, 11, 0.16), transparent 70%);
}
.drawer > * { position: relative; }
.drawer::backdrop { background: rgba(12, 10, 9, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.drawer__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.brand--drawer { color: #F3E9DA; }
.brand--drawer .brand__logo { height: 44px; }
.brand--drawer .brand__name { font-size: 1.12rem; }
.drawer__close {
  display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none; padding: 0; cursor: pointer;
  border-radius: 999px; border: 1px solid rgba(245, 158, 11, 0.35); background: rgba(255, 247, 238, 0.04); color: #F3E9DA;
}
.drawer__links { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid rgba(245, 158, 11, 0.18); }
.drawer__links li { border-bottom: 1px solid rgba(245, 158, 11, 0.14); }
.drawer__links a {
  display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: 6px; min-height: 60px; padding: 4px 2px;
  color: #F3E9DA; text-decoration: none;
}
.drawer__num { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; color: #D9A54A; }
.drawer__label { font-family: var(--serif); font-size: 1.7rem; font-weight: 500; line-height: 1.1; }
.drawer__arrow { color: #E2B25A; transition: transform 260ms var(--ease); }
.drawer__cta {
  display: grid; gap: 4px; padding: 18px 22px; border-radius: 18px; text-decoration: none; min-height: 64px;
  background: linear-gradient(135deg, #F8D888 0%, #E7AE45 52%, #C98A22 100%); color: #2A0A14;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(252, 211, 77, 0.45), 0 18px 40px -16px rgba(245, 158, 11, 0.7);
}
.drawer__cta-label { font-size: 1.125rem; font-weight: 600; line-height: 1.2; }
.drawer__cta-sub { font-size: 0.8125rem; line-height: 1.45; color: #4A1E12; }
.drawer__tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.drawer__tool {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 12px; cursor: pointer;
  border-radius: 14px; border: 1px solid rgba(245, 158, 11, 0.3); background: rgba(255, 247, 238, 0.04); color: #F3E9DA;
  font-size: 0.875rem; font-weight: 600; text-align: center;
}
.drawer__foot { margin-top: auto; display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid rgba(245, 158, 11, 0.2); }
.drawer__foot-link { display: flex; align-items: center; gap: 10px; min-height: 48px; color: #E9C77F; text-decoration: none; font-size: 0.9375rem; font-weight: 500; }
.drawer__foot-link--wa { flex-wrap: wrap; column-gap: 8px; color: #7EE2B8; }
.drawer__foot-num { color: #BBA996; font-weight: 400; }
@media (hover: hover) and (pointer: fine) {
  .drawer__links a:hover .drawer__arrow { transform: translateX(4px); }
  .drawer__links a:hover .drawer__label { color: #FCE7B8; }
  .drawer__close:hover, .drawer__tool:hover { border-color: rgba(252, 211, 77, 0.6); background: rgba(245, 158, 11, 0.1); }
  .drawer__cta:hover { color: #2A0A14; filter: brightness(1.05); }
  .drawer__foot-link:hover { color: #FCE7B8; }
}
@media (prefers-reduced-motion: no-preference) {
  .drawer[open] { animation: drawer-in 440ms var(--ease) both; }
  .drawer[open]::backdrop { animation: fade-in 380ms ease both; }
  .drawer.is-closing { animation: drawer-out 260ms var(--ease-in) both; }
  .drawer.is-closing::backdrop { animation: fade-out 260ms ease both; }
  .drawer[open]:not(.is-closing) .drawer__links li { animation: drawer-item 560ms var(--ease) both; animation-delay: calc(90ms + var(--i, 0) * 45ms); }
  @keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }
  @keyframes drawer-out { from { transform: none; } to { transform: translateX(100%); } }
  @keyframes drawer-item { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
}
html.drawer-locked { overflow: hidden; }
html.drawer-locked body { position: fixed; left: 0; right: 0; overflow: hidden; }

/* ---------- Section shell ---------- */
main > section { position: relative; padding-block: var(--section); }
.section-head { max-width: 46rem; margin-bottom: clamp(32px, 4vw, 52px); }
/* Section headings stay in plain vertical flow (never sticky), with room for the sticky header when linked to
   (scroll-mt-24) and a little air beneath (pb-4). */
.section-head h2, .section-head h3 { position: relative; display: block; scroll-margin-top: 6rem; padding-bottom: 1rem; }
.section-head h2 { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -0.018em; margin-bottom: 0; }
.section-head p:not(.eyebrow) { color: var(--muted); font-size: var(--fs-md); line-height: 1.65; max-width: 40rem; margin: 0; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center p:not(.eyebrow) { margin-inline: auto; }
.section-head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: end; gap: 20px 64px; }
.section-head--split h2 { margin-bottom: 0; }
.sub-h { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 18px; }
/* A gold-leaf hairline between sections */
.ashrams::before, .programs::before, .faq::before {
  content: ""; position: absolute; top: 0; left: 50%; width: min(520px, 64%); height: 1px; transform: translateX(-50%); background: var(--gold-leaf); opacity: 0.8;
}
@media (max-width: 899.98px) { .section-head--split { grid-template-columns: 1fr; } }

/* ---------- Ambient gold particles (decorative, slow, off for reduced motion) ---------- */
.ambient { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.ambient::before, .ambient::after {
  content: ""; position: absolute; inset: -20% 0 0; background-repeat: repeat;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, var(--particle) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 32% 64%, var(--particle) 50%, transparent 51%),
    radial-gradient(2px 2px at 58% 28%, var(--particle) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 76% 72%, var(--particle) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 88% 14%, var(--particle) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 46% 90%, var(--particle) 50%, transparent 51%);
  background-size: 420px 420px; opacity: 0.5;
}
.ambient::after { background-size: 640px 640px; background-position: 90px 140px; opacity: 0.32; }
@media (prefers-reduced-motion: no-preference) {
  .ambient::before { animation: drift 90s linear infinite; }
  .ambient::after { animation: drift 140s linear infinite reverse; }
  @keyframes drift { from { transform: translateY(0); } to { transform: translateY(-420px); } }
}

/* ---------- Hero: The Call to Self Awakening ---------- */
.hero { overflow: hidden; overflow: clip; /* clip: the aura can never be scrolled into view sideways (focus, scrollIntoView) */ isolation: isolate; padding-block: clamp(36px, 5.5vw, 84px) clamp(60px, 7vw, 104px) !important; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -2;
  background: radial-gradient(900px 560px at 78% 42%, var(--season-glow), transparent 65%),
              radial-gradient(700px 440px at 0% 0%, var(--season-tint), transparent 60%);
}
.hero::after { content: ""; position: absolute; bottom: 0; left: 50%; width: min(640px, 76%); height: 1px; transform: translateX(-50%); background: var(--gold-leaf); }
.hero__aura {  /* blur-3xl bg-amber-500/10 */
  position: absolute; z-index: -1; pointer-events: none; width: min(820px, 130vw); aspect-ratio: 1; right: -18%; top: -24%;
  border-radius: 50%; background: var(--aura); filter: blur(64px);
}
.hero > .wrap { position: relative; z-index: 1; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: clamp(32px, 5vw, 88px); }
.hero__title { font-size: var(--fs-h1); font-weight: 500; line-height: 0.98; letter-spacing: -0.026em; margin-bottom: 0.4em; }
.hero__line { display: block; }
.hero__line--accent { font-style: italic; color: var(--accent); padding-left: clamp(0.8rem, 4.5vw, 4rem); }
.hero__lead { font-family: var(--serif); font-weight: 500; font-size: clamp(1.28rem, 1.08rem + 0.75vw, 1.6rem); line-height: 1.48; color: var(--ink); max-width: 33rem; margin-bottom: 2.1rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__guide { display: flex; align-items: center; gap: 0.85em; margin: 2rem 0 0; font-size: var(--fs-sm); color: var(--muted); letter-spacing: 0.01em; }
.hero__guide::before { content: ""; width: 36px; height: 1px; background: var(--gold-leaf); flex: none; }

/* Halo rings around the swaroop */
.mandala { width: 100%; height: auto; overflow: visible; }
.m-ring { fill: none; stroke-dasharray: var(--len); stroke-dashoffset: 0; }
.m-ring--a { stroke: var(--champagne-strong); stroke-width: 1; }
.m-ring--c { stroke: var(--vermilion); stroke-opacity: 0.4; stroke-width: 1; }
.m-dots { fill: none; stroke: var(--amber); stroke-opacity: 0.55; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0.1 12.2; }
.m-nodes circle { fill: var(--vermilion); stroke: var(--parchment); stroke-width: 3; }
@media (prefers-reduced-motion: no-preference) {
  .js .m-ring { stroke-dashoffset: var(--len); animation: m-draw 1.9s var(--ease) forwards; }
  .js .m-ring--a { animation-delay: 0.05s; }
  .js .m-ring--c { animation-delay: 0.3s; }
  .js .m-dots, .js .m-nodes { opacity: 0; animation: m-fade 1.2s var(--ease) forwards; }
  .js .m-dots { animation-delay: 0.7s; }
  .js .m-nodes { animation-delay: 1.5s; }
  @keyframes m-draw { to { stroke-dashoffset: 0; } }
  @keyframes m-fade { to { opacity: 1; } }
}

/* ---------- Swaroop: arched shrine, gold-leaf border, radial halo, bottom-vignette fade ---------- */
.swaroop { margin: 0; display: grid; justify-items: center; gap: 22px; }
.swaroop__stage { position: relative; width: min(100%, 420px); aspect-ratio: 4 / 5; isolation: isolate; }
.swaroop__aura {  /* absolute -inset-4 bg-amber-500/20 rounded-full blur-3xl -z-10 */
  position: absolute; inset: -16px; border-radius: 999px; background: var(--season-aura); filter: blur(64px); z-index: -1; pointer-events: none;
}
.swaroop__halo { position: absolute; left: 50%; top: -9%; width: 128%; height: auto; transform: translateX(-50%); z-index: -1; pointer-events: none; }
.swaroop__glow {  /* the arch's golden light behind the head, fading with the photo */
  position: absolute; inset: -14px; border-radius: 999px 999px 30px 30px; z-index: -1;
  background: radial-gradient(60% 42% at 50% 30%, rgba(252, 211, 77, 0.55), rgba(217, 119, 6, 0.22) 55%, transparent 80%); filter: blur(22px);
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 92%); mask-image: linear-gradient(to bottom, #000 58%, transparent 92%);
}
.swaroop__frame {  /* rounded-t-full rounded-b-2xl overflow-hidden border border-amber-500/40 shadow-2xl, fading out at the foot */
  position: absolute; inset: 0; overflow: hidden; border-radius: 9999px 9999px 18px 18px;
  border: 1.5px solid rgba(245, 158, 11, 0.45); background: var(--swaroop-bg);
  box-shadow: 0 30px 60px -24px rgba(58, 10, 24, 0.42);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
.swaroop__frame::after { /* soft inner vignette */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 92% at 50% 20%, transparent 58%, rgba(28, 9, 16, 0.3) 100%);
}
.swaroop__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.swaroop__arch { position: absolute; left: -5%; top: -4%; width: 110%; height: 108%; overflow: visible; pointer-events: none; }
.swaroop__finial { fill: #E2A43A; }
.swaroop__caption { display: grid; justify-items: center; text-align: center; gap: 2px; margin-top: -5%; position: relative; }
.swaroop__name { font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 600; color: var(--ink); }
.swaroop__role { font-size: var(--fs-xs); letter-spacing: 0.04em; color: var(--muted); }
/* No swaroop published: never a drawn figure in its place, and the name (its caption is hidden) only beside the real image.
   The empty arch keeps its glow, halo and gold hairlines (site.js lifts .swaroop--fallback when a swaroop arrives). */
.swaroop--fallback .swaroop__frame { background: transparent; box-shadow: none; }
.swaroop--fallback .swaroop__frame::after { content: none; }
.swaroop .season-emblem { position: absolute; left: -14%; bottom: 6%; width: 88px; height: 88px; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero .swaroop__stage { animation: swaroop-in 1.4s var(--ease) both; }
  .js .hero__copy > * { animation: rise-in 1s var(--ease) both; }
  .js .hero__copy > :nth-child(2) { animation-delay: 0.08s; }
  .js .hero__copy > :nth-child(3) { animation-delay: 0.18s; }
  .js .hero__copy > :nth-child(4) { animation-delay: 0.28s; }
  .js .hero__copy > :nth-child(5) { animation-delay: 0.38s; }
  @keyframes swaroop-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } }
  @keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 959.98px) {
  .hero__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .hero__copy { display: grid; justify-items: center; }
  .hero__line--accent { padding-left: 0; }
  .hero__lead { margin-inline: auto; }
  .hero__actions { justify-content: center; }
  .swaroop__stage { width: min(70vw, 340px); }
  .swaroop .season-emblem { width: 66px; height: 66px; left: -8%; }
}
@media (max-width: 479.98px) {
  .hero { padding-top: 36px !important; }
  .hero__actions { width: 100%; flex-direction: column; }
  .hero__actions .btn { width: 100%; }
  .hero__guide { justify-content: center; font-size: var(--fs-xs); }
  .swaroop__stage { width: min(72vw, 290px); }
}

/* ---------- The Science of Brahm Gyan (#brahm-gyan): scrollytelling story (v1.0.3) ----------
   A temple-dark band in both modes. ≥ 900px: the stage (includes/views/art.php) sticks beside seven beats.
   Phones and tablets: the stage sticks under the header and the beats scroll up beneath it. site.js sets
   .story[data-scene] and .is-current on the beat in view, .is-live once it runs and .is-playing while the stage is on
   screen; only the active scene animates. Plain document flow around the stage (no transforms on the beats' text). */
.anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
.science {
  --ink: #FCFBF7; --muted: #CDBCA7; --accent: #F2B54C; --gold-text: #F2B54C; --focus: #FCD34D; --amber: #E8962A;
  --champagne: rgba(245, 158, 11, 0.2); --champagne-strong: rgba(245, 158, 11, 0.45); --surface: #171411;
  color: var(--ink); color-scheme: dark;
  background: radial-gradient(900px 640px at 30% 18%, rgba(217, 119, 6, 0.13), transparent 62%),
              radial-gradient(800px 600px at 100% 100%, rgba(120, 18, 43, 0.24), transparent 60%), #0D0B09;
  border-block: 1px solid var(--champagne);
  padding-bottom: clamp(32px, 5vw, 72px) !important;
}
.science .section-head { margin-bottom: clamp(8px, 2vw, 24px); }
.story { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 0 clamp(28px, 5vw, 88px); }
.story__stage {
  --stage-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + var(--djjs-global-h, 0px));
  position: sticky; top: var(--stage-top); align-self: start; z-index: 2;
  height: calc(100vh - var(--stage-top)); height: calc(100svh - var(--stage-top));
  display: grid; place-items: center; padding-block: 16px;
}
.story__frame { position: relative; width: 100%; max-width: 540px; height: 100%; max-height: 640px; }
.story__frame::before { /* the aura behind the figure */
  content: ""; position: absolute; inset: 12% 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(245, 158, 11, 0.16), transparent); pointer-events: none;
}
.story__svg { position: relative; width: 100%; height: 100%; overflow: hidden; } /* the bust runs past the viewBox: never over the beats */
.story__rail { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.story__rail li { width: 6px; height: 6px; border-radius: 6px; background: rgba(245, 158, 11, 0.3); transition: height 400ms var(--ease), background-color 400ms var(--ease); }
.story__rail li.is-on { height: 26px; background: #F2B54C; box-shadow: 0 0 12px rgba(245, 158, 11, 0.6); }
.story__beats { margin: 0; padding: 0; list-style: none; }
.beat { display: flex; align-items: center; min-height: 82vh; min-height: 82svh; padding-block: 6vh; }
.beat:first-child { min-height: 70vh; min-height: 70svh; }
.beat:last-child { min-height: 76vh; min-height: 76svh; }
.beat__card {
  width: 100%; max-width: 31rem; padding: clamp(22px, 2.6vw, 34px); border-radius: 24px;
  border: 1px solid rgba(245, 158, 11, 0.24); background: rgba(23, 20, 17, 0.9);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(252, 211, 77, 0.1);
  transition: opacity 500ms var(--ease), border-color 500ms var(--ease), box-shadow 500ms var(--ease);
}
.story.is-live .beat:not(.is-current) .beat__card { opacity: 0.38; }
.story.is-live .beat.is-current .beat__card { border-color: rgba(252, 211, 77, 0.5); box-shadow: 0 30px 80px -40px rgba(217, 119, 6, 0.55), inset 0 1px 0 rgba(252, 211, 77, 0.22); }
.beat__kicker { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3em 0.8em; margin-bottom: 0.9rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #F2B54C; }
.beat__kicker [lang="hi"] { font-size: 1.05rem; letter-spacing: 0.02em; text-transform: none; }
.beat__num { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; letter-spacing: 0.04em; line-height: 1; color: #E8962A; }
.beat__line { font-family: var(--serif); font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.6rem); font-weight: 500; line-height: 1.14; color: #FCFBF7; margin: 0; text-wrap: balance; }
.beat__line em { display: block; font-style: italic; color: #F2C96E; }
.beat__line--sm { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); color: #F9E7C2; font-style: italic; }
.beat__term { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.3rem); font-weight: 600; line-height: 1; color: #FFF7EE; margin-bottom: 0.35em; }
.beat__term span { display: block; margin-top: 6px; font-size: 0.42em; font-weight: 500; font-style: italic; color: #E9C77F; letter-spacing: 0.01em; }
.beat__note { margin: 1rem 0 0; color: var(--muted); font-size: var(--fs-sm); }
.beat__actions { margin-top: 1.6rem; }
.beat__actions .btn { width: 100%; }
.beat__more { margin-top: 1.1rem; border-top: 1px solid rgba(245, 158, 11, 0.2); font-size: var(--fs-sm); color: var(--muted); }
.beat__more summary { display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; font-weight: 600; color: #F2B54C; list-style: none; }
.beat__more summary::-webkit-details-marker { display: none; }
.beat__more summary::after { content: "+"; font-size: 1.2rem; line-height: 1; transition: transform 300ms var(--ease); }
.beat__more[open] summary::after { transform: rotate(45deg); }
.beat__more p { margin: 0 0 0.8em; }
.beat__more blockquote { margin: 0 0 0.8em; padding-left: 14px; border-left: 2px solid rgba(245, 158, 11, 0.45); }
.beat__more blockquote p { font-family: var(--serif); font-style: italic; font-size: 1.15rem; line-height: 1.4; color: #FCFBF7; margin: 0 0 4px; }
.beat__more footer, .beat__src { font-size: var(--fs-xs); color: #B7A58F; }
.beat__excerpt { margin: 0.6em 0 0.4em; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(252, 211, 77, 0.3); background: rgba(245, 158, 11, 0.07); }
.beat__excerpt blockquote { border: 0; padding: 0; }
.beat__excerpt figcaption { font-size: var(--fs-xs); font-weight: 600; color: #F2B54C; }
.beat--outcome .beat__line em { color: #FDE68A; }

/* The stage: base figure, scenes cross-fading, and each scene's state (also the reduced-motion picture) */
.story__svg .sc { opacity: 0; transition: opacity 700ms var(--ease); }
.story[data-scene="noise"] .sc--noise, .story[data-scene="awaken"] .sc--awaken, .story[data-scene="prakash"] .sc--prakash,
.story[data-scene="naad"] .sc--naad, .story[data-scene="amrit"] .sc--amrit, .story[data-scene="naam"] .sc--naam,
.story[data-scene="outcome"] .sc--outcome { opacity: 1; }
.st-ring { fill: none; stroke: rgba(245, 158, 11, 0.16); }
.st-dots { fill: none; stroke: rgba(245, 158, 11, 0.42); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0.1 11; }
.st-orbit { transform-box: view-box; transform-origin: 200px 236px; }
.st-globe { fill: none; stroke: rgba(245, 158, 11, 0.3); stroke-width: 1; }
.st-soul { fill: #FDE68A; }
.st-base { transform-box: view-box; transform-origin: 200px 236px; transition: transform 1100ms var(--ease); }
.story[data-scene="outcome"] .st-base { transform: scale(0.4); }
.st-bust { fill: url(#st-body); stroke: rgba(245, 158, 11, 0.42); stroke-width: 1.3; vector-effect: non-scaling-stroke; transition: stroke 700ms var(--ease); }
.story[data-scene="noise"] .st-bust { stroke: rgba(220, 38, 38, 0.55); }
.st-lit { opacity: 0; transition: opacity 900ms var(--ease); }
.story[data-scene="awaken"] .st-lit { opacity: 0.35; }
.story:is([data-scene="naad"], [data-scene="amrit"]) .st-lit { opacity: 0.6; }
.story[data-scene="naam"] .st-lit { opacity: 0.75; }
.story:is([data-scene="prakash"], [data-scene="outcome"]) .st-lit { opacity: 1; }
.st-petal { transform-box: view-box; transform-origin: 200px 185px; transform: rotate(var(--r)); }
.st-eye, .st-spark, .st-pulse, .st-corona, .st-ripple, .st-ring-w, .st-scribble { transform-box: fill-box; transform-origin: 50% 50%; }
.st-rays { transform-box: view-box; transform-origin: 200px 185px; }
.st-breath { transform-box: view-box; transform-origin: 200px 318px; }
.st-ripple, .st-ring-w { stroke-opacity: 0.55; }
@media (prefers-reduced-motion: no-preference) {
  .story.is-playing .st-orbit { animation: st-spin 120s linear infinite; }
  .story[data-scene="noise"] .st-wave { stroke-dasharray: 14 8; animation: st-flow 0.9s linear infinite, st-jitter 0.24s steps(2) infinite; animation-delay: calc(var(--i) * -0.13s); }
  .story[data-scene="noise"] .st-scribble { animation: st-scribble 1.6s ease-in-out infinite; }
  .story[data-scene="awaken"] .st-petal { animation: st-petal 1.3s var(--ease) both; animation-delay: calc(0.35s + var(--i) * 70ms); }
  .story[data-scene="awaken"] .st-eye { animation: st-eye 900ms var(--ease) 0.15s both; }
  .story[data-scene="awaken"] .st-spark, .story[data-scene="prakash"] .st-pulse, .story[data-scene="awaken"] .st-pulse { animation: st-pulse 4s ease-in-out infinite; }
  .story[data-scene="prakash"] .st-rays { animation: st-spin 48s linear infinite; }
  .story[data-scene="prakash"] .st-corona { animation: st-corona 3.2s ease-out infinite; }
  .story[data-scene="naad"] .st-ripple { animation: st-ripple 4.8s ease-out infinite; animation-delay: calc(var(--i) * 1.2s); }
  .story[data-scene="amrit"] .st-drop { animation: st-drop 4.4s var(--ease) infinite; }
  .story[data-scene="amrit"] .st-ring-w { animation: st-pool 4.4s ease-out infinite; animation-delay: calc(var(--i) * 0.22s); }
  .story[data-scene="naam"] .st-breath { animation: st-breathe 8s ease-in-out infinite; }
  .story[data-scene="naam"] .st-loop--flow { stroke-dasharray: 22 78; animation: st-trace 6s linear infinite; }
  .story[data-scene="outcome"] .st-soul { animation: st-soul 4s ease-in-out infinite both; animation-delay: calc(0.6s + var(--i) * 0.22s); }
  .story:not(.is-playing) .story__svg * { animation-play-state: paused !important; }
  @keyframes st-spin { to { transform: rotate(360deg); } }
  @keyframes st-flow { to { stroke-dashoffset: -44; } }
  @keyframes st-jitter { 50% { transform: translateY(2.5px); } }
  @keyframes st-scribble { 0%, 100% { transform: rotate(0) scale(1); } 30% { transform: rotate(14deg) scale(1.06); } 60% { transform: rotate(-10deg) scale(0.96); } }
  @keyframes st-petal { from { transform: rotate(var(--r)) scale(0.1); opacity: 0; } to { transform: rotate(var(--r)) scale(1); opacity: 1; } }
  @keyframes st-eye { from { transform: scaleY(0.05); } to { transform: scaleY(1); } }
  @keyframes st-pulse { 0%, 100% { transform: scale(0.88); opacity: 0.75; } 50% { transform: scale(1.1); opacity: 1; } }
  @keyframes st-corona { from { transform: scale(1); opacity: 0.9; } to { transform: scale(3.2); opacity: 0; } }
  @keyframes st-ripple { 0% { transform: scale(0.15); stroke-opacity: 0; } 15% { stroke-opacity: 0.9; } 100% { transform: scale(1.2); stroke-opacity: 0; } }
  @keyframes st-drop { 0% { transform: translateY(-150px) scale(0.5); opacity: 0; } 18% { opacity: 1; } 58% { transform: translateY(0) scale(1); opacity: 1; } 68%, 100% { transform: translateY(46px) scale(0.15); opacity: 0; } }
  @keyframes st-pool { 0%, 60% { transform: scale(0.1); stroke-opacity: 0; } 66% { stroke-opacity: 0.95; } 100% { transform: scale(1.15); stroke-opacity: 0; } }
  @keyframes st-breathe { 0%, 100% { transform: scale(0.88); } 50% { transform: scale(1.06); } }
  @keyframes st-trace { to { stroke-dashoffset: -100; } }
  @keyframes st-soul { 0%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
}
@media (max-width: 899.98px) {
  .story { display: block; }
  .story__stage {
    height: 46vh; height: 46svh; max-height: 420px; padding-block: 10px 0;
    margin-inline: calc(-1 * max(var(--gutter), var(--safe-x))); background: #0D0B09;
  }
  .story__stage::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 36px; background: linear-gradient(#0D0B09, rgba(13, 11, 9, 0)); pointer-events: none; }
  .story__frame { max-width: 360px; }
  .story__rail { left: max(var(--gutter), var(--safe-x)); }
  .beat, .beat:first-child, .beat:last-child { min-height: 60vh; min-height: 60svh; padding-block: 4vh; align-items: center; }
  .beat:last-child { min-height: 54vh; min-height: 54svh; }
  .beat__card { max-width: none; margin-inline: auto; }
}
@media (max-width: 639.98px) {
  .beat__card { padding: 20px 20px 18px; border-radius: 20px; }
  .beat__line { font-size: 1.62rem; }
}

/* ---------- Mission Prachaar in Action: 8 cause cards (v1.0.3) ----------
   Each card's scene (initiative_art()) moves from "before" to "after" when site.js adds .is-lit (once most of the card
   is on screen); a tap on the scene replays it (.is-rewind snaps back first). Phones: a swipeable row. */
.initiatives { background: var(--sunken); }
.causes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.cause {
  position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius-card); overflow: hidden; isolation: isolate;
  background: var(--surface); border: 1px solid var(--champagne); box-shadow: var(--shadow-soft);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease), background-color 400ms var(--ease);
}
.cause__art { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; margin: 0; border: 0; border-bottom: 1px solid var(--champagne); background: #15110E; cursor: pointer; overflow: hidden; }
.cause__art::after { /* replay hint */
  content: "↻"; position: absolute; right: 10px; bottom: 8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font-size: 0.95rem; line-height: 1; color: #FCFBF7; background: rgba(13, 11, 9, 0.55); opacity: 0.7; transition: opacity 200ms var(--ease);
}
.cause__art:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.cause__body { display: flex; flex-direction: column; flex: 1; padding: 18px clamp(18px, 1.8vw, 24px) 16px; }
.cause__kicker { margin: 0 0 4px; font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.02em; }
.cause__name { font-size: clamp(1.6rem, 1.35rem + 0.5vw, 1.9rem); font-weight: 600; line-height: 1.04; margin-bottom: 0.2em; }
.cause__tag { font-family: var(--serif); font-style: italic; font-size: 1.28rem; font-weight: 600; line-height: 1.25; color: var(--accent); margin: 0 0 0.35em; }
.cause__sum { font-size: var(--fs-xs); color: var(--muted); margin: 0 0 1em; }
.cause__actions { margin-top: auto; display: grid; gap: 4px; }
.cause__actions .btn { width: 100%; }
.cause__more { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .cause:hover { transform: translateY(-2px); border-color: var(--champagne-strong); box-shadow: var(--shadow-lift); }
  .cause__art:hover::after { opacity: 1; }
  .cause__more:hover { text-decoration: underline; text-underline-offset: 0.25em; }
}
.cause:active { transform: scale(0.995); }
.art { display: block; width: 100%; height: 100%; }
.art-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.art .m, .art .mf, .art .ms {
  transition: transform 1.5s var(--ease) var(--d, 0s), opacity 1.1s var(--ease) var(--d, 0s), fill 1.2s var(--ease) var(--d, 0s),
              stroke 1.2s var(--ease) var(--d, 0s), stroke-dashoffset 1.8s var(--ease) var(--d, 0s);
}
.art .m { transform-box: fill-box; transform-origin: var(--o, 50% 50%); transform: var(--tb, none); opacity: var(--ob, 1); }
.art .mf { fill: var(--fb); }
.art .ms { stroke: var(--sb); }
.art .ar-draw { stroke-dasharray: 100; stroke-dashoffset: 100; }
.is-lit .art .m, html:not(.js) .art .m { transform: var(--ta, none); opacity: var(--oa, 1); }
.is-lit .art .mf, html:not(.js) .art .mf { fill: var(--fa, var(--fb)); }
.is-lit .art .ms, html:not(.js) .art .ms { stroke: var(--sa, var(--sb)); }
.is-lit .art .ar-draw, html:not(.js) .art .ar-draw { stroke-dashoffset: 0; }
.is-rewind .art * { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .is-lit .art .loop { animation: art-breathe 5s ease-in-out infinite; animation-delay: calc(var(--d, 0s) + 1.6s); }
  @keyframes art-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.07); opacity: 0.78; } }
}
@media (prefers-reduced-motion: reduce) { .art .m, .art .mf, .art .ms { transition: none; } }
.wings { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: clamp(28px, 3.5vw, 44px); padding-top: 24px; border-top: 1px solid var(--champagne); }
.wings__label { margin: 0 8px 0 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-text); }
.wing {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-height: 48px; padding: 10px 20px;
  border-radius: 999px; border: 1px solid var(--champagne-strong); background: var(--surface); color: var(--ink); text-decoration: none;
  transition: border-color var(--t-base) var(--ease), background-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.wing:active { transform: scale(0.98); }
.wing__name { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.wing__for { font-size: var(--fs-sm); color: var(--muted); }
.wing__host { font-size: var(--fs-xs); font-weight: 600; color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .wing:hover { color: var(--ink); border-color: var(--accent); background: rgba(245, 158, 11, 0.06); } }
@media (max-width: 1099.98px) { .causes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) {
  .causes {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * max(var(--gutter), var(--safe-x))); padding: 4px max(var(--gutter), var(--safe-x)) 14px;
    scroll-padding-inline: max(var(--gutter), var(--safe-x));
  }
  .causes::-webkit-scrollbar { display: none; }
  .cause { flex: 0 0 84%; scroll-snap-align: start; }
  .wing { width: 100%; border-radius: 16px; }
}

/* ---------- FAQ (#faq): the questions behind the FAQPage structured data ---------- */
.faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 12px clamp(28px, 5vw, 80px); align-items: start; }
.faq__list { border-top: 1px solid var(--champagne-strong); }
.faq__item { border-bottom: 1px solid var(--champagne-strong); }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding-block: 12px; cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); font-weight: 600; line-height: 1.2; color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--champagne-strong); color: var(--accent); font-family: var(--sans); font-size: 1.2rem; transition: transform 300ms var(--ease); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { margin: 0 0 20px; color: var(--muted); max-width: 44rem; }
@media (max-width: 899.98px) { .faq__grid { grid-template-columns: 1fr; } }

/* The Join form's cause note (a cause card opened it) */
.cause-note { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--champagne-strong); background: rgba(245, 158, 11, 0.09); font-size: var(--fs-sm); }
.cause-note__mark { font-size: 1.3rem; line-height: 1.3; font-family: var(--emoji); }
.cause-note strong { color: var(--accent); }

/* ---------- Global Ashram Sanctuary & Outreach ---------- */
.centres { display: flex; justify-content: center; margin-bottom: clamp(22px, 3vw, 36px); }
.centres__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px; border-radius: 999px; border: 1px solid var(--champagne); background: var(--surface); box-shadow: var(--shadow-soft); }
.centre-chip {
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; color: var(--ink);
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.centre-chip:active { transform: scale(0.97); }
.centre-chip[aria-selected="true"] { background: linear-gradient(180deg, #8A1634, #78122B 60%, #5E0E24); color: var(--on-vermilion); box-shadow: 0 10px 22px -12px rgba(120, 18, 43, 0.8); }
@media (hover: hover) and (pointer: fine) { .centre-chip:not([aria-selected="true"]):hover { background: rgba(245, 158, 11, 0.1); } }
@media (max-width: 639.98px) { .centres__tabs { border-radius: 24px; } .centre-chip { padding: 0 16px; } }

.atlas { position: relative; isolation: isolate; z-index: 0; }  /* keeps Leaflet's panes beneath the sticky header */
.atlas__map {  /* explicit size so Leaflet always measures a real box (site.js also calls invalidateSize) */
  position: relative; z-index: 0; width: 100%; height: 440px; min-height: 400px;
  background: var(--sunken); border-block: 1px solid var(--champagne);
}
/* The chosen centre's card floats bottom-right on wide screens: the map opens on Baldwin, the easternmost centre, so the
   nearby centres (Edison NJ) lie to its west, clear of the card; the search box takes the top-left. */
.atlas__dock { position: absolute; left: 0; right: 0; bottom: 28px; z-index: 1000; display: flex; justify-content: flex-end; pointer-events: none; }
.centre-card {
  pointer-events: auto; width: min(410px, 100%); padding: 22px 24px 20px; border-radius: var(--radius-card);
  background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--champagne-strong); box-shadow: var(--shadow-lift);
}
.js .centre-card[data-inactive] { display: none; }
html:not(.js) .atlas__dock { position: static; display: grid; gap: 12px; margin-top: 16px; }
.centre-card__kicker { margin: 0 0 8px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-text); }
.centre-card__name { font-size: 1.75rem; font-weight: 600; line-height: 1.1; margin-bottom: 6px; }
.centre-card__addr { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 4px; }
.centre-card__phone { margin: 0 0 4px; font-size: var(--fs-sm); }
.centre-card__phone a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; text-decoration: none; }
.centre-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.js .centre-card:not([data-inactive]) { animation: panel-in 380ms var(--ease); }
@media (max-width: 1023.98px) {
  .atlas__dock { position: static; margin-top: 16px; }
  .centre-card { width: 100%; background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--shadow-soft); }
}
@media (max-width: 479.98px) { .centre-card__actions .btn { flex: 1 1 100%; } }

.directory-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 24px; margin: clamp(36px, 4.5vw, 56px) 0 18px; }
.directory-head__title { font-size: var(--fs-xl); font-weight: 600; }
.directory-head__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.locate__status { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--muted); min-height: 1.5em; max-width: 34rem; }
.nearest {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px 28px;
  padding: 22px 26px; margin-bottom: 24px; border-radius: 20px; border: 1px solid var(--champagne-strong);
  background: linear-gradient(100deg, rgba(245, 158, 11, 0.14), var(--surface) 55%); box-shadow: var(--shadow-soft);
}
.nearest__dist { font-variant-numeric: lining-nums tabular-nums; font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; color: var(--accent); margin: 0; }
.nearest__dist small { display: block; font-family: var(--sans); font-size: var(--fs-xs); color: var(--muted); margin-top: 6px; }
.nearest__name { font-family: var(--serif); font-size: var(--fs-xl); font-weight: 600; line-height: 1.15; margin: 0 0 2px; }
.nearest__addr { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.nearest__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.filter {
  min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--champagne-strong); background: var(--surface);
  font-size: var(--fs-sm); font-weight: 500; cursor: pointer; color: var(--ink);
  transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.filter:active { transform: scale(0.97); }
.filter[aria-pressed="true"] { background: linear-gradient(180deg, #8A1634, #78122B 60%, #5E0E24); color: var(--on-vermilion); border-color: #5E0E24; box-shadow: 0 8px 18px -12px rgba(120, 18, 43, 0.8); }
.ashram-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ashram {
  position: relative; display: flex; flex-direction: column; padding: 20px 22px; border-radius: var(--radius-card);
  border: 1px solid var(--champagne); background: var(--surface); box-shadow: var(--shadow-soft);
  transition: border-color var(--t-base) var(--ease), box-shadow 220ms var(--ease), transform 220ms var(--ease);
}
.ashram.is-active { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }
.ashram__region { margin: 0 0 6px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-text); }
.ashram__name { font-size: 1.35rem; font-weight: 600; margin: 0 0 4px; }
.ashram__focus { display: inline-flex; align-items: center; min-height: 48px; background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.ashram__addr { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 8px; }
.ashram__dist { font-size: var(--fs-xs); font-weight: 600; color: var(--gold-text); margin: -2px 0 8px; }
.ashram__phone { margin: 0 0 8px; font-size: var(--fs-sm); }
.ashram__phone a { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; font-weight: 500; }
.ashram__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 4px; }
.ashram__actions a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 12px; border-radius: 999px; text-align: center;
  border: 1px solid var(--champagne-strong); font-size: 0.8125rem; font-weight: 600; line-height: 1.2; color: var(--accent); text-decoration: none;
  transition: border-color var(--t-base) var(--ease), background-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.ashram__actions a:active { transform: scale(0.97); }
.ashram__actions .ashram__wa { grid-column: 1 / -1; color: var(--wa); border-color: rgba(15, 122, 108, 0.4); background: rgba(15, 122, 108, 0.06); }
@media (pointer: coarse) { .ashram__actions a { min-height: 48px; } }
[data-theme="dark"] .ashram__actions .ashram__wa { color: #6EE7B7; border-color: rgba(110, 231, 183, 0.35); }
@media (hover: hover) and (pointer: fine) {
  .filter:hover { border-color: var(--accent); }
  .ashram__focus:hover { color: var(--accent); }
  .ashram__actions a:hover { border-color: currentColor; background: rgba(245, 158, 11, 0.06); }
  .ashram__actions .ashram__wa:hover { background: rgba(15, 122, 108, 0.1); }
  .ashram:hover { transform: translateY(-2px); border-color: var(--champagne-strong); box-shadow: var(--shadow-lift); }
}
@media (max-width: 1023.98px) { .ashram-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) {
  .ashram-list { grid-template-columns: 1fr; gap: 12px; }
  .ashram { padding: 18px; }
  .filter { padding: 0 14px; }
  .nearest { grid-template-columns: 1fr; padding: 20px; }
  .directory-head__actions { width: 100%; }
  .directory-head .btn { width: 100%; }
}

/* Smart ashram search: floating on the map's top-left from 1024px, above the map on phones and tablets.
   16px+ text so iOS Safari never zooms on focus; 44px+ targets; the browser's own clear (x) gives way to ours. */
.atlas-search { position: absolute; top: 18px; left: 0; right: 0; z-index: 1001; pointer-events: none; }
.atlas-search__box { position: relative; width: min(440px, 100%); margin: 0; pointer-events: auto; }
.atlas-search__input {
  display: block; box-sizing: border-box; width: 100%; min-height: 52px; margin: 0; padding: 0 52px 0 48px; border-radius: 999px;
  border: 1px solid var(--champagne-strong); background: var(--glass); color: var(--ink);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: var(--shadow-lift);
  font-family: var(--sans); font-size: max(16px, 1.0625rem); font-weight: 500; line-height: 1.25; -webkit-appearance: none; appearance: none;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.atlas-search__input::placeholder { color: var(--muted); opacity: 1; }
.atlas-search__input::-webkit-search-cancel-button, .atlas-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.atlas-search__input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.32), var(--shadow-lift); }
.atlas-search__icon { position: absolute; z-index: 1; left: 17px; top: 50%; transform: translateY(-50%); color: var(--gold-text); pointer-events: none; }
.atlas-search__clear {
  position: absolute; z-index: 1; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer;
}
.atlas-search__clear:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
.atlas-search__count {
  display: inline-block; max-width: 100%; margin: 8px 0 0; padding: 6px 14px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; line-height: 1.35;
  color: var(--ink); background: var(--glass); border: 1px solid var(--champagne); box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); overflow-wrap: anywhere;
}
@media (hover: hover) and (pointer: fine) { .atlas-search__clear:hover { color: var(--accent); background: rgba(245, 158, 11, 0.1); } }
@media (max-width: 1023.98px) {
  .atlas-search { position: static; padding-bottom: 12px; }
  .atlas-search__box { width: 100%; }
  .atlas-search__input { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--shadow-soft); }
  .atlas-search__count { display: block; margin-top: 8px; padding: 0 4px; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--muted); font-weight: 500; }
}
.atlas__loading { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.ashram { scroll-margin-top: calc(var(--header-h) + 24px); }
.ashram__badge {
  display: inline-block; margin: 0 0 0 8px; padding: 2px 8px; border-radius: 999px; vertical-align: 1px;
  background: rgba(245, 158, 11, 0.14); color: var(--gold-text); font-size: 0.625rem; letter-spacing: 0.12em;
}
.ashram--home { border-color: var(--champagne-strong); }
.directory-empty {
  margin: 0 0 22px; padding: 24px; border-radius: var(--radius-card); border: 1px dashed var(--champagne-strong);
  background: var(--surface); text-align: center; box-shadow: var(--shadow-soft);
}
.directory-empty__title { font-family: var(--serif); font-size: var(--fs-xl); font-weight: 600; line-height: 1.2; margin: 0 0 6px; overflow-wrap: anywhere; }
.directory-empty__text { max-width: 36rem; margin: 0 auto 16px; color: var(--muted); font-size: var(--fs-sm); }
.directory-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (max-width: 639.98px) {
  .atlas__map { height: clamp(300px, 48vh, 400px); min-height: 300px; }
  .directory-empty { padding: 20px 18px; }
}
@media (max-width: 479.98px) { .directory-empty__actions .btn { flex: 1 1 100%; } }

/* Map: saffron lotus pins, popups, tiles */
.atlas__map .leaflet-container { font-family: var(--sans); background: var(--sunken); }
.atlas__map .leaflet-tile-pane { filter: saturate(0.9) sepia(0.12); }
[data-theme="dark"] .atlas__map .leaflet-tile-pane { filter: none; }
/* Temple Dark on the keyless OpenStreetMap tiles: invert and re-hue the light tiles into a calm night map. */
[data-theme="dark"] .atlas__map--tint-dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.82) contrast(0.92) saturate(0.55) sepia(0.12); }
.lotus-pin { display: block; filter: drop-shadow(0 4px 6px rgba(92, 52, 18, 0.35)); transition: transform 220ms var(--ease); transform-origin: 50% 100%; }
.lotus-pin__drop { fill: #E8730C; stroke: #FFF7EE; stroke-width: 1.6; }
.lotus-pin__lotus { fill: #FFF7EE; }
.lotus-pin--hq .lotus-pin__drop { fill: #B45309; }
.lotus-pin--hq .lotus-pin__lotus { fill: #FCD34D; }
.lotus-marker { background: none; border: 0; }
/* The primary New York centre (Baldwin): the gold HQ lotus, a little larger, with a soft glow */
.lotus-pin--home { transform: scale(1.14); filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.8)) drop-shadow(0 4px 6px rgba(92, 52, 18, 0.35)); }
.lotus-pin--home .lotus-pin__drop { stroke: #FDE68A; stroke-width: 2; }
.lotus-pin.is-active { transform: scale(1.25); }
.lotus-pin.is-active .lotus-pin__drop { fill: #78122B; }
.lotus-pin.is-active .lotus-pin__lotus { fill: #FCD34D; }
.you-pin { display: block; width: 16px; height: 16px; border-radius: 50%; background: #1D4ED8; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(29, 78, 216, 0.2); }
.leaflet-popup-content-wrapper { border-radius: 14px; }
.leaflet-popup-content { font-family: var(--sans); margin: 14px 18px; }
.map-pop { display: grid; gap: 4px; min-width: 200px; }
.map-pop strong { font-family: var(--serif); font-size: 1.2rem; line-height: 1.2; padding-right: 34px; }
.map-pop span { color: var(--muted); font-size: 0.875rem; }
.map-pop a { font-weight: 600; }
.map-pop__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.map-pop__actions a { display: inline-flex; align-items: center; min-height: 48px; }
.map-pop__actions .btn { padding: 0 14px; font-size: 0.8125rem; color: var(--on-vermilion); }
.map-pop__card {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--champagne-strong);
  background: transparent; color: var(--accent); font: 600 0.8125rem/1.2 var(--sans); cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .map-pop__card:hover { border-color: currentColor; background: rgba(245, 158, 11, 0.06); } }
/* Map controls: "All centres" (fits every centre) beside the zoom buttons, in the top row, so a tall centre card (bottom-right
   from 1024px) never covers it; on touch screens a hint until the map is tapped */
.atlas__map .atlas-all {
  clear: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 14px;
  border: 1px solid var(--champagne-strong); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-soft);
  font: 600 0.8125rem/1.2 var(--sans); cursor: pointer;
}
.atlas__map .atlas-all svg { color: var(--gold-text); flex: none; }
@media (hover: hover) and (pointer: fine) { .atlas__map .atlas-all:hover { border-color: var(--accent); color: var(--accent); } }
.atlas__map .atlas-hint {
  margin: 0 0 30px 12px; padding: 7px 12px; border-radius: 999px; background: rgba(28, 25, 23, 0.74); color: #FFF7EE; /* clear of the attribution */
  font-size: 0.75rem; font-weight: 600; line-height: 1.2; pointer-events: none;
}
.atlas__map:not(.atlas__map--locked) .atlas-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .lotus-pin, .atlas-search__input { transition: none; } }
.atlas__map .leaflet-popup-content-wrapper, .atlas__map .leaflet-popup-tip { background: var(--surface); color: var(--ink); }
.atlas__map .leaflet-container a, .atlas__map .leaflet-popup-content a { color: var(--accent); }
.atlas__map .leaflet-popup-content .btn--primary { color: var(--on-vermilion); }
.atlas__map .leaflet-popup-close-button { color: var(--muted) !important; width: 48px !important; height: 48px !important; line-height: 48px !important; font-size: 24px !important; }
.atlas__map .leaflet-control-zoom.leaflet-bar a, .leaflet-touch .atlas__map .leaflet-control-zoom.leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 22px; }
.atlas__map .leaflet-control-zoom.leaflet-bar { border: 1px solid var(--champagne-strong); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-soft); }
@media (pointer: coarse) { .leaflet-touch .atlas__map .leaflet-control-zoom.leaflet-bar a { width: 48px; height: 48px; line-height: 48px; } }
[data-theme="dark"] .leaflet-bar a { background: var(--surface); color: var(--ink); border-color: var(--line); }

/* ---------- Programs ---------- */
.programs__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 2vw, 28px); align-items: stretch; }
/* The weekly Zoom gatherings and the upcoming programs sit in two matching cards. */
.weekly, .upcoming {
  min-width: 0; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--radius-card);
  background: var(--surface); border: 1px solid var(--champagne); box-shadow: var(--shadow-soft);
}
.weekly { display: flex; flex-direction: column; align-items: flex-start; }
.weekly > * { align-self: stretch; }
.weekly > .btn { align-self: flex-start; }
.upcoming { display: flex; flex-direction: column; }
.upcoming > .empty { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.weekly .sub-h, .upcoming .sub-h { margin-bottom: 12px; }
.gathering { display: grid; grid-template-columns: 8.5rem 1fr; gap: 18px; padding: 20px 0; border-top: 1px solid var(--champagne); }
.gathering__day { font-family: var(--serif); font-size: var(--fs-xl); font-weight: 600; line-height: 1.05; margin: 0 0 4px; color: var(--accent); }
.gathering__time { font-weight: 600; margin: 0; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.gathering__local { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.gathering h4 { font-size: 1.45rem; font-weight: 600; margin-bottom: 0.35em; }
.gathering__body p { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 0.5em; }
.gathering__body .gathering__next { color: var(--ink); font-weight: 500; }
.weekly__note { margin-top: auto; font-size: var(--fs-sm); color: var(--muted); border-top: 1px solid var(--champagne); padding-top: 16px; }
.events { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--champagne); }
.event { display: grid; grid-template-columns: 5rem 1fr auto; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--champagne); }
.event:last-child { border-bottom: 0; padding-bottom: 0; }
.event__date {
  align-self: start; display: grid; justify-items: center; align-content: start; padding: 10px 6px; border: 1px solid var(--champagne-strong); border-radius: 14px;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.1), transparent 70%), var(--parchment); font-variant-numeric: tabular-nums;
}
.event__month { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.event__day { font-family: var(--serif); font-size: 2.6rem; line-height: 1; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.event__wd { font-size: 0.75rem; color: var(--muted); }
.event__title { font-size: 1.6rem; font-weight: 600; margin-bottom: 0.25em; }
.event__when { font-weight: 500; margin: 0 0 2px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.event__where, .event__desc { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 6px; }
.event__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.event__flyer { width: 110px; height: auto; border-radius: 8px; border: 1px solid var(--champagne); object-fit: cover; }
.empty { border: 1px dashed var(--champagne-strong); border-radius: 16px; padding: clamp(20px, 3vw, 32px); background: linear-gradient(160deg, rgba(245, 158, 11, 0.07), transparent 60%), var(--parchment); }
.empty__title { font-family: var(--serif); font-size: var(--fs-xl); font-weight: 600; line-height: 1.2; margin-bottom: 0.4em; }
.empty p:not(.empty__title) { color: var(--muted); max-width: 32rem; }
@media (max-width: 899.98px) { .programs__grid { grid-template-columns: 1fr; } }
@media (max-width: 559.98px) {
  .weekly, .upcoming { padding: 18px 16px; }
  .gathering { grid-template-columns: 1fr; gap: 8px; }
  .event { grid-template-columns: 4.25rem 1fr; gap: 14px; }
  .event__flyer { display: none; }
}
/* v1.0.2 · compact programs: one week of each Zoom gathering (with that week's ET / UK / Bharat times) and dense
   program rows, so the section reads at a glance instead of scrolling. Phones keep their one-column flow, tightened. */
.gathering__body .gathering__next { margin-bottom: 0.15em; }
.gathering__zones { margin: 0; font-size: var(--fs-xs); line-height: 1.45; color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }
.programs .section-head { margin-bottom: clamp(20px, 2.6vw, 36px); }
.event__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
@media (min-width: 900px) {
  .programs { padding-block: clamp(48px, 5.2vw, 80px); }
  .weekly, .upcoming { padding: clamp(18px, 1.9vw, 26px) clamp(20px, 2.1vw, 30px); }
  .weekly .sub-h, .upcoming .sub-h { margin-bottom: 8px; }
  .gathering { grid-template-columns: minmax(7.25rem, max-content) minmax(0, 1fr); gap: 18px; padding: 14px 0; }
  .gathering__time { white-space: nowrap; }
  .gathering__day { font-size: 1.45rem; margin-bottom: 2px; }
  .gathering h4 { font-size: 1.28rem; line-height: 1.15; margin-bottom: 0.3em; }
  .gathering__body p { margin-bottom: 0.3em; }
  .weekly__note { padding-top: 12px; margin-bottom: 12px; }
  .event { grid-template-columns: 4.25rem 1fr auto; gap: 18px; padding: 14px 0; }
  .event__date { padding: 7px 4px 8px; border-radius: 12px; }
  .event__day { font-size: 2.05rem; }
  .event__title { font-size: 1.32rem; line-height: 1.2; margin-bottom: 0.2em; }
  .event__where, .event__desc { margin-bottom: 4px; }
  .event__actions { margin-top: 8px; }
  .event__flyer { width: 84px; max-height: 112px; }
}
@media (max-width: 899.98px) {
  .programs { padding-block: clamp(44px, 9vw, 64px); }
  .gathering { padding: 16px 0; }
  .gathering h4 { font-size: 1.3rem; }
  .event { padding: 16px 0; }
  .event__day { font-size: 2.2rem; }
  .event__title { font-size: 1.38rem; line-height: 1.2; }
  .event__actions { margin-top: 10px; }
}
@media (max-width: 559.98px) {
  /* the day and its time on one line; a program's date tile beside its title, the details full width below */
  .gathering__when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
  .gathering__day { margin: 0; }
  .gathering__local { flex-basis: 100%; }
  .event { grid-template-columns: 3.75rem minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: start; }
  .event__body { display: contents; }
  .event__date { grid-row: 1 / span 2; padding: 6px 2px 7px; }
  .event__day { font-size: 1.95rem; }
  .event__title { grid-column: 2; align-self: end; margin: 0; }
  .event__when { grid-column: 2; align-self: start; margin: 0; }
  .event__where, .event__desc, .event__actions { grid-column: 1 / -1; }
  .event__where { margin-top: 8px; }
}

/* ---------- Akhand Gyan: the Hindi print edition, delivered monthly ---------- */
.magazine { background: var(--surface); border-top: 1px solid var(--champagne); }
.magazine__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.magazine__art {  /* the static cover on a parchment plinth */
  display: grid; place-items: center; padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 48px);
  border-radius: var(--radius-card); border: 1px solid var(--champagne); box-shadow: var(--shadow-soft);
  background: radial-gradient(70% 60% at 50% 40%, rgba(245, 158, 11, 0.16), transparent 70%), var(--sunken);
}
.cover {
  position: relative; width: min(300px, 78%); aspect-ratio: 8.5 / 11; padding: 16px; display: flex; border-radius: 3px;
  background: linear-gradient(160deg, #8C1A3E 0%, var(--vermilion-deep) 55%, var(--night) 100%);
  /* the issues of the year stacked behind the cover */
  box-shadow: 7px 7px 0 -1px #5E0D27, 7px 7px 0 0 rgba(252, 211, 77, 0.35), 14px 14px 0 -1px #3A0A18, 14px 14px 0 0 rgba(252, 211, 77, 0.25), var(--shadow-lift);
}
.cover__frame {
  flex: 1; border: 1px solid rgba(252, 211, 77, 0.55); display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 12px;
  background: radial-gradient(60% 40% at 50% 42%, rgba(245, 158, 11, 0.28), transparent 70%);
}
.cover__frame img { width: 56px; height: 56px; }
.cover__masthead { margin: 0; font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; line-height: 1.2; color: #FDE68A; letter-spacing: 0.02em; }
.cover__title { font-family: var(--serif); font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 600; color: #FCD34D; margin: 0; line-height: 1; }
.cover__sub { font-size: var(--fs-sm); color: var(--on-vermilion); margin: 0; opacity: 0.85; }
.cover__badge {
  position: absolute; top: -14px; right: -14px; display: grid; place-content: center; width: 76px; height: 76px; border-radius: 50%;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.1; text-align: center; color: #4C0519;
  background: radial-gradient(circle at 34% 28%, #FFF6DD 0%, #F7D58B 42%, #D99A2B 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 10px 22px -10px rgba(146, 64, 14, 0.7);
}
.cover__badge span { display: block; font-family: var(--serif); font-size: 1.9rem; letter-spacing: 0; line-height: 0.9; }
.offer h2 { font-size: var(--fs-h2); line-height: 1.04; margin-bottom: 0.3em; }
.offer__tag {
  display: inline-flex; align-items: center; min-height: 40px; margin: 0 0 1.1em; padding: 6px 16px; border-radius: 999px;
  border: 1px solid var(--champagne-strong); background: rgba(245, 158, 11, 0.12); color: var(--gold-text);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; letter-spacing: 0.01em;
}
.offer__lead { font-family: var(--serif); font-weight: 500; font-size: var(--fs-lg); line-height: 1.45; }
.offer__price { margin: 1.2em 0 0.4em; color: var(--muted); }
.offer__amount { font-family: var(--serif); font-size: clamp(3rem, 5vw, 4.25rem); font-weight: 600; line-height: 1; color: var(--accent); margin-right: 0.15em; font-variant-numeric: lining-nums; }
.offer .btn { margin-top: 0.6em; }
.offer__note { margin-top: 1.2em; font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 899.98px) {
  .magazine__grid { grid-template-columns: 1fr; }
  .magazine__art { order: 2; }
}
@media (max-width: 479.98px) { .offer .btn { width: 100%; } .cover__badge { width: 64px; height: 64px; top: -10px; right: -10px; } }
/* The 6-page preview reader (.reader*, site.js) is temporarily unmounted from the homepage; its styles stay for its return. */
.reader { display: grid; gap: 16px; }
.reader__langs { display: flex; flex-wrap: wrap; gap: 8px; }
.reader__stage {
  position: relative; display: flex; justify-content: center; align-items: center; gap: 0; min-height: 420px;
  padding: clamp(18px, 3vw, 36px); border-radius: 22px; background: var(--sunken); border: 1px solid var(--champagne);
  overflow: hidden; touch-action: pan-y;
}
.reader__page { display: block; max-width: 100%; height: auto; background: #fff; box-shadow: var(--shadow-lift); }
.reader__spread { display: flex; justify-content: center; max-width: 100%; }
.reader__spread .reader__page { max-width: 50%; }
.reader__spread .reader__page + .reader__page { box-shadow: var(--shadow-lift), inset 10px 0 18px -14px rgb(0 0 0 / 0.35); }
.reader__controls { display: flex; align-items: center; justify-content: center; gap: 18px; }
.reader__count { margin: 0; min-width: 0; flex: 0 1 14rem; text-align: center; font-size: var(--fs-sm); color: var(--muted); }

/* ---------- Devotee & Sewadar Sanctuary ---------- */
.sanctuary {
  overflow: hidden; isolation: isolate; color: var(--on-vermilion); --focus: #FCD34D;
  background: radial-gradient(1000px 600px at 15% 0%, #6A1030 0%, var(--night) 60%), var(--night);
}
.sanctuary > .wrap { position: relative; z-index: 1; }
.sanctuary__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.sanctuary h2 { font-size: var(--fs-h2); line-height: 1.04; color: #FCD34D; margin: 0 0 0.4em; }
.sanctuary .eyebrow { margin-top: 20px; }
.sanctuary__head > p:not(.eyebrow) { font-family: var(--serif); font-weight: 500; font-size: var(--fs-lg); line-height: 1.45; max-width: 30rem; }
.sanctuary .btn { margin-top: 0.6em; }
.sanctuary__head > p.sanctuary__first { font-family: var(--sans); font-size: var(--fs-sm); opacity: 0.85; margin-top: 1.2em; }
.sanctuary__first a { color: #FCD34D; font-weight: 600; }
.dial { width: 88px; height: 88px; }
.dial rect { fill: rgba(255, 247, 238, 0.18); }
.dial rect.lit { fill: var(--amber-glow); }
.dial circle { fill: var(--amber-glow); }
.sanctuary__items { display: grid; border-top: 1px solid rgba(252, 211, 77, 0.3); }
.sanctuary__item { padding: 20px 0; border-bottom: 1px solid rgba(252, 211, 77, 0.2); display: grid; grid-template-columns: minmax(0, 15rem) 1fr; gap: 24px; }
.sanctuary__item h3 { font-size: 1.6rem; font-weight: 600; color: var(--on-vermilion); }
.sanctuary__item p { margin: 0; opacity: 0.88; }
@media (hover: hover) and (pointer: fine) { .sanctuary__first a:hover { color: #FDE68A; } }
@media (max-width: 899.98px) {
  .sanctuary__grid { grid-template-columns: 1fr; }
  .sanctuary__item { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 479.98px) { .sanctuary .btn { width: 100%; } }

/* ---------- Sacred footer ---------- */
.site-footer { background: var(--sunken); border-top: 1px solid var(--champagne); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); font-size: var(--fs-sm); }
.footer__quote { position: relative; text-align: center; padding: clamp(48px, 6vw, 80px) 0 clamp(36px, 4.5vw, 56px); overflow: hidden; }
.footer__quote::after { content: ""; position: absolute; bottom: 0; left: 50%; width: min(560px, 70%); height: 1px; transform: translateX(-50%); background: var(--gold-leaf); }
.footer__ornament { display: inline-block; color: var(--amber); margin-bottom: 18px; }
.footer__blockquote { margin: 0 auto; max-width: 48rem; }
.footer__blockquote p { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.1rem); line-height: 1.16; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.footer__motto { margin: 22px 0 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-text); }
/* Footer: three columns (39.05 release, the global identity): Explore · Global Ashrams · Contact & Connect under the
   crest. One column on phones, two from 640px (Contact & Connect wraps under Explore), three from 1100px.
   Cormorant headings, the site's body face (var(--sans)), the app's tokens in both themes; every link a 44px target. */
.footer__brand { display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); padding-block: clamp(32px, 4vw, 52px) clamp(22px, 2.8vw, 32px); }
.footer__brand .footer__emblem { margin-bottom: 0; }
.footer__brand-text { min-width: 0; }
.footer__logo { height: 56px; width: auto; object-fit: contain; flex-shrink: 0; }
.footer__name { font-family: var(--font-display, var(--serif)); font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); font-weight: 600; line-height: 1.15; margin: 0 0 4px; }
.footer__about { color: var(--muted); max-width: 42rem; margin: 0; line-height: 1.6; }
.footer__cols {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 4.5vw, 64px);
  padding-block: clamp(28px, 3.4vw, 44px) clamp(40px, 5vw, 64px); border-top: 1px solid var(--champagne);
}
@media (min-width: 640px) { .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .footer__cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); } }
.footer__col { min-width: 0; }
.footer__h {
  position: relative; margin: 0 0 12px; padding-bottom: 12px; color: var(--ink);
  font-family: var(--font-display, var(--serif)); font-size: clamp(1.45rem, 1.3rem + 0.5vw, 1.7rem); font-weight: 600; line-height: 1.15; letter-spacing: 0.01em; text-transform: none;
}
.footer__h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 1px; background: linear-gradient(90deg, var(--amber), transparent); }
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.footer__links a, .footer__links .link-like { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; line-height: 1.35; }
.footer__links a.footer__cta { gap: 0.35em; color: var(--accent); font-weight: 600; }
.footer__num, .footer__reach { font-variant-numeric: lining-nums tabular-nums; }
/* schema patch 39.38: the branch's number once, then its two ways to reach it (WhatsApp · Call), each a full tap target */
.footer__phone { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.footer__phone .footer__num { color: var(--ink); font-weight: 600; }
.footer__phone-ways { display: inline-flex; align-items: center; gap: 0 8px; color: var(--muted); }
.footer__reach { margin: 0 0 2px; color: var(--muted); font-size: var(--fs-xs); letter-spacing: 0.02em; }
.footer__group-h { margin: 18px 0 0; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); }
.footer__links--tight a { line-height: 1.3; }
.footer__links a.footer__more-link { color: var(--muted); font-size: var(--fs-xs); }
/* Explore's "All pages": the four pillars and the secondary pages, one tap away (a native disclosure: no script) */
.footer__all { margin-top: 12px; border-top: 1px solid var(--champagne); }
.footer__all-sum {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; cursor: pointer; list-style: none;
  color: var(--ink); font-weight: 600; border-radius: 6px;
}
.footer__all-sum::-webkit-details-marker { display: none; }
.footer__all-sum::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: 6px; border-right: 1.5px solid var(--amber); border-bottom: 1.5px solid var(--amber);
  transform: translateY(-2px) rotate(45deg); transition: transform 200ms var(--ease);
}
.footer__all[open] > .footer__all-sum::after { transform: translateY(2px) rotate(-135deg); }
.footer__all-sum:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.footer__all-body { padding-bottom: 6px; }
.footer__group:first-child .footer__group-h { margin-top: 2px; }
.footer__inline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.footer__inline a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; line-height: 1.3; }
.footer__social { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.footer__social a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
.footer__addr { margin: 14px 0 0; font-style: normal; color: var(--muted); line-height: 1.6; }
.footer__addr strong { color: var(--ink); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .footer__inline a:hover, .footer__social a:hover, .footer__all-sum:hover { color: var(--accent); }
  .footer__inline a:hover, .footer__social a:hover { text-decoration: underline; }
}
@media (prefers-reduced-motion: reduce) { .footer__all-sum::after { transition: none; } }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; border-top: 1px solid var(--champagne); padding-top: 14px; color: var(--muted); }
/* schema patch 39.24: the branch's regional line (tenant desk: footer_config_json) */
.footer__branch { padding: 10px 0 0; color: var(--muted); font-size: .92rem; overflow-wrap: anywhere; }
.footer__branch p { margin: 0; }
.footer__branch a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer__copy { margin: 0; font-size: var(--fs-xs); }
.footer__ver { margin-left: 4px; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; opacity: 0.8; white-space: nowrap; }
.footer__discreet { display: flex; flex-wrap: wrap; gap: 0 22px; }
.footer__discreet a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--muted); text-decoration: none; }
.footer__staff { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--fs-xs); }
.footer__staff a { display: inline-flex; align-items: center; min-height: 48px; }
.footer__preview a { margin-left: 8px; display: inline-flex; justify-content: center; min-width: 44px; }
@media (hover: hover) and (pointer: fine) {
  .footer__links a:hover, .footer__links .link-like:hover { color: var(--accent); text-decoration: underline; }
  .footer__discreet a:hover { color: var(--accent); }
}
@media (pointer: coarse) { .footer__discreet a { min-height: 48px; } }

/* ---------- Plain pages: privacy notice, 404 ---------- */
.page { position: relative; overflow: hidden; padding-block: clamp(44px, 6vw, 96px); isolation: isolate; }
.page > .wrap { position: relative; z-index: 1; }
.page__inner { max-width: 46rem; }
.page__inner--center { text-align: center; margin-inline: auto; }
.page h1 { font-size: clamp(2.6rem, 1.7rem + 3.6vw, 4.25rem); line-height: 1.02; margin-bottom: 0.35em; }
.page h2 { font-size: var(--fs-xl); margin: 1.6em 0 0.45em; }
.page__ornament { display: inline-block; color: var(--amber); margin-bottom: 18px; }
.page__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 2rem; }
.page__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--champagne); }
.page__links a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--champagne-strong); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; }
.page--404::before { content: ""; position: absolute; z-index: -1; inset: -20% -10% auto; height: 80%; background: radial-gradient(closest-side, var(--aura), transparent); pointer-events: none; }
@media (max-width: 479.98px) { .page__actions .btn { width: 100%; } }

/* Privacy notice: one page for the public site, the kiosk and the Sangat portal */
.privacy .page__inner > .lead { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); }
.privacy h2 { scroll-margin-top: calc(var(--header-h) + 20px); padding-top: 1em; border-top: 1px solid var(--champagne); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }
.privacy h3 { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); margin: 1.8em 0 0.5em; }
.privacy p, .privacy li { color: var(--ink); }
.privacy code { font-size: 0.88em; padding: 2px 7px; border-radius: 6px; background: var(--sunken); border: 1px solid var(--line); }
.privacy__version { font-size: var(--fs-sm); color: var(--muted); }
.privacy__toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 12px; }
.page__links a, .privacy__toc a { transition: border-color var(--t-base) var(--ease), background-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease); }
.page__links a:active, .privacy__toc a:active { transform: scale(0.97); }
.privacy__toc a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--champagne-strong); background: var(--surface); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; }
.privacy__glance { padding: 22px 24px; list-style: none; display: grid; gap: 12px; border-radius: var(--radius-card); border: 1px solid var(--champagne); background: var(--surface); box-shadow: var(--shadow-soft); }
.privacy__glance li { position: relative; padding-left: 28px; }
.privacy__glance li::before { content: ""; position: absolute; left: 4px; top: 0.62em; width: 10px; height: 10px; border-radius: 50%; background: var(--amber-glow); box-shadow: 0 0 0 4px var(--champagne); }
.privacy__back { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2.4em; }
@media (hover: hover) and (pointer: fine) {
  .page__links a:hover, .privacy__toc a:hover { border-color: var(--accent); background: rgba(245, 158, 11, 0.06); }
}

/* ---------- Modal ---------- */
.modal {
  width: min(760px, 100vw - 24px); max-height: min(92dvh, 960px); padding: 0; border: 1px solid var(--champagne-strong); border-radius: 22px;
  background: var(--parchment); color: var(--ink); box-shadow: var(--shadow-lift); overflow: hidden;
}
.modal[open] { display: flex; flex-direction: column; }
.modal::backdrop { background: rgba(30, 20, 18, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal > form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; } /* auto basis: WebKit resolved 0% to 0 in the auto-height dialog (a 2px-tall modal) */
.modal__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px 16px; border-bottom: 1px solid var(--champagne); }
.modal__head h2 { font-size: 2rem; }
.modal__body { padding: 20px 24px; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; }
.modal__intro { color: var(--muted); }
.modal__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 24px; border-top: 1px solid var(--champagne); background: var(--surface); }
.modal__done { padding: clamp(36px, 6vw, 64px) 28px; text-align: center; display: grid; justify-items: center; gap: 6px; }
.modal__done img { width: 64px; height: 64px; margin-bottom: 10px; }
.modal__done h2 { font-size: clamp(2rem, 4vw, 2.75rem); }
.modal__done p { color: var(--muted); max-width: 28rem; }
.modal__done-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 10px; }
.rsvp-event { border-left: 3px solid var(--amber); background: var(--surface); padding: 14px 18px; margin-bottom: 20px; border-radius: 0 12px 12px 0; }
.rsvp-event p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.rsvp-event .rsvp-event__title { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--ink); line-height: 1.2; margin-bottom: 4px; }
.fineprint { margin: 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: modal-in 340ms var(--ease); }
  @keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
}
@media (max-width: 559.98px) {
  .modal { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; border: 0; }
  .modal__head { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
  .modal__foot { flex-direction: column-reverse; align-items: stretch; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .modal__foot .btn { width: 100%; }
}

/* v1.0.4 · the Incomplete Profile Interceptor (site.js profileGate()): one calm, centred card that can't be dismissed */
.modal--gate { width: min(520px, 100vw - 24px); }
.gate { display: grid; justify-items: center; gap: 10px; padding: clamp(32px, 6vw, 48px) clamp(22px, 5vw, 40px); text-align: center; }
.gate__mark { width: 64px; height: 64px; margin-bottom: 6px; filter: drop-shadow(0 6px 18px rgba(217, 119, 6, 0.35)); }
.gate__eyebrow { margin: 0; color: var(--gold-text); font-weight: 600; letter-spacing: 0.04em; }
.gate h2 { font-size: clamp(1.9rem, 4.4vw, 2.4rem); line-height: 1.1; }
.gate__text { margin: 0 0 8px; color: var(--muted); max-width: 30rem; }
.gate__go { min-height: 52px; padding-inline: 28px; }
.gate__out { min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gate__out:hover { color: var(--ink); }
@media (max-width: 559.98px) { .modal--gate { height: auto; max-height: 100dvh; } .modal--gate[open] { justify-content: center; } .gate__go { width: 100%; } }

/* ---------- Form (fields from includes/views/form.php) ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.field { display: grid; gap: 6px; margin: 0; min-width: 0; border: 0; padding: 0; }
.field--full { grid-column: 1 / -1; }
.field > label, .field legend { font-size: var(--fs-sm); font-weight: 500; color: var(--ink); padding: 0; }
.optional { color: var(--muted); font-weight: 400; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="password"], .field select {
  width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  font-family: var(--sans); font-size: 1.0625rem; color: var(--ink); appearance: none; -webkit-appearance: none;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.field select {
  background-image: var(--select-arrow);
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.28); }
.field [aria-invalid="true"] { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12); }
.field__error { margin: 0; font-size: var(--fs-xs); font-weight: 500; color: var(--danger); }
/* Touch screens: a field that no sheet sizes still gets 16px text, so iOS never zooms the page on focus now that pinch-zoom
   is on (head.php). :where() keeps this under every authored rule; a sheet that sets a smaller size adds its own touch rule. */
@media (pointer: coarse) {
  :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="image"]), select, textarea) { font-size: max(16px, 1em); }
}
.phone { display: grid; grid-template-columns: minmax(7.5rem, 38%) 1fr; gap: 8px; }
.address { border-top: 1px solid var(--champagne); padding-top: 14px; margin-top: 4px; }
.address legend { float: left; width: 100%; margin-bottom: 10px; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }
.address__grid { clear: both; display: grid; grid-template-columns: 2fr 1.4fr 1fr; gap: 16px 18px; }
.country-other { margin-top: 8px; }
.address-optional summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; font-weight: 600; color: var(--accent); }
.address-optional[open] summary { margin-bottom: 4px; }
.choice { border-top: 1px solid var(--champagne); padding-top: 14px; }
.choice legend { float: left; width: 100%; margin-bottom: 10px; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }
.segmented, .chips { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.segmented__opt, .chip { position: relative; }
.segmented__opt input, .chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.segmented__opt span, .chip span {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); font-weight: 500; transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.segmented__opt input:checked + span { background: var(--vermilion); color: var(--on-vermilion); border-color: var(--vermilion); }
.chip input:checked + span { background: rgba(245, 158, 11, 0.16); border-color: var(--amber); color: var(--gold-text); }
.chip input:checked + span::before { content: "✓"; margin-right: 8px; font-weight: 600; }
.segmented__opt input:focus-visible + span, .chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.optins { gap: 10px; border-top: 1px solid var(--champagne); padding-top: 14px; }
.check, .field > label.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: var(--fs-sm); padding-block: 10px; margin-block: -10px; }  /* 44px tap area, same layout (beats .field > label's padding reset) */
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--vermilion); flex: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-alert { margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; background: rgba(180, 35, 24, 0.07); color: var(--danger); font-weight: 500; font-size: var(--fs-sm); }
[data-submit][aria-busy="true"] { opacity: 0.7; cursor: progress; }
@media (max-width: 639.98px) {
  .form-grid, .address__grid { grid-template-columns: 1fr; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 12px)); z-index: 200; transform: translateX(-50%);
  width: max-content; max-width: min(92vw, 30rem); padding: 14px 22px; border-radius: 16px;
  background: var(--night); color: var(--on-vermilion); border: 1px solid rgba(252, 211, 77, 0.45);
  box-shadow: var(--shadow-lift); font-weight: 500; text-align: center; pointer-events: none;
}
.toast small { display: block; font-weight: 400; opacity: 0.85; margin-top: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .toast:not([hidden]) { animation: toast-in 320ms var(--ease); }
  @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
}

/* ---------- Festival themes (the season layer) ----------
   <html data-season> is set before first paint (head.php): navratri, diwali, janmashtami, winter (Lohri & Sankranti),
   holi, gurupurnima or default. A season never changes the core palette (Sacred Parchment, Deep Vermilion, Radiant Amber,
   gold filigree, Cormorant Garamond headings): it adds ACCENTS only, and default is the core design untouched.
     diwali       golden diya glow; a lit diya on marigold filigree
     navratri     a marigold garland; a radiant crimson aura (v1.1.2: kumkum crimson, warmer than the core vermilion)
     janmashtami  royal gold (v1.1.2: deeper pitambar gold); a peacock-feather eye in gold filigree (that eye is the only blue)
     ramnavami    (v1.1.2) Ram Navami: saffron light; the Suryavanshi sun and a dhwaja on saffron bunting
     holi         a soft radiant aura in amber and vermilion (no rainbow)
     winter       candle-gold glow
     gurupurnima  the full moon in a gold halo
   Each season brings its light (hero glow, swaroop halo, particles), the header garland and the emblem, and, from v1.0.2:
   the filigree ornament (assets/img/season/ornament-<season>.svg) on the hero's gold baseline, under centred section titles
   and on the footer rule; beaded gilt edges on the dividers and the cause cards; a diya glow under cards (the
   shadow tokens) and around the primary actions; and a radiant aura that breathes behind the hero, the swaroop and the
   Brahm Gyan story's stage (opacity and transform only, 9-12 s). Season colours cross-fade when Temple Dark is toggled. Every
   accent is decorative (pseudo-elements and backgrounds, pointer-events: none) and changes no layout; all motion is off
   under prefers-reduced-motion, and forced colours and print drop the ornaments. */
:root { --fest-glow: transparent; --fest-glow-2: transparent; --fest-ring: transparent; --fest-bead: #F59E0B; --fest-bead-2: #EA7A0B; --fest-ornament: none; }
[data-season="navratri"] {     /* Sharad Navratri: radiant kumkum crimson, marigold garlands on the core palette (v1.1.2) */
  --season-glow: rgba(225, 29, 72, 0.13); --season-tint: rgba(159, 18, 57, 0.09);
  --season-aura: rgba(225, 29, 72, 0.26); --season-ring: rgba(190, 18, 60, 0.22); --particle: rgba(225, 29, 72, 0.32);
  --fest-glow: rgba(225, 29, 72, 0.3); --fest-glow-2: rgba(234, 88, 12, 0.14); --fest-ring: rgba(190, 18, 60, 0.22);
  --fest-bead: #FBBF24; --fest-bead-2: #BE123C; --fest-ornament: url("../img/season/ornament-navratri.svg");
}
[data-season="navratri"][data-theme="dark"] { --season-glow: rgba(244, 63, 94, 0.2); --season-tint: rgba(159, 18, 57, 0.38); --particle: rgba(251, 113, 133, 0.55); --fest-glow: rgba(244, 63, 94, 0.36); --fest-glow-2: rgba(251, 146, 60, 0.18); }
[data-season="diwali"] {       /* Diwali: the diya's flame, marigold and gold leaf */
  --season-glow: rgba(251, 191, 36, 0.2); --season-tint: rgba(180, 83, 9, 0.08);
  --season-aura: rgba(251, 191, 36, 0.32); --season-ring: rgba(251, 191, 36, 0.3); --particle: rgba(234, 140, 20, 0.48);
  --fest-glow: rgba(251, 191, 36, 0.46); --fest-glow-2: rgba(245, 158, 11, 0.16); --fest-ring: rgba(251, 191, 36, 0.26);
  --fest-bead: #FBBF24; --fest-bead-2: #EA7A0B; --fest-ornament: url("../img/season/ornament-diwali.svg");
}
[data-season="diwali"][data-theme="dark"] { --season-glow: rgba(251, 191, 36, 0.24); --season-tint: rgba(180, 83, 9, 0.26); --particle: rgba(252, 211, 77, 0.75); --fest-glow: rgba(252, 211, 77, 0.42); --fest-glow-2: rgba(245, 158, 11, 0.2); }
[data-season="janmashtami"] {  /* Janmashtami: royal pitambar gold on the core palette; a peacock-feather hint in the filigree (v1.1.2) */
  --season-glow: rgba(212, 160, 23, 0.16); --season-tint: rgba(120, 18, 43, 0.05);
  --season-aura: rgba(212, 160, 23, 0.32); --season-ring: rgba(184, 134, 11, 0.28); --particle: rgba(184, 134, 11, 0.4);
  --fest-glow: rgba(234, 179, 8, 0.4); --fest-glow-2: rgba(184, 134, 11, 0.16); --fest-ring: rgba(184, 134, 11, 0.26);
  --fest-bead: #E9B949; --fest-bead-2: #8A5A00; --fest-ornament: url("../img/season/ornament-janmashtami.svg");
}
[data-season="janmashtami"][data-theme="dark"] { --season-glow: rgba(234, 179, 8, 0.18); --season-tint: rgba(120, 18, 43, 0.26); --particle: rgba(250, 204, 21, 0.6); --fest-glow: rgba(250, 204, 21, 0.38); --fest-glow-2: rgba(212, 160, 23, 0.2); }
[data-season="ramnavami"] {    /* Ram Navami (v1.1.2): saffron (kesariya) light on the core palette; the Suryavanshi sun and a dhwaja */
  --season-glow: rgba(249, 115, 22, 0.15); --season-tint: rgba(120, 18, 43, 0.06);
  --season-aura: rgba(249, 115, 22, 0.3); --season-ring: rgba(234, 88, 12, 0.22); --particle: rgba(234, 88, 12, 0.38);
  --fest-glow: rgba(251, 146, 60, 0.4); --fest-glow-2: rgba(245, 158, 11, 0.15); --fest-ring: rgba(234, 88, 12, 0.22);
  --fest-bead: #FDBA74; --fest-bead-2: #C2410C; --fest-ornament: url("../img/season/ornament-ramnavami.svg");
}
[data-season="ramnavami"][data-theme="dark"] { --season-glow: rgba(249, 115, 22, 0.2); --season-tint: rgba(120, 18, 43, 0.28); --particle: rgba(253, 186, 116, 0.6); --fest-glow: rgba(251, 146, 60, 0.38); --fest-glow-2: rgba(245, 158, 11, 0.2); }
[data-season="winter"] {       /* Lohri & Makar Sankranti: candle-gold light */
  --season-glow: rgba(234, 140, 40, 0.14); --season-aura: rgba(252, 196, 90, 0.3);
  --fest-glow: rgba(252, 196, 90, 0.42); --fest-glow-2: rgba(234, 140, 40, 0.14); --fest-ring: rgba(245, 158, 11, 0.22);
  --fest-bead: #F2C14E; --fest-bead-2: #D97706; --fest-ornament: url("../img/season/ornament-winter.svg");
}
[data-season="winter"][data-theme="dark"] { --season-glow: rgba(234, 140, 40, 0.18); --fest-glow: rgba(252, 196, 90, 0.36); --fest-glow-2: rgba(234, 140, 40, 0.18); }
[data-season="holi"] {         /* Holi & Chaitra Navratri: a soft radiant aura in amber and vermilion */
  --season-glow: rgba(245, 158, 11, 0.16); --season-tint: rgba(120, 18, 43, 0.08);
  --season-aura: rgba(234, 108, 40, 0.26); --season-ring: rgba(190, 18, 60, 0.16); --particle: rgba(190, 18, 60, 0.28);
  --fest-glow: rgba(245, 158, 11, 0.36); --fest-glow-2: rgba(190, 18, 60, 0.12); --fest-ring: rgba(190, 18, 60, 0.16);
  --fest-bead: #F59E0B; --fest-bead-2: #9F1239; --fest-ornament: url("../img/season/ornament-holi.svg");
}
[data-season="holi"][data-theme="dark"] { --season-glow: rgba(245, 158, 11, 0.18); --season-tint: rgba(120, 18, 43, 0.3); --particle: rgba(251, 146, 60, 0.5); --fest-glow: rgba(251, 146, 60, 0.34); --fest-glow-2: rgba(190, 18, 60, 0.22); }
[data-season="gurupurnima"] {  /* Guru Purnima & Janmashtami: the full moon's gold halo */
  --season-aura: rgba(242, 193, 78, 0.3);
  --fest-glow: rgba(255, 232, 170, 0.6); --fest-glow-2: rgba(242, 193, 78, 0.14); --fest-ring: rgba(242, 193, 78, 0.24);
  --fest-bead: #FFF4D6; --fest-bead-2: #C98E2E; --fest-ornament: url("../img/season/ornament-gurupurnima.svg");
}
[data-season="gurupurnima"][data-theme="dark"] { --fest-glow: rgba(255, 236, 190, 0.34); --fest-glow-2: rgba(242, 193, 78, 0.16); }

.season-garland { height: 0; }
.season-emblem { display: none; background: center / contain no-repeat; pointer-events: none; }
[data-season="navratri"] .season-emblem { display: block; background-image: url("../img/season/navratri.svg"); }
[data-season="diwali"] .season-emblem { display: block; background-image: url("../img/season/diwali.svg"); }
[data-season="janmashtami"] .season-emblem { display: block; background-image: url("../img/season/janmashtami.svg"); }
[data-season="winter"] .season-emblem { display: block; background-image: url("../img/season/winter.svg"); }
[data-season="holi"] .season-emblem { display: block; background-image: url("../img/season/holi.svg"); }
[data-season="gurupurnima"] .season-emblem { display: block; background-image: url("../img/season/gurupurnima.svg"); }
[data-season="ramnavami"] .season-emblem { display: block; background-image: url("../img/season/ramnavami.svg"); }
[data-season="navratri"] .season-garland {  /* chunri: kumkum red with gold bandhani dots, marigold beads beneath */
  height: 11px; background:
    radial-gradient(circle at 4px 2.5px, #FDE68A 0 1.1px, transparent 1.5px) 0 0 / 8px 5px repeat-x,
    linear-gradient(90deg, #5E0E24, #78122B 50%, #5E0E24) 0 0 / 100% 5px no-repeat,
    radial-gradient(circle at 7px 8px, #FBBF24 0 2.1px, #EA580C 2.5px 3px, transparent 3.4px) 0 0 / 14px 11px repeat-x;
}
[data-season="ramnavami"] .season-garland {  /* saffron dhwaja bunting on a gold thread */
  height: 9px; background:
    linear-gradient(90deg, transparent, #C98E2E 10%, #F2C14E 50%, #C98E2E 90%, transparent) 0 0 / 100% 1px no-repeat,
    conic-gradient(from -30deg at 50% 100%, #EA580C 0 60deg, transparent 60deg) 0 1px / 16px 8px repeat-x;
}
[data-season="diwali"] .season-garland {  /* marigold beads */
  height: 7px; background:
    radial-gradient(circle at 7px 3.5px, #FBBF24 0 2.2px, #EA7A0B 2.6px 3.4px, transparent 3.8px) 0 0 / 14px 7px repeat-x,
    linear-gradient(#B45309, #B45309) 0 3px / 100% 1px no-repeat;
}
[data-season="janmashtami"] .season-garland {  /* gold filigree beads, each with a peacock-feather pupil (a hint of blue, not a blue row) */
  height: 9px; background:
    radial-gradient(circle at 11px 4.5px, #1E3A8A 0 0.7px, #0E7490 0.9px 1.3px, #F2C14E 1.6px 2.9px, #B45309 3.1px 3.5px, transparent 3.8px) 0 0 / 22px 9px repeat-x,
    linear-gradient(90deg, transparent, #C98E2E 12%, #F2C14E 50%, #C98E2E 88%, transparent) 0 4px / 100% 1px no-repeat;
}
[data-season="winter"] .season-garland {  /* Lohri fire, Sankranti dawn */
  height: 4px; background: linear-gradient(90deg, #7C2D12, #DC4B1C 25%, #F59E0B 50%, #FCD34D 62%, #F59E0B 75%, #7C2D12);
}
[data-season="holi"] .season-garland {  /* gulal in amber and vermilion on a gold thread */
  height: 6px; background:
    radial-gradient(circle at 5px 3px, #F59E0B 0 2.6px, transparent 3px) 0 0 / 20px 6px repeat-x,
    radial-gradient(circle at 15px 3px, #9F1239 0 2.3px, transparent 2.7px) 0 0 / 20px 6px repeat-x,
    linear-gradient(90deg, transparent, #C98E2E 12%, #F2C14E 50%, #C98E2E 88%, transparent) 0 2.5px / 100% 1px no-repeat;
}
[data-season="gurupurnima"] .season-garland {  /* gold leaf with lotus points */
  height: 5px; background:
    radial-gradient(circle at 12px 2.5px, #F2C14E 0 2.4px, transparent 2.8px) 0 0 / 24px 5px repeat-x,
    linear-gradient(90deg, transparent, #C98E2E 15%, #F2C14E 50%, #C98E2E 85%, transparent) 0 2px / 100% 1px no-repeat;
}

/* Diya glow under the cards and around the primary actions: the elevation tokens gain one warm layer. */
:root:not([data-season="default"]) {
  --shadow-soft: 0 1px 2px rgba(58, 10, 24, 0.06), 0 8px 24px -12px rgba(58, 10, 24, 0.16), 0 24px 48px -28px rgba(120, 18, 43, 0.22), 0 18px 46px -26px var(--fest-glow);
  --shadow-lift: 0 2px 4px rgba(58, 10, 24, 0.07), 0 14px 32px -14px rgba(58, 10, 24, 0.22), 0 32px 64px -30px rgba(120, 18, 43, 0.3), 0 22px 56px -24px var(--fest-glow);
}
:root:not([data-season="default"])[data-theme="dark"] {
  --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 24px -12px rgb(0 0 0 / 0.55), 0 0 0 1px rgba(245, 158, 11, 0.04), 0 18px 46px -28px var(--fest-glow);
  --shadow-lift: 0 2px 2px rgb(0 0 0 / 0.3), 0 16px 32px -10px rgb(0 0 0 / 0.55), 0 32px 60px -24px rgb(0 0 0 / 0.6), 0 22px 56px -26px var(--fest-glow);
}
:root:not([data-season="default"]) .is-site .btn--primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(94, 14, 36, 0.9), 0 0 0 4px var(--fest-ring), 0 12px 28px -14px rgba(120, 18, 43, 0.75), 0 0 28px -6px var(--fest-glow);
}
:root:not([data-season="default"]) .is-site .btn--gold {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 1px rgba(201, 138, 34, 0.6), 0 0 0 4px var(--fest-ring), 0 14px 32px -14px rgba(217, 119, 6, 0.85), 0 0 28px -6px var(--fest-glow);
}
:root:not([data-season="default"]) .btn--portal {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 4px var(--season-ring), 0 10px 24px -14px rgba(120, 18, 43, 0.8), 0 0 24px -6px var(--fest-glow);
}
@media (hover: hover) and (pointer: fine) {
  :root:not([data-season="default"]) .is-site .btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(106, 15, 43, 0.9), 0 0 0 4px var(--fest-ring), 0 16px 34px -14px rgba(120, 18, 43, 0.85), 0 0 34px -6px var(--fest-glow); }
}

/* The filigree ornament: on the hero's gold baseline, under centred section titles and on the footer's rule. */
:root:not([data-season="default"]) .hero::after,
:root:not([data-season="default"]) .footer__quote::after {
  height: 22px; background: var(--fest-ornament) center / auto 22px no-repeat, var(--gold-leaf) 0 12px / 100% 1px no-repeat;
}
:root:not([data-season="default"]) .section-head--center h2::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; width: 210px; height: 21px; transform: translateX(-50%);
  background: var(--fest-ornament) center / contain no-repeat; pointer-events: none;
}
:root:not([data-season="default"]) .eyebrow--ornate .ornament { filter: drop-shadow(0 0 5px var(--fest-glow)); }
:root:not([data-season="default"]) .footer__ornament { filter: drop-shadow(0 0 6px var(--fest-glow)); }
/* Beaded gilt edges: the gold-leaf dividers between sections (#mission keeps its plain line: the hero's ornament sits just
   above it) and the top edge of the initiative cards. */
:root:not([data-season="default"]) :is(.ashrams, .programs)::before {
  height: 7px; opacity: 0.9;
  background: radial-gradient(circle at 7px 3.5px, var(--fest-bead) 0 1.7px, var(--fest-bead-2) 2px 2.5px, transparent 2.9px) center 0 / 14px 7px repeat-x,
              var(--gold-leaf) 0 3px / 100% 1px no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
:root:not([data-season="default"]) .cause::after {
  content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 4px; pointer-events: none; opacity: 0.75;
  background: radial-gradient(circle at 6px 1.5px, var(--fest-bead) 0 1.3px, var(--fest-bead-2) 1.6px 1.9px, transparent 2.3px) center 0 / 12px 4px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}
/* Radiant aura: the hero's warm light, the swaroop halo and the Brahm Gyan story's stage breathe slowly. */
:root:not([data-season="default"]) .hero__aura { background: radial-gradient(closest-side, var(--fest-glow), var(--fest-glow-2) 55%, transparent); }
/* The story is a dark band in light and Temple Dark alike: its diya glow is the season's saturated aura colour
   (about 0.3 alpha), not --fest-glow, whose pale light-surface tones (Guru Purnima's moonlight cream) turn milky. */
:root:not([data-season="default"]) .story__frame::before { background: radial-gradient(closest-side, var(--season-aura), transparent); opacity: 0.8; }
[data-season="gurupurnima"] .swaroop__glow {  /* moonlight behind the head */
  background: radial-gradient(60% 42% at 50% 30%, rgba(255, 248, 225, 0.75), rgba(242, 193, 78, 0.3) 55%, transparent 80%);
}
@property --season-glow { syntax: "<color>"; inherits: true; initial-value: rgba(245, 158, 11, 0.12); }
@property --season-aura { syntax: "<color>"; inherits: true; initial-value: rgba(245, 158, 11, 0.2); }
@property --season-tint { syntax: "<color>"; inherits: true; initial-value: rgba(120, 18, 43, 0.05); }
@property --fest-glow { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --fest-glow-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@media (prefers-reduced-motion: no-preference) {
  /* The festival emblem settles in after the portrait; the season's light cross-fades with Temple Dark; the accents fade
     in once, then the aura breathes (opacity and transform only, at least 9 s a breath). */
  :root { transition: --season-glow 1.2s var(--ease), --season-aura 1.2s var(--ease), --season-tint 1.2s var(--ease), --fest-glow 1.2s var(--ease), --fest-glow-2 1.2s var(--ease); }
  .js .swaroop .season-emblem { animation: emblem-in 1.2s var(--ease) 1.1s both; }
  .js:not([data-season="default"]) .hero::after, .js:not([data-season="default"]) .section-head--center h2::after { animation: fest-in 1.6s var(--ease) 0.5s both; }
  .js:not([data-season="default"]) .hero__aura { will-change: transform, opacity; animation: fest-in 1.6s var(--ease) both, fest-breathe 12s ease-in-out 1.6s infinite; }
  .js:not([data-season="default"]) .swaroop__aura { will-change: transform, opacity; animation: fest-breathe 9s ease-in-out 2.5s infinite; }
  .js[data-season="diwali"] .swaroop__aura { animation: diya-breathe 9s ease-in-out 2.5s infinite; }
  .js:not([data-season="default"]) .story__frame::before { will-change: transform, opacity; animation: fest-glow 10s ease-in-out infinite; }
  @keyframes emblem-in { from { opacity: 0; transform: translateY(8px) scale(0.92); } to { opacity: 1; transform: none; } }
  @keyframes fest-in { from { opacity: 0; } }
  @keyframes fest-breathe { 0%, 100% { opacity: 0.8; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1.03); } }
  @keyframes fest-glow { 0%, 100% { opacity: 0.4; transform: scale(0.96); } 50% { opacity: 0.7; transform: scale(1.04); } }
  @keyframes diya-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 40% { opacity: 0.74; transform: scale(0.975); } 70% { opacity: 0.92; transform: scale(1.02); } }
}
@media (forced-colors: active) {
  :root:not([data-season="default"]) :is(.section-head--center h2, .cause)::after,
  :root:not([data-season="default"]) .story__frame::before { display: none; }
  :root:not([data-season="default"]) :is(.hero, .footer__quote)::after { height: 1px; background: CanvasText; }
}
@media print {
  :root:not([data-season="default"]) :is(.section-head--center h2, .cause)::after, .season-garland { display: none; }
}

/* ---------- Temple Dark section tones ---------- */
body, .site-header, .site-footer, .initiatives, .faq, .magazine, .modal, .ashram, .event__date, .filter, .centre-card,
.field input, .field select { transition: background-color 400ms var(--ease), color 400ms var(--ease), border-color 400ms var(--ease); }
/* The theme-tone rule above would drop the hover lift and press transitions of the directory cards and filters. */
.ashram { transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color var(--t-base) var(--ease), background-color 400ms var(--ease), color 400ms var(--ease); }
.filter { transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-fast) var(--ease); }
[data-theme="dark"] .hero::before {
  background: radial-gradient(900px 600px at 76% 36%, var(--season-glow), transparent 62%),
              radial-gradient(700px 500px at 0% 0%, var(--season-tint), transparent 60%);
}
[data-theme="dark"] .initiatives { background: #110E0B; }
[data-theme="dark"] .faq { background: #0F0C0A; }
[data-theme="dark"] .sanctuary { background: radial-gradient(1000px 600px at 15% 0%, #3A0A18 0%, #160A0C 60%), #160A0C; border-block: 1px solid var(--champagne); }
[data-theme="dark"] .site-footer { background: #0A0807; }
[data-theme="dark"] .reader__stage, [data-theme="dark"] .magazine__art { background-color: #120E0B; }
[data-theme="dark"] .modal::backdrop { background: rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .rsvp-event, [data-theme="dark"] .modal__foot { background: var(--sunken); }
[data-theme="dark"] .form-alert { background: rgba(248, 113, 113, 0.12); }
[data-theme="dark"] .site-header.is-scrolled { box-shadow: 0 12px 32px -22px rgba(0, 0, 0, 0.8); }
[data-theme="dark"] .menu-btn { background: rgba(255, 247, 238, 0.04); }
@media (prefers-reduced-motion: reduce) {
  body, .site-header, .site-footer { transition: none; }
  .cause:hover, .ashram:hover, .btn:hover { transform: none !important; }
  .js .centre-card:not([data-inactive]) { animation: none; }
  .hero__aura, .swaroop__aura { filter: blur(48px); }
}

/* The toast shown inside the open drawer (phones) stays within it. */
dialog .toast { max-width: calc(100% - 24px); }

/* Print: everything is visible, whether or not it was scrolled into view. */
@media print {
  .reveal-ready [data-reveal] { opacity: 1 !important; animation: none !important; transform: none !important; }
}


/* ===== v1.0.6 comms: the golden reminders bell and the Official WhatsApp Channel badges (header, drawer, footer) ===== */
.tool-btn--bell { border-color: rgba(217, 119, 6, 0.42); background: radial-gradient(circle at 50% 46%, rgba(252, 211, 77, 0.24), transparent 70%); }
.tool-btn--bell .i-bell { filter: drop-shadow(0 1px 3px rgba(217, 119, 6, 0.45)); }
.drawer__tool--bell { grid-column: 1 / -1; border-color: rgba(252, 211, 77, 0.5); background: linear-gradient(135deg, rgba(248, 216, 136, 0.16), rgba(201, 138, 34, 0.08)); color: #FCE7B8; }
.drawer__tool--bell.is-on { border-color: #F2B54C; }
/* compact header link: icon only, and only where the header has room for it (≥ 1440px) */
.tool-btn--channel { display: none; text-decoration: none; border-color: rgba(37, 211, 102, 0.42); background: radial-gradient(circle at 50% 46%, rgba(37, 211, 102, 0.16), transparent 70%); }
.i-channel { font-family: var(--emoji); line-height: 1; }
@media (min-width: 1440px) { .tool-btn--channel { display: inline-grid; } }
@media (min-width: 1440px) and (max-width: 1599.98px) { .site-header:has(.btn--member):has(.tool-btn--channel) .btn--member [data-pill-label] { max-width: 10em; } }
.wa-channel-badge {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px; border-radius: 999px; max-width: 100%;
  border: 1px solid rgba(37, 211, 102, 0.45); background: rgba(37, 211, 102, 0.08); color: var(--ink);
  font-size: 0.875rem; font-weight: 600; line-height: 1.25; text-decoration: none; overflow-wrap: anywhere;
}
.wa-channel-badge > span[aria-hidden] { font-family: var(--emoji); flex: none; }
.wa-channel-badge--footer { margin-top: 12px; }
.wa-channel-badge--drawer { justify-content: center; min-height: 48px; margin-bottom: 6px; color: #C9F5DA; border-color: rgba(37, 211, 102, 0.5); background: rgba(37, 211, 102, 0.1); }
@media (hover: hover) and (pointer: fine) {
  .wa-channel-badge:hover { border-color: #25D366; background: rgba(37, 211, 102, 0.16); color: var(--ink); }
  .wa-channel-badge--drawer:hover { color: #E8FBEF; }
  .tool-btn--channel:hover { border-color: #25D366; background: rgba(37, 211, 102, 0.14); }
  .tool-btn--bell:hover { border-color: #F2B54C; }
}

/* ===== v1.1.2 chrome: 4K Ultra-HD layout pinning ==========================================================================
   Every content container is clamped and centred; heroes and section grounds may bleed edge to edge, text and cards never
   do. The site's container is .wrap (width: min(100% - 2 gutters, --wrap)): 80rem (1280px) up to 1599px, 85rem from
   1600px and 90rem (1440px) from 1880px, which is the ceiling at 2560 and 3840. Reusable for any page:
     --djjs-container-max  80rem   the brief's max-w-7xl (a narrower, card-led page)
     --djjs-wide-max       var(--wrap)  the site's own column (≤ 90rem)
     --djjs-prose-max      46rem   editorial text
     --djjs-gutter         the responsive side padding (16px → 56px, never less than the safe area)
     .djjs-container       width: min(100% - 2 gutters, --djjs-container-max); margin-inline: auto
     .djjs-container--wide the same at --djjs-wide-max
     .djjs-prose           max-width: --djjs-prose-max (centre it with .djjs-prose--center)
     .djjs-bleed           a full-width band (backgrounds) whose children are containers
   Long-measure text in the existing labs, liturgy and pillar pages is held to about 75 characters from 1880px. */
:root { --djjs-container-max: 80rem; --djjs-wide-max: var(--wrap); --djjs-prose-max: 46rem; --djjs-gutter: max(var(--gutter), var(--safe-x)); }
.djjs-container { width: min(100% - 2 * var(--djjs-gutter), var(--djjs-container-max)); margin-inline: auto; }
.djjs-container--wide { width: min(100% - 2 * var(--djjs-gutter), var(--djjs-wide-max)); }
.djjs-prose { max-width: var(--djjs-prose-max); }
.djjs-prose--center { margin-inline: auto; }
.djjs-bleed { width: 100%; }
:root .lit--text .wrap { --wrap: 1440px; }                  /* the Lyric Sanctuary used 1600px from 2400px: back under the clamp */
@media (min-width: 1880px) {
  :is(.mod__science, .eq-card__note, .readout__calc, .pg-pillar__sum, .pg-pillar__micro, .verse__meaning, .lit__hint) { max-width: 46em; }
}
/* v1.1.2 integration: the language switcher took ~60px of the header row, which squeezed the wordmark under the nav from
   1024 to 1359px. There, "Causes" leaves the bar (the page is in Explore as Social Initiatives) and Programs / FAQ wait
   for 1360px. */
@media (min-width: 1024px) and (max-width: 1279.98px) { .site-header .nav a[href$="#initiatives"] { display: none; } }
@media (max-width: 1359.98px) { .nav a.nav__wide { display: none; } }
/* Signed in, the name pill is wider still: Ashrams leaves the bar below 1080px (Explore → Find a centre) and the wide
   items wait for 1680px. */
@media (min-width: 1024px) and (max-width: 1079.98px) { .site-header:has(.btn--member) .nav a[href$="#ashrams"] { display: none; } }
@media (max-width: 1679.98px) { .site-header:has(.btn--member) .nav a.nav__wide { display: none; } }
/* Schema patch 39.34: the Social Media Sewa Team's 📸 circle (<djjs-sewa-pill>, 44px + a gap) and a long greeting both take
   the wordmark's room from 1680px, where the wide items return, until the 1440px column at 1880px: there the team's header
   keeps the wide items in Explore and a signed-in greeting ends in its ellipsis a little sooner (the full one is its aria-label). */
@media (min-width: 1680px) and (max-width: 1879.98px) {
  .site-header:has(djjs-sewa-pill[data-on]) .nav a.nav__wide { display: none; }
  .btn--member [data-pill-label] { max-width: 14em; }
}
/* v1.3.2: the festive styling switch in the footer (assets/js/chrome-v112.js) */
.footer__festive { margin-left: 10px; min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--champagne-strong, rgba(217, 119, 6, .4)); background: transparent; color: inherit; font: inherit; font-size: .85em; cursor: pointer; }
.footer__festive:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) { .footer__festive { min-height: 44px; } }

/* =========================================================================================================================
   v1.3.8 luxury design system
   -------------------------------------------------------------------------------------------------------------------------
   Tokens (top of this file): --surface (#161311 dark / Sacred Parchment light), --card-border (1px gold), --glass-panel,
   --edge-glow, --canvas-underlay, --scroll-thumb, --display (Cinzel), --imperial-crimson, --deep-burgundy, --radiant-amber.
   Reusable classes for any page:
     .lux-card     a #161311 / parchment panel with the gold hairline
     .lux-glass    a glass panel: backdrop blur 12px over rgba(28,25,23,.6) (dark) / parchment (light)
     .lux-lift     the tactile hover: a 4px lift (transform only) with an amber edge glow; none under reduced motion
     .lux-scroll   thin golden scrollbars
     .term-en      an English subtitle beside a Sanskrit term (includes/glossary.php's gloss() is the richer version)
     [data-hero-particles]  a hero with drifting golden particles (assets/js/hero-particles.js adds canvas.hero-particles)
   Page-scoped styles (sanctum, kids, science, aarti …) are untouched: this layer only restyles the shared chrome
   (header, Explore, drawer, footer), the type ramp, and the cards of the homepage and the v1.0.5 pillar pages.
   ========================================================================================================================= */

/* Canvas: Midnight Onyx with soft radial amber (and crimson) underlays at the top of every public page */
body.is-site { background-image: var(--canvas-underlay); background-repeat: no-repeat; background-size: 100% 1800px; }

/* Type: classical editorial headings with air between the letters, Cinzel display capitals for the small labels */
h1, h2, h3, h4 { letter-spacing: 0.006em; }
.section-head h2, .pg-h2 { letter-spacing: 0.004em; }
.hero__title { letter-spacing: -0.02em; }   /* display size: the line pairs keep their v1.0.3 breaks */
.eyebrow, .sub-h, .footer__motto, .drawer__sub-h { font-family: var(--display); font-weight: 600; letter-spacing: 0.2em; }
.eyebrow { font-size: 0.75rem; }
.footer__motto { letter-spacing: 0.24em; }
.lead, .hero__lead { letter-spacing: 0.004em; }

/* Cards and panels: #161311 (dark) / parchment (light) with the 1px gold hairline */
.lux-card, .cause, .mm-card, .ashram, .weekly, .upcoming, .mind-card, .pg-step, .pg-tier, .pg-hero__pillars a, .faq__item {
  border-color: var(--card-border);
}
.lux-card { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }
.lux-glass {
  background: var(--glass-panel); border: 1px solid var(--card-border);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
}
[data-theme="dark"] :is(.cause, .mm-card, .ashram, .weekly, .upcoming, .pg-step) { background-color: var(--surface); }

/* Tactile hover: lift 4px (transform only) with an amber edge glow; static under reduced motion and on touch */
:root :is(.lux-lift, .cause, .mm-card, .ashram, .mind-card, .pg-tier, .pg-hero__pillars a) {
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), border-color 280ms var(--ease), background-color 400ms var(--ease), color 200ms var(--ease);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :root :is(.lux-lift, .cause, .mm-card, .ashram, .mind-card, .pg-tier, .pg-hero__pillars a):hover {
    transform: translateY(-4px); box-shadow: var(--edge-glow); border-color: rgba(217, 119, 6, 0.7);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  :root :is(.lux-lift, .cause, .mm-card, .ashram, .mind-card, .pg-tier, .pg-hero__pillars a):hover { transform: none; box-shadow: var(--edge-glow); }
}

/* Focus: the 2px ring plus a soft halo on the controls people tab through most */
:is(.btn, .tool-btn, .menu-btn, .nav-explore__btn, .nav-explore__list a, .drawer-acc__sum, .drawer__explore a, .footer__links a, .footer__inline a, .footer__social a, .lux-lift):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 7px rgba(217, 119, 6, 0.22);
}
.drawer :is(.drawer-acc__sum, .drawer__explore a):focus-visible { outline-color: #FCD34D; }

/* Thin golden scrollbars */
.lux-scroll, .nav-explore__panel, .drawer { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
.drawer { --scroll-thumb: rgba(217, 119, 6, 0.6); }
:is(.lux-scroll, .nav-explore__panel, .drawer)::-webkit-scrollbar { width: 8px; height: 8px; }
:is(.lux-scroll, .nav-explore__panel, .drawer)::-webkit-scrollbar-track { background: transparent; }
:is(.lux-scroll, .nav-explore__panel, .drawer)::-webkit-scrollbar-thumb {
  border-radius: 8px; border: 2px solid transparent; background: linear-gradient(180deg, #F2C14E, #D97706 60%, #B8741A) padding-box;
}

/* English subtitles beside Sanskrit terms */
.term-en { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 0.98em; letter-spacing: 0.01em; color: var(--muted); text-transform: none; }
:is(a, button) > .term-en { margin-left: 0.35em; }   /* links laid out as flex rows drop the space before it */
.term-en--block { display: block; margin-top: 0.15em; font-size: 0.62em; line-height: 1.25; }

/* ---------- Explore: the four-pillar mega-menu ---------- */
.nav-explore { position: static; }   /* the panel is placed against the sticky header, centred on the page */
.nav-explore__btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 48px; cursor: pointer; list-style: none; white-space: nowrap;
  color: var(--ink); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em; -webkit-user-select: none; user-select: none;
}
.nav-explore__btn::-webkit-details-marker { display: none; }
.nav-explore__btn svg { transition: transform var(--t-base) var(--ease); }
.nav-explore[open] .nav-explore__btn { color: var(--accent); }
.nav-explore[open] .nav-explore__btn svg { transform: rotate(180deg); }
.nav-explore__panel {
  --explore-bg: rgba(252, 251, 247, 0.96);
  position: absolute; z-index: 60; top: calc(100% + 1px); left: 0; right: 0; margin-inline: auto;
  width: min(1200px, calc(100% - 32px)); /* the header's width: 100vw would include a classic scrollbar and poke past the edge */
  max-height: calc(100vh - var(--explore-top, 150px) - 16px); max-height: calc(100dvh - var(--explore-top, 150px) - 16px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(16px, 1.8vw, 26px) clamp(14px, 1.8vw, 26px) clamp(14px, 1.4vw, 20px);
  border: 1px solid var(--card-border); border-radius: 0 0 24px 24px; border-top-color: transparent;
  background: linear-gradient(90deg, transparent, rgba(217, 119, 6, 0.55) 20%, #F2C14E 50%, rgba(217, 119, 6, 0.55) 80%, transparent) top / 100% 1px no-repeat, var(--explore-bg);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 40px 80px -36px rgba(46, 6, 17, 0.45), 0 18px 36px -24px rgba(46, 6, 17, 0.3);
}
[data-theme="dark"] .nav-explore__panel {
  --explore-bg: rgba(22, 19, 17, 0.96);   /* legible over a busy hero even where the blur is not composited (WebKit) */
  box-shadow: 0 40px 90px -30px rgb(0 0 0 / 0.85), 0 0 0 1px rgba(217, 119, 6, 0.06), inset 0 1px 0 rgba(255, 236, 200, 0.04);
}
/* While the panel is open the header turns solid, so the panel's own glass blurs the page beneath it (a backdrop
   filter on the header would otherwise keep the panel from seeing the page). */
.site-header:has(.nav-explore[open]) { background: var(--header-bg-opaque); -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav-explore__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
/* each pillar spans two rows of the panel's grid (heading, list) as a subgrid, so the four lists start on one line */
.nav-explore__col { min-width: 0; display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; align-content: start;
  padding-inline: clamp(8px, 1vw, 14px); border-left: 1px solid var(--champagne); }
.nav-explore__list { align-self: start; }
.nav-explore__col:first-child { border-left: 0; }
.nav-explore__col-h {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; padding: 2px 12px 12px; border-bottom: 1px solid var(--champagne);
  font-family: var(--display); font-size: 0.75rem; font-weight: 600; line-height: 1.45; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--gold-text);
}
.nav-explore__num { flex: none; min-width: 1.6em; font-family: var(--display); font-size: 0.95rem; line-height: 1.2; letter-spacing: 0.04em; color: var(--amber); opacity: 0.85; }
.nav-explore__col-t { min-width: 0; }
.nav-explore__col-en { display: block; font-family: var(--serif); font-size: 1rem; font-style: italic; font-weight: 500; letter-spacing: 0.01em; text-transform: none; color: var(--muted); }
.nav-explore__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav .nav-explore__list a {
  position: relative; display: grid; align-content: center; gap: 2px; min-height: 56px; padding: 8px 12px 8px 14px; border-radius: 12px;
  white-space: normal; color: var(--ink); letter-spacing: 0;
  transition: background-color var(--t-base) var(--ease), transform 240ms var(--ease);
}
.nav .nav-explore__list a::after { content: none; }
.nav .nav-explore__list a::before {  /* a gold bar that grows on hover / focus / the current page */
  content: ""; position: absolute; left: 2px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #F2C14E, #D97706); transform: scaleY(0); transition: transform 240ms var(--ease);
}
.nav-explore__label { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; line-height: 1.15; letter-spacing: 0.004em; }
.nav-explore__sub { font-size: 0.8rem; line-height: 1.35; color: var(--muted); letter-spacing: 0.01em; }
.nav-explore__list a[aria-current="page"] .nav-explore__label { color: var(--accent); }
.nav .nav-explore__list a[aria-current="page"]::before, .nav .nav-explore__list a:focus-visible::before { transform: scaleY(1); }
@media (hover: hover) and (pointer: fine) {
  .nav-explore__btn:hover { color: var(--accent); }
  .nav .nav-explore__list a:hover { background: rgba(217, 119, 6, 0.09); color: var(--ink); }
  .nav .nav-explore__list a:hover::before { transform: scaleY(1); }
  .nav .nav-explore__list a:hover .nav-explore__label { color: var(--accent); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .nav .nav-explore__list a:hover { transform: translateX(2px); }
}
/* Below 1200px: 2 × 2 */
@media (max-width: 1199.98px) {
  .nav-explore__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-explore__col:nth-child(odd) { border-left: 0; }
  .nav-explore__col:nth-child(n + 3) .nav-explore__col-h { margin-top: 14px; }
  .nav .nav-explore__list a { min-height: 50px; padding-block: 6px; }
  .nav-explore__col-h { margin-bottom: 4px; padding-bottom: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  .nav-explore[open] .nav-explore__panel { animation: explore-in 260ms var(--ease) both; }
  @keyframes explore-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
}
/* Tablets (640–1023px): the Explore pill sits in the bar, beside the menu button */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .site-header .nav { display: flex; margin-left: auto; gap: 0; }
  .site-header .nav > a { display: none; }
  .site-header .header-actions { margin-left: 10px; }
  .site-header .nav-explore__btn { padding: 0 16px 0 18px; border: 1px solid var(--champagne-strong); border-radius: 999px; }
  .site-header .nav-explore[open] .nav-explore__btn { border-color: var(--accent); background: rgba(217, 119, 6, 0.08); }
}

/* ---------- Drawer: quick-link subtitles and the Explore accordions ---------- */
.drawer > * { flex-shrink: 0; }   /* the drawer scrolls; its blocks (the gold Sangat Portal card) never squash */
.drawer .drawer__sub-h { margin: 20px 0 6px; font-size: 0.66rem; letter-spacing: 0.26em; line-height: 1.3; color: #D9A54A; }
.drawer__text { display: grid; gap: 1px; min-width: 0; }
.drawer__en { font-size: 0.78rem; line-height: 1.3; letter-spacing: 0.01em; color: #BBA996; }
.drawer__links a { min-height: 64px; }
.drawer__acc { display: grid; margin-top: 2px; border-top: 1px solid rgba(245, 158, 11, 0.18); }
.drawer-acc { border-bottom: 1px solid rgba(245, 158, 11, 0.14); }
.drawer-acc__sum {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) 24px; align-items: center; gap: 6px; min-height: 58px; padding: 6px 2px;
  list-style: none; cursor: pointer; color: #F3E9DA; border-radius: 10px;
}
.drawer-acc__sum::-webkit-details-marker { display: none; }
.drawer-acc__num { font-family: var(--display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; color: #D9A54A; }
.drawer-acc__t { font-family: var(--display); font-size: 0.8rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.13em; text-transform: uppercase; }
.drawer-acc__en { display: block; font-family: var(--serif); font-size: 1.02rem; font-style: italic; font-weight: 500; letter-spacing: 0.01em; text-transform: none; color: #CDBCA7; }
.drawer-acc__chev { justify-self: center; color: #E2B25A; transition: transform 260ms var(--ease); }
.drawer-acc[open] > .drawer-acc__sum .drawer-acc__chev { transform: rotate(180deg); }
.drawer-acc[open] > .drawer-acc__sum { color: #FCE7B8; }
.drawer__explore { list-style: none; margin: 0 0 10px; padding: 0 0 0 2.2rem; display: grid; gap: 0; }
.drawer__explore a { display: grid; align-content: center; gap: 1px; min-height: 54px; padding: 6px 0; color: #F3E9DA; text-decoration: none; }
.drawer__explore-label { font-family: var(--serif); font-size: 1.24rem; font-weight: 600; line-height: 1.18; }
.drawer__explore-sub { font-size: 0.8125rem; line-height: 1.35; color: #BBA996; }
.drawer__explore a[aria-current="page"] .drawer__explore-label { color: #FCD34D; }
@media (hover: hover) and (pointer: fine) {
  .drawer-acc__sum:hover { color: #FCE7B8; }
  .drawer__explore a:hover .drawer__explore-label { color: #FCE7B8; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
}
@media (prefers-reduced-motion: no-preference) {
  .drawer-acc[open] > .drawer__explore { animation: acc-in 300ms var(--ease) both; }
  @keyframes acc-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* ---------- Footer: the guest crest line's traditional term (the three columns are in "Sacred footer") ---------- */
.footer__h-en { font-family: var(--serif); font-size: 0.98rem; font-style: italic; font-weight: 500; letter-spacing: 0.01em; text-transform: none; color: var(--muted); }

/* ---------- Golden particles (assets/js/hero-particles.js) ---------- */
[data-hero-particles] { position: relative; }
.hero-particles { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; pointer-events: none; }
@media print { .hero-particles { display: none; } }

/* ---------- Homepage + Brahm Gyan heroes: the definition plaque (gloss('brahm_gyan')) ---------- */
.hero__define, .pg-hero__define {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.5em; width: fit-content; max-width: 100%;
  margin: -0.9rem 0 2rem; padding: 10px 18px 10px 16px; border-left: 2px solid var(--amber); border-radius: 0 14px 14px 0;
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.1), rgba(217, 119, 6, 0.02) 80%, transparent);
  font-size: var(--fs-sm); line-height: 1.45; color: var(--muted);
}
.pg-hero__define { margin: 0.2rem 0 1.4rem; }
:is(.hero__define, .pg-hero__define) .gloss__term { font-family: var(--display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); }
:is(.hero__define, .pg-hero__define) .gloss__en { font-family: var(--serif); font-size: 1.12rem; font-style: italic; font-weight: 500; color: var(--ink); }

/* ---------- Homepage: Pictionary for the Soul ---------- */
main > section.pictionary { padding-block: clamp(52px, 6vw, 88px); }
.pictionary { background: radial-gradient(900px 340px at 50% 0%, rgba(217, 119, 6, 0.08), transparent 70%); }
.pictionary::before { content: ""; position: absolute; top: 0; left: 50%; width: min(520px, 64%); height: 1px; transform: translateX(-50%); background: var(--gold-leaf); opacity: 0.8; }
.pictionary__head { max-width: 42rem; margin: 0 auto clamp(28px, 3.5vw, 46px); text-align: center; }
.pictionary__head .eyebrow { flex-direction: column; gap: 0.7rem; }
.pictionary__title { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); line-height: 1.08; }
.pictionary__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.2vw, 30px); }
.pictionary__item {
  position: relative; overflow: hidden; min-width: 0; padding: clamp(26px, 2.8vw, 40px) clamp(18px, 2vw, 28px) clamp(24px, 2.4vw, 32px);
  border-radius: var(--radius-card); border: 1px solid var(--card-border); background: var(--surface); box-shadow: var(--shadow-soft); text-align: center;
}
.pictionary__item::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--gold-leaf); }
.pictionary__glyph {
  display: grid; place-items: center; width: 108px; height: 108px; margin: 0 auto 18px; border-radius: 50%; color: var(--amber);
  background: radial-gradient(circle at 50% 45%, rgba(242, 193, 78, 0.22), rgba(217, 119, 6, 0.06) 58%, transparent 72%);
  box-shadow: inset 0 0 0 1px var(--card-border), 0 0 0 7px rgba(217, 119, 6, 0.05);
}
[data-theme="dark"] .pictionary__glyph { color: #F2C14E; }
.pictionary__glyph svg { width: 64px; height: 64px; }
.pictionary__word { margin: 0 0 6px; font-family: var(--display); font-size: 1rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-text); }
.pictionary__line { max-width: 22rem; margin: 0 auto; font-size: var(--fs-sm); line-height: 1.6; color: var(--muted); }
@media (max-width: 719.98px) {
  .pictionary__row { grid-template-columns: minmax(0, 1fr); }
  .pictionary__item { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 18px; align-items: center; padding: 18px 20px; text-align: left; }
  .pictionary__glyph { grid-row: span 2; width: 76px; height: 76px; margin: 0; }
  .pictionary__glyph svg { width: 46px; height: 46px; }
  .pictionary__word { align-self: end; margin: 0; }
  .pictionary__line { align-self: start; margin: 2px 0 0; }
}
/* The pillar pages' hero aura (pages.css) is a box larger than its gradients: fade its edges so no seam shows */
.pg-hero__aura { -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }
/* Phones and tablets centre the hero copy: the definition plaque becomes a centred, framed line */
@media (max-width: 959.98px) {
  .hero__define { justify-content: center; margin-inline: auto; text-align: center; border-left: 0; border-radius: 14px;
    border: 1px solid var(--card-border); background: linear-gradient(180deg, rgba(217, 119, 6, 0.09), rgba(217, 119, 6, 0.02)); }
}
@media (prefers-reduced-motion: no-preference) {  /* the plaque made the hero copy two children longer: keep the cascade */
  .js .hero__copy > :nth-child(6) { animation-delay: 0.46s; }
  .js .hero__copy > :nth-child(7) { animation-delay: 0.54s; }
}

/* ---------- v1.4.4: the emblem's luminous halo (header, drawer, footer, kiosk: <span class="djjs-emblem"><img></span>) ----------
   The official emblem's dark eye glyphs and contours dissolve into Temple Dark: a soft white-to-pale-gold aura sits behind
   it (blurred 5px, 5% larger than the image, never catching a tap) and the image carries a faint white glow. */
.djjs-emblem { position: relative; display: inline-grid; place-items: center; flex: none; isolation: isolate; line-height: 0; }
.djjs-emblem::before {   /* an ellipse a little wider than the image, so it reaches behind the eyes at the bottom corners */
  content: ""; position: absolute; inset: -12% -10%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.5), rgba(253, 230, 138, 0.4) 62%, rgba(251, 191, 36, 0.3) 86%, rgba(251, 191, 36, 0));
  filter: blur(5px); transform: scale(1.05);
}
html:not(.dark) .djjs-emblem::before { opacity: 0.55; }   /* on parchment it only warms the emblem */
/* a hairline of light along every contour (the eye glyphs, the rays), then the soft 8px white glow */
html.dark .djjs-emblem > img { filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)); }
.footer__emblem { margin-bottom: 14px; }
.footer__emblem > .footer__logo { margin-bottom: 0; }