/* ============================================================================
   Bhakti — brand site, v2
   ----------------------------------------------------------------------------
   The organising idea is not "a landing page for a devotional app". It is a
   PANCHANG: a page out of a traditional Indian printed almanac. Cream stock,
   two plates (black key + one vermilion), rule-work instead of cards, running
   heads, folio numbers, marginalia, and tables — an almanac is mostly tables,
   so the pages lean into that rather than apologising for it.

   The palette and the three rules below are lifted directly from the app's own
   `frontend/components/panchang/n1Theme.ts`, which is the letterpress language
   the shipping Panchang screen is already set in. This stylesheet is that
   language extended to the web, not a second look invented alongside it.

     1. NO GRADIENT AS GROUND. Paper is a tiled band-passed fibre bitmap
        (scripts/gen-site-textures.py). A `linear-gradient` anywhere on this
        site is a regression, not a refinement.
     2. NO ROUNDED CORNERS, NO SHADOW, NO GLOW. Every container is a
        right-angled ruled box built from hairlines. The only "elevation" a
        letterpress page has is ink sitting on fibre.
     3. THE SIGNATURE IS MIS-REGISTRATION. `.plate` prints a solid vermilion
        block with the black keyline offset by 1px. That is what two-plate
        letterpress actually does, and it is the one thing you remember.

   Depth therefore comes from: hairlines, doubled rules, cream mounts, the
   offset plate, and the paper texture. Nothing else.

   Hierarchy is inverted from v1: the Devanagari leads at display size and the
   English is the quiet secondary. The Sanskrit is the picture.
   ========================================================================= */

/* --- 1. Tokens (n1Theme) ------------------------------------------------- */

:root{
  /* stock */
  --paper:#F5ECD6;
  --cell:#FAF3E2;
  --cell-alt:#F2E7CD;
  --screen:#EBDDC0;
  --outside:#DFCDA8;
  --knockout:#FBF4E4;
  --knockout2:#C9B896;

  /* ink */
  --ink:#1E1710;
  --ink2:#5A4C3A;
  --ink3:#4A3E2E;
  --ink-fine:#3A2F22;

  /* the red plate */
  --red:#B3181C;
  --red-deep:#8E0F14;
  --gold:#C8860A;

  /* gravity */
  --night:#1A1330;
  --on-night:#EFE4CB;   /* headings / lead ink on night      14.10:1 */
  --on-night2:#E4D7BE;  /* body copy on night                12.51:1 */
  --on-night3:#D6C7AC;  /* captions, labels, glosses         10.70:1 */

  /* Copy tiers. These exist so that a dark band can restate the whole ink
     scale ONCE (see `.band--night` below) instead of shadowing every rule
     that sets a text colour. Custom properties INHERIT, so a descendant
     `.ledger p{color:var(--copy)}` picks up the night value automatically —
     it cannot be missed, and it cannot lose a specificity tie the way an
     explicit `.band--night p` override can. That tie is exactly what shipped
     broken: `.ledger p{color:var(--ink2)}` and `.band--night p` are both
     (0,1,1), the later one won, and the seva pledges rendered #5A4C3A on
     #1A1330 — 2.14:1. Set colours through these tokens, not around them. */
  --copy:var(--ink2);          /* paragraphs, list bodies, table values */
  --copy-fine:var(--ink-fine); /* the inset note block                  */
  --copy-caption:var(--ink3);  /* marginalia, figcaptions, roman labels */
  --accent:var(--red-deep);    /* links, emphasis, red roman sub-labels   */

  /* rules — the whole system is built out of these four weights */
  --hair:1px;
  --frame:2px;
  --heavy:3px;
  --rule:var(--ink);
  --rule-soft:rgba(30,23,16,.28);
  --rule-night:rgba(239,228,203,.34);

  /* type */
  --display:"Rozha One",Georgia,"Times New Roman",serif;
  --body:"Spectral",Georgia,"Times New Roman",serif;
  --label:"Spectral SC","Spectral",Georgia,serif;
  --deva:"Tiro Devanagari Hindi","Noto Serif Devanagari","Nirmala UI",serif;

  --gutter:clamp(16px,4.4vw,44px);
  --maxw:1120px;
  --band:clamp(56px,8vw,104px);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--paper);
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background-color:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(16px,1.02vw,17.5px);
  line-height:1.68;
  font-kerning:normal;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* The sheet. A tileable band-passed fibre field — not a gradient. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:url("assets/paper.png");
  background-size:148px 148px;
  mix-blend-mode:multiply;
  opacity:.62;
  pointer-events:none;
  z-index:0;
}
body > *{position:relative;z-index:1}

