/* ============================================================
   Turīya·Sūtra · v5.0 · one stylesheet, inlined into every page
   Laws: three columns (250 / free / 380) · text takes the width
   it is given — no ch caps, no max-width, no CSS columns, ever.
   ============================================================ */
:root{
  --bg:#efe8d8; --bg2:#f1eadc; --raised:#e7decb; --raised2:#e4dac6;
  --line:#cbbc9f; --soft:#e2d8c1; --hair:#e4dbc7;
  --ink:#32281e; --dim:#5d4b38; --faint:#84725c; --faintr:#786048;
  --gold:#917524; --goldd:#5b4a20; --goldl:#9c7b20;
  --ether:#372498; --air:#36675e; --fire:#7e3e24; --water:#374e86; --earth:#7e6429;
  --lens:#3e6979; --mirror:#63318c; --ok:#3b815c; --err:#8e482d;
  --fd:'Cormorant Garamond',serif; --fb:'Spectral',serif;
  --fl:'Marcellus',serif; --fdev:'Noto Serif Devanagari',serif;
  --hd:52px; --ft:38px; --railw:250px; --panew:380px;
}
*{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--fb);
  -webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration-thickness:1px;text-underline-offset:2.5px}
a:hover{color:var(--goldl)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
button{font:inherit;color:inherit}
::selection{background:rgba(145,117,36,.25)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--soft);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--line)}
::-webkit-scrollbar-track{background:transparent}

/* ---------- header ---------- */
#hd{height:var(--hd);display:flex;align-items:center;gap:14px;
  padding:0 clamp(14px,2vw,26px);border-bottom:1px solid var(--soft);
  position:sticky;top:0;z-index:60;background:rgba(239,232,216,.96);backdrop-filter:blur(6px)}
#hd .wm{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
#hd .wm .seal{width:30px;height:30px;flex:none;border-radius:50%;border:1px solid var(--goldd);
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 34%,rgba(145,117,36,.22),rgba(145,117,36,.02))}
#hd .wm .seal svg{width:17px;height:17px;display:block}
#hd .wm b{font-family:var(--fd);font-weight:500;font-size:18.5px;display:block;line-height:1.02}
#hd .wm i{font-family:var(--fl);font-size:8.5px;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--gold);font-style:normal;display:block;margin-top:1px}
#hd .now{margin-left:auto;font-size:12px;color:var(--faint);display:flex;gap:16px;align-items:center;white-space:nowrap}
#hd .now b{color:var(--goldl);font-weight:400}
#hd .now a{color:var(--dim);text-decoration:none;font-family:var(--fl);font-size:10.5px;
  letter-spacing:1.8px;text-transform:uppercase}
#hd .now a:hover{color:var(--gold)}
#railbtn{display:none;background:none;border:1px solid var(--line);border-radius:8px;
  color:var(--dim);padding:5px 11px;cursor:pointer;font-family:var(--fl);font-size:10.5px;
  letter-spacing:1.8px;text-transform:uppercase}

/* ---------- the three columns ---------- */
#wrap{display:grid;grid-template-columns:var(--railw) minmax(0,1fr) var(--panew);
  min-height:calc(100vh - var(--hd) - var(--ft))}
body.app{overflow:hidden}
body.app #wrap{height:calc(100vh - var(--hd) - var(--ft));min-height:0}

/* ---------- rail ---------- */
#rail{border-right:1px solid var(--soft);overflow-y:auto;padding:4px 0 20px;background:var(--bg)}
.grp{border-bottom:1px solid var(--hair)}
.gh{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;cursor:pointer;
  padding:11px 14px 10px;text-align:left;font-family:var(--fl);font-size:10px;
  letter-spacing:2.2px;text-transform:uppercase;color:var(--faint)}
