/* Sri Badrika Ashram — shared styles for every page */
@font-face {
  font-family: "Forum";
  src: url("../fonts/Forum-Regular.woff2") format("woff2");   /* every current browser reads WOFF2 */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Type scale: every font size on the site comes from these steps (phone values in the 768px block) */
  --fs-xs: 10px;     /* eyebrows, small caps, counts */
  --fs-sm: 11px;     /* captions, hints, errors */
  --fs-ui: 13px;     /* labels, buttons, meta, notes */
  --fs-body: 15px;   /* body text */
  --fs-lg: 17px;     /* ledes and intro paragraphs */
  --fs-h4: 20px;     /* small headings, emphasised facts */
  --fs-h3: 24px;     /* card and section titles */
  --fs-h2: 28px;     /* section headings */
  --fs-h1: 40px;     /* page titles */
  /* …and the line-height that goes with each step */
  --lh-xs: 1.3;
  --lh-sm: 1.35;
  --lh-ui: 1.35;
  --lh-body: 1.5;
  --lh-lg: 1.45;
  --lh-h4: 1.2;
  --lh-h3: 1.15;
  --lh-h2: 1.12;
  --lh-h1: 1.08;
  /* Image corner radii: one per role, so every picture on the site rounds the same way */
  --r-media-sm: 8px;    /* images inside a card or panel */
  --r-media: 16px;      /* cards, thumbnails, grids, the map */
  --r-media-lg: 24px;   /* large feature media: heroes, video, banners, portrait */
  --font-heading: "Forum", Georgia, serif;
  --font-body: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --dark: #1b1f14;
  --ink: #29231d;
  --ink-muted: #625a50;
  --olive: #707359;
  --olive-active: #545643;
  --dark-secondary: #555450;
  --dark-tertiary: #8d8f89;
  --saffron: #a9582c;
  --brown: #793c22;
  --rule: #d8ccbb;
  --cream: #fcf9f2;
  --sand: #f7f1e7;
  --paper: #fefdfc;
  --light-green: #f8f9f4;
  --light-green-hover: #f5f5ef;
  --light-green-active: #eaebde;

  --bg: #fff;
  --nav-bg: rgba(255,255,255,.6);
  --nav-bg-m: rgba(255,255,255,.2);
  --nav-border: rgba(0,0,0,.1);
  --shadow: rgba(41,35,29,.08);
  --brown-wash: rgba(121,60,34,.06);
  --card-hover: rgba(252,249,242,.6);
  --btn-primary: #793c22;
  --btn-primary-hover: #65311b;
  --callout-bg: rgba(251,248,240,.84);
  --callout-border: rgba(217,207,190,.67);
  --callout-ink: #2e2a24;
  --card-bg: #fff;
  --panel-bg: #fffefe;
  --panel-border: #e9e5da;
  --panel-rule: #e6d9bf;
  --panel-heading: #a85a3b;
  --panel-link: #403d3a;
  --field-soft: #fafaf7;
  --field-placeholder: #a3a19b;
  --card-muted: #6f785f;

  /* Monochrome SVG icons are recoloured with filters in dark mode */
  --icon-ink: none;
  --icon-tint: none;

  --paper-texture: url("paper-texture.webp?v=2");   /* faint paper grain behind the page (light theme) */
  --gutter: 140px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --dark: #ece6da;
  --ink: #f1e9dd;
  --ink-muted: #b9ad9d;
  --olive: #b5b894;
  --olive-active: #c4c6a6;
  --dark-secondary: #a8a49c;
  --dark-tertiary: #7f7b73;
  --saffron: #e0915c;
  --brown: #eaa47b;
  --rule: #3a3229;
  --cream: #221d17;
  --sand: #1d1914;
  --paper: #1a1612;
  --light-green: #1f1c17;
  --light-green-hover: #28231d;
  --light-green-active: #332d25;

  --bg: #15120f;
  --nav-bg: rgba(21,18,15,.72);
  --nav-bg-m: rgba(21,18,15,.72);
  --nav-border: rgba(255,255,255,.08);
  --shadow: rgba(0,0,0,.45);
  --brown-wash: rgba(234,164,123,.08);
  --card-hover: rgba(255,255,255,.02);
  --btn-primary: #a9582c;
  --btn-primary-hover: #bd6634;
  --callout-bg: rgba(26,22,18,.82);
  --callout-border: rgba(255,255,255,.12);
  --callout-ink: #f1e9dd;
  --card-bg: #1f1b16;
  --panel-bg: #1a1612;
  --panel-border: #332d25;
  --panel-rule: #3a3229;
  --panel-heading: #e0915c;
  --panel-link: #e2d9cc;
  --field-soft: #1f1c17;
  --field-placeholder: #7f7b73;
  --card-muted: #b5b894;

  --paper-texture: none;
  --icon-ink: invert(1) brightness(.92);
  --icon-tint: brightness(0) invert(.8) sepia(.5) saturate(1.8) hue-rotate(-14deg);

  color-scheme: dark;
}

/* theme switch: everything changes colour at once (site.js), under one crossfade of the whole page */
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--t-theme); animation-timing-function: ease; }

/* Dark-ink icons (logo, menu, chevrons, theme icons) */
img[src$="logo.svg"], img[src$="arrow-down.svg"],
img[src$="arrow-right-ink.svg"], img[src$="submit-arrow.svg"], img[src$="m-menu.svg"], img[src$="moon.svg"], img[src$="sun.svg"] {
  filter: var(--icon-ink);
}
/* Coloured line icons (brown / olive / grey arrows, calendar, clock) */
img[src*="arrow-right-olive"], img[src*="arrow-right-brown"], img[src$="m-arrow-right.svg"],
img[src*="arrow-up-right"], img[src$="calendar.svg"], img[src$="clock.svg"] {
  filter: var(--icon-tint);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html {
  overflow-x: hidden;           /* keeps body's overflow on body, not the viewport */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  background: var(--paper-texture) repeat, var(--bg);   /* 512px tile, white stays white */
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  font-weight: 400;
  letter-spacing: 0;
  font-synthesis: none;         /* never fake a bold or italic Forum */
  font-kerning: normal;
  overflow: clip;               /* nothing decorative can extend the page past the footer */
}
/* Sticky footer: the page is at least as tall as the screen and the main content takes up the slack,
   so on short pages the footer still sits at the bottom instead of floating mid-screen */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > main { flex: 1 0 auto; }
input, button { font-weight: inherit; }
img { display: block; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3 { margin: 0; font-weight: inherit; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 400; letter-spacing: -0.01em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.m-only { display: none !important; }

/* ---------- Type ---------- */
.eyebrow {
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--saffron);
}
.display-2xl { font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--ink); }
.display-lg  { font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--ink); }
/* headings that wrap break into even lines rather than leaving one word behind */
.display-2xl, .display-lg, h2, h3 { text-wrap: balance; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  color: var(--brown);
  white-space: nowrap;
}
.text-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover img { transform: translateX(2px); }

.section-heading { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 60px 8px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: var(--nav-bg);
}
.nav-brand { display: flex; align-items: center; gap: 16px; }
.nav-actions { flex: 1; display: flex; align-items: center; justify-content: flex-end; }
.nav-tabs { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 8px 10px; border-radius: 8px; }
.nav-menu { position: relative; }
.nav-tab {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 24px;
  padding-bottom: 3px;
  border-radius: 6px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--dark);
}
.nav-tab:hover span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.theme-toggle {
  width: 32px;
  height: 32px;
  margin: -6px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle:hover { background: var(--light-green-hover); }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
/* Sign in: same outline-pill style as the About Abhishekam button, sized for the nav */
.sign-in {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  white-space: nowrap;
}
.sign-in:hover { background: var(--light-green-hover); }
.nav-menu.open .nav-tab img { transform: rotate(180deg); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; }
.dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--light-green-active);
  border-radius: 12px;
  box-shadow: 0 12px 32px var(--shadow);
}
.menu-group { display: flex; flex-direction: column; gap: 4px; }
.menu-heading {
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--saffron);
}
.dropdown a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  white-space: nowrap;
}
.dropdown a:hover { background: var(--light-green-hover); }

/* Menu panel (Figma "More details"): link columns, Swamiji note, e-mail subscribe — opens from the header Menu */
.details-panel {
  width: 701px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  padding: 26px 28px 24px;
  min-width: 0;
  z-index: 5;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 13px;
  box-shadow: 0 8px 24px -8px rgba(68,59,45,.07), 0 12px 32px var(--shadow);
}
.details-panel > * + * { margin-top: 23px; }
.panel-links { display: grid; grid-template-columns: repeat(4, 144px); gap: 24px; }
.details-panel .menu-group { gap: 16px; }
.details-panel .menu-heading { font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: 0.08em; color: var(--panel-heading); }
.details-panel a { padding: 0; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--panel-link); border-radius: 0; white-space: normal; }
.details-panel a:hover { background: none; color: var(--brown); }
.panel-rule { border: 0; border-top: 1px solid var(--panel-rule); margin-left: 0; margin-right: 0; }
.swami-note { display: flex; align-items: center; gap: 30px; }
.swami-note img { flex-shrink: 0; width: 189px; height: 155px; border-radius: var(--r-media); object-fit: cover; }
.swami-note p { flex: 1; min-width: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-muted); }
.details-panel .subscribe { width: 100%; height: 50px; padding: 0 12px 0 18px; background: var(--field-soft); border-color: var(--panel-border); }
.details-panel .subscribe input::placeholder { color: var(--field-placeholder); }


/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 758px;
  padding: 80px var(--gutter) 120px;   /* a little less space above the eyebrow */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Both mountain paintings have transparent grounds, so the hero sits on the page colour like every other section */
.hero-bg .mountains { object-position: 50% 30%; }   /* sit the range a little lower in the hero */
.hero-bg .mountains.night { display: none; }
:root[data-theme="dark"] .hero-bg .mountains.day { display: none; }
:root[data-theme="dark"] .hero-bg .mountains.night { display: block; } /* pre-rendered moonlit version (no runtime filter/blend) */
/* a faint moonlit glow behind the range so it lifts off the dark page */
:root[data-theme="dark"] .hero-bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 42% at 50% 64%, rgba(196, 206, 226, .09), transparent 70%); }
:root[data-theme="dark"] .deity .halo { opacity: .75; }
/* The grounds painting has a light and a dark version; only the one for the current theme loads */
.art-dark { display: none !important; }
:root[data-theme="dark"] .art-light { display: none !important; }
:root[data-theme="dark"] .art-dark { display: block !important; }
.hero-bg .veil { display: none; }
.hero-copy {
  position: relative;
  width: 480px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.hero-links { display: flex; gap: 24px; }
.hero-links .text-link { color: var(--olive-active); }

/* ---------- Upcoming events ---------- */
.events {
  padding: 112px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 48px;
  background: transparent;
}
.events-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.events-head .section-heading { width: 690px; max-width: 100%; }
.view-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  color: var(--brown);
  white-space: nowrap;
}
.view-all:hover { background: var(--brown-wash); }
.event-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.event-card {
  min-height: 250px;   /* grows when a title wraps; cards in a row stay equal height */
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px;
  border-radius: 16px;
  background: linear-gradient(180deg, transparent 0%, var(--cream) 50%, transparent 100%);
}
.event-card:hover { background-color: var(--card-hover); }
.event-title { display: flex; flex-direction: column; gap: 8px; }
.event-title-inner { display: flex; flex-direction: column; gap: 10px; }
.event-sub { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--olive); }
.event-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.event-meta div { display: flex; align-items: center; gap: 10px; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink); white-space: nowrap; }

/* Grouped events: one card stands for a series. A count sits beside the label,
   and each event's start date is a small chip. */
.group-count {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; vertical-align: 1px;
  background: var(--btn-primary); color: #fff; letter-spacing: 0.08em;
}
.group-dates { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.group-dates li {
  padding: 2px 8px; border: 1px solid var(--rule); border-radius: 999px;
  font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.group-dates li:first-child { border-color: var(--saffron); color: var(--ink); }   /* the next one */
.group-dates + .event-meta { margin-top: 0; }

/* Series page: the events in the group, one row each */
.series-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.series-item { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--rule); }
.series-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 18px; padding: 20px 0; color: inherit; text-decoration: none; }
.series-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.series-n { font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--saffron); }
.series-copy strong { font-family: var(--font-heading); letter-spacing: -0.01em; font-weight: 400; font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--ink); }
.series-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }
.series-go { color: var(--ink-muted); transition: transform var(--t-hover) var(--ease-out), color var(--t-hover) ease; }
.series-link:hover strong, .series-link:hover .series-go { color: var(--brown); }
.series-link:hover .series-go { transform: translateX(2px); }
.series-link:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; border-radius: 8px; }
.series-book { flex-shrink: 0; }
.series-list + #guidelines { margin-top: 96px; }   /* clear break between the event list and the booking guidelines */
@media (max-width: 768px) { .series-list + #guidelines { margin-top: 64px; } }
.series-tag { color: inherit; text-decoration: none; }
.series-tag:hover { color: var(--brown); }
@media (max-width: 768px) {
  .series-item { flex-wrap: wrap; gap: 0 16px; padding-bottom: 16px; }
  .series-link { flex-basis: 100%; padding-bottom: 12px; }
  .series-go { display: none; }
  .series-book { margin-left: 76px; }
}

/* ---------- Sri Hari Bhagwan ---------- */
.divine {
  padding: 96px var(--gutter);
  display: flex;
  align-items: center;
  gap: 88px;
  background: transparent;
}
.deity {
  position: relative;
  flex-shrink: 0;
  width: 510px;
  height: 570px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.deity .halo {
  position: absolute;
  left: 50%;
  top: calc(50% - 24px);
  transform: translate(-50%, -50%);
}
.deity .idol { position: relative; width: 443px; height: 568px; object-fit: cover; }
.divine-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.divine-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-muted); }
.actions { display: flex; gap: 12px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  color: var(--ink);
  white-space: nowrap;
}
.btn:hover { background: var(--light-green-hover); }
.btn-primary { background: var(--btn-primary); border-color: var(--btn-primary); color: #fff; }
.btn-primary:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); }

/* ---------- Sanctuary ---------- */

/* ---------- Around the ashram: illustrated grounds ---------- */
.grounds {
  padding: 100px var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  background: transparent;
}
.section-heading.centered { width: 680px; max-width: 100%; align-items: center; text-align: center; }
.section-heading.wide { width: 955px; }
.grounds-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--olive); }
.grounds-map { position: relative; width: 950px; max-width: 100%; aspect-ratio: 950 / 700; }
/* Painting fills the frame and fades out top and bottom */
.grounds-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%) top / 100% 88.57% no-repeat;
          mask: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%) top / 100% 88.57% no-repeat;
}
.grounds-art {
  position: absolute;
  left: 0;
  top: -0.14%;
  width: 100%;
  height: 100.14%;
  object-fit: contain;                          /* the whole painting shows, as in the design */
  opacity: .92;
}
.callouts { list-style: none; margin: 0; padding: 0; }
.callout {
  position: absolute;
  left: var(--x-left, auto);
  right: var(--x-right, auto);
  top: var(--y-top, auto);
  bottom: var(--y-bottom, auto);
  z-index: 13;                                  /* pills + place cards stay above drifting clouds */
}
.callout:hover, .callout.is-open { z-index: 14; }
.callout-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px 9px 12px;
  border: 1px solid var(--callout-border);
  border-radius: 999px;
  background: var(--callout-bg);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--callout-ink);
  white-space: nowrap;
  cursor: pointer;
}
.callout-pill:hover, .callout.is-open .callout-pill { background: var(--card-bg); border-color: var(--rule); }
.callout-pill:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }

/* Place card: opens on hover or click, anchored to its pill (Figma "Garden hover card") */
.place-card {
  position: absolute;
  bottom: calc(100% + 10px);                    /* opens above its tag */
  left: 0;
  width: 320px;
  display: none;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--callout-border);
  border-radius: 16px;
  background: var(--card-bg);
  box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 8px 12px rgba(0,0,0,.1);
  text-align: left;
  white-space: normal;
  cursor: default;
}
/* invisible bridge below the card so the pointer can travel up from tag to card */
.place-card::before { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; }
.callout[data-align="end"] .place-card { left: auto; right: 0; }
/* Each card zooms from the whole painting into its own place on it */
.place-zoom { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-media-sm); background: var(--sand); }
.place-zoom img { display: block; width: 100%; height: 100%; transform-origin: var(--fx) var(--fy); transition: transform 1100ms cubic-bezier(.22, .7, .18, 1) 120ms; }
.callout.is-open .place-zoom img,
.callout:hover .place-zoom img { transform: translate(calc(50% - var(--fx)), calc(50% - var(--fy))) scale(3); }
@media (prefers-reduced-motion: reduce) { .place-zoom img { transition: none; } }
.place-card .body { display: flex; flex-direction: column; gap: 8px; }
.place-card .title { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--callout-ink); }
.place-card .sub { font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 600; color: var(--card-muted); }
.place-card .desc { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--card-muted); }

/* ---------- Footer ---------- */
.footer {
  position: relative;
  padding: 44px 0 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background: var(--paper-texture) repeat, linear-gradient(180deg, var(--bg) 0%, var(--sand) 43.27%, var(--sand) 100%);
}
.footer-inner {
  position: relative;
  z-index: 13; /* dropdown must sit above drifting clouds */
  width: 1168px;
  max-width: calc(100% - 2 * var(--gutter) + 272px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.copyright { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--dark-secondary); white-space: nowrap; }
.footer-actions { display: flex; align-items: center; gap: 15px; }
.subscribe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 286px;
  padding: 14px 18px;
  border: 1px solid var(--light-green-active);
  border-radius: 8px;
  background: var(--light-green);
}
.subscribe input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  color: var(--ink);
  padding: 0;
}
.subscribe input::placeholder { color: var(--dark-tertiary); }
.subscribe:focus-within { border-color: var(--olive); }
.subscribe button { display: inline-flex; }