img{max-width:100%;height:auto;display:block}
svg{display:block}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:46rem}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--knockout);
  padding:10px 16px;font-family:var(--label);letter-spacing:.08em;z-index:99;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--red-deep);outline-offset:3px}

/* --- 2. Type ------------------------------------------------------------- */

h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.06;margin:0}
h4{font-family:var(--label);font-weight:600;font-size:1rem;letter-spacing:.05em;margin:0}

/* Devanagari at display size. This is the primary visual on most sections —
   it is set as an image would be, not as an eyebrow. */
.deva{font-family:var(--deva)}
.deva-hero{
  font-family:var(--deva);
  font-size:clamp(3.5rem,15.5vw,10.5rem);
  line-height:.98;
  letter-spacing:-.01em;
  margin:0;
  color:var(--ink);
}
.deva-title{
  font-family:var(--deva);
  font-size:clamp(2.6rem,8.6vw,5.6rem);
  line-height:1.06;
  margin:0 0 .1em;
  color:var(--ink);
}
.deva-sub{
  font-family:var(--deva);
  font-size:clamp(1.85rem,4.6vw,3rem);
  line-height:1.12;
  margin:0;
}

h1{font-size:clamp(1.75rem,4.1vw,3rem)}
h2{font-size:clamp(1.5rem,3.1vw,2.3rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem)}

p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

.lede{font-size:clamp(1.06rem,1.35vw,1.22rem);line-height:1.62;color:var(--copy)}
.measure{max-width:34rem}
.measure-wide{max-width:44rem}

/* the roman sub-label under a Devanagari word — the app's own device */
.roman{
  font-family:var(--label);
  font-size:.74rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--copy-caption);
  display:block;
}
.roman--red{color:var(--accent)}

a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px}

em{font-style:normal;color:var(--accent)}

/* --- 3. Rules and frames ------------------------------------------------- */

.rule{border:0;border-top:var(--hair) solid var(--rule);margin:0}
.rule--soft{border-top-color:var(--rule-soft)}
.rule--heavy{border-top-width:var(--heavy)}
/* a doubled rule: one heavy, one hair, 3px apart — the almanac's section stop */
.rule--double{
  border:0;height:5px;
  border-top:var(--frame) solid var(--rule);
  border-bottom:var(--hair) solid var(--rule);
  margin:0;
}

.frame{border:var(--hair) solid var(--rule);position:relative}
.frame--double{outline:var(--hair) solid var(--rule);outline-offset:4px}

