.reader{max-width:min(92vw,1080px);margin:0 auto;padding:120px 0 80px;display:grid;grid-template-columns:1fr;gap:40px}
.reader__body{--reader-scale:1;max-width:680px;margin:0 auto;font-family:'Lora',serif;font-size:calc(18px*var(--reader-scale));line-height:1.78;color:var(--ash)}
.reader__body p{margin:0 0 1.25em;line-height:1.78}
.reader__body h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:calc(24px*var(--reader-scale));line-height:1.25;letter-spacing:.01em;color:#F2ECE0;margin:1.9em 0 .5em;scroll-margin-top:110px}
[data-theme="light"] .reader__body h2{color:var(--ash)}
/* standalone <strong> topic lines (СРЕДСТВА, ПРАКТИКА) -> spaced amber subheadings */
.reader__body p > strong:only-child,.reader__body > strong{display:block;font-family:'Cormorant Garamond',serif;font-size:calc(21px*var(--reader-scale));font-weight:700;line-height:1.3;color:var(--amber);letter-spacing:.05em;text-transform:uppercase;margin:1.9em 0 .5em}
.reader__body img{max-width:100%;height:auto;border-radius:4px;margin:.5em 0}
/* Links inside the text carried no styling, so browsers drew them default
   blue-and-underlined against the dark palette. Amber with a restrained
   underline instead — visible as a link without shouting over the prose.
   text-decoration (not border-bottom) so a link wrapping across lines stays
   underlined on every line. */
.reader__body a{
  color:var(--amber-soft);
  text-decoration:underline;
  text-decoration-color:rgba(245,158,11,.35);
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  transition:color .2s, text-decoration-color .2s;
}
.reader__body a:hover,
.reader__body a:focus-visible{
  color:var(--amber);
  text-decoration-color:var(--amber);
}
.reader__body a:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; }
/* Light theme: the amber tokens already darken, but the underline tint is a
   literal colour, so it needs its own value to stay legible on cream. */
[data-theme="light"] .reader__body a{ text-decoration-color:rgba(122,79,12,.4); }
[data-theme="light"] .reader__body a:hover{ text-decoration-color:var(--amber); }
.reader-controls{position:sticky;top:78px;z-index:20;display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:6px 12px;background:rgba(255,255,255,.03);border:1px solid rgba(245,158,11,.2);border-radius:12px;backdrop-filter:blur(8px)}
.reader-controls button{background:rgba(255,255,255,.03);border:1px solid var(--hairline);color:var(--ash);border-radius:3px;padding:6px 12px;cursor:pointer}
/* mobile-first: TOC sits at the BOTTOM (after the darshan text), not over it */
/* Phone: above the text, collapsed behind one line — see parts/reader-toc.php
   for why it is no longer after the article. */
.reader-toc{order:-1;align-self:start;font-size:13px;border:1px solid var(--hairline);border-radius:12px;background:rgba(255,255,255,.03)}
.reader-toc__toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 14px;background:none;border:0;color:var(--ash);font:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;text-align:left}
.reader-toc__chevron{transition:transform .2s}
.reader-toc.is-open .reader-toc__chevron{transform:rotate(180deg)}
.reader-toc__list{max-height:50vh;overflow-y:auto;padding:0 4px 8px;border-top:1px solid var(--hairline)}
/* Collapsed only once reader.js has taken over (it adds .reader-toc--js and
   moves the nav below the controls): without JS the list stays open at the
   top, which is the old behaviour in a better place, not a locked drawer. */
.reader-toc--js .reader-toc__list{display:none}
.reader-toc--js.is-open .reader-toc__list{display:block}
.reader__main > .reader-toc{margin-top:16px}
.reader-toc a{display:block;padding:4px 10px;color:var(--ash-dim);text-decoration:none;border-left:2px solid transparent}
.reader-toc a.active{color:var(--amber-soft);border-left-color:var(--amber)}
.audio-player{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:14px;align-items:center;padding:12px 5vw;background:rgba(13,12,11,.9);backdrop-filter:blur(12px);border-top:1px solid var(--hairline);-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform}
/* The publication's lead video, carried over from the home hero. In-flow here
   (not full-bleed like the hero) so it sits with the article rather than
   behind it, capped in height so a portrait clip can't push the text off. */