.disclosure { position: relative; }
.disclosure summary {
  list-style: none;
  display: flex;
  align-items: flex-end;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 8px 10px 8px 12px;
  border-radius: 8px;
  font-size: var(--fs-ui);           /* same as the copyright beside it */
  line-height: var(--lh-ui);
  color: var(--dark);
  cursor: pointer;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary:hover { background: var(--light-green-hover); }
.disclosure summary img { width: 16px; height: 16px; }
.disclosure[open] summary img { transform: rotate(180deg); }
.disclosure .panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 240px;
  padding: 12px 16px;
  background: var(--paper);
  border: 1px solid var(--light-green-active);
  border-radius: 12px;
  box-shadow: 0 12px 32px var(--shadow);
  font-size: var(--fs-ui); line-height: var(--lh-ui);
  color: var(--ink-muted);
}
.disclosure .panel a { display: block; padding: 6px 0; color: var(--ink); }
.disclosure .panel a:hover { color: var(--brown); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 40;
  flex-direction: column;
  background: var(--paper);
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; min-height: 64px; border-bottom: 1px solid var(--nav-border); }
.drawer-close { width: 40px; height: 40px; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--dark); }
.drawer nav { display: flex; flex-direction: column; padding: 16px 24px; }
.drawer-logo { width: 204px; max-width: 70%; height: auto; }   /* same size as the mobile header logo */
/* in the drawer, Sign in is one more menu row: same type, padding and divider as the sections above */
.drawer-sign-in {
  margin: -16px 24px 0; width: auto; height: auto; padding: 14px 0;
  justify-content: space-between; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none;
  font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--ink);
}
.drawer-sign-in::after { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("arrow-right-line.svg") center / contain no-repeat; mask: url("arrow-right-line.svg") center / contain no-repeat; }   /* same 20px glyph and line weight as the section chevrons */
.drawer-sign-in:hover { background: none; color: var(--brown); }
/* the arrow is never a touch hit-area layer: hold its size and place against any other ::after rule */
.drawer .drawer-sign-in::after { position: static; transform: none; min-width: 0; min-height: 0; flex-shrink: 0; }
.drawer { overflow-y: auto; }
/* Drawer: each menu group is an accordion */
.acc { border-bottom: 1px solid var(--rule); }
.acc summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  font-family: var(--font-heading); letter-spacing: -0.01em;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  color: var(--ink);
  cursor: pointer;
}
.acc summary::-webkit-details-marker { display: none; }
.acc[open] summary img { transform: rotate(180deg); }
.acc-links { display: flex; flex-direction: column; padding: 0 0 12px; }
.acc-links a { padding: 10px 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-muted); }
.acc-links a:hover { color: var(--brown); }
.acc-links a.acc-overview { color: var(--brown); font-weight: 600; }   /* the section's main page */
.details-panel a.menu-heading:hover { color: var(--brown); text-decoration: underline; text-underline-offset: 3px; }
.drawer-extra { display: flex; flex-direction: column; gap: 20px; padding: 20px 24px 32px; }
.drawer-extra .subscribe { width: 100%; height: 50px; padding: 0 12px 0 18px; background: var(--field-soft); border-color: var(--panel-border); }
.drawer-extra .subscribe input::placeholder { color: var(--field-placeholder); }

/* ---------- Intermediate widths ---------- */
@media (max-width: 1360px) {
  :root { --gutter: 80px; }
  .divine { gap: 56px; }
  .deity { width: 440px; height: 520px; }
  .deity .idol { width: 390px; height: 500px; }
  .footer-inner { width: 100%; max-width: none; padding: 0 var(--gutter); }
}
@media (max-width: 1100px) {
  :root { --gutter: 48px; }
  .nav { padding-left: 32px; padding-right: 32px; }
  .event-cards { grid-template-columns: 1fr 1fr; }
  .divine { flex-direction: column; align-items: stretch; }
  .deity { align-self: center; }
  .footer-inner { flex-direction: column; align-items: center; }
  .copyright { order: 2; }  /* tablets and phones: Legal fine print above the copyright */
}

/* ---------- Mobile (Figma: 390 frame) ---------- */
@media (max-width: 768px) {
  :root { --fs-body: 14px; --fs-lg: 15px; --fs-h4: 18px; --fs-h3: 20px; --fs-h2: 24px; --fs-h1: 32px; --r-media-lg: 20px; }
  :root { --gutter: 24px; }
  .d-only { display: none !important; }
  .m-only { display: revert !important; }
  img.m-only { display: block !important; }
  .text-link.m-only { display: inline-flex !important; }

  .nav {
    padding: 8px 16px;
    min-height: 64px;
    gap: 24px;
    background: var(--nav-bg-m);
    border-bottom: 1px solid var(--nav-border);
  }
  /* Serif display type steps down for phone widths */
  .display-2xl { font-size: var(--fs-h1); line-height: var(--lh-h1); }   /* h1: 40px desktop, 32px phones */
  .display-lg  { font-size: var(--fs-h2); line-height: var(--lh-h2); }   /* h2: 28px desktop, 24px phones */

  .nav-brand img { max-width: 100%; height: auto; }
  .nav-brand img.m-only { width: 204px; }   /* ~20% smaller than the 254px design logo */
  .nav-brand { min-width: 0; }
  .nav-actions { gap: 8px; }
  .nav-tabs { padding: 0; gap: 20px; }

  .hero {
    height: 565px;               /* more room under the links so the range shows clearly */
    padding: 70px 24px 48px;     /* breathing room above the eyebrow */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* text sits at the top; the range fills the space below */
  }
  .hero-bg { background: var(--cream); }
  .hero-bg .veil { display: block; position: absolute; inset: 0; background: var(--bg); }
  .hero-bg .mountains {
    inset: auto;
    left: -22.74%;
    top: 165px;                  /* peaks sit a little below the links */
    width: 145.24%;
    height: 378px;               /* same size as before, fixed so a taller hero doesn't stretch it */
    object-fit: fill;
  }
  .hero-copy { width: 100%; gap: 18px; }
  .hero-links { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; }   /* one line; wraps only on very narrow phones */
  .hero-links .text-link { color: var(--brown); gap: 9px; }

  .text-link { gap: 9px; }

  .events { padding: 72px 24px; gap: 32px; align-items: center; background: transparent; }
  .events-head { width: 100%; }
  .events-head .section-heading { width: 100%; align-items: center; text-align: center; }   /* phones: centred heading */
  .event-cards { width: 100%; grid-template-columns: 1fr; gap: 16px; }
  .events .view-all-m { font-size: var(--fs-ui); line-height: var(--lh-ui); }

  .divine { padding: 72px 24px; gap: 38px; }   /* same page colour as the hero above it */
  .deity { width: 100%; height: 390px; }
  .deity .halo { top: calc(50% - 20px); }
  .deity .idol { width: 280px; height: 360px; }
  .divine-copy { gap: 22px; }
  .divine-copy .section-heading { align-items: center; text-align: center; }   /* phones: centred heading */
  .divine-body { font-size: var(--fs-ui); line-height: var(--lh-ui); }
  .actions { justify-content: space-between; flex-wrap: wrap; gap: 10px 8px; }   /* wraps only if both don't fit */
  .btn { padding: 13px 15px; gap: 8px; }
  .btn-secondary { background: var(--paper); }

  .footer { padding: 44px 0 60px; }
  .footer-inner { padding: 0; flex-direction: column; gap: 28px; }

  .grounds { padding: 72px 24px; gap: 28px; }
  /* On phones the pills move below the painting so they don't crowd it */
  .grounds-map { aspect-ratio: auto; }
  .grounds-frame { position: relative; inset: auto; margin: 0 -24px -9.5%; aspect-ratio: 950 / 700; }
  .grounds-body { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }
  .callouts { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
  .callout { position: static; }
  /* On phones the card opens full-width under the row of pills */
  .place-card, .callout[data-align="end"] .place-card { left: 0; right: 0; width: auto; max-width: 360px; margin: 0 auto; }
  .copyright { line-height: 16px; }
  .footer-actions { flex-direction: column; gap: 15px; }

  .swami-note { align-items: flex-start; gap: 14px; }
  .swami-note img { width: 96px; height: 118px; border-radius: var(--r-media); object-position: 38% 50%; }
  .swami-note p { font-size: var(--fs-ui); line-height: var(--lh-ui); }
}

/* ---------- Seasonal ambience ---------- */
.season-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 15;               /* above sections, below the sticky nav (20) and menus */
  pointer-events: none;
  /* keep the reading column calm: particles live mostly in the margins */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.95) 16%, rgba(0,0,0,.42) 34%, rgba(0,0,0,.42) 66%, rgba(0,0,0,.95) 84%, #000 100%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.95) 16%, rgba(0,0,0,.42) 34%, rgba(0,0,0,.42) 66%, rgba(0,0,0,.95) 84%, #000 100%);
}
.season-picker { position: fixed; right: 20px; bottom: 20px; z-index: 30; }
.season-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--callout-border);
  border-radius: 999px;
  background: var(--callout-bg);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-size: var(--fs-sm); line-height: var(--lh-sm);
  color: var(--callout-ink);
  box-shadow: 0 2px 8px var(--shadow);
}
.season-btn:hover { background: var(--card-bg); }
.season-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 212px;
  padding: 6px;
  border: 1px solid var(--light-green-active);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 12px 32px var(--shadow);
}
.season-menu button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: var(--fs-ui); line-height: var(--lh-ui);
  color: var(--ink);
  text-align: left;
}
.season-menu button:hover { background: var(--light-green-hover); }
.season-menu button[aria-checked="true"] { color: var(--brown); }
.season-menu button[aria-checked="true"]::after { content: "✓"; }
.season-menu small { color: var(--dark-tertiary); font-size: var(--fs-xs); line-height: var(--lh-xs); }
.season-sep { height: 1px; margin: 6px 4px; background: var(--rule); }
.season-menu .clouds-toggle { align-items: center; gap: 12px; white-space: nowrap; }
.season-menu .clouds-toggle::after { content: none !important; }
.switch { position: relative; flex-shrink: 0; width: 28px; height: 16px; border-radius: 999px; background: var(--light-green-active); transition: background-color var(--t-hover) ease; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform var(--t-rotate) var(--ease-in-out); }
.clouds-toggle[aria-checked="true"] .switch { background: var(--olive); }
.clouds-toggle[aria-checked="true"] .switch::after { transform: translateX(12px); }
.season-menu .clouds-toggle[aria-checked="true"] { color: var(--ink); }   /* a switch, not a selected season */
.no-clouds .cloud-band { display: none; }
@media (max-width: 768px) { .season-picker { right: 12px; bottom: 12px; } }
@media (prefers-reduced-motion: reduce) { .season-layer { display: none; } }

/* ---------- Scroll clouds + section reveal ---------- */
.cloud-band { position: relative; height: 0; z-index: 12; pointer-events: none; }  /* over content, under season layer + nav */
.cloud-band img {
  position: absolute;
  left: 0;
  top: var(--y);
  width: var(--w);
  min-width: 220px;
  max-width: 572px;
  height: auto;
  opacity: 0;                                      /* only visible while scrolling */
  filter: brightness(.9) sepia(.14) saturate(.9);  /* a soft grey-cream so white clouds read on the white page */
  transform: translate3d(var(--x), 0, 0) scaleX(var(--flip, 1));
  transition: opacity 2s cubic-bezier(.33,0,.2,1);   /* slow, gentle fade-out after scrolling stops */
}
.clouds-on .cloud-band img { opacity: var(--o); transition: opacity .45s var(--ease-out); }   /* quicker fade-in */
:root[data-theme="dark"] .cloud-band img { filter: brightness(1.1); }
:root[data-theme="dark"].clouds-on .cloud-band img { opacity: calc(var(--o) * .42); }
/* Backdrop clouds: small, softly blurred and behind the main clouds, for a sense of distance */
.cloud-band img { z-index: 1; }
.cloud-band img.far { z-index: 0; min-width: 110px; max-width: 260px; filter: blur(var(--blur)) brightness(.9) sepia(.14) saturate(.9); }
:root[data-theme="dark"] .cloud-band img.far { filter: blur(var(--blur)) brightness(1.1); }

.js-reveal .reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 700ms var(--ease-out-quart), transform 700ms var(--ease-out-quart), background-color var(--t-hover) ease;
  transition-delay: var(--d, 0ms);
}
.js-reveal .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cloud-band { display: none; }
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

/* Pulsing marker dots on the grounds illustration */
.marker { position: relative; display: inline-flex; flex-shrink: 0; width: 7px; height: 7px; }
.marker img { position: relative; z-index: 1; }
.marker::before, .marker::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--pulse);
  opacity: 0;
  animation: marker-pulse 2.4s cubic-bezier(.2,.6,.3,1) infinite;
  animation-delay: var(--pulse-delay, 0s);
}
.marker::after { animation-delay: calc(var(--pulse-delay, 0s) + 1.2s); }   /* second ring, half a beat later */
.marker-saffron { --pulse: #a9582c; }
.marker-olive { --pulse: #6f785f; }
:root[data-theme="dark"] .marker-saffron { --pulse: #e0915c; }
:root[data-theme="dark"] .marker-olive { --pulse: #b5b894; }
.callout:nth-child(2) .marker { --pulse-delay: .5s; }
.callout:nth-child(3) .marker { --pulse-delay: 1s; }
.callout:nth-child(4) .marker { --pulse-delay: 1.5s; }
@keyframes marker-pulse {
  0%   { transform: scale(1);   opacity: .55; }
  100% { transform: scale(3.6); opacity: 0; }
}
.callout:hover .marker::before, .callout.is-open .marker::before,
.callout:hover .marker::after, .callout.is-open .marker::after { animation-duration: 1.6s; }
@media (prefers-reduced-motion: reduce) { .marker::before, .marker::after { animation: none; } }

/* =====================================================================
   Motion system (per web-animation-design guide)
   - enter/exit: ease-out, <=180ms in / ~20% faster out; origin-aware scale from .97
   - on-screen movement (chevrons): ease-in-out; hovers/colour: ease 150ms
   - only transform + opacity animate; every timing collapses to 0 for reduced motion
   ===================================================================== */
:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);          /* ease-out-quint */
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
  --ease-in-out: cubic-bezier(.645, .045, .355, 1);  /* ease-in-out-cubic */
  --t-pop-in: 180ms;
  --t-pop-out: 140ms;
  --t-drawer-in: 260ms;
  --t-drawer-out: 200ms;
  --t-press: 150ms;
  --t-hover: 150ms;
  --t-rotate: 200ms;
  --t-theme: 280ms;
  --t-zoom: 600ms;
  --t-expand: 360ms;
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
}

/* Popovers: menu dropdown, More details, season menu, place cards */
.dropdown, .season-menu { display: block; }
.place-card { display: flex; }
.dropdown, .season-menu, .place-card {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(var(--pop-y, 4px)) scale(.97);
  transition: opacity var(--t-pop-out) var(--ease-out), transform var(--t-pop-out) var(--ease-out),
              visibility 0s linear var(--t-pop-out);
}
.nav-menu .dropdown { --pop-y: -4px; transform-origin: top right; }
.season-menu { transform-origin: bottom right; }
.place-card { transform-origin: bottom left; }
.callout[data-align="end"] .place-card { transform-origin: bottom right; }
.nav-menu.open .dropdown,
.season-picker.open .season-menu,
.callout.is-open .place-card {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  animation: none;
  transition: opacity var(--t-pop-in) var(--ease-out), transform var(--t-pop-in) var(--ease-out), visibility 0s;
}
@media (hover: hover) and (pointer: fine) {
  .callout:hover .place-card {
    visibility: visible; opacity: 1; pointer-events: auto; transform: none;
    transition: opacity var(--t-pop-in) var(--ease-out), transform var(--t-pop-in) var(--ease-out), visibility 0s;
  }
}
/* moving straight from one tag to the next: show the next card instantly */
.callouts.instant .callout .place-card { transition-duration: 0s; transition-delay: 0s; }

/* Legal fine print (<details>) — enter only; native close is instant */
@keyframes pop-in { from { opacity: 0; transform: translateY(4px) scale(.97); } }
.disclosure .panel { transform-origin: bottom right; }
.disclosure[open] .panel { animation: pop-in var(--t-pop-in) var(--ease-out); }

/* Mobile full-screen menu */
.drawer { display: flex; }
.drawer {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--t-drawer-out) var(--ease-out), transform var(--t-drawer-out) var(--ease-out),
              visibility 0s linear var(--t-drawer-out);
}
.drawer.open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity var(--t-drawer-in) var(--ease-out), transform var(--t-drawer-in) var(--ease-out), visibility 0s;
}

/* Chevrons rotate in place: ease-in-out */
.nav-tab img, .disclosure summary img, .acc summary img { transition: transform var(--t-rotate) var(--ease-in-out); }

