/* Eight Verses — study site */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Tibetan:wght@400;600&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:#14161a; --bg2:#1a1d22; --bg3:#21252b;
  --fg:#e8e4dc; --dim:#9aa0a8; --dim2:#6e747c;
  --line:#2c3138;
  --accent:#d9a441;
  --noun:#6fb1e0; --verb:#e0705f; --adj:#7fc99a; --quant:#b39ae0;
  --part:#e0b05f; --mood:#d98fd0; --neutral:#8a919a;
  --maxw:860px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--fg);
  font-family:'Source Serif 4',Georgia,serif;
  font-size:18px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.tib,.s-t,.gp-tib,.k-tib,.v-tib,.fc-tib,.qtib,.buildtib,.gtib,.e-t{
  font-family:'Noto Serif Tibetan','Kailasa','Jomolhari','Microsoft Himalaya','DDC Uchen','Tibetan Machine Uni',serif;
  line-height:2.2;
}

/* ---------- layout ---------- */
header.site{
  border-bottom:1px solid var(--line); background:var(--bg2);
  position:sticky; top:0; z-index:50;
}
header.site .inner{
  max-width:var(--maxw); margin:0 auto; padding:14px 22px;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.brand{font-weight:600; font-size:17px; letter-spacing:.3px; color:var(--fg); text-decoration:none; white-space:nowrap}
.brand span{color:var(--accent)}
nav.site{display:flex; gap:18px; flex-wrap:wrap}
nav.site a{
  font-family:Inter,system-ui,sans-serif; font-size:14px; color:var(--dim);
  text-decoration:none; padding:3px 0; border-bottom:2px solid transparent;
}
nav.site a:hover{color:var(--fg)}
nav.site a.on{color:var(--accent); border-bottom-color:var(--accent)}

main{max-width:var(--maxw); margin:0 auto; padding:40px 22px 90px}
section{margin-bottom:46px}

h1{font-size:34px; line-height:1.25; font-weight:600; margin-bottom:10px; letter-spacing:-.4px}
h2{font-size:23px; font-weight:600; margin:38px 0 14px; letter-spacing:-.2px}
h3{font-size:18px; font-weight:600; margin:24px 0 8px; font-family:Inter,sans-serif}
p{margin-bottom:14px}
.lede{font-size:20px; color:var(--dim); margin-bottom:26px; line-height:1.6}
a{color:var(--accent)}
em{font-style:italic}
strong{font-weight:600; color:#fff}

.card{background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:20px 22px; margin-bottom:18px}
.card.tight{padding:14px 16px}
.note{border-left:3px solid var(--accent); background:var(--bg2); padding:13px 17px; margin:16px 0; font-size:16px; color:var(--dim)}
.note strong{color:var(--fg)}

/* ---------- home tiles ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-top:22px}
.tile{
  display:block; background:var(--bg2); border:1px solid var(--line); border-radius:10px;
  padding:18px 20px; text-decoration:none; color:var(--fg); transition:.15s;
}
.tile:hover{border-color:var(--accent); transform:translateY(-2px)}
.tile b{display:block; font-size:17px; margin-bottom:5px}
.tile span{font-size:14.5px; color:var(--dim); font-family:Inter,sans-serif; line-height:1.5}

/* ---------- verse picker ---------- */
.picker{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:26px}
.picker button{
  font-family:Inter,sans-serif; font-size:14px; cursor:pointer;
  background:var(--bg2); color:var(--dim); border:1px solid var(--line);
  border-radius:7px; padding:8px 14px; transition:.12s;
}
.picker button:hover{color:var(--fg); border-color:var(--dim2)}
.picker button.on{background:var(--accent); color:#1a1205; border-color:var(--accent); font-weight:600}

/* ---------- interactive verse ---------- */
.verseblock{margin:8px 0 12px}
.vline{
  padding:12px 0; border-bottom:1px dashed var(--line);
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:2px;
}
.vline:last-child{border-bottom:none}
.lineno{
  font-family:Inter,sans-serif; font-size:11px; color:var(--dim2);
  width:100%; margin-bottom:4px; letter-spacing:.7px; text-transform:uppercase;
}
.syl{
  cursor:pointer; border-radius:6px; padding:3px 5px 1px;
  border-bottom:2.5px solid transparent; transition:.12s; position:relative;
}
.syl .s-t{font-size:25px; display:block; line-height:1.9}
.syl .s-p{font-family:Inter,sans-serif; font-size:11px; color:var(--dim2); display:block; text-align:center; margin-top:-3px}
.syl:hover{background:var(--bg3)}
.syl.sel{background:var(--bg3); box-shadow:0 0 0 1px var(--dim2)}

.syl[data-r=noun]{border-bottom-color:var(--noun)}
.syl[data-r=verb]{border-bottom-color:var(--verb)}
.syl[data-r=adj],.syl[data-r=quant]{border-bottom-color:var(--adj)}
.syl[data-r=mood]{border-bottom-color:var(--mood)}
.syl[data-r=dat],.syl[data-r=abl],.syl[data-r=instr],.syl[data-r=gen],
.syl[data-r=term],.syl[data-r=nom],.syl[data-r=topic],.syl[data-r=conj],
.syl[data-r=neg],.syl[data-r=plural],.syl[data-r=cond]{border-bottom-color:var(--part)}

/* gloss panel */
.glosspanel{
  background:var(--bg3); border:1px solid var(--line); border-radius:9px;
  padding:16px 18px; min-height:104px; margin-top:6px;
}
.glosspanel .gp-empty{color:var(--dim2); font-size:15px; font-family:Inter,sans-serif}
.gp-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:7px}
.gp-tib{font-size:29px}
.gp-wylie{font-family:'Inter',monospace; font-size:13px; color:var(--dim); background:var(--bg); padding:2px 8px; border-radius:4px}
.gp-phon{font-style:italic; color:var(--dim)}
.gp-role{
  font-family:Inter,sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.8px;
  padding:3px 9px; border-radius:20px; background:var(--bg); color:var(--dim);
}
.gp-gloss{font-size:19px; margin-bottom:6px}
.gp-note{font-size:15.5px; color:var(--dim); line-height:1.6}
.gp-link{font-family:Inter,sans-serif; font-size:13px; margin-top:9px; display:inline-block}

/* legend */
.legend{display:flex; flex-wrap:wrap; gap:7px; margin:14px 0 6px}
.legend span{
  font-family:Inter,sans-serif; font-size:12px; color:var(--dim);
  border-bottom:2.5px solid var(--neutral); padding:2px 7px 3px;
}
.legend span.l-noun{border-color:var(--noun)}
.legend span.l-verb{border-color:var(--verb)}
.legend span.l-adj{border-color:var(--adj)}
.legend span.l-part{border-color:var(--part)}
.legend span.l-mood{border-color:var(--mood)}

/* ---------- build-up ---------- */
.buildrow{
  display:flex; gap:14px; align-items:baseline; padding:11px 0;
  border-bottom:1px solid var(--line); opacity:.28; transition:.35s;
}
.buildrow.show{opacity:1}
.buildrow:last-child{border-bottom:none}
.buildstep{
  font-family:Inter,sans-serif; font-size:11px; color:var(--dim2);
  min-width:22px; padding-top:4px;
}
.buildtib{font-size:20px; flex:0 0 auto; max-width:46%}
.builden{flex:1; font-size:16.5px; color:var(--dim)}
.buildrow.show .builden{color:var(--fg)}
.builden em{color:var(--accent); font-style:normal; font-weight:600}
.btn{
  font-family:Inter,sans-serif; font-size:14px; cursor:pointer; background:var(--accent);
  color:#1a1205; border:none; border-radius:7px; padding:9px 18px; font-weight:600;
}
.btn.ghost{background:transparent; color:var(--dim); border:1px solid var(--line)}
.btn:hover{filter:brightness(1.08)}
.btnrow{display:flex; gap:9px; margin-top:14px; flex-wrap:wrap}

/* ---------- skeleton table ---------- */
.skel{width:100%; border-collapse:collapse; font-size:16px}
.skel td{padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top}
.skel td:first-child{
  font-family:Inter,sans-serif; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.7px; color:var(--accent); white-space:nowrap; width:1%; padding-right:18px;
}
.skel td.k-tib{font-size:19px}
.skel td:last-child{color:var(--dim)}

/* ---------- glossary ---------- */
.gitem{background:var(--bg2); border:1px solid var(--line); border-radius:10px; margin-bottom:14px; overflow:hidden}
.gitem > summary{
  cursor:pointer; padding:15px 20px; list-style:none; display:flex;
  align-items:baseline; gap:12px; flex-wrap:wrap;
}
.gitem > summary::-webkit-details-marker{display:none}
.gitem > summary::after{content:'+'; margin-left:auto; color:var(--dim2); font-size:20px}
.gitem[open] > summary::after{content:'–'}
.gitem > summary:hover{background:var(--bg3)}
.gterm{font-size:19px; font-weight:600}
.gtib{font-size:20px; color:var(--accent)}
.gshort{font-size:15px; color:var(--dim); width:100%; font-family:Inter,sans-serif; line-height:1.5}
.gbody{padding:4px 20px 20px; border-top:1px solid var(--line)}
.gbody p{font-size:16.5px}
.geg{background:var(--bg); border-radius:7px; padding:11px 14px; margin:9px 0; display:flex; gap:14px; align-items:baseline; flex-wrap:wrap}
.geg .e-t{font-size:21px}
.geg .e-n{font-size:15px; color:var(--dim); flex:1; min-width:180px}
.ganalogy{font-style:italic; color:var(--accent); font-size:16px; margin-top:12px}
.ganalogy b{font-style:normal; font-family:Inter,sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--dim2); display:block; margin-bottom:3px}

/* ---------- vocab table ---------- */
.controls{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; align-items:center}
input[type=search],select{
  font-family:Inter,sans-serif; font-size:14px; background:var(--bg2); color:var(--fg);
  border:1px solid var(--line); border-radius:7px; padding:9px 13px;
}
input[type=search]{flex:1; min-width:190px}
input[type=search]:focus,select:focus{outline:none; border-color:var(--accent)}
.count{font-family:Inter,sans-serif; font-size:13px; color:var(--dim2)}

table.vocab{width:100%; border-collapse:collapse; font-size:16px}
table.vocab th{
  text-align:left; font-family:Inter,sans-serif; font-size:11px; text-transform:uppercase;
  letter-spacing:.8px; color:var(--dim2); padding:8px; border-bottom:1px solid var(--line); font-weight:500;
}
table.vocab td{padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:top}
table.vocab tr:hover td{background:var(--bg2)}
td.v-tib{font-size:23px; white-space:nowrap}
td.v-wylie{font-family:Inter,monospace; font-size:13px; color:var(--dim)}
td.v-phon{font-style:italic; color:var(--dim); font-size:15px}
td.v-role{font-family:Inter,sans-serif; font-size:11px; color:var(--dim2); text-transform:uppercase; letter-spacing:.5px}
td.v-vs{font-family:Inter,sans-serif; font-size:12px; color:var(--dim2)}

/* ---------- flashcards ---------- */
.card3d{
  background:var(--bg2); border:1px solid var(--line); border-radius:14px;
  min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:34px 26px; text-align:center; cursor:pointer; user-select:none;
}
.card3d:hover{border-color:var(--dim2)}
.fc-tib{font-size:52px; line-height:1.8}
.fc-prompt{font-family:Inter,sans-serif; font-size:13px; color:var(--dim2); margin-top:16px}
.fc-ans{font-size:26px; margin-bottom:8px}
.fc-sub{font-size:15px; color:var(--dim); font-family:Inter,sans-serif}
.fc-note{font-size:15px; color:var(--dim); margin-top:14px; max-width:460px; line-height:1.6}
.progress{font-family:Inter,sans-serif; font-size:13px; color:var(--dim2); text-align:center; margin-top:14px}

/* ---------- quiz ---------- */
.q{background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:20px 22px; margin-bottom:16px}
.qtext{font-size:18px; margin-bottom:6px}
.qtib{font-size:27px; margin:8px 0 14px}
.opts{display:flex; flex-direction:column; gap:8px}
.opt{
  font-family:Inter,sans-serif; font-size:15px; text-align:left; cursor:pointer;
  background:var(--bg3); color:var(--fg); border:1px solid var(--line);
  border-radius:8px; padding:11px 15px; transition:.12s;
}
.opt:hover:not(:disabled){border-color:var(--dim2)}
.opt:disabled{cursor:default}
.opt.right{background:rgba(127,201,154,.16); border-color:var(--adj); color:#bfe8cf}
.opt.wrong{background:rgba(224,112,95,.15); border-color:var(--verb); color:#f0b3a9}
.qfb{margin-top:12px; font-size:15.5px; color:var(--dim); display:none; line-height:1.6}
.qfb.show{display:block}

footer.site{
  border-top:1px solid var(--line); margin-top:40px; padding:26px 22px 50px;
  font-family:Inter,sans-serif; font-size:13.5px; color:var(--dim2); line-height:1.7;
}
footer.site .inner{max-width:var(--maxw); margin:0 auto}
footer.site a{color:var(--dim)}

@media (max-width:640px){
  body{font-size:17px}
  h1{font-size:27px}
  main{padding:26px 16px 70px}
  .buildrow{flex-direction:column; gap:5px}
  .buildtib{max-width:100%}
  .fc-tib{font-size:40px}
  header.site .inner{gap:12px; padding:12px 16px}
  nav.site{gap:13px}
}


/* ============================================================
   LEARN TO READ — alphabet / reading / drill
   ============================================================ */

:root{ --high:#e0b05f; --low:#7fb0e0; }

h2{ font-size:26px; margin:38px 0 10px; letter-spacing:.2px }
h3{ font-size:20px; margin:24px 0 8px }
.aside{ color:var(--dim); font-size:16px; font-style:italic; margin:10px 0 }

.concept{
  background:var(--bg2); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:6px; padding:16px 20px; margin:16px 0;
}
.concept h3{ margin:0 0 8px; font-size:19px; color:var(--accent) }
.concept p{ margin:8px 0 }

.t-high{ color:var(--high) }
.t-low { color:var(--low) }
.tonetag{
  display:inline-block; font-size:12px; letter-spacing:.4px; text-transform:uppercase;
  border:1px solid currentColor; border-radius:3px; padding:1px 7px; margin-left:8px;
  vertical-align:middle; font-family:'Inter',sans-serif;
}

/* ---- families + letter grid ---- */
.family{ margin:26px 0 34px }
.fam-head h3{ margin:0; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap }
.fam-tib{ font-size:22px; color:var(--accent) }
.fam-where{ color:var(--dim); font-size:16px; margin:4px 0 14px }

.letters{ display:flex; gap:10px; flex-wrap:wrap }
.letter{
  background:var(--bg2); border:1px solid var(--line); border-radius:8px;
  padding:12px 16px 10px; cursor:pointer; text-align:center; min-width:92px;
  transition:border-color .15s, background .15s; font-family:inherit; color:var(--fg);
}
.letter:hover{ border-color:var(--accent); background:var(--bg3) }
.letter.sel{ border-color:var(--accent); background:var(--bg3) }
.letter .l-tib{ display:block; font-size:38px; line-height:1.5 }
.letter .l-wylie{ display:block; font-size:15px; font-family:'Inter',sans-serif; color:var(--dim) }
.letter .l-say{ display:block; font-size:14px; font-style:italic; color:var(--dim2) }
.letter.t-high .l-tib{ color:var(--high) }
.letter.t-low  .l-tib{ color:var(--low) }

.ldetail{ display:none; margin:10px 0 0 }
.ldetail.show{
  display:block; background:var(--bg2); border:1px solid var(--line);
  border-radius:8px; padding:16px 20px; margin:10px 0 14px;
}
.ld-top{ display:flex; gap:18px; align-items:center; margin-bottom:10px }
.ld-tib{ font-size:54px; line-height:1.3 }
.ld-name{ font-size:16px }
.ld-sound{ color:var(--accent); font-size:17px; margin-top:3px }
.ld-tip, .ld-trap, .ld-ex{ font-size:16px; margin:8px 0 }
.ld-trap{ color:#e0a0a0 }
.ld-ex{ color:var(--dim); border-top:1px solid var(--line); padding-top:9px }

/* ---- vowels ---- */
.vowel{
  display:flex; gap:20px; align-items:flex-start;
  background:var(--bg2); border:1px solid var(--line); border-radius:8px;
  padding:16px 20px; margin:12px 0;
}
.v-demo{ text-align:center; min-width:90px; border-right:1px solid var(--line); padding-right:18px }
.v-demo-tib{ display:block; font-size:46px; line-height:1.5; color:var(--accent) }
.v-demo-say{ display:block; font-size:15px; font-style:italic; color:var(--dim) }
.v-name{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:5px }
.v-mark{ font-size:28px; color:var(--accent) }
.v-nomark{ font-size:13px; color:var(--dim2); font-family:'Inter',sans-serif;
           border:1px dashed var(--line); border-radius:3px; padding:2px 8px }
.v-tibname{ font-size:17px; color:var(--dim) }
.v-pos{ font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--dim2);
        font-family:'Inter',sans-serif; border:1px solid var(--line); border-radius:3px; padding:1px 7px }
.v-sound{ color:var(--accent); font-size:16px }
.v-note{ font-size:16px; color:var(--dim); margin-top:6px }

/* ---- syllable anatomy ---- */
.anatomy{ overflow-x:auto; margin:16px 0 }
.an-row{ display:flex; gap:7px; min-width:620px }
.an-slot{
  flex:1; border:1px dashed var(--line); border-radius:6px; padding:10px 8px;
  text-align:center; background:var(--bg2);
}
.an-slot span{ display:block; font-size:13px; font-family:'Inter',sans-serif;
               text-transform:uppercase; letter-spacing:.5px; color:var(--dim) }
.an-slot small{ display:block; font-size:12px; color:var(--dim2); margin-top:3px }
.an-root{ border:2px solid var(--accent); background:var(--bg3) }
.an-root span{ color:var(--accent); font-weight:600 }

/* ---- chips (prefixes / superscripts) ---- */
.chiprow{ display:flex; gap:12px; flex-wrap:wrap; margin:14px 0 }
.chip{
  background:var(--bg2); border:1px solid var(--line); border-radius:8px;
  padding:14px 16px; min-width:150px; flex:1;
}
.chip-tib{ font-size:34px; color:var(--accent); display:block; line-height:1.4 }
.chip-w{ font-size:14px; font-family:'Inter',sans-serif; color:var(--dim); display:block }
.chip-ex{ font-size:15px; color:var(--dim); display:block; margin-top:7px;
          border-top:1px solid var(--line); padding-top:7px }
.chip-ex small{ color:var(--dim2) }

/* ---- suffix table ---- */
.sufftable{ width:100%; border-collapse:collapse; margin:14px 0; font-size:15px }
.sufftable th{
  text-align:left; padding:9px 10px; border-bottom:2px solid var(--line);
  font-family:'Inter',sans-serif; font-size:13px; text-transform:uppercase;
  letter-spacing:.5px; color:var(--dim2); font-weight:500;
}
.sufftable td{ padding:10px; border-bottom:1px solid var(--line); vertical-align:top }
.st-tib{ font-size:26px; color:var(--accent) }
.st-w{ font-family:'Inter',sans-serif; color:var(--dim) }
.st-bend{ color:var(--accent) }
.sufftable small{ color:var(--dim2) }

/* ---- subscripts ---- */
.sub{ background:var(--bg2); border:1px solid var(--line); border-radius:8px;
      padding:16px 20px; margin:12px 0 }
.sub-head{ display:flex; gap:16px; align-items:center }
.sub-tib{ font-size:40px; color:var(--accent) }
.sub-att{ font-size:15px; color:var(--dim); margin-top:3px }
.sub-eff{ font-size:16px; margin:10px 0 6px }
.sub-ex{ font-size:15px; color:var(--dim); border-top:1px solid var(--line); padding-top:8px }

/* ---- worked readings ---- */
.reading{ margin:10px 0 }
.r-head{
  width:100%; display:flex; align-items:center; gap:16px; text-align:left;
  background:var(--bg2); border:1px solid var(--line); border-radius:8px;
  padding:13px 18px; cursor:pointer; color:var(--fg); font-family:inherit;
}
.r-head:hover{ border-color:var(--accent) }
.r-head.open{ border-color:var(--accent); border-bottom-left-radius:0; border-bottom-right-radius:0 }
.r-tib{ font-size:30px; min-width:120px }
.r-meta{ flex:1; font-size:16px }
.r-gloss{ display:block; color:var(--dim); font-size:15px }
.r-caret{ color:var(--dim2); transition:transform .15s }
.r-head.open .r-caret{ transform:rotate(180deg) }
.r-body{ display:none }
.r-body.show{
  display:block; background:var(--bg3); border:1px solid var(--accent); border-top:none;
  border-radius:0 0 8px 8px; padding:16px 18px;
}
.r-parts{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:12px }
.r-part{
  background:var(--bg2); border:1px solid var(--line); border-radius:6px;
  padding:9px 12px; text-align:center; min-width:104px; flex:1;
}
.r-part.is-root{ border-color:var(--accent); background:var(--bg) }
.r-label{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.5px;
          color:var(--dim2); font-family:'Inter',sans-serif }
.r-part.is-root .r-label{ color:var(--accent) }
.r-ptib{ display:block; font-size:28px; line-height:1.6 }
.r-note{ display:block; font-size:13px; color:var(--dim); line-height:1.45 }
.r-how{ font-size:16px; border-top:1px solid var(--line); padding-top:11px }

/* ---- drill extras ---- */
.qbig{ font-size:42px; display:inline-block; vertical-align:middle; margin-left:8px; color:var(--accent) }
.qopt{ font-size:30px }
.picker{ display:flex; gap:9px; flex-wrap:wrap; margin:18px 0 }

@media (max-width:640px){
  .letters{ gap:7px }
  .letter{ min-width:76px; padding:9px 11px 7px }
  .letter .l-tib{ font-size:31px }
  .vowel{ flex-direction:column; gap:12px }
  .v-demo{ border-right:none; border-bottom:1px solid var(--line); padding:0 0 12px; min-width:0 }
  .r-tib{ min-width:0; font-size:26px }
  .sufftable{ font-size:14px }
  .sufftable td,.sufftable th{ padding:7px 6px }
}


/* ============================================================
   COLOUR & IMAGERY — prayer flags, wheel, author page
   ============================================================ */

/* The five elements, in traditional prayer-flag order:
   blue sky · white air · red fire · green water · yellow earth */
:root{
  --pf-blue:#2f6fb5; --pf-white:#e9e6df; --pf-red:#c2452f;
  --pf-green:#3f8f5f; --pf-yellow:#dfa83a;
}

/* ---- prayer flag strip ---- */
.hero{ margin:-6px 0 26px; }
.flags{
  display:flex; gap:0; height:66px; align-items:flex-start;
  overflow:hidden; position:relative;
}
.flags::before{
  content:""; position:absolute; top:3px; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 6%,var(--line) 94%,transparent);
}
.f{
  flex:1; height:52px; margin-top:4px;
  clip-path:polygon(0 0,100% 0,100% 74%,50% 100%,0 74%);
  opacity:.85; transform-origin:top center;
  animation:sway 7s ease-in-out infinite;
}
.f:nth-child(2n){   animation-delay:-.9s; height:48px }
.f:nth-child(3n){   animation-delay:-1.8s; height:55px }
.f:nth-child(5n){   animation-delay:-2.6s }
.f-b{ background:var(--pf-blue) }
.f-w{ background:var(--pf-white) }
.f-r{ background:var(--pf-red) }
.f-g{ background:var(--pf-green) }
.f-y{ background:var(--pf-yellow) }
@keyframes sway{
  0%,100%{ transform:rotate(-1.1deg) translateY(0) }
  50%    { transform:rotate(1.1deg)  translateY(2px) }
}
@media (prefers-reduced-motion:reduce){ .f{ animation:none } }

/* small inline flag divider */
.flagline{ display:flex; gap:3px; margin:30px 0; height:7px }
.flagline span{ flex:1; border-radius:2px; opacity:.8 }

/* ---- prayer wheel ---- */
.wheel-wrap{ display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  background:var(--bg2); border:1px solid var(--line); border-radius:10px;
  padding:20px 24px; margin:22px 0 }
.wheel{
  width:92px; height:92px; flex:0 0 auto; position:relative;
  border-radius:50%; border:3px solid var(--accent);
  background:
    repeating-conic-gradient(from 0deg,
      rgba(217,164,65,.20) 0deg 18deg, rgba(217,164,65,.05) 18deg 36deg);
  animation:spin 22s linear infinite;
  display:grid; place-items:center;
}
.wheel::after{
  content:"\0F60\0F7C\0F58"; /* om */
  font-family:'Noto Serif Tibetan','Jomolhari',serif;
  font-size:27px; color:var(--accent); line-height:1;
}
.wheel::before{
  content:""; position:absolute; inset:9px; border-radius:50%;
  border:1px dashed rgba(217,164,65,.45);
}
@keyframes spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .wheel{ animation:none } }
.wheel-text{ flex:1; min-width:220px }
.wheel-text p{ margin:0; font-size:16px; color:var(--dim) }
.wheel-text strong{ color:var(--fg) }

/* ---- images ---- */
figure.plate{ margin:24px 0; text-align:center }
figure.plate img{
  max-width:100%; height:auto; border-radius:8px;
  border:1px solid var(--line); box-shadow:0 6px 22px rgba(0,0,0,.45);
}
figure.plate figcaption, .portrait figcaption{
  font-size:14.5px; color:var(--dim); margin-top:10px; line-height:1.55;
}
.credit{ display:block; color:var(--dim2); font-size:13px; margin-top:4px }
.disclaim{ display:block; color:var(--dim2); font-size:13px; margin-top:6px; font-style:italic }

/* ---- author page ---- */
.bio-top{ display:flex; gap:26px; flex-wrap:wrap; align-items:flex-start; margin:20px 0 10px }
.portrait{ flex:0 0 270px; margin:0 }
.portrait img{
  width:100%; height:auto; border-radius:8px; border:1px solid var(--line);
  box-shadow:0 6px 22px rgba(0,0,0,.5); filter:sepia(.18) contrast(1.04);
}
.bio-facts{ flex:1; min-width:260px; background:var(--bg2);
  border:1px solid var(--line); border-radius:10px; padding:18px 22px }
.bio-facts h3{ margin:0 0 10px; font-size:17px; color:var(--accent) }
dl.facts{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:7px 14px; font-size:15.5px }
dl.facts dt{ color:var(--dim2); font-family:'Inter',sans-serif; font-size:13px;
  text-transform:uppercase; letter-spacing:.4px; padding-top:3px }
dl.facts dd{ margin:0 }

/* lineage chain */
.lineage{ margin:18px 0; display:flex; flex-direction:column; align-items:stretch; gap:0 }
.ln{ background:var(--bg2); border:1px solid var(--line); border-radius:8px;
  padding:11px 18px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap }
.ln-n{ font-weight:600 }
.ln-d{ color:var(--dim); font-size:15px }
.ln-here{ border-color:var(--accent); background:var(--bg3) }
.ln-here .ln-n{ color:var(--accent) }
.ln-arrow{ text-align:center; color:var(--dim2); font-size:17px; line-height:1.5 }

/* pull quote */
.pullquote{
  border-left:3px solid var(--accent); background:var(--bg2);
  padding:16px 22px; margin:20px 0; border-radius:0 8px 8px 0;
  color:var(--dim); font-size:16px;
}
.pullquote p{ font-size:19px; font-style:italic; color:var(--fg); margin:9px 0 0; line-height:1.6 }

/* the three laughs */
.laughs{ display:flex; gap:14px; flex-wrap:wrap; margin:18px 0 }
.laugh{ flex:1; min-width:215px; background:var(--bg2); border:1px solid var(--line);
  border-top:2px solid var(--accent); border-radius:0 0 8px 8px; padding:15px 18px }
.laugh-n{ display:block; font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.6px;
  text-transform:uppercase; color:var(--accent); margin-bottom:6px }
.laugh p{ margin:0; font-size:16px }

/* call-out to the verses */
.verse-call{
  text-align:center; background:var(--bg2); border:1px solid var(--line);
  border-radius:10px; padding:26px 22px; margin:26px 0;
}
.vc-tib{ font-size:25px; color:var(--accent); margin:0 0 8px }
.vc-en{ color:var(--dim); font-style:italic; margin:0 0 16px }

@media (max-width:640px){
  .portrait{ flex:1 1 100% }
  .flags{ height:52px } .f{ height:42px }
  .laughs{ flex-direction:column }
  dl.facts{ grid-template-columns:1fr; gap:2px 0 }
  dl.facts dd{ margin-bottom:8px }
}