.gh:hover{color:var(--gold)}
.gh .k{transition:transform .18s;font-size:8px;color:var(--goldd)}
.grp[data-open="1"] .gh{color:var(--gold)}
.grp[data-open="1"] .gh .k{transform:rotate(90deg)}
.gb{display:none;padding:0 0 8px}
.grp[data-open="1"] .gb{display:block}
.ri{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:5px 12px 5px 22px;border-left:2px solid transparent;text-decoration:none;font-family:var(--fb)}
.ri b{display:block;font-family:var(--fd);font-weight:500;font-size:14.5px;color:var(--dim);line-height:1.18}
.ri i{display:block;font-style:normal;font-size:10.5px;color:var(--faint);line-height:1.3}
.ri:hover b{color:var(--ink)}
.ri[aria-current]{border-left-color:var(--gold);
  background:linear-gradient(90deg,rgba(145,117,36,.10),transparent)}
.ri[aria-current] b{color:var(--gold)}
.ri.out b::before{content:"▲ ";font-size:7px;color:var(--lens)}
.ri.in b::before{content:"▼ ";font-size:7px;color:var(--mirror)}
.ri.mem b::before{content:"◆ ";font-size:7px;color:var(--gold)}

/* ---------- middle: the stage ---------- */
#stage{position:relative;min-width:0;background:var(--bg)}
body.app #stage{overflow:hidden}
#cut{width:100%;height:100%;display:block}
#hint{position:absolute;right:14px;bottom:10px;font-size:11px;color:var(--faint);
  font-style:italic;pointer-events:none;opacity:.85}
.band{cursor:pointer}
.blab{font-family:var(--fd);font-size:14px;fill:var(--dim);pointer-events:none}
.bsk{font-family:var(--fb);font-size:10px;fill:var(--faint);pointer-events:none}
.nd{cursor:pointer;transition:opacity .3s}
.nd .hit{fill:transparent}
.nd .dot{transition:r .35s,fill-opacity .35s}
.nd .nl{font-family:var(--fl);font-size:9px;fill:var(--faint);pointer-events:none;opacity:0;transition:opacity .3s}
.nd.show .nl,.nd.on .nl{opacity:1;fill:var(--ink)}
.thr{fill:none;transition:stroke-opacity .35s,stroke .35s}
.memln{stroke:var(--goldd);stroke-width:1.1;stroke-dasharray:3 5;opacity:.5}
.loop{fill:none;stroke:var(--goldd);stroke-width:1;stroke-dasharray:2 6;opacity:.36}
.looplab{font-family:var(--fb);font-size:9px;fill:var(--faint);font-style:italic}

/* the stage as a gallery / visual surface (See section) */
#stage .vwrap{height:100%;overflow-y:auto;padding:clamp(16px,2.4vw,30px)}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:13px}
.vcard{background:var(--raised);border:1px solid var(--line);border-radius:11px;padding:11px;
  cursor:pointer;text-align:left;transition:border-color .15s}
.vcard:hover,.vcard[aria-current]{border-color:var(--goldd)}
.vcard svg{width:100%;height:148px;display:block}
.vcard b{display:block;font-family:var(--fd);font-weight:500;font-size:16.5px;color:var(--ink);margin-top:7px}
.vcard i{display:block;font-style:normal;font-size:11px;color:var(--faint)}
.vbig{background:var(--raised);border:1px solid var(--line);border-radius:13px;
  padding:clamp(12px,1.6vw,22px);margin:0 0 16px}
.vbig{display:grid;place-items:center}
.vbig svg{width:auto;max-width:100%;height:min(46vh,420px);display:block;margin:0 auto}
.filt{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.filt button{background:none;border:1px solid var(--line);border-radius:999px;padding:5px 12px;
  cursor:pointer;font-family:var(--fl);font-size:10px;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--faint)}
.filt button[aria-pressed="true"]{background:var(--raised2);color:var(--gold);border-color:var(--goldd)}
.ring{cursor:pointer}