/* Press feedback + calm colour hovers */
.btn, .sign-in, .callout-pill, .season-btn, .theme-toggle, .nav-tab,
.disclosure summary, .view-all, .subscribe button, .drawer-close, .icon-btn {
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease,
              border-color var(--t-hover) ease, color var(--t-hover) ease;
}
.btn:active, .sign-in:active, .callout-pill:active, .season-btn:active, .theme-toggle:active, .nav-tab:active,
.disclosure summary:active, .view-all:active, .subscribe button:active,
.drawer-close:active, .icon-btn:active { transform: scale(.97); }
.event-card { transition: background-color var(--t-hover) ease; cursor: pointer; }   /* cards are clickable */
.season-menu button, .dropdown a { transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.switch, .switch::after { transition-duration: var(--t-hover); }
.text-link img { transition: transform var(--t-hover) var(--ease-out); }
@media (hover: none) { .text-link:hover img { transform: none; } }

/* 44px minimum hit areas on touch screens, without changing layout */
@media (pointer: coarse) {
  /* (the drawer's Sign in row is already a full-height row, and its ::after is the arrow) */
  .theme-toggle, .sign-in:not(.drawer-sign-in), .season-btn, .callout-pill, .icon-btn, .drawer-close, .subscribe button { position: relative; }
  .theme-toggle::after, .sign-in:not(.drawer-sign-in)::after, .season-btn::after, .callout-pill::after, .icon-btn::after,
  .drawer-close::after, .subscribe button::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 100%; height: 100%; min-width: 44px; min-height: 44px;
    transform: translate(-50%, -50%);
  }
}

/* Phones: centre popovers with the separate `translate` property so `transform` stays free for motion */
@media (max-width: 768px) {
  .disclosure .panel { right: auto; left: 50%; transform: none; translate: -50% 0; transform-origin: bottom center; }
  .place-card, .callout[data-align="end"] .place-card { transform-origin: bottom center; }
}

/* Reduced motion: every UI timing drops to zero */
/* Accordions (guidelines, FAQ, legal, booking guests, phone menu) ease open and shut where the
   browser can animate to auto height; elsewhere they simply snap, as before */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .as-method::details-content, .bk-person::details-content, .acc::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--t-expand) var(--ease-soft), content-visibility var(--t-expand) allow-discrete;
  }
  .as-method[open]::details-content, .bk-person[open]::details-content, .acc[open]::details-content { block-size: auto; }
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :root { --t-pop-in: 0ms; --t-pop-out: 0ms; --t-drawer-in: 0ms; --t-drawer-out: 0ms;
          --t-press: 0ms; --t-hover: 0ms; --t-rotate: 0ms;
          --t-theme: 0ms; --t-zoom: 0ms; --t-expand: 0ms; }
  body, .nav, .dropdown, .drawer, .event-card, .subscribe, .btn { transition: none; }
  .btn:active, .sign-in:active, .callout-pill:active, .season-btn:active, .theme-toggle:active, .nav-tab:active,
  .disclosure summary:active, .view-all:active, .subscribe button:active,
  .drawer-close:active, .icon-btn:active { transform: none; }
}

/* =====================================================================
   Events listing (events.html) and event detail pages
   ===================================================================== */
:root { --olive-deep: #5f6549; --quote-mark: #e5b481; --glow: rgba(217,147,81,.24); }
:root[data-theme="dark"] { --olive-deep: #b5b894; --quote-mark: #9a7550; --glow: rgba(224,145,92,.14); }
img[src*="icon-"] { filter: var(--icon-ink); }
.event-card { color: inherit; }
.event-card:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }

/* ----- Events introduction ----- */
.ev-intro {
  position: relative;
  min-height: 474px;
  padding: 82px var(--gutter) 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  overflow-x: clip;                 /* trim sideways only, so the glow fades out instead of ending in a straight line */
}
.ev-intro .glow {
  position: absolute;
  z-index: -1;                      /* behind the text here and in the next section */
  right: 84px;
  top: calc(50% + 8px);
  width: 390px;
  height: 390px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(closest-side, var(--glow), transparent);
  pointer-events: none;
}
.ev-intro-copy { position: relative; width: 680px; max-width: 100%; display: flex; flex-direction: column; gap: 20px; }
.lede { width: 620px; max-width: 100%; font-size: var(--fs-lg); line-height: var(--lh-lg); color: var(--ink-muted); }
.ev-summary { position: relative; flex-shrink: 0; width: 330px; border-bottom: 1px solid var(--rule); }
.ev-summary div { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; border-top: 1px solid var(--rule); }
.ev-summary strong { font-family: var(--font-heading); letter-spacing: -0.01em; font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--ink); }
.ev-summary span { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }

/* ----- Upcoming gatherings ----- */
.listing.events { background: none; }   /* lets the intro glow fade into it; same colour as the page anyway */
.listing { padding: 84px var(--gutter) 104px; display: flex; flex-direction: column; gap: 42px; }
.listing .events-head .section-heading { gap: 10px; width: 710px; }
.sort { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); white-space: nowrap; }
.sort b { font-weight: 600; color: var(--brown); }
.sort:hover b { text-decoration: underline; text-underline-offset: 3px; }
.listing .event-cards { gap: 32px 28px; }
.listing-more { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.listing-more p { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }
.btn-outline-brown { border-color: var(--brown); color: var(--brown); font-weight: 600; padding: 13px 20px 13px 22px; }
.btn-outline-brown:hover { background: var(--brown-wash); }

/* ----- Event detail ----- */
.detail-wrap { position: relative; }
.detail { width: 700px; max-width: calc(100% - 2 * var(--gutter)); margin: 0 auto; padding: 32px 0 104px; }
.detail > * + * { margin-top: 48px; }
.detail > .detail-intro + * { margin-top: 78px; }
.detail .wide { width: 720px; max-width: calc(100% + 20px); margin-left: -10px; }
.detail section { scroll-margin-top: 96px; }
.detail-intro { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.detail-hero { width: 100%; display: flex; flex-direction: column; gap: 48px; }
.detail-copy { display: flex; flex-direction: column; gap: 20px; }
.detail-copy .paras { display: flex; flex-direction: column; gap: 18px; font-size: var(--fs-lg); line-height: var(--lh-lg); color: var(--ink); }

.card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px;
  border-radius: 16px;
  background: linear-gradient(180deg, transparent 0%, var(--cream) 50%, transparent 100%);
}
.card-title { font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--ink); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.icon-disc { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sand); }
.icon-disc.sm { width: 48px; height: 48px; }
.icon-disc.paper { background: var(--card-bg); }
.icon-disc.cream { background: var(--cream); }

.summary-list { display: flex; flex-direction: column; gap: 24px; padding: 24px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.summary-item { display: flex; align-items: flex-start; gap: 14px; }
.summary-item > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.summary-item strong, .stay-item strong { font-family: var(--font-heading); letter-spacing: -0.01em; font-weight: 400; font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--ink); }
.note { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }

.booking { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.booking p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--olive-deep); }
.booking p + p { margin-top: -12px; }   /* the two notes read as one block: 4px apart instead of 16px */
.btn-book { min-width: 168px; justify-content: center; font-size: var(--fs-body); line-height: var(--lh-body); }
.btn-full { border: 1px solid var(--rule); background: var(--paper); color: var(--ink-muted); cursor: default; }   /* event fully booked */
.guide-warn { margin-top: 24px; padding: 18px; border: 1px solid var(--rule); background: var(--paper); }
.meeting a { color: var(--brown); text-decoration: underline; text-underline-offset: 2px; }
.apply-card { min-height: 0; }
.apply-link { align-self: flex-start; }

.detail .section-heading h2 { line-height: 1.08; }
.times { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.schedule-cards > * + * { margin-top: 28px; }
.time-row { display: flex; align-items: center; gap: 18px; padding: 18px 0; border-top: 1px solid var(--rule); }
.date-chip { flex-shrink: 0; width: 58px; height: 58px; border-radius: 12px; background: var(--sand); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.date-chip b { font-family: var(--font-heading); letter-spacing: -0.01em; font-weight: 400; font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--ink); }
.date-chip span { font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--saffron); }
.time-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.time-copy span { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-muted); }
.time-copy strong { font-family: var(--font-heading); letter-spacing: -0.01em; font-weight: 400; font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--ink); }
.stay-list { display: flex; flex-direction: column; border-bottom: 1px solid var(--rule); }
.stay-item { display: flex; flex-direction: column; gap: 7px; padding: 20px 0; border-top: 1px solid var(--rule); }
.stay-item strong { font-size: var(--fs-h4); line-height: var(--lh-h4); }

.guide-intro { display: flex; flex-direction: column; gap: 16px; }
.guide-intro h2 { line-height: 1.1; }
.guide-intro p:last-child { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }
.guidelines { list-style: none; margin: 48px 0 0; padding: 0; counter-reset: g; }
.guidelines li { display: flex; padding: 8px 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); counter-increment: g; }
.guidelines li::before {
  content: counter(g, decimal-leading-zero);
  flex-shrink: 0;
  width: 34px;
  padding-top: 1px;
  font-family: var(--font-heading); letter-spacing: -0.01em;
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  color: var(--saffron);
}
.meeting { margin-top: 48px; flex-direction: row; align-items: center; }
.meeting > div:last-child { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.meeting h3 { font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--ink); }
.meeting p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-muted); }

.quote { min-height: 366px; flex-direction: row; align-items: center; gap: 0; margin: 0; }
.quote-mark { flex-shrink: 0; width: 70px; margin-right: -19px; font-family: var(--font-heading); letter-spacing: -0.01em; font-size: 84px; line-height: .8; color: var(--quote-mark); }
.quote > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.quote blockquote { margin: 0; font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--olive-active); }
.quote figcaption { font-size: var(--fs-ui); line-height: var(--lh-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--olive); }

.stay-card { min-height: 390px; }
.amount { font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--ink); }
.stay-card .card-head > div { display: flex; flex-direction: column; gap: 8px; }
.stay-card .lead { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-muted); }
.stay-card .body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-muted); }
.stay-card hr { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--rule); }
.stay-card h3 { font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--ink); }
.notice { display: flex; align-items: flex-start; gap: 12px; padding: 18px 0; border-radius: 10px; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink); }
.notice img, .note img, .summary-item img { flex-shrink: 0; }

/* "On this page" — sticky in the right margin, highlights the section in view */
.toc { position: absolute; top: 87px; right: 90px; bottom: 104px; width: 180px; }
.toc-inner { position: sticky; top: 172px; display: flex; flex-direction: column; gap: 18px; }
/* "On this page" matches the Guidelines / Terms index: a hairline, numbered entries, a saffron mark on the current one */
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-left: 1px solid var(--rule); }
.toc a { display: flex; align-items: baseline; gap: 12px; margin-left: -1px; padding: 9px 0 9px 18px; border-left: 2px solid transparent; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-muted); text-decoration: none; transition: color var(--t-hover) ease, border-color var(--t-hover) ease; }
.toc a:hover, .toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--saffron); }
.toc a:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 1360px) {
  .toc { right: 32px; width: 168px; }
  .detail { margin-left: max(var(--gutter), calc((100% - 700px) / 2 - 60px)); }   /* leave room for On this page */
}
@media (max-width: 1180px) {
  .toc { display: none; }
  .detail { margin: 0 auto; }
}
@media (max-width: 1100px) {
  .ev-intro { flex-direction: column; align-items: flex-start; }
  .ev-intro .glow { top: auto; bottom: -120px; transform: none; }
}
@media (max-width: 768px) {
  .ev-intro { min-height: 0; padding: 56px 24px 40px; gap: 32px; }
  .ev-intro .glow { width: 300px; height: 300px; right: -80px; }
  .lede { font-size: var(--fs-body); line-height: var(--lh-body); }
  .ev-summary { width: 100%; }
  .ev-summary strong { font-size: var(--fs-h3); line-height: var(--lh-h3); }
  .listing { padding: 48px 24px 72px; gap: 32px; }
  .listing .events-head { flex-direction: column; align-items: center; gap: 16px; }
  .listing .events-head .section-heading { width: 100%; }

  .detail { max-width: none; width: auto; margin: 0 24px; padding: 24px 0 72px; }
  .detail > * + * { margin-top: 40px; }
  .detail > .detail-intro + * { margin-top: 56px; }
  .detail .wide { width: auto; max-width: none; margin-left: 0; }
  .detail-copy .paras { font-size: var(--fs-body); line-height: var(--lh-body); }
  .detail-hero { gap: 32px; }
  .card { padding: 24px 20px; gap: 20px; }
  .card-title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
  .summary-item strong, .stay-item strong { font-size: var(--fs-h4); line-height: var(--lh-h4); }
  .time-row { gap: 14px; }
  .time-copy strong { font-size: var(--fs-h4); line-height: var(--lh-h4); }
  .guidelines { margin-top: 32px; }
  .guidelines li { font-size: var(--fs-ui); line-height: var(--lh-ui); }
  .meeting { margin-top: 32px; align-items: flex-start; gap: 16px; }
  .meeting h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
  .meeting p { font-size: var(--fs-ui); line-height: var(--lh-ui); }
  .quote { min-height: 0; padding: 32px 20px; }
  .quote-mark { width: 44px; margin-right: -8px; font-size: 64px; align-self: flex-start; }
  .quote blockquote { font-size: var(--fs-h3); line-height: var(--lh-h3); }
  .stay-card { min-height: 0; }
  .amount { font-size: var(--fs-h1); line-height: var(--lh-h1); }
  .stay-card h3 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
  .stay-card .lead { font-size: var(--fs-body); line-height: var(--lh-body); }
  .stay-card .body { font-size: var(--fs-ui); line-height: var(--lh-ui); }
  .notice { padding: 14px 0; }
  .guide-warn { padding: 14px; }
}

/* =========================================================
   Offerings page
   ========================================================= */
:root { --caption: #918779; }
:root[data-theme="dark"] { --caption: #8f8577; }

/* ----- Introduction ----- */
.off-intro {
  position: relative;
  padding: 76px var(--gutter) 0;
  display: flex;
  flex-direction: column;
  gap: 54px;
  overflow: hidden;
}
.off-glow { position: absolute; right: 96px; top: 36px; width: 520px; height: 520px; pointer-events: none; }
:root[data-theme="dark"] .off-glow { opacity: .55; }
.off-hero { position: relative; display: flex; align-items: flex-start; gap: 82px; min-height: 410px; }
.off-hero-copy { width: 650px; max-width: 100%; display: flex; flex-direction: column; gap: 20px; }
.off-portrait { position: relative; flex: 1; min-width: 0; height: 410px; display: flex; align-items: center; justify-content: center; }
.off-halo { position: absolute; left: 50%; top: calc(50% - 2px); transform: translate(-50%, -50%); }
.off-idol { position: relative; width: 320px; height: 410px; object-fit: cover; }

.off-index {
  position: relative;
  display: flex;
  padding: 22px 0 24px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.off-index a {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-heading); letter-spacing: -0.01em;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  color: var(--ink);
  transition: color var(--t-hover) ease;
}
.off-index span { font-family: var(--font-body); font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: 1.2px; color: var(--saffron); }
.off-index a:hover { color: var(--brown); }
.off-index a:focus-visible { outline: 2px solid var(--saffron); outline-offset: 4px; border-radius: 2px; }

/* ----- Offerings ----- */
.offerings { padding: 104px var(--gutter); }
.offering {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 86px;
  padding: 64px 0;
  scroll-margin-top: 72px;
}
.offering + .offering { border-top: 1px solid var(--rule); }
.offering.flip .off-media { order: 1; }

.off-media { flex-shrink: 0; width: 510px; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.off-frame { width: 100%; padding: 14px; border-radius: var(--r-media); background: var(--sand); }
.off-photo { position: relative; aspect-ratio: 482 / 700; border-radius: var(--r-media-sm); overflow: hidden; }
.off-photo img { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); max-width: none; }
.off-media figcaption { font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: 0.08em; text-transform: uppercase; text-align: center; color: var(--caption); }

.off-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.off-copy .eyebrow { line-height: 1.3; }
.off-name { font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--ink); }
.off-divider { width: 72px; height: 1px; margin: 0; border: 0; background: var(--rule); }
.off-text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.off-text p + p { margin-top: .8em; }

/* "Read more" expansion */
.off-text.clamp { max-height: calc(var(--lines) * 1lh); overflow: hidden; transition: max-height var(--t-expand) var(--ease-soft); }
.off-text.clamp.open { max-height: none; }
.read-toggle {
  margin-top: -20px;           /* sits right under the text, as in the design */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 600;
  color: var(--ink);
  border-radius: 4px;
}
.read-toggle:hover { color: var(--brown); }
.read-toggle:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .off-text.clamp { transition: none; } }

@media (max-width: 1360px) {
  .offering { gap: 64px; }
  .off-media { width: 440px; }
  .off-hero { gap: 48px; }
}
@media (max-width: 1100px) {
  .off-glow { right: -120px; }
  .off-hero-copy { width: 520px; }
  .offering { gap: 48px; }
  .off-media { width: 360px; }
}
@media (max-width: 768px) {
  .off-intro { padding-top: 48px; gap: 32px; }
  .off-glow { width: 360px; height: 360px; right: -140px; top: 160px; }
  .off-hero { flex-direction: column; align-items: flex-start; gap: 24px; min-height: 0; }
  .off-portrait { width: 100%; height: 320px; }
  .off-halo { width: 260px; height: 260px; }
  .off-idol { width: 250px; height: 320px; }
  .off-index { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; padding: 18px 0 20px; }
  .off-index a { font-size: var(--fs-lg); line-height: var(--lh-lg); }

  .offerings { padding: 40px var(--gutter) 64px; }
  .offering { flex-direction: column; align-items: stretch; gap: 28px; padding: 40px 0; }
  .offering.flip .off-media { order: 0; }
  .off-media { width: 100%; }
  .off-frame { padding: 10px; }
  .off-copy { gap: 16px; }
  .off-name { font-size: var(--fs-h1); line-height: var(--lh-h1); }
  .off-text { font-size: var(--fs-body); line-height: var(--lh-body); }
  .off-text.clamp { --lines: 12 !important; }
  .read-toggle { margin-top: -16px; font-size: var(--fs-body); line-height: var(--lh-body); }
}

