/* मर्म — the verse collection.
 *
 * Its own sheet, not style.css. render.py fingerprints style.css into the
 * invalidation key for every book, so a tweak here would mark all 80 stale
 * and re-render the whole corpus. static/akhyana.css is kept apart for the
 * same reason.
 *
 * One accent, the same turmeric gold the rest of the site uses, and the Brahmi
 * lotus on the top edge of a verse block only. No second ornament: a mark at
 * the foot as well fences the block in rather than opening it. */

/* ── the front door ──────────────────────────────────────────────────── */
.mm-head{max-width:var(--measure); margin:0 auto 2.5rem; text-align:center}
.mm-head .lede{color:var(--ink-soft)}
.mm-head .lede.en{font-size:.92rem}
.mm-count{font-family:var(--ui); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brass)}

/* The theme grid is the whole navigation of this section, so it gets the wide
   measure rather than the reading one — fifteen cards in a single column is a
   scroll, not a menu. auto-fit keeps it one column on a phone without a
   breakpoint. */
.mm-grid{
  display:grid; gap:.9rem; margin:0 auto 3rem; max-width:var(--shell);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.mm-card{
  display:block; padding:1.1rem 1.2rem; text-decoration:none; color:inherit;
  background:var(--paper-card); border:1px solid var(--rule);
  border-radius:.7rem; position:relative;
  transition:border-color .15s ease, transform .15s ease;
}
.mm-card:hover,.mm-card:focus-visible{
  border-color:var(--accent); transform:translateY(-2px);
}
.mm-card h2{margin:.1rem 0 .3rem; font-size:1.12rem}
.mm-card p{margin:0; font-size:.86rem; color:var(--ink-soft); line-height:1.5}
.mm-card-n{
  float:right; font-family:var(--ui); font-size:.78rem; color:var(--brass);
  font-variant-numeric:tabular-nums;
}

/* ── a verse ─────────────────────────────────────────────────────────── */
.mm-verse{
  position:relative; margin:1.8rem auto; padding:1.3rem 1.3rem 1rem;
  max-width:var(--measure);
  background:var(--verse-bg); border:1px solid var(--verse-edge);
  border-radius:.8rem;
  box-shadow:0 8px 20px -20px var(--cast);
}
/* The lotus sits in a disc, not in a gap. Padding on an inline span punches
   a RECTANGLE out of the card's top edge, and at the card's corner radius
   that rectangle is plainly a rectangle. A round medallion the same colour as
   the card reads as a boss set into the edge, which is what it was meant to
   be all along. */
/* The lotus, drawn rather than typed. A glyph cannot be centred in a disc
   reliably: 𑁍 carries its own side bearings and its own vertical position
   inside the em box, both differ per font, and Noto Sans Brahmi is not
   installed on most machines so it falls back to something else again. An
   SVG has neither problem — the rosette is centred on 0,0 by construction
   and looks the same everywhere. */
.mm-verse .mark{
  position:absolute; top:-.8rem; left:50%; transform:translateX(-50%);
  width:1.6rem; height:1.6rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--verse-bg); border:1px solid var(--verse-edge);
  color:var(--brass); box-shadow:0 1px 3px -2px var(--cast);
}
.mm-verse .mark svg{display:block; width:.86rem; height:.86rem}
.mm-to{opacity:.6; padding:0 .1rem}
/* Who speaks. Same treatment as the akhyana pages' .speaker, so a verse reads
   the same wherever the site prints one. */
.mm-speaker{
  margin:0 0 .5rem; text-align:center; font-family:var(--ui);
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass);
}
.mm-title{
  font-family:var(--ui); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brass); text-align:center;
  margin:0 0 .7rem;
}
/* The verse itself. Centred, because that is how both houses set a verse, and
   with headroom: 2.05 was set for a single pāda pair and left the two lines of
   a chaupāī floating apart. Devanāgarī needs room for its mātrās above and its
   conjuncts below, but not that much. */
.mm-verse .sa{
  margin:.15rem 0; text-align:center; line-height:1.85;
  color:var(--verse-ink); font-size:1.06rem; font-weight:600;
}
.mm-verse .sa::first-letter{font-size:inherit; font-weight:inherit; float:none}
/* The rendering. Left-aligned against the centred verse on purpose — it is
   prose and reads as prose, and the change of alignment is what tells the eye
   the verse has ended. */
.mm-verse .gloss{
  margin:.9rem 0 0; padding-top:.8rem; border-top:1px solid var(--verse-edge);
  font-size:.95rem; line-height:1.75; color:var(--ink);
}
.mm-prasanga{
  margin:.6rem 0 0; font-size:.86rem; line-height:1.6; color:var(--ink-soft);
  font-style:italic;
}
.mm-cite{
  margin-top:.9rem; font-family:var(--ui); font-size:.68rem;
  letter-spacing:.04em; color:var(--ink-soft);
  display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap;
  align-items:center; font-variant-numeric:tabular-nums;
}
.mm-ref{color:var(--ink)}
.mm-book{color:var(--brass)}
.mm-book::before{content:"· "}
/* The page is apparatus, not the citation: quieter than the address, and the
   only thing in the line that is a link. */