/* ---------- middle: the page (reads) — text takes the whole pane ---------- */
#page{height:100%;overflow-y:auto;padding:clamp(22px,3vw,42px) clamp(20px,3vw,46px) 70px}
body:not(.app) #page{height:auto;overflow:visible}
#page>*{max-width:none}

/* ---------- right: the description pane (380px — do not touch) ---------- */
#pane{border-left:1px solid var(--soft);display:flex;flex-direction:column;min-width:0;background:var(--bg)}
body.app #pane{overflow:hidden}
#pbody{flex:1;overflow-y:auto;padding:20px 24px 26px;overscroll-behavior:contain}
#depth{display:flex;gap:5px;padding:9px 24px 10px;border-top:1px solid var(--soft)}
#depth button{flex:1;background:none;border:1px solid var(--line);border-radius:7px;padding:6px;
  cursor:pointer;font-family:var(--fl);font-size:10px;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--faint)}
#depth button[aria-pressed="true"]{background:var(--goldd);color:#efe9d9;border-color:var(--goldd)}

/* ---------- typography — free-flowing everywhere ---------- */
.tag{font-family:var(--fl);font-size:9px;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--gold);display:block;margin:0 0 7px}
h1{font-family:var(--fd);font-weight:500;font-size:clamp(27px,3vw,44px);line-height:1.06;margin:0 0 14px}
h1 em{font-style:italic;color:var(--gold)}
h2{font-family:var(--fd);font-weight:500;font-size:clamp(21px,2vw,27px);margin:34px 0 8px;line-height:1.16;color:var(--goldl)}
h3{font-family:var(--fd);font-weight:500;font-size:19px;margin:22px 0 4px;line-height:1.15}
h4{font-family:var(--fl);font-weight:400;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold);margin:20px 0 6px}
.sk{font-size:12.5px;color:var(--faint);font-style:italic;margin:0 0 10px}
p{font-size:15.2px;line-height:1.74;color:var(--dim);margin:0 0 14px}
#page p{font-size:15.8px;line-height:1.78}
.lead{font-size:17.5px;color:var(--ink)}
li{font-size:15.2px;line-height:1.7;color:var(--dim);margin:0 0 7px}
#page li{font-size:15.6px}
blockquote{margin:16px 0;padding:2px 0 2px 16px;border-left:2px solid var(--goldd);color:var(--ink);font-style:italic}
hr{border:none;border-top:1px solid var(--soft);margin:28px 0}
.nm{font-size:12.5px;color:var(--faint);margin:-4px 0 12px;line-height:1.6}
.nm b,.dev{font-family:var(--fdev);color:var(--goldl);font-weight:400}
.dev{margin-left:8px}
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px}
th{text-align:left;padding:8px 10px;font-family:var(--fl);font-size:9.5px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--gold);font-weight:400;border-bottom:1px solid var(--line)}
td{padding:8px 10px;border-bottom:1px solid var(--hair);color:var(--dim);vertical-align:top}
td b{color:var(--ink);font-weight:400}
.tblwrap{overflow-x:auto;margin:16px 0}
.tblwrap table{margin:0}
.card{background:var(--raised);border:1px solid var(--line);border-left:2px solid var(--goldd);
  border-radius:10px;padding:15px 18px;margin:18px 0}
.card p:last-child{margin:0}
.lk{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 2px}
.lk button,.lk a{background:var(--raised);border:1px solid var(--line);border-radius:7px;
  padding:4px 10px;font-size:12.5px;color:var(--dim);cursor:pointer;font-family:var(--fb);text-decoration:none}
.lk button:hover,.lk a:hover{border-color:var(--goldd);color:var(--gold)}
.lk .x{border-color:var(--goldd);color:var(--goldl)}
.term{border-top:1px solid var(--hair);padding:13px 0 4px}
.term:first-child{border-top:none}
.term .lit{font-style:italic;color:var(--faint);font-size:12.5px;margin:0 0 6px}
.epi{display:inline-block;font-family:var(--fl);font-size:8.5px;letter-spacing:1.6px;
  text-transform:uppercase;border:1px solid var(--line);border-radius:5px;padding:2px 7px;
  color:var(--faint);margin:0 6px 6px 0}
