/* the upcoming-festival cards, now inside the Panchāṅgam panel */
.today-fests{margin:34px 0 0;padding-top:28px;border-top:1px solid var(--line)}
.tf-h{font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:1.15rem;
  color:var(--espresso);text-align:center;margin:0 0 18px}
.today-fests .fstrip{max-width:100%}
.tf-more{text-align:center;margin-top:20px}
.tf-more .btn-ghost{display:none}          /* the panel already links to the calendar */


/* ---------------------------------------------------------------- the day
   One panel: invocation | tithi grid | daily windows, in a row governed by
   the tallest column. See tools/merge-day-panel.py for the measurements this
   layout came from. Below ~1100px it becomes two columns, and on a phone one.

   Height is reserved on the two columns whose contents arrive from JavaScript
   so that filling them in shifts nothing - this panel is the first thing on
   the page and a shift here would be the worst place for one. */
.day{background:var(--cream);padding:18px 0 30px}
.day-eyebrow{font-family:'Marcellus SC','Marcellus',serif;text-transform:uppercase;
  letter-spacing:.24em;font-size:.72rem;color:var(--gold-deep);margin:0 0 4px}
/* The date arrives from JavaScript and the placeholder is a different length,
   so the line was growing after load and taking the whole panel with it.
   Reserve the tallest it renders at each width - one line on a laptop, up to
   three on a narrow phone with a long nakshatra name. */
.day-line{font-family:'Marcellus',Georgia,serif;font-weight:400;line-height:1.25;
  font-size:clamp(1.15rem,2.1vw,1.5rem);color:var(--espresso);margin:0 0 13px;
  min-height:30px}
@media (max-width:760px){ .day-line{min-height:48px} }
@media (max-width:400px){ .day-line{min-height:72px} }
.day-line .day-sep{color:var(--gold-text)}
.day-line #tSub{color:var(--muted-2)}

.day-grid{display:grid;grid-template-columns:1.02fr 1fr 1fr;gap:18px;align-items:stretch}
/* Every block in this panel is filled in by JavaScript, and the panel is the
   first thing on the page - so each one holds its own space open from the
   start. The numbers are the tallest measured content at that layout, across
   all eleven invocations. tools/merge-day-panel.py records how they were taken. */
/* The two almanac columns are empty until the engine fills them, and an older
   rule collapses any empty one to display:none - which defeated every reserve
   set here and was most of a 0.70 layout shift on a phone. Inside this panel
   they keep their box whether or not there is anything in it yet. */
.day-grid .today-panch:empty,.day-grid .today-win:empty{
  display:block;border:1px solid var(--line-gold);padding:14px 17px}
/* Anchor the festival strip to the BOTTOM of its reserved box. The "coming up"
   alert is hidden until the engine finds one, and when it appears it fills the
   empty space above the strip instead of pushing it down - so there is no
   shift, and no empty dashed box on a day with nothing coming up. */
.day-ahead{min-height:382px;display:flex;flex-direction:column;justify-content:flex-end}
/* The strip renders one spare card and trims whichever one the "coming up"
   alert has already claimed. Removing a card makes the rest slide sideways,
   and a sideways move is a layout shift like any other - so the strip stays
   invisible (space still reserved) until the trim is done, then reveals in
   its final arrangement. A failsafe reveals it regardless after 2.5s. */
.today-fests .fstrip{grid-template-rows:auto;grid-auto-rows:0;overflow:hidden;
  visibility:hidden;min-height:104px}
.today-fests .fstrip.ready{visibility:visible}
.day-col{background:var(--surface);border:1px solid var(--line-gold);border-radius:14px;
  padding:14px 17px;min-height:322px}

