.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 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 */ .reader-toc{order:2;align-self:start;font-size:13px;margin-top:48px;padding-top:24px;border-top:1px solid var(--hairline);max-height:55vh;overflow-y:auto} .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; } } .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{order:-1;position:sticky;top:150px;margin-top:0;padding-top:0;border-top:none;max-height:calc(100vh - 170px)} /* 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
  • (no