/* ===========================================================================
   SARJAPURA AYYAPPA TEMPLE
   The palette is taken from the temple itself as it is photographed at dusk:
   brass lamplight, terracotta roof tile, black granite plinth and the cream of
   a kasavu border. Every one of those is a CSS variable, and the five seed
   colours are set from the admin console, so the whole site can be re-themed
   without touching this file.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   Only the five seeds below are configurable. Everything else is mixed from
   them, so a new theme stays internally consistent.
   --------------------------------------------------------------------------- */
:root{
  /* --- seeds, overwritten at boot from /api/public/site --- */
  --lamp:    #E9B049;   /* brass lamplight, the accent */
  --tile:    #B4462A;   /* terracotta roof, the call to action */
  --granite: #14100D;   /* the plinth, every dark surface */
  --sandal:  #F7F1E4;   /* the wall, every light surface */
  --ink:     #241A10;   /* text */

  /* --- derived --- */
  --lamp-bright: color-mix(in srgb, var(--lamp) 62%, #FFFFFF);
  --lamp-dim:    color-mix(in srgb, var(--lamp) 68%, #000000);
  --lamp-haze:   color-mix(in srgb, var(--lamp) 16%, transparent);

  --tile-bright: color-mix(in srgb, var(--tile) 82%, #FFFFFF);
  --tile-deep:   color-mix(in srgb, var(--tile) 78%, #000000);

  --granite-2:   color-mix(in srgb, var(--granite) 92%, var(--lamp));
  --granite-3:   color-mix(in srgb, var(--granite) 84%, var(--lamp));
  --granite-line:color-mix(in srgb, var(--granite) 72%, var(--lamp));
  --on-granite:  color-mix(in srgb, var(--sandal) 92%, var(--lamp));
  --on-granite-muted: color-mix(in srgb, var(--sandal) 55%, var(--granite));

  --sandal-2:    color-mix(in srgb, var(--sandal) 55%, #FFFFFF);
  --sandal-3:    color-mix(in srgb, var(--sandal) 88%, var(--ink));
  --sandal-line: color-mix(in srgb, var(--sandal) 80%, var(--ink));
  --ink-muted:   color-mix(in srgb, var(--ink) 62%, var(--sandal));

  --hero-overlay: .62;

  --display: "Cormorant Garamond", "Noto Serif Malayalam", Georgia, serif;
  --body: "Karla", "Noto Sans Malayalam", system-ui, -apple-system, sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 56px);
  --sec-y: clamp(64px, 9vw, 122px);
  --r: 4px;
  --lift: 0 18px 44px -24px color-mix(in srgb, var(--granite) 70%, transparent);
}

/* Each script gets a face that actually draws it. */
html[lang="ta"]{ --display:"Noto Serif Tamil","Cormorant Garamond",serif; --body:"Noto Sans Tamil",system-ui,sans-serif; }
html[lang="kn"]{ --display:"Noto Serif Kannada","Cormorant Garamond",serif; --body:"Noto Sans Kannada",system-ui,sans-serif; }
html[lang="hi"]{ --display:"Noto Serif Devanagari","Cormorant Garamond",serif; --body:"Noto Sans Devanagari",system-ui,sans-serif; }
html[lang="ml"]{ --display:"Noto Serif Malayalam","Cormorant Garamond",serif; --body:"Noto Sans Malayalam",system-ui,sans-serif; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--sandal);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--lamp); outline-offset:3px; border-radius:2px; }

section[id], main a[id]{ scroll-margin-top:86px; }
#book{ scroll-margin-top:100px; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--lamp); color:var(--granite); padding:12px 18px; font-weight:700;
}
.skip:focus{ left:12px; top:12px; }

/* ---- the kasavu rule: a cream band between two gold threads ---------------- */
.kasavu{
  height:7px; border-block:1px solid var(--lamp);
  background:repeating-linear-gradient(90deg,
    var(--lamp-haze) 0 2px, transparent 2px 9px);
}

/* ---- type scale ---- */
.eyebrow{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tile); margin:0 0 15px;
}
.eyebrow.on-dark{
  color:var(--lamp);
  text-shadow:0 1px 10px color-mix(in srgb, var(--granite) 80%, transparent);
}
.h-sec{
  font-family:var(--display); font-weight:500; letter-spacing:.005em;
  font-size:clamp(2rem, 4.6vw, 3.4rem); line-height:1.1;
  margin:0 0 .45rem;
}
.lede{ font-size:1.05rem; color:var(--ink-muted); max-width:62ch; margin:0; }
.lede.on-dark{ color:var(--on-granite-muted); }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--body); font-weight:700; font-size:.93rem; line-height:1.3;
  padding:14px 26px; border-radius:var(--r); border:1px solid transparent;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:transform .2s, background .2s, border-color .2s, color .2s, box-shadow .2s;
}
@media (hover:hover){ .btn:hover{ transform:translateY(-2px); } }
.btn-primary{
  background:var(--tile); color:#fff;
  box-shadow:0 10px 24px -14px var(--tile-deep);
}
.btn-primary:hover{ background:var(--tile-bright); }
.btn-ghost{
  border-color:color-mix(in srgb, var(--lamp) 42%, transparent);
  color:var(--on-granite); background:color-mix(in srgb, var(--granite) 45%, transparent);
  backdrop-filter:blur(5px);
}
.btn-ghost:hover{ border-color:var(--lamp); color:var(--lamp); }
.btn-ghost-light{ border-color:var(--sandal-line); color:var(--ink); background:transparent; }
.btn-ghost-light:hover{ border-color:var(--tile); color:var(--tile); background:var(--sandal-2); }
.btn-sm{ padding:10px 17px; font-size:.84rem; }

