/* ============================================================
   SRKTT — Shri Radha Krishna Temple, Telford
   "Shanti" theme — soothing, spiritual, unhurried.
   Palette: ivory paper, warm ink, saffron, temple gold, calm sage.
   ============================================================ */

:root {
  /* light (default) */
  --paper:      #FDFAF4;
  --paper-2:    #F7F1E6;
  --surface:    #FFFDF9;
  --ink:        #241E17;
  --ink-soft:   #5C5245;
  --ink-faint:  #8A7E6C;
  --saffron:    #C0702A;
  --saffron-lt: #E5A055;
  --gold:       #B08C4A;
  --gold-faint: #E6D7B4;
  --sage:       #4B6B5C;
  --lotus:      #A85C72;
  --line:       #E7DCC7;
  --shadow:     0 1px 2px rgba(60,45,20,.05), 0 8px 28px -12px rgba(60,45,20,.16);
  --shadow-lg:  0 2px 6px rgba(60,45,20,.06), 0 24px 60px -20px rgba(60,45,20,.24);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --deva:  "Noto Serif Devanagari", "Nirmala UI", "Kohinoor Devanagari", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --wrap: 1120px;
  --r:    14px;
  --r-lg: 22px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #14120E;
    --paper-2:    #1B1814;
    --surface:    #1E1A15;
    --ink:        #F0E8D9;
    --ink-soft:   #BFB4A1;
    --ink-faint:  #8C8271;
    --saffron:    #E0954B;
    --saffron-lt: #EFB779;
    --gold:       #C9A863;
    --gold-faint: #4A3F2A;
    --sage:       #86AA96;
    --lotus:      #D08FA2;
    --line:       #322C23;
    --shadow:     0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.6);
    --shadow-lg:  0 2px 6px rgba(0,0,0,.45), 0 26px 60px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --paper:#14120E; --paper-2:#1B1814; --surface:#1E1A15;
  --ink:#F0E8D9; --ink-soft:#BFB4A1; --ink-faint:#8C8271;
  --saffron:#E0954B; --saffron-lt:#EFB779; --gold:#C9A863; --gold-faint:#4A3F2A;
  --sage:#86AA96; --lotus:#D08FA2; --line:#322C23;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.6);
  --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 26px 60px -20px rgba(0,0,0,.7);
}
:root[data-theme="light"] {
  --paper:#FDFAF4; --paper-2:#F7F1E6; --surface:#FFFDF9;
  --ink:#241E17; --ink-soft:#5C5245; --ink-faint:#8A7E6C;
  --saffron:#C0702A; --saffron-lt:#E5A055; --gold:#B08C4A; --gold-faint:#E6D7B4;
  --sage:#4B6B5C; --lotus:#A85C72; --line:#E7DCC7;
}

/* ---------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--saffron); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--saffron); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; letter-spacing: .01em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1.1em; }
.deva { font-family: var(--deva); line-height: 1.9; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 780px; }
section { padding: clamp(48px, 7vw, 86px) 0; }
.center { text-align: center; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }

/* eyebrow label */
.eyebrow {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 .8rem;
}

/* om / lotus divider */
.divider { display: flex; align-items: center; gap: 14px; margin: 34px auto; max-width: 320px; color: var(--gold); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-faint), transparent); }
.divider span { font-size: 1.1rem; opacity: .85; }

/* ---------------------------------------------------------- header */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-head { background: var(--paper); }
}
.head-in { display: flex; align-items: center; gap: 18px; height: 68px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; margin-right: auto; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 38px; height: 38px; flex: none; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand-txt b { font-family: var(--serif); font-size: 1.13rem; font-weight: 600; letter-spacing: .01em; }
.brand-txt small { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); }

.nav { display: flex; align-items: center; gap: 4px; }
/* :not(.btn) matters — `.nav a` is more specific than `.btn-primary`, so without
   it the nav link colour overrides the Donate button's own label colour. */
.nav a:not(.btn) {
  color: var(--ink-soft); font-size: .92rem; font-weight: 500;
  padding: 8px 13px; border-radius: 999px; transition: background .18s, color .18s;
}
.nav a:not(.btn):hover { background: var(--paper-2); color: var(--ink); text-decoration: none; }
.nav a:not(.btn)[aria-current="page"] { color: var(--saffron); background: color-mix(in srgb, var(--saffron) 10%, transparent); }

.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  font-family: var(--sans); font-size: .93rem; font-weight: 600;
  padding: 11px 22px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .16s, box-shadow .2s, background .2s;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
/* Primary button: the saffron gradient is light, so text colour has to flip per
   theme or it fails contrast. Light theme = darker gradient + white text;
   dark theme = light gradient + dark ink. */
.btn-primary { background: linear-gradient(135deg, #A85F22, var(--saffron)); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { box-shadow: var(--shadow-lg); }
@media (prefers-color-scheme: dark) {
  .btn-primary { background: linear-gradient(135deg, var(--saffron), var(--saffron-lt)); color: #1C1608; }
}
:root[data-theme="dark"] .btn-primary { background: linear-gradient(135deg, var(--saffron), var(--saffron-lt)); color: #1C1608; }
:root[data-theme="light"] .btn-primary { background: linear-gradient(135deg, #A85F22, #C0702A); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--paper-2); border-color: var(--gold-faint); }
.btn-sm { padding: 7px 15px; font-size: .84rem; }

.icon-btn {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 999px; border: 1px solid var(--line); background: transparent;
  color: var(--ink-soft); cursor: pointer; transition: background .18s, color .18s;
}
.icon-btn:hover { background: var(--paper-2); color: var(--ink); }
.nav-toggle { display: none; }

@media (max-width: 860px) {
  .nav {
    position: fixed; inset: calc(68px + env(safe-area-inset-top, 0px)) 0 auto; flex-direction: column; align-items: stretch;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 12px 18px 20px; gap: 2px; box-shadow: var(--shadow-lg);
    transform: translateY(-12px); opacity: 0; pointer-events: none; transition: .2s;
  }
  .nav.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: 12px 14px; border-radius: var(--r); font-size: 1rem; }
  .nav-toggle { display: grid; }
  .nav .btn { margin-top: 8px; }
}

/* ---------------------------------------------------------- hero */
.hero { position: relative; padding: clamp(56px, 9vw, 118px) 0 clamp(40px, 6vw, 72px); text-align: center; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -30% 50% auto; width: 900px; height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--saffron) 13%, transparent), transparent 62%);
  pointer-events: none;
}
.hero-mandala {
  position: absolute; top: 50%; left: 50%; width: min(660px, 118vw);
  transform: translate(-50%, -52%); opacity: .1; color: var(--gold);
  pointer-events: none; animation: breathe 22s ease-in-out infinite;
}
@keyframes breathe { 0%,100% { transform: translate(-50%,-52%) scale(1) rotate(0deg); } 50% { transform: translate(-50%,-52%) scale(1.05) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .hero-mandala { animation: none; } }
/* keep this as .wrap, not `.hero > *` — a universal selector here has the same
   specificity as .hero-mandala and would cancel its absolute positioning,
   dropping the mandala into the flow and pushing the hero text off-screen. */
.hero > .wrap { position: relative; z-index: 1; }
.hero h1 { margin-bottom: .3em; }
.hero .deva-title { font-family: var(--deva); font-size: clamp(1.15rem, 3vw, 1.7rem); color: var(--saffron); margin-bottom: .9rem; }
.hero-lede { font-size: clamp(1.02rem, 2vw, 1.16rem); color: var(--ink-soft); max-width: 620px; margin: 0 auto 1.9rem; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* mantra band */
.mantra {
  background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 34px 0; text-align: center;
}
.mantra .deva { font-size: clamp(1.05rem, 2.4vw, 1.42rem); color: var(--ink); margin: 0 0 .45rem; }
.mantra .tr { font-size: .87rem; color: var(--ink-faint); font-style: italic; margin: 0; }

/* ---------------------------------------------------------- cards */
/* The min() is load-bearing, not decoration. A bare minmax(290px, 1fr) never
   goes below 290px, so on a 320px phone — or any grid nested inside a padded
   card — the column stays wider than the space it has and the whole page
   scrolls sideways. min(290px, 100%) lets the track give way when it must. */
.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px; box-shadow: var(--shadow); transition: transform .2s, box-shadow .25s, border-color .2s;
}
.card-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--gold-faint); text-decoration: none; }
.card h3 { margin-bottom: .35em; color: var(--ink); }
.card p:last-child { margin-bottom: 0; }
.card-ico {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--saffron) 12%, transparent); color: var(--saffron);
  margin-bottom: 16px; font-size: 1.25rem;
}

/* timings */
.timings { display: grid; gap: 14px; }
.tgrp { padding: 12px 14px; border-radius: 12px; background: var(--paper-2); }
.tgrp.today {
  background: color-mix(in srgb, var(--saffron) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--saffron) 30%, transparent);
}
.tgroup {
  margin: 0 0 8px; font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--saffron);
  display: flex; align-items: center; gap: 8px;
}
.trow {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 5px 2px; font-size: .93rem;
}
.trow b { font-weight: 600; }
.trow span { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 420px) {
  .trow { flex-wrap: wrap; column-gap: 10px; row-gap: 0; }
}
.trow b { min-width: 96px; font-weight: 600; }
.trow span { margin-left: auto; color: var(--ink-soft); text-align: right; }
.trow.today span, .trow.today b { color: var(--ink); }
.badge-today {
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: var(--saffron); color: #fff; padding: 2px 8px; border-radius: 999px;
}

/* ---------------------------------------------------------- reader (aarti / gita) */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 26px; }
.search {
  flex: 1 1 240px; min-width: 0; display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 16px;
}
.search input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: .95rem; padding: 11px 0;
}
.search input:focus { outline: none; }
.search svg { color: var(--ink-faint); flex: none; }

.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  font-family: var(--sans); font-size: .82rem; font-weight: 500;
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft);
  transition: .18s;
}
.chip:hover { border-color: var(--gold-faint); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--saffron); border-color: var(--saffron); color: #fff; }

.verse-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  margin-bottom: 16px; overflow: hidden; box-shadow: var(--shadow);
}
.verse-head {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 20px 24px; background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--ink); text-align: left;
}
.verse-head:hover { background: var(--paper-2); }
.verse-head h3 { margin: 0 0 2px; font-size: 1.12rem; }
.verse-head .deva { font-family: var(--deva); font-size: .95rem; color: var(--ink-soft); }
.verse-head .cat {
  font-size: .64rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold-faint); padding: 3px 9px; border-radius: 999px; flex: none;
}
.verse-head .caret { margin-left: auto; flex: none; color: var(--ink-faint); transition: transform .22s; }
.verse-card.open .caret { transform: rotate(180deg); }
.verse-body { display: none; padding: 4px 24px 26px; border-top: 1px solid var(--line); }
.verse-card.open .verse-body { display: block; }

/* ------------------------------------------------------------ verses
   --read is the reader's chosen text size (1 to 1.66), set on <html> and
   remembered. Everything that is read scales from it; nothing else does. */
:root { --read: 1; }
.stanza { padding: 18px 0; border-bottom: 1px dashed var(--line); }
.stanza:last-child { border-bottom: 0; padding-bottom: 0; }

/* A line, then the same line in English letters, as one unit. The roman line is
   upright and in ink-soft: italic ink-faint measured 3.8:1 on the light theme,
   below the 4.5 accessibility minimum, and italics are the hardest thing for
   older eyes to read with diacritics on them. ink-soft is 7.3:1. */
.ln { margin: 0 0 1.3em; }
.ln:last-child { margin-bottom: 0; }
.ln .sa {
  display: block; font-family: var(--deva); color: var(--ink);
  font-size: calc(1.22rem * var(--read)); line-height: 1.72;
}
.ln .tr {
  display: block; color: var(--ink-soft); letter-spacing: .005em;
  font-size: calc(.98rem * var(--read)); line-height: 1.55; margin-top: .1em;
}
/* At the largest size on a small phone a long compound (balabhadrasubhadrābhyāṃ)
   is wider than the screen; let it break rather than run off the edge. */
.ln .sa, .ln .tr, .stanza .hi, .stanza .en, .seq-title h3, .verse-head h3 { overflow-wrap: break-word; }
/* one script only: it becomes the main text, at the main size */
body.hide-hi .ln .tr { color: var(--ink); font-size: calc(1.14rem * var(--read)); margin-top: 0; }
body.hide-tr .ln .tr,
body.hide-hi .ln .sa { display: none; }

/* the grouped fallback, for the few Gita stanzas whose lines do not pair */
.stanza .hi { font-family: var(--deva); font-size: calc(1.2rem * var(--read)); line-height: 1.9; color: var(--ink); margin: 0 0 .55rem; }
.stanza .en { font-size: calc(.96rem * var(--read)); line-height: 1.7; color: var(--ink-soft); margin: 0; }
body.hide-tr .stanza .en { display: none; }
body.hide-hi .stanza .hi { display: none; }

