/* Self-hosted Devanagari face — Noto Sans Devanagari v2.001 (fonts-noto-core, SIL OFL 1.1, see /fonts/OFL.txt).
   400 only (no Devanagari element renders bold). unicode-range restricts it to the three Devanagari
   blocks so all Latin/IAST stays on one system face. font-display:block avoids mid-verse reflow. */
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/fonts/NotoSansDevanagari-Regular-v2001.woff2') format('woff2');
  unicode-range: U+0900-097F, U+A8E0-A8FF, U+1CD0-1CF9;
}

:root {
  --bg: #0f0a05;
  --bg2: #1a1208;
  --bg3: #261c0e;
  --saffron: #ff9933;
  --saffron-dim: #c47525;
  --gold: #d4a843;
  --text: #f0e8dc;
  --text2: #a89878;
  --maroon: #8b1a1a;
  --red: #d44;
  --green: #5cb85c;
  --radius: 14px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Header */
.header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px;
  background: linear-gradient(135deg, var(--bg), var(--bg2));
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--bg3);
}
.header h1 { font-size: 20px; font-weight: 700; }
.header .saffron { color: var(--saffron); }
.header .om {
  font-size: 24px; color: var(--gold);
  font-family: 'Noto Sans Devanagari', 'Mangal', serif;
}

/* Bottom Nav */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; background: var(--bg2);
  border-top: 1px solid var(--bg3);
  padding-bottom: var(--safe-bottom); z-index: 100;
}
.nav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 10px 0 8px; background: none; border: none;
  color: var(--text2); font-size: 10px; cursor: pointer;
}
.nav-btn.active { color: var(--saffron); }
.nav-btn .icon { font-size: 22px; margin-bottom: 3px; }

/* Pages */
.page { display: none; padding: 0 16px calc(100px + var(--safe-bottom)); }
.page.active { display: block; }

/* Deity Grid */
.deity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.deity-card {
  background: var(--bg2); border-radius: var(--radius); padding: 20px 12px;
  text-align: center; cursor: pointer; border: 1px solid var(--bg3);
  transition: border-color 0.2s, transform 0.1s;
}
.deity-card:active { transform: scale(0.97); }
.deity-card:hover { border-color: var(--saffron); }
.deity-card .deity-icon { font-size: 40px; display: block; margin-bottom: 8px; }
.deity-card .deity-icon-img { width: 100%; max-width: 96px; height: auto; aspect-ratio: 1; object-fit: contain; display: block; margin: 0 auto 8px; }
.deity-card .deity-name { font-size: 13px; font-weight: 600; color: var(--text); }
.deity-card .deity-name-dev { font-size: 12px; color: var(--saffron); margin-top: 2px; }
.deity-card .deity-count { font-size: 11px; color: var(--text2); margin-top: 4px; }