/* =========================================================
   Gallery: album gallery, album detail and image viewer
   ========================================================= */
:root {
  /* gallery tokens map onto the site's type and colour so every page matches */
  --g-serif: var(--font-heading);
  --g-sans: var(--font-body);
  --g-accent: var(--brown);
  --g-accent-hover: var(--btn-primary-hover);
  --g-accent-soft: var(--brown-wash);
  --g-ink: var(--ink);
  --g-muted: var(--ink-muted);
  --g-faint: var(--dark-tertiary);
  --g-line: var(--rule);
  --g-surface: var(--card-bg);
}
.gl [hidden], .viewer [hidden] { display: none !important; }

/* Icons are SVG masks so they take the current text colour */
.ic {
  display: inline-block;
  flex-shrink: 0;
  width: var(--s, 16px);
  height: var(--s, 16px);
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}

.gl { padding: 32px var(--gutter) 104px; display: flex; flex-direction: column; gap: 40px; font-family: var(--g-sans); color: var(--g-ink); }
.gl-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.gl-heading { width: 760px; max-width: 100%; display: flex; flex-direction: column; gap: 24px; }
.gl-count { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; white-space: nowrap; }
.gl-count strong { font-family: var(--g-serif); font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-h3); }
.gl-count span { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--g-muted); }

/* Chips, pills and round buttons */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--g-line);
  border-radius: 999px;
  background: var(--g-surface);
  font-family: var(--g-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--g-ink);
  white-space: nowrap;
  transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.chip:hover { border-color: var(--g-muted); }
.chip[aria-pressed="true"] { border-color: var(--g-accent); color: var(--g-accent); }
.chip .ic { --s: 14px; color: var(--g-muted); }
.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid var(--g-line);
  border-radius: 999px;
  background: var(--g-surface);
  font-family: var(--g-sans);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  color: var(--g-ink);
  white-space: nowrap;
  transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease, opacity var(--t-hover) ease;
}
.pill-btn:hover { border-color: var(--g-muted); }
.pill-btn.primary { background: var(--btn-primary); border-color: var(--btn-primary); color: #fff; }
.pill-btn.primary:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); }
.pill-btn:disabled { opacity: .45; cursor: not-allowed; }
.pill-btn .ic { --s: 16px; }
.round-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--g-line);
  border-radius: 999px;
  background: var(--g-surface);
  color: var(--g-ink);
}
.round-btn .ic { --s: 17px; }
.chip:focus-visible, .pill-btn:focus-visible, .round-btn:focus-visible, .gl-search:focus-within,
.album-card a:focus-visible, .ph button:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 2px; }

/* ----- Album gallery ----- */
.gl-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gl-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.gl-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 302px;
  height: 48px;
  padding: 0 15px;
  border: 1px solid var(--g-line);
  border-radius: 999px;
  background: var(--g-surface);
  color: var(--g-muted);
}
.gl-search .ic { --s: 17px; }
.gl-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 16px/normal var(--g-sans); color: var(--g-ink); }   /* 16px keeps iPhone from zooming in on focus */
.gl-search input::placeholder { color: var(--g-muted); }
.gl-search kbd { font: var(--fs-xs)/var(--lh-xs) var(--g-sans); color: var(--g-faint); }

.album-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px 24px; align-items: start; }
@media (max-width: 1100px) { .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .album-grid { grid-template-columns: 1fr; } }
.album-card { position: relative; display: flex; flex-direction: column; gap: 14px; }
.album-card > a { display: flex; flex-direction: column; gap: 14px; color: inherit; border-radius: 10px; }
.album-cover { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-media); overflow: hidden; background: var(--g-line); }
.album-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-zoom) var(--ease-soft); }
.album-card > a:hover .album-cover img { transform: scale(1.03); }
.album-info { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.album-info h2 { font-family: var(--g-serif); font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--g-ink); }   /* h3 size, as on the other pages */
.album-info p { margin-top: 6px; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--g-muted); }
.album-info .ic { --s: 18px; margin-top: 4px; color: var(--g-ink); transition: transform var(--t-hover) var(--ease-out); }
.album-card > a:hover .album-info .ic { transform: translate(2px, -2px); }
.gl-empty { padding: 48px 0; text-align: center; color: var(--g-muted); font-size: var(--fs-ui); line-height: var(--lh-ui); }

/* ----- Album detail ----- */
.gl.album { gap: 28px; }
.gl.album > .crumbs { margin-bottom: 12px; }
.crumbs { display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--g-muted); }
.crumbs a { display: inline-flex; align-items: center; gap: 9px; color: var(--g-muted); }
.crumbs a:hover { color: var(--g-ink); }
.crumbs .ic { --s: 15px; }
.crumbs .sep { color: var(--g-faint); }
.crumbs [aria-current] { color: var(--g-ink); }
.album-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.album-actions { display: flex; gap: 10px; flex-shrink: 0; }
.sel-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--g-line); border-bottom: 1px solid var(--g-line); }
.sel-left, .sel-right { display: flex; align-items: center; gap: 10px; }
.sel-right { gap: 8px; }
.layout-switch { display: flex; gap: 4px; }
.layout-switch button { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--g-muted); }
.layout-switch button .ic { --s: 15px; }
.layout-switch button[aria-pressed="true"] { background: var(--g-accent-soft); color: var(--g-accent); }

/* Photo grid: 12 columns (4 photos a row on desktop) */
.ph-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 240px; grid-auto-flow: dense; gap: 12px; }
.ph { position: relative; grid-column: span 3; border-radius: var(--r-media); overflow: hidden; background: var(--g-line); }
/* strict grid: four equal columns; the first photo is a 2×2 feature, so every edge still lines up */
.ph-grid .ph:nth-child(1) { grid-column: span 6; grid-row: span 2; }
.ph-open { position: absolute; inset: 0; width: 100%; height: 100%; cursor: zoom-in; }
.ph-open img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-zoom) var(--ease-soft); }
.ph-open:hover img { transform: scale(1.02); }
.ph-name {
  position: absolute;
  left: 12px;
  bottom: 12px;
  max-width: calc(100% - 24px);
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(17,19,15,.65);
  font: var(--fs-xs)/var(--lh-xs) var(--g-sans);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* List view */
.ph-list { display: flex; flex-direction: column; }
.ph-list .ph { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-radius: 0; background: none; overflow: visible; border-bottom: 1px solid var(--g-line); }
.ph-list .ph-open { position: relative; inset: auto; width: 112px; height: 72px; flex-shrink: 0; border-radius: var(--r-media-sm); overflow: hidden; }
.ph-list .ph-name { position: static; flex: 1; max-width: none; padding: 0; background: none; color: var(--g-ink); font-size: var(--fs-ui); line-height: var(--lh-ui); }
.ph-dims { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--g-muted); white-space: nowrap; }
.ph-grid .ph-dims { display: none; }

.grid-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--g-muted); }
.grid-foot > :first-child, .grid-foot > :last-child { flex: 1; }
.grid-foot > :last-child { text-align: right; }

/* ----- Immersive image viewer ----- */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  opacity: 0;
  transition: opacity var(--t-drawer-out) var(--ease-out), display var(--t-drawer-out) allow-discrete;
  background: #111310;
  font-family: var(--g-sans);
  color: #fff;
  --v-line: rgba(255,255,255,.11);
}
.viewer.open { display: flex; opacity: 1; transition-duration: var(--t-drawer-in); }
@starting-style { .viewer.open { opacity: 0; } }
.viewer .v-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(25,27,24,.56);
  color: #fff;
  transition: background-color var(--t-hover) ease;
}
.viewer .v-btn:hover { background: rgba(255,255,255,.12); }
.viewer .v-btn[aria-pressed="true"] { background: rgba(255,255,255,.18); }
.viewer .v-btn .ic { --s: 17px; }
.viewer button:focus-visible, .viewer a:focus-visible { outline: 2px solid #e0915c; outline-offset: 2px; }
.v-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; padding: 0 24px; border-bottom: 1px solid var(--v-line); }
.v-context, .v-tools { display: flex; align-items: center; gap: 16px; min-width: 0; }
.v-tools { gap: 8px; }
.v-context div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.v-context strong { font-weight: 400; font-size: var(--fs-ui); line-height: var(--lh-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-context span { font-size: var(--fs-xs); line-height: var(--lh-xs); color: rgba(255,255,255,.47); }
.viewer .pill-btn.primary { background: #a9582c; border-color: #a9582c; color: #fff; }
.viewer .pill-btn.primary:hover { background: #bd6634; border-color: #bd6634; }
.v-stage-wrap { flex: 1; min-height: 0; display: flex; padding: 20px 24px; }
.v-stage { position: relative; flex: 1; min-width: 0; display: flex; padding: 20px; border-radius: var(--r-media); background: #0b0c0a; overflow: hidden; touch-action: pan-y; }
.v-stage > img { flex: 1; min-width: 0; width: 100%; height: 100%; object-fit: contain; border-radius: var(--r-media-sm); transition: opacity var(--t-pop-in) ease; }
.v-stage > img.loading { opacity: .35; }
.v-prev, .v-next { position: absolute; top: 50%; transform: translateY(-50%); }
.v-prev { left: 36px; }
.v-next { right: 36px; }
.v-prev:disabled, .v-next:disabled { opacity: .3; cursor: default; }
.v-status { position: absolute; left: 36px; bottom: 34px; display: flex; align-items: center; gap: 7px; max-width: calc(100% - 72px); padding: 7px 11px; border-radius: 999px; background: rgba(17,19,15,.78); font-size: var(--fs-xs); line-height: var(--lh-xs); }
.v-status .ic { --s: 13px; }
.v-status span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-info {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 260px;
  padding: 18px 20px;
  border: 1px solid var(--v-line);
  border-radius: 10px;
  background: rgba(17,19,15,.9);
  backdrop-filter: blur(8px);
  font-size: var(--fs-sm); line-height: var(--lh-sm);
}
.v-info[hidden] { display: none; }
.v-info dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; }
.v-info dt { color: rgba(255,255,255,.47); }
.v-info dd { margin: 0; overflow-wrap: anywhere; }
.v-strip { display: flex; align-items: center; gap: 16px; height: 144px; padding: 24px; border-top: 1px solid var(--v-line); }
.v-thumbs { flex: 1; min-width: 0; display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 2px; }
.v-thumbs::-webkit-scrollbar { display: none; }
.v-thumbs > :first-child { margin-left: auto; }   /* centred when few, scrollable when many */
.v-thumbs > :last-child { margin-right: auto; }
.v-thumb { flex-shrink: 0; width: 112px; height: 72px; padding: 0; border-radius: 6px; overflow: hidden; background: #1b1d19; opacity: .72; transition: opacity var(--t-hover) ease; }
.v-thumb:hover { opacity: 1; }
.v-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.v-thumb[aria-current="true"] { padding: 3px; background: #a9582c; opacity: 1; }
.v-thumb[aria-current="true"] img { border-radius: 4px; }
body.viewer-open { overflow: hidden; }

@media (max-width: 1100px) {
  .gl-intro, .album-head { flex-direction: column; align-items: flex-start; }
  .gl-count { flex-direction: row; align-items: baseline; gap: 8px; }
  .gl-controls { flex-direction: column; align-items: stretch; }
  .gl-search { width: 100%; }
  .ph-grid { grid-auto-rows: 200px; }
  .ph-grid .ph, .ph-grid .ph:nth-child(n) { grid-column: span 4; grid-row: auto; }
  .ph-grid .ph:nth-child(1) { grid-column: span 8; grid-row: span 2; }
}
@media (max-width: 768px) {
  .gl { padding: 24px var(--gutter) 72px; gap: 28px; }
  .gl-filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter); scrollbar-width: none; }
  .gl-filters::-webkit-scrollbar { display: none; }
  .gl-search kbd { display: none; }
  .album-grid { row-gap: 32px; }
  .album-info h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
  .album-actions { width: 100%; flex-direction: column; }
  .sel-bar { flex-wrap: wrap; }
  .sel-left { flex-wrap: wrap; }
  .ph-grid { grid-auto-rows: 150px; gap: 8px; }
  .ph-grid .ph, .ph-grid .ph:nth-child(n) { grid-column: span 6; grid-row: auto; }
  .ph-grid .ph:nth-child(1) { grid-column: span 12; grid-row: span 2; }
  .ph-name { display: none; }
  .ph-list .ph-name { display: block; }
  .ph-list .ph-dims { display: none; }
  .grid-foot { flex-direction: column; text-align: center; }
  .grid-foot > :last-child { text-align: center; }

  .v-top { height: 60px; padding: 0 12px; }
  .v-tools .pill-btn span:not(.ic) { display: none; }
  .viewer .v-tools .pill-btn { width: 40px; height: 40px; padding: 0; }
  .v-stage-wrap { padding: 0; }
  .v-stage { padding: 0; border-radius: 0; }
  .v-stage > img { border-radius: 0; }
  .v-prev { left: 10px; }
  .v-next { right: 10px; }
  .v-status { left: 12px; bottom: 12px; max-width: calc(100% - 24px); }
  .v-info { left: 12px; right: 12px; width: auto; top: 12px; }
  .v-strip { height: 88px; padding: 12px; gap: 8px; }
  .v-strip > .v-btn { display: none; }
  .v-thumb { width: 72px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .v-thumbs { scroll-behavior: auto; }
  .album-cover img, .ph-open img { transition: none; }
}

/* ----- Breadcrumbs on internal pages (same component as the album page) ----- */
.crumbs-bar { position: relative; z-index: 1; padding: 32px var(--gutter) 0; }
.crumbs-bar + .ev-intro { padding-top: 40px; min-height: 0; align-items: flex-end; }
.crumbs-bar + .listing { padding-top: 40px; }   /* All events: the listing follows the breadcrumb directly */
.crumbs-bar + .off-intro { padding-top: 40px; }
.detail > .crumbs { margin: 0 0 40px; }
.detail > .crumbs + * { margin-top: 0; }
.crumbs a:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 2px; border-radius: 2px; }
@media (max-width: 768px) {
  .crumbs-bar { padding-top: 24px; }
  .crumbs-bar + .ev-intro, .crumbs-bar + .off-intro { padding-top: 28px; }
  .detail > .crumbs { margin: 0 0 28px; }
  .gl.album > .crumbs { margin-bottom: 0; }
}

/* ----- View-only albums: no long-press save menu, a notice on right-click ----- */
.protect-images .album-cover img, .protect-images .ph img, .protect-images .viewer img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.sel-note { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--g-muted); }
.sel-note a { color: var(--brown); text-decoration: underline; text-underline-offset: 2px; }
.img-notice {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 80;                       /* above the image viewer */
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100% - 32px);
  padding: 12px 12px 12px 20px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--card-bg);
  box-shadow: 0 12px 32px var(--shadow);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity var(--t-pop-out) var(--ease-out), transform var(--t-pop-out) var(--ease-out), visibility 0s linear var(--t-pop-out);
}
.img-notice.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-duration: var(--t-pop-in); transition-delay: 0s; }
.img-notice a { color: var(--brown); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.img-notice button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 999px; color: var(--ink-muted); }
.img-notice button:hover { background: var(--light-green-hover); }
@media (max-width: 768px) { .img-notice { bottom: 16px; border-radius: 16px; font-size: var(--fs-ui); line-height: var(--lh-ui); } }
@media (prefers-reduced-motion: reduce) { .img-notice { transition: none; } }

/* ----- Download Pics ----- */
.dl-grid { columns: 3; column-gap: 24px; }
.dl-card { break-inside: avoid; margin: 0 0 40px; display: flex; flex-direction: column; gap: 14px; }
.dl-photo { display: block; border-radius: var(--r-media); overflow: hidden; background: var(--g-line); }
.dl-photo img { width: 100%; height: auto; transition: transform var(--t-zoom) var(--ease-soft); }
.dl-photo:hover img { transform: scale(1.02); }
.dl-info { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dl-info h2 { font-family: var(--font-heading); letter-spacing: -0.01em; font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--ink); }   /* same as card titles */
.dl-info p { margin-top: 6px; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--g-muted); }
.dl-info .pill-btn { flex-shrink: 0; padding: 10px 16px; }
.dl-photo:focus-visible, .dl-info a:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 2px; }
@media (max-width: 1100px) { .dl-grid { columns: 2; } }
@media (max-width: 768px) {
  .dl-grid { columns: 1; }
  .dl-card { margin-bottom: 32px; }
  .dl-info h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
}

/* =========================================================
   Sign up / Sign in
   ========================================================= */