/* ---------------------------------------------------------- timeline */
.timeline { list-style: none; margin: 0; padding: 0 0 0 34px; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(180deg, var(--gold-faint), var(--line) 60%, transparent);
}
.tl-item { position: relative; padding: 0 0 26px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute; left: -34px; top: 20px; width: 20px; height: 20px; border-radius: 999px;
  display: grid; place-items: center; font-size: .68rem;
  background: var(--surface); border: 2px solid var(--gold-faint); z-index: 1;
}
.tl-item.is-upcoming .tl-dot { border-color: var(--saffron); box-shadow: 0 0 0 4px color-mix(in srgb, var(--saffron) 16%, transparent); }
.tl-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 24px; box-shadow: var(--shadow); transition: border-color .2s, transform .2s;
}
.tl-card:hover { border-color: var(--gold-faint); transform: translateX(2px); }
.tl-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: .5em; }
.tl-head h3 { margin: 0; font-size: 1.22rem; }
.tl-date {
  font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold);
}
.tl-status {
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; margin-left: auto;
}
.st-upcoming { background: var(--saffron); color: #fff; }
.st-past     { background: var(--paper-2); color: var(--ink-faint); border: 1px solid var(--line); }
.st-annual, .st-ongoing, .st-weekly {
  background: color-mix(in srgb, var(--sage) 16%, transparent); color: var(--sage);
}
.tl-card p { margin: 0 0 .9em; color: var(--ink-soft); font-size: .96rem; }
.tl-details { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tl-details li {
  font-size: .89rem; color: var(--ink-soft); padding-left: 18px; position: relative;
}
.tl-details li::before {
  content: "❖"; position: absolute; left: 0; top: -1px; color: var(--gold); font-size: .68rem;
}

/* ---------------------------------------------------------- map */
.map-wrap {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow); background: var(--paper-2); line-height: 0;
}
.map-wrap iframe { width: 100%; height: clamp(300px, 46vw, 460px); border: 0; display: block; }
@media (prefers-color-scheme: dark) { .map-wrap iframe { filter: saturate(.75) brightness(.86) contrast(1.05); } }
:root[data-theme="dark"] .map-wrap iframe { filter: saturate(.75) brightness(.86) contrast(1.05); }
:root[data-theme="light"] .map-wrap iframe { filter: none; }

/* ---------------------------------------------------------- gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(215px, 100%), 1fr)); gap: 12px; }
.gitem {
  position: relative; border: 0; padding: 0; background: var(--paper-2); cursor: zoom-in;
  border-radius: var(--r); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow);
}
.gitem img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gitem:hover img { transform: scale(1.06); }

.lightbox {
  position: fixed; inset: 0; z-index: 90; display: none;
  background: rgba(14,11,8,.93); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 22px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 94vw; max-height: 86vh; border-radius: 10px; box-shadow: 0 30px 90px rgba(0,0,0,.6); }
.lb-close, .lb-prev, .lb-next {
  position: absolute; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  color: #fff; width: 46px; height: 46px; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; font-size: 1.1rem;
}
.lb-close { top: 20px; right: 20px; }
.lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.22); }

/* ---------------------------------------------------------- donate */
.gift-aid {
  background: linear-gradient(135deg, color-mix(in srgb, var(--sage) 12%, transparent), color-mix(in srgb, var(--gold) 9%, transparent));
  border: 1px solid var(--gold-faint); border-radius: var(--r-lg); padding: 26px;
}
.gift-aid .big { font-family: var(--serif); font-size: 2.4rem; color: var(--sage); line-height: 1; margin: 0 0 .2em; }
.amounts { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 8px; }
.amount {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 600;
  padding: 13px 24px; border-radius: var(--r); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); transition: .18s;
}
.amount:hover { border-color: var(--saffron); color: var(--saffron); }
.amount[aria-pressed="true"] { background: var(--saffron); border-color: var(--saffron); color: #fff; }

.note {
  background: var(--paper-2); border-left: 3px solid var(--gold);
  border-radius: 0 var(--r) var(--r) 0; padding: 15px 19px; font-size: .9rem; color: var(--ink-soft);
}
.note strong { color: var(--ink); }

/* ---------------------------------------------------------- footer */
.site-foot { background: var(--paper-2); border-top: 1px solid var(--line); padding: 52px 0 30px; margin-top: 40px; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 34px; margin-bottom: 34px; }
.foot-grid h4 { font-family: var(--sans); font-size: .74rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); margin-bottom: 1em; }
.foot-grid a, .foot-grid p { display: block; color: var(--ink-soft); font-size: .92rem; margin: 0 0 .55em; }
.foot-grid a:hover { color: var(--saffron); }
.foot-bar {
  border-top: 1px solid var(--line); padding-top: 22px; display: flex; gap: 14px;
  flex-wrap: wrap; align-items: center; justify-content: space-between;
  font-size: .82rem; color: var(--ink-faint);
}

/* utilities */
.stack > * + * { margin-top: 14px; }
.pill {
  display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 600;
  background: color-mix(in srgb, var(--sage) 14%, transparent); color: var(--sage);
  padding: 5px 13px; border-radius: 999px;
}
.tag-free { background: color-mix(in srgb, var(--sage) 15%, transparent); color: var(--sage); }
[hidden] { display: none !important; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.empty { text-align: center; padding: 56px 20px; color: var(--ink-faint); }

/* install prompt */
.install {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(140%);
  z-index: 70; display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 12px 10px 20px; box-shadow: var(--shadow-lg);
  transition: transform .35s cubic-bezier(.2,.8,.2,1); max-width: calc(100vw - 32px);
}
.install.show { transform: translateX(-50%); }
.install p { margin: 0; font-size: .88rem; }

/* ---------------------------------------------------------- ambient audio btn */
.icon-btn.audio-on {
  background: color-mix(in srgb, var(--saffron) 16%, transparent);
  border-color: var(--saffron); color: var(--saffron);
}
.icon-btn.audio-on svg { animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .icon-btn.audio-on svg { animation: none; } }

/* ============================================================
   Custom icon set (assets/icons/sprite.svg)
   ============================================================ */
.ico { width: 1.35em; height: 1.35em; display: block; color: inherit; }
.card-ico .ico { width: 24px; height: 24px; }
.icon-btn .ico { width: 18px; height: 18px; }
.tl-dot .ico { width: 12px; height: 12px; }

/* ============================================================
   Events: view switcher, calendar view
   ============================================================ */
.viewbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 26px; padding: 6px; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--line); width: fit-content;
}
.viewbar button {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: .88rem; font-weight: 600; color: var(--ink-soft);
  background: none; border: 0; padding: 9px 18px; border-radius: 999px;
  cursor: pointer; transition: .18s;
}
.viewbar button:hover { color: var(--ink); }
.viewbar button[aria-pressed="true"] { background: var(--surface); color: var(--saffron); box-shadow: var(--shadow); }

/* ============================================================
   Visit: at-a-glance strip + landmark block
   ============================================================ */
.atglance {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  padding: 18px 20px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.ag-item { display: flex; gap: 12px; align-items: center; flex: 1 1 200px; min-width: 0; }
.ag-item .ico { width: 26px; height: 26px; color: var(--saffron); flex: none; }
.ag-item div { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.ag-item b { font-size: .98rem; }
.ag-item span { font-size: .86rem; color: var(--ink-faint); }
.atglance .btn { flex: 0 0 auto; }

.landmark { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 22px; align-items: start; }
.landmark-photo {
  border-radius: var(--r); overflow: hidden; background: var(--paper-2);
  border: 1px dashed var(--gold-faint); display: grid; place-items: center; min-height: 170px;
}
.landmark-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.landmark-photo.has-photo { border-style: solid; }
@media (max-width: 720px) {
  .landmark { grid-template-columns: 1fr; }
  .atglance { padding: 16px; }
  .atglance .btn { flex: 1 1 100%; }
}

/* ============================================================
   Calendar — the shape a phone calendar has, because that is the
   one everybody already knows how to read.

   Numbers in a grid, a coloured dot under a day that has something
   on, today filled in. Detail appears underneath on tap rather than
   being crammed into a 60px cell.
   ============================================================ */
.cal { display: block; }

.calbar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.calbar-now {
  font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--ink);
}
.calnav {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); cursor: pointer; transition: .18s;
}
.calnav:hover { border-color: var(--saffron); color: var(--saffron); }
.calnav svg { width: 18px; height: 18px; }
.calnav-today {
  width: auto; margin-left: auto; padding: 0 15px; font-family: var(--sans);
  font-size: .8rem; font-weight: 600;
}

.calnote {
  display: flex; align-items: center; gap: 8px; margin: 0 0 16px;
  font-size: .88rem; color: var(--ink-soft);
}
.calnote b { color: var(--ink); }

.cmonths { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cmonth {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px 14px 12px; box-shadow: var(--shadow);
}
.cmonth h3 {
  margin: 0 0 10px; font-size: 1rem; text-align: center;
  font-family: var(--serif); font-weight: 600;
}
.cgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.cdow {
  font-family: var(--sans); font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-faint); text-align: center; padding-bottom: 6px;
}

/* A day cell. Tall enough to carry the names of what is on, because a dot
   tells you something is happening and not what. */
.cday {
  position: relative; min-height: 82px; padding: 5px 4px 4px;
  display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  font-family: var(--sans); font-size: .78rem; color: var(--ink-soft);
  border-radius: 8px; border: 1px solid transparent; text-align: left;
  /* Grid items are min-width:auto by default, so a long name like "Krishna
     Janmashtami" widens its own column and shunts the week sideways. The
     ellipsis in .cchip only works once the cell is allowed to be narrow. */
  min-width: 0; overflow: hidden;
}
.cday.is-pad { visibility: hidden; }
.cday.is-today { background: color-mix(in srgb, var(--saffron) 9%, transparent); }
.cnum { font-weight: 600; line-height: 1; padding: 2px 3px; }
.cday.is-today .cnum {
  background: var(--saffron); color: #fff; border-radius: 999px;
  width: 21px; height: 21px; display: grid; place-items: center;
  font-size: .72rem; padding: 0;
}

/* the names, in the cell */
.cchips { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; }
.cchip {
  /* Two lines rather than one: a 70px column ellipsised "Krishna Janmashtami"
     down to "Krishna…", which is not much use on a calendar. Two lines carry
     most names whole and the cell has the height for it. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  font-size: .62rem; font-weight: 600; line-height: 1.2;
  padding: 2px 5px; border-radius: 4px;
  overflow: hidden; max-width: 100%; word-break: break-word;
  border-left: 2px solid currentColor;
}
.cchip.major    { color: var(--saffron); background: color-mix(in srgb, var(--saffron) 14%, transparent); }
.cchip.minor    { color: var(--gold);    background: color-mix(in srgb, var(--gold) 16%, transparent); }
.cchip.ekadashi { color: var(--lotus);   background: color-mix(in srgb, var(--lotus) 13%, transparent); }
.cchip.event    { color: var(--sage);    background: color-mix(in srgb, var(--sage) 15%, transparent); }
.cmore { font-size: .6rem; color: var(--ink-faint); padding-left: 5px; }

.cdots { display: none; gap: 2px; height: 5px; align-items: center; padding-left: 3px; }
.cdot { width: 5px; height: 5px; border-radius: 999px; display: inline-block; flex: none; }
.cdot.major    { background: var(--saffron); }
.cdot.minor    { background: var(--gold); }
.cdot.ekadashi { background: var(--lotus); }
.cdot.event    { background: var(--sage); }
.cdot.aarti    { background: color-mix(in srgb, var(--sage) 70%, var(--ink-faint)); }

/* Below the grid, the same month written out. On a phone a column is about
   45px — four letters — so this is where the names actually live down there. */
.cagenda { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line);
           display: none; gap: 8px; }
.cag { display: flex; gap: 11px; align-items: baseline; font-size: .86rem; }
.cag-d {
  flex: 0 0 62px; font-family: var(--sans); font-size: .72rem; font-weight: 600;
  color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em;
}
.cag-t { display: grid; gap: 2px; min-width: 0; }
.cag-t b { font-weight: 600; font-size: .9rem; }
.cag-t b.major { color: var(--saffron); }
.cag-t b.minor { color: var(--gold); }
.cag-t b.ekadashi { color: var(--lotus); }
.cag-t b.event { color: var(--sage); }

.ckey {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0;
  font-size: .78rem; color: var(--ink-faint);
}
.ckey span { display: inline-flex; align-items: center; gap: 6px; }

/* Where the names fit, they go in the cells; where they cannot, the grid falls
   back to dots and the month's agenda underneath carries the words.
   "Where they fit" is not a single breakpoint, because the months stack into
   one column at 760px and the columns get WIDER as the window gets narrower:
     901px+      two columns, ~70px each   names
     761-900px   two columns, ~53px each   too narrow
     501-760px   one column, ~62-100px     names again
     under 500   one column, too narrow                                     */
@media (min-width: 761px) and (max-width: 900px) {
  .cchips { display: none; }
  .cdots { display: flex; }
  .cday { min-height: 44px; }
  .cagenda { display: grid; }
}
@media (max-width: 500px) {
  .cchips { display: none; }
  .cdots { display: flex; }
  .cday { min-height: 44px; }
  .cagenda { display: grid; }
}
@media (max-width: 760px) {
  .cmonths { grid-template-columns: 1fr; gap: 16px; }
  .calbar { gap: 8px; }
  .calbar-now { font-size: 1rem; flex: 1; min-width: 0; }
  .calnav { width: 34px; height: 34px; }
  .calnav-today { width: auto; padding: 0 12px; font-size: .76rem; }
  .cday { font-size: .8rem; }
  .cag-d { flex-basis: 56px; }
}

/* ============================================================
   Follow-along aarti sequence
   ============================================================ */
.seq-cta {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  padding: 20px 22px; margin: 0 0 26px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--saffron) 12%, transparent),
                                       color-mix(in srgb, var(--gold) 8%, transparent));
  border: 1px solid var(--gold-faint); border-radius: var(--r-lg);
}
.seq-cta p { margin: 0; flex: 1 1 260px; font-size: .95rem; color: var(--ink-soft); }
.seq-cta b { color: var(--ink); }