/* corner ornament placement inside a ruled panel */
.corners{position:relative}
.corners > .orn--corner{position:absolute;color:var(--ink);opacity:.68}
.band--night .corners > .orn--corner{color:#E9B84A;opacity:.45}
.corners > .orn--corner:nth-of-type(1){top:-1px;left:-1px}
.corners > .orn--corner:nth-of-type(2){top:-1px;right:-1px;transform:scaleX(-1)}
.corners > .orn--corner:nth-of-type(3){bottom:-1px;left:-1px;transform:scaleY(-1)}
.corners > .orn--corner:nth-of-type(4){bottom:-1px;right:-1px;transform:scale(-1)}

/* --- 4. The plate (the signature) ---------------------------------------- */

/* Solid vermilion, black keyline printed 1px out of register. One per view. */
.plate{
  position:relative;
  background:var(--red);
  color:var(--knockout);
  padding:.55em .8em;
  display:inline-block;
}
.plate::after{
  content:"";position:absolute;inset:0;
  border:var(--hair) solid var(--ink);
  transform:translate(2px,2px);
  pointer-events:none;
}
.plate .roman{color:var(--knockout2)}
.plate--mark{text-align:center;padding:.34em .72em .42em}
.plate--mark .plate__deva{
  font-family:var(--deva);font-size:1.9rem;line-height:1.15;display:block;
}
.plate a{color:var(--knockout)}

/* the same idea for a mounted image: cream mount, vermilion keyline off-register */
.mount{
  position:relative;
  background:var(--cell);
  padding:10px;
  border:var(--hair) solid var(--rule);
}
.mount::after{
  content:"";position:absolute;inset:0;
  border:var(--hair) solid var(--red);
  transform:translate(3px,3px);
  pointer-events:none;
}
.mount img{width:100%}
.mount__cap{
  font-family:var(--label);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--copy-caption);margin:9px 0 1px;
}

/* --- 5. Masthead --------------------------------------------------------- */

.masthead{
  position:sticky;top:0;z-index:40;
  background:var(--paper);
  border-bottom:var(--frame) solid var(--ink);
}
.masthead::before{
  content:"";position:absolute;inset:0;
  background-image:url("assets/paper.png");background-size:148px 148px;
  mix-blend-mode:multiply;opacity:.6;pointer-events:none;
}
.masthead__inner{
  display:flex;align-items:stretch;gap:0;
  min-height:60px;
  position:relative;
}
/* the wordmark in a ruled cartouche */
.cartouche{
  display:flex;align-items:center;gap:9px;
  text-decoration:none;color:var(--ink);
  border-right:var(--hair) solid var(--rule);
  padding:8px 16px 8px 0;
  margin-right:16px;
  flex:0 0 auto;
}
.cartouche__glyph{
  font-family:var(--deva);font-size:1.5rem;line-height:1;
  color:var(--red-deep);
  border:var(--hair) solid var(--rule);
  padding:2px 8px 4px;
}
.cartouche__name{font-family:var(--display);font-size:1.35rem;line-height:1}

/* the almanac device: three anga names as a masthead ornament. Static text —
   a design element, not a reading. It never carries a value. */
.angas{
  display:flex;align-items:center;gap:8px;
  font-family:var(--deva);font-size:.86rem;color:var(--ink3);
  margin:0;flex:0 1 auto;overflow:hidden;
}
.angas i{font-style:normal;color:var(--red);font-size:.7rem}

.masthead__nav{margin-left:auto;display:flex;align-items:center}
.site-nav{display:flex;align-items:stretch;gap:0}
.nav-link{
  display:flex;align-items:center;padding:0 13px;
  font-family:var(--label);font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--ink2);
  border-left:var(--hair) solid var(--rule-soft);
}
.nav-link:hover{color:var(--red-deep)}
.nav-link[aria-current="page"]{color:var(--ink);border-bottom:var(--heavy) solid var(--red)}
.nav-cta{
  display:flex;align-items:center;padding:0 15px;margin-left:10px;
  background:var(--ink);color:var(--knockout);
  font-family:var(--label);font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;
}
.nav-cta:hover{background:var(--red-deep)}

.nav-toggle{
  display:none;margin-left:auto;align-items:center;gap:9px;
  background:none;border:0;border-left:var(--hair) solid var(--rule);
  padding:0 4px 0 16px;cursor:pointer;color:var(--ink);
  font-family:var(--label);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
}
.nav-toggle__bars{display:inline-flex;flex-direction:column;gap:3px;width:17px}
.nav-toggle__bars span{height:var(--hair);background:var(--ink)}