/* Stotra List */
.stotra-item {
  background: var(--bg2); border-radius: var(--radius); padding: 16px;
  margin-bottom: 10px; cursor: pointer; border: 1px solid var(--bg3);
  transition: border-color 0.2s;
}
.stotra-item:hover { border-color: var(--saffron); }
.stotra-title { font-size: 16px; font-weight: 700; color: var(--text); }
.stotra-title-dev { font-size: 14px; color: var(--saffron); margin-top: 2px; }
.stotra-meta { font-size: 12px; color: var(--text2); margin-top: 6px; display: flex; gap: 12px; }
.stotra-meta-source {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.stotra-desc { font-size: 12px; color: var(--text2); margin-top: 6px; line-height: 1.4; }

/* Verse Display */
.verse-card {
  background: var(--bg2); border-radius: var(--radius); padding: 20px;
  margin-bottom: 16px; border: 1px solid var(--bg3);
  border-left: 3px solid var(--saffron);
}
.verse-number {
  color: var(--gold); font-weight: 500; opacity: 0.6;
}
.verse-devanagari {
  font-size: 24px; line-height: 2.25; color: var(--gold);
  margin-bottom: 16px; font-family: 'Noto Sans Devanagari', 'Mangal', serif;
}
.verse-transliteration {
  font-size: 15px; line-height: 1.7; color: var(--text);
  font-style: italic; margin-bottom: 14px;
}
.verse-translation {
  font-size: 14px; line-height: 1.75; color: var(--text2);
}
/* Single-layer views: the card wrapper stays but sheds its chrome */
.verse-card--bare {
  background: none; border: none; border-left: none; padding: 0;
}
/* Invocation + colophon — unnumbered, no card, no labels */
.verse-invocation {
  text-align: center; color: var(--gold);
  font-size: 22px; line-height: 1.9;
  font-family: 'Noto Sans Devanagari', 'Mangal', serif;
  margin: 4px 0 28px;
}
.verse-colophon {
  text-align: center; color: var(--text2); opacity: 0.85;
  font-size: 16px; line-height: 1.8;
  font-family: 'Noto Sans Devanagari', 'Mangal', serif;
  margin: 28px 0 4px;
}

/* Search */
.search-bar {
  width: 100%; padding: 14px 16px; margin: 16px 0;
  background: var(--bg2); border: 1px solid var(--bg3);
  border-radius: 24px; color: var(--text); font-size: 16px;
  outline: none; -webkit-appearance: none;
}
.search-bar:focus { border-color: var(--saffron); }
.search-bar::placeholder { color: var(--text2); }

/* Back Button */
.back-btn {
  background: none; border: none; color: var(--saffron);
  font-size: 14px; cursor: pointer; padding: 8px 0;
  display: flex; align-items: center; gap: 6px;
}

/* Favorite Button */
.fav-btn {
  background: none; border: none; font-size: 24px;
  cursor: pointer; padding: 4px;
  color: var(--saffron);
  font-family: 'Apple Symbols', 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif;
}

/* Section Title */
.section-title {
  font-size: 18px; font-weight: 700; margin: 20px 0 8px;
  color: var(--text);
}

.section-title-icon {
  width: 36px; height: 36px; object-fit: contain;
  vertical-align: middle; margin-right: 8px;
}

/* Eyebrow above a section title (mirrors landing-page .section-label) */
.section-label {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 3px; color: var(--gold); margin: 20px 0 0;
}
.section-label + .section-title { margin-top: 6px; }

/* Stats */
.stats-bar {
  display: flex; gap: 16px; padding: 12px 0;
  font-size: 13px; color: var(--text2);
}
.stats-bar span { color: var(--saffron); font-weight: 700; }

/* Empty */
.empty { text-align: center; padding: 40px; color: var(--text2); }
.empty .icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }

/* Toast */
.toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: var(--bg2); color: var(--text); padding: 12px 24px;
  border: 1px solid var(--gold);
  border-radius: 24px; font-size: 14px; font-weight: 600;
  z-index: 200; opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.toast.show { opacity: 1; }

/* Stotra Header */
.stotra-header {
  padding: 16px 0; border-bottom: 1px solid var(--bg3); margin-bottom: 24px;
}
.stotra-header-title { font-size: 22px; font-weight: 800; color: var(--text); }
.stotra-header-dev { font-size: 20px; color: var(--saffron); margin-top: 4px; }
.stotra-header-source { font-size: 12px; color: var(--text2); margin-top: 8px; font-style: italic; }
.stotra-header-desc { font-size: 13px; color: var(--text2); margin-top: 8px; line-height: 1.5; }

/* View Toggle */
.view-toggle { display: flex; gap: 6px; margin: 12px 0; }
.view-btn {
  padding: 8px 16px; background: var(--bg3); border: 1px solid transparent;
  border-radius: 20px; color: var(--text2); font-size: 12px;
  cursor: pointer; transition: all 0.2s;
}
.view-btn.active { border-color: var(--saffron); color: var(--saffron); background: rgba(255,153,51,0.1); }

@media (min-width: 768px) {
  .page { max-width: 650px; margin: 0 auto; }
}