.seq {
  position: fixed; inset: 0; z-index: 95; display: none;
  background: var(--paper); flex-direction: column;
}
.seq.open { display: flex; }
.seq-top {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--line); background: var(--paper-2); flex: none;
}
.seq-top .icon-btn { width: 46px; height: 46px; flex: none; }
.seq-aa { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; color: var(--ink); }
.seq-aa[aria-expanded="true"] { background: var(--saffron); border-color: var(--saffron); color: #fff; }
.seq-prog { flex: 1; min-width: 0; }
.seq-where { margin: 0 0 7px; font-size: .86rem; color: var(--ink-soft); text-align: center;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seq-where .step { font-weight: 700; color: var(--ink); }
.seq-where .seq-which { color: var(--ink-soft); font-weight: 400; }
/* A bar, not twenty-four dots: the dots wrapped onto a second row on a phone
   and sat on top of the last lines of the English meaning. */
.seq-bar { height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; }
.seq-bar i { display: block; height: 100%; width: 0; background: var(--saffron);
             border-radius: inherit; transition: width .3s ease; }

.seq-sheet {
  flex: none; padding: 16px 18px 12px; background: var(--paper-2);
  border-bottom: 1px solid var(--line); max-width: 100%;
}
.seq-sheet .rd { max-width: 560px; margin: 0 auto; }
.seq-sheet > .rd-row { max-width: 560px; margin: 12px auto 0; }
.seq-sheet-foot { max-width: 560px; margin: 12px auto 0; text-align: center; font-size: .9rem; }

.seq-body { flex: 1; overflow-y: auto; padding: 26px 22px 170px; -webkit-overflow-scrolling: touch; outline: none; }
.seq-body > * { max-width: 680px; margin-left: auto; margin-right: auto; }
.seq-body .ln .sa { font-size: calc(1.55rem * var(--read)); line-height: 1.7; }
.seq-body .ln .tr { font-size: calc(1.08rem * var(--read)); }
body.hide-hi .seq-body .ln .tr { font-size: calc(1.3rem * var(--read)); }
.seq-body .ln { margin-bottom: 1.35em; }
.seq-body .stanza .hi { font-size: calc(1.5rem * var(--read)); line-height: 2; }
.seq-body .stanza .en { font-size: calc(1.04rem * var(--read)); }
.seq-title { text-align: center; margin: 0 auto 18px; }
.seq-cat { margin: 0 0 .35em; font-size: .72rem; font-weight: 700; letter-spacing: .14em;
           text-transform: uppercase; color: var(--gold); }
.seq-title h3 { margin: 0; font-size: calc(1.5rem * min(var(--read), 1.3)); line-height: 1.25; }
.seq-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 96;
  display: flex; gap: 10px; align-items: center; padding: 14px 18px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(12px); border-top: 1px solid var(--line);
}
.seq-nav { flex-direction: column; align-items: stretch; gap: 8px; }
.seq-upnext { margin: 0; text-align: center; font-size: .88rem; color: var(--ink-soft);
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seq-btns { display: flex; gap: 10px; }
.seq-btns .btn { flex: 1; min-height: 56px; padding: 15px 18px; font-size: 1.05rem; }
.seq-btns [data-seq-next] { flex: 1.6; }
.seq-btns .btn:disabled { opacity: .38; }

/* ============================================================
   Bank / transfer details
   ============================================================ */
.bank { display: grid; gap: 1px; margin: 16px 0 0; border-radius: var(--r); overflow: hidden; }
.bank div { display: flex; gap: 14px; align-items: baseline; padding: 13px 16px; background: var(--paper-2); }
.bank div:nth-child(odd) { background: var(--surface); }
.bank dt, .bank .k { font-size: .8rem; color: var(--ink-faint); min-width: 118px; font-weight: 600;
                     letter-spacing: .04em; text-transform: uppercase; }
.bank .v { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; color: var(--ink);
           letter-spacing: .03em; margin-left: auto; text-align: right; }
.copy-btn {
  font: inherit; font-size: .74rem; font-weight: 600; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--ink-soft);
  padding: 4px 10px; border-radius: 999px; margin-left: 10px; flex: none;
}
.copy-btn:hover { border-color: var(--saffron); color: var(--saffron); }
.copy-btn.done { background: var(--sage); border-color: var(--sage); color: #fff; }

/* ============================================================
   QR
   ============================================================ */
.qr-card { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.qr-card img {
  width: 172px; height: 172px; flex: none; border-radius: var(--r);
  background: #FDFAF4; padding: 10px; border: 1px solid var(--line);
}

/* ============================================================
   Mobile polish — everything above 360px must be comfortable
   ============================================================ */
@media (max-width: 620px) {
  body { font-size: 16px; }
  section { padding: 38px 0; }
  .wrap { padding: 0 16px; }
  .card { padding: 20px; border-radius: 16px; }
  h1 { font-size: clamp(1.85rem, 8vw, 2.4rem); }
  .hero { padding: 40px 0 32px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .grid { gap: 14px; }
  .timeline { padding-left: 28px; }
  .tl-dot { left: -28px; width: 18px; height: 18px; }
  .tl-card { padding: 18px; }
  .tl-status { margin-left: 0; }
  .tl-head { gap: 8px; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 8px; }
  .verse-head { padding: 16px 18px; gap: 10px; }
  .verse-head .cat { display: none; }
  .verse-body { padding: 4px 18px 22px; }
  .toolbar { gap: 8px; }
  .chips { gap: 6px; }
  .chip { padding: 7px 12px; font-size: .78rem; }
  .foot-grid { gap: 24px; }
  .bank .k { min-width: 0; }
  .bank div { flex-wrap: wrap; gap: 6px; }
  .bank .v { margin-left: 0; text-align: left; width: 100%; }
  .amounts { gap: 8px; }
  .amount { flex: 1 1 40%; padding: 14px 10px; }
  .map-wrap iframe { height: 280px; }
  .qr-card img { width: 140px; height: 140px; }
  .lb-prev, .lb-next { width: 40px; height: 40px; }
}
/* tap targets: nothing interactive under 44px on touch devices */
@media (hover: none) {
  .btn, .chip, .icon-btn, .amount, .copy-btn { min-height: 44px; }
  .copy-btn { min-height: 36px; }
  .verse-head { min-height: 56px; }
}

/* ============================================================
   English meaning under the verses
   ============================================================ */
.meaning {
  margin-top: 18px; padding: 16px 18px; border-radius: var(--r);
  background: color-mix(in srgb, var(--sage) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--sage) 22%, transparent);
}
.meaning h4 {
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--sage);
  margin: 0 0 .55em;
}
.meaning p { margin: 0; font-size: .95rem; line-height: 1.75; color: var(--ink-soft); }
body.hide-en .meaning { display: none; }
.meaning p { font-size: calc(.97rem * var(--read)); }



/* ============================================================
   Social
   ============================================================ */
.social { display: flex; gap: 10px; margin-top: 4px; }
.social a {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-soft); transition: .18s;
}
.social a:hover { border-color: var(--saffron); color: var(--saffron); text-decoration: none; }
.social svg { width: 18px; height: 18px; }

/* ============================================================
   Upcoming festivals (home page) — auto-selected from today
   ============================================================ */
.upcoming { display: grid; gap: 10px; }
.up-item {
  display: flex; align-items: center; gap: 16px; padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); transition: border-color .2s;
}
.up-item:hover { border-color: var(--gold-faint); }
.up-item.major { background: linear-gradient(135deg, color-mix(in srgb, var(--saffron) 8%, var(--surface)), var(--surface)); }
.up-date {
  flex: none; width: 52px; text-align: center; line-height: 1;
  padding: 8px 0; border-radius: 11px; background: var(--paper-2);
}
.up-item.major .up-date { background: color-mix(in srgb, var(--saffron) 16%, transparent); }
.up-date b { display: block; font-family: var(--serif); font-size: 1.42rem; color: var(--ink); }
.up-date span {
  display: block; font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: 3px;
}
.up-item.major .up-date span { color: var(--saffron); }
.up-body { flex: 1; min-width: 0; }
.up-body h3 { margin: 0 0 1px; font-size: 1.06rem; }
.up-body p { margin: 0; font-size: .82rem; }
.up-ico { width: 22px; height: 22px; flex: none; color: var(--gold); opacity: .8; }

/* festival pills in the calendar */
.cal-ev.fest {
  background: color-mix(in srgb, var(--lotus) 15%, transparent); color: var(--lotus);
  border-color: color-mix(in srgb, var(--lotus) 30%, transparent);
}
.cal-ev.fest.major { font-weight: 700; background: color-mix(in srgb, var(--lotus) 24%, transparent); }

/* swipe feedback in follow-along */
.seq-body { transition: transform .22s ease, opacity .22s ease; }
.seq.swipe-next .seq-body { transform: translateX(-14px); opacity: .55; }
.seq.swipe-prev .seq-body { transform: translateX(14px);  opacity: .55; }
.seq-hint {
  flex: none; margin: 0; padding: 10px 18px; text-align: center; font-size: .9rem;
  color: var(--ink-soft); background: color-mix(in srgb, var(--saffron) 10%, var(--paper));
  border-bottom: 1px solid var(--line);
}
@media (prefers-reduced-motion: reduce) {
  .seq-body, .seq-bar i { transition: none; }
  .seq.swipe-next .seq-body, .seq.swipe-prev .seq-body { transform: none; }
}

/* ============================================================
   Videos — YouTube thumbnails, iframe only after a click
   ============================================================ */
.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.videos iframe {
  width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--r);
  box-shadow: var(--shadow); display: block; background: #000;
}
.vid {
  position: relative; display: block; width: 100%; padding: 0; cursor: pointer;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow);
  text-align: left; font: inherit; color: inherit; transition: border-color .2s, transform .2s;
}
.vid:hover { border-color: var(--gold-faint); transform: translateY(-2px); }
.vid img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.vid-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 999px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--saffron) 88%, transparent); color: #fff;
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
}
.vid-play .ico { width: 26px; height: 26px; }
.vid-cap {
  display: block; padding: 12px 14px; font-size: .92rem; font-weight: 600; color: var(--ink);
}
.vid-cap i { font-style: normal; font-weight: 400; font-size: .82rem; }

/* ============================================================
   MOBILE: app-style bottom bar + Follow action button

   The header icons were only reachable behind the hamburger, which hid the
   one control people need while actually standing in the mandir. On phones the
   navigation now lives at the bottom, in the thumb zone, exactly like the
   follow-along nav — and Follow gets its own floating button.
   Desktop is untouched.
   ============================================================ */
.tabbar, .fab { display: none; }

