/* ---------------------------------------------------------------- remembrance
   The strip under the contact bar and the section under the hero. Both are
   filled in by assets/js/remembrance.js from the day's almanac.

   Height is reserved in both places so that filling them in shifts nothing.
   The ledge keeps its 46px whether or not the script runs; the section keeps
   its min-height. If the script never runs, a visitor sees a quiet ॐ - which
   is a fair thing to leave on a page like this - and never a broken layout. */
.rm-ledge{background:linear-gradient(180deg,#f8eeda,#f3e3c9);
  border-bottom:1px solid var(--line-gold,rgba(181,132,47,.42));min-height:46px;display:flex;align-items:center}
.rm-ledge-in{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;width:100%;
  max-width:var(--maxw,1200px);margin:0 auto;padding:6px 30px;min-height:44px;
  color:var(--espresso,#38220f);text-decoration:none}
.rm-ledge-in,.rm-ledge-in span{text-decoration:none}
.rm-l-om{font-family:'Noto Serif Devanagari',serif;color:var(--gold-deep,#8a6320);font-size:.9rem;letter-spacing:.04em}
.rm-l-day{font-size:.78rem;color:var(--muted,#6f5a41)}
.rm-l-sep{color:var(--gold-text,#866123);opacity:1;font-size:.78rem}
.rm-l-name{font-family:'Marcellus',Georgia,serif;font-size:.95rem;color:var(--saffron-dark,#a8481a)}
.rm-l-k{font-family:'Spectral',Georgia,serif;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted,#6f5a41)}
.rm-l-mantra{font-family:'Noto Serif Devanagari',serif;font-size:.95rem;color:var(--gold-deep,#8a6320)}
.rm-ledge-in:hover .rm-l-name{text-decoration:underline;text-underline-offset:3px}
.rm-ledge-in:focus-visible{outline:3px solid var(--saffron-dark,#a8481a);outline-offset:-3px}
/* On a phone the strip must stay exactly one line, or filling it in pushes the
   hero down and that is a layout shift on the most important screen. The
   mantra is the first thing to go; the section below carries it in full. */
@media (max-width:720px){
  .rm-ledge-in{padding:8px 16px;flex-wrap:nowrap;overflow:hidden}
  .rm-l-mantra{display:none}
  .rm-l-day,.rm-l-sep{font-size:.74rem}
  .rm-l-name{white-space:nowrap;flex:0 0 auto}
  /* a long festival name must clip, never wrap - wrapping is a layout shift */
  .rm-l-day{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
}
@media (max-width:430px){
  .rm-l-om{display:none}
}

/* The reserve is the TALLEST deity-and-verse combination there is (Kāla
   Bhairava, who carries an extra note, with the Guru Stotram, the longest
   verse) measured at every breakpoint. Reserving the tallest rather than the
   average is what keeps CLS at zero, and this section is now the first thing
   on the page, so a shift here would be the worst possible place for one.
   The cost is up to ~140px of extra breathing room on the shortest days,
   which on a centred devotional panel reads as space, not as a gap. */
.rm{background:var(--surface,#fffdf8);border-top:1px solid var(--line,rgba(138,99,32,.2));
  border-bottom:1px solid var(--line,rgba(138,99,32,.2));padding:32px 0 30px}
.rm-wrap{max-width:780px;text-align:center;min-height:772px;
  display:flex;flex-direction:column;justify-content:center}
.rm-eyebrow{font-family:'Marcellus SC','Marcellus',serif;text-transform:uppercase;letter-spacing:.24em;
  font-size:.74rem;color:var(--gold-deep,#8a6320);margin:0 0 12px}
.rm-om{font-family:'Noto Serif Devanagari',serif;font-size:2.4rem;color:var(--gold-soft,#e7cf9c);margin:0}
.rm-name{font-family:'Marcellus',Georgia,serif;font-weight:400;line-height:1.15;
  font-size:clamp(1.9rem,4.4vw,2.7rem);color:var(--espresso,#38220f);margin:0}
.rm-also{color:var(--muted,#6f5a41);font-size:.92rem;margin:6px 0 0}
.rm-why{color:var(--muted-2,#836b50);font-size:.85rem;font-style:italic;margin:12px 0 0}
.rm-mantra{font-family:'Noto Serif Devanagari',serif;line-height:1.85;
  font-size:clamp(1.3rem,3.4vw,1.85rem);color:var(--saffron-dark,#a8481a);margin:18px 0 6px}
.rm-translit{font-size:1rem;color:var(--ink,#2c241c);margin:0}
.rm-gloss{color:var(--muted,#6f5a41);font-size:.95rem;max-width:54ch;margin:14px auto 0}
.rm-note{color:var(--muted-2,#836b50);font-size:.84rem;max-width:60ch;margin:16px auto 0;line-height:1.6}
.rm-actions{margin:20px 0 0}
.rm-play{font:inherit;font-size:.9rem;display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:9px 20px;border-radius:999px;cursor:pointer;
  background:var(--surface,#fffdf8);color:var(--saffron-dark,#a8481a);
  border:1px solid var(--gold-soft,#e7cf9c)}
.rm-play:hover{background:var(--cream-2,#f7ebd8)}
.rm-play.on{background:var(--saffron-dark,#a8481a);color:#fff;border-color:var(--saffron-dark,#a8481a)}
.rm-play:focus-visible{outline:3px solid var(--saffron-dark,#a8481a);outline-offset:3px}
.rm-ico{font-size:.8rem;line-height:1}
.rm-rule{height:1px;background:var(--line,rgba(138,99,32,.2));max-width:220px;margin:34px auto 26px}
.rm-src{font-size:.8rem;letter-spacing:.06em;color:var(--muted,#6f5a41);margin:0 0 14px}
.rm-verse{font-size:1.08rem;line-height:2;color:var(--espresso,#38220f);margin:0;padding:0;border:0}
.rm-verse[lang=ta]{font-family:'Noto Sans Tamil','Spectral',serif}
.rm-verse[lang=sa]{font-family:'Noto Serif Devanagari',serif;line-height:1.95}
.rm-vtr{font-size:.9rem;line-height:1.9;color:var(--muted-2,#836b50);margin:10px 0 0}
.rm-meaning{font-size:1rem;max-width:56ch;margin:18px auto 0}
.rm-expl{font-size:.95rem;color:var(--muted,#6f5a41);max-width:58ch;margin:12px auto 0}
.rm-practice{background:var(--cream-2,#f7ebd8);border-left:3px solid var(--saffron,#b6521f);
  border-radius:0 8px 8px 0;padding:14px 18px;margin:20px auto 0;max-width:56ch;text-align:left}
.rm-p-k{font-family:'Marcellus SC','Marcellus',serif;text-transform:uppercase;letter-spacing:.18em;
  font-size:.7rem;color:var(--saffron-dark,#a8481a)}
.rm-practice p{margin:4px 0 0;font-size:.95rem}
.rm-more{margin:28px 0 0;font-size:.88rem}
.rm-more a{color:var(--gold-deep,#8a6320);display:inline-flex;align-items:center;min-height:24px}
@media (max-width:720px){
  .rm{padding:24px 0 22px}
}