:root{
  --paper:#E7EAE2; --paper-deep:#DCE0D6; --paper-card:#EEF0E9;
  --ink:#20231F; --ink-soft:#5A5E54; --ink-faint:#9AA092;
  --seal:#B23B2C; --seal-deep:#8E2C20; --indigo:#3C4A63;
  --line:rgba(32,35,31,.14); --line-soft:rgba(32,35,31,.08);
  --serif:'Spectral',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
  --han:'Noto Serif SC','Songti SC',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}   /* display-regels hieronder mogen het hidden-attribuut nooit overrulen */
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 18% 22%,rgba(255,255,255,.35),transparent 38%),radial-gradient(circle at 82% 78%,rgba(120,130,110,.10),transparent 42%);
  mix-blend-mode:multiply;opacity:.7}
.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:clamp(20px,4vw,52px) clamp(18px,4vw,48px) 80px}
a{color:var(--seal-deep);text-decoration:none;border-bottom:1px solid var(--line)}
a:hover{border-color:var(--seal)}

header{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:6px}
.brand{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.brand .han{font-family:var(--han);font-weight:700;font-size:clamp(34px,5.5vw,52px);letter-spacing:.04em;line-height:1}
.brand .sub{font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft)}
.brand .sub em{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink);display:block;margin-top:4px}

/* ---- navigatie over 81 hoofdstukken ---- */
nav{display:flex;gap:8px;align-items:stretch}
.navbtn{font-family:var(--serif);font-size:24px;line-height:1;background:transparent;border:1px solid var(--line);color:var(--ink-soft);width:42px;border-radius:2px;cursor:pointer;transition:.18s}
.navbtn:hover{border-color:var(--ink-soft);color:var(--ink);background:rgba(255,255,255,.4)}
.navbtn:disabled{opacity:.3;cursor:default}
.navpick{display:flex;align-items:center;gap:11px;background:transparent;border:1px solid var(--line);border-radius:2px;padding:6px 16px;cursor:pointer;transition:.18s}
.navpick:hover{border-color:var(--ink-soft);background:rgba(255,255,255,.4)}
.navpick-han{font-family:var(--han);font-size:24px;line-height:1;color:var(--ink)}
.navpick-lbl{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);text-align:left}
.navpick-lbl b{color:var(--ink);font-weight:600}