@media (max-width: 860px) {
  /* the hamburger and its drawer are no longer needed */
  .nav-toggle { display: none !important; }
  .nav {
    position: static; inset: auto; flex-direction: row; align-items: center;
    background: none; border: 0; padding: 0; box-shadow: none;
    transform: none; opacity: 1; pointer-events: auto; gap: 6px;
  }
  /* in the header keep only the controls: page links moved to the bottom bar */
  .nav > a:not(.btn):not(.icon-btn) { display: none; }
  .nav .btn-sm { padding: 8px 16px; }
  .head-in { gap: 10px; height: 60px; }
  .brand-txt b { font-size: 1rem; }
  .brand-txt small { font-size: .6rem; letter-spacing: .1em; }
  .brand-mark { width: 32px; height: 32px; }

  /* room for the bar, plus the iPhone home indicator */
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }

  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    backdrop-filter: blur(16px) saturate(1.3);
    border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 24px -12px rgba(0,0,0,.28);
  }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 7px 2px; border-radius: 12px; min-width: 0;
    color: var(--ink-faint); text-decoration: none; transition: color .16s, background .16s;
  }
  .tabbar a:hover, .tabbar a:active { text-decoration: none; background: var(--paper-2); }
  .tabbar a span {
    font-size: .64rem; font-weight: 600; letter-spacing: .02em;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .tabbar .ico { width: 22px; height: 22px; }
  .tabbar a[aria-current="page"] { color: var(--saffron); }
  .tabbar a[aria-current="page"] .ico { transform: scale(1.06); }

  /* Follow: the one action worth a floating button */
  .fab {
    display: flex; position: fixed; right: 16px; z-index: 61;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    width: 62px; height: 62px; border-radius: 999px; border: 0; cursor: pointer;
    background: linear-gradient(135deg, #A85F22, var(--saffron)); color: #fff;
    box-shadow: 0 8px 26px -6px rgba(120,70,20,.55), 0 2px 6px rgba(0,0,0,.2);
    font: inherit; text-decoration: none;
  }
  .fab:hover, .fab:active { text-decoration: none; transform: scale(.97); }
  .fab .ico { width: 24px; height: 24px; }
  .fab span { font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .fab[disabled] { opacity: 1; }         /* stays visible while the book loads */
  @media (prefers-color-scheme: dark) {
    .fab { background: linear-gradient(135deg, var(--saffron), var(--saffron-lt)); color: #1C1608; }
  }
  :root[data-theme="dark"] .fab { background: linear-gradient(135deg, var(--saffron), var(--saffron-lt)); color: #1C1608; }
  :root[data-theme="light"] .fab { background: linear-gradient(135deg, #A85F22, #C0702A); color: #fff; }

  /* the follow-along overlay owns the screen: hide the bar behind it */
  body.seq-open .tabbar, body.seq-open .fab { display: none; }
  /* and its own nav clears the home indicator */
  .seq-nav { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }

  /* footer never sits under the bar */
  .site-foot { padding-bottom: 34px; }
}

/* larger phones/tablets: labels have room, so relax the squeeze */
@media (min-width: 500px) and (max-width: 860px) {
  .tabbar a span { font-size: .7rem; }
  .tabbar { padding-left: 12px; padding-right: 12px; }
}

/* ============================================================
   FIX: brand overlapping the header controls on narrow screens

   "Shri Radha Krishna Mandir" wrapped onto three lines and collided with the
   icon buttons. The brand now truncates instead of wrapping, and on the
   narrowest phones only the mark is shown.
   ============================================================ */
.brand { min-width: 0; }
.brand-txt { min-width: 0; }
.brand-txt b, .brand-txt small {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%;
}

@media (max-width: 860px) {
  .head-in { gap: 8px; }
  .brand { gap: 9px; flex: 1 1 auto; }
  .brand-txt b { font-size: .95rem; }
  .brand-txt small { font-size: .56rem; }
  .nav { flex: none; }
}
/* The search button is a third icon in a row that was already tight, and on a
   360px phone it pushed the mandir's name back into truncating. The theme
   toggle goes instead: prefers-color-scheme already picks the right one from
   the phone's own setting, so it is the only control here that is genuinely
   redundant. The name is not. */
@media (max-width: 380px) {
  .nav [data-theme-toggle] { display: none; }
}
@media (max-width: 360px) {
  /* the name wraps to three lines down here, which is 58px in a 56px bar */
  .site-head .head-in { height: auto; min-height: 56px; padding-top: 6px; padding-bottom: 6px; }
}

@media (max-width: 430px) {
  /* This used to fall back to "SRKTT". Measured on a 375px screen there are
     ~90px going spare between the mark and the controls, which is enough for
     the mandir's own name if it is allowed to wrap onto two tight lines. An
     acronym on the front door of a temple helps nobody; the name does. The
     strapline goes instead, since Telford is named in the hero regardless. */
  .brand-txt b {
    white-space: normal; overflow: visible; text-overflow: clip;
    font-family: var(--serif); font-size: .82rem; font-weight: 600;
    line-height: 1.14; max-width: 15ch;
  }
  .brand-txt small { display: none; }
  .brand-mark { width: 32px; height: 32px; }
  .head-in { height: 56px; }
  .nav .btn-sm { padding: 8px 13px; font-size: .8rem; }
  .icon-btn { width: 34px; height: 34px; }
}

/* ============================================================
   Follow the aarti — a text link in the header, not a bare icon
   ============================================================ */
.follow-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .9rem; font-weight: 600; color: var(--saffron);
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--saffron) 34%, transparent);
  background: color-mix(in srgb, var(--saffron) 9%, transparent);
  white-space: nowrap; transition: .18s;
}
.follow-link:hover { text-decoration: none; background: color-mix(in srgb, var(--saffron) 16%, transparent); }
.follow-link .ico { width: 17px; height: 17px; }
/* on phones the floating button covers this, so keep the header clear */
@media (max-width: 860px) { .follow-link { display: none; } }

/* ============================================================
   Media grid — Instagram style: square tiles, tight gutters
   ============================================================ */
.gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.gitem { aspect-ratio: 1 / 1; border-radius: 3px; box-shadow: none; }
.gitem img { width: 100%; height: 100%; object-fit: cover; }
.gitem::after {                       /* faint press feedback, like a tap on IG */
  content: ""; position: absolute; inset: 0; background: #000; opacity: 0;
  transition: opacity .15s; pointer-events: none;
}
.gitem:active::after { opacity: .18; }
@media (min-width: 700px)  { .gallery { grid-template-columns: repeat(4, 1fr); gap: 6px; } }
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(5, 1fr); gap: 6px; } }
@media (max-width: 620px)  { .gallery { grid-template-columns: repeat(3, 1fr); gap: 3px; } }

/* count badge next to each filter chip */
.chip .n { opacity: .6; font-weight: 500; margin-left: 5px; font-variant-numeric: tabular-nums; }

/* the mandir photo only appears once the file exists */
.landmark-photo[hidden] { display: none; }

/* ============================================================
   View counter
   ============================================================ */
[data-views-wrap] { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
[data-views-wrap] [data-views] { font-weight: 600; color: var(--ink-soft); }

.stat-row {
  display: grid; grid-template-columns: minmax(min(120px, 100%), 1.1fr) minmax(0, 2fr) auto;
  gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line);
}
.stat-row:last-child { border-bottom: 0; }
.stat-name { font-size: .95rem; font-weight: 500; }
.stat-bar { height: 9px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.stat-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--saffron));
}
.stat-n { font-family: var(--serif); font-size: 1.14rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-big {
  font-family: var(--serif); font-size: clamp(2.8rem, 9vw, 4.4rem); line-height: 1;
  color: var(--saffron); font-variant-numeric: tabular-nums; margin: 0 0 .1em;
}
@media (max-width: 520px) {
  .stat-row { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .stat-bar { grid-column: 1 / -1; order: 3; }
}

/* ============================================================
   Footer bar — centred, with the charity number on its own line last
   ============================================================ */
.foot-bar {
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 7px;
}
.foot-bar > span { display: block; }
.foot-charity {
  order: 3;                       /* always the very last line */
  font-weight: 600; color: var(--ink-soft); letter-spacing: .01em;
}
.foot-bar [data-views-wrap] { order: 1; font-size: .78rem; }
.foot-bar > span:not(.foot-charity):not([data-views-wrap]) { order: 2; }

/* ============================================================
   Deity photographs — used instead of a drawn icon where the mark
   stands for a deity. A line icon cannot carry a murti.
   ============================================================ */
img.deity {
  border-radius: 999px; object-fit: cover; display: block;
  background: var(--paper-2);
  box-shadow: 0 0 0 1.5px var(--gold-faint), 0 2px 8px -2px rgba(60,45,20,.3);
}
.tl-dot.has-photo {
  padding: 0; border: 0; background: none; width: 30px; height: 30px;
  left: -40px; box-shadow: none;
}
.tl-dot.has-photo img.deity { width: 30px; height: 30px; }
.up-ico.deity { width: 34px; height: 34px; }
.cal-ev .deity { width: 14px; height: 14px; display: inline-block; vertical-align: -3px; margin-right: 3px; }
@media (max-width: 620px) {
  .tl-dot.has-photo { left: -34px; width: 26px; height: 26px; }
  .tl-dot.has-photo img.deity { width: 26px; height: 26px; }
}

/* ============================================================
   Header — one line, never two

   The nav was wrapping ("Aarti &" / "Bhajans") and the wordmark was truncating
   mid-word. Labels are shorter now, nothing wraps, and the brand is allowed to
   shrink gracefully before it ever clips.
   ============================================================ */
.nav a:not(.btn), .follow-link { white-space: nowrap; }
.head-in { gap: 14px; }
.brand { flex: 0 1 auto; min-width: 0; }
.brand-txt b { font-size: 1.06rem; }

@media (min-width: 861px) and (max-width: 1180px) {
  /* tighten before anything is forced to wrap or clip */
  .nav { gap: 1px; }
  .nav a:not(.btn) { padding: 8px 9px; font-size: .88rem; }
  .follow-link { padding: 7px 11px; font-size: .84rem; }
  .follow-link .ico { width: 15px; height: 15px; }
  .brand-txt b { font-size: .98rem; }
  .brand-txt small { font-size: .6rem; }
  .brand-mark { width: 34px; height: 34px; }
}
@media (min-width: 861px) and (max-width: 1000px) {
  /* last resort before the mobile layout: the strapline goes too */
  .follow-link { padding: 8px 10px; }
  .brand-txt small { display: none; }
}

/* ============================================================
   Aarti page — one clear action, then the texts
   ============================================================ */
.follow-hero {
  margin: 30px 0 0; padding: 34px 30px; border-radius: var(--r-lg);
  background: linear-gradient(140deg,
     color-mix(in srgb, var(--saffron) 14%, var(--surface)),
     color-mix(in srgb, var(--gold) 8%, var(--surface)));
  border: 1px solid var(--gold-faint); box-shadow: var(--shadow);
  text-align: center;
}
.fh-day {
  font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 .5em;
}
.fh-title { font-size: clamp(1.7rem, 5vw, 2.5rem); margin: 0 0 .3em; }
.fh-note { color: var(--ink-soft); margin: 0 auto 1.5em; max-width: 460px; font-size: .97rem; }
.btn-lg { padding: 16px 34px; font-size: 1.04rem; }
.btn-lg .ico { width: 20px; height: 20px; }
.fh-alt { margin: 1.2em 0 0; font-size: .84rem; color: var(--ink-faint); }
.linkish {
  font: inherit; color: var(--saffron); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}

/* library shelves */
.shelf .card { display: flex; flex-direction: column; }
.shelf .card p { flex: 1; }
.shelf-n {
  font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); margin-top: 12px;
}
.card.is-soon { opacity: .62; }
.card.is-soon .shelf-n { color: var(--ink-faint); }

@media (max-width: 620px) {
  .follow-hero { padding: 26px 20px; margin-top: 22px; }
  .btn-lg { width: 100%; padding: 17px 20px; }
}

/* Pin the page while the follow-along overlay is open. position:fixed on body
   is what actually stops iOS scrolling the page behind the overlay; overflow
   hidden alone does not. */
body.seq-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

/* ============================================================
   Media page — photographs first, filters beside the heading
   ============================================================ */
.media-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 20px;
}
.media-head .chips { flex: 0 1 auto; }
@media (max-width: 700px) {
  .media-head { align-items: flex-start; gap: 12px; }
  .media-head .chips { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .media-head .chip { flex: none; }
}

/* ------------------------------------------------------------
   Lightbox controls — the old ones were near-invisible over a photo
   ------------------------------------------------------------ */
.lb-close, .lb-prev, .lb-next {
  background: rgba(20, 16, 10, .72);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(8px);
  color: #fff; width: 52px; height: 52px; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
  transition: background .16s, transform .16s;
}
.lb-close svg, .lb-prev svg, .lb-next svg { width: 22px; height: 22px; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(20,16,10,.92); transform: scale(1.06); }
.lb-close { top: max(18px, env(safe-area-inset-top, 0px)); right: 18px; }
.lb-prev  { left: 18px; }
.lb-next  { right: 18px; }
.lb-count {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  margin: 0; padding: 7px 16px; border-radius: 999px;
  background: rgba(20,16,10,.72); border: 1px solid rgba(255,255,255,.22);
  color: #fff; font-size: .82rem; font-variant-numeric: tabular-nums;
  backdrop-filter: blur(8px);
}
@media (max-width: 620px) {
  /* on a phone the arrows sit low, clear of the photo and within thumb reach */
  .lb-prev, .lb-next {
    top: auto; transform: none; width: 48px; height: 48px;
    bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) + 4px);
  }
  .lb-prev { left: 22px; } .lb-next { right: 22px; }
  .lb-count { bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) + 14px); font-size: .78rem; }
  .lightbox img { max-height: 74vh; }
}

/* ============================================================
   Daily updates — the notice board
   ============================================================ */
.notice-wrap { padding: 0; }
.notice {
  display: flex; gap: 20px; align-items: center; margin: 26px 0 0;
  padding: 18px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--saffron) 12%, var(--surface)), var(--surface));
  border: 1px solid var(--gold-faint); box-shadow: var(--shadow);
}
/* The day's photograph, whole. It used to be a 112px square with object-fit:
   cover, which cropped a portrait phone photo down to its middle — the thali,
   the flowers and half the murti fell outside the frame. Same treatment as the
   slideshow: a blurred copy fills the panel, the picture sits whole on top. */
.notice-shot {
  position: relative; flex: none; width: 168px; height: 168px;
  border-radius: var(--r); overflow: hidden; cursor: zoom-in;
  border: 0; padding: 0; background: #14120E; display: block;
}
.notice-shot .fill {
  position: absolute; inset: -8%; width: 116%; height: 116%;
  object-fit: cover; filter: blur(18px) saturate(1.15) brightness(.55);
}
.notice-shot .shot {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
}
.notice-zoom {
  position: absolute; right: 7px; bottom: 7px; width: 26px; height: 26px;
  border-radius: 7px; display: grid; place-items: center; color: #fff;
  background: rgba(20,16,10,.6); backdrop-filter: blur(6px);
  transition: background .18s;
}
.notice-zoom svg { width: 14px; height: 14px; }
.notice-shot:hover .notice-zoom { background: rgba(20,16,10,.88); }
.notice-more-n {
  position: absolute; left: 7px; top: 7px; padding: 3px 8px; border-radius: 999px;
  font-family: var(--sans); font-size: .7rem; font-weight: 600; color: #fff;
  background: rgba(20,16,10,.6); backdrop-filter: blur(6px);
}
.notice-shot:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
.notice-body { flex: 1; min-width: 0; }
.notice-when {
  font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--saffron); margin: 0 0 .35em;
  display: flex; align-items: center; gap: 8px;
}
.notice-new {
  background: var(--saffron); color: #fff; border-radius: 999px;
  padding: 2px 8px; font-size: .6rem; letter-spacing: .08em;
}
.notice h3 { margin: 0 0 .25em; font-size: 1.2rem; }
.notice p { margin: 0; color: var(--ink-soft); font-size: .93rem; }
.notice a.notice-more { font-size: .86rem; font-weight: 600; display: inline-block; margin-top: .5em; }
@media (max-width: 560px) {
  .notice { flex-direction: column; align-items: stretch; text-align: left; gap: 14px; }
  .notice-shot { width: 100%; height: min(96vw, 340px); }
}

/* archive */
.up-group { margin-bottom: 34px; }
.up-group > h2 {
  font-size: 1.2rem; margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px;
}
.up-group > h2 span { font-family: var(--sans); font-size: .74rem; color: var(--ink-faint); font-weight: 500; }
/* The notice board.
   One card per update, holding its photograph, its date and its reactions.
   Everything was previously a separate cell in the same grid, so a row of
   reaction pills could land beside a photograph it had nothing to do with. */
.up-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(232px, 100%), 1fr));
  gap: 18px; align-items: start;
}
.up-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow); text-align: left;
  transition: transform .18s, border-color .18s;
}
.up-card:hover { transform: translateY(-2px); border-color: var(--gold-faint); }

/* the photograph, whole, against a blurred copy of itself rather than the
   black slab that letterboxing on its own produced */