.epi.c{border-color:rgba(59,129,92,.4);color:var(--ok)}
.epi.m{border-color:rgba(55,78,134,.45);color:var(--water)}
.epi.n{border-color:rgba(142,72,45,.4);color:var(--err)}

/* the dialogue (the 42) */
.turn{margin:22px 0;padding:14px 18px;border:1px solid var(--hair);border-radius:12px;background:var(--bg2)}
.turn.pranay{border-left:2px solid var(--water)}
.turn.claude{border-left:2px solid var(--goldd)}
.turn .who{font-family:var(--fl);font-size:9.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--faint);margin:0 0 8px}
.turn p:last-child{margin-bottom:0}
.panel{background:var(--raised);border:1px solid var(--line);border-radius:12px;
  padding:16px 20px;margin:20px 0}
.panel .pt{font-family:var(--fl);font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--gold);margin:0 0 8px}
.ts-vak{margin:18px 0;padding:12px 16px;border-left:2px solid var(--mirror);
  background:rgba(99,49,140,.05);border-radius:0 10px 10px 0}
.ts-vak p{margin:0;color:var(--ink)}

/* forms, buttons */
.go{background:linear-gradient(180deg,var(--gold),var(--goldd));color:#f0eadb;border:none;
  border-radius:9px;padding:11px 22px;font-family:var(--fl);font-size:11.5px;
  letter-spacing:2px;text-transform:uppercase;cursor:pointer;text-decoration:none;display:inline-block}
.go:hover{filter:brightness(1.07)}
.go:disabled{opacity:.55;cursor:wait}
.ghost{background:none;border:1px solid var(--line);color:var(--dim);border-radius:9px;
  padding:10px 18px;cursor:pointer;font-family:var(--fl);font-size:11.5px;letter-spacing:2px;
  text-transform:uppercase;text-decoration:none;display:inline-block}
.ghost:hover{border-color:var(--goldd);color:var(--gold)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
input,select,textarea{background:var(--raised);border:1px solid var(--line);color:var(--ink);
  font-family:var(--fb);font-size:14.5px;padding:10px 12px;border-radius:8px}
input:focus,select:focus,textarea:focus{border-color:var(--goldd);outline:none}
textarea{width:100%;min-height:110px;resize:vertical}
label{font-family:var(--fl);font-size:9.5px;letter-spacing:1.7px;text-transform:uppercase;
  color:var(--faint);display:block;margin:0 0 4px}
.msg{margin-top:10px;font-size:13.5px;display:none}
.msg.ok{color:var(--ok);display:block}
.msg.err{color:var(--err);display:block}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:18px 0}
.plan{background:var(--raised);border:1px solid var(--line);border-radius:13px;padding:20px 22px}
.plan .pr{font-family:var(--fd);font-size:34px;color:var(--ink);line-height:1;margin:6px 0 2px}
.plan .per{font-size:12.5px;color:var(--faint);margin:0 0 12px}

/* ---------- footer ---------- */
#ft{min-height:var(--ft);display:flex;align-items:center;gap:14px;
  padding:6px clamp(14px,2vw,26px);border-top:1px solid var(--soft);
  font-size:11.5px;color:var(--faint);flex-wrap:wrap}
#ft a{color:var(--dim);text-decoration:underline;text-underline-offset:2px}
#ft a:hover{color:var(--gold)}
#ft .v{margin-left:auto;font-family:var(--fl);letter-spacing:1.6px;font-size:9.5px}