/* ===========================================================================
   2. HEADER
   =========================================================================== */
.hdr{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--granite) 92%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--granite-line);
}
.hdr-in{ display:flex; align-items:center; gap:16px; min-height:70px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; }
.brand svg{ width:30px; height:30px; flex:none; color:var(--lamp); }
.brand-name{
  font-family:var(--display); font-weight:600; color:var(--on-granite);
  font-size:1.14rem; line-height:1.2; letter-spacing:.01em;
}
.brand-sub{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.2em;
  color:var(--lamp); text-transform:uppercase;
}
.nav{ display:flex; gap:26px; }
.nav a{
  color:var(--on-granite-muted); text-decoration:none; font-size:.89rem; font-weight:500;
  padding:6px 0; border-bottom:1px solid transparent; transition:color .18s, border-color .18s;
}
.nav a:hover{ color:var(--lamp); border-bottom-color:var(--lamp); }

.lang{ position:relative; display:flex; align-items:center; }
.lang svg{ position:absolute; right:9px; width:11px; height:11px; color:var(--on-granite-muted); pointer-events:none; }
#lang{
  appearance:none; -webkit-appearance:none;
  background:transparent; border:1px solid var(--granite-line); border-radius:var(--r);
  color:var(--on-granite); font-family:var(--body); font-size:.85rem;
  padding:8px 26px 8px 11px; cursor:pointer;
}
#lang:hover{ border-color:var(--lamp); }
#lang option{ background:var(--granite-2); color:var(--on-granite); }

.menu-btn{
  display:none; background:none; border:1px solid var(--granite-line);
  border-radius:var(--r); color:var(--on-granite); padding:8px 11px; cursor:pointer;
}
.mobile-bar{ display:none; }

@media (max-width:1040px){
  .nav{
    position:fixed; inset:70px 0 auto 0; flex-direction:column; gap:0;
    background:var(--granite); border-bottom:1px solid var(--granite-line);
    padding:8px var(--gut) 20px; display:none; max-height:calc(100vh - 70px); overflow:auto;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:14px 0; border-bottom:1px solid var(--granite-line); }
  .menu-btn{ display:block; }
  .hdr .btn-primary{ display:none; }
  .mobile-bar{
    display:grid; grid-template-columns:1fr auto; gap:10px;
    position:fixed; inset:auto 0 0 0; z-index:60;
    padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--granite) 94%, transparent);
    border-top:1px solid var(--granite-line); backdrop-filter:blur(10px);
  }
  body{ padding-bottom:74px; }
}

/* ===========================================================================
   3. HERO
   =========================================================================== */