@media (max-width:900px){
  .angas{display:none}
  .nav-toggle{display:flex}
  .site-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;background:var(--cell);
    border-bottom:var(--heavy) solid var(--ink);
    border-top:var(--hair) solid var(--rule);
  }
  .site-nav.is-open{display:flex}
  .nav-link{border-left:0;border-bottom:var(--hair) solid var(--rule-soft);padding:13px var(--gutter)}
  .nav-cta{margin:0;padding:15px var(--gutter);justify-content:flex-start}
}

/* --- 6. Bands ------------------------------------------------------------ */

.band{padding:var(--band) 0;position:relative}
.band--tight{padding:calc(var(--band) * .62) 0}
.band--cell{background:var(--cell-alt)}
.band--top{border-top:var(--hair) solid var(--rule)}

/* the indigo plate — gravity sections. Grain bitmap, never a gradient. */
.band--night{
  background-color:var(--night);
  color:var(--on-night);
  border-top:var(--heavy) solid var(--ink);
  border-bottom:var(--heavy) solid var(--ink);
  overflow:hidden;

  /* restate the ink scale for the plate — inherited by every descendant, so
     any rule written as `color:var(--copy)` inverts here for free */
  --copy:var(--on-night2);
  --copy-fine:var(--on-night2);
  --copy-caption:var(--on-night3);
  --accent:#E9B84A;   /* the red plate cannot print on indigo — gold, 9.68:1 */
}
.band--night::before{
  content:"";position:absolute;inset:0;
  background-image:url("assets/night.png");background-size:96px 96px;
  mix-blend-mode:overlay;opacity:.5;pointer-events:none;
}
.band--night > *{position:relative}
.band--night h1,.band--night h2,.band--night h3,
.band--night .deva-title,.band--night .deva-sub,.band--night .deva-hero{color:var(--on-night)}
.band--night .lede,.band--night p{color:var(--copy)}
.band--night .rule,.band--night .rule--double{border-color:var(--rule-night)}
.band--night .frame{border-color:var(--rule-night)}

/* --- 7. Running head, folio, marginalia ---------------------------------- */

.runhead{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-family:var(--label);font-size:.72rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--copy-caption);
  padding:9px 0;
  border-bottom:var(--hair) solid var(--rule);
}
.runhead .deva{font-family:var(--deva);text-transform:none;letter-spacing:.04em;font-size:.86rem}
.band--night .runhead{border-bottom-color:var(--rule-night)}
@media (max-width:560px){ .runhead > span:last-child{display:none} }

.folio{
  font-family:var(--deva);font-size:.95rem;color:var(--red-deep);
  letter-spacing:.06em;
}

.margin-note{
  font-family:var(--label);font-size:.79rem;line-height:1.5;
  letter-spacing:.02em;color:var(--copy-caption);
  border-top:var(--hair) solid var(--rule);
  padding-top:9px;
}

/* --- 8. Almanac tables --------------------------------------------------- */

.atable{
  width:100%;border-collapse:collapse;
  border:var(--hair) solid var(--rule);
  background:var(--cell);
  font-size:.97rem;
}
.atable caption{
  text-align:left;font-family:var(--label);font-size:.74rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--copy-caption);padding:0 0 8px;
}
.atable th,.atable td{
  border:var(--hair) solid var(--rule-soft);
  padding:12px 14px;text-align:left;vertical-align:top;
}
.atable thead th{
  border-bottom:var(--frame) solid var(--rule);
  font-family:var(--label);font-weight:600;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--copy-caption);
  background:var(--screen);
  padding:9px 14px;
}
.atable tbody tr:nth-child(even){background:var(--cell-alt)}
.atable .cell-name{width:1%;white-space:nowrap}
.atable .cell-name .deva{font-size:1.35rem;line-height:1.25;display:block;color:var(--ink)}
.atable .cell-val{color:var(--copy)}
.atable td b{font-weight:600;color:var(--ink)}
.atable .num{
  font-family:var(--deva);font-size:1.5rem;color:var(--red-deep);
  width:1%;text-align:center;padding:12px 10px;line-height:1.2;
}
.atable .stat{
  width:1%;white-space:nowrap;font-family:var(--label);font-size:.72rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--copy-caption);
}
.atable .stat--now{color:var(--red-deep)}
.atable .dash{font-family:var(--label);color:var(--copy-caption);font-size:1.1rem}