.up-shot {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5;
  border: 0; padding: 0; margin: 0; background: #14120E; cursor: zoom-in; overflow: hidden;
}
.up-shot .fill {
  position: absolute; inset: -8%; width: 116%; height: 116%;
  object-fit: cover; filter: blur(20px) saturate(1.15) brightness(.5);
}
.up-shot .shot {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
}
.up-count {
  position: absolute; right: 8px; top: 8px; padding: 3px 9px; border-radius: 999px;
  font-family: var(--sans); font-size: .68rem; font-weight: 600; color: #fff;
  background: rgba(20,16,10,.62); backdrop-filter: blur(6px);
}
.up-meta { padding: 12px 14px 4px; display: grid; gap: 2px; }
.up-meta b { font-size: .95rem; line-height: 1.3; }
.up-meta time { font-size: .78rem; color: var(--saffron); font-weight: 600; }
.up-meta p { margin: 4px 0 0; font-size: .84rem; color: var(--ink-soft); line-height: 1.45; }
.up-react { padding: 8px 12px 12px; margin-top: auto; }
.up-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }

/* admin */
.fld { display: block; margin-bottom: 14px; }
.fld > span { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 6px; color: var(--ink-soft); }
.fld input, .fld textarea, .fld select {
  width: 100%; font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px;
}
.fld input:focus, .fld textarea:focus { outline: 2px solid var(--saffron); outline-offset: 1px; }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .fld-row { grid-template-columns: 1fr; } }
/* One row per chosen photograph, each with its own date, so several days can
   be posted in one go and land on the right days. */
.admin-preview { display: grid; gap: 8px; margin: 0 0 14px; }
.pick {
  display: flex; align-items: center; gap: 12px; padding: 8px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 11px;
}
.pick img {
  width: 62px; height: 62px; object-fit: cover; border-radius: 8px; flex: none;
  background: var(--surface); border: 1px solid var(--line);
}
.pick-meta { display: grid; gap: 5px; min-width: 0; flex: 1; }
.pick-name {
  font-size: .8rem; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pick-meta label {
  display: flex; align-items: center; gap: 8px;
  font-size: .76rem; font-weight: 600; color: var(--ink-soft);
}
.pick-date {
  font: inherit; font-size: .86rem; color: var(--ink); flex: 1; min-width: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 9px;
}
.pick-hint { margin: 2px 0 0; font-size: .82rem; }
.admin-row {
  display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line);
}
.admin-row img { width: 54px; height: 54px; border-radius: 9px; object-fit: cover; flex: none; }
.admin-noimg {
  width: 54px; height: 54px; border-radius: 9px; background: var(--paper-2);
  display: grid; place-items: center; color: var(--ink-faint); flex: none;
}
.admin-row > div { flex: 1; min-width: 0; }
.admin-row b { display: block; font-size: .95rem; }
.admin-row .faint { font-size: .8rem; }

/* two-factor setup key — must be readable enough to type without mistakes */
.setup-key {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.14rem; letter-spacing: .12em; word-spacing: .3em;
  background: var(--paper-2); border: 1px dashed var(--gold-faint);
  border-radius: var(--r); padding: 14px 16px; margin: 14px 0 10px;
  user-select: all; text-align: center; color: var(--ink);
}

/* ============================================================
   Reactions
   ============================================================ */
.reactions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.react {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: .9rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 11px; color: var(--ink-soft);
  transition: transform .14s, border-color .16s, background .16s;
}
.react:hover { border-color: var(--gold-faint); background: var(--paper-2); }
.react.mine {
  border-color: color-mix(in srgb, var(--saffron) 45%, transparent);
  background: color-mix(in srgb, var(--saffron) 12%, transparent);
  color: var(--ink);
}
.react-g { font-size: 1.02rem; line-height: 1; }
.react-n { font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.react.pop { animation: reactPop .42s ease; }
@keyframes reactPop {
  0% { transform: scale(1); } 38% { transform: scale(1.22); } 100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .react.pop { animation: none; } }
@media (hover: none) { .react { min-height: 40px; padding: 7px 13px; } }

/* the archive grid holds card + reactions as one unit */

/* admin: people, invitations, audit */
.admin-people .person {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.admin-people .person:last-child { border-bottom: 0; }
.admin-people b { font-size: .98rem; }
.admin-people .faint { display: block; font-size: .78rem; }
.admin-people .person-acts { display: flex; gap: 6px; flex-wrap: wrap; flex: none; }

/* ---- passkeys ---- */
.pk-card { max-width: 420px; }
.pk-card .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.pk-face { width: 20px; height: 20px; flex: none; }
.pk-msg { margin: 10px 0 0; font-size: .86rem; min-height: 1.2em; }
.pk-msg.good { color: var(--sage); }
.pk-msg.bad  { color: var(--lotus); }
.pk-or {
  display: flex; align-items: center; gap: 12px; margin: 18px 0;
  font-family: var(--sans); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.pk-or::before, .pk-or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.tag-owner {
  display: inline-block; margin-left: 5px; padding: 2px 8px; border-radius: 999px;
  font-family: var(--sans); font-size: .64rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; vertical-align: 2px;
  color: var(--saffron); background: color-mix(in srgb, var(--saffron) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--saffron) 34%, transparent);
}
.invites { display: grid; gap: 8px; margin-top: 6px; }
.invite { display: flex; gap: 8px; align-items: center; }
.invite input {
  flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: .76rem;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--paper-2); color: var(--ink);
}
.audit { max-height: 380px; overflow-y: auto; margin-top: 10px; font-size: .78rem; }
.audit-row {
  display: grid; grid-template-columns: 88px 118px 92px 118px 1fr; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.audit-row.bad .a-e { color: var(--lotus); font-weight: 600; }
.a-t { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.a-e { font-family: ui-monospace, Menlo, monospace; }
.a-u { font-weight: 600; }
.a-ip, .a-x { color: var(--ink-faint); font-family: ui-monospace, Menlo, monospace;
              overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .audit-row { grid-template-columns: 1fr 1fr; gap: 2px 8px; padding: 9px 0; }
  .a-x { grid-column: 1 / -1; }
}

/* audit page: filters, table, pager */
.audit-filters {
  display: grid; grid-template-columns: 2fr 1.3fr 1fr 1fr 1fr 1fr; gap: 12px;
  align-items: end; margin-bottom: 22px;
}
.audit-filters .fld { margin: 0; }
.audit-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
@media (max-width: 900px) { .audit-filters { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .audit-filters { grid-template-columns: 1fr; } }

.audit-full { max-height: none; font-size: .8rem; }
.audit-full .audit-row { grid-template-columns: 130px 150px 100px 130px 1fr; }
.audit-head {
  font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--gold-faint);
  position: sticky; top: 68px; background: var(--paper); z-index: 2;
}
.audit-full .audit-row:hover { background: var(--paper-2); }
@media (max-width: 760px) {
  .audit-full .audit-row { grid-template-columns: 1fr 1fr; }
  .audit-head { display: none; }
}
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; }
.pager-n { font-size: .86rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.btn.is-off { opacity: .35; pointer-events: none; }

/* ============================================================
   FIX: the wordmark was still truncating on a wide screen

   Cause: .wrap caps everything at 1120px, and the header now carries seven
   links plus Follow, two icon buttons and Donate. The brand was the only
   flexible thing, so it took all the squeeze. The header gets its own wider
   container, and Follow drops to its icon before the name is ever cut.
   ============================================================ */
.site-head .wrap { max-width: 1440px; }

/* Everything below is the desktop header only. It must be fenced above 860px:
   these rules live at the end of the file, so without the fence they would win
   the cascade against the phone block far above and undo it — which is exactly
   what happened the first time, and why the name reappeared on one long line
   that shoved Donate off a 375px screen. */
@media (min-width: 861px) {
  .brand { flex: 0 0 auto; }
  .brand-txt b { max-width: none; }
  .nav { margin-left: auto; }
}

/* Between the phone layout and a wide desktop the header carries seven links,
   Follow, two icon buttons and Donate. Something has to give, and it should be
   the one label that is also a floating button on every page — never the name of
   the mandir. The anchor keeps its aria-label, so it still reads as "Follow
   today's aarti" when only the diya is showing. */
@media (min-width: 861px) and (max-width: 1330px) {
  .follow-link { gap: 0; padding: 9px 12px; }                 /* icon only */
  .follow-link .follow-txt { display: none; }
  .follow-link .ico { width: 18px; height: 18px; }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .nav a:not(.btn) { padding: 8px 8px; font-size: .86rem; }
  .brand-txt b { font-size: .96rem; }
  .brand-txt small { font-size: .58rem; }
  .brand-mark { width: 32px; height: 32px; }
}
@media (min-width: 861px) and (max-width: 1020px) {
  /* last resort before the phone layout — subtitle goes, name stays whole */
  .brand-txt small { display: none; }
  .nav a:not(.btn) { padding: 8px 6px; font-size: .82rem; }
}

/* ============================================================
   Daily updates — slideshow, uncropped

   The archive squared every photograph off, which cut the bhog thali out of
   its own picture. The slideshow shows each one whole.
   ============================================================ */
.slideshow {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--paper-2); border: 1px solid var(--line); box-shadow: var(--shadow);
  margin-bottom: 28px;
}
/* A fixed height rather than an aspect ratio. Phone photographs are portrait,
   and a 4:3 stage across a desktop window came out 1074x806 — most of it black
   with a narrow strip of darshan down the middle. A calm band of a height that
   suits both orientations is better than a slab that suits neither. */
.slide-stage {
  position: relative; width: 100%; height: clamp(320px, 56vh, 520px);
  display: grid; place-items: center; background: #14120E; overflow: hidden;
}
.slide-stage figure {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transition: opacity .5s ease;
}
.slide-stage figure.on { opacity: 1; }

/* The same photograph twice: blurred and cropped to fill the stage, then whole
   and sharp on top. Letterboxing is right — nothing is cut — but hard black
   bars look like a fault, whereas the photograph's own colours behind it look
   deliberate, and sit better with the rest of the theme. */
.slide-stage .fill {
  position: absolute; inset: -6%; width: 112%; height: 112%;
  object-fit: cover; filter: blur(30px) saturate(1.15) brightness(.5);
}
.slide-stage .shot {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;                       /* never crop the offering */
}
.slide-cap {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 18px; flex-wrap: wrap;
}
.slide-cap b { font-size: 1rem; }
.slide-cap .when { font-size: .84rem; color: var(--ink-faint); }
.slide-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.slide-dots button {
  width: 9px; height: 9px; border-radius: 999px; border: 0; padding: 0;
  background: var(--line); cursor: pointer; transition: .18s;
}
.slide-dots button.on { background: var(--saffron); transform: scale(1.35); }
.slide-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 999px; cursor: pointer;
  background: rgba(20,16,10,.62); border: 1px solid rgba(255,255,255,.24);
  color: #fff; display: grid; place-items: center; backdrop-filter: blur(6px);
}
.slide-nav:hover { background: rgba(20,16,10,.85); }
.slide-nav svg { width: 20px; height: 20px; }
.slide-prev { left: 12px; } .slide-next { right: 12px; }
.slide-open {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  background: rgba(20,16,10,.62); border: 1px solid rgba(255,255,255,.24);
  color: #fff; border-radius: 999px; padding: 7px 14px; font-size: .8rem; cursor: pointer;
}
@media (max-width: 620px) {
  .slide-stage { height: min(120vw, 62vh); }   /* taller: phone photos are portrait */
  .slide-nav { width: 38px; height: 38px; }
}

/* archive tiles keep the whole picture too, just letterboxed */

/* ============================================================
   Ask the mandir — the search behind the magnifying glass

   A sheet rather than a page: the question is usually one line and
   the answer is usually one card, so a whole navigation feels like
   too much ceremony for "when is the next aarti".
   ============================================================ */
.ask {
  position: fixed; inset: 0; z-index: 120;
  background: color-mix(in srgb, #14120E 52%, transparent);
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: max(6vh, 40px) 18px 18px;
  overscroll-behavior: contain;
}
body.ask-open { overflow: hidden; }

.ask-box {
  width: min(600px, 100%); max-height: 86vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: 0 24px 70px rgba(20,16,10,.34);
  overflow: hidden;
}
.ask-top {
  display: flex; align-items: center; gap: 11px; padding: 15px 16px;
  border-bottom: 1px solid var(--line);
}
.ask-top .ico { width: 19px; height: 19px; color: var(--saffron); flex: none; }
.ask-top input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-family: var(--sans); font-size: 1.02rem; color: var(--ink);
}
.ask-top input::placeholder { color: var(--ink-faint); }
.ask-close {
  width: 30px; height: 30px; flex: none; border: 0; background: none; cursor: pointer;
  color: var(--ink-faint); border-radius: 999px; display: grid; place-items: center;
}
.ask-close:hover { background: var(--paper-2); color: var(--ink); }
.ask-close svg { width: 16px; height: 16px; }

.ask-results { padding: 14px 16px; overflow-y: auto; flex: 1; }
.ask-hint { margin: 6px 2px; color: var(--ink-faint); font-size: .9rem; line-height: 1.6; }

/* the direct answer, when the question had one */
.ask-card {
  display: block; padding: 16px 18px; border-radius: var(--r); margin-bottom: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--saffron) 13%, var(--surface)), var(--surface));
  border: 1px solid var(--gold-faint); text-decoration: none;
}
.ask-card:hover { border-color: var(--saffron); text-decoration: none; }
.ask-card .ask-kind {
  display: block; font-family: var(--sans); font-size: .66rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--saffron); margin-bottom: .4em;
}
.ask-card b { display: block; font-family: var(--serif); font-size: 1.3rem; color: var(--ink); line-height: 1.25; }
.ask-card i { display: block; font-style: normal; font-size: .88rem; color: var(--ink-soft); margin-top: .35em; }
.ask-card.ekadashi { background: linear-gradient(135deg, color-mix(in srgb, var(--lotus) 13%, var(--surface)), var(--surface)); }
.ask-card.ekadashi .ask-kind { color: var(--lotus); }
.ask-card.aarti { background: linear-gradient(135deg, color-mix(in srgb, var(--sage) 14%, var(--surface)), var(--surface)); }
.ask-card.aarti .ask-kind { color: var(--sage); }