.hero{ position:relative; overflow:hidden; background:var(--granite); isolation:isolate; }
.hero-bg{ position:absolute; inset:0; }
.hero-bg span{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.6s ease; transform:scale(1.04);
}
.hero-bg span.on{ opacity:1; }
.bg1{ background-image:var(--img1); }
.bg2{ background-image:var(--img2); }
.bg3{ background-image:var(--img3); }
.hero-scrim{
  position:absolute; inset:0;
  background:
    /* heaviest under the copy on the left, so the headline always reads
       whatever photograph an administrator puts behind it */
    linear-gradient(to right,
      color-mix(in srgb, var(--granite) calc(var(--hero-overlay) * 145%), transparent) 0%,
      color-mix(in srgb, var(--granite) calc(var(--hero-overlay) * 125%), transparent) 38%,
      color-mix(in srgb, var(--granite) calc(var(--hero-overlay) * 62%), transparent) 72%,
      color-mix(in srgb, var(--granite) calc(var(--hero-overlay) * 40%), transparent) 100%),
    linear-gradient(to top,
      color-mix(in srgb, var(--granite) 96%, transparent) 0%,
      transparent 46%);
}
.hero-in{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr);
  gap:clamp(28px,5vw,64px); align-items:center;
  padding-block:clamp(84px,13vw,168px) clamp(72px,10vw,120px);
}
.hero-title{
  font-family:var(--display); font-weight:600; color:var(--sandal-2);
  font-size:clamp(2.5rem, 7vw, 5.1rem); line-height:1.02; letter-spacing:-.01em;
  margin:0 0 20px; text-wrap:balance;
  text-shadow:0 2px 30px color-mix(in srgb, var(--granite) 80%, transparent);
}
.hero-title span{ display:block; }
.hero-title .line2{ color:var(--lamp); }
.hero-lede{
  color:color-mix(in srgb, var(--sandal) 86%, var(--granite));
  font-size:clamp(1rem,1.35vw,1.12rem);
  max-width:46ch; margin:0 0 30px;
  text-shadow:0 1px 14px color-mix(in srgb, var(--granite) 85%, transparent);
}
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---- the "right now" card ---- */
.now{
  background:color-mix(in srgb, var(--granite-2) 88%, transparent);
  border:1px solid var(--granite-line); border-radius:var(--r);
  padding:26px 26px 22px; backdrop-filter:blur(10px);
  box-shadow:var(--lift);
}
.now-label{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--lamp); margin:0 0 10px;
}
.now-state{
  display:flex; align-items:center; gap:10px; margin:0 0 6px;
  font-family:var(--display); font-size:1.5rem; font-weight:600; color:var(--sandal-2);
  line-height:1.2;
}
.now .dot{
  width:9px; height:9px; border-radius:50%; flex:none; background:var(--ink-muted);
}
.now.is-open .dot{
  background:#4CAF6D; box-shadow:0 0 0 5px color-mix(in srgb,#4CAF6D 22%, transparent);
  animation:pulse 2.4s infinite;
}
.now.is-shut .dot{ background:var(--tile-bright); }
@keyframes pulse{ 50%{ box-shadow:0 0 0 10px color-mix(in srgb,#4CAF6D 0%, transparent); } }
.now-sub{ color:var(--on-granite-muted); font-size:.92rem; margin:0 0 20px; }
.now-next{ border-top:1px solid var(--granite-line); padding-top:18px; }
.now-next-t{
  font-family:var(--mono); font-size:1.55rem; color:var(--lamp); letter-spacing:.02em;
}
.now-next-n{ color:var(--sandal-2); font-size:.98rem; }

/* ---- hero thumbnails ---- */
.shots{ grid-column:1 / -1; display:flex; gap:10px; }
.shot{
  width:96px; height:66px; padding:0; border-radius:3px; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--lamp) 30%, transparent);
  overflow:hidden; background:none; opacity:.55; transition:opacity .25s, border-color .25s, transform .25s;
}
.shot span{ display:block; width:100%; height:100%; background-size:cover; background-position:center; }
.shot[aria-current="true"]{ opacity:1; border-color:var(--lamp); transform:translateY(-3px); }
.shot:hover{ opacity:1; }

.credit{
  position:relative; z-index:2; margin:0;
  padding:0 var(--gut) 16px; text-align:right;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
  color:color-mix(in srgb, var(--sandal) 38%, transparent);
}

@media (max-width:900px){
  .hero-in{ grid-template-columns:1fr; }
  .now{ max-width:none; }
  .shots{ display:none; }
}

/* ===========================================================================
   4. THE TEMPLE DAY
   =========================================================================== */
.day{
  background:var(--granite); color:var(--sandal-2); padding-block:var(--sec-y);
  border-block:1px solid var(--granite-line);
  background-image:radial-gradient(ellipse at 20% 0%, var(--lamp-haze), transparent 55%);
}
.day-head{ margin-bottom:clamp(34px,5vw,56px); }
.day-head .h-sec{ color:var(--sandal-2); }
.day-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr); gap:clamp(28px,5vw,64px); }