.band--night .atable{background:transparent;border-color:var(--rule-night)}
.band--night .atable th,.band--night .atable td{border-color:var(--rule-night)}
.band--night .atable thead th{background:rgba(255,255,255,.05);border-bottom-color:var(--rule-night)}
.band--night .atable tbody tr:nth-child(even){background:rgba(255,255,255,.035)}
.band--night .atable .cell-name .deva{color:var(--on-night)}
.band--night .atable .num{color:#E9B84A}
.band--night .atable td b{color:var(--on-night)}

@media (max-width:640px){
  .atable,.atable tbody,.atable tr,.atable td{display:block;width:auto}
  .atable thead{display:none}
  .atable tr{border-bottom:var(--frame) solid var(--rule-soft)}
  .atable tr:last-child{border-bottom:0}
  .atable td{border:0;padding:4px 13px}
  .atable td:first-child{padding-top:13px}
  .atable td:last-child{padding-bottom:13px}
  .atable .cell-name{white-space:normal}
  .atable .num{text-align:left;padding:13px 13px 0}
  .atable caption{display:block;padding-left:0}
}

/* --- 9. Section heads ---------------------------------------------------- */

/* Devanagari leads, the English answers underneath it in a smaller size. */
.shead{margin:0 0 clamp(22px,3vw,38px)}
.shead__deva{display:block}
.shead h2{margin:.18em 0 0;max-width:22ch}
.shead .lede{margin-top:.9em;max-width:40rem}

/* --- 10. Drop initial ---------------------------------------------------- */

.dropcap::first-letter{
  font-family:var(--display);
  float:left;
  font-size:4.15em;
  line-height:.78;
  padding:.06em .14em 0 0;
  color:var(--red-deep);
}

/* --- 11. Ornament -------------------------------------------------------- */

.orn{color:inherit}
.orn--rule{width:100%;height:26px;color:var(--red-deep);opacity:.85}
.orn--block{width:100%;height:16px;color:var(--ink);opacity:.75}
.band--night .orn--rule,.band--night .orn--block{color:#E9B84A;opacity:.62}

.orn--torana{width:100%;height:auto;color:var(--ink);opacity:.9}
.band--night .orn--torana{color:#E9B84A;opacity:.7}

/* the yantra and the kolam sit behind type as a printed plate, never as art
   direction for its own sake — hence the low ink and the clipping */
.plate-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.plate-bg > svg{position:absolute}
.plate-bg--yantra > svg{
  right:-19%;top:50%;transform:translateY(-50%);
  width:min(86vw,860px);height:auto;color:var(--ink);opacity:.14;
}
.band--night .plate-bg--yantra > svg{color:#E9B84A;opacity:.20}
.plate-bg--kolam > svg{
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(130%,1400px);height:auto;color:#E9B84A;opacity:.20;
}
.plate-bg--mandala > svg{
  right:-8%;bottom:-24%;
  width:min(60vw,440px);height:auto;color:var(--ink);opacity:.14;
}
.band--night .plate-bg--mandala > svg{color:#E9B84A;opacity:.20}

.orn--diya{color:var(--red-deep)}
.band--night .orn--diya{color:#E9B84A}
.orn--kalash{color:var(--ink)}
.band--night .orn--kalash{color:#E9B84A}

/* the single permitted movement: one flame, breathing */
@keyframes flicker{
  0%,100%{transform:translateY(0) scaleY(1)}
  50%{transform:translateY(-.6px) scaleY(1.045)}
}
.orn--diya .orn__flame{transform-origin:50% 62%;animation:flicker 3.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .orn--diya .orn__flame{animation:none}
}

/* --- 12. Notes, ledgers, panels ------------------------------------------ */

.note{
  position:relative;
  background:var(--screen);
  border:var(--hair) solid var(--rule);
  border-top:var(--heavy) solid var(--red);
  padding:clamp(18px,2.5vw,26px);
}
.note__head{
  font-family:var(--label);font-size:.74rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--red-deep);margin:0 0 .6em;
}
.note p{color:var(--copy-fine);font-size:.97rem}
.band--night .note{background:rgba(255,255,255,.05);border-color:var(--rule-night);border-top-color:var(--red)}

/* a numbered ledger: big Devanagari numeral in the margin, ruled between */
.ledger{list-style:none;margin:0;padding:0;counter-reset:led}
.ledger > li{
  display:grid;grid-template-columns:3.4rem 1fr;gap:0 clamp(14px,2vw,26px);
  padding:clamp(18px,2.4vw,26px) 0;
  border-top:var(--hair) solid var(--rule);
}
.ledger > li:last-child{border-bottom:var(--hair) solid var(--rule)}
.ledger > li::before{
  counter-increment:led;
  content:counter(led,devanagari);
  font-family:var(--deva);font-size:2.1rem;line-height:1;
  color:var(--red-deep);
  border-right:var(--hair) solid var(--rule-soft);
  padding-right:12px;
}
.ledger h4{margin:0 0 .45em;font-size:1.05rem;color:var(--ink)}
.ledger p{color:var(--copy);margin:0}
.band--night .ledger > li{border-color:var(--rule-night)}
.band--night .ledger > li::before{color:#E9B84A;border-right-color:var(--rule-night)}
.band--night .ledger h4{color:var(--on-night)}
@media (max-width:520px){
  .ledger > li{grid-template-columns:2.3rem 1fr}
  .ledger > li::before{font-size:1.5rem;padding-right:9px}
}

/* three ruled columns, as an almanac sets a tri-column table */
.cols3{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:var(--frame) solid var(--rule);
  border-bottom:var(--frame) solid var(--rule);
}
.cols3 > div{padding:clamp(20px,2.6vw,30px) clamp(14px,1.8vw,24px)}
.cols3 > div + div{border-left:var(--hair) solid var(--rule)}
.cols3 .deva-sub{margin-bottom:.2em}
.cols3 h3{margin:0 0 .5em}
.cols3 p{color:var(--copy);font-size:.97rem;margin:0}
.band--night .cols3{border-color:var(--rule-night)}
.band--night .cols3 > div + div{border-left-color:var(--rule-night)}
@media (max-width:760px){
  .cols3{grid-template-columns:1fr}
  .cols3 > div + div{border-left:0;border-top:var(--hair) solid var(--rule)}
  .band--night .cols3 > div + div{border-top-color:var(--rule-night)}
}

/* --- 13. Page head ------------------------------------------------------- */

.page-head{padding:clamp(30px,4vw,52px) 0 clamp(38px,5vw,64px);text-align:center;overflow:hidden}
.page-head .orn--torana{max-width:660px;margin:0 auto clamp(-14px,-1vw,-6px)}
.page-head .deva-title{margin-top:.1em}
.page-head h1{margin:.35em 0 0;color:var(--ink2);font-family:var(--display)}
.page-head .lede{max-width:34rem;margin:1em auto 0}

/* --- 14. Hero (home only) ------------------------------------------------ */

.hero{position:relative;overflow:hidden;border-bottom:var(--heavy) solid var(--ink)}
.hero__inner{position:relative;z-index:1;padding:clamp(26px,4vw,54px) 0 clamp(34px,5vw,64px)}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,20rem);
  gap:clamp(20px,3vw,44px);align-items:end;
  padding-bottom:clamp(20px,3vw,34px);
}
.hero .deva-hero{margin-bottom:.04em}
.hero__side{border-left:var(--hair) solid var(--rule);padding-left:clamp(16px,2vw,26px)}
.hero__side p:not(.plate){font-size:.95rem;color:var(--copy)}
.hero__lower{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(20px,3vw,44px);
  padding-top:clamp(20px,3vw,32px);
}
@media (max-width:820px){
  .hero__grid,.hero__lower{grid-template-columns:1fr}
  .hero__side{border-left:0;border-top:var(--hair) solid var(--rule);padding-left:0;padding-top:16px}
}

/* --- 15. Feature spreads ------------------------------------------------- */

.spread{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:start;
}
.spread--wide{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.spread--flip > :first-child{order:2}
@media (max-width:860px){
  .spread,.spread--wide{grid-template-columns:1fr}
  .spread--flip > :first-child{order:0}
}

/* marginalia layout: a wide text column with a narrow annotated margin */
.marginal{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,14rem);
  gap:clamp(20px,3.4vw,52px);
}
.marginal__aside{padding-top:.3em}
@media (max-width:860px){
  .marginal{grid-template-columns:1fr}
}

/* --- 16. Buttons and actions --------------------------------------------- */

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:1.5em}
.play-badge{display:block;line-height:0}
.play-badge img{width:158px;height:auto}
.quiet-link{
  font-family:var(--label);font-size:.8rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink2);text-decoration:none;
  border-bottom:var(--hair) solid var(--red);padding-bottom:2px;
}
.quiet-link:hover{color:var(--red-deep)}
.band--night .quiet-link{color:var(--on-night)}

/* --- 17. Screenshots ----------------------------------------------------- */

/* Four tabs, so four mounts — this was a 3-up until the Acharya shipped.
   Both numbers below were measured rather than guessed, because the failure
   they prevent is a RAGGED CAPTION ROW: three captions setting on one line and
   the fourth wrapping to two, which reads as a mistake rather than as a grid.
     gap 24px  — at the old 30px the fourth column lands on 236px, four short
                 of setting "Acharya — the consultation" on one line.
     1099px    — below this, four columns put each handset under ~220px, where
                 the captions wrap again (and the phone is a thumbnail). */
.shots{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.8vw,24px);
}
.shots figure{margin:0}
.shots figcaption{
  font-family:var(--label);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--copy-caption);margin-top:9px;
}
@media (max-width:1099px){
  .shots{grid-template-columns:repeat(2,1fr);max-width:40rem;margin:0 auto}
}
@media (max-width:560px){
  .shots{grid-template-columns:1fr;max-width:19rem}
}

/* --- 17b. The language specimen ------------------------------------------
   The nine languages the Acharya answers in, set in their own scripts — a
   type-founder's specimen sheet, which is why it is ruled rather than carded.
   Cell rules are switched to `transparent` rather than removed so that turning
   one off never changes the box model and shifts the grid by a pixel. */

.specimen{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:var(--hair) solid var(--rule);
}
.specimen > div{
  padding:clamp(13px,1.7vw,19px) clamp(11px,1.4vw,17px);
  border-right:var(--hair) solid var(--rule-soft);
  border-bottom:var(--hair) solid var(--rule-soft);
}
.specimen > div:nth-child(3n){border-right-color:transparent}
.specimen > div:nth-child(n+7){border-bottom-color:transparent}
.specimen__name{
  display:block;line-height:1.3;color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1.15rem,2.4vw,1.55rem);
}
/* Only the two Devanagari rows get the Devanagari face. Everything else is
   left to the platform's own Indic fallback on purpose — see ACHARYA_LANGS in
   scripts/build-site-v2.py. */