.ask-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ask-list a {
  display: block; padding: 11px 12px; border-radius: 10px; text-decoration: none;
}
.ask-list a:hover { background: var(--paper-2); text-decoration: none; }
.ask-tag {
  display: inline-block; font-family: var(--sans); font-size: .6rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; margin-bottom: .4em;
}
.ask-list b { display: block; font-size: .98rem; color: var(--ink); }
.ask-list i { display: block; font-style: normal; font-size: .84rem; color: var(--ink-soft); }
.ask-foot {
  margin: 0; padding: 11px 16px; border-top: 1px solid var(--line);
  background: var(--paper-2); font-size: .76rem; color: var(--ink-faint);
}

@media (max-width: 620px) {
  .ask { padding: 0; }
  .ask-box { width: 100%; max-height: 100%; height: 100%; border-radius: 0; border: 0; }
}

/* ============================================================
   Contact — one row per trustee, so a visitor knows who to write to
   ============================================================ */
.contact-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.contact-row {
  display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--r);
  background: var(--paper-2); border: 1px solid var(--line);
}
.contact-who { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.contact-who b { font-size: 1.02rem; }
.contact-who .faint { font-size: .78rem; }
.contact-row p { margin: 0; font-size: .9rem; }
.contact-mail {
  justify-self: start; margin-top: 6px; font-family: ui-monospace, Menlo, monospace;
  font-size: .86rem; color: var(--saffron); word-break: break-all;
  border-bottom: 1px solid color-mix(in srgb, var(--saffron) 40%, transparent);
}
.contact-mail:hover { text-decoration: none; border-bottom-color: var(--saffron); }
@media (min-width: 720px) {
  .contact-row {
    grid-template-columns: 200px 1fr auto; align-items: center; gap: 18px;
  }
  .contact-who { display: grid; gap: 1px; }
  .contact-mail { margin-top: 0; justify-self: end; }
}

/* ---- admin: darshan or event ---- */
.kindpick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 16px; }
.kindpick label {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; cursor: pointer;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 11px;
  transition: border-color .15s, background .15s;
}
.kindpick label:has(input:checked) {
  border-color: var(--saffron);
  background: color-mix(in srgb, var(--saffron) 10%, var(--surface));
}
.kindpick input { margin-top: 3px; accent-color: var(--saffron); flex: none; }
.kindpick span { display: grid; gap: 1px; }
.kindpick b { font-size: .92rem; }
.kindpick i { font-style: normal; font-size: .78rem; color: var(--ink-faint); }
@media (max-width: 560px) { .kindpick { grid-template-columns: 1fr; } }

/* A short-lived flag on the weekly timings. Delete this rule and the span in
   index.html / visit.html once the new schedule is simply the schedule. */
.tnew {
  display: inline-block; margin-right: 6px; padding: 2px 9px; border-radius: 999px;
  font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  color: #fff; background: var(--saffron); vertical-align: 1px;
}

/* ---- live stream ---- */
.live { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 22px 0 26px; }
.live-go {
  flex: 1 1 340px; display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 16px 20px; border-radius: var(--r-lg); cursor: pointer;
  background: linear-gradient(135deg, color-mix(in srgb, var(--lotus) 14%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--lotus) 34%, transparent);
  font: inherit; color: inherit; transition: border-color .18s, transform .18s;
}
.live-go:hover { border-color: var(--lotus); transform: translateY(-1px); }
.live-go .ico { width: 26px; height: 26px; color: var(--lotus); margin-left: auto; flex: none; }
.live-txt { display: grid; gap: 2px; min-width: 0; }
.live-txt b { font-size: 1.02rem; }
.live-txt i { font-style: normal; font-size: .84rem; color: var(--ink-soft); }
.live-dot {
  width: 11px; height: 11px; border-radius: 999px; background: var(--lotus); flex: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--lotus) 60%, transparent);
  animation: livepulse 2.4s ease-out infinite;
}
@keyframes livepulse {
  70%  { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.live-frame {
  width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-lg);
  margin: 22px 0 26px; background: #14120E;
}

/* ============================================================
   Reading settings — text size, script, meaning. Shared by the aarti page,
   the Library and the follow-along; remembered on the device.
   Every target is at least 44px: the people most likely to want the text
   bigger are the least likely to hit a small button first time.
   ============================================================ */
.reading-bar { margin: 18px 0 24px; padding: 14px 16px; background: var(--paper-2);
               border: 1px solid var(--line); border-radius: var(--r-lg); }
.rd { display: grid; gap: 12px; }
.rd-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.rd-lab { font-size: .92rem; font-weight: 600; color: var(--ink); }
.rd-size, .rd-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px;
                    background: var(--surface); padding: 3px; gap: 2px; }
.rd-size button, .rd-seg button {
  min-width: 52px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px;
  background: none; font: inherit; font-size: .95rem; font-weight: 600; color: var(--ink-soft); cursor: pointer;
}
.rd-size button { font-family: var(--serif); font-size: 1.2rem; min-width: 56px; }
.rd-size button:last-child { font-size: 1.5rem; }
.rd-size sup { font-family: var(--sans); font-size: .55em; margin-left: 1px; }
.rd-size button:disabled { opacity: .3; cursor: default; }
.rd-seg button[aria-pressed="true"] { background: var(--saffron); color: #fff; }
.rd-size button:not(:disabled):hover, .rd-seg button:not([aria-pressed="true"]):hover { background: var(--paper-2); color: var(--ink); }
.rd-seg button[lang="hi"] { font-family: var(--deva); font-weight: 500; font-size: 1.02rem; padding-top: 3px; }
.rd-switch {
  position: relative; width: 58px; height: 34px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--line); flex: none; transition: background .2s;
}
.rd-switch span { position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 999px;
                  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.rd-switch[aria-pressed="true"] { background: var(--sage); }
.rd-switch[aria-pressed="true"] span { transform: translateX(24px); }
.rd button:focus-visible, .seq-top .icon-btn:focus-visible, .seq-btns .btn:focus-visible {
  outline: 3px solid var(--saffron); outline-offset: 2px;
}
@media (min-width: 760px) {
  .reading-bar .rd { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 34px; }
  .reading-bar .rd-row { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .rd-switch, .rd-switch span { transition: none; } }

/* ============================================================
   Home page — darshan, today, coming up, latest, watch.
   Everything here fills itself from data; the page is laid out so that each
   section still makes sense on its own if its data does not arrive.
   ============================================================ */
/* Small labels need 4.5:1. Saffron with white text is 3.8:1 on the light
   theme and 2.5:1 on the dark one, so labels get their own pair per theme. */
:root { --tag: #A85F22; --tag-ink: #fff; --ok: #2F7D4F; --ok-ink: #fff; --off: #6F6556; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --tag: #E0954B; --tag-ink: #1C1608; --ok: #86AA96; --ok-ink: #1C1608; --off: #8C8271; }
}
:root[data-theme="dark"] { --tag: #E0954B; --tag-ink: #1C1608; --ok: #86AA96; --ok-ink: #1C1608; --off: #8C8271; }

.home-sec { padding: clamp(40px, 6vw, 72px) 0; }
.home-sec + .home-sec { padding-top: 0; }
.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 8px 18px; flex-wrap: wrap; margin-bottom: 22px;
}
.sec-head h2 { margin: 0; }
.sec-head .eyebrow { margin-bottom: .45rem; }
.sec-more { font-weight: 600; font-size: .95rem; white-space: nowrap; padding: 8px 0; }

/* ---- hero: words, and the day's darshan inside a mandir arch ---- */
.hero-home { padding: clamp(34px, 6vw, 80px) 0 clamp(30px, 5vw, 64px); }
.hero-grid { display: grid; gap: 30px; align-items: center; }
.hero-home .hero-cta .ico { width: 18px; height: 18px; }
.darshan { margin: 0 auto; width: min(100%, 340px); text-align: center; }
.darshan-arch {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5;
  padding: 0; border: 0; cursor: zoom-in; overflow: hidden; background: #14120E;
  /* 40% of a 4:5 height is half the width, so the top is a true semicircle */
  border-radius: 50% 50% 22px 22px / 40% 40% 22px 22px;
  box-shadow: 0 0 0 6px var(--surface), 0 0 0 7px var(--gold-faint), var(--shadow-lg);
}
.darshan-img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.darshan-arch:hover .darshan-img { transform: scale(1.03); }
.darshan-arch:focus-visible { outline: 3px solid var(--saffron); outline-offset: 10px; }
.darshan-n {
  position: absolute; right: 12px; bottom: 12px; padding: 5px 11px; border-radius: 999px;
  font-size: .78rem; font-weight: 600; color: #fff;
  background: rgba(20,16,10,.66); backdrop-filter: blur(6px);
}
.darshan-cap { margin-top: 18px; }
.darshan-when {
  margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tag); display: flex; align-items: center; justify-content: center; gap: 8px;
}
.darshan-when .notice-new { background: var(--tag); color: var(--tag-ink); }
.darshan-note {
  margin: .35em 0 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  white-space: pre-line;
}
.darshan .reactions { justify-content: center; }
@media (min-width: 861px) {
  .hero-home.has-darshan { text-align: left; }
  .hero-home.has-darshan .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 64px; }
  .hero-home.has-darshan .hero-lede { margin-left: 0; }
  .hero-home.has-darshan .hero-cta { justify-content: flex-start; }
  .hero-home.has-darshan .hero-mandala { left: 76%; }
  .darshan { width: min(100%, 380px); }
}

/* ---- today at the mandir ---- */
.today-sec { padding: 0; }   /* the section after it brings its own space */
.today-card {
  display: grid; gap: 16px; padding: 22px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.today-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .25em; }
.today-head .eyebrow { margin-bottom: .4rem; }
.open-state { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; color: var(--ink-soft); font-size: .98rem; }
.open-state i { width: 11px; height: 11px; border-radius: 999px; background: var(--ink-faint); flex: none; }
.open-state.is-open i { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 24%, transparent); }
.open-state b { color: var(--ink); }
.today-next {
  margin: 0; padding: 14px 16px; border-radius: var(--r); font-size: 1.08rem; line-height: 1.5;
  background: color-mix(in srgb, var(--saffron) 10%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--saffron) 24%, transparent);
}
.tn-tag {
  display: inline-block; margin-right: 4px; padding: 2px 10px; border-radius: 999px; vertical-align: 1px;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: var(--tag); color: var(--tag-ink);
}
.tn-tag.now { background: var(--ok); color: var(--ok-ink); }
.tn-tag.done { background: var(--off); color: var(--tag-ink); }
.tn-in { display: block; margin-top: 2px; font-size: .92rem; color: var(--ink-soft); }
.today-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.today-list li {
  display: grid; grid-template-columns: 7.4em 1fr auto; align-items: baseline; gap: 12px;
  padding: 9px 4px; border-bottom: 1px dashed var(--line); font-size: .98rem;
}
.today-list li:last-child { border-bottom: 0; }
.today-list time { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .92rem; }
.today-list b { font-weight: 600; }
.today-list li.done { color: var(--ink-faint); }
.today-list li.done b { font-weight: 500; }
.today-list li.done time { color: var(--ink-faint); }
.today-list li.now b, .today-list li.next b { color: var(--ink); }
.tl-tag { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tag); }
.today-list li.now .tl-tag { color: var(--ok); }
.today-foot { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: .95rem; }
.today-foot a { font-weight: 600; padding: 6px 0; }
@media (min-width: 861px) {
  .today-card {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 44px; padding: 30px 34px;
    grid-template-areas: "head next" "head list" "foot list";
  }
  .today-head { grid-area: head; }
  .today-next { grid-area: next; }
  .today-list { grid-area: list; align-self: start; }
  .today-foot { grid-area: foot; align-self: end; }
}
@media (max-width: 340px) {
  .today-list li { grid-template-columns: 1fr auto; }
  .today-list time { grid-column: 1 / -1; }
}