.rail{ list-style:none; margin:0; padding:0; }
.rite{
  display:grid; grid-template-columns:32px 92px 1fr; gap:16px; align-items:start;
  padding:15px 0; border-bottom:1px solid var(--granite-line);
  opacity:.45; transition:opacity .4s;
}
.rite.done{ opacity:1; }
.rite .lamp{ width:22px; height:22px; color:var(--granite-line); transition:color .4s; margin-top:2px; }
.rite.done .lamp{ color:var(--lamp); }
.rite.now .lamp .flame{ animation:flicker 2.6s ease-in-out infinite; transform-origin:center bottom; }
@keyframes flicker{ 50%{ opacity:.55; transform:scaleY(.86); } }
.rite-t{ font-family:var(--mono); font-size:.92rem; color:var(--lamp); letter-spacing:.02em; }
.rite.done.now .rite-t{ color:var(--lamp-bright); }
.rite-n{ display:block; font-size:1.06rem; color:var(--sandal-2); }
.rite-note{ display:block; font-size:.84rem; color:var(--on-granite-muted); }

.panch{
  background:var(--granite-2); border:1px solid var(--granite-line); border-radius:var(--r);
  padding:26px; align-self:start;
}
.panch h3{
  font-family:var(--display); font-weight:600; font-size:1.34rem; margin:0 0 18px;
  color:var(--lamp);
}
.panch dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:9px 18px; }
.panch dt{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-granite-muted); align-self:center;
}
.panch dd{ margin:0; text-align:right; color:var(--sandal-2); font-size:.97rem; }
.panch dd.warn{ color:var(--tile-bright); font-family:var(--mono); font-size:.9rem; }
.panch-foot{
  margin:20px 0 0; padding-top:16px; border-top:1px solid var(--granite-line);
  font-size:.82rem; color:var(--on-granite-muted); line-height:1.6;
}

@media (max-width:860px){
  .day-grid{ grid-template-columns:1fr; }
  .rite{ grid-template-columns:26px 78px 1fr; gap:12px; }
}

/* ===========================================================================
   5. SECTIONS
   =========================================================================== */
.section{ padding-block:var(--sec-y); }
.section--alt{ background:var(--sandal-3); border-block:1px solid var(--sandal-line); }
.sec-head{ margin-bottom:clamp(30px,4.5vw,52px); }

.about-grid{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.8fr); gap:clamp(30px,5vw,64px); }
.about-grid p{ margin:0 0 1.15em; }
.about-grid p:last-child{ margin-bottom:0; }

.plaque{
  background:var(--granite); color:var(--sandal-2); border-radius:var(--r);
  padding:28px; align-self:start; box-shadow:var(--lift);
  border-top:3px solid var(--lamp);
}
.plaque h3{
  font-family:var(--display); font-weight:600; font-size:1.3rem; margin:0 0 18px; color:var(--lamp);
}
.plaque dl{ margin:0; }
.plaque .row{
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--granite-line);
}
.plaque .row:last-child{ border-bottom:0; }
.plaque dt{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-granite-muted);
}
.plaque dd{ margin:0; text-align:right; font-size:.95rem; }

@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; } }

/* ---- shrines ---- */
/* Real gaps rather than a 1px grid, so an odd number of shrines does not
   leave a hole where a card should be. */
.deities{ display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:14px; }
.deity{
  background:var(--sandal-2); padding:30px 26px 26px; border-radius:var(--r);
  border:1px solid var(--sandal-line); border-top:2px solid var(--lamp);
  transition:transform .25s, box-shadow .25s;
}
@media (hover:hover){
  .deity:hover{ transform:translateY(-3px); box-shadow:var(--lift); }
}
.deity .glyph{ width:34px; height:34px; color:var(--tile); margin-bottom:18px; }
.deity h3{ font-family:var(--display); font-weight:600; font-size:1.42rem; margin:0 0 9px; }
.deity p{ margin:0 0 16px; font-size:.93rem; color:var(--ink-muted); }
.deity .where{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tile);
}