.specimen__name[lang="hi"],.specimen__name[lang="mr"]{font-family:var(--deva)}
.specimen .roman{display:block;margin-top:.45em;color:var(--copy-caption)}
@media (max-width:560px){
  .specimen{grid-template-columns:1fr}
  .specimen > div{border-right-color:transparent}
  .specimen > div:nth-child(n+7){border-bottom-color:var(--rule-soft)}
  .specimen > div:last-child{border-bottom-color:transparent}
}

/* --- 18. The verse block ------------------------------------------------- */

.verse{
  font-family:var(--deva);
  font-size:clamp(1.5rem,3.4vw,2.35rem);
  line-height:1.5;margin:0;color:var(--ink);
}
.gloss{
  font-family:var(--label);font-size:.84rem;letter-spacing:.06em;
  color:var(--copy-caption);margin:.7em 0 0;
}
.band--night .verse{color:var(--on-night)}

/* --- 19. Invite ---------------------------------------------------------- */

.invite{text-align:center;position:relative}
.invite .orn--torana{max-width:620px;margin:0 auto 6px}
.invite h2{margin-bottom:.4em}
.invite .lede{max-width:32rem;margin-left:auto;margin-right:auto}
.invite .actions{justify-content:center}

/* --- 20. Colophon / footer ----------------------------------------------- */