.mm-folio{color:var(--ink-soft); text-decoration:none;
  border-bottom:1px dotted var(--rule)}
.mm-folio:hover,.mm-folio:focus-visible{color:var(--ink); border-color:var(--accent)}
.mm-tag{
  text-decoration:none; color:var(--ink-soft);
  border:1px solid var(--rule); border-radius:1rem; padding:.1rem .55rem;
}
.mm-tag:hover,.mm-tag:focus-visible{border-color:var(--accent); color:var(--ink)}

/* ── a theme page ────────────────────────────────────────────────────── */
/* The jump list. Wraps rather than scrolls sideways: a horizontal strip hides
   how many books there are, which is the one thing this is here to show. */
.mm-jump{
  max-width:var(--measure); margin:0 auto 2rem;
  display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center;
}
.mm-jump a{
  text-decoration:none; color:var(--ink); font-size:.82rem;
  border:1px solid var(--rule); border-radius:1rem; padding:.2rem .7rem;
}
.mm-jump a span{color:var(--brass); font-variant-numeric:tabular-nums}
.mm-jump a:hover,.mm-jump a:focus-visible{border-color:var(--accent)}
/* A jumped-to heading must not sit under the sticky masthead. */
.mm-group{scroll-margin-top:4.5rem}

.mm-group{margin:2.5rem auto; max-width:var(--measure)}
.mm-group > h2{
  font-family:var(--ui); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass);
  padding-bottom:.4rem; border-bottom:1px solid var(--rule);
}
.mm-more{max-width:var(--measure); margin:1.2rem auto 0; text-align:center}
.mm-more a{font-family:var(--ui); font-size:.82rem; text-decoration:none;
  border-bottom:1px solid var(--rule); padding-bottom:.15rem}
.mm-more a:hover,.mm-more a:focus-visible{border-color:var(--accent)}
.mm-group > h2 a{text-decoration:none; color:inherit}
.mm-group > h2 a:hover{color:var(--accent)}

.mm-featured{margin:0 auto 3rem; max-width:var(--measure)}
.mm-featured > h2,.mm-note > h2{
  font-family:var(--ui); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass); text-align:center;
}
.mm-note{max-width:var(--measure); margin:3rem auto 0; padding-top:1.5rem;
  border-top:1px solid var(--rule)}
.mm-note p{font-size:.9rem; line-height:1.7; color:var(--ink-soft)}
.mm-note .en{font-size:.85rem}

.mm-other{max-width:var(--shell); margin:3rem auto 0; padding-top:1.5rem;
  border-top:1px solid var(--rule)}
.mm-other h2{font-family:var(--ui); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass)}
.mm-other ul{list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:.5rem}
.mm-other a{
  display:inline-block; text-decoration:none; color:var(--ink);
  border:1px solid var(--rule); border-radius:1rem; padding:.25rem .8rem;
  font-size:.88rem;
}
.mm-other a span{color:var(--brass); font-variant-numeric:tabular-nums}
.mm-other a:hover,.mm-other a:focus-visible{border-color:var(--accent)}

.crumbs{max-width:var(--measure); margin:0 auto 1.2rem;
  font-family:var(--ui); font-size:.75rem; color:var(--ink-soft)}
.crumbs a{color:var(--ink-soft)}

@media (max-width: 30rem) {
  .mm-verse { padding: 3.8rem 1.1rem 1.2rem; border-radius: .85rem; }
  .mm-verse .sa { font-size: 1rem; }
  .mm-crown { height: 2.4rem; }
  .mm-rail-l { left: .4rem; } .mm-rail-r { right: .4rem; }
}

/* The masthead's count row. Duplicated from akhyana.css rather than shared:
   the two sheets are loaded independently, an akhyāna publish does not carry
   this one, and a marma-only publish must not depend on the other arriving
   first. Six declarations is a cheaper coupling than a third stylesheet. */
.ix-stats{display:flex; justify-content:center; gap:2.5rem; margin:1.75rem 0 0;
  padding:1rem 0; border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.ix-stats div{text-align:center}
.ix-stats dt{font-family:var(--ui); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft)}
.ix-stats dd{margin:.2rem 0 0; font-family:var(--sa); font-size:1.5rem;
  color:var(--verse-ink); font-variant-numeric:tabular-nums}