/* ---- festivals ---- */
.events{ border-top:1px solid var(--sandal-line); }
.event{
  display:grid; grid-template-columns:130px 1fr auto; gap:clamp(16px,3vw,36px);
  align-items:start; padding:26px 0; border-bottom:1px solid var(--sandal-line);
  transition:background .2s;
}
.event:hover{ background:var(--sandal-2); }
.event-date{
  font-family:var(--mono); font-size:1.02rem; color:var(--tile); letter-spacing:.01em;
}
.event-date small{
  display:block; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-muted); margin-top:4px;
}
.event h3{ font-family:var(--display); font-weight:600; font-size:1.5rem; margin:0 0 6px; }
.event p{ margin:0; font-size:.93rem; color:var(--ink-muted); max-width:58ch; }
.event .tag{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-muted); border:1px solid var(--sandal-line); border-radius:999px;
  padding:5px 13px; white-space:nowrap; background:var(--sandal-2);
}
@media (max-width:760px){
  .event{ grid-template-columns:1fr; gap:10px; }
  .event .tag{ justify-self:start; }
}

/* ---- sevas ---- */
.seva-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.85fr); gap:clamp(28px,5vw,60px); }
.sevas{ list-style:none; margin:0; padding:0; border-top:1px solid var(--sandal-line); }
.seva{
  display:grid; grid-template-columns:1fr auto auto; gap:18px; align-items:center;
  padding:16px 0; border-bottom:1px solid var(--sandal-line);
}
.seva-n{ font-size:1.02rem; }
.seva-p{ font-family:var(--mono); color:var(--tile); font-size:1rem; }

.donate{
  background:var(--granite); color:var(--sandal-2); border-radius:var(--r);
  padding:30px; align-self:start; box-shadow:var(--lift);
  border-top:3px solid var(--lamp);
}
.donate h3{ font-family:var(--display); font-weight:600; font-size:1.55rem; margin:0 0 12px; color:var(--lamp); }
.donate p{ font-size:.93rem; color:var(--on-granite-muted); margin:0 0 22px; }
.donate .btn{ width:100%; }
.pay{ display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.pay span{
  font-family:var(--mono); font-size:.57rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-granite-muted); border:1px solid var(--granite-line); border-radius:3px;
  padding:5px 9px;
}
@media (max-width:860px){ .seva-grid{ grid-template-columns:1fr; } }

/* ===========================================================================
   6. GALLERY
   =========================================================================== */
.gal-tabs{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:14px; }
.gal-tab{
  font-family:var(--body); font-size:.85rem; font-weight:700; cursor:pointer;
  background:transparent; color:var(--ink-muted);
  border:1px solid var(--sandal-line); border-radius:999px; padding:8px 18px;
  transition:background .2s, color .2s, border-color .2s;
}
.gal-tab:hover{ border-color:var(--tile); color:var(--tile); }
.gal-tab[aria-pressed="true"]{ background:var(--granite); color:var(--lamp); border-color:var(--granite); }
.gal-tab .count{ font-family:var(--mono); font-size:.72em; opacity:.62; margin-left:.5em; }
.album-note{ margin:0 0 24px; color:var(--ink-muted); font-size:.95rem; max-width:62ch; min-height:1.5em; }

.gal{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.tile{
  margin:0; border-radius:var(--r); overflow:hidden; background:var(--granite);
  position:relative; aspect-ratio:4/3; box-shadow:var(--lift);
}
.tile.hide{ display:none; }
.tile a{ display:block; width:100%; height:100%; text-decoration:none; }
.tile img, .tile .ph{
  width:100%; height:100%; object-fit:cover; background-size:cover; background-position:center;
  display:block; transition:transform .6s ease;
}
@media (hover:hover){ .tile:hover img, .tile:hover .ph{ transform:scale(1.06); } }
.tile .ph.is-placeholder{ background:linear-gradient(155deg, var(--granite-3), var(--granite)); }
.tile figcaption{
  position:absolute; inset:auto 0 0 0; padding:44px 16px 15px; pointer-events:none;
  background:linear-gradient(to top, color-mix(in srgb, var(--granite) 94%, transparent), transparent);
  color:var(--sandal-2);
}
.tile figcaption small{
  display:block; font-family:var(--mono); font-size:.57rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--lamp); margin-bottom:4px;
}
.tile figcaption b{ font-family:var(--display); font-weight:600; font-size:1.1rem; }