.grid-pop{position:absolute;right:clamp(18px,4vw,48px);z-index:40;margin-top:8px;background:var(--paper-card);border:1px solid var(--ink);border-radius:4px;box-shadow:0 22px 50px -22px rgba(32,35,31,.55);padding:16px 18px;max-width:min(560px,92vw)}
.grid-head{font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;margin-bottom:12px}
.grid81{display:grid;grid-template-columns:repeat(9,1fr);gap:5px}
@media(max-width:560px){.grid81{grid-template-columns:repeat(7,1fr)}}
.gcell{position:relative;font-family:var(--han);font-size:15px;line-height:1;background:transparent;border:1px solid var(--line);color:var(--ink-soft);aspect-ratio:1;min-width:34px;border-radius:2px;cursor:pointer;transition:.14s;display:flex;align-items:center;justify-content:center}
.gcell:hover{border-color:var(--ink-soft);color:var(--ink);background:rgba(255,255,255,.5)}
.gcell[aria-current="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.gcell .cn{position:absolute;bottom:1px;right:2px;font-family:var(--sans);font-size:7.5px;color:var(--ink-faint);letter-spacing:0}
.gcell[aria-current="true"] .cn{color:rgba(255,255,255,.55)}
.gcell.has-work::before{content:"";position:absolute;top:3px;left:3px;width:5px;height:5px;border:1px solid var(--seal);border-radius:1px}
.gcell[aria-current="true"].has-work::before{border-color:var(--paper)}

.hint{font-style:italic;color:var(--ink-soft);max-width:70ch;margin:26px 0 4px;font-size:16px}
.hint b{font-style:normal;font-weight:500;color:var(--ink);border-bottom:1px dotted var(--ink-faint)}

.langbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.langbar-lbl{font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.seg button{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:transparent;border:0;border-left:1px solid var(--line);color:var(--ink-soft);padding:6px 14px;cursor:pointer;transition:.15s}
.seg button:first-child{border-left:0}
.seg button:hover{background:rgba(255,255,255,.45);color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.seg button:focus-visible{outline:2px solid var(--seal);outline-offset:-2px}
.langbar-note{font-style:italic;color:var(--ink-faint);font-size:13px}
.workbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.workbar-lbl{font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
.workbar .txtbtn{margin:0}
.workbar-note{font-style:italic;color:var(--ink-faint);font-size:12px}
#importChoice{display:inline-flex;align-items:center;gap:10px}
.acct-forms{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.acct-input{background:var(--paper-card);border:1px solid var(--line);border-radius:3px;padding:5px 9px;font-family:var(--serif);font-size:13px;color:var(--ink);width:15ch}
.acct-input:focus{outline:none;border-color:var(--seal)}
.acct-input::placeholder{font-style:italic;color:var(--ink-faint)}

.panel .lead{font-style:italic;color:var(--ink-soft);font-size:13.5px;line-height:1.45;margin:6px 0 0}

/* één grid: links (lezing) en rechts (composer) delen per regel dezelfde rij,
   zodat regel N links exact uitlijnt met composer-rij N rechts. */
.stage{display:grid;grid-template-columns:1.35fr .95fr;column-gap:clamp(28px,4vw,60px);row-gap:0;margin-top:22px;align-items:stretch}
.read,.panel,#verse,#readout{display:contents}
.verse-head,.line,.verse-foot{grid-column:1}
.panel-head,.linegroup,.panel-foot{grid-column:2}
.verse-head,.panel-head{grid-row:1}
.line,.linegroup,.verse-foot,.panel-foot{grid-row:var(--row)}
/* scheidingslijn onder elke band — loopt door de kolom-gap het paneel in */
.verse-head,.panel-head,.line,.linegroup{border-bottom:1px solid var(--line)}
/* rechterkolom = doorlopende getinte werkruimte */
.panel-head,.linegroup,.panel-foot{background:var(--paper-deep);padding-left:clamp(14px,1.6vw,22px);padding-right:clamp(14px,1.6vw,22px)}
.panel-head{border-top-left-radius:3px;border-top-right-radius:3px}
.panel-foot{border-bottom-left-radius:3px;border-bottom-right-radius:3px}

.verse-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:16px}
.verse-num{font-family:var(--han);font-size:15px;color:var(--seal);border:1px solid var(--seal);border-radius:2px;padding:3px 7px;line-height:1}
.verse-title{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.verse-tag{font-family:var(--sans);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--seal);border:1px solid var(--seal);border-radius:2px;padding:2px 6px;line-height:1.4}
.verse{display:contents}
.line{display:flex;flex-wrap:wrap;align-content:flex-start;gap:clamp(3px,.6vw,8px);padding:4px 4px 14px}
.gz{position:relative;font-family:var(--han);font-weight:400;font-size:clamp(38px,6.4vw,60px);line-height:1.18;color:var(--ink);background:none;border:0;padding:2px 4px 12px;cursor:pointer;border-radius:3px;transition:transform .16s,background .16s,color .16s}
.gz:hover{background:rgba(255,255,255,.42);transform:translateY(-2px)}
.gz:focus-visible{outline:2px solid var(--seal);outline-offset:1px}
.gz::after{content:"";position:absolute;left:6px;right:6px;bottom:7px;height:2px;background:repeating-linear-gradient(90deg,var(--ink-faint) 0 3px,transparent 3px 6px);opacity:.55}
.gz.chosen::after{background:var(--seal);opacity:.9}
.seal-dot{position:absolute;top:3px;right:0;width:11px;height:11px;border:1.5px solid var(--seal);border-radius:2px;opacity:0;transform:scale(.4);transition:.22s}
.gz.chosen .seal-dot{opacity:1;transform:scale(1)}
.gz.open{background:rgba(255,255,255,.6)}

.verse-foot{padding-top:18px}
.verse-note{margin-top:18px;font-size:14.5px;color:var(--ink-soft);max-width:62ch}
.verse-note:empty{display:none}
.verse-note .k{font-family:var(--han);color:var(--ink)}
.verse-tools{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.txtbtn{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:none;border:0;color:var(--ink-faint);cursor:pointer;border-bottom:1px solid transparent;padding-bottom:2px}
.txtbtn:hover{color:var(--seal);border-color:var(--seal)}
.txtbtn:focus-visible{outline:2px solid var(--seal);outline-offset:3px}

.panel-head{padding-top:clamp(16px,2vw,22px);padding-bottom:14px}
.panel h2{font-family:var(--sans);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;margin-bottom:4px}
.panel-foot{padding-top:18px;padding-bottom:clamp(18px,2vw,24px)}
.progress{height:2px;background:var(--line);border-radius:2px;margin-top:10px;overflow:hidden}
.progress > i{display:block;height:100%;width:0;background:var(--seal);transition:width .35s}

.linegroup{padding-top:14px;padding-bottom:14px}
.rline{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;margin-bottom:7px}
.linetrans{display:block;width:100%;background:var(--paper-card);border:1px solid var(--line);border-radius:3px;padding:6px 10px;font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--ink);resize:none;overflow:hidden;min-height:32px;transition:border-color .15s}
.linetrans:focus{outline:none;border-color:var(--seal)}
.linetrans::placeholder{font-style:italic;color:var(--ink-faint)}
.linegroup.done .linetrans{border-left:2px solid var(--seal)}
.gloss{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;background:none;border:0;padding:0}
.gloss .src{font-family:var(--han);font-size:15px;color:var(--ink-faint);line-height:1}
.gloss .val{font-family:var(--serif);font-size:16.5px;color:var(--ink);line-height:1.15;text-align:center}
.gloss.empty .val{color:var(--ink-faint);font-style:italic;border-bottom:1px dotted var(--ink-faint)}
.gloss.empty .src{color:var(--ink)}
.gloss:hover .val{color:var(--seal)}
.gloss:focus-visible{outline:2px solid var(--seal);outline-offset:3px;border-radius:2px}

.mine{margin-top:0}
.mine label{font-family:var(--sans);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;display:block;margin-bottom:10px}
.mine textarea{width:100%;min-height:90px;resize:vertical;background:var(--paper-card);border:1px solid var(--line);border-radius:3px;padding:12px 14px;color:var(--ink);font-family:var(--serif);font-size:16px;line-height:1.55}
.mine textarea:focus{outline:none;border-color:var(--seal)}
.mine textarea::placeholder{color:var(--ink-faint);font-style:italic}
.saved{font-family:var(--sans);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-top:10px;min-height:14px}

/* ---- leesweergave: onder elkaar (gestapeld) vs naast elkaar (banden) ---- */
.langbar.viewbar{margin-top:10px}
/* Gestapeld: per regel de Chinese tekst met zijn composer-rij eronder, in één kolom,
   via --srow (in JS gezet). Geldt bij override 'stack' (elke breedte) én bij 'auto' op
   smal scherm (media query onderaan). 'cols' en 'auto'-breed houden de banden-grid. */
.stage[data-view="stack"]{grid-template-columns:1fr}
.stage[data-view="stack"] .verse-head{grid-row:1;grid-column:1}
.stage[data-view="stack"] .panel-head{grid-row:2;grid-column:1}
.stage[data-view="stack"] .line,
.stage[data-view="stack"] .linegroup,
.stage[data-view="stack"] .verse-foot,
.stage[data-view="stack"] .panel-foot{grid-column:1;grid-row:var(--srow)}
.stage[data-view="stack"] .panel-head,
.stage[data-view="stack"] .panel-foot{border-radius:0}
/* Interlineair per karakter (taak 1284): gestapeld valt de losse grote regel weg —
   de gloss-kolom ís de regel: groot karakter met de gekozen betekenis er gecentreerd
   direct onder, de eigen zin gecentreerd eronder, de band gecentreerd in een breed venster. */
.stage[data-view="stack"] .line{display:none}
@media(max-width:860px){
  .stage[data-view="auto"]{grid-template-columns:1fr}
  .stage[data-view="auto"] .verse-head{grid-row:1;grid-column:1}
  .stage[data-view="auto"] .panel-head{grid-row:2;grid-column:1}
  .stage[data-view="auto"] .line,
  .stage[data-view="auto"] .linegroup,
  .stage[data-view="auto"] .verse-foot,
  .stage[data-view="auto"] .panel-foot{grid-column:1;grid-row:var(--srow)}
  .stage[data-view="auto"] .panel-head,
  .stage[data-view="auto"] .panel-foot{border-radius:0}
  .stage[data-view="auto"] .line{display:none}
}
/* de interlineair zelf — dezelfde regels voor 'stack' (elke breedte) en 'auto'-smal;
   de .gz-stijl (grootte + stippellijn + zegelrood bij keuze) verhuist naar de glyph */
.stage[data-view="stack"] .rline{align-items:flex-start;justify-content:center;gap:clamp(6px,1vw,14px) clamp(10px,1.6vw,22px)}
.stage[data-view="stack"] .linetrans{max-width:72ch;margin:0 auto;text-align:center}
.stage[data-view="stack"] .gloss{max-width:14ch}
.stage[data-view="stack"] .gloss .src{font-size:clamp(34px,5.6vw,52px);color:var(--ink);line-height:1.18;position:relative;padding:2px 4px 12px}
.stage[data-view="stack"] .gloss .src::after{content:"";position:absolute;left:6px;right:6px;bottom:7px;height:2px;background:repeating-linear-gradient(90deg,var(--ink-faint) 0 3px,transparent 3px 6px);opacity:.55}
.stage[data-view="stack"] .gloss:not(.empty) .src::after{background:var(--seal);opacity:.9}
.stage[data-view="stack"] .gloss .val{font-size:14.5px;color:var(--ink-soft)}
.stage[data-view="stack"] .gloss.mineval .val,.stage[data-view="stack"] .gloss:hover .val{color:var(--seal)}
.stage[data-view="stack"] .gloss.empty .src{color:var(--ink)}
.stage[data-view="stack"] .gloss:hover .src,.stage[data-view="stack"] .gloss.open .src{background:rgba(255,255,255,.5);border-radius:3px}
@media(max-width:860px){
  .stage[data-view="auto"] .rline{align-items:flex-start;justify-content:center;gap:clamp(6px,1vw,14px) clamp(10px,1.6vw,22px)}
  .stage[data-view="auto"] .linetrans{max-width:72ch;margin:0 auto;text-align:center}
  .stage[data-view="auto"] .gloss{max-width:14ch}
  .stage[data-view="auto"] .gloss .src{font-size:clamp(34px,5.6vw,52px);color:var(--ink);line-height:1.18;position:relative;padding:2px 4px 12px}
  .stage[data-view="auto"] .gloss .src::after{content:"";position:absolute;left:6px;right:6px;bottom:7px;height:2px;background:repeating-linear-gradient(90deg,var(--ink-faint) 0 3px,transparent 3px 6px);opacity:.55}
  .stage[data-view="auto"] .gloss:not(.empty) .src::after{background:var(--seal);opacity:.9}
  .stage[data-view="auto"] .gloss .val{font-size:14.5px;color:var(--ink-soft)}
  .stage[data-view="auto"] .gloss.mineval .val,.stage[data-view="auto"] .gloss:hover .val{color:var(--seal)}
  .stage[data-view="auto"] .gloss.empty .src{color:var(--ink)}
  .stage[data-view="auto"] .gloss:hover .src,.stage[data-view="auto"] .gloss.open .src{background:rgba(255,255,255,.5);border-radius:3px}
}

/* compare band */
.compare{margin-top:46px;border-top:1px solid var(--line);padding-top:30px}
.compare > .chead{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}
.compare > .cintro{font-style:italic;color:var(--ink-soft);font-size:15px;max-width:74ch;margin-bottom:24px}
.compare > .cintro b{font-style:normal;font-weight:500;color:var(--ink)}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
@media(max-width:760px){.cgrid{grid-template-columns:1fr;gap:30px}}
.thead{margin-bottom:8px;padding-left:54px;position:relative}
.thead::before{content:attr(data-flag);position:absolute;left:0;top:5px;font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;border:1px solid;border-radius:2px;padding:2px 6px}
.tcard.en .thead::before{content:"EN";color:var(--seal);border-color:var(--seal)}
.tcard.nl .thead::before{content:"NL";color:var(--indigo);border-color:var(--indigo)}
.vpick{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);padding:2px 24px 4px 2px;cursor:pointer;width:100%;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%239AA092'/></svg>");background-repeat:no-repeat;background-position:right 4px center}
.vpick:hover{border-color:var(--ink-soft)}
.vpick:focus{outline:none;border-color:var(--seal)}
.tcard .meta{font-family:var(--sans);font-size:10.5px;color:var(--ink-faint);margin-bottom:16px;line-height:1.5}
.tcard p{font-size:16px;line-height:1.6;margin-bottom:11px}
.tcard p:last-child{margin-bottom:0}
.tcard .verseform{font-style:italic;color:var(--ink-soft);padding-left:14px;border-left:2px solid var(--line)}
.tcard .num{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--ink-faint);margin-right:7px}
.paren{color:var(--ink-faint)}

/* popover — eigen werkruimte + referentie */
.pop{position:absolute;z-index:50;background:var(--paper-card);border:1px solid var(--ink);border-radius:4px;box-shadow:0 18px 40px -18px rgba(32,35,31,.55);min-width:250px;max-width:320px;max-height:min(78vh,560px);overflow-y:auto;opacity:0;transform:translateY(6px) scale(.98);pointer-events:none;transition:.16s}
.pop.show{opacity:1;transform:none;pointer-events:auto}
.pop-zone{padding:6px 0}
.zone-h{font-family:var(--sans);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;padding:8px 16px 6px}
.mine-zone{background:rgba(178,59,44,.05);border-bottom:1px solid var(--line)}
.mine-zone .zone-h{color:var(--seal)}
.zone-empty{font-style:italic;color:var(--ink-faint);font-size:13px;padding:2px 16px 8px}
.opt-lab{flex:1;text-align:left;background:none;border:0;padding:0;cursor:pointer;font-family:var(--serif);font-size:15px;color:var(--ink);line-height:1.3}
.refopt .opt-lab,.mineopt .opt-lab{cursor:pointer}
button.opt-lab:hover{color:var(--seal)}
.opt{display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px;border-bottom:1px solid var(--line-soft);transition:.12s}
.opt:hover{background:rgba(178,59,44,.06)}
.opt.active{background:rgba(178,59,44,.10)}
.opt.active .opt-lab{color:var(--seal);font-weight:500}
.mineopt.active .opt-lab::before{content:"\2759  ";color:var(--seal)}
.opt.is-hidden{opacity:.5}
.opt.is-hidden .opt-lab{text-decoration:line-through;cursor:default}
.iconbtn{flex:none;background:none;border:0;color:var(--ink-faint);font-size:14px;line-height:1;cursor:pointer;width:20px;height:20px;border-radius:2px;display:flex;align-items:center;justify-content:center;transition:.12s}
.iconbtn:hover{color:var(--seal);background:rgba(178,59,44,.10)}
.iconbtn:focus-visible{outline:2px solid var(--seal);outline-offset:1px}
.mine-add{display:flex;align-items:center;gap:6px;padding:8px 14px 4px}
.mine-input{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:6px 9px;font-family:var(--serif);font-size:14px;color:var(--ink)}
.mine-input:focus{outline:none;border-color:var(--seal)}
.mineopt.editing{padding:6px 14px}
.mine-note{display:block;width:calc(100% - 28px);margin:8px 14px 6px;min-height:40px;resize:vertical;background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:7px 9px;font-family:var(--serif);font-size:13px;color:var(--ink-soft);line-height:1.4}
.mine-note:focus{outline:none;border-color:var(--seal);color:var(--ink)}
.mine-note::placeholder{font-style:italic;color:var(--ink-faint)}
.hidden-toggle{display:block;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line-soft);padding:8px 16px;font-family:var(--sans);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);cursor:pointer}
.hidden-toggle:hover{color:var(--seal)}
.gloss.mineval .val{color:var(--seal)}

/* §8 — lagen visueel onderscheiden */
.zone-py{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;color:var(--seal);font-size:12px;margin-left:8px}
.ref-zone.lay-cedict .opt-lab{font-style:italic;color:var(--ink-soft)}      /* ruwe woordenboeklaag */
.ref-zone.lay-auto .opt-lab{font-style:italic;color:var(--ink-faint)}       /* ruwe machine-NL, laagste confidence */
.ref-zone.lay-safe .opt-lab,
.ref-zone.lay-model .opt-lab{font-style:normal;color:var(--ink)}            /* doordachte NL-laag */
.mine-zone .opt-lab{font-weight:500}
.pop-head{display:flex;align-items:baseline;gap:12px;padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.pop-head .ch{font-family:var(--han);font-size:34px;line-height:1}
.pop-head .py{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--seal)}
.pop-head .meta{font-family:var(--sans);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-left:auto;text-align:right;line-height:1.5}
.pop-kicker{font-family:var(--sans);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);padding:9px 16px 2px}
.opt:last-child{border-bottom:0}
.opt-lab:focus-visible{outline:2px solid var(--seal);outline-offset:1px}
.pop-foot{font-family:var(--sans);font-size:9.5px;letter-spacing:.04em;color:var(--ink-faint);padding:9px 16px 10px;line-height:1.5}