:root { --error: #c73b14; --placeholder: #918779; }
:root[data-theme="dark"] { --error: #f0a07f; --placeholder: #8a8073; }

.auth { position: relative; min-height: 896px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 40px var(--gutter); }
.auth-glow { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.auth-glow.saffron { width: 460px; height: 460px; transform: translate(calc(-50% + 360px), calc(-50% - 230px)); }
.auth-glow.sage { width: 520px; height: 520px; transform: translate(calc(-50% - 420px), calc(-50% + 170px)); }
:root[data-theme="dark"] .auth-glow { opacity: .6; }

.auth-card {
  position: relative;
  width: 560px;
  max-width: 100%;
  min-height: 756px;
  padding: 0 57px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  background: linear-gradient(180deg, transparent 0%, var(--sand) 43.27%, var(--sand) 67.31%, transparent 100%);
}
.auth-card[data-mode="signin"] { min-height: 650px; padding-bottom: 48px; gap: 28px; }
.auth-intro { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.auth-intro .lede { width: 100%; font-size: var(--fs-body); line-height: var(--lh-body); }
.auth-fields { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { padding: 0; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink); }
.field legend { margin-bottom: 8px; }
.input {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 50px;
  padding: 0 16px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--card-bg);
  transition: border-color var(--t-hover) ease, box-shadow var(--t-hover) ease;
}
.input:focus-within { border-color: var(--brown); box-shadow: 0 0 0 3px var(--brown-wash); }
.field.invalid .input { border-color: var(--error); }
.input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 16px/1.4 var(--font-body); color: var(--ink); }   /* 16px keeps iPhone from zooming in on focus */
.input input::placeholder { color: var(--placeholder); opacity: 1; }
.input.name { gap: 20px; }
/* the country box sits 8px in from the field's edge on every side (50px field, 32px box) */
.input.phone { padding-left: 8px; }
.input.phone select,
.input.phone .cc {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 26px 0 10px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--card-bg) url("arrow-down.svg") right 6px center / 14px no-repeat;
  font: 600 var(--fs-sm)/var(--lh-sm) var(--font-body);
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
/* full country names live in the native list; the box itself shows the compact "+91 IN" */
.input.phone .cc select { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; font-size: 16px; }
.input.phone .cc:focus-within { outline: 2px solid var(--brown); outline-offset: 1px; }
.input.phone .cc-label { white-space: nowrap; font-variant-numeric: tabular-nums; }
.input.phone > select:focus-visible { outline: 2px solid var(--brown); outline-offset: 1px; }
:root[data-theme="dark"] .input.phone > select, :root[data-theme="dark"] .input.phone .cc { background-image: none; padding-right: 12px; }
.input .divider { width: 1px; height: 20px; background: var(--rule); flex-shrink: 0; }
.field-error { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--error); }

.auth-actions { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.auth-submit { width: 100%; justify-content: center; position: relative; padding: 14px 24px; font-size: var(--fs-body); line-height: var(--lh-body); }
.auth-submit img { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); }
.auth-submit:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
.auth-switch { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); text-align: center; }
.auth-switch a { color: var(--brown); }
.auth-switch a:hover { text-decoration: underline; text-underline-offset: 2px; }
.auth-status { width: 100%; padding: 12px 16px; border-radius: 8px; background: var(--brown-wash); font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink); text-align: center; }

@media (max-width: 768px) {
  .auth { min-height: 0; padding: 32px var(--gutter) 64px; align-items: flex-start; }
  .auth-card, .auth-card[data-mode="signin"] { min-height: 0; padding: 40px 20px 32px; }   /* fields and button sit inside the card, not on its edge */
  .auth-intro .lede { width: auto; }
  .auth-glow.saffron { width: 300px; height: 300px; transform: translate(calc(-50% + 140px), calc(-50% - 240px)); }
  .auth-glow.sage { width: 340px; height: 340px; transform: translate(calc(-50% - 140px), calc(-50% + 220px)); }
  .input.name { gap: 10px; padding: 0 12px; }
}

/* =========================================================
   Ashram page
   ========================================================= */
.as-section { padding: 96px var(--gutter); }
.as-copy { display: flex; flex-direction: column; gap: 22px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-muted); }
.as-copy strong { font-weight: 600; color: var(--ink); }

/* ----- Hero ----- */
.as-hero { padding: 24px var(--gutter) 60px; }
.as-hero-card {
  position: relative;
  height: 640px;
  display: flex;
  align-items: flex-end;
  padding: 130px 64px 56px;
  border-radius: var(--r-media-lg);
  overflow: hidden;
  box-shadow: 0 12px 16px rgba(43,41,35,.1);
  isolation: isolate;
}
.as-hero-card > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.as-hero-card::before {           /* keeps the white type readable over the photo */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(23,30,20,.26) 0%, rgba(23,30,20,.35) 65%, rgba(23,30,20,.78) 100%);
}
.as-hero-copy { width: 700px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; color: #fff; }
.as-hero-copy .display-2xl { color: #fff; }
.as-hero-copy .lede { width: 620px; color: rgba(255,255,255,.91); }
.as-place { display: inline-flex; align-items: center; gap: 8px; color: #fff; }

/* ----- About ----- */
.as-about { display: flex; flex-direction: column; gap: 64px; }
.as-about-intro { display: flex; align-items: flex-start; gap: 80px; }
.as-about-intro .section-heading { width: 360px; flex-shrink: 0; }
.as-about-intro .as-copy { flex: 1; min-width: 0; }
.as-quote { min-height: 0; padding: 40px; }

/* Video tour: styled cover, YouTube player after play */
.as-video {
  position: relative;
  height: 620px;
  border-radius: var(--r-media-lg);
  overflow: hidden;
  box-shadow: 0 12px 16px rgba(43,41,35,.1);
  isolation: isolate;
  background: #111310;
}
.as-video > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-zoom) var(--ease-soft); }
.as-video:not(.playing)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23,30,20,.35), rgba(23,30,20,.6)); }
.as-video:hover > img { transform: scale(1.03); }
.as-video-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 20px; padding: 48px; text-align: left; color: #fff; cursor: pointer; }
.as-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: #fff;
  color: var(--brown);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: transform var(--t-hover) var(--ease-out);
}
:root[data-theme="dark"] .as-play { color: #793c22; }
.as-play .ic { margin-left: 4px; }           /* optical centre of the play triangle */
.as-video-play:hover .as-play { transform: scale(1.06); }
.as-video-play:focus-visible { outline: 3px solid #e0915c; outline-offset: -6px; border-radius: var(--r-media-lg); }
.as-video-title { font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-h1); line-height: var(--lh-h1); }
.as-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ----- Ashram activity: a row of spaces that scrolls sideways ----- */
.as-activity { display: flex; flex-direction: column; gap: 52px; }
.as-activity-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.as-activity-head .section-heading { width: 760px; max-width: 100%; }
.as-carousel-nav { display: flex; gap: 10px; }
.as-carousel-nav .round-btn { width: 44px; height: 44px; border-color: var(--rule); background: var(--card-bg); color: var(--ink); transition: opacity var(--t-hover) ease, background-color var(--t-hover) ease; }
.as-carousel-nav .round-btn:hover:not(:disabled) { background: var(--light-green-hover); }
.as-carousel-nav .round-btn:disabled { opacity: .35; cursor: default; }
.as-stories {
  position: relative;
  display: flex;
  gap: 60px;
  margin-right: calc(-1 * var(--gutter));
  padding: 0 var(--gutter) 24px 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  align-items: flex-start;
}
.as-stories::-webkit-scrollbar { display: none; }
.as-stories:focus-visible { outline: 2px solid var(--saffron); outline-offset: 4px; border-radius: 8px; }
.as-story { flex: 0 0 600px; max-width: 85vw; display: flex; flex-direction: column; gap: 52px; scroll-snap-align: start; scroll-margin-top: 96px; }
.as-story-media { position: relative; height: 620px; padding: 26px; border-radius: var(--r-media-lg); overflow: hidden; box-shadow: 0 8px 12px rgba(23,52,42,.12); isolation: isolate; }
.as-story-media img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.as-story-media::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, transparent 30%, transparent 55%, rgba(23,30,20,.6) 100%); }
.as-story-media p { font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-h4); line-height: var(--lh-h4); color: #fff; }
.as-story-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.as-accent { width: 64px; height: 2px; background: var(--saffron); }
.as-story .off-text { color: var(--ink-muted); line-height: 1.68; }
.as-story .off-text.clamp.open { max-height: none; }

/* ----- Directions ----- */
.as-directions { display: flex; flex-direction: column; gap: 40px; padding-top: 112px; padding-bottom: 112px; }
.as-route { display: flex; align-items: stretch; gap: 40px; }
.as-map {
  position: relative;
  flex: 0 0 800px;
  max-width: 62%;
  height: 561px;
  padding: 5px;
  border: 1px solid var(--rule);
  border-radius: var(--r-media);
  background: var(--cream);
}
.as-map iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: calc(var(--r-media) - 4px);   /* parallel to the frame around it */
  background: var(--sand); }
:root[data-theme="dark"] .as-map iframe { filter: brightness(.88) contrast(1.05); }
.as-map-layers {
  position: absolute;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  color: #1b1f14;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}
.as-map-layers { top: 20px; right: 20px; padding: 3px; gap: 2px; }
.as-map-layers button { padding: 6px 12px; border-radius: 999px; font-size: var(--fs-sm); line-height: var(--lh-sm); color: #1b1f14; }
.as-map-layers button[aria-pressed="true"] { background: #793c22; color: #fff; }
.as-map-layers button:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
.as-route-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.as-route-top { display: flex; flex-direction: column; gap: 16px; }
.as-route-title { font-family: var(--font-heading); letter-spacing: -0.01em; font-weight: 400; font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--ink); }
.as-coords { margin-top: 4px; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }
.as-facts { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.as-facts div { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--cream); }
.as-facts dt { font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.as-facts dd { margin: 0; font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-lg); line-height: var(--lh-lg); color: var(--ink); }
.as-route-note { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink); }
.as-route-info .actions { flex-wrap: wrap; }
.as-route-info .btn .ic { --s: 16px; }
.as-travel-info { display: flex; align-items: flex-start; gap: 36px; }
.as-travel-label { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }
.as-travel-label .ic { color: var(--saffron); }
.as-travel-label h3 { font-family: var(--font-heading); letter-spacing: -0.01em; font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--ink); }
.as-travel-info .as-copy { flex: 1; min-width: 0; gap: 14px; color: var(--ink); }

/* ----- Travel methods: accordions, all open to start ----- */
.as-travel { display: flex; flex-direction: column; gap: 36px; }
.as-methods { border-radius: 28px; }
.as-method + .as-method { border-top: 1px solid var(--rule); }
.as-method summary { display: flex; align-items: center; gap: 14px; padding: 28px 32px; cursor: pointer; list-style: none; }
.as-method summary::-webkit-details-marker { display: none; }
.as-method summary:focus-visible { outline: 2px solid var(--saffron); outline-offset: -2px; border-radius: 12px; }
.as-method-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 999px; background: var(--btn-primary); color: #fff; }
.as-method h3 { flex: 1; font-family: var(--font-heading); letter-spacing: -0.01em; font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--ink); }
.as-method summary > .ic { color: var(--ink); transform: rotate(180deg); transition: transform var(--t-rotate) var(--ease-in-out); }
.as-method[open] summary > .ic { transform: none; }
.as-method-body { display: flex; flex-direction: column; gap: 12px; padding: 0 32px 28px 88px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-muted); }
.as-method-body p, .as-method-body ol, .as-method-body ul { margin: 0; }
.as-method-body ol, .as-method-body ul { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.as-method-body strong, .as-sub { font-weight: 600; color: var(--ink); }
.as-method-body a { color: var(--brown); text-decoration: underline; text-underline-offset: 2px; }
.as-note { display: flex; align-items: flex-start; gap: 10px; padding: 16px; border-radius: 8px; background: var(--light-green-active); font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink); }
.as-note .ic { color: var(--brown); margin-top: 1px; }

@media (max-width: 1100px) {
  .as-about-intro { flex-direction: column; gap: 32px; }
  .as-about-intro .section-heading { width: auto; }
  .as-route { flex-direction: column; }
  .as-map { flex-basis: auto; max-width: none; height: 480px; }
  .as-travel-info { flex-direction: column; gap: 20px; }
  .as-travel-label { width: auto; }
}
@media (max-width: 768px) {
  .as-section { padding: 64px var(--gutter); }
  .as-hero { padding: 16px var(--gutter) 32px; }
  .as-hero-card { height: 520px; padding: 24px; }
  .as-hero-copy .lede { width: auto; }
  .as-about { gap: 40px; }
  .as-quote { padding: 32px 20px; }
  .as-video { height: 420px; }
  .as-video-play { padding: 24px; gap: 16px; }
  .as-play { width: 60px; height: 60px; }
  .as-video-title { font-size: var(--fs-h2); line-height: var(--lh-h2); }
  .as-activity { gap: 32px; }
  .as-activity-head { flex-direction: column; align-items: flex-start; }
  .as-stories { gap: 20px; }
  .as-story { flex-basis: 85vw; gap: 28px; }
  .as-story-media { height: 420px; padding: 20px; }
  .as-story .off-text.clamp { --lines: 12 !important; }
  .as-directions { padding-top: 64px; padding-bottom: 64px; }
  .as-map { height: 380px; }
  .as-method summary { padding: 20px 4px; gap: 12px; }
  .as-method h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
  .as-method-body { padding: 0 4px 24px; font-size: var(--fs-body); line-height: var(--lh-body); }
}

/* =========================================================
   Get involved / Donate
   ========================================================= */
.crumbs-bar + .give-intro { padding-top: 40px; }
.give-intro { padding: 40px var(--gutter) 0; display: flex; flex-direction: column; gap: 44px; }
.give-intro .section-heading { gap: 20px; }   /* same eyebrow → heading spacing as every inner page */
.give-banner { position: relative; height: 385px; border-radius: var(--r-media-lg); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 24px 40px; isolation: isolate; }
.give-banner.top { align-items: flex-start; padding-top: 78px; }
.give-banner img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.give-banner-text { width: 760px; max-width: 100%; font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-h1); line-height: var(--lh-h1); text-align: center; color: #25261e; }
.give-banner-text.light { color: #fefdfc; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.give-banner:has(.light)::after {  /* soft shade behind the light tagline so it reads over pale petals */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 55% 42% at 50% 50%, rgba(20,24,16,.42), transparent 75%), rgba(20,24,16,.12);
}

/* Verse */
.give-verse { padding: 60px var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 52px; }
.give-verse-head { width: 760px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.give-ornament { display: inline-flex; align-items: center; gap: 10px; }
.give-ornament::before, .give-ornament::after { content: ""; width: 38px; height: 1px; background: var(--rule); }
.give-verse-panel {
  width: 950px;
  max-width: 100%;
  min-height: 391px;
  margin: 0;
  padding: 0 57px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
  background: linear-gradient(180deg, transparent 0%, var(--sand) 43.27%, var(--sand) 67.31%, transparent 100%);
}
.give-om { font-family: var(--font-heading); letter-spacing: -0.01em; font-size: 42px; line-height: .8; color: var(--saffron); }
.give-verse-panel blockquote { margin: 0; font-family: var(--font-heading), "Noto Serif Devanagari", serif; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--ink); }
.give-rule { width: 64px; height: 1px; background: var(--rule); }
.give-verse-panel figcaption { width: 710px; max-width: 100%; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-muted); }
.btn .ic { --s: 14px; }

/* Ways to support */
.give-ways { padding: 60px var(--gutter) 104px; display: flex; flex-direction: column; gap: 56px; }
.give-ways-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.give-ways-head .display-2xl { width: 650px; max-width: 100%; }
.give-ways-head .lede { width: 420px; font-size: var(--fs-body); line-height: var(--lh-body); }
.gi-feature { position: relative; height: 700px; padding: 38px; border-radius: var(--r-media-lg); overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; isolation: isolate; }
.gi-feature > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.gi-feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 18%, rgba(23,30,20,.62) 48%, rgba(23,30,20,.92) 100%); }
.gi-feature-content { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.gi-feature-copy { width: 690px; max-width: 100%; display: flex; flex-direction: column; gap: 11px; }
.gi-feature-copy h3 { font-family: var(--font-heading); letter-spacing: -0.01em; font-weight: 400; font-size: var(--fs-h1); line-height: var(--lh-h1); color: #fff; }
.gi-feature-copy p { width: 610px; max-width: 100%; font-size: var(--fs-body); line-height: var(--lh-body); color: rgba(255,255,255,.78); }
.gi-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.gi-card { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: var(--r-media); overflow: hidden; background: var(--card-bg); }
.gi-card > img { width: 100%; height: 284px; object-fit: cover; }
.gi-card-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 26px 26px; }
.gi-card h3 { font-family: var(--font-heading); letter-spacing: -0.01em; font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--ink); }
.gi-card .off-text { display: flex; flex-direction: column; gap: 12px; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }
.gi-card .off-text p + p { margin-top: 0; }
.gi-card .off-text.clamp.open { max-height: none; }
.gi-card .read-toggle { margin-top: -8px; font-size: var(--fs-ui); line-height: var(--lh-ui); }
.gi-card .gi-support { margin-top: auto; }
.gi-support { padding: 11px 14px 11px 16px; gap: 9px; font-size: var(--fs-ui); line-height: var(--lh-ui); }
.gi-support .ic { --s: 15px; transition: transform var(--t-hover) var(--ease-out); }
.gi-support:hover .ic { transform: translateX(2px); }
.gi-support.on-dark { flex-shrink: 0; border-color: rgba(255,255,255,.3); color: #fff; }
.gi-support.on-dark:hover { background: rgba(255,255,255,.12); }

/* Donate form: same fields as sign up / sign in */
.donate-form { width: 880px; max-width: calc(100% - 2 * var(--gutter)); margin: 0 auto; padding: 52px 0 0; }
.donate-section { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
fieldset.donate-section { display: block; margin-top: 80px; }   /* a legend sits on the fieldset's edge, so space it from outside */
.donate-section legend { padding: 0; }
.donate-lede { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }
.donate-grid { margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 112px; align-items: start; }
.donate-col { display: flex; flex-direction: column; gap: 24px; }
.req { color: var(--brown); }
.input.area { height: auto; padding: 12px 16px; align-items: flex-start; }
.input textarea { flex: 1; min-width: 0; min-height: 52px; border: 0; outline: 0; background: none; resize: vertical; font: 16px/1.4 var(--font-body); color: var(--ink); }
.input textarea::placeholder { color: var(--placeholder); opacity: 1; }
.input.select { position: relative; padding: 0; }
.input.select select {
  width: 100%;
  height: 100%;
  padding: 0 40px 0 16px;
  border: 0;
  border-radius: 8px;
  outline: 0;
  background: none;
  font: 16px/1.4 var(--font-body);   /* selects match the text fields */
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.input.select select:invalid { color: var(--placeholder); }
.input.select::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  background: var(--ink-muted);
  -webkit-mask: url("icons/chevron-down.svg") center / contain no-repeat;
  mask: url("icons/chevron-down.svg") center / contain no-repeat;
  pointer-events: none;
}
.currency { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-muted); }
.field-hint { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-muted); }
.field[hidden], .input[hidden] { display: none; }
.donate-consent { display: flex; flex-direction: column; gap: 12px; padding: 46px 0 40px; }
.check { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink); cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--rule); border-radius: 6px; background: var(--paper) center / 14px no-repeat; cursor: pointer; transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease; }
.check input:hover { border-color: var(--saffron); }
.check input:checked { border-color: var(--btn-primary); background-color: var(--btn-primary); background-image: url("check-thin.svg"); }
.check input:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
.check a { color: var(--brown); text-decoration: underline; text-underline-offset: 2px; }
.donate-consent.invalid .check input { outline: 2px solid var(--error); outline-offset: 1px; }
.donate-note { margin-top: 20px; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink); }
.donate-action { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; margin-bottom: 104px; padding-top: 26px; border-top: 1px solid var(--rule); }
.donate-action .auth-status { text-align: left; }