/* ---- lightbox ---- */
.lightbox{
  position:fixed; inset:0; z-index:120; display:none; place-items:center;
  background:color-mix(in srgb, var(--granite) 96%, transparent);
  padding:clamp(12px,4vw,48px);
}
.lightbox.on{ display:grid; }
.lightbox img{ max-width:100%; max-height:80vh; object-fit:contain; border-radius:2px; }
.lightbox figcaption{ color:var(--sandal-2); text-align:center; margin-top:18px; font-size:.97rem; }
.lightbox figcaption small{
  display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--lamp); margin-bottom:6px;
}
.lightbox .close{
  position:absolute; top:16px; right:18px; background:none; border:0; cursor:pointer;
  color:var(--sandal-2); font-size:2rem; line-height:1; padding:6px 12px;
}
.lightbox .nav-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:color-mix(in srgb, var(--granite-2) 70%, transparent);
  border:1px solid var(--granite-line); border-radius:var(--r);
  color:var(--sandal-2); font-size:1.5rem; line-height:1; padding:12px 17px; cursor:pointer;
}
.lightbox .nav-btn:hover{ border-color:var(--lamp); color:var(--lamp); }
.lightbox .prev{ left:clamp(8px,2vw,28px); }
.lightbox .next{ right:clamp(8px,2vw,28px); }
@media (max-width:640px){ .lightbox .nav-btn{ display:none; } }

/* ===========================================================================
   7. LIVE DARSHAN
   =========================================================================== */
.darshan{
  background:var(--granite); color:var(--sandal-2); padding-block:var(--sec-y);
  background-image:radial-gradient(ellipse at 80% 100%, var(--lamp-haze), transparent 60%);
}
.darshan .h-sec{ color:var(--sandal-2); }
.darshan-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(28px,5vw,60px); align-items:center; }
.player{
  aspect-ratio:16/9; border-radius:var(--r); overflow:hidden;
  background:var(--granite-2); border:1px solid var(--granite-line);
  display:grid; place-items:center; text-align:center; padding:24px;
  box-shadow:var(--lift);
}
.player svg{ width:42px; height:42px; color:var(--lamp); opacity:.75; margin-bottom:12px; }
.player p{ margin:0; font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-granite-muted); }
.player iframe{ width:100%; height:100%; border:0; display:block; }
@media (max-width:860px){ .darshan-grid{ grid-template-columns:1fr; } }

/* ===========================================================================
   8. VISIT
   =========================================================================== */
.visit-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(28px,5vw,60px); }
.addr{ font-style:normal; font-size:1rem; line-height:1.9; margin-bottom:22px; }
.addr a{ color:var(--tile); text-decoration:none; border-bottom:1px solid var(--sandal-line); }
.addr a:hover{ border-bottom-color:var(--tile); }
.map{
  aspect-ratio:16/10; border-radius:var(--r); overflow:hidden;
  background:var(--sandal-2); border:1px solid var(--sandal-line);
  display:grid; place-items:center; text-align:center; padding:22px; gap:10px;
}
.map svg{ width:30px; height:30px; color:var(--tile); }
.map p{ margin:0; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-muted); }
.map iframe{ width:100%; height:100%; min-height:220px; border:0; display:block; }

.field{ margin-bottom:17px; }
.field label{
  display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-muted); margin-bottom:7px;
}
.field input, .field select, .field textarea{
  width:100%; font-family:var(--body); font-size:1rem; color:var(--ink);
  padding:13px 15px; border:1px solid var(--sandal-line); border-radius:var(--r);
  background:var(--sandal-2);
}
.field textarea{ min-height:118px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--lamp);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--lamp) 22%, transparent);
}
.form-msg{ margin:14px 0 0; font-size:.9rem; color:var(--tile); opacity:0; transition:opacity .25s; }
.form-msg.show{ opacity:1; }

/* ===========================================================================
   9. FOOTER
   =========================================================================== */