/* ---- coming up ---- */
.coming { display: grid; gap: 14px; }
@media (min-width: 861px) { .coming { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; align-items: stretch; } }
.fest-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 18px; align-items: start; padding: 24px; border-radius: var(--r-lg);
  background:
    radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, var(--saffron) 20%, transparent), transparent 55%),
    linear-gradient(160deg, color-mix(in srgb, var(--saffron) 9%, var(--surface)), var(--surface));
  border: 1px solid var(--gold-faint); box-shadow: var(--shadow);
}
.fest-art {
  position: absolute; right: -30px; bottom: -30px; width: 190px; height: 190px;
  color: var(--saffron); opacity: .12; pointer-events: none;
}
.fest-art.is-photo {
  right: 16px; bottom: 16px; width: 96px; height: 96px; opacity: 1; border-radius: 999px;
  object-fit: cover; box-shadow: 0 0 0 4px var(--surface), var(--shadow);
}
.fest-cal {
  position: relative; width: 78px; text-align: center; border-radius: 16px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.fest-cal span {
  display: block; padding: 5px 0; background: var(--tag); color: var(--tag-ink);
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.fest-cal b { display: block; font-family: var(--serif); font-size: 2.4rem; line-height: 1; padding: 10px 0 2px; color: var(--ink);
              font-variant-numeric: lining-nums; }
.fest-cal i { display: block; font-style: normal; font-size: .74rem; color: var(--ink-soft); padding-bottom: 9px; }
.fest-body { position: relative; min-width: 0; }
.fest-togo {
  display: inline-block; margin: 0 0 .5em; padding: 3px 12px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; color: var(--tag);
  background: color-mix(in srgb, var(--saffron) 12%, transparent);
}
.fest-togo b { font-size: 1rem; }
.fest-hero h3 { font-size: clamp(1.55rem, 3.2vw, 2.1rem); margin: 0 0 .15em; overflow-wrap: break-word; }
.fest-date { margin: 0 0 .6em; font-weight: 600; color: var(--ink-soft); font-size: .95rem; }
.fest-about { margin: 0; color: var(--ink-soft); font-size: .95rem; max-width: 46ch; }
.fest-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.fest-cta .btn { min-height: 44px; padding: 9px 18px; font-size: .9rem; }
.fest-cta .ico { width: 17px; height: 17px; }
.fest-list { display: grid; gap: 10px; align-content: start; }
.fest-list a.up-item { color: inherit; text-decoration: none; min-height: 64px; }
.fest-list a.up-item:hover { transform: translateY(-1px); }
@media (max-width: 400px) {
  /* beside the date there is too little width for the buttons; stack instead */
  .fest-hero { grid-template-columns: 1fr; gap: 14px; padding: 20px 18px; }
  .fest-cal { width: 68px; }
  .fest-cal b { font-size: 2rem; padding-top: 8px; }
}

/* ---- latest: the photographs posted from the admin page ---- */
.latest { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lt {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; margin: 0;
  border: 0; border-radius: var(--r-lg); overflow: hidden; cursor: zoom-in; text-align: left;
  background: #14120E; color: #fff; font: inherit; box-shadow: var(--shadow);
}
.lt.feature { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.lt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.lt:hover img { transform: scale(1.04); }
.lt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,10,6,0) 34%, rgba(14,10,6,.6) 60%, rgba(14,10,6,.92) 100%);
}
.lt:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; }
.lt-meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: 3px; padding: 14px; }
.lt-tag {
  justify-self: start; margin-bottom: 3px; padding: 3px 9px; border-radius: 999px;
  font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255,255,255,.2); backdrop-filter: blur(6px);
}
.lt-tag.event { background: #A85F22; }
.lt b {
  font-family: var(--serif); font-size: 1.14rem; font-weight: 600; line-height: 1.18;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.lt.feature b { font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
.lt-sub {
  font-size: .82rem; opacity: .92; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.lt time { font-size: .8rem; opacity: .9; }
.lt-n {
  position: absolute; top: 10px; right: 10px; z-index: 1; padding: 4px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; background: rgba(20,16,10,.62); backdrop-filter: blur(6px);
}
.latest-foot { margin: 20px 0 0; text-align: center; }
.latest-foot .ico { width: 18px; height: 18px; }
@media (min-width: 600px) {
  .latest { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 20vw, 250px); gap: 14px; }
  .lt, .lt.feature { aspect-ratio: auto; height: 100%; }
  .lt.feature { grid-column: span 2; grid-row: span 2; }
  .lt-meta { padding: 18px; }
}
@media (max-width: 380px) { .lt b { font-size: 1rem; } .lt-meta { padding: 11px; } }

/* ---- watch ---- */
.watch {
  display: grid; gap: 20px; align-items: center; padding: clamp(22px, 4vw, 40px);
  grid-template-areas: "copy" "screen" "cta";
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  background: linear-gradient(135deg, color-mix(in srgb, var(--lotus) 11%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--lotus) 24%, var(--line));
}
.watch-copy { grid-area: copy; }
.watch-copy h2 { margin: 0 0 .4em; }
.watch-copy p { color: var(--ink-soft); margin: 0; }
.watch-screen, .watch .live-frame { grid-area: screen; }
.watch-cta { grid-area: cta; display: flex; gap: 10px; flex-wrap: wrap; }
.watch-cta .btn { flex: 1 1 auto; min-height: 46px; }
.watch-screen {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0;
  border-radius: var(--r); overflow: hidden; cursor: pointer; background: #14120E; color: #fff;
  font: inherit; text-align: left; box-shadow: var(--shadow-lg);
}
.watch-screen img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.58) saturate(1.1); transition: filter .3s, transform .6s ease;
}
.watch-screen:hover img { filter: brightness(.7) saturate(1.1); transform: scale(1.03); }
.watch-screen:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; }
.watch-play {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  width: 74px; height: 74px; border-radius: 999px; display: grid; place-items: center;
  background: rgba(255,255,255,.94); color: #B5621F; box-shadow: 0 8px 30px rgba(0,0,0,.35);
  transition: transform .2s;
}
.watch-screen:hover .watch-play { transform: translate(-50%, -50%) scale(1.06); }
.watch-play svg { width: 32px; height: 32px; margin-left: 5px; }
.watch-label { position: absolute; left: 16px; right: 16px; bottom: 32px; display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1.02rem; }
.watch-hint { position: absolute; left: 16px; right: 16px; bottom: 11px; font-size: .78rem; opacity: .88; }
.watch .live-frame { margin: 0; box-shadow: var(--shadow-lg); }
@media (min-width: 861px) {
  .watch { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "copy screen" "cta screen";
           column-gap: 44px; row-gap: 22px; align-items: end; }
  .watch-copy { align-self: end; }
  .watch-cta { align-self: start; }
  .watch-cta .btn { flex: 0 0 auto; }
}
@media (max-width: 380px) { .watch-play { width: 58px; height: 58px; } .watch-label { bottom: 28px; font-size: .92rem; } }

/* ---- explore: six plain doors ---- */
.doors { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.door {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 13px; align-items: center;
  padding: 16px; min-height: 80px; border-radius: var(--r-lg); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform .18s, border-color .18s, box-shadow .2s;
}
.door:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--gold-faint); box-shadow: var(--shadow-lg); }
.door-ico {
  grid-row: span 2; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--saffron) 12%, transparent); color: var(--saffron);
}
.door-ico .ico { width: 23px; height: 23px; }
.door b { font-size: 1.02rem; line-height: 1.25; }
.door > span:last-child { font-size: .85rem; color: var(--ink-soft); line-height: 1.35; }
@media (min-width: 861px) { .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .door { padding: 20px; } }
@media (max-width: 440px) {
  .door { grid-template-columns: 1fr; row-gap: 4px; align-content: start; }
  .door-ico { grid-row: auto; margin-bottom: 6px; }
}

/* ---- find us ---- */
.find-us h3 { font-size: 1.35rem; }
.find-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.find-cta .ico { width: 17px; height: 17px; }
.find-gita { margin-top: 24px; padding-top: 18px; border-top: 1px dashed var(--line); }
.find-gita .deva { color: var(--saffron); font-size: 1.08rem; margin: 0 0 .2em; }
.find-gita .muted { margin: 0; font-size: .93rem; }

@media (prefers-reduced-motion: reduce) {
  .darshan-img, .lt img, .watch-screen img, .watch-play, .door { transition: none; }
  .darshan-arch:hover .darshan-img, .lt:hover img, .watch-screen:hover img { transform: none; }
}

/* ============================================================
   Membership application — the paper form, online.
   Built for someone filling it in on a phone at the mandir: one column,
   labels above boxes, 50px+ targets, 17px+ text so iOS never zooms, and
   errors that say what to do rather than what went wrong.
   Field borders are 3:1 against the page, as WCAG asks of form controls.
   ============================================================ */
:root { --err: #B3261E; --field: #9A8E7C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --err: #F2B8B5; --field: #6E6454; } }
:root[data-theme="dark"] { --err: #F2B8B5; --field: #6E6454; }

.mem-top { padding-bottom: 0; }
.mem-lede { font-size: 1.08rem; max-width: 62ch; }
.mem-objects {
  max-width: 70ch; margin: 18px 0 0; padding: 14px 18px; font-size: .95rem; color: var(--ink-soft);
  background: var(--paper-2); border-left: 3px solid var(--gold); border-radius: 0 var(--r) var(--r) 0;
}
.mem-objects b { color: var(--ink); }
.mem-sec { padding-top: 28px; }
.mem-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 961px) {
  .mem-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; }
  .mem-side { position: sticky; top: 92px; }
}
.mem-prev { grid-column: 1 / -1; margin: 0; }

.mform fieldset.mf-step {
  margin: 0 0 18px; padding: 22px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow);
}
/* float + width keeps the legend inside the box in every browser */
.mf-step > legend {
  float: left; width: 100%; padding: 0; margin: 0 0 12px;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--serif); font-size: 1.45rem; font-weight: 600; color: var(--ink); line-height: 1.2;
}
.mf-step > legend + * { clear: both; }
.mf-n {
  flex: none; width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center;
  font-family: var(--sans); font-size: .95rem; font-weight: 700;
  background: color-mix(in srgb, var(--saffron) 14%, transparent); color: var(--tag);
}
.mf-hint { margin: 0 0 14px; color: var(--ink-soft); font-size: .97rem; line-height: 1.55; }

.mf-field { margin: 0 0 16px; min-width: 0; }
.mf-field > label { display: block; margin: 0 0 6px; font-weight: 600; font-size: 1rem; color: var(--ink); }
.mf-lab-hint { font-weight: 400; font-size: .9rem; color: var(--ink-soft); margin-left: 4px; }
.mform input:not([type="radio"]):not([type="checkbox"]), .mform select, .mform textarea {
  display: block; width: 100%; min-height: 52px; padding: 12px 14px;
  font: inherit; font-size: 1.06rem; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--field); border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.mform textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.mform select {
  appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%238A7E6C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.mform input:focus, .mform select:focus, .mform textarea:focus {
  outline: none; border-color: var(--saffron);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--saffron) 26%, transparent);
}
.mf-row { display: grid; gap: 0 14px; }
@media (min-width: 600px) {
  .mf-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mf-row-title { grid-template-columns: 180px minmax(0, 1fr); }
  .mf-row:has(.mf-narrow) { grid-template-columns: minmax(0, 1fr) 190px; }
}

/* choices: big tappable cards and pills, the whole thing is the target */
.mf-types { display: grid; gap: 12px; }
@media (min-width: 700px) { .mf-types { grid-template-columns: 1fr 1fr; } }
.mf-type {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px; cursor: pointer;
  border: 2px solid var(--line); border-radius: var(--r-lg); background: var(--paper);
  transition: border-color .15s, background .15s;
}
.mf-type:hover { border-color: var(--gold-faint); }
.mf-type:has(input:checked) {
  border-color: var(--saffron); background: color-mix(in srgb, var(--saffron) 8%, var(--surface));
}
.mf-type:has(input:focus-visible), .mf-pill:has(input:focus-visible), .mf-chip:has(input:focus-visible),
.mf-check:has(input:focus-visible) { box-shadow: 0 0 0 4px color-mix(in srgb, var(--saffron) 30%, transparent); }
.mform input[type="radio"], .mform input[type="checkbox"] {
  flex: none; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--saffron); cursor: pointer;
}
.mf-type-body { display: grid; gap: 4px; }
.mf-type-body b { font-size: 1.1rem; }
.mf-price { font-family: var(--serif); font-size: 1.75rem; font-weight: 600; line-height: 1.1; color: var(--ink); font-variant-numeric: lining-nums; }
.mf-price i { font-family: var(--sans); font-style: normal; font-size: .88rem; font-weight: 500; color: var(--ink-soft); }
.mf-type-note { font-size: .92rem; color: var(--ink-soft); line-height: 1.5; }

.mf-yesno, .mf-pays, .mf-areas { display: flex; flex-wrap: wrap; gap: 10px; }
.mf-pill, .mf-chip {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  border: 2px solid var(--line); border-radius: 999px; background: var(--paper);
  transition: border-color .15s, background .15s;
}
.mf-pill { min-height: 54px; padding: 10px 22px 10px 16px; font-weight: 600; font-size: 1.02rem; }
.mf-chip { min-height: 48px; padding: 8px 16px 8px 12px; font-size: .97rem; }
.mf-pill input, .mf-chip input { margin: 0; }
.mf-pill:has(input:checked), .mf-chip:has(input:checked) {
  border-color: var(--saffron); background: color-mix(in srgb, var(--saffron) 10%, var(--surface));
}
.mf-vol { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.mf-vol .mf-field { margin: 16px 0 0; }

.mf-decl { display: grid; gap: 10px; }
.mf-check {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--paper);
  font-size: .98rem; line-height: 1.55; transition: border-color .15s, background .15s;
}
.mf-check:has(input:checked) {
  border-color: color-mix(in srgb, var(--ok) 55%, var(--line));
  background: color-mix(in srgb, var(--ok) 7%, var(--surface));
}
.mf-sign { display: grid; gap: 0 18px; margin-top: 20px; align-items: end; }
@media (min-width: 600px) { .mf-sign { grid-template-columns: minmax(0, 1fr) auto; } }
.mform .mf-sign-in { font-family: var(--serif); font-size: 1.45rem; font-style: italic; }
.mf-date { margin: 0 0 16px; color: var(--ink-soft); white-space: nowrap; }
.mf-date b { color: var(--ink); }