@media (max-width: 1100px) {
  .give-ways-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .give-ways-head .lede { width: auto; }
  .gi-cards { grid-template-columns: 1fr 1fr; }
  .gi-feature-content { flex-direction: column; align-items: flex-start; gap: 20px; }
  .donate-grid { gap: 0 48px; }
}
@media (max-width: 768px) {
  .crumbs-bar + .give-intro { padding-top: 28px; }
  .give-intro { gap: 28px; }
  .give-banner { height: 240px; padding: 20px; }
  .give-banner.top { padding-top: 32px; }
  .give-banner-text { font-size: var(--fs-h2); line-height: var(--lh-h2); }
  .give-verse { padding: 48px var(--gutter); gap: 36px; }
  .give-verse-panel { min-height: 0; padding: 40px 16px; }
  .give-verse-panel blockquote { font-size: var(--fs-h4); line-height: var(--lh-h4); }
  .give-verse-panel figcaption { font-size: var(--fs-body); line-height: var(--lh-body); }
  .give-ways { padding: 40px var(--gutter) 72px; gap: 36px; }
  .gi-feature { height: auto; min-height: 640px; padding: 22px; }
  .gi-feature-copy h3 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
  .gi-feature-copy p { font-size: var(--fs-ui); line-height: var(--lh-ui); }
  .gi-cards { grid-template-columns: 1fr; }
  .gi-card > img { height: 220px; }
  .gi-card .off-text.clamp { --lines: 6 !important; }   /* the offerings rule raises clamps to 12 lines on phones */
  .donate-form { width: auto; max-width: none; margin: 0 var(--gutter); padding-top: 32px; }
  fieldset.donate-section { margin-top: 56px; }
  .donate-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
  .donate-action { align-items: stretch; margin-bottom: 72px; }
  .donate-action .btn { justify-content: center; }
}

.gi-feature, .gi-card { scroll-margin-top: 96px; }

/* Read more: fade the last lines out instead of cutting text mid-line */
.off-text.clamp.truncated:not(.open) {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 3.2em), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 3.2em), transparent 100%);
}

/* ===================== Important Guidelines ===================== */
.gd-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: start; padding: 56px var(--gutter) 0; }
.gd-index { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 18px; }
.gd-index ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-left: 1px solid var(--rule); }
.gd-index a { display: flex; align-items: baseline; gap: 12px; margin-left: -1px; padding: 9px 0 9px 18px; border-left: 2px solid transparent; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-muted); text-decoration: none; transition: color var(--t-hover) ease, border-color var(--t-hover) ease; }
.gd-index a:hover, .gd-index a[aria-current] { color: var(--ink); border-left-color: var(--saffron); }
.gd-index a:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; border-radius: 4px; }
.gd-num { font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: .88px; color: var(--saffron); font-variant-numeric: tabular-nums; }
.gd-toggle { align-self: flex-start; }
.gd-item { scroll-margin-top: 96px; }
.gd-item h2 { flex: 1; font-family: var(--font-heading); letter-spacing: -0.01em; font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--ink); }
.gd-item:first-child summary, .lg-notice + .gd-item summary { padding-top: 8px; }
.gd-num-badge { font-size: var(--fs-ui); line-height: var(--lh-ui); letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.gd-item .as-method-body { color: var(--ink); }
.gd-item .as-method-body ul { gap: 10px; }
.gd-item .as-method-body li::marker { color: var(--saffron); }
.gd-item .as-sub { margin-top: 8px; }

/* Timings read as a small table of label → time */
.gd-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 4px 0 8px; }
.gd-times div { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); }
.gd-times dt { font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.gd-times dd { margin: 0; font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-lg); line-height: var(--lh-lg); color: var(--ink); }

.gd-quote { margin: 8px 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--saffron); font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--brown); }
.as-method-body ul.gd-places { list-style: none; padding: 0; flex-direction: row; flex-wrap: wrap; gap: 8px; }
.gd-places li { padding: 6px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); font-size: var(--fs-ui); line-height: var(--lh-ui); }

.gd-help { padding: 48px var(--gutter) 96px; }
.gd-help p { margin: 0; padding-top: 28px; border-top: 1px solid var(--rule); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-muted); }
.gd-help a { color: var(--brown); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 1100px) {
  .gd-layout { grid-template-columns: 1fr; gap: 28px; }
  .gd-index { position: static; }
  .gd-index ol { display: none; }   /* the accordions are the index on smaller screens */
}
@media (max-width: 768px) {
  .gd-layout { padding-top: 32px; }
  .gd-item h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
  .gd-quote { font-size: var(--fs-h4); line-height: var(--lh-h4); }
  .gd-times { grid-template-columns: 1fr 1fr; }
  .gd-help { padding: 36px var(--gutter) 64px; }
}

/* ===================== Form 10BE ===================== */
.tbe-grid .field-hint + .field-error { margin-top: -2px; }
.tbe-form .donate-action { margin-bottom: 0; margin-top: 44px; }
.tbe-form .donate-action .btn .ic { --s: 16px; }
.tbe-help { margin: 24px 0 104px; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }
.tbe-help a { color: var(--brown); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 768px) {
  .tbe-form .donate-action { margin-top: 32px; }
  .tbe-form .donate-action .btn { width: 100%; justify-content: center; }
  .tbe-help { margin-bottom: 64px; }
}

/* ===================== Contact ===================== */
.ct-layout { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 72px; align-items: start; padding: 56px var(--gutter) 104px; }
.ct-form { display: flex; flex-direction: column; gap: 24px; }
.ct-form h2 { margin-bottom: 4px; }
.ct-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ct-count { text-align: right; font-variant-numeric: tabular-nums; }
.ct-action { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; padding-top: 8px; }
.ct-action .auth-status { text-align: left; }
.ct-action .auth-status a { color: var(--brown); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.ct-details { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 28px; }
.as-map.ct-map { flex: none; max-width: none; width: 100%; height: 280px; }
.ct-list { margin: 0; display: flex; flex-direction: column; }
.ct-list > div { display: flex; flex-direction: column; gap: 6px; padding: 20px 0; border-top: 1px solid var(--rule); }
.ct-list > div:first-child { border-top: 0; padding-top: 0; }
.ct-list dt { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.ct-list dt .ic { color: var(--saffron); }
.ct-list dd { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.ct-list dd a { color: var(--brown); text-decoration: underline; text-underline-offset: 2px; }
.ct-list dd.ct-muted { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }
.ct-note { margin: 0; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink); }
.ct-note a { color: var(--brown); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 1100px) {
  .ct-layout { grid-template-columns: 1fr; gap: 56px; }
  .ct-details { position: static; }
}
@media (max-width: 768px) {
  .ct-layout { padding: 32px var(--gutter) 64px; gap: 44px; }
  .ct-row { grid-template-columns: 1fr; }
  .ct-action .btn { width: 100%; justify-content: center; }
  .as-map.ct-map { height: 240px; }
}

/* ===================== Privacy Policy / Terms of Service ===================== */
.lg-meta { font-size: var(--fs-body); line-height: var(--lh-body); }
.lg-layout { padding-bottom: 104px; }
.lg-layout .gd-index { max-height: calc(100vh - 128px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.lg-body { counter-reset: s; max-width: 760px; display: flex; flex-direction: column; gap: 48px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.lg-sec { counter-increment: s; scroll-margin-top: 96px; display: flex; flex-direction: column; gap: 14px; }
/* the sections are accordions now (same as Guidelines / FAQ): rows sit flush, the open one shows its clauses */
.lg-body.gd-list { gap: 0; }
.gd-item.lg-sec { display: block; }
.lg-body .lg-notice { margin-bottom: 24px; }
.lg-content { gap: 14px; color: var(--ink); }
.lg-sec h2 { font-family: var(--font-heading); letter-spacing: -0.01em; font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--ink); }
.lg-n { color: var(--saffron); }
.lg-sec p, .lg-sec ul, .lg-sec ol { margin: 0; }
.lg-sec ul { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.lg-sec li::marker { color: var(--saffron); }
.lg-sec strong { font-weight: 600; }
.lg-sec a { color: var(--brown); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

/* Clauses number as 5.1, 5.2 … with lettered sub-clauses */
.lg-clauses { list-style: none; padding: 0; counter-reset: c; display: flex; flex-direction: column; gap: 12px; }
.lg-clauses > li { position: relative; padding-left: 52px; counter-increment: c; }
.lg-clauses > li::before { content: counter(s) "." counter(c); position: absolute; left: 0; top: 0; font-size: var(--fs-ui); line-height: var(--lh-ui); font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.lg-clauses > li > ol { list-style: lower-alpha; padding-left: 22px; margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.lg-clauses > li > ol > li::marker { color: var(--ink-muted); }

.lg-notice { display: flex; flex-direction: column; gap: 10px; padding: 20px 24px; border: 1px solid var(--rule); border-left: 3px solid var(--saffron); border-radius: 14px; background: var(--paper); font-size: var(--fs-ui); line-height: var(--lh-ui); letter-spacing: .2px; color: var(--ink-muted); }
.lg-notice p:first-child { font-weight: 600; color: var(--ink); }

.lg-card { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding: 16px 20px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); }
.lg-sec > .lg-card { margin-top: 0; }

.lg-table { overflow-x: auto; border: 1px solid var(--rule); border-radius: 14px; }
.lg-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); line-height: var(--lh-body); }
.lg-table th, .lg-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--rule); }
.lg-table thead th { border-top: 0; background: var(--paper); font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--ink-muted); }

@media (max-width: 768px) {
  .lg-layout { padding-bottom: 64px; }
  .lg-body { gap: 36px; font-size: var(--fs-body); line-height: var(--lh-body); }
  .lg-sec h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
  .lg-clauses > li { padding-left: 40px; }
  .lg-notice { padding: 16px 18px; }
  .lg-table th, .lg-table td { padding: 10px 12px; }
}

/* ===================== Booking (Yajamana seats) ===================== */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bk-layout { display: grid; grid-template-columns: 292px minmax(0, 1fr); gap: 48px; align-items: start; padding: 48px var(--gutter) 104px; }

/* Ritual details */
.bk-ritual { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 16px; }
.bk-badge { align-self: flex-start; padding: 4px 10px; border-radius: 6px; background: var(--btn-primary); color: #fff; font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.bk-ritual-title { font-family: var(--font-heading); letter-spacing: -0.01em; font-weight: 400; font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--ink); }
.bk-facts { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.bk-facts dt { font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.bk-facts dd { margin: 2px 0 0; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; color: var(--ink); }
.bk-facts dd { font-weight: 500; line-height: 1.45; }
.bk-back a { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--brown); text-decoration: underline; text-underline-offset: 2px; }
.bk-notice ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.bk-notice li::marker { color: var(--saffron); }
.bk-notice { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 16px; border: 1px solid var(--callout-border); border-radius: 14px; background: var(--callout-bg); font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--callout-ink); }
.bk-notice-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-lg); line-height: var(--lh-lg); color: var(--ink); }
.bk-notice-title .ic { color: var(--saffron); }

/* Steps */
.bk-main { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.bk-steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 16px; }
.bk-step { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.bk-step:not(:last-child)::after { content: ""; width: 48px; height: 1px; margin-left: 6px; background: var(--rule); }
.bk-step-dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--rule); font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-muted); background: var(--bg); }
.bk-step-name { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-muted); }
.bk-step[data-state="current"] .bk-step-dot { border-color: var(--btn-primary); background: var(--btn-primary); color: #fff; }
.bk-step[data-state="current"] .bk-step-name { color: var(--ink); font-weight: 600; }
.bk-step[data-state="done"] .bk-step-dot { border-color: var(--btn-primary); color: transparent; background: var(--btn-primary) url("check-thin.svg") center / 14px no-repeat; }
.bk-step[data-state="done"] .bk-step-name { color: var(--ink); }
.bk-step[data-state="done"]::after { background: var(--btn-primary); }

.bk-panel { display: flex; flex-direction: column; gap: 24px; }
.bk-panel.entering { animation: panel-in var(--t-drawer-in) var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }
.bk-panel[hidden] { display: none; }
.bk-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.bk-card { border: 1px solid var(--rule); border-radius: 20px; background: var(--card-bg); padding: 24px; }

/* Calendar */
.bk-month { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.bk-month-name { font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--ink); }
.bk-nav { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; color: var(--ink); }
.bk-nav:hover:not(:disabled) { background: var(--sand); }
.bk-nav:disabled { opacity: .3; cursor: default; }
.bk-dow, .bk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.bk-dow span { text-align: center; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 600; color: var(--ink-muted); padding-bottom: 4px; }
.bk-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 48px; border-radius: 10px; border: 1px solid transparent; font: inherit; color: var(--ink); }
.bk-day b { font-size: var(--fs-body); font-weight: 600; line-height: var(--lh-body); }
.bk-day small { font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 500; font-variant-numeric: tabular-nums; }
.bk-day.off { color: var(--dark-tertiary); }
.bk-day.off b { font-weight: 400; }
button.bk-day { cursor: pointer; border-color: var(--rule); background: var(--paper); transition: background var(--t-hover) ease, border-color var(--t-hover) ease; }
button.bk-day b { padding-bottom: 2px; border-bottom: 1px solid var(--rule); }
button.bk-day:hover { border-color: var(--saffron); }
button.bk-day:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
.bk-day.open small { color: #2e7d32; }
.bk-day.low small { color: var(--saffron); }
.bk-day.wl small { color: var(--error); font-weight: 700; letter-spacing: .3px; }
.bk-day[aria-pressed="true"] { border-color: var(--btn-primary); background: var(--btn-primary); color: #fff; }
.bk-day[aria-pressed="true"] b { border-color: rgba(255,255,255,.45); }
.bk-day[aria-pressed="true"] small { color: rgba(255,255,255,.9); }
:root[data-theme="dark"] .bk-day.open small { color: #8fc28f; }
.bk-legend { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-muted); }
.bk-legend li { display: inline-flex; align-items: center; gap: 6px; }
.bk-dot, .bk-day.talk::after { width: 5px; height: 5px; border-radius: 999px; background: var(--saffron); }
.bk-day.talk::after { content: ""; position: absolute; top: 5px; right: 5px; }
.bk-day.talk[aria-pressed="true"]::after { background: #fff; }
.bk-day.out-day { border: 1px dashed var(--rule); color: var(--ink-muted); }
.bk-day.out-day small { font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: .3px; }
.bk-key { font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 700; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--rule); background: var(--paper); }
.bk-key.open { color: #2e7d32; } .bk-key.low { color: var(--saffron); } .bk-key.wl { color: var(--error); }

/* Attendees */
.bk-people { display: flex; flex-direction: column; gap: 16px; }
.bk-people-title { font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-lg); line-height: var(--lh-lg); color: var(--ink); }
.bk-people-sub { margin-top: 4px; font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: 600; color: var(--ink-muted); }
.bk-people-sub.warn { color: var(--error); }
.bk-attendees { display: flex; flex-direction: column; }
.bk-person + .bk-person { border-top: 1px solid var(--rule); }
.bk-person summary { display: flex; align-items: center; gap: 10px; padding: 12px 0; cursor: pointer; list-style: none; }
.bk-person summary::-webkit-details-marker { display: none; }
.bk-person summary:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; border-radius: 6px; }
.bk-person-name { flex: 1; min-width: 0; font-size: var(--fs-lg); line-height: var(--lh-lg); color: var(--ink); overflow-wrap: anywhere; }
.bk-person-n { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-muted); white-space: nowrap; }
.bk-person summary > .ic { color: var(--ink); transform: rotate(180deg); transition: transform var(--t-rotate) var(--ease-in-out); }
.bk-person[open] summary > .ic { transform: none; }
.bk-person-days { display: flex; flex-direction: column; gap: 12px; padding: 0 0 16px; }
.bk-person-days .check { font-weight: 600; }
.bk-wl { font-style: normal; font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 700; color: var(--error); margin-left: 4px; }
.bk-remove { align-self: flex-start; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--brown); text-decoration: underline; text-underline-offset: 2px; }
.bk-empty { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }
.bk-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding-top: 16px; border-top: 1px solid var(--rule); }
.bk-add .field-error { grid-column: 1 / -1; }
.bk-add .btn { padding-inline: 16px; }