footer{margin-top:54px;padding-top:20px;border-top:1px solid var(--line);font-family:var(--sans);font-size:11px;letter-spacing:.02em;color:var(--ink-faint);line-height:1.7;max-width:84ch}
footer p{margin-bottom:12px}
footer b{color:var(--ink-soft);font-weight:600}
footer a{color:var(--ink-soft);border-color:var(--line-soft)}
footer a:hover{color:var(--seal)}
.colofon-note{font-style:italic}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---- site-navigatie tussen pagina's ---- */
.sitenav{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;margin-bottom:18px;font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.sitenav a{color:var(--ink-faint);border:0;padding:2px 0}
.sitenav a:hover{color:var(--seal)}
.sitenav a[aria-current="page"]{color:var(--ink);border-bottom:1px solid var(--seal)}
.sitenav .sitenav-back{display:inline-flex;align-items:center;gap:7px;color:var(--ink-soft);padding-right:20px;border-right:1px solid var(--line)}
.sitenav .sitenav-back a{color:var(--ink-soft)}
.sitenav .sitenav-back a:hover{color:var(--seal)}
.sitenav .sitenav-back .sep{color:var(--ink-faint)}
@media(max-width:560px){.sitenav .sitenav-back{border-right:0;padding-right:0}}
.sitenav .sitenav-fb{margin-left:auto;color:var(--seal-deep)}
.sitenav .sitenav-fb:hover{color:var(--seal)}
@media(max-width:560px){.sitenav .sitenav-fb{margin-left:0}}

/* ---- inhoudspagina's (colofon, thema's) ---- */
.page{max-width:82ch}
.page h1{font-family:var(--serif);font-weight:600;font-size:clamp(26px,4vw,40px);line-height:1.12;margin:8px 0 10px}
.page .page-sub{font-style:italic;color:var(--ink-soft);font-size:16px;max-width:64ch;margin-bottom:26px}
.page h2{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;margin:34px 0 12px;padding-top:18px;border-top:1px solid var(--line)}
.page p{font-size:16px;line-height:1.66;color:var(--ink);margin-bottom:14px;max-width:70ch}
.page p.muted{color:var(--ink-soft);font-size:14.5px}
.page code{font-family:var(--sans);font-size:.85em;background:var(--paper-deep);padding:1px 5px;border-radius:2px}

.tribute{background:var(--paper-deep);border:1px solid var(--line);border-left:3px solid var(--seal);border-radius:3px;padding:clamp(18px,2.6vw,28px);margin-bottom:16px}
.tribute h2{margin:0 0 6px;padding-top:0;border-top:0;color:var(--seal)}
.tribute .who{font-family:var(--serif);font-size:21px;font-weight:600;margin-bottom:8px}
.tribute .links{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--sans);font-size:12px;letter-spacing:.03em;margin-top:6px}