.colophon{
  background:var(--cell-alt);
  border-top:var(--heavy) solid var(--ink);
  padding:clamp(36px,5vw,60px) 0 26px;
}
.colophon__top{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,3vw,48px);
  padding-bottom:26px;
}
.colophon__brand{display:flex;gap:18px;align-items:flex-start}
.colophon__brand .orn--kalash{flex:0 0 auto;opacity:.9}
.colophon h4{
  font-family:var(--label);font-size:.74rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink3);
  border-bottom:var(--hair) solid var(--rule);padding-bottom:7px;margin-bottom:11px;
}
.colophon ul{list-style:none;margin:0;padding:0}
.colophon li{margin-bottom:7px;font-size:.94rem}
.colophon li a{color:var(--ink2);text-decoration:none;border-bottom:var(--hair) solid transparent}
.colophon li a:hover{color:var(--red-deep);border-bottom-color:var(--red)}
.colophon .verse{font-size:clamp(1.15rem,2vw,1.4rem)}
.colophon__bottom{
  border-top:var(--hair) solid var(--rule);padding-top:16px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;
  font-family:var(--label);font-size:.76rem;letter-spacing:.06em;color:var(--ink3);
}
.colophon__bottom ul{display:flex;gap:18px}
@media (max-width:820px){
  .colophon__top{grid-template-columns:1fr 1fr}
  .colophon__brand{grid-column:1 / -1}
}
@media (max-width:520px){
  .colophon__top{grid-template-columns:1fr}
}