/* ── Temple Directory ── */
.temple-card {
  background: rgba(255,153,51,0.08);
  border: 1px solid rgba(255,153,51,0.2);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 8px 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.temple-card:hover, .temple-card:active {
  background: rgba(255,153,51,0.15);
  border-color: rgba(255,153,51,0.4);
}
.temple-name { font-weight: 600; font-size: 1em; color: #ff9933; }
.temple-name-local { font-family: 'Noto Sans Devanagari', serif; font-size: 0.85em; color: #ccc; margin-top: 2px; }
.temple-info { font-size: 0.82em; color: #aaa; margin-top: 6px; line-height: 1.6; }
.temple-desc { font-size: 0.8em; color: #999; margin-top: 6px; line-height: 1.4; }
.temple-badge { background: #ff9933; color: #000; font-size: 0.7em; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.temple-filter-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #ccc;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 0.8em;
  cursor: pointer;
}
.temple-filter-btn.active { background: #ff9933; color: #000; border-color: #ff9933; font-weight: 600; }
.temple-detail { padding: 12px 0; }
.temple-detail h2 { color: #ff9933; margin: 0 0 4px 0; font-size: 1.2em; }
.temple-detail-info { font-size: 0.9em; color: #ccc; line-height: 1.8; margin-top: 8px; }
.temple-event, .temple-service { background: rgba(255,255,255,0.05); padding: 8px 12px; border-radius: 8px; margin: 4px 0; font-size: 0.85em; color: #ccc; }
.back-btn { background: none; border: 1px solid rgba(255,153,51,0.3); color: #ff9933; padding: 8px 16px; border-radius: 8px; cursor: pointer; margin-bottom: 12px; font-size: 0.9em; }

/* ── Temple Browse Drill-down ── */
.temple-browse-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  margin: 2px 16px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
}
.temple-browse-item:hover, .temple-browse-item:active {
  background: rgba(255,153,51,0.12);
}
.browse-icon { font-size: 1.3em; margin-right: 12px; }
.browse-label { flex: 1; font-weight: 500; color: #eee; font-size: 0.95em; }
.browse-count { color: #888; font-size: 0.8em; margin-right: 8px; }
.browse-arrow { color: #ff9933; font-size: 1.2em; font-weight: bold; }
.browse-title { color: #ff9933; font-size: 1.1em; font-weight: 600; margin: 8px 0 4px; }

/* ── Daily Practice ── */
.streak-display {
  text-align: center;
  padding: 24px 16px;
  background: linear-gradient(135deg, rgba(255,153,51,0.15), rgba(255,80,0,0.08));
  border-radius: 16px;
  margin: 16px 0;
  border: 1px solid rgba(255,153,51,0.25);
}
.streak-number {
  font-size: 48px;
  font-weight: 900;
  color: var(--saffron);
  line-height: 1;
}
.streak-fire {
  font-size: 40px;
  vertical-align: middle;
}
.streak-label {
  font-size: 14px;
  color: var(--text2);
  margin-top: 4px;
}
.streak-sub {
  font-size: 12px;
  color: var(--text2);
  margin-top: 8px;
  opacity: 0.7;
}

.practice-stats-row {
  display: flex;
  gap: 10px;
  margin: 12px 0;
}
.practice-stat {
  flex: 1;
  background: var(--bg2);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  border: 1px solid var(--bg3);
}
.practice-stat-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--saffron);
}
.practice-stat-label {
  font-size: 10px;
  color: var(--text2);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.practice-card {
  background: var(--bg2);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 10px;
  cursor: pointer;
  border: 1px solid var(--bg3);
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color 0.2s;
}
.practice-card:hover { border-color: var(--saffron); }
.practice-card.completed {
  border-color: rgba(212,168,67,0.4);
  background: rgba(212,168,67,0.06);
}
.practice-check {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  color: transparent;
}
.practice-card.completed .practice-check {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg);
}
.practice-card-info { flex: 1; min-width: 0; }
.practice-card-title { font-weight: 700; font-size: 15px; color: var(--text); }
.practice-card-dev { font-size: 13px; color: var(--saffron); margin-top: 2px; }
.practice-card-meta { font-size: 11px; color: var(--text2); margin-top: 4px; }
.practice-card-remove {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  opacity: 0.5;
}
.practice-card-remove:hover { opacity: 1; color: var(--red); }

.start-practice-btn {
  display: block;
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, var(--saffron), #e67300);
  color: var(--bg);
  border: none;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  margin: 16px 0;
  text-align: center;
  letter-spacing: 0.5px;
  transition: transform 0.1s;
}
.start-practice-btn:active { transform: scale(0.97); }
.start-practice-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.add-practice-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: rgba(255,153,51,0.15);
  color: var(--saffron);
  border: 1px solid rgba(255,153,51,0.3);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.2s;
}
.add-practice-btn:hover { background: rgba(255,153,51,0.25); }
.add-practice-btn.added {
  background: rgba(212,168,67,0.12);
  color: var(--gold);
  border-color: rgba(212,168,67,0.35);
}

/* Guided Chanting */
.guided-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #0a0705;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}
.guided-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  gap: 12px;
}
.guided-close {
  background: rgba(255,255,255,0.1);
  border: none;
  color: var(--text);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guided-title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--saffron);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.guided-timer {
  font-size: 16px;
  font-weight: 700;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
}
.guided-progress {
  height: 3px;
  background: rgba(255,255,255,0.08);
  margin: 0 20px;
  border-radius: 2px;
  overflow: hidden;
}
.guided-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--saffron), #ff6600);
  border-radius: 2px;
  width: 0%;
  transition: width 0.4s ease;
}
.guided-verse-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px 24px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.guided-verse-number {
  font-size: 12px;
  color: var(--saffron);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 24px;
  font-weight: 600;
}
.guided-verse-text {
  font-size: 24px;
  line-height: 1.8;
  color: var(--gold);
  font-family: 'Noto Sans Devanagari', serif;
  text-align: center;
  max-width: 600px;
  animation: verseIn 0.4s ease;
}
.guided-verse-translit {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text2);
  font-style: italic;
  text-align: center;
  margin-top: 20px;
  max-width: 600px;
  animation: verseIn 0.4s ease;
}
.guided-tap-hint {
  font-size: 12px;
  color: var(--text2);
  opacity: 0.4;
  margin-top: 32px;
  animation: pulse 2s infinite;
}
@keyframes verseIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

/* Celebration */
.celebration-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(10,7,5,0.95);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.celebration-content {
  text-align: center;
  animation: celebIn 0.5s ease;
}
.celebration-emoji {
  font-size: 72px;
  margin-bottom: 16px;
  animation: celebBounce 0.6s ease;
}
.celebration-text {
  font-size: 28px;
  font-weight: 900;
  color: var(--saffron);
  margin-bottom: 8px;
}
.celebration-streak {
  font-size: 20px;
  color: var(--text);
  margin-bottom: 4px;
}
.celebration-time {
  font-size: 14px;
  color: var(--text2);
  margin-bottom: 24px;
}
.celebration-btn {
  padding: 14px 40px;
  background: var(--saffron);
  color: var(--bg);
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
@keyframes celebIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes celebBounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.practice-empty-add {
  text-align: center;
  padding: 32px 16px;
  color: var(--text2);
}
.practice-empty-add .icon { font-size: 48px; margin-bottom: 12px; opacity: 0.4; }
.practice-empty-add p { margin-bottom: 12px; }
.practice-empty-add button {
  padding: 12px 24px;
  background: var(--saffron);
  color: var(--bg);
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* Journey lede — the opening line of States 1 and 2. A focal point, not a
   heading: colour, weight and family inherit deliberately, so it cannot drift
   away from body text if body styles change. */
.journey-lede {
  font-size: 1.18em;
  line-height: 1.7;
  margin: 20px 0 14px;
}

/* ── The Temple ── */

/* The Temple's hero is the landscape Gate banner, full-bleed against the
   page's 16px gutters. The page keeps the global sticky header, so the
   banner begins below it; the negative margins cancel .page's padding
   rather than overriding it. */
.thetemple-hero {
  margin: 0 -16px;
  display: block;
  width: calc(100% + 32px);
  aspect-ratio: 1914 / 822;
  object-fit: cover;
  background: var(--bg2);
}

.thetemple-band {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text2);
  text-align: center;
  letter-spacing: 0.3px;
  margin: 18px 24px 0;
}

/* Hall rhythm: generous air between halls is what makes the page read as a
   manuscript rather than a settings screen. The divider is a hairline rule
   that fades at both ends, not a border. */
.thetemple-hall {
  margin: 44px auto 0;
  max-width: 34em;
}

.thetemple-hall + .thetemple-hall { margin-top: 40px; }

.thetemple-divider {
  height: 1px;
  margin: 40px auto 0;
  max-width: 34em;
  border: none;
  background: linear-gradient(90deg, transparent, var(--bg3), transparent);
}

.thetemple-hall-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--gold);
  margin: 0 0 10px;
}

/* Body copy is deliberately slower than the rest of the app: larger leading
   and a bounded measure. line-height is declared here because the app sets
   it per component, never globally. */
.thetemple-body {
  font-size: 16px;
  line-height: 1.85;
  color: var(--text);
  margin: 0 0 14px;
}

.thetemple-body:last-child { margin-bottom: 0; }

.thetemple-quote {
  font-size: 17px;
  line-height: 1.75;
  color: var(--gold);
  text-align: center;
  margin: 24px 24px;
}

/* Corpus colophon: live counts, never hardcoded. The per-deity line sits
   quieter than the totals by design. */
.thetemple-colophon {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  text-align: center;
  margin: 20px 0 0;
}

.thetemple-colophon-deities {
  font-size: 13px;
  line-height: 1.9;
  color: var(--text2);
  text-align: center;
  margin: 6px 0 0;
}

.thetemple-tiers {
  font-size: 14px;
  line-height: 1.9;
  color: var(--text2);
  text-align: center;
  margin: 20px 0 0;
}

/* Founder Circle call to action. Per Addendum 15 this is final CTA
   typography but semantically text — no button, no anchor, no pointer
   cursor, no handler. Interactivity is intentionally deferred until a real
   destination exists; the treatment must never read as unfinished. */
.thetemple-cta {
  background: none;
  font-family: inherit;
  line-height: inherit;
  appearance: none;
  -webkit-appearance: none;
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin: 22px auto 0;
  padding: 14px 20px;
  max-width: 22em;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
}

.thetemple-meta {
  font-size: 12px;
  line-height: 1.8;
  color: var(--text2);
  text-align: center;
  margin: 40px 0 0;
}

/* Entrance glyph in the global header. Binds to --gold, the same token as
   the om, because the SVG strokes are currentColor. .header is already
   space-between, so no margin is needed to place it right. */
.thetemple-entrance {
  background: none;
  border: none;
  padding: 0;
  color: var(--gold);
  line-height: 0;
  cursor: pointer;
}

/* ── The Temple: Visual Hierarchy ── */

/* Addendum 19. Three modifiers, no new colours and no new elements: the
   emphasis grammar is gold for what should be remembered, medium-weight
   white for what carries the argument, regular white for explanation.
   These must stay AFTER .thetemple-body: every selector here is a single
   class, so specificity ties and source order decides. Placed earlier they
   would lose to .thetemple-body's own color and margin shorthand. */
.thetemple-lead {
  font-weight: 600;
}

/* Carries the whole intended gap on its own: adjacent .thetemple-body
   siblings collapse, so the preceding paragraph's 14px bottom margin is
   absorbed rather than added. 28px yields a 28px gap, double the
   paragraph rhythm; 14px here would collapse to 14px and render no
   visible change. */
.thetemple-spaced {
  margin-top: 28px;
}

.thetemple-cornerstone {
  color: var(--gold);
}

/* Session 107. Founder Circle tier selector and Temple contact links,
   per Addenda 21 and 22. */

.thetemple-tiers button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.thetemple-tiers button.active {
  font-weight: 600;
  color: var(--text);
}

.thetemple-link {
  color: var(--gold);
}

.thetemple-action {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--gold);
  cursor: pointer;
}

.thetemple-subhead {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gold);
  text-align: center;
  line-height: 1.8;
  margin: 0;
}

.thetemple-subhead + .thetemple-meta,
.thetemple-subhead + .thetemple-meta + .thetemple-meta {
  margin-top: 14px;
}

.thetemple-meta + .thetemple-hall-title {
  margin-top: 64px;
}

.thetemple-share {
  text-decoration: underline;
}

.thetemple-cta:focus-visible {
  outline: 2px solid var(--saffron);
  outline-offset: 3px;
}

/* ── Temple Gate ── */

/* Addendum 10's three-state entry choreography. This overlay sits above every
   other surface: the measured file maximum was 1100 (.celebration-overlay), and
   1200 clears it while keeping the file's 100/200/1000/1100 spacing. index.html
   carries style="display:none" inline on the overlay, so the inline value wins
   until the ceremony clears it; the display below is the shown state, not a
   contest with that attribute. */
.temple-gate-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  /* Ground matches temple-gate.webp's own measured field, RGB(3,3,3), sampled
     at all four corners and flat to 32px inset. Not a taste pick and not pure
     black - it exists to make the plate's edge vanish. Re-measure if the
     artwork is ever re-encoded. */
  background: #030303;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px;
  text-align: center;
}

/* Every member is hidden by default and each state opts in only what it shows.
   A state class is present on the overlay whenever the ceremony runs, so no
   member ever renders unclassed. */
.temple-gate-artwork,
.temple-gate-lockup,
.temple-gate-band,
.temple-gate-begin {
  display: none;
}

/* The square Temple Gate artwork, 1254x1254. Bounded by viewport height as well
   as width so the band line and Begin keep their room on a short screen. The
   element is src-less in index.html, so a browser that never runs the ceremony
   never fetches it. */
.temple-gate-artwork {
  width: 78vw;
  max-width: 420px;
  max-height: 58vh;
  object-fit: contain;
}

/* State 3's returning treatment mirrors the header lockup: same gold token, same
   Devanagari face, larger. */
.temple-gate-lockup {
  align-items: center;
  gap: 10px;
}
.temple-gate-om {
  font-size: 44px;
  line-height: 1;
  color: var(--gold);
  font-family: 'Noto Sans Devanagari', 'Mangal', serif;
}
.temple-gate-wordmark {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text);
}

/* Band line, carrying .thetemple-band's voice rather than introducing a second
   treatment for the same sentence. */
.temple-gate-band {
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.3px;
  color: var(--text2);
  max-width: 22em;
}
.temple-gate-begin {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--gold);
  background: none;
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 11px 34px;
  cursor: pointer;
}