.ftr{
  background:var(--granite); color:var(--on-granite-muted);
  padding-block:clamp(44px,6vw,76px) 26px;
  border-top:3px solid var(--lamp);
}
.ftr-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(24px,4vw,52px); }
.ftr-brand{
  font-family:var(--display); font-weight:600; font-size:1.34rem;
  color:var(--sandal-2); margin:0 0 10px;
}
.ftr p{ margin:0; font-size:.88rem; max-width:44ch; }
.ftr h4{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--lamp); margin:0 0 14px; font-weight:500;
}
.ftr ul{ list-style:none; margin:0; padding:0; }
.ftr li{ margin-bottom:9px; font-size:.9rem; }
.ftr a{ text-decoration:none; }
.ftr a:hover{ color:var(--lamp); }
.ftr-btm{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-top:clamp(34px,5vw,56px); padding-top:22px;
  border-top:1px solid var(--granite-line);
  font-size:.76rem;
}

/* ===========================================================================
   10. REVEAL, BOOT, MOTION
   =========================================================================== */
.rv{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
.rv.in{ opacity:1; transform:none; }

body.loading main, body.loading .ftr, body.loading .hdr{ opacity:0; }
main, .ftr, .hdr{ opacity:1; transition:opacity .4s ease; }

.boot{
  position:fixed; inset:0; z-index:200; display:none; place-items:center;
  background:var(--granite); color:var(--lamp);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
}
body.loading .boot{ display:grid; }
.boot-error{
  position:fixed; inset:0; z-index:201; display:none; place-items:center;
  background:var(--granite); color:var(--sandal-2); padding:24px; text-align:center;
}
body.boot-failed .boot-error{ display:grid; }
body.boot-failed .boot{ display:none; }
.boot-error h2{ font-family:var(--display); font-weight:600; margin:0 0 12px; font-size:1.7rem; }
.boot-error p{ max-width:46ch; margin:0 auto 20px; color:var(--on-granite-muted); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; }
  .rite.now .lamp .flame{ animation:none; }
  .now.is-open .dot{ animation:none; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}


/* ===========================================================================
   14. THE OFFERING SHEET
   A sheet rather than a page: most devotees arrive on a phone, and a bottom
   sheet keeps the temple behind it rather than navigating away.
   =========================================================================== */
.sheet{
  position:fixed; inset:0; z-index:130; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:color-mix(in srgb, var(--granite) 82%, transparent);
  backdrop-filter:blur(3px);
}
.sheet.on{ display:flex; }
.sheet-card{
  position:relative; width:100%; max-width:520px; max-height:92dvh; overflow:auto;
  background:var(--sandal-2); border-radius:10px; padding:32px 30px;
  border-top:3px solid var(--lamp); box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.sheet-close{
  position:absolute; top:10px; right:12px; background:none; border:0; cursor:pointer;
  font-size:1.9rem; line-height:1; color:var(--ink-muted); padding:6px 10px;
}
.sheet-close:hover{ color:var(--tile); }
.step-eyebrow{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tile); margin:0 0 10px;
}
.sheet-title{
  font-family:var(--display); font-weight:600; font-size:1.8rem; line-height:1.15; margin:0 0 10px;
}
.sheet-lede{ color:var(--ink-muted); font-size:.92rem; margin:0 0 20px; }
.sheet-ref{ font-size:.9rem; color:var(--ink-muted); margin:0 0 18px; }
.sheet-ref b{ font-family:var(--mono); color:var(--tile); letter-spacing:.04em; }

.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:460px){ .field-row{ grid-template-columns:1fr; gap:0; } }
.btn-block{ width:100%; }

.qr-box{
  background:#fff; border:1px solid var(--sandal-line); border-radius:var(--r);
  padding:18px; text-align:center; margin-bottom:18px;
}
.qr-box img{ width:100%; max-width:240px; margin:0 auto 12px; border-radius:2px; }
.qr-upi{
  font-family:var(--mono); font-size:.82rem; color:var(--ink); margin:0 0 12px;
  word-break:break-all;
}

.done-mark{
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--lamp) 26%, transparent); color:var(--tile);
  margin:0 0 18px;
}
.done-mark svg{ width:28px; height:28px; }

.seva input[type=file], .sheet input[type=file]{
  width:100%; font-family:var(--body); font-size:.95rem; padding:11px;
  border:1px dashed var(--sandal-line); border-radius:var(--r); background:#fff;
}

@media (max-width:560px){
  .sheet{ align-items:flex-end; padding:0; }
  .sheet-card{
    max-width:none; border-radius:14px 14px 0 0; max-height:94dvh;
    padding:28px 20px calc(24px + env(safe-area-inset-bottom));
  }
}