/* errors: a border, a message beside the box, and a list at the top */
.mf-err {
  margin: 8px 0 0; color: var(--err); font-weight: 600; font-size: .97rem; line-height: 1.45;
  display: flex; gap: 8px; align-items: flex-start;
}
.mf-err::before {
  content: "!"; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 999px;
  display: grid; place-items: center; font-size: .8rem; font-weight: 800;
  background: var(--err); color: var(--surface);
}
.mf-err[hidden] { display: none; }
.has-err > input, .has-err > select, .has-err > textarea,
.mform .has-err input:not([type="radio"]):not([type="checkbox"]), .mform .has-err select { border-color: var(--err); border-width: 2px; }
.mf-types.has-err .mf-type, .mf-yesno.has-err .mf-pill, .mf-pays.has-err .mf-pill,
.mf-check.has-err { border-color: var(--err); }
.mf-summary {
  margin: 0 0 18px; padding: 18px 20px; border: 3px solid var(--err); border-radius: var(--r-lg);
  background: var(--surface);
}
.mf-summary:focus { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--err) 25%, transparent); }
.mf-summary h2 { font-size: 1.3rem; margin: 0 0 .4em; }
.mf-summary ul { margin: 0; padding-left: 1.2em; }
.mf-summary li { margin: .3em 0; }
.mf-summary a { color: var(--err); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.mf-trap { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.mf-send { margin: 24px 0 0; text-align: center; }
.mf-send .btn { width: 100%; max-width: 440px; min-height: 60px; font-size: 1.12rem; }
.mf-send .btn:disabled { opacity: .7; cursor: progress; transform: none; }

/* side panel */
.mem-side .card { padding: 22px; }
.mem-side .card + .card { margin-top: 16px; }
.mem-side h3 { font-size: 1.25rem; }
.mem-next ol { margin: 0; padding-left: 1.3em; display: grid; gap: 10px; color: var(--ink-soft); font-size: .96rem; line-height: 1.5; }
.mem-next b { color: var(--ink); }
.mem-ref-eg { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); white-space: nowrap; }
.mem-privacy p { font-size: .94rem; }

/* sent */
.mem-done { grid-column: 1 / -1; width: 100%; max-width: 760px; margin: 0 auto; outline: none; }
.mem-done-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.mem-done-head h2 { margin: 0; }
.mem-tick {
  flex: none; width: 58px; height: 58px; border-radius: 999px; display: grid; place-items: center;
  background: var(--ok); color: var(--ok-ink);
}
.mem-tick svg { width: 30px; height: 30px; }
.mem-ref {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 18px 22px; margin-bottom: 12px;
  border-radius: var(--r-lg); border: 1px solid var(--gold-faint);
  background: color-mix(in srgb, var(--saffron) 9%, var(--surface));
}
.mem-ref span { flex-basis: 100%; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tag); }
.mem-ref b { font-family: var(--serif); font-size: clamp(1.8rem, 6vw, 2.4rem); letter-spacing: .03em; font-variant-numeric: lining-nums tabular-nums; }
.mem-pay { margin-top: 18px; }
.mem-pay h3 { font-variant-numeric: lining-nums; }
.mem-pay h3 .faint { font-family: var(--sans); font-size: .9rem; font-weight: 500; }
.mem-pay-other { margin: 14px 0 0; }
.mem-done-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.mem-done-cta .btn { min-height: 48px; }

@media print {
  .site-head, .site-foot, .tabbar, .install, .mem-done-cta, .copy-btn, .mem-top { display: none !important; }
  .mem-done { max-width: none; }
  body { background: #fff; }
}

/* ---- membership, admin side ---- */
.mem-filter { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); align-items: end; margin-top: 18px; }
.mem-filter .audit-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.mem-list { display: grid; gap: 8px; margin-top: 22px; }
.mem-row {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto auto; gap: 6px 16px; align-items: center;
  padding: 14px 18px; border-radius: var(--r); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.mem-row:hover { text-decoration: none; border-color: var(--gold-faint); }
.mem-row-ref { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tag); white-space: nowrap; }
.mem-row-who { display: grid; min-width: 0; }
.mem-row-who .faint { font-size: .86rem; }
.mem-row-when { font-size: .84rem; white-space: nowrap; }
.mem-st {
  justify-self: start; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  font-size: .74rem; font-weight: 700; background: var(--paper-2); color: var(--ink-soft);
}
.mem-st.st-new { background: var(--tag); color: var(--tag-ink); }
.mem-st.st-paid { background: color-mix(in srgb, var(--saffron) 16%, transparent); color: var(--ink); }
.mem-st.st-approved { background: var(--ok); color: var(--ok-ink); }
@media (max-width: 720px) {
  .mem-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mem-row-who { grid-column: 1 / -1; order: 3; }
  .mem-row-when { display: none; }
}
.mem-dl { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px 14px; margin: 0; font-size: .96rem; }
.mem-dl dt { color: var(--ink-faint); font-weight: 600; font-size: .86rem; padding-top: 2px; }
.mem-dl dd { margin: 0; overflow-wrap: anywhere; }
.mem-official .fld input, .mem-official .fld select, .mem-official .fld textarea { min-height: 46px; }
@media (max-width: 560px) { .mem-dl { grid-template-columns: 1fr; gap: 2px; } .mem-dl dd { margin-bottom: 10px; } }
/* land below the sticky header when jumped to */
.mf-summary, .mem-done, .mform .mf-step, .mform input, .mform select, .mform textarea { scroll-margin-top: 96px; }
.nowrap { white-space: nowrap; }

/* ============================================================
   Fundraising appeal — home card, Donate page, and the ribbon.
   Warm and prominent without shouting: one saffron bar does the work.
   ============================================================ */
.appeal-bar { height: 14px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--saffron) 14%, var(--line)); }
.appeal-bar i {
  display: block; height: 100%; min-width: 10px; border-radius: inherit;
  background: linear-gradient(90deg, #A85F22, var(--saffron-lt));
  transition: width .8s ease;
}
.appeal-prog { margin: 20px 0 0; }
.appeal-nums { margin: 0 0 10px; font-size: 1.02rem; color: var(--ink-soft); display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.appeal-nums b { font-family: var(--serif); font-size: clamp(2rem, 6vw, 2.6rem); line-height: 1; color: var(--ink); font-variant-numeric: lining-nums; }
.appeal-pct {
  margin-left: auto; padding: 3px 11px; border-radius: 999px; font-size: .82rem; font-weight: 700;
  background: var(--tag); color: var(--tag-ink);
}
.appeal-asof { margin: 10px 0 0; font-size: .92rem; color: var(--ink-soft); }
.appeal-asof b { color: var(--ink); }
.appeal-intro { font-size: 1.05rem; color: var(--ink-soft); max-width: 60ch; }

/* home */
.appeal-sec { padding: clamp(10px, 2vw, 20px) 0 clamp(40px, 6vw, 64px); }
.appeal-card {
  position: relative; overflow: hidden; padding: clamp(22px, 4vw, 36px); border-radius: var(--r-lg);
  background:
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--saffron) 16%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--saffron) 7%, var(--surface)), var(--surface));
  border: 1px solid var(--gold-faint); box-shadow: var(--shadow-lg);
}
.appeal-card h2 { margin: 0 0 .35em; }
.appeal-card .appeal-intro { margin: 0; }
.appeal-chips { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 700px) { .appeal-chips { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.appeal-chips li {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
}
.appeal-chips .ico, .ap-ico .ico { width: 24px; height: 24px; color: var(--saffron); flex: none; }
.appeal-chips span { display: grid; min-width: 0; }
.appeal-chips b { font-size: .98rem; line-height: 1.3; }
.appeal-chips i { font-style: normal; font-weight: 600; color: var(--tag); font-size: .95rem; }
.appeal-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.appeal-cta .btn { min-height: 52px; }
.appeal-cta .ico { width: 20px; height: 20px; }
@media (max-width: 520px) { .appeal-cta .btn { flex: 1 1 100%; } }

/* Donate page */
.appeal-full { margin: 26px 0 8px; scroll-margin-top: 90px; }
.appeal-full-in { display: grid; gap: 24px; align-items: start; }
@media (min-width: 961px) { .appeal-full-in { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; } }
.appeal-main {
  padding: clamp(22px, 4vw, 34px); border-radius: var(--r-lg); border: 1px solid var(--gold-faint);
  background: linear-gradient(160deg, color-mix(in srgb, var(--saffron) 7%, var(--surface)), var(--surface));
  box-shadow: var(--shadow);
}
.appeal-main h2 { margin: 0 0 .35em; }
.appeal-projects { display: grid; gap: 14px; margin-top: 26px; }
.appeal-project { padding: 18px 20px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.appeal-project p { margin: .55em 0 0; color: var(--ink-soft); font-size: .98rem; line-height: 1.6; }
.ap-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ap-top h3 { margin: 0; font-size: 1.25rem; flex: 1; min-width: 12ch; }
.ap-ico {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--saffron) 12%, transparent);
}
.ap-amt {
  font-family: var(--serif); font-size: 1.45rem; font-weight: 600; color: var(--ink);
  font-variant-numeric: lining-nums; white-space: nowrap;
}
.appeal-give {
  padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow); scroll-margin-top: 90px;
}
@media (min-width: 961px) { .appeal-give { position: sticky; top: 92px; } }
.appeal-give h3 { margin: 0 0 .5em; font-size: 1.4rem; }
.appeal-give > p { color: var(--ink-soft); }
.aw-h { margin: 18px 0 8px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tag); }
.appeal-ways .bank { margin-top: 0; }
.aw-ref { font-size: .86rem; margin: 10px 0 0; }
.appeal-ga { margin-top: 6px; padding: 14px 16px 4px; border-radius: var(--r); background: color-mix(in srgb, var(--sage) 9%, var(--surface)); }
.appeal-ga .aw-h { margin-top: 0; color: var(--sage); }
.appeal-ga p { font-size: .95rem; color: var(--ink-soft); }
.appeal-closing { margin: 18px 0 .3em; font-family: var(--serif); font-size: 1.25rem; line-height: 1.35; color: var(--ink); }
.appeal-blessing { margin: 0; color: var(--tag); font-weight: 600; }

/* ribbon on every other page */
.appeal-ribbon {
  display: block; color: var(--ink); text-decoration: none;
  background: color-mix(in srgb, var(--saffron) 10%, var(--paper)); border-bottom: 1px solid var(--gold-faint);
}
.appeal-ribbon:hover { text-decoration: none; background: color-mix(in srgb, var(--saffron) 15%, var(--paper)); }
.ar-in { display: flex; align-items: center; gap: 8px 14px; min-height: 46px; padding-top: 6px; padding-bottom: 6px; font-size: .92rem; }
.ar-label { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tag); white-space: nowrap; }
.ar-text { white-space: nowrap; }
.ar-text b { font-variant-numeric: lining-nums; }
.ar-bar { flex: 1; min-width: 40px; max-width: 260px; height: 8px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--saffron) 16%, var(--line)); }
.ar-bar i { display: block; height: 100%; min-width: 6px; border-radius: inherit; background: var(--saffron); }
.ar-go { margin-left: auto; font-weight: 700; color: var(--tag); white-space: nowrap; }
.ar-short { display: none; }
@media (max-width: 520px) {
  .ar-long, .ar-raised { display: none; }
  .ar-short { display: inline; }
  .ar-in { gap: 8px 10px; }
  .ar-bar { max-width: none; }
}

/* admin */
.ap-raised .appeal-bar { height: 12px; }
.ap-row { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.ap-row .fld { flex: 1 1 200px; }
.ap-row .btn { min-height: 46px; }
.ap-check { display: flex; gap: 10px; align-items: center; }
.ap-check input { width: 22px; height: 22px; accent-color: var(--saffron); }
.ap-check span { margin: 0 !important; font-size: 1rem !important; color: var(--ink) !important; }
.ap-h4 { font-family: var(--sans); font-size: .95rem; margin: 24px 0 10px; }
.ap-h4 .faint { font-weight: 400; font-size: .85rem; }
.ap-project { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 14px 12px; margin: 0 0 12px; }
.ap-project legend { font-size: .8rem; font-weight: 700; color: var(--ink-soft); padding: 0 6px; }
.ap-prow { display: grid; gap: 0 12px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 560px) { .ap-prow { grid-template-columns: 1fr 1fr; } .ap-prow .fld:first-child { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .appeal-bar i { transition: none; } }
/* account numbers in the serif's old-style figures read as "5347I446"; use lining ones */
.bank .v { font-variant-numeric: lining-nums tabular-nums; }

/* ---- seasonal notice (Navaratri puja, etc.) ---- */
.season-sec { padding: clamp(10px, 2vw, 20px) 0 0; }
.season-card {
  display: flex; gap: 18px; align-items: flex-start; padding: clamp(20px, 4vw, 30px);
  border-radius: var(--r-lg); border: 2px solid color-mix(in srgb, var(--lotus) 40%, var(--gold-faint));
  background: linear-gradient(150deg, color-mix(in srgb, var(--lotus) 10%, var(--surface)), var(--surface));
  box-shadow: var(--shadow);
}
.season-ico {
  flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--lotus) 16%, transparent); color: var(--lotus);
}
.season-ico .ico { width: 28px; height: 28px; }
.season-body h2 { margin: 0 0 .4em; }
.season-body .eyebrow { margin-bottom: .4rem; color: var(--lotus); }
.season-body p:not(.eyebrow) { margin: 0 0 .6em; font-size: 1.04rem; color: var(--ink-soft); }
.season-body p:last-child { margin-bottom: 0; }
.season-body b { color: var(--ink); }
.season-times {
  display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  padding: 10px 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line);
  font-variant-numeric: lining-nums;
}
.season-times b { font-size: 1.12rem; }
.season-times span { font-size: .92rem; }
@media (max-width: 520px) { .season-card { flex-direction: column; gap: 12px; } }

/* ---- admin: app notifications ---- */
.push-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.push-quick .aw-h { flex-basis: 100%; }
.push-preview {
  display: grid; gap: 2px; margin: 4px 0 16px; padding: 12px 14px; border-radius: 16px;
  background: color-mix(in srgb, var(--ink) 6%, var(--paper)); border: 1px solid var(--line); font-size: .9rem;
}
.pp-app { font-size: .72rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.push-preview b { font-size: .95rem; }

/* ---- inside the app: notifications prompt ---- */
.app-notify {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 16px 0 0; padding: 16px 18px;
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--gold-faint); box-shadow: var(--shadow);
}
.app-notify p { margin: 0; flex: 1 1 200px; color: var(--ink-soft); }
.app-notify b { color: var(--ink); }
.app-notify .btn { min-height: 46px; }
.app-update { position: fixed; inset: auto 12px calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 90; }

.foot-admin { color: var(--ink-faint); font-size: .82rem; }

/* Under an iPhone's status bar and Dynamic Island (the app, or the site saved
   to the home screen) the header starts below them. Zero in a normal browser. */
.site-head { padding-top: env(safe-area-inset-top, 0px); }