/* State 1, first-ever launch, staged. PART III locks the order: artwork ->
   2s pause -> band line -> [Begin], where the pause follows the COMPLETED
   fade, per the house convention State 2 already follows. Each step is gated
   on DISPLAY by its own class, never on animation timing - reduced motion
   resets animation wholesale, so delay-based staging would collapse to a
   simultaneous reveal. The 1.8s fade sits inside the locked 1.5-2s; the
   script mirrors that 1.8s to time the dwell, so the two must move together. */
.temple-gate-overlay.temple-gate-first .temple-gate-artwork {
  display: block;
  animation: templeGateFade 1.8s ease both;
}
.temple-gate-overlay.temple-gate-stage-band .temple-gate-band {
  display: block;
  animation: templeGateFade 0.42s ease both;
}
.temple-gate-overlay.temple-gate-stage-begin .temple-gate-begin {
  display: inline-block;
  animation: templeGateFade 0.42s ease both;
}

/* State 2, first open of a new local day: artwork alone, no Begin. A shorter
   fade than State 1, because this is passing through the Gate rather than
   crossing it for the first time. */
.temple-gate-overlay.temple-gate-daily .temple-gate-artwork {
  display: block;
  animation: templeGateFade 0.35s ease both;
}

/* State 3, subsequent opens the same local day: the lockup alone. */
.temple-gate-overlay.temple-gate-returning .temple-gate-lockup {
  display: flex;
  animation: templeGateFade 0.2s ease both;
}

@keyframes templeGateFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Addendum 10 honors prefers-reduced-motion in all three states. Animation is
   suppressed; cadence is not. Every resting state above is already opacity 1, so
   removing the animation makes each member appear instantly at the moment the
   ceremony has already scheduled for it. The dwell, and State 3's 700-1000ms
   window, are script-side and are deliberately untouched here.
   PERMANENT SYNC OBLIGATION between the reveal list and the media list: each
   selector below mirrors a reveal rule exactly, at three classes. Adding a
   state class means adding it in BOTH places, or the new reveal rule outranks
   this block and reduced motion goes unhonoured for that state. A two-class
   form loses to every three-class reveal rule and leaves this block inert. */
@media (prefers-reduced-motion: reduce) {
  .temple-gate-overlay.temple-gate-first .temple-gate-artwork,
  .temple-gate-overlay.temple-gate-stage-band .temple-gate-band,
  .temple-gate-overlay.temple-gate-stage-begin .temple-gate-begin,
  .temple-gate-overlay.temple-gate-daily .temple-gate-artwork,
  .temple-gate-overlay.temple-gate-returning .temple-gate-lockup {
    animation: none;
  }
}