/* ---------- small screens: the three columns stack ---------- */
@media(max-width:1080px){
  body.app{overflow:auto}
  body.app #wrap{height:auto}
  #wrap{grid-template-columns:1fr;min-height:0}
  #railbtn{display:inline-block}
  #rail{display:none;position:fixed;left:0;right:0;top:var(--hd);bottom:0;z-index:70;
   overflow-y:auto;border-right:none;background:rgba(239,232,216,.97);backdrop-filter:blur(6px);
   border-bottom:1px solid var(--soft)}
  body.railopen #rail{display:block}
  body.railopen{overflow:hidden}
  #cut{height:62vh}
  body.app #stage,#stage .vwrap{overflow:visible;height:auto}
  .vbig svg{height:auto;max-height:340px}
  #pane{border-left:none;border-top:1px solid var(--soft)}
  body.app #pane{overflow:visible}
  #pbody{overflow:visible}
  #page{height:auto;overflow:visible}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}

/* carried h2 kicker: <h2><span>label</span>Title</h2> */
article h2>span:first-child{display:block;font-family:var(--fl);font-size:10.5px;letter-spacing:2.6px;
 text-transform:uppercase;color:var(--gold);margin:0 0 5px;font-weight:400}

/* static pages: navigation and description hold their ground while the middle scrolls */
@media(min-width:1081px){
 body:not(.app) #rail{position:sticky;top:var(--hd);align-self:start;
  max-height:calc(100vh - var(--hd));overflow-y:auto}
 body:not(.app) #pane{position:sticky;top:var(--hd);align-self:start;
  max-height:calc(100vh - var(--hd));overflow-y:auto}
}

/* the mudrā drawings need room and a light plate is wrong here — they are theme-aware */
.vbig.mud svg{height:auto;max-height:none;width:100%;max-width:960px}
.vbig.mud{padding:8px 0}

/* the three epistemic tags, inline in prose */
.tg{display:inline-block;font-family:var(--fl);font-size:9.5px;letter-spacing:1.6px;
 text-transform:uppercase;padding:2px 7px;border-radius:3px;border:1px solid;margin:0 2px;
 vertical-align:2%}
.tg.classical{color:#3b816f;border-color:rgba(59,129,111,.42);background:rgba(59,129,111,.07)}
.tg.later{color:#8d652c;border-color:rgba(141,101,44,.42);background:rgba(141,101,44,.07)}
.tg.differ{color:#593d80;border-color:rgba(89,61,128,.42);background:rgba(89,61,128,.07)}

/* the verse in its own script, then transliterated, then in English */
.dv{font-family:var(--fdev);font-size:16px;line-height:1.95;color:var(--gold);
 margin:2px 0 4px;letter-spacing:.2px}
.ia{font-family:var(--fb);font-style:italic;font-size:13.5px;line-height:1.7;
 color:var(--dim);margin:0 0 8px}

/* the paper's panels, and the way out to a full-size view */
figure.panel{margin:22px 0 26px}
figure.panel svg{width:100%;height:auto;display:block;border:1px solid var(--soft);border-radius:8px}
figure.panel figcaption{margin-top:7px;text-align:right}
figure.panel figcaption a{font-family:var(--fl);font-size:10.5px;letter-spacing:1.6px;
 text-transform:uppercase;color:var(--goldd);text-decoration:none;border-bottom:1px solid transparent}
figure.panel figcaption a:hover{color:var(--gold);border-bottom-color:var(--goldd)}

/* the muscle map — engaged and lengthening, drawn on a body */
.mmap{margin:10px 0 14px;border:1px solid var(--soft);border-radius:8px;padding:8px 4px;
 background:rgba(42,33,24,.012)}
.mmap svg{width:100%;height:auto;display:block}

/* skip link — visible only when focused, first thing in the tab order */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:#e8e0ce;
 padding:10px 16px;font-family:var(--fl);font-size:12px;letter-spacing:1.6px;text-transform:uppercase;
 text-decoration:none;border-radius:0 0 6px 0}
.skip:focus{left:0}
/* --faint cleared AA on the page background but failed at 4.23:1 on raised surfaces */
.card .dim,.card small,.plan .per,.term small,.sum .dim,#pane .dim{color:var(--faintr)}