/* Selections and the action bar */
.bk-summary { padding: 16px 20px; border-radius: 14px; background: var(--sand); }
.bk-summary-title { font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-muted); margin-bottom: 8px; }
.bk-summary ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink); }
.bk-summary li:not(.bk-empty)::before { content: "•"; margin-right: 6px; color: var(--saffron); }
.bk-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 8px; }
.bk-count { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 700; color: var(--ink); }
.bk-total { color: var(--brown); }
.bk-calc { display: block; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-muted); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* Billing */
.bk-panel h2:focus { outline: none; }
.bk-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); line-height: var(--lh-body); }
.bk-table th, .bk-table td { padding: 12px 8px; text-align: left; vertical-align: top; border-top: 1px solid var(--rule); }
.bk-table thead th { border-top: 0; font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--ink-muted); }
.bk-table tfoot th, .bk-table tfoot td { font-weight: 700; color: var(--ink); }
.bk-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.bk-wl-note { margin-top: 12px; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }
.bk-billing { display: flex; flex-direction: column; gap: 24px; }
.bk-sub { font-family: var(--font-heading); letter-spacing: -0.01em; font-weight: 400; font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--ink); }
.bk-consent { padding: 0; }
.bk-billing .auth-status { text-align: left; }

@media (max-width: 1100px) {
  .bk-layout { grid-template-columns: 1fr; gap: 32px; }
  .bk-ritual { position: static; }
}
@media (max-width: 860px) {
  .bk-split { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .bk-layout { padding: 28px var(--gutter) 64px; }
  .bk-card { padding: 18px 14px; }
  .bk-dow, .bk-days { gap: 4px; }
  .bk-day { height: 44px; border-radius: 8px; }
  .bk-day b { font-size: var(--fs-ui); line-height: var(--lh-ui); }
  .bk-steps { gap: 10px; }
  .bk-step:not(:last-child)::after { width: 20px; margin-left: 2px; }
  .bk-step-name { font-size: var(--fs-ui); line-height: var(--lh-ui); }
  .bk-bar { flex-wrap: wrap; }
  .bk-bar .btn { flex: 1 1 100%; justify-content: center; }
  #step2 .bk-bar .btn { flex: 1 1 auto; }
}

/* ===================== Terms / Guidelines pop-up ===================== */
.doc-dialog { width: 760px; max-width: calc(100vw - 32px); max-height: min(86vh, 900px); margin: auto; padding: 0; border: 1px solid var(--rule); border-radius: 20px; background: var(--card-bg); color: var(--ink); box-shadow: 0 24px 64px rgba(0,0,0,.18); overflow: hidden; }
.doc-dialog {
  opacity: 0; transform: translateY(12px) scale(.98);
  transition: opacity var(--t-drawer-out) var(--ease-out), transform var(--t-drawer-out) var(--ease-out),
              display var(--t-drawer-out) allow-discrete, overlay var(--t-drawer-out) allow-discrete;
}
.doc-dialog[open] { display: flex; flex-direction: column; opacity: 1; transform: none; transition-duration: var(--t-drawer-in); }
.doc-dialog::backdrop {
  background: rgba(21, 18, 15, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--t-drawer-out) ease, display var(--t-drawer-out) allow-discrete, overlay var(--t-drawer-out) allow-discrete;
}
.doc-dialog[open]::backdrop { opacity: 1; transition-duration: var(--t-drawer-in); }
@starting-style {
  .doc-dialog[open] { opacity: 0; transform: translateY(12px) scale(.98); }
  .doc-dialog[open]::backdrop { opacity: 0; }
}
html.doc-open { overflow: hidden; }
.doc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--rule); }
.doc-head h2 { font-family: var(--font-heading); letter-spacing: -0.01em; font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-h3); }
.doc-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; color: var(--ink); }
.doc-close:hover { background: var(--sand); }
.doc-close:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
.doc-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px; }
.doc-body:focus-visible { outline: 2px solid var(--saffron); outline-offset: -2px; }
.doc-body .lg-body { max-width: none; gap: 36px; }
.doc-body .lg-sec h2 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.doc-body .gd-item h2 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.doc-body .gd-item summary { padding-inline: 0; }
.doc-body .gd-item .as-method-body { padding: 0 0 24px 56px; }
.doc-loading { color: var(--ink-muted); }
.doc-loading a { color: var(--brown); text-decoration: underline; }
.doc-foot { padding: 14px 24px; border-top: 1px solid var(--rule); background: transparent; }   /* the dialog's paper shows through */
.doc-foot .text-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--brown); }
@media (max-width: 768px) {
  .doc-dialog { width: 100vw; max-width: 100vw; height: 92vh; max-height: 92vh; margin: auto 0 0; border-radius: 20px 20px 0 0; border-bottom: 0; }
  .doc-head { padding: 16px 20px; }
  .doc-head h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
  .doc-body { padding: 20px; }
  .doc-body .gd-item .as-method-body { padding: 0 0 20px; }
}

/* ===================== About Om Swami ===================== */
.ab-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); grid-template-areas: "head photo" "text photo"; grid-template-rows: auto 1fr; column-gap: 72px;   /* the tall photo's extra height goes below the text, not under the heading */
  row-gap: 32px; align-items: start; padding: 40px var(--gutter) 96px; }
.ab-head { grid-area: head; gap: 20px; }
.ab-text { grid-area: text; display: flex; flex-direction: column; gap: 18px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-muted); }
.ab-text p { margin: 0; }
.ab-portrait { grid-area: photo; position: sticky; top: 104px; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-media-lg); background: #0b0a09; }
.ab-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 54% 30%; }

.ab-poem { display: flex; flex-direction: column; align-items: center; gap: 28px; margin: 0 var(--gutter); padding: 88px 24px; border-radius: 16px; background: linear-gradient(180deg, transparent 0%, var(--cream) 50%, transparent 100%); text-align: center; }   /* same wash as the event cards */
.ab-poem blockquote { margin: 0; }
.ab-verse { margin: 0; display: flex; flex-direction: column; gap: 4px; font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--ink); }
.ab-verse span:nth-child(4), .ab-verse span:nth-child(10), .ab-verse span:nth-child(11) { color: var(--brown); }   /* the turns: "A nobody.", "I am That.", "So are you." */
.ab-verse span:nth-child(4), .ab-verse span:nth-child(10) { margin-bottom: 20px; }

.ab-close { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 96px var(--gutter) 112px; text-align: center; }
.ab-creed { max-width: 760px; margin: 0; font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--ink); text-wrap: balance; }
.ab-sign { margin: 0; font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--saffron); }

/* the menu panel's excerpt links through to the full page */
.swami-more { color: var(--brown); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

@media (max-width: 1100px) {
  .ab-intro { grid-template-columns: 1fr; grid-template-areas: "head" "photo" "text"; grid-template-rows: auto; row-gap: 32px; }
  .ab-portrait { position: static; aspect-ratio: 3 / 2; max-width: 640px; }
}
@media (max-width: 768px) {
  .ab-intro { padding: 28px var(--gutter) 64px; }
  .ab-poem { margin: 0; border-radius: 0; padding: 64px var(--gutter); }
  .ab-close { padding: 64px var(--gutter) 80px; }
}

/* ===================== Career ===================== */
.cr-openings { padding: 56px var(--gutter) 112px; }
.cr-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 720px; margin: 0 auto; padding: 64px 32px; border-radius: 16px; background: linear-gradient(180deg, transparent 0%, var(--cream) 50%, transparent 100%); text-align: center; }   /* same wash as the event cards */
.cr-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 8px; border-radius: 999px; background: var(--btn-primary); color: #fff; }
.cr-empty-title { font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--ink); }
.cr-empty-text { max-width: 460px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-muted); }
.cr-actions { margin-top: 16px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 768px) {
  .cr-openings { padding: 32px var(--gutter) 72px; }
  .cr-empty { padding: 48px 16px; }
}

/* ===================== FAQs (shares the Guidelines layout) ===================== */
.as-method-body ul.fq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; }
.fq-note { padding: 12px 16px; border-radius: 12px; background: var(--sand); font-size: var(--fs-ui); line-height: var(--lh-ui); }
@media (max-width: 768px) { .as-method-body ul.fq-list { grid-template-columns: 1fr; } }

/* ===================== Offering wheel (alternate Offerings page) ===================== */
.wh-intro { align-items: center; }
.wh { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 56px var(--gutter) 112px; }
/* the stage keeps Figma's 689 × 509 proportions; everything inside is placed in percentages of it */
.wh-stage { position: relative; width: 689px; max-width: 100%; aspect-ratio: 689 / 509; }
.wh-ring, .wh-bead-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wh-ring ellipse { fill: none; stroke: none; }   /* the ring is invisible; only the bead traces it */
.wh-bead { fill: var(--saffron); }
.wh-bead-glow { fill: var(--saffron); opacity: .22; }
.wh-bead-layer { z-index: 3; }

/* the card stands on the ring and turns on its vertical axle */
.wh-card-wrap { position: absolute; left: 29.17%; top: 0; width: 43.35%; height: 88.02%; z-index: 2; perspective: 1400px; }
.wh-card-wrap { cursor: pointer; border-radius: var(--r-media-lg); }
.wh-card-wrap:focus-visible { outline: 2px solid var(--saffron); outline-offset: 4px; }
@media (hover: hover) { .wh-card-wrap:hover .wh-card { transform: translateY(-3px); transition: transform 240ms ease; } }
.wh-card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; border-radius: var(--r-media-lg); }
.wh-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-media-lg); opacity: 0; backface-visibility: hidden; }
.wh-card img.on { opacity: 1; }

/* offerings placed around the ring */
.wh-tabs { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.wh-tab {
  position: absolute; left: var(--x); top: var(--y); transform: translateX(-50%);
  pointer-events: auto; padding: 4px 6px 6px; border-radius: 6px;
  font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); white-space: nowrap;
  background: none; cursor: pointer; transition: color 200ms ease;
}
.wh-tab:hover { color: var(--brown); }
.wh-tab[aria-selected="true"] { color: var(--brown); }
.wh-tab:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }

/* the chosen offering's words */
.wh-cta { margin-top: 40px; }
.wh-panels { width: 558px; max-width: 100%; margin-top: 72px; }
.wh-panel { display: flex; flex-direction: column; gap: 10px; animation: wh-in 520ms var(--ease-out, ease-out) both; }
.wh-panel[hidden] { display: none; }
.wh-name { font-family: var(--font-heading); letter-spacing: -0.01em; font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--ink); }
.wh-text { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }
.wh-text p { margin: 0; }
@keyframes wh-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .wh-panel { animation: none; }
  .wh-card img { transition: opacity 300ms ease; }
}

@media (max-width: 768px) {
  .wh { padding: 32px var(--gutter) 72px; }
  .wh-cta { margin-top: 28px; }
  .wh-panels { margin-top: 40px; }
  /* phones: the card and ring stay; the offerings become a row of choices beneath */
  .wh-stage { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; }
  .wh-card-wrap { position: relative; left: auto; width: min(260px, 72vw); height: auto; aspect-ratio: 2 / 3; }
  .wh-ring, .wh-bead-layer { display: none; }
  .wh-tabs { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; pointer-events: auto; }
  .wh-tab { position: static; transform: none; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; font-size: var(--fs-ui); line-height: var(--lh-ui); }
  .wh-tab[aria-selected="true"] { border-color: var(--btn-primary); background: var(--btn-primary); color: #fff; }
}

/* Paper texture on menus and pop-ups too (light theme; none in dark) — the colour underneath stays as it was */
.dropdown, .season-menu, .place-card, .disclosure .panel, .drawer, .doc-dialog, .img-notice {
  background-image: var(--paper-texture);
  background-repeat: repeat;
}
/* the Swamiji watercolour has a white ground: blend it into the paper instead of showing a white box */
:root:not([data-theme="dark"]) .swami-note img { mix-blend-mode: multiply; }

/* ---------- Donate: recurring donation ---------- */
/* Your Donation as rows: amount | PAN, then the recurring options across both columns, then program and remarks */
.donate-rows { gap: 24px 112px; }
.donate-rows .d-amount, .donate-rows .d-cause { grid-column: 1; }
.donate-rows .d-remarks { grid-column: 2; }   /* beside Get Involved */
.donate-rows .d-pan { grid-column: 2; grid-row: 1; }
.donate-rows .d-recur { grid-column: 1 / -1; }
@media (max-width: 1100px) { .donate-rows { column-gap: 48px; } }

/* the Recurring switch sits inside the amount field */
.recur-switch { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 32px; margin-right: -6px; padding: 0 6px; border-radius: 8px; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); white-space: nowrap; }
.recur-switch:hover { color: var(--ink); }
.recur-switch:focus-visible { outline: 2px solid var(--saffron); outline-offset: 1px; }
.recur-switch[aria-checked="true"] { color: var(--brown); }
.recur-switch[aria-checked="true"] .switch { background: var(--btn-primary); }
.recur-switch[aria-checked="true"] .switch::after { transform: translateX(12px); }

.recur { border: 1px solid var(--saffron); border-radius: 16px; background: var(--card-bg); background-image: var(--paper-texture); animation: recur-in var(--t-pop-in) var(--ease-out); }
.recur[hidden] { display: none; }
@keyframes recur-in { from { opacity: 0; transform: translateY(-4px); } }
.recur-header { display: flex; align-items: center; gap: 16px; padding: 20px 24px; }
.recur-ic { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sand); color: var(--saffron); }
.recur-head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.recur-title { font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--ink); }
.recur-sub { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }
.recur-body { display: flex; flex-direction: column; gap: 24px; padding: 4px 24px 24px 80px; }
.recur-body .field[hidden] { display: none; }

/* segmented choice: frequency and weekday */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 88px; height: 40px; padding: 0 16px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--paper);
  font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink);
  transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease, color var(--t-hover) ease;
}
.seg-days span { min-width: 56px; padding: 0 12px; }
.seg label:hover span { border-color: var(--saffron); }
.seg input:checked + span { background: var(--btn-primary); border-color: var(--btn-primary); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--saffron); outline-offset: 2px; }
.recur-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; align-items: start; }
.recur-row .field[hidden] { display: none; }
.recur-body > .field-hint { margin-top: -12px; }
.input input[type="date"] { font: 16px/1.4 var(--font-body); color: var(--ink); }
.input input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; }
:root[data-theme="dark"] .input input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }

.recur-summary { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 12px; background: var(--sand); }
.recur-summary-main { font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-lg); line-height: var(--lh-lg); color: var(--ink); }
.recur-summary-next { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }
.recur-consent { padding: 0; }
.recur-consent .check { align-items: flex-start; }
.recur-consent .check input { margin-top: 1px; }
.recur-consent.invalid .check input { outline: 2px solid var(--error); outline-offset: 1px; }

/* after setting up: the schedule with Pause / Resume and Cancel */
.recur-card { align-self: stretch; display: flex; flex-direction: column; gap: 20px; padding: 24px; border: 1px solid var(--rule); border-radius: 16px; background: var(--card-bg); background-image: var(--paper-texture); }
.recur-card[hidden] { display: none; }
.recur-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.recur-card-head > div { display: flex; flex-direction: column; gap: 6px; }
.recur-card-title { font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--ink); }
.recur-status { flex-shrink: 0; padding: 4px 12px; border-radius: 999px; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.recur-status.is-active { background: #e6efe0; color: #3d6b2a; }
.recur-status.is-paused { background: var(--sand); color: var(--saffron); }
.recur-status.is-cancelled { background: var(--light-green-active); color: var(--ink-muted); }
:root[data-theme="dark"] .recur-status.is-active { background: #24311d; color: #a9d08e; }
.recur-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.recur-facts div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.recur-facts dt { font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--saffron); }
.recur-facts dd { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.recur-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.recur-actions[hidden], .recur-confirm[hidden] { display: none; }
.recur-cancel { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--error); text-decoration: underline; text-underline-offset: 3px; }
.recur-cancel:hover { color: var(--ink); }
.recur-confirm { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 12px; background: var(--sand); }
.recur-confirm p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.btn-danger { background: var(--error); border-color: var(--error); color: #fff; }
.btn-danger:hover { background: #a93210; border-color: #a93210; }
.recur-preview-note { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-muted); }

@media (max-width: 768px) {
  .recur-header { padding: 16px; gap: 12px; align-items: flex-start; }
  .donate-rows .d-pan { grid-column: 1; grid-row: auto; order: 5; }
  .donate-rows .d-remarks { grid-column: 1; }
  .recur-body { padding: 0 16px 20px; gap: 20px; }
  .recur-row { grid-template-columns: 1fr 1fr; }
  .recur-row .field:last-child { grid-column: 1 / -1; }
  .seg span { min-width: 0; flex: 1; }
  .seg > label { flex: 1 1 calc(50% - 4px); }
  .seg > label span { width: 100%; }
  .seg-days > label { flex: 1 1 calc(25% - 6px); }
  .recur-facts { grid-template-columns: 1fr; gap: 12px; }
  .recur-card-head { flex-direction: column-reverse; }
}

/* ---------- Donate, signed in: tabs + "My recurring donations" ---------- */
.acct-bar, .my-recurring { width: 880px; max-width: calc(100% - 2 * var(--gutter)); margin: 0 auto; }
.acct-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-top: 48px; border-bottom: 1px solid var(--rule); }
.acct-bar[hidden], .my-recurring[hidden] { display: none; }
.acct-tabs { display: flex; gap: 28px; }
.acct-tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 0 0 14px;
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-muted);
  transition: color var(--t-hover) ease;
}
.acct-tab:hover { color: var(--ink); }
.acct-tab[aria-selected="true"] { color: var(--ink); }
.acct-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--brown); }
.acct-tab:focus-visible { outline: 2px solid var(--saffron); outline-offset: 4px; border-radius: 4px; }
.acct-count { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--sand); font-size: var(--fs-sm); line-height: 20px; text-align: center; color: var(--brown); }
.acct-who { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); white-space: nowrap; }
.acct-who strong { font-weight: 600; color: var(--ink); }
.acct-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--btn-primary); color: #fff; font-size: var(--fs-xs); letter-spacing: 0.04em; }
.acct-bar:not([hidden]) + .my-recurring + .donate-form { padding-top: 40px; }