/* the invocation keeps its own quiet centre inside the row */
.day-rm{display:flex;flex-direction:column;justify-content:center;text-align:center;
  background:linear-gradient(180deg,#fffdf8,#fdf7ec)}
.day-rm .rm-eyebrow{margin:0 0 10px}
.day-rm .rm-name{font-size:clamp(1.6rem,2.4vw,2.05rem);margin:0}
.day-rm .rm-also{margin:4px 0 0}
.day-rm .rm-why{margin:8px 0 0}
.day-rm .rm-mantra{font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.6;margin:10px 0 3px}
.day-rm .rm-translit{font-size:.94rem}
.day-rm .rm-gloss{font-size:.86rem;line-height:1.55;margin:7px auto 0;max-width:34ch}
.day-rm .rm-note{font-size:.8rem;margin:10px auto 0;max-width:38ch}
.day-rm .rm-actions{margin:12px 0 0}
.day-rm .rm-more{margin:11px 0 0;font-size:.83rem}

/* Inside the row the tithi grid is a narrow column, so its six cells go two
   across rather than three, and the column's own border is dropped - the
   .day-col frame around it is the card now. */
.day-grid .today-panch{grid-template-columns:1fr 1fr;background:transparent;gap:0}
.day-grid .today-panch .tp{padding:8px 4px;background:transparent;
  border-bottom:1px dashed var(--cream-2)}
.day-grid .today-panch .tp:nth-last-child(-n+2){border-bottom:0}
.day-grid .today-panch .tp-k{font-size:.72rem}
.day-grid .today-panch .tp-v{font-size:.95rem}
.day-grid .today-win .tw-h{margin-bottom:6px}
.day-grid .today-win .tw{font-size:.88rem;padding:4px 0}
.day-grid .today-win .tw.live{margin:0 -6px;padding:4px 6px}

.today-fest{margin-top:11px}
.today-fests{margin:12px 0 0;padding-top:0;border-top:0}
.tf-h{font-family:'Marcellus SC','Marcellus',serif;text-transform:uppercase;letter-spacing:.2em;
  font-size:.72rem;color:var(--gold-deep);text-align:left;margin:0 0 7px;font-weight:400}
.today-fests .fstrip{grid-template-columns:repeat(3,1fr);gap:12px;max-width:100%}
.today-fests .fs-card{padding:9px 12px;gap:10px;border-radius:11px}
.today-fests .fs-chip{flex-basis:44px;padding:5px 3px}
.today-fests .fs-chip .d{font-size:1.15rem}
.today-fests .fs-b h3{font-size:.94rem}
.tf-more{text-align:left;margin-top:8px;font-size:.85rem}
.tf-more .btn-ghost{display:none}


/* Both of these arrive from the engine - one is empty until it knows whether a
   restricted period is running, the other is hidden until there are notes - and
   they now sit ABOVE the day's festivals, so their appearance was throwing the
   whole lower half of the panel down the screen. Their space is held from the
   start, like everything else in this panel. */
.day-notes{min-height:139px}
@media (max-width:1100px){ .day-notes{min-height:163px} }
@media (max-width:760px){ .day-notes{min-height:214px} }
.today-now{margin-top:12px}
.today-qual{margin-top:10px}
.today-qual .q-h{display:inline;margin-right:8px}
.today-qual .q-s{display:inline}

/* the day's verse, full width under the row */
.day-learn{margin:22px 0 0;padding:22px 0 0;border-top:1px solid var(--line);text-align:center}
.day-learn:empty{display:none;border:0;padding:0;margin:0}

/* A 1366x768 laptop has 100px less than a 1440x900 one, and the festival
   cards were the block that fell off the bottom. On a short viewport they
   drop the category tag and tighten up - the day and the name are what
   matter at a glance, and the full calendar is one click away. */
/* A 1366x768 laptop has 130px less than a 1440x900 one. Nothing is hidden -
   the panel simply tightens: less padding, smaller gaps, closer lines. */
@media (max-height:830px) and (min-width:1101px){ .day-col{min-height:318px} }
@media (max-height:830px) and (min-width:761px){
  .day{padding:14px 0 26px}
  .day-line{margin-bottom:10px}
  .day-grid{gap:14px}
  .day-col{padding:12px 15px}
  .day-rm .rm-also{margin-top:2px}
  .day-rm .rm-why{margin-top:5px}
  .day-rm .rm-mantra{margin:7px 0 2px}
  .day-rm .rm-gloss{line-height:1.45;margin-top:5px}
  .day-rm .rm-more{margin-top:7px}
  .today-fest{margin-top:7px}
  .today-fests{margin-top:8px}
  .today-fests .fs-card{padding:7px 11px;gap:9px}
  .today-fests .fstrip{min-height:99px}
  .today-fests .fs-chip{padding:4px 3px;flex-basis:40px}
  .today-fests .fs-chip .d{font-size:1.05rem}
  .today-fests .fs-b h3{font-size:.9rem}
  .day-ahead{min-height:370px}
}

@media (max-width:1100px){
  .day-grid{grid-template-columns:1fr 1fr}
  .day-rm{grid-column:1/-1;min-height:0;padding:22px 20px}
  .today-fests .fstrip{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1100px){ .day-col{min-height:328px} }
/* stacked: each block reserves only what it needs, or the shortest would sit
   in a 330px box and the page would be full of holes */
@media (max-width:760px){
  .day{padding:18px 0 26px}
  .day-grid{grid-template-columns:1fr;gap:12px}
  .day-col{min-height:0;padding:16px}
  .day-rm{min-height:318px}
  .day-grid .today-panch{min-height:310px}
  .day-grid .today-win{min-height:262px}
  /* stacked, the cards are three ROWS - the zero-height implicit rows that
     hide the spare card in a three-across strip would clip two of them here */
  .today-fests .fstrip{grid-template-columns:1fr;grid-auto-rows:auto;
    overflow:visible;min-height:0}
  .tf-h{text-align:left}
}

/* The contact bar wrapped to three lines on a phone - 125px of the 598px a
   visitor has before scrolling, spent on a tagline and two phone numbers.
   One line, scrolled sideways if it has to be. */
@media (max-width:720px){
  .utility .wrap{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;gap:14px}
  .utility .wrap::-webkit-scrollbar{display:none}
  .utility .u-left{flex-wrap:nowrap;gap:14px}
  .utility .u-left span,.utility .u-left a{white-space:nowrap}
  .utility .om{display:none}
}


/* ------------------------------------------------------------------ about
   Hero, "In short" and "About the Gurukkal" merged. Each fact is stated once.
   .answer wraps the introduction because it is the speakable target in the
   structured data - the sentence a voice assistant reads is now the same
   sentence a visitor reads, instead of the two being written separately. */
.ab{padding:52px 0 46px}
.ab-top{display:grid;grid-template-columns:1.25fr .85fr;gap:44px;align-items:center}
.ab-intro{background:none;border:0;padding:0;margin:0}
.ab-intro .eyebrow{margin:0 0 10px}
.ab-intro h1{margin:0 0 6px}
.ab-name{font-family:'Marcellus',Georgia,serif;font-size:1.18rem;color:var(--saffron-dark);margin:0 0 14px}
.ab-intro .lede{margin:0;font-size:1.06rem;line-height:1.75;max-width:56ch;color:var(--ink)}
.ab-intro .lede strong{color:var(--espresso)}
.ab-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:24px}

.ab-facts{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin:40px 0 0;padding:26px 0 0;border-top:1px solid var(--line)}
.ab-facts li{display:flex;flex-direction:column;gap:3px}
.ab-facts b{font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:1.02rem;color:var(--espresso)}
.ab-facts b a{color:inherit;text-decoration:none;border-bottom:1px solid var(--gold-soft)}
.ab-facts b a:hover{border-bottom-color:var(--saffron-dark)}
.ab-facts span{font-size:.85rem;color:var(--muted);line-height:1.5}

.ab-cards{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;margin:34px 0 0}
.ab-card{background:var(--surface);border:1px solid var(--line-gold);border-radius:14px;
  padding:20px 22px;display:flex;flex-direction:column}
.ab-card-do{background:linear-gradient(180deg,#fffdf8,#fbf2e2);border-color:var(--gold-soft)}
.ab-card dt{font-family:'Marcellus SC','Marcellus',serif;text-transform:uppercase;
  letter-spacing:.16em;font-size:.72rem;color:var(--gold-deep);margin:0 0 10px}
.ab-card dd{margin:0;font-size:.94rem;line-height:1.65;color:var(--ink);
  flex:1 1 auto;display:flex;flex-direction:column}
.ab-warm{display:block;margin-top:10px;color:var(--muted);font-size:.9rem}
.ab-more{margin-top:auto;padding-top:14px;font-size:.88rem;color:var(--saffron-dark);
  display:inline-flex;align-items:center;min-height:24px;align-self:flex-start}

.ab-line{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;
  margin-top:4px;padding-top:18px;border-top:1px solid var(--line);font-size:.88rem}
.ab-line dt{font-family:'Marcellus SC','Marcellus',serif;text-transform:uppercase;
  letter-spacing:.14em;font-size:.68rem;color:var(--muted);padding-top:3px;white-space:nowrap}
.ab-line dd{margin:0;color:var(--muted-2);line-height:1.6}

/* the deep credentials: present and readable, but plainly secondary */
/* Visible, not behind a click: the families who most want to read this - the
   ones vetting a priest for a Kumbhābhiṣekam - should not have to find it.
   It is simply quieter than everything above it. */
.ab-cred{margin:30px 0 0;border-top:1px solid var(--line);padding-top:22px}
.ab-cred-h{font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:1.24rem;
  color:var(--espresso);margin:0}
.ab-cred-body{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:20px}
.ab-cred-body h2{font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:1.02rem;
  color:var(--saffron-dark);margin:0 0 8px}
.ab-cred-body h2+p{margin-top:0}
.ab-cred-body p{font-size:.94rem;line-height:1.7;color:var(--ink)}
/* supporting image, not a second hero - a landscape frame carrying both the
   shrine and Gurukkal, so it gets its own 4:3 box and is shown whole rather
   than cropped down to a portrait sliver */
.ab-cred-body .about-media{margin-top:18px;border-radius:14px;overflow:hidden;
  max-width:460px;border:1px solid var(--line-gold);box-shadow:var(--shadow)}
.ab-cred-body .about-media img{display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;object-position:50% 50%}

@media (max-width:980px){
  .ab-top{grid-template-columns:1fr;gap:28px}
  .ab-top .portrait{max-width:380px}
  .ab-facts{grid-template-columns:1fr 1fr}
  .ab-cards{grid-template-columns:1fr}
  .ab-cred-body{grid-template-columns:1fr;gap:24px}
}
@media (max-width:560px){
  .ab{padding:34px 0 32px}
  .ab-facts{grid-template-columns:1fr;gap:16px}
  .ab-line{grid-template-columns:1fr;gap:2px}
  .ab-line dt{padding-top:10px}
}


/* The monthly observances - Ekādaśī, Pradoṣam, Pūrṇimā, Amāvāsyā, Sankaṣṭī.
   A practising household checks these far more often than a festival, and
   until now they were only on the festival page. Height is reserved for the
   same reason as everything else in this panel: it is the first thing on the
   page and must not move once the engine fills it in. */
.today-obs{margin:13px 0 0}

.obs-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;min-height:76px}
.obs{display:flex;flex-direction:column;gap:2px;background:var(--surface);
  border:1px solid var(--line-gold);border-radius:11px;padding:9px 11px;text-decoration:none}
.obs:hover{border-color:var(--gold)}
.obs .o-n{font-family:'Marcellus',Georgia,serif;font-size:.92rem;color:var(--espresso);line-height:1.2}
.obs .o-d{font-size:.8rem;color:var(--saffron-dark)}
.obs .o-w{font-size:.74rem;color:var(--muted)}
.obs.is-today{background:#fbf2e2;border-color:var(--gold)}
.obs.is-today .o-w{color:var(--saffron-dark)}
@media (max-width:1100px){ .day-ahead{min-height:478px} }
@media (max-width:760px){ .day-ahead{min-height:762px} }
@media (max-width:560px){ .day-ahead{min-height:996px} }
@media (max-width:980px){ .obs-row{grid-template-columns:repeat(3,1fr);min-height:162px} }
@media (max-width:560px){ .obs-row{grid-template-columns:repeat(2,1fr);min-height:248px} }


/* ------------------------------------------------------------- the day, v2
   Three containers, not sixteen. Everything else is grouped by hairlines and
   space. See tools/apple-day-panel.py for the measurements behind this. */
.day-grid{display:grid;grid-template-columns:0.82fr 1fr;gap:20px;align-items:stretch}
.day-card{background:var(--surface);border:1px solid var(--line-gold);
  border-radius:16px;padding:20px 22px}

/* the almanac: grid on top, windows beneath, status line at the foot */
.day-alm{display:flex;flex-direction:column}
.day-grid .today-panch{grid-template-columns:1fr 1fr 1fr;background:transparent;
  gap:0;border:0;border-radius:0;padding:0}
.day-grid .today-panch .tp{padding:0 10px 12px 0;background:transparent;border:0}
.day-grid .today-panch .tp-k{font-size:.68rem;letter-spacing:.1em;color:var(--muted-2)}
.day-grid .today-panch .tp-v{font-size:.98rem}
.alm-rule{height:1px;background:var(--line);margin:4px 0 14px}
.day-grid .today-win{border:0;padding:0;background:transparent}
.day-grid .today-win .tw-h{margin-bottom:8px;font-size:.68rem;letter-spacing:.1em;color:var(--muted-2)}
.day-grid .today-win .tw{font-size:.9rem;padding:6px 0;border-top:1px solid var(--cream-2)}
.day-grid .today-win .tw.live{margin:0 -8px;padding:6px 8px}

/* the live-window line, inside the windows, filling what the stacking freed */
.day-alm .today-now{margin:auto 0 0;padding:14px 0 0;background:transparent;
  border:0;border-top:1px solid var(--line);font-size:.85rem;line-height:1.55;
  color:var(--muted-2);border-radius:0}
.day-alm .today-now .dot{top:0}

/* The standing disclaimer is a footnote, not an announcement - it was louder
   than the live Rāhu Kālam warning, which is the one actionable thing on the
   screen. Keyed on the id because the Panchāṅgam script rewrites className. */
#tQual{margin:12px 2px 0;font-size:.78rem;line-height:1.55;color:var(--muted-2);
  background:none!important;border:0!important;padding:0!important;border-radius:0}
#tQual .q-h{display:none}
#tQual .q-s{display:inline}

/* ---------------------------------------------------------- what's ahead
   One card, one list pattern. A name and a time on every row, so the coming
   festival, the next festivals and the monthly observances all read as the
   same kind of thing - because they are. */
.day-ahead{margin:20px 0 0}
.ahead-h{font-family:'Marcellus SC','Marcellus',serif;text-transform:uppercase;
  letter-spacing:.2em;font-size:.7rem;color:var(--muted-2);margin:0 0 4px;font-weight:400}
.ahead-lab{font-family:'Marcellus SC','Marcellus',serif;text-transform:uppercase;
  letter-spacing:.18em;font-size:.66rem;color:var(--muted-2);margin:18px 0 2px;font-weight:400}

.day-ahead .today-fest{margin:6px 0 0;background:transparent;border:0;border-radius:0;
  padding:10px 0;border-bottom:1px solid var(--line)}

/* The strip renders one spare card and trims whichever the "coming up" line
   has already claimed. It stays invisible - space still reserved - until the
   trim is done, and a fixed height clips the spare so it can never open a
   fourth row in the meantime. Both together are what hold CLS at zero here. */
.day-ahead .fstrip{display:block;grid-template-columns:none;overflow:hidden;margin:0}
.day-ahead .fs-card{display:flex;align-items:baseline;gap:14px;background:transparent;
  border:0;border-bottom:1px solid var(--cream-2);border-radius:0;box-shadow:none;
  padding:11px 0;transform:none}
.day-ahead .fs-card:hover{transform:none;box-shadow:none;background:#fffaf0}
.day-ahead .fs-chip{flex:0 0 74px;display:flex;align-items:baseline;gap:5px;
  background:transparent;border:0;border-radius:0;padding:0;text-align:left}
.day-ahead .fs-chip .m,.day-ahead .fs-chip .d{display:inline;line-height:1.2}
.day-ahead .fs-chip .d{font-size:1rem;color:var(--espresso)}
.day-ahead .fs-b{display:flex;align-items:baseline;gap:12px;flex:1;min-width:0}
.day-ahead .fs-b h3{order:1;flex:1;min-width:0;margin:0;font-size:.98rem}
.day-ahead .fs-din{order:2;font-size:.8rem;color:var(--muted)}
.day-ahead .fs-tag{order:3;font-size:.62rem;padding:2px 7px;margin:0;flex:0 0 auto}

.day-ahead .obs-row{display:block;grid-template-columns:none;min-height:0}
/* the tiles were a COLUMN flex; as rows they have to be reset explicitly */
.day-ahead .obs{display:flex;flex-direction:row;align-items:baseline;gap:14px;
  background:transparent;border:0;border-bottom:1px solid var(--cream-2);
  border-radius:0;padding:9px 0}
.day-ahead .obs:hover{background:#fffaf0;border-color:var(--cream-2)}
.day-ahead .obs .o-n{flex:1;min-width:0;order:2;font-size:.95rem}
.day-ahead .obs .o-d{order:1;flex:0 0 74px;font-size:.88rem;color:var(--espresso)}
.day-ahead .obs .o-w{order:3;font-size:.8rem;color:var(--muted)}
.day-ahead .obs.is-today{background:#fbf2e2}
.day-ahead .tf-more{text-align:left;margin-top:14px;font-size:.85rem}
.day-ahead .tf-more .btn-ghost{display:none}

/* ------------------------------------------------------------------ reserves
   Every block here is filled in by JavaScript and the panel is the first thing
   on the page, so each one holds its own space open from the start. The numbers
   are the tallest measured content at that layout, across all eleven
   invocations and eight screen widths. Without them the panel scored 0.19 on
   layout shift - roughly twice Google's "poor" threshold. */
#remember{min-height:602px}
#tPanch{min-height:168px}
#tWin{min-height:220px}
#tFest{min-height:66px}
#fstrip{height:138px}
#obsRow{min-height:220px}
/* An older rule collapses an empty .today-now to display:none, which made the
   reserve below it meaningless - it rendered at 0 and then jumped to 57. And
   the footnote is [hidden] until there are notes, so its space is held by a
   wrapper instead of by the element itself. */
.day-alm #tNow:empty{display:block}
.day-alm #tNow{min-height:60px}
.day-foot-slot{min-height:24px}
@media (max-width:1100px){ .day-alm #tNow{min-height:82px} }
@media (max-width:1000px){ #tPanch{min-height:230px} #remember{min-height:594px} }
@media (max-width:760px){ #tFest{min-height:112px} }
@media (max-width:560px){ #tFest{min-height:156px} .day-alm #tNow{min-height:82px} }
@media (max-width:560px){ #remember{min-height:640px} }
@media (max-width:400px){ #tPanch{min-height:258px} #tWin{min-height:246px}
  #tFest{min-height:236px} #fstrip{height:170px} .day-alm #tNow{min-height:104px} }

@media (max-width:1000px){
  .day-grid{grid-template-columns:1fr;gap:14px}
  .day-grid .today-panch{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .day-card{padding:16px 16px;border-radius:14px}
  .day-grid .today-panch{grid-template-columns:1fr 1fr}
  .day-ahead .fs-chip,.day-ahead .obs .o-d{flex-basis:62px}
  .day-ahead .fs-tag{display:none}
}


/* --------------------------------------------- the verse, inside the card
   Today's sacred learning now sits in the remembrance card, under a hairline -
   the invocation and the passage are one act of practice, so they are one
   container. The card is a narrower column than the full-width block it came
   from, so the verse and its meaning are set a step smaller to suit it.

   The two cards also stop stretching to match each other. Forcing a short card
   to the height of a tall one is precisely what manufactured the 113px of dead
   space in the almanac; each card now ends where its content ends. */
.day-grid{align-items:start}
/* a flex item with no content collapses to zero width - the hairline needs
   to be told to stretch */
.day-rm .rm-rule{align-self:stretch;width:auto;max-width:none;margin:22px 0 18px}
.day-rm .rm-src{font-size:.76rem;margin:0 0 10px}
.day-rm .rm-verse{font-size:1rem;line-height:1.85}
.day-rm .rm-verse[lang=sa]{font-size:1.02rem;line-height:1.8}
.day-rm .rm-vtr{font-size:.84rem;line-height:1.75;margin-top:8px}
.day-rm .rm-meaning{font-size:.92rem;line-height:1.65;max-width:44ch;margin:14px auto 0}
.day-rm .rm-expl{font-size:.88rem;margin:10px auto 0;max-width:46ch}
.day-rm .rm-practice{margin:16px auto 0;max-width:44ch;padding:12px 15px}
.day-rm .rm-note{font-size:.8rem;margin:14px auto 0;max-width:42ch}
.day-rm .rm-more{margin-top:20px}


.muh-disclaimer{max-width:760px;margin:0 auto 22px;padding:16px 20px;background:var(--cream-2,#f7ebd8);border:1px solid var(--gold-soft,#e7cf9c);border-left:4px solid var(--saffron,#c65a22);border-radius:10px}
.muh-disclaimer h3{margin:0 0 6px;font-family:'Marcellus',serif;font-size:1rem;color:var(--saffron-dark,#a8481a)}
.muh-disclaimer p{margin:0;font-size:.9rem;line-height:1.6;color:var(--espresso,#38220f)}
.muh-personal-note{font-size:.85rem;color:var(--muted,#6f5a41);font-style:italic;margin:4px 0 0}
.muh-group.ctx h4{color:var(--gold-deep,#8a6320)}
.muh-group.ctx{background:#faf3e6;border-color:var(--gold-soft,#e7cf9c)}
.muh-assess.neutral{background:var(--surface,#fffdf8);border-color:var(--gold-soft,#e7cf9c)}
.muh-reftext{font-size:.82rem;color:var(--muted,#6f5a41);line-height:1.55;margin-top:8px}
.muh-resultdisc{margin-top:16px;padding:12px 16px;background:var(--cream-2,#f7ebd8);border-left:3px solid var(--saffron,#c65a22);border-radius:0 8px 8px 0;font-size:.88rem;line-height:1.55;color:var(--espresso,#38220f)}

/* --- WCAG 2.2 AA 2.5.8 target size: give small controls a 24px hit area --- */
.foot-links a,.foot-grid a,.utility a,footer a{display:inline-flex;align-items:center;min-height:24px;padding:3px 0}
.foot-links{display:flex;flex-wrap:wrap;gap:2px 18px}
summary{min-height:24px;display:flex;align-items:center;gap:8px}
input[type=checkbox],input[type=radio]{width:20px;height:20px;margin:2px}
label:has(> input[type=checkbox]),label:has(> input[type=radio]){min-height:24px;display:inline-flex;align-items:center;gap:8px}
.chat-sug button{min-height:24px;padding:6px 12px}