.reader-video{
  display:block; width:100%; max-height:70vh; margin:0 0 26px;
  border-radius:8px; background:#000; object-fit:cover;
  border:1px solid var(--hairline);
}
@media(min-width:1000px){ .reader-video{ max-width:680px; } }
/* A video compiled INTO the body (inc/compiler.php) is one of many, not the
   lead: a box in the clip's own ratio — 9:16 for a phone clip, which the inline
   aspect-ratio on the element supplies; 9:16 is the fallback for a file whose
   size nobody recorded. `contain`, never `cover`: the lead rule above crops to
   70vh and that is exactly what the first issue showed.
   Width is set and height follows the ratio, so the box does not depend on the
   file's metadata having arrived — the 300x150 default was the strip readers
   saw. 45vh wide is 80vh tall for 9:16; on a phone the column is narrower and
   wins, and the height simply follows, so nothing is ever letterboxed. */
.reader__body .reader-video{
  width:min(100%, 45vh); height:auto; max-height:none;
  aspect-ratio:9/16; object-fit:contain; margin:0 auto 26px;
}

.yt-facade{position:relative;aspect-ratio:16/9;cursor:pointer;background:#000;border-radius:6px;overflow:hidden}
.yt-facade img{width:100%;height:100%;object-fit:cover;opacity:.7}
/* removed/private video: no play affordance, a quiet "unavailable" plate */
.yt-facade--dead{cursor:default;background:rgba(255,255,255,.03);border:1px dashed var(--hairline)}
.yt-facade__dead{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:var(--ash-dim);font-size:14px;letter-spacing:.03em}
.yt-facade__dead span::before{content:'\25B7';display:block;font-size:26px;opacity:.35;margin-bottom:4px}
/* desktop only: TOC becomes the sticky left sidebar */
@media(min-width:1000px){.reader{grid-template-columns:220px 1fr}.reader-toc{position:sticky;top:150px;border:0;border-radius:0;background:none}.reader-toc__toggle{display:none}.reader-toc__list{display:block;max-height:calc(100vh - 170px);padding:0;border-top:0}
/* No headings, so no sidebar to reserve — otherwise the article would sit in
   the empty TOC column and look like a phone layout on a desktop screen. */
.reader--no-toc{grid-template-columns:1fr}
/* justify-self, NOT `margin:0 auto`: auto side margins on a grid item cancel
   the default stretch and collapse it to its content width — which is exactly
   how this column ended up at ~500px instead of 760. */
.reader--no-toc .reader__main{max-width:760px;width:100%;justify-self:center}}
.reader-controls ul{list-style:none;display:flex;gap:6px;margin:0;padding:0}
/* Polylang renders bare <li> (no <ul>) here — kill the bullet + align them inline with the buttons */
.reader-controls li{margin:0;list-style:none;display:inline-flex;align-items:center}
.reader-controls a{display:block;padding:5px 8px;border-radius:20px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ash-dim);text-decoration:none;transition:.25s}
.reader-controls a:hover{background:rgba(245,158,11,.12);color:var(--amber-soft)}
.reader-controls li span{display:block;padding:5px 8px;border-radius:20px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ash-dim)}
.reader-controls .current-lang span{background:rgba(245,158,11,.12);color:var(--amber-soft)}
.reader-controls .no-translation span{opacity:.3;cursor:default;text-decoration:line-through;text-decoration-thickness:1px}
/* light theme: give the glass plate a subtle dark tint so it reads on a light page */
[data-theme="light"] .reader-controls{background:rgba(0,0,0,.04);border-color:rgba(122,20,20,.18)}
[data-theme="light"] .reader-controls button{background:rgba(0,0,0,.05)}