.my-recurring { display: flex; flex-direction: column; gap: 24px; padding: 40px 0 104px; }
.mr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.mr-head-copy { display: flex; flex-direction: column; gap: 8px; }
.mr-summary { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }
.mr-empty { padding: 32px; border: 1px dashed var(--rule); border-radius: 16px; text-align: center; color: var(--ink-muted); }
.mr-empty[hidden] { display: none; }
.mr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.mr-item { display: flex; flex-direction: column; gap: 18px; padding: 24px; border: 1px solid var(--rule); border-radius: 16px; background: var(--card-bg); background-image: var(--paper-texture); }
.mr-item.is-cancelled { background-color: transparent; }
.mr-item.is-cancelled .mr-title, .mr-item.is-cancelled .mr-facts { opacity: .6; }
.mr-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mr-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mr-title h3 { font-family: var(--font-heading); letter-spacing: -0.01em; font-weight: 400; font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--ink); }
.mr-amount { font-size: var(--fs-h3); }
.mr-title p { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }
.mr-facts { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1fr; gap: 16px; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--rule); }
.mr-facts div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mr-facts dt { font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--saffron); }
.mr-facts dd { margin: 0; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink); }
.mr-muted { color: var(--ink-muted); }
.mr-actions[hidden] { display: none; }
.mr-actions .btn { padding: 9px 16px; }
.mr-history-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }
.mr-history-btn:hover { color: var(--ink); }
.mr-history-btn .ic { transition: transform var(--t-rotate) var(--ease-in-out); }
.mr-history-btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
.mr-history-btn:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; border-radius: 4px; }
.mr-history { list-style: none; margin: 0; padding: 4px 16px; border-radius: 12px; background: var(--sand); }
.mr-history[hidden] { display: none; }
.mr-history li { display: grid; grid-template-columns: 1fr auto 64px; gap: 16px; padding: 10px 0; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.mr-history li + li { border-top: 1px solid var(--rule); }
.mr-history .mr-paid { color: #3d6b2a; text-align: right; }
:root[data-theme="dark"] .mr-history .mr-paid { color: #a9d08e; }
.mr-history .mr-none { display: block; color: var(--ink-muted); }

@media (max-width: 768px) {
  .acct-bar, .my-recurring { width: auto; max-width: none; margin: 0 var(--gutter); }
  .acct-bar { flex-direction: column-reverse; align-items: stretch; gap: 20px; padding-top: 32px; }
  .acct-tabs { gap: 20px; }
  .acct-tab { font-size: var(--fs-ui); }
  .my-recurring { padding: 32px 0 72px; }
  .mr-head { flex-direction: column; align-items: stretch; }
  .mr-head .btn { justify-content: center; }
  .mr-item { padding: 18px; }
  .mr-facts { grid-template-columns: 1fr 1fr; }
  .mr-history-btn { margin-left: 0; width: 100%; justify-content: center; padding-top: 4px; }
}

/* ---------- All events: grouped by month ---------- */
.month-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.month-nav a {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 16px 9px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--card-bg); color: var(--ink);
  transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.month-nav a b { font-family: var(--font-heading); letter-spacing: -0.01em; font-weight: 400; font-size: var(--fs-h4); line-height: 1; }
.month-nav a span { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-muted); }
.month-nav a:hover { border-color: var(--saffron); background: var(--cream); }
.month-nav a:active { transform: scale(.97); }
.month-nav a:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }

/* the series that runs across several months, as one wide banner */
.series-banner { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 40px; padding: 24px 28px; border: 1px solid var(--rule); background: var(--cream); background-image: var(--paper-texture); }
.series-banner .event-title { flex: 1 1 320px; }
.series-banner .group-dates { margin: 0; flex: 0 1 auto; }
.series-banner .event-meta { flex: 0 0 auto; padding-top: 0; border-top: 0; padding-left: 24px; border-left: 1px solid var(--rule); }
.series-banner:hover { border-color: var(--saffron); }

/* each month: a big seasonal month label that stays beside its events while they scroll by */
.months { display: flex; flex-direction: column; gap: 56px; }
.month { --m: var(--saffron); display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; padding-top: 32px; border-top: 1px solid var(--rule); scroll-margin-top: 96px; }
#m-2026-10 { --m: #b8622d; }   /* autumn: turning leaves */
#m-2026-11 { --m: #8a6a3e; }   /* early winter: dry grass */
#m-2026-12 { --m: #5d7486; }   /* winter: cold sky */
#m-2027-03 { --m: #b65b7c; }   /* spring: blossom */
#m-2027-04 { --m: #6f8a3a; }   /* spring: new leaves */
:root[data-theme="dark"] #m-2026-10 { --m: #e3955e; }
:root[data-theme="dark"] #m-2026-11 { --m: #c9a979; }
:root[data-theme="dark"] #m-2026-12 { --m: #9fb6c8; }
:root[data-theme="dark"] #m-2027-03 { --m: #e29ab5; }
:root[data-theme="dark"] #m-2027-04 { --m: #b2c97e; }
.month-rail { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 6px; }
.month-big { padding-bottom: 14px; font-family: var(--font-heading); font-size: 96px; line-height: .82; letter-spacing: -0.03em; color: var(--m); opacity: .9; }   /* room for the p of Apr */
.month-name { font-family: var(--font-heading); letter-spacing: -0.01em; font-weight: 400; font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--ink); }
.month-name span { color: var(--ink-muted); }
.month-meta { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }
.month-meta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--m); }
.month-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.month-cards .event-card .eyebrow { color: var(--m); }

@media (max-width: 1100px) {
  .month { grid-template-columns: 1fr; gap: 20px; }
  .month-rail { position: static; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
  .month-big { font-size: 64px; padding-bottom: 0; }   /* beside the month name here, so no gap below */
  .series-banner .event-meta { padding-left: 0; border-left: 0; }
}
@media (max-width: 768px) {
  .month-nav { align-self: stretch; flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter); scrollbar-width: none; }
  .month-nav::-webkit-scrollbar { display: none; }
  .month-nav a { flex-shrink: 0; }
  .months { gap: 40px; width: 100%; }
  .month { padding-top: 24px; }
  .month-big { font-size: 52px; }
  .month-cards { grid-template-columns: 1fr; gap: 16px; }
  .series-banner { padding: 20px; width: 100%; }
}

/* ---------- Make an offering ---------- */
.crumbs-bar + .mo-intro { padding-top: 40px; }
.mo-intro { padding: 40px var(--gutter) 0; display: flex; flex-direction: column; gap: 20px; max-width: calc(760px + 2 * var(--gutter)); }
.mo-intro .section-heading { gap: 20px; }
.mo-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; padding: 48px var(--gutter) 104px; }
.mo-main { min-width: 0; display: flex; flex-direction: column; gap: 48px; }
.mo-step { display: flex; flex-direction: column; gap: 20px; }
.mo-step-head { display: flex; align-items: flex-start; gap: 14px; }
.mo-num { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; border: 1px solid var(--saffron); color: var(--saffron); font-size: var(--fs-ui); line-height: 1; }
.mo-step-head h2 { font-family: var(--font-heading); letter-spacing: -0.01em; font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--ink); }
.mo-step-head p { margin-top: 4px; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }
.mo-step.invalid .mo-num { border-color: var(--error); color: var(--error); }

/* offering cards: photo, tick and name */
.mo-offerings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; border: 0; min-width: 0; }
.mo-off { position: relative; display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; background: var(--card-bg); cursor: pointer; transition: border-color var(--t-hover) ease, box-shadow var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.mo-off input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mo-off-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); }
.mo-off-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-zoom, 400ms) var(--ease-out); }
.mo-off:hover { border-color: var(--saffron); }
.mo-off:hover .mo-off-img img { transform: scale(1.03); }
.mo-off:active { transform: scale(.99); }
.mo-off-check { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #fff; background: rgba(0,0,0,.18) center / 14px no-repeat; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.mo-off-body { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 16px; }
.mo-off-body b { font-family: var(--font-heading); letter-spacing: -0.01em; font-weight: 400; font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--ink); }
.mo-off-body small { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-muted); }
.mo-off-fee { margin-top: auto; padding-top: 8px; font-style: normal; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--brown); }
.mo-off:has(input:checked) { border-color: var(--btn-primary); box-shadow: 0 0 0 1px var(--btn-primary); }
.mo-off input:checked ~ .mo-off-check { border-color: var(--btn-primary); background-color: var(--btn-primary); background-image: url("check-thin.svg"); }
.mo-off:has(input:focus-visible) { outline: 2px solid var(--saffron); outline-offset: 2px; }
.mo-step.invalid .mo-off { border-color: var(--error); }

/* calendar (same look as event booking) */
:root { --c-aarti: #2f9e5b; --c-abhishekam: #3f7ad6; --c-sahasranama: #e2711d; --c-sringar: #9a55b8; }
:root[data-theme="dark"] { --c-aarti: #6fcf95; --c-abhishekam: #86adf0; --c-sahasranama: #f3a462; --c-sringar: #c99ade; }
.mo-dot { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.mo-off-body b .mo-dot { margin-right: 8px; vertical-align: 3px; }

/* calendar: the full width of the steps, every day listing its offerings */
.mo-cal { border: 1px solid var(--rule); border-radius: 20px; background: var(--card-bg); overflow: hidden; }
.mo-cal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; }
.mo-cal-month { font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--ink); }
.mo-cal-nav { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--rule); border-radius: 50%; color: var(--ink); transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.mo-cal-nav:hover:not(:disabled) { border-color: var(--saffron); background: var(--cream); }
.mo-cal-nav:active:not(:disabled) { transform: scale(.95); }
.mo-cal-nav:disabled { opacity: .3; cursor: default; }
.mo-cal-nav:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
.mo-dow, .mo-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mo-dow { border-top: 1px solid var(--rule); }
.mo-dow span { padding: 10px 6px; text-align: center; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink); }
.mo-dow span + span { border-left: 1px solid var(--rule); }
.mo-cell {
  position: relative; min-width: 0; min-height: 112px; display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 10px;
  border-top: 1px solid var(--rule); text-align: left; color: var(--ink); background: var(--card-bg);
}
.mo-cell:not(:nth-child(7n + 1)) { border-left: 1px solid var(--rule); }
.mo-cell > b { align-self: flex-end; font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); font-variant-numeric: tabular-nums; }
.mo-cell ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mo-cell li { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.mo-cell li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-cell li.dim { opacity: .35; }
button.mo-cell { cursor: pointer; transition: background-color var(--t-hover) ease, box-shadow var(--t-hover) ease; }
button.mo-cell:hover { background: var(--cream); box-shadow: inset 0 0 0 1px var(--saffron); }
button.mo-cell:focus-visible { outline: 2px solid var(--saffron); outline-offset: -2px; }
.mo-cell.today { background: #fdf6dc; }
:root[data-theme="dark"] .mo-cell.today { background: #2b2616; }
.mo-cell.sel, button.mo-cell.sel:hover { background: color-mix(in srgb, var(--btn-primary) 10%, var(--card-bg)); box-shadow: inset 0 0 0 2px var(--btn-primary); }
.mo-cell.sel > b { color: var(--btn-primary); font-weight: 600; }
.mo-cell.off { background: var(--light-green); color: var(--dark-tertiary); }
.mo-cell.off .mo-dot { opacity: .5; }
.mo-cell.off.today { background: #fdf6dc; }
.mo-cell.other { background: var(--light-green-hover); }
.mo-cell.other ul { visibility: hidden; }
.mo-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }
.mo-legend li { display: inline-flex; align-items: center; gap: 7px; }
.mo-legend-sep { padding-left: 18px; border-left: 1px solid var(--rule); }
.mo-key { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--rule); background: var(--card-bg); }
.mo-key-today { border-color: #eadfb0; background: #fdf6dc; }
.mo-key-sel { border: 2px solid var(--btn-primary); }
.mo-key-off { border-color: transparent; background: var(--light-green-active); }

/* times */
.mo-slots { display: flex; flex-direction: column; gap: 16px; }
.mo-slot-row { display: flex; align-items: center; gap: 16px; margin: 0; padding: 14px 18px; border: 1px solid var(--rule); border-radius: 14px; background: var(--card-bg); }
.mo-slot-row legend { float: left; width: 140px; padding: 0; font-family: var(--font-heading); letter-spacing: -0.01em; font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--ink); }
.mo-slot-row legend .mo-dot { margin-right: 10px; vertical-align: 3px; }
.mo-times { display: flex; flex-wrap: wrap; gap: 10px 12px; }
/* each time is a tick box (several can be chosen) */
.mo-time { gap: 10px; padding: 10px 16px 10px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease; }
.mo-time:hover { border-color: var(--saffron); }
.mo-time:has(input:checked) { border-color: var(--btn-primary); background: color-mix(in srgb, var(--btn-primary) 7%, var(--paper)); }
.mo-time b { font-weight: 500; }
.mo-step.invalid .mo-time:not(:has(input:checked)) { border-color: var(--error); }
.mo-empty { padding: 18px; border: 1px dashed var(--rule); border-radius: 14px; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }

.mo-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mo-wide { grid-column: 1 / -1; }

/* summary */
.mo-summary { position: sticky; top: 96px; }
.mo-sum-card { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--rule); border-radius: 20px; background: var(--card-bg); background-image: var(--paper-texture); }
.mo-sum-title { font-family: var(--font-heading); letter-spacing: -0.01em; font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--ink); }
.mo-picked { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }
.mo-picked[hidden] { display: none; }
.mo-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px 4px 12px; border: 1px solid var(--brown); border-radius: 999px; background: var(--card-bg); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--t-hover) ease; }
.mo-chip span { font-size: var(--fs-lg); line-height: 1; color: var(--ink-muted); }
.mo-chip:hover { background: var(--cream); }
.mo-clear { min-height: 32px; padding: 4px 6px; color: var(--brown); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mo-chip:focus-visible, .mo-clear:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
.mo-sum-date { margin-top: -10px; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }
.mo-sum-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.mo-sum-list li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.mo-sum-list li > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.mo-sum-list b { font-weight: 500; }
.mo-sum-list small { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-muted); }
.mo-sum-empty { padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-muted); }
.mo-sum-empty[hidden] { display: none; }
.mo-sum-total { display: flex; align-items: baseline; justify-content: space-between; }
.mo-sum-total span { font-size: var(--fs-ui); color: var(--ink-muted); }
.mo-sum-total strong { font-family: var(--font-heading); letter-spacing: -0.01em; font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--ink); }
.mo-consent { padding: 0; }
.mo-pay { justify-content: center; }
.mo-sum-note { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-muted); }

@media (max-width: 1100px) {
  .mo-layout { grid-template-columns: 1fr; gap: 40px; }
  .mo-summary { position: static; }
  .mo-offerings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .crumbs-bar + .mo-intro { padding-top: 28px; }
  .mo-layout { padding: 32px var(--gutter) 72px; }
  .mo-main { gap: 40px; }
  .mo-offerings { gap: 12px; }
  .mo-off-body { padding: 12px; }
  .mo-off-img { aspect-ratio: 1; }
  .mo-cal-head { padding: 12px; }
  .mo-dow span { padding: 8px 0; font-size: var(--fs-sm); }
  .mo-cell { min-height: 64px; padding: 6px 4px; gap: 6px; }
  .mo-cell > b { align-self: center; font-size: var(--fs-ui); line-height: var(--lh-ui); }
  .mo-cell ul { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 3px; }   /* phones: just the coloured dots */
  .mo-cell li span { display: none; }
  .mo-cell li.dim { display: none; }
  .mo-legend-sep { padding-left: 0; border-left: 0; }
  .mo-slot-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .mo-slot-row legend { width: 100%; }   /* still floated, so it sits inside the box instead of on its border */
  .mo-time { flex: 1 1 100%; }
  .mo-fields { grid-template-columns: 1fr; }
}