/* ── the reading deck ────────────────────────────────────────────────
 *
 * One card in focus, its neighbours visible above and below so the eye keeps
 * its place. The snapping is native `scroll-snap`: it is damped the way each
 * platform damps its own scrolling, runs off the main thread, and survives a
 * loaded CPU, which a hand-animated scroll does not.
 *
 * `proximity` and not `mandatory`, deliberately. Mandatory refuses to let a
 * page be skimmed — every card catches the scroll and a reader looking for
 * one verse has to walk past forty. Proximity snaps when you come to rest
 * near a card and lets a long throw go, which is the behaviour a deck of
 * cards actually has in the hand.
 *
 * Only applied under .deck-live, which the script adds. No script, or reduced
 * motion, and the page is an ordinary scrolling column.
 */
/* No snapping. The focus follows the scroll; the scroll does not follow the
   focus. Snapping centred the card under the reader — the page moved itself
   to put the highlighted card mid-screen, which is the browser taking the
   scroll away from the person doing it. The lift and the fade do all the
   work of saying which card is current, and they cost no scroll position. */
.deck-live { scroll-padding-top: 4.2rem; }
/* A flick shortens the transitions so the cards keep up with a fast throw
   instead of easing behind it. */
.deck-live [data-deck].is-flicking .mm-verse {
  transition: opacity .18s linear, transform .18s linear;
}

/* Focus. The centred card takes the stage and the rest get out of its way.
 *
 * The first pass moved between .58 and 1.0 opacity at a 2.8% size step, and
 * it read as a list with a slight wobble — the eye could not tell which card
 * it was meant to be on. What separates a deck from a list is how far the
 * OTHERS go: a tenth of a step is decoration, a third of one is hierarchy.
 *
 * So the neighbours drop to a third opacity, shrink 8%, lose their colour and
 * soften, while the focused card comes fully forward and lifts off the page.
 * Every property here is one the compositor animates on its own thread —
 * transform, opacity, filter — so sixty cards still cost no layout.
 */
.deck-live [data-deck] .mm-verse {
  opacity: .32;
  transform: scale(.92);
  filter: grayscale(.75) blur(.4px);
  will-change: transform, opacity, filter;
  transition: transform .5s cubic-bezier(.16, 1.06, .3, 1),
              opacity .38s ease, filter .38s ease, box-shadow .5s ease;
}
.deck-live [data-deck] .mm-verse.is-near {
  opacity: 1;
  transform: scale(1.035);
  filter: none;
  box-shadow:
    0 2px 3px rgba(70, 48, 16, .06),
    0 26px 50px -26px var(--cast),
    0 60px 100px -60px var(--cast);
}
/* Where the browser can drive the animation off the scroll position itself,
   the step is continuous rather than a switch at the observer's threshold —
   the card rises as it reaches the middle. Held flat across the middle third
   so it does not start shrinking the instant it arrives. */
@supports (animation-timeline: view()) {
  .deck-live [data-deck] .mm-verse {
    animation: mm-focus linear both;
    animation-timeline: view();
    animation-range: entry 14% exit 86%;
  }
  @keyframes mm-focus {
    0%   { opacity: .28; transform: scale(.9);    filter: grayscale(.8) blur(.5px); }
    34%,
    66%  { opacity: 1;   transform: scale(1.035); filter: none; }
    100% { opacity: .28; transform: scale(.9);    filter: grayscale(.8) blur(.5px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-verse { transition: none; }
}


/* ── heavier ink ──────────────────────────────────────────────────────
 * An optional weight for both the verse and its rendering. Set on the root
 * so one switch moves the whole page, remembered per reader, and off by
 * default because the lighter setting is the better default for long
 * reading — this is for the reader who finds the heavier cut stays with
 * them, which is a real preference and not a worse one.
 *
 * Weight only, and a touch of letter-spacing to stop Devanagari conjuncts
 * closing up at 700. No stroke tricks: text-stroke on Devanagari thickens
 * the matras out of proportion to the base glyph and the line goes muddy.
 */
/* Heavier ink KEEPS the hierarchy. The first pass pushed the rendering to
 * 600 and recoloured it to the verse's own ink, and the two registers
 * collapsed into one dark block — the eye could no longer tell the śloka
 * from its translation, which is the one distinction the card exists to
 * make.
 *
 * So the verse moves further than the gloss on every axis: bigger, heavier,
 * and it keeps the darkest ink. The gloss gains weight only, and stays in
 * the softer ink at its own size. Heavier, and still second.
 */
:root[data-ink="heavy"] .mm-verse .sa{
  font-size:1.17rem; font-weight:700; letter-spacing:.004em;
  color:var(--verse-ink);
}
:root[data-ink="heavy"] .mm-verse .gloss{
  font-weight:560; letter-spacing:.002em;
  /* Fainter than the body setting, not darker. Weight is what the heavier
     mode is for; letting the gloss gain colour as well as weight is what
     flattened the card the first time. It ends up thicker AND quieter, which
     is the pairing that keeps the verse on top. */
  color:color-mix(in srgb, var(--ink-soft) 88%, transparent);
}
:root[data-ink="heavy"] .mm-prasanga{font-weight:500}