.srclist{list-style:none;margin:0 0 14px;padding:0}
.srclist li{padding:11px 0;border-bottom:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:3px 12px;align-items:baseline}
.srclist li:last-child{border-bottom:0}
.srclist .src-t{font-family:var(--serif);font-size:16px;color:var(--ink);font-weight:500}
.srclist .src-m{font-family:var(--sans);font-size:11px;color:var(--ink-faint);letter-spacing:.03em}
.srclist a{margin-left:auto;font-family:var(--sans);font-size:11.5px;white-space:nowrap}

/* ---- thema's & podcasts ---- */
.suggestion{font-style:italic;color:var(--ink-soft);font-size:14px;background:rgba(178,59,44,.05);border-left:2px solid var(--line);padding:9px 13px;margin:6px 0 22px;max-width:72ch}
.suggestion b{font-style:normal;color:var(--seal)}
.eplist{display:flex;flex-direction:column;gap:18px}
.ep{background:var(--paper-card);border:1px solid var(--line);border-radius:3px;padding:clamp(15px,2vw,22px)}
.ep-h{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:6px}
.ep-n{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);border:1px solid var(--line);border-radius:2px;padding:2px 7px}
.ep-t{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink)}
.ep audio{width:100%;margin:8px 0 10px;height:40px}
.ep .chapters{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.ep .chapters .lbl{font-family:var(--sans);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-right:2px}
.chip{font-family:var(--sans);font-size:12.5px;color:var(--seal-deep);border:1px solid var(--line);border-radius:2px;padding:3px 10px;transition:.14s}
.chip:hover{border-color:var(--seal);background:rgba(178,59,44,.06);color:var(--seal)}
.ep .note{font-style:italic;color:var(--ink-faint);font-size:13.5px}

/* ---- UI-taalschakelaar (NL/EN) in de sitenav ---- */
.sitenav .uilang{margin-left:14px}
.sitenav .uilang button{padding:3px 9px;font-size:10px;letter-spacing:.08em}
@media(max-width:560px){.sitenav .uilang{margin-left:auto}}