/* --- 21. Reveal ---------------------------------------------------------- */

.reveal{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* --- 22. Utilities ------------------------------------------------------- */

.stack > * + *{margin-top:clamp(20px,2.6vw,34px)}
.mt{margin-top:clamp(22px,3vw,40px)}
.center{text-align:center}
.vh{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* --- 23. Mobile reading floor -------------------------------------------
   At 390px the body clamp already resolves to 16px, but several tiers are set
   in fractional rem and land at 11.5–15.5px. That is too small to read on a
   handset, and it is worst inside the night plates, where there is no cream
   stock to carry the letterform. Copy tiers are floored at 16px, caption and
   label tiers at ~13–14px, with line-height opened to ~1.6.

   Sizes only. No colour, no spacing, no layout — the almanac compositions,
   the rule-work and the ornament are untouched. The 640px table breakpoint
   above has already stacked `.atable` into blocks by this width, so raising
   its type cannot reintroduce a horizontal overflow.
   ------------------------------------------------------------------------ */
@media (max-width:560px){
  /* copy: 16px floor */
  .atable{font-size:1rem}
  .atable .cell-val{line-height:1.6}
  .note p{font-size:1rem;line-height:1.62}
  .cols3 p{font-size:1rem;line-height:1.62}
  .hero__side p:not(.plate){font-size:1rem;line-height:1.6}
  .ledger p{line-height:1.62}

  /* captions and labels: ~13–14px floor, still clearly the quieter tier */
  .margin-note{font-size:.88rem;line-height:1.6}
  .gloss{font-size:.9rem;line-height:1.6}
  .shots figcaption{font-size:.82rem}
  .mount__cap{font-size:.82rem}
  .roman{font-size:.8rem}
  .atable caption,.atable thead th,.atable .stat{font-size:.8rem}
  .colophon__bottom{font-size:.88rem}
  .quiet-link{font-size:.86rem}
}