/* ═══════════════════════════════════════════════════════════════════════
   GEETA MAITRI · design system v2
   Calm continuous reading, magazine devices around it.
   Paper #FFFDF9 · ink #111 · masthead red #E32227 (from #FC3134, darkened for text contrast)
   amber #FCC542 · orange #FF5F1F
   Type: Rozha One (Hindi display) · Noto Serif Devanagari (Hindi text) · Fraunces (English)
         Mukta + General Sans (labels and interface)
   Photographs are never cropped: every frame carries --ar, the photograph's own proportion.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Rozha";src:url(/fonts/rozha-one-devanagari.woff2) format("woff2");font-display:swap;unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:"Rozha";src:url(/fonts/rozha-one-latin.woff2) format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"NotoSerifDev";src:url(/fonts/noto-serif-devanagari.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces-var.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces-var-ext.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces-var-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Mukta";src:url(/fonts/mukta-devanagari.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0900-097F,U+200C-200D,U+25CC}
@font-face{font-family:"GeneralSans";src:url(/fonts/general-sans-500.woff2) format("woff2");font-weight:500 700;font-display:swap}
@font-face{font-family:"GeneralSans";src:url(/fonts/general-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --paper:#FFFDF9; --paper-2:#F7F3EC; --paper-3:#EFE9DF; --ink:#111; --ink-2:#3B3733; --ink-3:#6D675F; --rule:#E4DDD2;
  --red:#E32227; --red-hi:#FC3134; --amber:#FCC542; --amber-soft:#FFF4D6; --orange:#FF5F1F; --night:#121110;
  --f-disp:"Rozha","NotoSerifDev",serif;
  --f-text:"NotoSerifDev","Fraunces",Georgia,serif;
  --f-en:"Fraunces","NotoSerifDev",Georgia,serif;
  --f-ui:"GeneralSans","Mukta",system-ui,sans-serif;
  --measure:680px; --wide:1060px; --gut:clamp(18px,4vw,56px);
  --e:cubic-bezier(.16,1,.3,1);
  --lift:0 1px 2px rgba(17,17,17,.06),0 12px 32px -14px rgba(17,17,17,.28);
  --lift-2:0 2px 4px rgba(17,17,17,.06),0 30px 60px -24px rgba(17,17,17,.38);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.8 var(--f-text);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;cursor:pointer;color:inherit}
[lang="en"]{font-family:var(--f-en)}
[lang="sa"]{font-family:"NotoSerifDev",serif}
.sr{position:absolute;left:-9999px}.sr:focus{left:12px;top:12px;z-index:99;background:#fff;padding:8px 12px}
:focus-visible{outline:2.5px solid var(--red);outline-offset:3px;border-radius:2px}
::selection{background:var(--amber)}

/* ── icons (pure CSS, crisp at any size) ── */
.ico{display:inline-block;width:1em;height:1em;flex:none;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ico--list{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10'/%3E%3C/svg%3E")}
.ico--down{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m0 0 4.5-4.5M12 15l-4.5-4.5M5 20h14'/%3E%3C/svg%3E")}
.ico--share{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4m0 0L8 8m4-4 4 4M5 13v6h14v-6'/%3E%3C/svg%3E")}
.ico--play{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l13-7.5z'/%3E%3C/svg%3E");vertical-align:-.1em}

/* ── buttons: large, labelled, obvious ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;padding:.55em 1.1em;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);
  font:600 15px/1.1 var(--f-ui);letter-spacing:.01em;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s,border-color .2s,transform .2s var(--e)}
.btn:hover{background:var(--ink);color:#fff}
.btn:active{transform:translateY(1px)}
.btn.--red{background:var(--red);border-color:var(--red);color:#fff}
.btn.--red:hover{background:var(--ink);border-color:var(--ink)}
.btn.--ink{background:var(--ink);color:#fff}
.btn.--ink:hover{background:var(--red);border-color:var(--red)}
.btn.--ghost{background:transparent}
.btn.--ghost:hover{background:var(--ink)}
.btn.--sm{min-height:38px;font-size:14px;padding:.45em .95em}
.btn.--lg{min-height:52px;font-size:17px;padding:.6em 1.4em}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ── masthead mark ── */
.mast{display:inline-block;background:var(--red);color:#fff;font:400 24px/1 var(--f-disp);padding:7px 12px 3px;text-decoration:none;letter-spacing:.01em}
.mast.--sm{font-size:20px;padding:6px 10px 2px}

/* ── top bar with reading progress ── */
.bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;min-height:62px;padding:8px var(--gut);background:rgba(255,253,249,.94);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--rule)}
.bar__issue{display:flex;flex-direction:column;line-height:1.15;text-decoration:none;min-width:0}
.bar__issue b{font:700 14px/1.2 var(--f-ui);color:var(--red)}
.bar__issue span{font:500 14px/1.25 var(--f-ui);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar__nav{margin-left:auto;display:flex;gap:8px}
.runner{position:absolute;left:0;right:0;bottom:-1px;height:3px}
.runner__t{display:none}
.runner__bar{position:absolute;left:0;top:0;height:3px;width:100%;background:var(--red);transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* ── contents drawer ── */
.toc{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none}
.toc.is-open{visibility:visible;pointer-events:auto}
.toc__scrim{position:absolute;inset:0;background:rgba(17,17,17,.5);opacity:0;transition:opacity .35s}
.toc.is-open .toc__scrim{opacity:1}
.toc__panel{position:absolute;right:0;top:0;bottom:0;width:min(440px,94vw);background:var(--paper);overflow:auto;padding:18px 22px 40px;transform:translateX(102%);transition:transform .5s var(--e)}
.toc.is-open .toc__panel{transform:none;box-shadow:-24px 0 60px rgba(0,0,0,.2)}
.toc__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.toc__x{width:44px;height:44px;border:1.5px solid var(--ink);border-radius:50%;background:none;font:600 16px/1 var(--f-ui)}
.toc__x:hover{background:var(--ink);color:#fff}
.toc__issue{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-top:3px solid var(--ink);border-bottom:1px solid var(--rule);text-decoration:none;font:500 15px/1.3 var(--f-ui)}
.toc__issue b{color:var(--red);font-weight:700}
.toc__sec{border-bottom:1px solid var(--rule)}
.toc__sec summary{list-style:none;display:flex;gap:12px;align-items:baseline;padding:12px 0;cursor:pointer;font:600 17px/1.3 var(--f-ui)}
.toc__sec summary::-webkit-details-marker{display:none}
.toc__sec summary::after{content:"+";margin-left:auto;font-weight:400;color:var(--ink-3)}
.toc__sec[open] summary::after{content:"–"}
.toc__sec summary b{font:400 20px/1 var(--f-disp);color:var(--red);min-width:30px}
.toc__sec ul{list-style:none;margin:0 0 12px 42px;padding:0}
.toc__sec li a{display:block;padding:6px 0;font-size:16px;line-height:1.45;text-decoration:none;color:var(--ink-2)}
.toc__sec li a:hover,.toc__sec li a[aria-current]{color:var(--red)}
.toc__sec li a[aria-current]{font-weight:600}
.toc__all{display:block;margin-top:18px;font:600 16px var(--f-ui);text-decoration:none}

/* ── shared type ── */
.kicker{display:inline-flex;align-items:center;gap:10px;font:600 14px/1.2 var(--f-ui);letter-spacing:.02em;text-decoration:none;color:var(--ink-2)}
.kicker b{display:inline-block;background:var(--red);color:#fff;font-weight:700;padding:5px 8px 4px;border-radius:3px;letter-spacing:.04em}
a.kicker:hover span{color:var(--red)}
.hed{font:400 clamp(40px,5.6vw,80px)/1.08 var(--f-disp);margin:.3em 0 .35em;letter-spacing:-.005em;text-wrap:balance}
.hed.--mid{font-size:clamp(34px,4.3vw,62px)}
.hed.--long{font-size:clamp(28px,3.3vw,46px);line-height:1.15}
.hed.en{font-family:var(--f-en);font-weight:600;letter-spacing:-.02em;line-height:1.04;font-variation-settings:"opsz" 144}
.deck{font:400 clamp(19px,1.6vw,23px)/1.6 var(--f-text);color:var(--ink-2);margin:0 0 1.2em;max-width:44em;text-wrap:pretty}
.deck[lang="en"]{font-family:var(--f-en);font-style:italic}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;padding-top:16px;border-top:1px solid var(--rule);font:500 15px/1.3 var(--f-ui);color:var(--ink-3)}
.byline__who{display:flex;flex-direction:column;gap:2px}
.byline__who b{font-weight:700;color:var(--ink);font-size:16px}
.byline__who small{font-size:14px}
.byline__act{display:flex;gap:8px;margin-left:auto}

/* ═══ OPENERS ═══ photographs at their own proportion */
main{display:block}
.op{width:min(1320px,calc(100% - 2*var(--gut)));margin:clamp(24px,5vw,64px) auto clamp(28px,5vw,56px)}
.op__photo{margin:0;position:relative}
.op__photo img{width:100%;height:auto;aspect-ratio:var(--ar);background:var(--paper-2)}
.op__photo figcaption{font:500 14px/1.45 var(--f-ui);color:var(--ink-3);margin-top:10px}
.op--wide .op__text,.op--photo .op__text,.op--type .op__text,.op--poster .op__text{max-width:900px}
.op--wide .op__photo,.op--photo .op__photo{margin-top:clamp(24px,4vw,44px)}
.op--wide .op__photo img{max-height:82vh;width:auto;max-width:100%;margin:0 auto}
.op--portrait,.op--square{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,80px);align-items:center}
.op--portrait .op__photo img{max-height:84vh;width:auto;margin-left:auto}
.op--square .op__photo img{max-height:78vh;width:auto;margin-left:auto}
.op--poster{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:center}
.op--poster .op__photo{background:var(--paper-2);padding:clamp(18px,3vw,40px);border-radius:4px}
.op--poster .op__photo img{max-height:74vh;width:auto;margin:0 auto;box-shadow:var(--lift)}
.op--type{padding:clamp(40px,8vw,120px) 0 clamp(10px,2vw,20px);border-bottom:4px solid var(--ink)}
.op--type .hed{font-size:clamp(46px,7vw,110px)}
.op--type .hed.--mid{font-size:clamp(40px,5.4vw,84px)}.op--type .hed.--long{font-size:clamp(32px,4vw,58px)}
.story--play .op{background:var(--amber-soft);padding:clamp(24px,4vw,56px);border-radius:6px}

/* ═══ PROSE ═══ */
.prose{max-width:var(--measure);margin:0 auto;padding:0 var(--gut) 20px;box-sizing:content-box;font-size:clamp(18px,1.25vw,20px);line-height:1.85}
.prose::after{content:"";display:table;clear:both}
.prose.--en{line-height:1.7}
.prose p{margin:0 0 1.05em;text-wrap:pretty}
.prose > p:first-of-type{margin-top:0}
.prose.--en > p:first-of-type::first-letter{float:left;font:600 4.1em/.82 var(--f-en);margin:.06em .1em 0 0;color:var(--red)}
.prose h2{font:700 1.34em/1.3 var(--f-text);margin:1.9em 0 .6em;padding-top:.7em;position:relative;clear:none}
.prose h2::before{content:"";position:absolute;top:0;left:0;width:48px;height:3px;background:var(--red)}
.prose.--en h2{font-family:var(--f-en);font-weight:600}
.prose h3{font:700 1.12em/1.35 var(--f-text);margin:1.5em 0 .4em}
.prose strong,.prose b{font-weight:700}
.prose a{color:var(--red);text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.3em}
.prose li{margin:.3em 0}
.prose li::marker{color:var(--red)}
.prose .shloka,.prose p[lang="sa"]{text-align:center;color:#9A1B1F;font-family:"NotoSerifDev",serif;line-height:1.9;margin:.2em auto}
.prose .shloka + :not(.shloka){margin-top:1.1em}
.prose .quoted{font-style:italic;color:var(--ink-2);border-left:3px solid var(--rule);padding-left:1em}
.prose .centered{text-align:center}
.prose table{width:100%;border-collapse:collapse;margin:1.4em 0;font:400 .88em/1.5 var(--f-ui)}
.prose th,.prose td{border-bottom:1px solid var(--rule);padding:.55em .6em;text-align:left;vertical-align:top}
.prose th{font-weight:700;border-bottom:2px solid var(--ink)}
.callout{margin:1.8em 0;padding:.9em 0 .7em;border-top:4px solid var(--red);border-bottom:1px solid var(--ink);clear:both}
.callout p{margin:0!important;font:400 clamp(24px,2.3vw,32px)/1.35 var(--f-disp)!important;color:var(--ink)}
.prose.--en .callout p{font-family:var(--f-en)!important;font-style:italic;font-weight:500!important}
.endmark{display:inline-block;width:.6em;height:.6em;background:var(--red);margin-left:.4em;vertical-align:baseline}

/* photographs in the text: every frame is the photograph's own shape */
.fig{margin:1.6em 0;clear:both}
.fig img{width:100%;height:auto;aspect-ratio:var(--ar);background:var(--paper-2);border-radius:2px}
.fig figcaption,.tile figcaption{font:500 14px/1.45 var(--f-ui);color:var(--ink-3);margin-top:8px}
.fig.--tall,.fig.--square{clear:none;margin-top:.35em;margin-bottom:1em}
.fig.--tall{width:min(42%,290px)}.fig.--square{width:min(48%,340px)}
.fig.--r{float:right;margin-left:1.6em}
.fig.--l{float:left;margin-right:1.6em}
.fig.--c{float:none;margin-left:auto;margin-right:auto}
.fig.--wide{width:min(var(--wide),100vw - 2*var(--gut));margin-left:50%;transform:translateX(-50%)}
.fig.--wide img{max-height:86vh;width:auto;max-width:100%;margin:0 auto}
.fig.--pano{width:min(1320px,100vw - 2*var(--gut));margin-left:50%;transform:translateX(-50%)}
.fig.--mat{background:var(--paper-2);padding:clamp(14px,3vw,34px);border-radius:4px;width:min(820px,100vw - 2*var(--gut));margin-left:50%;transform:translateX(-50%)}
.fig.--mat img{width:auto;max-width:100%;max-height:80vh;margin:0 auto;background:none;box-shadow:var(--lift)}
.fig.--mat figcaption{text-align:center}
@media (min-width:1180px){
  .fig.--tall.--r,.fig.--square.--r{margin-right:-150px;width:min(52%,360px)}
  .fig.--tall.--l,.fig.--square.--l{margin-left:-150px;width:min(52%,360px)}
  .fig.--square.--r,.fig.--square.--l{width:min(58%,420px)}
}
/* mosaic: justified rows, equal heights, widths follow each photograph's proportion */
.mosaic{width:min(var(--wide),100vw - 2*var(--gut));margin:2em 0 2em 50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:clamp(8px,1vw,14px);clear:both}
.mosaic__row{display:flex;gap:clamp(8px,1vw,14px);align-items:flex-start}
.tile{margin:0;min-width:0}
.tile img{width:100%;height:auto;aspect-ratio:var(--ar);background:var(--paper-2);border-radius:2px;cursor:zoom-in}
.fig img{cursor:zoom-in}

/* ═══ YOUTUBE: the screening band ═══ */
.screen{position:relative;clear:both;margin:2.4em 0 2.4em 50%;width:100vw;transform:translateX(-50%);background:var(--night);padding:clamp(22px,4vw,52px) var(--gut);color:#fff}
.screen__btn,.screen iframe{display:block;position:relative;width:min(960px,100%);aspect-ratio:16/9;margin:0 auto;border:0;padding:0;background:#000;overflow:hidden;border-radius:6px}
.screen__btn img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity .4s,transform 1.2s var(--e)}
.screen__btn:hover img{opacity:1;transform:scale(1.02)}
.screen__play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--red);box-shadow:0 10px 40px rgba(0,0,0,.45);transition:transform .3s var(--e)}
.screen__play::after{content:"";position:absolute;left:34px;top:26px;border-left:24px solid #fff;border-top:16px solid transparent;border-bottom:16px solid transparent}
.screen__btn:hover .screen__play{transform:scale(1.08)}
.screen__lbl{position:absolute;left:18px;bottom:16px;font:600 15px/1 var(--f-ui);background:rgba(0,0,0,.65);padding:9px 12px;border-radius:999px}
.screen figcaption{width:min(960px,100%);margin:12px auto 0;font:500 14px var(--f-ui);text-align:right}
.screen figcaption a{color:rgba(255,255,255,.7);text-decoration:none}
.screen figcaption a:hover{color:#fff}

/* ═══ NEXT / PREVIOUS ═══ */
.turn{width:min(var(--wide),calc(100% - 2*var(--gut)));margin:clamp(40px,6vw,80px) auto 0;display:grid;grid-template-columns:1fr 1fr;gap:14px;border-top:4px solid var(--ink);padding-top:18px}
.turn a{display:flex;align-items:center;gap:16px;text-decoration:none;padding:14px;border-radius:6px;transition:background .2s}
.turn a:hover{background:var(--paper-2)}
.turn__n{justify-content:flex-end;text-align:right}
.turn small{display:block;font:600 13px/1 var(--f-ui);color:var(--red);letter-spacing:.04em;margin-bottom:6px}
.turn b{font:400 clamp(19px,1.6vw,24px)/1.3 var(--f-disp)}
.turn b[lang="en"]{font-family:var(--f-en);font-weight:600}
.thumb{display:block;flex:none;height:var(--h,72px);aspect-ratio:var(--ar);max-width:160px;border-radius:3px;overflow:hidden;background:var(--paper-2)}
.thumb img{width:100%;height:100%;object-fit:contain}
.thumb.--type{display:flex;align-items:center;justify-content:center;aspect-ratio:1;background:var(--ink);color:var(--amber);font:400 30px/1 var(--f-disp)}

/* ═══ ISSUE ═══ */
.issue__hero{width:min(1320px,calc(100% - 2*var(--gut)));margin:clamp(24px,5vw,64px) auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,96px);align-items:center}
.issue__intro .hed{font-size:clamp(40px,5vw,76px)}
.issue__shlok{border-left:3px solid var(--red);padding:.2em 0 .2em 1.1em;margin:0 0 1.6em;color:var(--ink-2);font-size:16px;line-height:1.75}
.issue__shlok p{margin:0}
.issue__shlok .shl{color:#9A1B1F;font-size:18px}
.issue__stats{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:8px 34px;margin:0 0 1.8em}
.issue__stats dt{font:600 13px/1.2 var(--f-ui);color:var(--ink-3);letter-spacing:.04em}
.issue__stats dd{margin:2px 0 0;font:400 32px/1 var(--f-disp)}
.issue__cta{display:flex;flex-wrap:wrap;gap:10px}

/* the cover: masthead, photograph at its own proportion, cover lines */
.cover{display:flex;flex-direction:column;aspect-ratio:210/297;background:var(--night);color:#fff;box-shadow:var(--lift-2);overflow:hidden;container-type:inline-size;text-decoration:none}
.cover__top{display:flex;align-items:flex-start;justify-content:space-between;gap:4cqi;padding:5cqi 5cqi 4cqi;background:var(--paper);color:var(--ink)}
.cover__mast{background:var(--red);color:#fff;font:400 15cqi/1 var(--f-disp);padding:2.2cqi 3.6cqi .4cqi}
.cover__tag{font:600 3.6cqi/1.2 var(--f-ui);color:var(--red);text-align:right;max-width:34cqi}
.cover__ph{flex:none}
.cover__ph img{width:100%;height:auto;aspect-ratio:var(--ar)}
.cover__lines{list-style:none;margin:0;padding:5cqi 5cqi 2cqi;flex:1;display:flex;flex-direction:column;justify-content:center;gap:2.6cqi}
.cover__lines li{font:400 4.6cqi/1.18 var(--f-disp)}
.cover__lines li[lang="en"]{font-family:var(--f-en);font-weight:600}
.cover__lines li.--lead{font-size:6.4cqi;color:var(--amber)}
.cover__foot{display:flex;align-items:flex-end;justify-content:space-between;padding:0 5cqi 5cqi}
.cover__issue b{display:block;font:400 8cqi/1 var(--f-disp)}
.cover__issue span{font:500 3.6cqi/1.2 var(--f-ui);color:rgba(255,255,255,.8)}
.barcode{width:17cqi;height:auto;fill:#111;background:#fff;padding:1.2cqi 1.4cqi}

/* index: sections with thumbnails at their own proportion */
.index,.shelf,.team__in,.dept,.notfound{width:min(1320px,calc(100% - 2*var(--gut)));margin:0 auto clamp(40px,6vw,90px)}
.index__h{font:400 clamp(40px,5vw,72px)/1 var(--f-disp);margin:0 0 .4em;padding-bottom:.25em;border-bottom:4px solid var(--ink)}
.ix{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:clamp(16px,3vw,48px);padding:22px 0;border-bottom:1px solid var(--rule)}
.ix__sec{display:flex;flex-direction:column;gap:6px;text-decoration:none;align-self:start;position:sticky;top:84px}
.ix__sec b{font:400 clamp(44px,5vw,72px)/.9 var(--f-disp);color:var(--red)}
.ix__sec span{font:400 clamp(21px,1.8vw,27px)/1.25 var(--f-disp)}
.ix__sec small{font:600 13px var(--f-ui);color:var(--ink-3);letter-spacing:.04em}
.ix__sec:hover span{color:var(--red)}
.ix__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:4px 26px}
.ix__list a{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:10px 8px;border-radius:6px;text-decoration:none;transition:background .2s}
.ix__list a:hover{background:var(--paper-2)}
.ix__list .thumb{--h:64px;grid-row:span 2;max-width:110px}
.ix__t{font:500 17px/1.35 var(--f-text);align-self:end}
.ix__t[lang="en"]{font-family:var(--f-en)}
.ix__list small{font:500 13px/1.3 var(--f-ui);color:var(--ink-3);align-self:start}
.ix__list a:hover .ix__t{color:var(--red)}

/* team */
.team{background:var(--paper-2);padding:clamp(40px,6vw,90px) 0 1px}
.team__head{display:flex;align-items:center;gap:22px;margin-bottom:28px}
.team__head .hed{margin:.15em 0 0}
.team__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,64px)}
.team__col h3{font:700 13px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.team__col dl{margin:0 0 14px}
.team__col dt{font:700 14px/1.3 var(--f-ui);color:var(--red)}
.team__col dd{margin:2px 0 0;font-size:18px;line-height:1.5}
.team__col dd.--tbc{color:var(--ink-3);font-style:italic}
.team__col.--wide{grid-column:1/-1}
.team__col ul{list-style:none;margin:0;padding:0;columns:3 220px;column-gap:32px}
.team__col li{font-size:17px;line-height:1.9;break-inside:avoid}

/* section page */
.dept__head{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,40px);align-items:end;padding:clamp(28px,6vw,80px) 0 26px;border-bottom:4px solid var(--ink);margin-bottom:28px}
.dept__n{font:400 clamp(110px,16vw,240px)/.78 var(--f-disp);color:var(--red)}
.dept__head .hed{margin:.2em 0 .2em}
.dept__meta{font:600 15px var(--f-ui);color:var(--ink-3);margin:0}
/* cards: masonry, photographs at their own proportion */
.cards{columns:3 300px;column-gap:clamp(18px,2.4vw,36px)}
.card{display:flex;flex-direction:column;break-inside:avoid;margin:0 0 clamp(22px,3vw,40px);text-decoration:none}
.card__ph{display:block;border-radius:3px;overflow:hidden;background:var(--paper-2)}
.card__ph img{width:100%;height:auto;aspect-ratio:var(--ar);transition:transform 1s var(--e)}
.card:hover .card__ph img{transform:scale(1.025)}
.card__ph.--flat{padding:16px}.card__ph.--flat img{box-shadow:var(--lift)}
.card__type{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:var(--ink);border-radius:3px}
.card__type em{font:400 clamp(60px,7vw,110px)/1 var(--f-disp);font-style:normal;color:var(--amber)}
.card__meta{font:600 13px/1.2 var(--f-ui);color:var(--red);letter-spacing:.03em;margin:14px 0 6px}
.card__t{font:400 clamp(22px,1.8vw,28px)/1.25 var(--f-disp)}
.card__t[lang="en"]{font-family:var(--f-en);font-weight:600}
.card.--big .card__t{font-size:clamp(28px,2.6vw,40px)}
.card__d{font-size:16px;line-height:1.6;color:var(--ink-2);margin-top:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card__by{font:600 13px var(--f-ui);color:var(--ink-3);margin-top:8px}
.card:hover .card__t{color:var(--red)}

/* home */
.home__hero{width:min(1320px,calc(100% - 2*var(--gut)));margin:clamp(24px,5vw,64px) auto clamp(48px,7vw,110px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,6vw,100px);align-items:center}
.home__h{font:400 clamp(90px,14vw,230px)/.86 var(--f-disp);margin:.12em 0 .22em;letter-spacing:-.02em}
.home__h span{display:block}.home__h span:first-child{color:var(--red)}
.home__d{font-size:clamp(18px,1.4vw,22px);line-height:1.7;color:var(--ink-2);max-width:34em;margin:0 0 1.5em}
.home__cover{display:block;text-decoration:none;transform:rotate(1.6deg);transition:transform .8s var(--e)}
.home__cover:hover{transform:rotate(0) translateY(-6px)}
.shelf__row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:clamp(20px,3vw,44px)}
.shelf__it{text-decoration:none}
.shelf__it .cover{transition:transform .6s var(--e)}
.shelf__it:hover .cover{transform:translateY(-8px)}
.shelf__cap{display:flex;flex-direction:column;gap:2px;margin-top:14px;font:500 15px/1.35 var(--f-ui)}
.shelf__cap b{color:var(--red);font-weight:700}
.shelf__cap small{color:var(--ink-3)}
.notfound{padding:clamp(40px,8vw,120px) 0}

/* footer */
.colo{background:var(--night);color:#fff;margin-top:clamp(50px,8vw,120px)}
.colo__in{width:min(1320px,calc(100% - 2*var(--gut)));margin:0 auto;padding:44px 0 50px;display:grid;grid-template-columns:1.2fr 1fr auto;gap:28px 48px;align-items:start}
.colo p{margin:12px 0 0;font:400 15px/1.6 var(--f-ui);color:rgba(255,255,255,.72)}
.colo__line{color:var(--amber)!important;font-family:"NotoSerifDev",serif!important;margin-top:4px!important}
.colo nav{display:flex;flex-direction:column;gap:8px;font:600 15px/1.3 var(--f-ui)}
.colo nav a{text-decoration:none}.colo nav a:hover{color:var(--amber)}

/* studio additions shown on public pages */
[data-studio-list]:empty{display:none}
.studio-add{margin-top:26px;padding:18px 0;border-top:3px solid var(--red)}
.studio-add h3{font:700 13px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin:0 0 12px}
.studio-add .cards{columns:3 280px}

/* lightbox */
.lb{position:fixed;inset:0;z-index:80;background:rgba(10,10,10,.94);display:flex;align-items:center;justify-content:center;padding:4vh 4vw;opacity:0;transition:opacity .3s}
.lb.is-on{opacity:1}
.lb img{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 20px 80px rgba(0,0,0,.6)}
.lb button{position:absolute;top:16px;right:16px;width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);background:none;color:#fff;font:600 18px var(--f-ui)}

.loading{padding:80px 20px;text-align:center;font:600 20px var(--f-ui);color:var(--ink-3)}

/* reveal: gentle, never hides content without script */
.js .card,.js .ix,.js .fig,.js .mosaic{transition:opacity .9s var(--e),transform 1s var(--e)}
.js .pre{opacity:0;transform:translateY(18px)}

/* activity (kids) pages */
.act-reveal{margin:1.2em 0 1.8em}
.act-answer{background:var(--amber-soft);padding:.8em 1em;border-radius:6px;margin-top:.6em}
.act-sort{list-style:none;padding:0}
.act-sort li{display:flex;gap:12px;align-items:center;background:var(--paper-2);border:1px solid var(--rule);border-radius:6px;padding:10px 14px;margin:8px 0;cursor:grab}
.act-sort li.is-ok{border-color:#1f7a3d;background:#EAF5EC}.act-sort li.is-bad{border-color:var(--red);background:#FDECEC}
.act-grip{color:var(--ink-3);font-family:var(--f-ui)}
.act-bar{display:flex;gap:16px;align-items:center;margin:.6em 0 1.6em}
.act-out{font:700 16px var(--f-ui)}

/* ═══ NARROW SCREENS ═══ */
@media (max-width:900px){
  .op--portrait,.op--square,.op--poster{grid-template-columns:1fr}
  .op--portrait .op__photo img,.op--square .op__photo img{max-height:72vh;margin:0 auto}
  .op--poster .op__photo{order:-1}
  .issue__hero,.home__hero{grid-template-columns:1fr}
  .issue__cover,.home__cover{max-width:440px;width:100%;margin:0 auto}
  .home__cover{transform:none}
  .ix{grid-template-columns:1fr}
  .ix__sec{position:static;flex-direction:row;align-items:baseline;gap:14px;flex-wrap:wrap}
  .team__grid{grid-template-columns:1fr}
  .colo__in{grid-template-columns:1fr}
  .turn{grid-template-columns:1fr}
  .turn__n{justify-content:flex-start;text-align:left;flex-direction:row-reverse}
  .fig.--tall,.fig.--square{width:min(46%,260px)}
}
@media (max-width:620px){
  body{font-size:17px}
  .bar{gap:10px;min-height:56px}
  .bar__issue{display:none}
  .bar .btn{padding:.45em .8em}
  .byline__act{margin-left:0;width:100%}
  .fig.--tall,.fig.--square{float:none;width:auto;max-width:100%;margin:1.4em auto}
  .fig.--tall img{max-height:76vh;width:auto;margin:0 auto}
  .mosaic__row{flex-wrap:wrap}
  .mosaic__row .tile{flex-basis:calc(50% - 6px)!important}
  .mosaic__row .tile:only-child{flex-basis:100%!important}
  .issue__stats{grid-template-columns:repeat(2,auto)}
  .ix__list{grid-template-columns:1fr}
  .screen__play{width:64px;height:64px;margin:-32px 0 0 -32px}.screen__play::after{left:26px;top:20px;border-left-width:18px;border-top-width:12px;border-bottom-width:12px}
  .cards{columns:1}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}.js .pre{opacity:1;transform:none}}

/* ═══ PRINT (article PDFs) ═══ */
@media print{
  @page{size:A4;margin:16mm 16mm 18mm}
  .bar,.toc,.turn,.colo,.byline__act,.screen__btn,.lb{display:none!important}
  body{background:#fff;font-size:10.5pt}
  .op{width:auto;margin:0 0 12pt;display:block}
  .op__photo img{max-height:95mm!important;width:auto!important;margin:8pt 0 0}
  .hed{font-size:26pt!important;margin:6pt 0}
  .deck{font-size:12pt}
  .prose{max-width:none;padding:0;font-size:10.5pt}
  .fig.--wide,.fig.--pano,.fig.--mat,.mosaic,.screen{width:auto;margin-left:0;transform:none}
  .fig img,.tile img{max-height:90mm;width:auto}
  .screen{background:none;color:#111;padding:0;border:1px solid #ccc}
  .screen figcaption a{color:#111}
  .js .pre{opacity:1;transform:none}
  h2{break-after:avoid}.fig,.mosaic__row{break-inside:avoid}
}
.preview-flag{position:sticky;top:62px;z-index:30;background:var(--amber);text-align:center;font:700 14px/1 var(--f-ui);padding:10px}

/* editor marks: pull quotes, sidebars, notes, bullet lists */
.quotes{margin:2em 0;display:grid;gap:0}
.quotes .callout{margin:0;border-bottom:none}
.quotes .callout:last-child{border-bottom:1px solid var(--ink)}
.sidebar{clear:both;margin:2em 0;padding:1.3em 1.5em 1.1em;background:var(--amber-soft);border-top:4px solid var(--ink);font-family:var(--f-ui);font-size:.9em;line-height:1.55}
.sidebar h4{font:700 13px/1.3 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;margin:0 0 .8em;color:var(--ink)}
.sidebar ul{margin:0 0 .6em;padding-left:1.1em}
.sidebar li{margin:.25em 0}
.sidebar p{margin:.6em 0 0;color:var(--ink-2)}
.note{clear:both;margin:1.6em 0;padding:.2em 0 .2em 1.1em;border-left:4px solid var(--red)}
.note b{display:block;font:700 13px/1.3 var(--f-ui);letter-spacing:.06em;color:var(--red);margin-bottom:.35em}
.note p{margin:0!important;font-size:1.08em;line-height:1.6}
.prose p:has(+ .screen){font:500 14px/1.4 var(--f-ui);color:var(--ink-3);margin-bottom:0}
@media (min-width:1180px){.sidebar{float:right;width:320px;margin:.4em -170px 1.2em 1.8em;clear:right}}

.ix__sec span[lang="en"]{font-family:var(--f-en);font-weight:600;letter-spacing:-.01em}
.kicker span[lang="en"],.toc__sec summary span[lang="en"]{font-family:var(--f-ui)}

/* downloads */
.btn__meta{font-weight:500;opacity:.65;font-size:.85em}
.issue__note{font:500 14px/1.5 var(--f-ui);color:var(--ink-3);margin:12px 0 0}
.issue__note a{color:var(--red)}
.shelf__lead{font:500 16px var(--f-ui);color:var(--ink-3);margin:-.4em 0 1.6em}
.shelf__it > a{display:block;text-decoration:none}
.shelf__pdf img{width:100%;height:auto;aspect-ratio:210/297;object-fit:contain;background:var(--paper-2);box-shadow:var(--lift-2);transition:transform .6s var(--e)}
.shelf__pdf:hover img{transform:translateY(-8px)}
.shelf__act{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cover:not(.--big) .cover__lines li:nth-child(n+4){display:none}
.cover:not(.--big) .cover__lines{justify-content:flex-start;padding-top:4cqi}

/* ═══ v2.1 · readability, elegance, phones, motion ═══════════════════════
   Rozha One stays only where type is large. Every smaller title uses Noto Serif
   Devanagari at a firmer weight; text is larger and darker; phones get their own rhythm. */
:root{--ink:#161310;--ink-2:#34302b;--f-title:"NotoSerifDev","Fraunces",Georgia,serif}
html,body{overflow-x:clip}
body{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.prose{font-size:clamp(19.5px,1.35vw,21.5px);line-height:1.95;color:#1c1915;font-weight:430}
.prose.--en{font-size:clamp(19px,1.3vw,21px);line-height:1.72;font-weight:400}
.prose p{margin-bottom:1.15em}
.prose strong,.prose b{font-weight:700}
.deck{font-size:clamp(20px,1.7vw,24px);line-height:1.62}
.ix__sec span,.card__t,.turn b,.toc__sec summary span{font-family:var(--f-title);font-weight:650;letter-spacing:-.005em}
.ix__sec span{font-size:clamp(20px,1.6vw,24px);line-height:1.32}
.ix__t{font-family:var(--f-title);font-weight:500;font-size:17.5px;line-height:1.45}
.card__t{line-height:1.3}
.card.--big .card__t{font-family:var(--f-disp);font-weight:400;line-height:1.15}
.turn b{line-height:1.35}
.kicker{font-size:14.5px}
.byline{font-size:15.5px}
.fig figcaption,.tile figcaption,.op__photo figcaption{font-size:14.5px;line-height:1.55}
.card__d,.dept__meta,.shelf__cap{font-size:16px}
.toc__sec li a{font-family:var(--f-title);font-weight:500;font-size:16.5px;line-height:1.5}

/* archive issues: the original printed cover, and the original pages fold out */
.cover.--orig{display:block;aspect-ratio:auto;background:none;padding:0;box-shadow:var(--lift-2)}
.cover.--orig img{width:100%;height:auto;display:block}
.orig{max-width:var(--wide);margin:2.6em auto 0;padding:0 var(--gut);box-sizing:content-box}
.orig summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:48px;padding:12px 22px;border:1.5px solid var(--ink);border-radius:999px;font:600 16px/1.2 var(--f-ui);width:max-content;max-width:100%;transition:background .25s,color .25s}
.orig summary::-webkit-details-marker{display:none}
.orig summary:hover,.orig[open] summary{background:var(--ink);color:#fff}
.orig summary small{font-weight:500;opacity:.7}
.orig__row{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:20px}
.orig__row a{display:block;box-shadow:var(--lift);border-radius:3px;overflow:hidden;background:var(--paper-2)}
.orig__row img{width:100%;height:auto;display:block}
.archive-note{font:500 14.5px/1.5 var(--f-ui);color:var(--ink-3);margin:12px 0 0}

/* ── motion: subtle, and off for anyone who asks for less ── */
@media (prefers-reduced-motion:no-preference){
  .op__text > *{animation:rise .9s var(--e) both}
  .op__text > :nth-child(2){animation-delay:.08s}
  .op__text > :nth-child(3){animation-delay:.16s}
  .op__text > :nth-child(n+4){animation-delay:.24s}
  .op__photo{animation:unveil 1.2s var(--e) .1s both}
  .issue__intro > *{animation:rise .9s var(--e) both}
  .issue__intro > :nth-child(2){animation-delay:.08s}
  .issue__intro > :nth-child(n+3){animation-delay:.16s}
  .issue__cover .cover,.home__cover .cover{animation:settle 1.4s var(--e) .15s both}
  .js img.is-loading{opacity:0}
  .prose img,.card img,.shelf__pdf img,.orig__row img{transition:opacity .7s ease}
  .card{transition:transform .5s var(--e)}
  .card:hover{transform:translateY(-4px)}
  .issue__cta .btn span[aria-hidden]{display:inline-block;transition:transform .3s var(--e)}
  .issue__cta .btn:hover span[aria-hidden]{transform:translateX(4px)}
  .screen__play{animation:pulse 2.8s ease-in-out infinite}
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes unveil{from{opacity:0;clip-path:inset(5% 0 5% 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes settle{from{opacity:0;transform:translateY(24px) rotate(-1deg)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{box-shadow:0 10px 40px rgba(0,0,0,.45),0 0 0 0 rgba(227,34,39,.45)}50%{box-shadow:0 10px 40px rgba(0,0,0,.45),0 0 0 16px rgba(227,34,39,0)}}

/* ── phones (iOS Safari and Android Chrome) ── */
@supports (padding:max(0px)){
  .bar{padding-left:max(var(--gut),env(safe-area-inset-left));padding-right:max(var(--gut),env(safe-area-inset-right))}
  .colo__in{padding-bottom:max(50px,env(safe-area-inset-bottom))}
  .toc__panel{padding-bottom:max(40px,env(safe-area-inset-bottom))}
}
@media (max-width:620px){
  .prose{font-size:19.5px;line-height:1.9}
  .prose.--en{font-size:19px}
  .deck{font-size:19.5px}
  .btn{min-height:46px}
  .byline__act .btn{flex:1 1 auto}
  .issue__cta .btn{flex:1 1 auto}
  .ix__t{font-size:17px}
  .screen__btn,.screen iframe{border-radius:0}
  .orig__row{grid-template-columns:1fr 1fr;gap:10px}
  .shelf__act .btn{flex:1 1 auto}
}
.screen figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.screen__cap{color:rgba(255,255,255,.88);font:500 16px/1.5 var(--f-text);text-align:left}
.screen figcaption > a{margin-left:auto;flex:none}
@media print{.screen__cap{color:#111}}
.orig{max-width:var(--measure)}
.orig summary{margin:0 auto}
.orig__row{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}

/* print and PDF: fixed-weight fonts. Chrome writes variable fonts into PDFs as Type 3
   outlines, which many viewers draw distorted; these static copies embed as TrueType. */
@font-face{font-family:"NotoSerifDevP";src:url(/fonts/noto-serif-devanagari-400.woff2) format("woff2");font-weight:400;font-display:block;unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:"NotoSerifDevP";src:url(/fonts/noto-serif-devanagari-700.woff2) format("woff2");font-weight:700;font-display:block;unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:"FrauncesP";src:url(/fonts/fraunces-400.woff2) format("woff2");font-weight:400;font-display:block;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"FrauncesP";src:url(/fonts/fraunces-700.woff2) format("woff2");font-weight:700;font-display:block;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"FrauncesP";src:url(/fonts/fraunces-ext-400.woff2) format("woff2");font-weight:400;font-display:block;unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"FrauncesP";src:url(/fonts/fraunces-italic-400.woff2) format("woff2");font-weight:400;font-style:italic;font-display:block;unicode-range:U+0000-00FF,U+2000-206F}
@media print{
  :root{--f-disp:"Rozha","NotoSerifDevP",serif;--f-text:"NotoSerifDevP","FrauncesP",serif;--f-en:"FrauncesP","NotoSerifDevP",serif;--f-title:"NotoSerifDevP","FrauncesP",serif;--f-ui:"GeneralSans","Mukta",sans-serif}
  body,.prose,.prose.--en,.deck,.byline,.kicker{font-weight:400}
  .prose{font-size:12pt;line-height:1.85;color:#111}
  .prose.--en{font-size:12pt;line-height:1.65}
  .prose h2,.prose strong,.prose b,.hed,.ix__t,.card__t{font-weight:700}
  *{font-variation-settings:normal!important;font-synthesis:none}
}
@media print{[lang="sa"],.prose .shloka,.prose p[lang="sa"]{font-family:"NotoSerifDevP",serif}}
@media print{.orig,.archive-note{display:none!important}.js img.is-loading,img{opacity:1!important}}
@font-face{font-family:"FrauncesP";src:url(/fonts/fraunces-ext-700.woff2) format("woff2");font-weight:700;font-display:block;unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"FrauncesP";src:url(/fonts/fraunces-italic-700.woff2) format("woff2");font-weight:700;font-style:italic;font-display:block;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"FrauncesP";src:url(/fonts/fraunces-italic-ext-400.woff2) format("woff2");font-weight:400;font-style:italic;font-display:block;unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"FrauncesP";src:url(/fonts/fraunces-italic-ext-700.woff2) format("woff2");font-weight:700;font-style:italic;font-display:block;unicode-range:U+0100-024F,U+1E00-1EFF}


/* ═══════════════════════════════════════════════════════════════════════════
   v3 · the magazine layer
   Section families · opening pages · lead and drop cap · verse panels · the sutra thread ·
   next teaser · the dock · reading settings · night paper · page turn · photo viewer.
   One ease (--e), durations 150 / 300 / 500 ms, transform and opacity only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── section families: fill, text safe ink, tint, deep panel ── */
:root,[data-fam="edit"]{--fam:#E32227;--fam-ink:#B3161B;--fam-soft:#FCECEA;--fam-deep:#2E0C0D}
[data-fam="vani"]{--fam:#E8741C;--fam-ink:#A5490D;--fam-soft:#FCEFE3;--fam-deep:#33180A}
[data-fam="learn"]{--fam:#0E6B72;--fam-ink:#0B5E64;--fam-soft:#E3F0F0;--fam-deep:#06272A}
[data-fam="bhav"]{--fam:#B23A5B;--fam-ink:#98304D;--fam-soft:#F8E7ED;--fam-deep:#310F1B}
[data-fam="event"]{--fam:#2E3A7A;--fam-ink:#2E3A7A;--fam-soft:#E8EAF4;--fam-deep:#111733}
:root{--prose-fs:clamp(19.5px,1.35vw,21.5px);--fs:1}
[data-size="s"]{--fs:.9}
[data-size="l"]{--fs:1.15}

/* family colour carried through the page */
.kicker b{background:var(--fam-ink)}
a.kicker:hover span{color:var(--fam-ink)}
.prose h2::before{background:var(--fam)}
.prose a{color:var(--fam-ink)}
.prose li::marker{color:var(--fam)}
.endmark{background:var(--fam)}
.callout{border-top-color:var(--fam)}
.is-story .runner__bar{background:var(--fam)}
.toc__sec summary b,.ix__sec b,.dept__n{color:var(--fam-ink)}
.ix__sec:hover span,.ix__list a:hover .ix__t,.card:hover .card__t{color:var(--fam-ink)}
.card__meta{color:var(--fam-ink)}
.card__type{background:var(--fam-deep)}
.thumb.--type{background:var(--fam-deep)}

/* ── prose: size follows the reader's setting ── */
.prose{font-size:calc(var(--prose-fs) * var(--fs))}
.prose.--en{font-size:calc(var(--prose-fs) * .98 * var(--fs))}
.prose.--en > p:first-of-type::first-letter{float:none;font:inherit;margin:0;color:inherit}

/* lead paragraph and drop cap: the whole first akshar, never a broken letter */
.prose .lead{font-size:1.1em;line-height:1.82;color:var(--ink)}
.prose.--en .lead{line-height:1.66}
.prose .lead.--dc::after{content:"";display:table;clear:none}
.dc{float:left;font:400 3.3em/1 var(--f-disp);color:var(--fam-ink);margin:.02em .14em -.08em 0;padding-top:.06em}
.prose.--en .dc{font:600 3.9em/.84 var(--f-en);margin:.05em .1em 0 0;padding:0;font-variation-settings:"opsz" 144}

/* ── opening pages ── */
.op__text{position:relative}
.op__gal{display:inline-flex;align-items:center;gap:12px;margin-top:20px;min-height:48px;padding:6px 18px 6px 6px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;font:600 15px/1 var(--f-ui);transition:background .3s var(--e),color .3s var(--e)}
.op__gal b{display:grid;place-items:center;min-width:36px;height:36px;padding:0 8px;border-radius:999px;background:var(--fam-ink);color:#fff;font-weight:700}
.op__gal:hover{background:var(--ink);color:var(--paper)}

/* cover: the photograph edge to edge at its own proportion, the title on paper below */
.op--cover{width:100%;margin:0 0 clamp(28px,5vw,56px)}
.op--cover .op__photo{background:var(--night);display:flex;flex-direction:column;align-items:center}
.op--cover .op__photo picture{display:flex;justify-content:center;width:100%}
.op--cover .op__photo img{width:auto;max-width:100%;max-height:min(70svh,980px);margin:0 auto}
.op--cover .op__photo figcaption{width:min(1320px,calc(100% - 2*var(--gut)));color:rgba(255,255,255,.72);margin:0;padding:10px 0 12px}
.op--cover .op__text{width:min(1320px,calc(100% - 2*var(--gut)));margin:0 auto;padding-top:clamp(24px,4vw,48px);display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:clamp(24px,4vw,64px)}
.op--cover .op__text::before{content:"";grid-column:1/-1;height:6px;width:96px;background:var(--fam);margin-bottom:20px}
.op--cover .kicker,.op--cover .hed,.op--cover .op__gal{grid-column:1}
.op--cover .hed{margin-top:.2em}
.op--cover .deck{grid-column:1;max-width:36em}
.op--cover .byline{grid-column:1/-1}

/* type page: the section numeral carries the page */
.op--type{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:clamp(20px,4vw,64px);border-bottom-color:var(--fam)}
.op__no{font:400 clamp(120px,19vw,300px)/.8 var(--f-disp);color:var(--fam);letter-spacing:-.02em;align-self:start;user-select:none}
.op--type .op__no{grid-column:2;grid-row:1;opacity:.92}
.op--type .op__text{grid-column:1;grid-row:1}
.op--type.--b{grid-template-columns:auto minmax(0,1fr);background:var(--fam-soft);border:0;padding:clamp(36px,7vw,100px) clamp(20px,4vw,64px) clamp(28px,4vw,48px);border-radius:4px}
.op--type.--b .op__no{grid-column:1;color:var(--fam-ink);font-size:clamp(96px,13vw,200px)}
.op--type.--b .op__text{grid-column:2}

/* notice: a short item, compact, date and place in the text */
.op--notice{max-width:1060px;border-top:6px solid var(--fam);padding-top:clamp(20px,3vw,32px)}
.op--notice .hed{font-size:clamp(30px,3.6vw,52px);line-height:1.15}
.op--notice .hed.--long{font-size:clamp(26px,2.8vw,40px)}
.op--notice.--ph{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start}
.op--notice.--ph .op__photo img{max-height:62vh;width:auto;margin-left:auto}
.op--notice.--b{background:var(--fam-soft);border-top:0;border-left:6px solid var(--fam);padding:clamp(20px,3vw,36px) clamp(20px,3vw,40px);border-radius:0 4px 4px 0}

/* photo story: the gallery leads */
.op--photo .op__photo img{cursor:zoom-in}

/* opener photographs in the text column open the viewer too */
.op__photo img{cursor:zoom-in}

/* ── verse panels ── */
.shlokas{position:relative;clear:both;margin:2.2em 0;padding:clamp(30px,5vw,52px) clamp(20px,4vw,48px);background:var(--fam-deep);border-radius:3px;text-align:center}
.shlokas::before,.shlokas::after{content:"";position:absolute;left:50%;width:72px;height:2px;margin-left:-36px;background:var(--amber);transform-origin:50% 50%}
.shlokas::before{top:18px}.shlokas::after{bottom:18px}
.prose .shlokas p,.prose .shlokas .shloka{color:#F4E3C1;font-size:1.06em;line-height:1.95;margin:.08em auto;max-width:34em}
.prose .shlokas + *{margin-top:1.2em}
@media (min-width:900px){.shlokas{width:min(820px,100vw - 2*var(--gut));margin-left:50%;transform:translateX(-50%)}}

/* ── the sutra: a red thread that ties a knot at every heading ── */
.story{position:relative}
.sutra{display:none}
@media (min-width:1180px){
  .sutra{display:block;position:absolute;left:calc(50% - var(--measure)/2 - 64px);width:3px;top:var(--st,0);height:var(--sh,0);pointer-events:none}
  .sutra::before{content:"";position:absolute;left:1px;top:0;bottom:0;width:1px;background:var(--rule)}
  .sutra__line{position:absolute;inset:0;background:repeating-linear-gradient(168deg,var(--fam) 0 4px,var(--fam-ink) 4px 6px);border-radius:2px;transform-origin:50% 0;transform:scaleY(var(--p,0))}
  .sutra__k{position:absolute;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;background:var(--paper);color:var(--rule);transition:color .3s var(--e),transform .3s var(--e)}
  .sutra__k::before{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:var(--knot) center/contain no-repeat;mask:var(--knot) center/contain no-repeat}
  .sutra__k.is-tied{color:var(--fam);transform:scale(1.2)}
  .sutra__k.--end{width:22px;height:22px;margin:-11px 0 0 -11px}
}
:root{--knot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 12c-3-4-8-4-8 0s5 4 8 0c3-4 8-4 8 0s-5 4-8 0zM12 12v9'/%3E%3C/svg%3E")}
/* phones: the thread becomes the line under the bar, with a tick at each heading */
.runner__k{position:absolute;top:0;width:2px;height:3px;margin-left:-1px;background:var(--ink-3);opacity:.35;transition:opacity .3s,background .3s}
.runner__k.is-tied{opacity:1;background:var(--paper)}

/* ── the next article, as a large teaser ── */
.turn{display:none}
.next{width:min(1060px,calc(100% - 2*var(--gut)));margin:clamp(56px,8vw,112px) auto 0}
.next__card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--fam-deep);color:#fff;text-decoration:none;border-radius:4px;overflow:hidden;min-height:280px}
.next__card.--end{grid-template-columns:1fr;background:var(--night)}
.next__ph{display:flex;align-items:center;justify-content:center;background:#0c0b0a;min-height:100%}
.next__ph img{width:100%;height:100%;max-height:440px;object-fit:contain;transition:transform .5s var(--e)}
.next__ph.--flat{padding:24px}
.next__ph.--type{background:var(--fam)}
.next__ph.--type em{font:400 clamp(110px,14vw,190px)/1 var(--f-disp);font-style:normal;color:#fff;opacity:.95}
.next__txt{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:clamp(24px,4vw,48px)}
.next__txt small{font:600 13px/1.3 var(--f-ui);letter-spacing:.06em;color:var(--amber)}
.next__txt b{font:400 clamp(28px,3vw,44px)/1.15 var(--f-disp);text-wrap:balance}
.next__txt b[lang="en"]{font-family:var(--f-en);font-weight:600;letter-spacing:-.015em}
.next__d{font:400 16px/1.6 var(--f-text);color:rgba(255,255,255,.8);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.next__go{align-self:flex-start;display:inline-flex;gap:8px;align-items:center;margin-top:6px;min-height:44px;padding:0 20px;border-radius:999px;background:#fff;color:var(--night);font:600 15px/1 var(--f-ui);transition:gap .3s var(--e)}
.next__card:hover .next__go{gap:14px}
.next__card:hover .next__ph img{transform:scale(1.02)}
.next__prev{display:block;margin-top:16px;padding:12px 0;font:500 15px/1.45 var(--f-ui);color:var(--ink-3);text-decoration:none}
.next__prev:hover{color:var(--fam-ink)}
.next__prev span[lang]{font-family:var(--f-text)}

/* ── the dock: previous, position, next, settings; in the thumb zone on phones ── */
.dock{position:fixed;z-index:45;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:2px;padding:5px;background:rgba(22,19,16,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:999px;box-shadow:0 14px 34px -14px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06) inset;transition:transform .3s var(--e),opacity .3s var(--e);view-transition-name:gm-dock}
.dock.is-hid{transform:translateY(calc(100% + 28px));opacity:0;pointer-events:none}
.dock__b{position:relative;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:transparent;color:#fff;text-decoration:none;transition:background .15s}
.dock__b svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.dock__b:hover{background:rgba(255,255,255,.14)}
.dock__b.--next{background:var(--fam)}
.dock__b.--next:hover{background:var(--fam-ink)}
.dock__b.--off{opacity:.28}
.dock__b.--aa span{font:600 17px/1 var(--f-en);letter-spacing:-.02em}
.dock__b.--aa[aria-expanded="true"]{background:#fff;color:var(--night)}
.dock__n{display:flex;align-items:baseline;gap:3px;height:48px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:#fff;font:600 15px/48px var(--f-ui)}
.dock__n b{font-weight:700}
.dock__n i{font-style:normal;opacity:.5}
.dock__n:hover{background:rgba(255,255,255,.14)}
.dock__tip{position:absolute;right:0;bottom:calc(100% + 14px);width:max-content;max-width:min(320px,70vw);padding:10px 14px;border-radius:10px;background:var(--night);color:#fff;font:500 15px/1.4 var(--f-text);text-align:left;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .15s,transform .3s var(--e)}
.dock__tip[lang="en"]{font-family:var(--f-en)}
@media (hover:hover){.dock__b.--next:hover .dock__tip,.dock__b.--next:focus-visible .dock__tip{opacity:1;transform:none}}
.dock :focus-visible{outline-color:#fff}
.is-story .colo{padding-bottom:88px}

/* reading settings */
.aa{position:fixed;z-index:46;right:max(16px,env(safe-area-inset-right));bottom:calc(max(16px,env(safe-area-inset-bottom)) + 68px);width:min(300px,calc(100vw - 32px));padding:18px;background:var(--paper);color:var(--ink);border-radius:16px;box-shadow:0 24px 60px -18px rgba(0,0,0,.45),0 0 0 1px var(--rule)}
.aa[hidden]{display:none}
.aa__h{margin:0 0 8px;font:600 13px/1.2 var(--f-ui);letter-spacing:.04em;color:var(--ink-3)}
.aa__h + .aa__row{margin-bottom:16px}
.aa__row:last-child{margin-bottom:0}
.aa__row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;padding:4px;background:var(--paper-2);border-radius:12px}
.aa__row button{min-height:44px;border:0;border-radius:9px;background:transparent;color:var(--ink);font:600 15px/1 var(--f-ui)}
.aa__row [data-size]{font-family:var(--f-text);font-weight:600}
.aa__row [data-size="s"]{font-size:15px}.aa__row [data-size="m"]{font-size:19px}.aa__row [data-size="l"]{font-size:24px}
.aa__row button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* continue reading */
.cont{width:min(1320px,calc(100% - 2*var(--gut)));margin:0 auto clamp(28px,4vw,48px)}
.cont a{display:flex;align-items:center;gap:16px;padding:14px 18px 14px 14px;border:1.5px solid var(--ink);border-radius:14px;text-decoration:none;transition:background .3s var(--e)}
.cont a:hover{background:var(--paper-2)}
.cont__ring{flex:none;width:44px;height:44px;border-radius:50%;background:conic-gradient(var(--red) calc(var(--p) * 1turn),var(--rule) 0);display:grid;place-items:center}
.cont__ring::after{content:"";width:34px;height:34px;border-radius:50%;background:var(--paper)}
.cont__txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.cont__txt small{font:600 13px/1.2 var(--f-ui);color:var(--red);letter-spacing:.03em}
.cont__txt b{font:600 17px/1.35 var(--f-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cont__go{margin-left:auto;flex:none;font:600 15px var(--f-ui)}

/* ── photo viewer: swipe on phones, arrows on desktop, never cropped ── */
.gv{position:fixed;inset:0;z-index:90;background:#0b0a09;color:#fff;display:flex;flex-direction:column;opacity:0;transition:opacity .3s var(--e)}
.gv.is-on{opacity:1}
.gv__top{display:flex;align-items:center;justify-content:space-between;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));font:600 15px/1 var(--f-ui)}
.gv__x,.gv__nav{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);background:rgba(0,0,0,.35);color:#fff;display:grid;place-items:center}
.gv__x:hover,.gv__nav:hover{background:rgba(255,255,255,.14)}
.gv__nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gv__track{flex:1;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gv__track::-webkit-scrollbar{display:none}
.gv__slide{flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:8px 16px max(16px,env(safe-area-inset-bottom));min-width:0}
.gv__slide img{max-width:100%;max-height:calc(100% - 64px);width:auto;height:auto;object-fit:contain}
.gv__slide figcaption{max-width:720px;font:500 15px/1.5 var(--f-ui);color:rgba(255,255,255,.78);text-align:center}
.gv__nav{position:absolute;top:50%;margin-top:-24px}
.gv__nav.--p{left:max(16px,env(safe-area-inset-left))}.gv__nav.--n{right:max(16px,env(safe-area-inset-right))}
@media (hover:none){.gv__nav{display:none}}

/* ── night paper ── */
[data-theme="night"]{color-scheme:dark;--paper:#16130F;--paper-2:#211D18;--paper-3:#2A251F;--ink:#ECE5D8;--ink-2:#CDC4B6;--ink-3:#A0978A;--rule:#3A342C;--amber-soft:#2E2718;--lift:0 1px 2px rgba(0,0,0,.4),0 12px 32px -14px rgba(0,0,0,.7);--lift-2:0 2px 4px rgba(0,0,0,.4),0 30px 60px -24px rgba(0,0,0,.8)}
[data-theme="night"] body{background:var(--paper)}
[data-theme="night"],[data-theme="night"] [data-fam="edit"]{--fam-ink:#FF7A7C}
[data-theme="night"] [data-fam="vani"]{--fam-ink:#F4A15E}
[data-theme="night"] [data-fam="learn"]{--fam-ink:#5CC3C9}
[data-theme="night"] [data-fam="bhav"]{--fam-ink:#EC8AA6}
[data-theme="night"] [data-fam="event"]{--fam-ink:#9DA8F0}
[data-theme="night"] .kicker b,[data-theme="night"] .op__gal b{background:var(--fam);color:#fff}
[data-theme="night"] .bar{background:rgba(22,19,15,.9);border-bottom-color:var(--rule)}
[data-theme="night"] .prose,[data-theme="night"] .prose .lead{color:var(--ink)}
[data-theme="night"] .prose .shloka,[data-theme="night"] .prose p[lang="sa"]{color:#F3A48F}
[data-theme="night"] .btn{background:transparent;color:var(--ink);border-color:var(--ink)}
[data-theme="night"] .btn:hover,[data-theme="night"] .btn.--ink{background:var(--ink);color:var(--paper)}
[data-theme="night"] .btn.--red{background:var(--red);border-color:var(--red);color:#fff}
[data-theme="night"] .fig img,[data-theme="night"] .tile img{background:var(--paper-2)}
[data-theme="night"] .colo{border-top:1px solid var(--rule)}
[data-theme="night"] .dock{box-shadow:0 14px 34px -14px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.1) inset}
[data-theme="night"] .toc__scrim{background:rgba(0,0,0,.6)}
[data-theme="night"] .cover__top{background:#FFFDF9;color:#111}
[data-theme="night"] .op--type.--b,[data-theme="night"] .op--notice.--b{background:var(--paper-2)}
[data-theme="night"] ::selection{background:#6B5320}

/* ── motion: the opening is the one centrepiece; the verse rules draw in ── */
@media (prefers-reduced-motion:no-preference){
  .op__no{animation:rise .9s var(--e) .12s both}
  .op--cover .op__photo{animation:unveil 1.1s var(--e) both}
  .js .shlokas.pre::before,.js .shlokas.pre::after{transform:scaleX(0)}
  .shlokas::before,.shlokas::after{transition:transform .5s var(--e) .15s}
  .js .next.pre .next__card{opacity:0;transform:translateY(24px)}
  .next__card{transition:opacity .5s var(--e),transform .5s var(--e)}
  .js .dc{animation:dc-in .5s var(--e) .3s both}
  /* the page turn between articles */
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vt-out .3s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:vt-in .5s var(--e) both}
  html:active-view-transition-type(next)::view-transition-old(root){animation-name:vt-out-next}
  html:active-view-transition-type(next)::view-transition-new(root){animation-name:vt-in-next}
  html:active-view-transition-type(prev)::view-transition-old(root){animation-name:vt-out-prev}
  html:active-view-transition-type(prev)::view-transition-new(root){animation-name:vt-in-prev}
  ::view-transition-group(gm-bar),::view-transition-group(gm-dock){animation:none}
}
.bar{view-transition-name:gm-bar}
@keyframes dc-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(20px)}}
@keyframes vt-out-next{to{opacity:0;transform:translateX(-32px)}}
@keyframes vt-in-next{from{opacity:0;transform:translateX(48px)}}
@keyframes vt-out-prev{to{opacity:0;transform:translateX(32px)}}
@keyframes vt-in-prev{from{opacity:0;transform:translateX(-48px)}}

/* ── tablets and phones ── */
@media (max-width:900px){
  .op--cover .op__text{grid-template-columns:1fr}
  .op--notice.--ph{grid-template-columns:1fr}
  .op--notice.--ph .op__photo{order:-1}
  .op--notice.--ph .op__photo img{max-height:46svh;margin:0 auto}
  .next__card{grid-template-columns:1fr}
  .next__ph img{max-height:42svh}
  .next__ph.--type{min-height:180px}
}
@media (max-width:620px){
  :root{--prose-fs:19.5px}
  .prose.--en{font-size:calc(19px * var(--fs))}
  .dc{font-size:3em}
  .prose.--en .dc{font-size:3.5em}
  /* the opening takes at most about three quarters of the first screen, so text is in view */
  .op--cover .op__photo img,.op--wide .op__photo img{max-height:50svh}
  .op--portrait .op__photo img,.op--square .op__photo img,.op--poster .op__photo img{max-height:52svh}
  .op--type{grid-template-columns:1fr;padding-top:24px}
  .op--type .op__no,.op--type.--b .op__no{grid-column:1;grid-row:1;font-size:96px;margin-bottom:6px}
  .op--type .op__text,.op--type.--b .op__text{grid-column:1;grid-row:2}
  .op--type.--b{grid-template-columns:1fr;padding:28px 20px 24px}
  .shlokas{margin-left:calc(-1*var(--gut));margin-right:calc(-1*var(--gut));border-radius:0;padding:36px 20px}
  .next{width:100%}
  .next__card{border-radius:0}
  .next__prev{padding:12px var(--gut)}
  .dock{left:50%;right:auto;transform:translateX(-50%)}
  .dock.is-hid{transform:translate(-50%,calc(100% + 28px))}
  .aa{left:16px;right:16px;width:auto}
  /* the shelf scrolls sideways */
  .shelf__row{display:grid;grid-auto-flow:column;grid-auto-columns:62%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:4px var(--gut) 12px;margin:0 calc(-1*var(--gut));scrollbar-width:none}
  .shelf__row::-webkit-scrollbar{display:none}
  .shelf__it{scroll-snap-align:start}
  .cont a{padding:12px 14px 12px 12px;gap:12px}
  .cont__go{display:none}
}

/* a source that ends with the next piece's full title: kept, as a quiet line that leads on */
.prose .coda{margin:2.4em 0 0;padding-top:14px;border-top:1px solid var(--rule);font:500 15px/1.5 var(--f-ui)}
.prose .coda a{color:var(--ink-3);text-decoration:none}
.prose .coda a:hover{color:var(--fam-ink)}

/* ── the ank opening: a four second film over the cover, then the sharp cover itself ── */
.opening{position:relative}
.opening__v{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#121110;opacity:0;pointer-events:none;transition:opacity .5s var(--e)}
.opening.is-playing .opening__v{opacity:1;transition:none}
.opening.is-done .opening__v{opacity:0}
.opening.is-playing .cover{animation:none!important}

/* shloka audio */
.sh-audio{display:inline-flex;align-items:center;gap:10px;margin:18px auto 0;min-height:44px;padding:6px 18px 6px 6px;border:1.5px solid rgba(252,197,66,.6);border-radius:999px;background:transparent;color:#F4E3C1;font:600 15px/1 var(--f-ui);transition:background .3s var(--e),border-color .3s var(--e)}
.sh-audio:hover{background:rgba(252,197,66,.12);border-color:var(--amber)}
.sh-audio__i{position:relative;width:32px;height:32px;border-radius:50%;background:var(--amber)}
.sh-audio__i::after{content:"";position:absolute;left:12px;top:9px;border-left:11px solid var(--night);border-top:7px solid transparent;border-bottom:7px solid transparent}
.sh-audio.is-on .sh-audio__i::after{left:10px;top:10px;width:12px;height:12px;border:0;background:linear-gradient(90deg,var(--night) 0 4px,transparent 4px 8px,var(--night) 8px 12px)}
.prose > .shloka + .sh-audio,.prose .shloka .sh-audio{display:flex}
@media print{.sh-audio{display:none!important}}

/* the same piece in the other language, where the ank carries both */
.byline__pair{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:var(--fam-soft);color:var(--fam-ink);font:600 14px/1 var(--f-ui);text-decoration:none}
.byline__pair:hover{background:var(--fam-ink);color:#fff}

/* desktop: notes and sidebars step out into the right margin, beside the text they belong to */
@media (min-width:1280px){
  .prose aside.note,.prose aside.sidebar{float:right;clear:right;width:250px;margin:.3em -300px 1.2em 32px;font-size:.84em;line-height:1.6}
  .prose aside.note{border-top:3px solid var(--fam);border-left:0;padding:10px 0 0}
  .prose aside.sidebar{border-top:3px solid var(--fam);padding:12px 0 0;background:none}
}
@media print{.byline__pair{display:none!important}}

/* breakouts centre with the translate property, so the reveal (a transform) never knocks them sideways */
.fig.--wide,.fig.--pano,.fig.--mat,.mosaic,.screen{transform:none;translate:-50% 0}
.js .fig.--wide.pre,.js .fig.--pano.pre,.js .fig.--mat.pre,.js .mosaic.pre,.js .screen.pre{transform:translateY(18px)}
@media (min-width:900px){.shlokas{transform:none;translate:-50% 0}}
.js .shlokas.pre{transform:translateY(18px)}
/* a very long word (Kannada, Tamil, Telugu titles) wraps rather than leaving the page */
.hed,.next__txt b,.card__t,.ix__t{overflow-wrap:break-word}
@media (max-width:620px){.hed{overflow-wrap:anywhere}}
@media print{.fig,.mosaic,.screen,.shlokas{translate:none!important}}

/* contrast: white on the text safe tone by day, dark text on the light tone at night (4.5:1 or more) */
.dock__b.--next{background:var(--fam-ink)}
.dock__b.--next:hover{background:var(--fam)}
[data-theme="night"] .dock__b.--next,[data-theme="night"] .kicker b,[data-theme="night"] .op__gal b{background:var(--fam-ink);color:#16130F}

/* ── the other Indian scripts (भाव एक भाषा अनेक): Noto Serif, self hosted, fixed 400 and 700 weights
   (static faces print as real text in PDFs). Each face covers only its own script block, so a page
   downloads a face only when that script is on it. */
@font-face{font-family:"GMIndic";src:url(/fonts/indic/noto-serif-kannada-400s.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0C80-0CFF}
@font-face{font-family:"GMIndic";src:url(/fonts/indic/noto-serif-kannada-700s.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0C80-0CFF}
@font-face{font-family:"GMIndic";src:url(/fonts/indic/noto-serif-oriya-400s.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0B00-0B7F}
@font-face{font-family:"GMIndic";src:url(/fonts/indic/noto-serif-oriya-700s.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0B00-0B7F}
@font-face{font-family:"GMIndic";src:url(/fonts/indic/noto-serif-bengali-400s.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0980-09FF}
@font-face{font-family:"GMIndic";src:url(/fonts/indic/noto-serif-bengali-700s.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0980-09FF}
@font-face{font-family:"GMIndic";src:url(/fonts/indic/noto-serif-gujarati-400s.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0A80-0AFF}
@font-face{font-family:"GMIndic";src:url(/fonts/indic/noto-serif-gujarati-700s.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0A80-0AFF}
@font-face{font-family:"GMIndic";src:url(/fonts/indic/noto-serif-telugu-400s.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0C00-0C7F}
@font-face{font-family:"GMIndic";src:url(/fonts/indic/noto-serif-telugu-700s.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0C00-0C7F}
@font-face{font-family:"GMIndic";src:url(/fonts/indic/noto-serif-tamil-400s.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0B80-0BFF}
@font-face{font-family:"GMIndic";src:url(/fonts/indic/noto-serif-tamil-700s.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0B80-0BFF}
@font-face{font-family:"GMIndic";src:url(/fonts/indic/noto-serif-malayalam-400s.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0D00-0D7F}
@font-face{font-family:"GMIndic";src:url(/fonts/indic/noto-serif-malayalam-700s.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0D00-0D7F}
:root{--f-disp:"Rozha","NotoSerifDev","GMIndic",serif;--f-text:"NotoSerifDev","Fraunces","GMIndic",Georgia,serif;--f-title:"NotoSerifDev","Fraunces","GMIndic",Georgia,serif;--f-ui:"GeneralSans","Mukta","GMIndic",system-ui,sans-serif}

/* ── the chakra: a type page's section numeral at the centre of 24 spokes ──
   the rims draw and the wheel turns into place on arrival, then it turns with the reader (scroll) */
.op__seal{position:relative;display:grid;place-items:center;width:clamp(200px,23vw,310px);aspect-ratio:1;align-self:center;grid-column:2;grid-row:1}
.op__seal svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;rotate:var(--turn,0deg)}
.op__seal .c-rim,.op__seal .c-hub{fill:none;stroke:var(--fam);stroke-width:1.4}
.op__seal .c-rim + .c-rim{stroke-width:2.4}
.op__seal .c-hub{stroke-width:1;opacity:.55}
.op__seal .c-spk{fill:none;stroke:var(--fam-ink);stroke-width:1.6;stroke-linecap:round;opacity:.8}
.op__seal .c-dot{fill:var(--fam)}
.op .op__seal .op__no{position:relative;align-self:center;justify-self:center;font-size:clamp(56px,4.8vw,76px);line-height:1;margin:0;padding-top:.06em;grid-column:1;grid-row:1;opacity:1;color:var(--fam-ink);letter-spacing:0}
.op__seal svg{grid-column:1;grid-row:1}
.op--type.--b .op__seal{grid-column:1}
@media (prefers-reduced-motion:no-preference){
  .op__seal svg{animation:seal-in 1.2s var(--e) .05s both}
  .op__seal .c-rim,.op__seal .c-hub{stroke-dasharray:1;animation:rim-draw 1.1s var(--e) .1s both}
  .op__seal .op__no{animation:rise .8s var(--e) .4s both}
}
@keyframes seal-in{from{opacity:0;transform:rotate(-60deg) scale(.94)}to{opacity:1;transform:none}}
@keyframes rim-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (max-width:620px){
  .op--type .op__seal,.op--type.--b .op__seal{grid-column:1;grid-row:1;width:150px;justify-self:start;margin:0 0 10px -4px}
  .op .op__seal .op__no{font-size:40px}
}
@media print{.op__seal{width:auto;aspect-ratio:auto;display:block}.op__seal svg{display:none}}

/* ── verse player ── */
.v-play{--p:0;display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:18px auto 0;padding:5px 16px 5px 5px;border:1.5px solid rgba(252,197,66,.55);border-radius:999px;background:rgba(0,0,0,.18);color:#F4E3C1;font:600 15px/1 var(--f-ui);transition:background .3s var(--e),border-color .3s var(--e)}
.v-play:hover{border-color:var(--amber);background:rgba(252,197,66,.12)}
.v-play__ring{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:conic-gradient(var(--amber) calc(var(--p) * 1turn),rgba(252,197,66,.28) 0)}
.v-play__ring i{position:relative;width:26px;height:26px;border-radius:50%;background:var(--amber)}
.v-play__ring i::after{content:"";position:absolute;left:10px;top:7px;border-left:9px solid var(--night);border-top:6px solid transparent;border-bottom:6px solid transparent}
.v-play.is-on .v-play__ring i::after{left:8px;top:8px;width:10px;height:10px;border:0;background:linear-gradient(90deg,var(--night) 0 3.5px,transparent 3.5px 6.5px,var(--night) 6.5px 10px)}
.v-play__n{font-weight:500;opacity:.75}
/* a verse line in the text: the button sits under it, in the text colours */
.prose > .v-play{display:flex;width:max-content;max-width:100%;margin:-.4em auto 1.2em;background:var(--fam-soft);border-color:transparent;color:var(--fam-ink)}
.prose > .v-play .v-play__ring{background:conic-gradient(var(--fam) calc(var(--p) * 1turn),var(--rule) 0)}
.prose > .v-play .v-play__ring i{background:var(--fam)}
.prose > .v-play .v-play__ring i::after{border-left-color:#fff}
.prose > .v-play.is-on .v-play__ring i::after{background:linear-gradient(90deg,#fff 0 3.5px,transparent 3.5px 6.5px,#fff 6.5px 10px)}
.shlokas.is-playing{box-shadow:0 0 0 2px rgba(252,197,66,.35) inset}
.shlokas.is-playing::before,.shlokas.is-playing::after{background:#FFE08A}
[data-theme="night"] .prose > .v-play{background:var(--paper-2)}
.v-qr{display:none}

/* the listening page */
.listen{width:min(760px,calc(100% - 2*var(--gut)));margin:clamp(32px,6vw,80px) auto;text-align:center}
.listen__verses{margin:24px 0 0}
.listen__v{position:relative;padding:clamp(28px,5vw,48px) 0;border-top:1px solid var(--rule)}
.listen__n{display:block;font:400 clamp(40px,6vw,64px)/1 var(--f-disp);color:var(--fam-ink);margin-bottom:14px}
.listen__v p{margin:.1em 0;font:500 clamp(22px,3vw,30px)/1.7 "NotoSerifDev",serif;color:var(--ink)}
.listen__v p.--uvaca{font-size:.7em;color:var(--ink-3)}
.listen__play{background:var(--night);border-radius:999px;padding:14px 18px;width:max-content;max-width:100%;margin:10px auto 0}
.listen__play::before,.listen__play::after{display:none}
.listen__play .v-play{margin:0}
.listen__cont{display:inline-flex;gap:10px;align-items:center;min-height:44px;margin-top:18px;font:500 15px/1.3 var(--f-ui);color:var(--ink-2);cursor:pointer}
.listen__cont input{width:20px;height:20px;accent-color:var(--red)}
.listen__v.is-on .listen__n{color:var(--red)}
.listen__v.is-on p{color:var(--ink)}
.listen__nav{display:flex;justify-content:space-between;gap:12px;margin-top:22px}
.listen__note{margin-top:28px;font:500 14px/1.5 var(--f-ui);color:var(--ink-3)}

@media print{
  .v-play{display:none!important}
  .v-qr{display:flex!important;align-items:center;gap:2.5mm;width:max-content;margin:3mm auto 0;font:500 7pt/1.3 var(--f-ui);color:#34302b;text-align:left}
  .v-qr .qr{width:16mm;height:16mm;flex:none}
  .shlokas .v-qr{color:var(--fam-ink)}
  p[data-verses] .v-qr{display:inline-flex!important;float:right;margin:0 0 1mm 3mm}
}

/* ── each ank's own colour (from its cover): the ank's chrome, never an article's section colour ── */
:root{--ank:var(--red);--ank-ink:var(--red);--ank-soft:var(--paper-2)}
.bar__issue b,.toc__issue b{color:var(--ank-ink)}
.is-issue .issue__hero{position:relative}
.is-issue .issue__hero::before{content:"";position:absolute;inset:-40px -9999px auto;height:calc(100% + 80px);background:linear-gradient(180deg,var(--ank-soft),transparent 92%);z-index:-1}
.is-issue .issue__intro .kicker b{background:var(--ank-ink)}
.is-issue .issue__stats dd{color:var(--ank-ink)}
.is-issue .issue__cta .btn.--red{background:var(--ank-ink);border-color:var(--ank-ink)}
.is-issue .issue__cta .btn.--red:hover{background:var(--ink);border-color:var(--ink)}
.is-issue .index__h{border-bottom-color:var(--ank-ink)}
.shelf__it{position:relative}
.shelf__it .shelf__cap b{color:var(--ank-ink)}
.shelf__it::after{content:"";display:block;height:4px;width:48px;margin-top:12px;background:var(--ank);border-radius:2px;transition:width .5s var(--e)}
.shelf__it:hover::after{width:96px}
.is-issue main{position:relative;isolation:isolate;overflow-x:clip}
[data-theme="night"] .is-issue .issue__hero::before{background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 92%)}

/* ── themes: one section across every ank ── */
.themes{width:min(1320px,calc(100% - 2*var(--gut)));margin:clamp(32px,6vw,80px) auto}
.themes.--home{margin-top:clamp(48px,7vw,110px)}
.themes__head{margin-bottom:24px}
.themes__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.themes__it{display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:128px;padding:18px 20px;border-radius:6px;background:var(--fam-soft);text-decoration:none;border-top:4px solid var(--fam);transition:transform .3s var(--e),background .3s var(--e)}
.themes__it b{font:650 20px/1.3 var(--f-title);color:var(--ink)}
.themes__it b[lang="en"]{font-family:var(--f-en);font-weight:600}
.themes__it span{font:600 13px/1.2 var(--f-ui);color:var(--fam-ink);letter-spacing:.02em}
.themes__it:hover{transform:translateY(-3px)}
.themes__all{margin-top:18px}
.theme{width:min(1320px,calc(100% - 2*var(--gut)));margin:0 auto clamp(40px,6vw,90px)}
.theme__ank{margin:0 0 clamp(28px,4vw,48px)}
.theme__h{margin:0 0 18px;padding-top:14px;border-top:3px solid var(--ank)}
.theme__h a{display:flex;gap:14px;align-items:baseline;text-decoration:none}
.theme__h b{font:400 clamp(26px,2.6vw,36px)/1 var(--f-disp);color:var(--ank-ink)}
.theme__h span{font:500 15px var(--f-ui);color:var(--ink-3)}
.dept__theme{display:inline-flex;align-items:center;gap:8px;margin-top:12px;min-height:40px;padding:0 16px;border-radius:999px;background:var(--fam-soft);color:var(--fam-ink);font:600 14px/1 var(--f-ui);text-decoration:none}
.dept__theme:hover{background:var(--fam-ink);color:#fff}
[data-theme="night"] .themes__it,[data-theme="night"] .dept__theme{background:var(--paper-2)}
@media (max-width:620px){.themes__grid{grid-template-columns:1fr 1fr}.themes__it{min-height:112px;padding:14px}.themes__it b{font-size:17px}}

/* ── search ── */
.ico--find{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 20 20'/%3E%3C/svg%3E")}
@media (max-width:620px){.bar__find-t{display:none}.bar__find{width:40px;padding:0}}
.find{position:fixed;inset:0;z-index:70;display:flex;justify-content:center;align-items:flex-start;padding:max(10vh,env(safe-area-inset-top)) 16px 16px;background:rgba(17,15,12,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s var(--e)}
.find.is-on{opacity:1}
.find__box{width:min(760px,100%);max-height:80vh;display:flex;flex-direction:column;background:var(--paper);border-radius:18px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);overflow:hidden;transform:translateY(-12px);transition:transform .5s var(--e)}
.find.is-on .find__box{transform:none}
.find__in{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--rule)}
.find__in .ico{font-size:22px;color:var(--ink-3)}
.find__in input{flex:1;min-width:0;border:0;background:none;outline:none;font:500 19px/1.3 var(--f-text);color:var(--ink);padding:8px 0}
.find__x{min-height:40px;padding:0 12px;border:0;border-radius:10px;background:var(--paper-2);font:600 14px var(--f-ui);color:var(--ink-2)}
.find__out{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px}
.find__hint,.find__none{padding:18px 16px;font:500 15px/1.5 var(--f-ui);color:var(--ink-3)}
.find__themes{display:flex;flex-wrap:wrap;gap:8px;padding:10px 10px 4px}
.find__themes a{min-height:36px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;background:var(--paper-2);font:600 14px var(--f-ui);text-decoration:none;color:var(--ink)}
.find__r{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;padding:10px;border-radius:12px;text-decoration:none}
.find__r[aria-selected="true"],.find__r:hover{background:var(--paper-2)}
.find__th{width:64px;height:64px;border-radius:8px;background:var(--paper-3) center/cover no-repeat;display:grid;place-items:center;font:400 28px/1 var(--f-disp);color:var(--ink-3)}
.find__t{font:650 17px/1.35 var(--f-title);color:var(--ink)}
.find__t[lang="en"]{font-family:var(--f-en);font-weight:600}
.find__t mark{background:none;color:var(--red);font-weight:750}
.find__m{display:block;margin-top:3px;font:500 13px/1.35 var(--f-ui);color:var(--ink-3)}
.find__d{display:block;margin-top:4px;font:400 14px/1.5 var(--f-text);color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:620px){.find{padding:0}.find__box{max-height:none;height:100%;border-radius:0}.find__in{padding-top:max(14px,env(safe-area-inset-top))}}

/* ── offline ── */
.save{margin:18px 0 0}
.save__t{margin:8px 0 0;font:500 14px/1.45 var(--f-ui);color:var(--ink-3)}
.save__bar{height:8px;border-radius:999px;background:var(--paper-3);overflow:hidden;max-width:420px}
.save__bar i{display:block;height:100%;background:var(--ank-ink);transform-origin:0 50%;transform:scaleX(var(--p));transition:transform .3s var(--e)}
.save__ok{display:flex;align-items:center;gap:10px;margin:0;font:600 15px/1.45 var(--f-ui);color:var(--ink)}
.save__dot{width:10px;height:10px;border-radius:50%;background:#1F7A3D;box-shadow:0 0 0 4px rgba(31,122,61,.16)}
.save__drop{margin-top:6px}
.linkbtn{border:0;background:none;padding:6px 0;font:600 14px var(--f-ui);color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;min-height:36px}
.shelf__saved{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font:600 12px/1 var(--f-ui);color:#1F7A3D}
.shelf__saved::before{content:"";width:8px;height:8px;border-radius:50%;background:#1F7A3D}
.saved-list{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.net-note{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 70px);z-index:50;transform:translateX(-50%);margin:0;padding:8px 14px;border-radius:999px;background:var(--night);color:#fff;font:600 13px/1 var(--f-ui);box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
@media print{.save,.net-note{display:none!important}}

/* ── the ank in 60 seconds ── */
.film{width:min(1320px,calc(100% - 2*var(--gut)));margin:clamp(28px,5vw,64px) auto clamp(40px,6vw,80px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(24px,4vw,48px);border-radius:8px;background:var(--night);color:#fff}
.film .kicker{color:rgba(255,255,255,.75)}
.film .kicker b{background:var(--ank-ink)}
.film__h{margin:.35em 0 .3em;font:400 clamp(40px,5vw,72px)/1.05 var(--f-disp)}
.film__d{margin:0;max-width:30em;font:400 clamp(17px,1.4vw,20px)/1.6 var(--f-text);color:rgba(255,255,255,.8)}
.film__v{position:relative;margin:0;border-radius:6px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);aspect-ratio:864/1080;background:#000}
.film__v video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.film__play{position:absolute;inset:0;display:grid;place-items:center;border:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35));cursor:pointer}
.film__play span{position:relative;width:88px;height:88px;border-radius:50%;background:var(--red);box-shadow:0 12px 40px rgba(0,0,0,.5);transition:transform .3s var(--e)}
.film__play span::after{content:"";position:absolute;left:36px;top:27px;border-left:26px solid #fff;border-top:17px solid transparent;border-bottom:17px solid transparent}
.film__play:hover span{transform:scale(1.06)}
.film.is-on .film__play{display:none}
@media (max-width:900px){.film{grid-template-columns:1fr}.film__v{max-width:440px;width:100%;justify-self:center}}
@media (max-width:620px){.film{width:100%;border-radius:0;padding:28px var(--gut)}}
@media print{.film{display:none!important}}

/* phones before iOS 15.4 and Chrome 108 have no svh: the same limits in vh */
@supports not (height:1svh){
  .op--cover .op__photo img{max-height:min(70vh,980px)}
  .next__ph img{max-height:42vh}
  @media (max-width:900px){.op--notice.--ph .op__photo img{max-height:46vh}}
  @media (max-width:620px){
    .op--cover .op__photo img,.op--wide .op__photo img{max-height:50vh}
    .op--portrait .op__photo img,.op--square .op__photo img,.op--poster .op__photo img{max-height:52vh}
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   print · the paper edition of an article (A4)
   Its own design, not the web page printed: an opening page, text in two columns, verse panels,
   pull quotes and wide photographs across both columns, running head from the page margins,
   videos as a thumbnail with a QR code, and a QR to the web page at the end.
   Folios are stamped afterwards (tools/issue_pdf.py), so single articles and the full ank agree.
   ═══════════════════════════════════════════════════════════════════════════ */
@page{
  size:A4;margin:20mm 17mm 20mm;
  @top-left{content:var(--run,"गीता मैत्री");font:400 7.6pt/1 "NotoSerifDevP","FrauncesP",serif;color:#6D675F;vertical-align:bottom;padding-bottom:4mm}
  @top-right{content:"geeta-maitree.pages.dev";font:400 7pt/1 "FrauncesP",serif;color:#9A938A;vertical-align:bottom;padding-bottom:4mm}
}
@page :first{margin-top:14mm;@top-left{content:none}@top-right{content:none}}

@media print{
  /* the fixed weight faces (Type0 in the PDF), restated here because this file loads last */
  :root{--f-disp:"Rozha","NotoSerifDevP","GMIndic",serif;--f-text:"NotoSerifDevP","FrauncesP","GMIndic",serif;--f-en:"FrauncesP","NotoSerifDevP",serif;--f-title:"NotoSerifDevP","FrauncesP","GMIndic",serif;--f-ui:"GeneralSans","Mukta","GMIndic",sans-serif}
  html,body{background:#fff!important;color:#111}
  body{font-size:10.4pt}
  .bar,.toc,.dock,.aa,.gv,.lb,.next,.sutra,.colo,.orig,.archive-note,.op__gal,.byline__act,.screen iframe,.screen__play,.screen__lbl,.cont,[data-continue],.skip,.sr{display:none!important}
  main{display:block}
  .story{position:static}

  /* ── opening page ── */
  .op,.op--cover,.op--type,.op--notice,.op--portrait,.op--square,.op--poster,.op--photo,.op--wide{display:block!important;width:auto!important;max-width:none!important;margin:0 0 7mm!important;padding:0!important;background:none!important;border:0!important;animation:none!important}
  .op__photo{margin:0 0 6mm!important;background:none!important;padding:0!important;display:block!important}
  .op__photo picture{display:block}
  .op__photo img{display:block;width:auto!important;max-width:100%!important;height:auto!important;max-height:112mm!important;margin:0 auto!important;box-shadow:none!important;animation:none!important}
  .op__photo figcaption{color:#6D675F!important;font:400 7.8pt/1.45 "NotoSerifDevP","FrauncesP",serif!important;padding:2mm 0 0!important;width:auto!important;text-align:left}
  .op--cover .op__text{display:block!important;width:auto!important;padding:0!important}
  .op--cover .op__text::before{display:none}
  .op__text{border-top:1.6mm solid var(--fam);padding-top:4mm!important}
  .op__no{display:block;font:400 54pt/.9 var(--f-disp)!important;color:var(--fam)!important;margin:0 0 3mm!important;opacity:1!important;animation:none!important}
  .op--type .op__text,.op--type.--b .op__text{border-top:0;padding-top:0!important}
  .kicker{font:600 8pt/1.2 var(--f-ui)!important;color:#3B3733}
  .kicker b{background:var(--fam-ink)!important;color:#fff!important;padding:1mm 1.6mm .8mm;border-radius:.6mm;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .hed,.op--type .hed,.op--notice .hed,.op--type .hed.--mid,.op--type .hed.--long{font-size:28pt!important;line-height:1.14!important;margin:3mm 0 2.5mm!important;letter-spacing:0}
  .hed.--mid{font-size:24pt!important}.hed.--long{font-size:19pt!important}
  .hed.en{font-family:"FrauncesP",serif!important;font-weight:700!important}
  .deck{font:400 12pt/1.55 var(--f-text)!important;color:#34302b!important;margin:0 0 3mm!important;max-width:none}
  .deck[lang="en"]{font-style:italic}
  .byline{border-top:.3mm solid #E4DDD2;padding-top:2.5mm;font:500 8.2pt/1.3 var(--f-ui)!important;color:#6D675F;gap:2mm 6mm}
  .byline__who b{font-size:9pt;color:#111}

  /* ── text in two columns ── */
  .prose{max-width:none!important;padding:0!important;margin:0!important;font-size:10.4pt!important;line-height:1.72!important;color:#111!important;columns:2;column-gap:8mm;column-fill:auto;orphans:3;widows:3}
  .prose.--en{font-size:10.2pt!important;line-height:1.55!important;text-align:justify;hyphens:auto}
  .prose p{margin:0 0 .75em!important}
  .prose .lead{font-size:1.06em!important;line-height:1.66!important}
  .dc{font-size:3.1em!important;color:var(--fam-ink)!important;animation:none!important;opacity:1!important;transform:none!important}
  .prose h2{font-size:1.18em!important;margin:1.1em 0 .45em!important;padding-top:.55em!important;break-after:avoid;break-inside:avoid}
  .prose h2::before{width:10mm!important;height:.7mm!important;background:var(--fam)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .prose a{color:#111!important;text-decoration:none}
  .prose p,.prose li{break-inside:auto}

  /* across both columns: verses, quotes, wide photographs, mosaics, videos */
  .shlokas,.quotes,.callout,.fig.--wide,.fig.--pano,.fig.--mat,.mosaic,.screen,.prose table,.sidebar,.print-end{column-span:all;break-inside:avoid}
  .shlokas{width:auto!important;margin:3mm 0 4mm!important;transform:none!important;padding:5mm 8mm!important;background:var(--fam-soft)!important;border-radius:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .shlokas::before,.shlokas::after{background:var(--fam)!important;transform:none!important;width:14mm;margin-left:-7mm}
  .shlokas::before{top:2mm}.shlokas::after{bottom:2mm}
  .prose .shlokas p,.prose .shlokas .shloka{color:var(--fam-ink)!important;font-size:10.8pt!important;line-height:1.75!important;margin:0 auto!important}
  .callout{margin:3mm 0!important;padding:2.5mm 0 2mm!important;border-top:.9mm solid var(--fam)!important;border-bottom:.3mm solid #111!important}
  .callout p{font-size:15pt!important;line-height:1.35!important}
  .prose .shloka,.prose p[lang="sa"]{color:#7A1519!important}

  /* photographs: never cropped, sized for paper */
  .fig{margin:2mm 0 3.5mm!important;float:none!important;width:100%!important;transform:none!important;break-inside:avoid;background:none!important;padding:0!important}
  .fig img,.tile img{max-height:88mm!important;width:auto!important;max-width:100%!important;margin:0 auto!important;box-shadow:none!important;opacity:1!important}
  .fig.--tall img{max-height:92mm!important}
  .fig.--wide img,.fig.--pano img{max-height:100mm!important}
  .fig figcaption,.tile figcaption{font:400 7.6pt/1.4 "NotoSerifDevP","FrauncesP",serif!important;color:#6D675F!important;margin-top:1.2mm!important}
  .mosaic{width:auto!important;margin:2mm 0 4mm!important;transform:none!important;gap:2mm!important}
  .mosaic__row{gap:2mm!important;break-inside:avoid}
  .tile img{max-height:62mm!important}

  /* video: the thumbnail with a QR code to the video */
  .screen{width:auto!important;margin:3mm 0 4mm!important;transform:none!important;padding:0!important;background:none!important;color:#111!important;border:0!important;display:grid;grid-template-columns:1fr 30mm;gap:5mm;align-items:center}
  .screen__qr{display:flex!important;flex-direction:column;align-items:center;gap:1.5mm;grid-column:2;grid-row:1;font:500 7.2pt/1.3 var(--f-ui);color:#34302b;text-align:center}
  .screen__qr .qr{width:26mm;height:26mm}
  .screen figcaption{grid-column:1/-1;margin:0!important;text-align:left!important;font:400 7.8pt/1.4 var(--f-ui)!important}
  .screen figcaption a{color:#6D675F!important}
  .screen__btn{display:block!important;grid-column:1;grid-row:1;width:100%!important;margin:0!important;border-radius:1mm!important;background:#111!important}
  .screen__btn img{opacity:1!important;transform:none!important;object-fit:contain!important}
  .screen__cap{color:#34302b!important;font-size:8.6pt!important}

  /* the end: a QR to the web page */
  .endmark{background:var(--fam)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .print-end{display:flex!important;align-items:center;gap:5mm;margin-top:7mm;padding-top:4mm;border-top:.3mm solid #E4DDD2;font:400 8pt/1.5 var(--f-ui);color:#6D675F}
  .print-end .qr{width:22mm;height:22mm;flex:none}
  .print-end b{display:block;font:600 9.5pt/1.4 var(--f-text);color:#111}
  .prose .coda{column-span:all;border-top:.3mm solid #E4DDD2}
  .prose .coda a{color:#6D675F!important}
}
/* on screen the print parts stay out of the way */
.screen__qr,.print-end{display:none}