:root{--tessera:#E4DACA;--stone:#F1EBDD;--stone-2:#F8F4EA;--ink:#2E2120;--ink-soft:#57453F;
  --ink-mute:#897566;--ink-faint:#B4A491;--teal:#2F6265;--hot:#7A3B2E;--gold:#8F6B3C;
  --rule:rgba(46,33,32,.17);--rule-faint:rgba(46,33,32,.075);--grout:rgba(46,33,32,.022);--tempo:.2s}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --tessera:#1B1916;--stone:#221F1A;--stone-2:#2B2721;--ink:#EAE1CF;--ink-soft:#C7B8A0;
  --ink-mute:#95826C;--ink-faint:#6E5F4C;--teal:#7DB2B3;--hot:#C87257;--gold:#C09A63;
  --rule:rgba(192,154,99,.22);--rule-faint:rgba(192,154,99,.10);--grout:rgba(192,154,99,.028)}}
*{box-sizing:border-box}
body{margin:0;background:var(--tessera);color:var(--ink);
  background-image:repeating-linear-gradient(0deg,transparent 0 25px,var(--grout) 25px 26px),
    repeating-linear-gradient(90deg,transparent 0 25px,var(--grout) 25px 26px);
  font-family:"Source Serif 4",Georgia,serif;font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.blad{width:min(880px,100%);margin:0 auto;padding:0 28px}
.bar{display:flex;align-items:center;gap:20px;height:58px;padding:0 28px;
  background:color-mix(in srgb,var(--tessera) 90%,transparent);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:20}
.bar .mark{font-size:12.5px;letter-spacing:.24em;text-transform:uppercase}
.bar .mark b{color:var(--hot);font-weight:600}
.bar .spacer{flex:1}
.barlink{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--teal)}
.mono{font-family:"Geist Mono",monospace;font-variant-numeric:tabular-nums}
/* Labellaag. opsz 9 omdat Fraunces per optische grootte anders getekend is en de
   144-tekening zijn haarlijnen verliest onder ongeveer 14px. */
.bar .mark,.eyebrow,.sechead{font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-variation-settings:"opsz" 9,"wght" 600,"SOFT" 22,"WONK" 1;
  text-transform:uppercase}
.person{padding:56px 0 40px}
.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--hot);margin:0 0 14px}
h1{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-weight:640;font-variation-settings:"SOFT" 22,"WONK" 1;font-size:clamp(34px,6vw,58px);letter-spacing:-.008em;
  line-height:1.05;margin:0 0 18px;text-wrap:balance}
.lead{font-size:20px;color:var(--ink);margin:0 0 8px;max-width:56ch}
.intro-citaat{margin:10px 0 12px;padding:0 0 0 14px;border-left:2px solid var(--rule,#c9b89a);max-width:56ch}
.intro-citaat p{margin:0;font-style:italic}
.intro-citaat cite{display:block;margin-top:4px;font:12px/1.4 "Geist Mono",monospace;font-style:normal;opacity:.75}
.sub{color:var(--ink-mute);margin:0;font-size:16px}
.figures{display:flex;flex-wrap:wrap;margin:30px 0 0;border-top:1px solid var(--rule-faint);
  border-bottom:1px solid var(--rule-faint)}
.fig{flex:1 1 110px;padding:15px 16px 13px;text-align:center;border-right:1px solid var(--rule-faint)}
.fig:last-child{border-right:0}
.fig b{display:block;font-family:"Geist Mono",monospace;font-size:23px;color:var(--teal);font-weight:500}
.fig span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
.sechead{font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-mute);margin:46px 0 14px}
.books{display:flex;gap:10px;flex-wrap:wrap}
.book{display:inline-block;padding:14px 22px;font-size:12px}
.book:hover{transform:translateY(-1px)}

/* Een regel per boek: titel links, twee winkels rechts. Zo staat er bij de knop WELK
   boek je koopt, want een knop zonder titel is een gok voor de bezoeker. */
.booklist{flex-direction:column;gap:0}
.bookrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 0;
  border-top:1px solid var(--rule-faint)}
.bookrow:last-child{border-bottom:1px solid var(--rule-faint)}
.bookrow-t{flex:1 1 240px;font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-weight:640;font-variation-settings:"SOFT" 22,"WONK" 1;font-size:19px;line-height:1.3;letter-spacing:-.004em}
.bookrow-b{display:flex;gap:8px;flex:0 0 auto}
.bookrow .book{padding:9px 16px;font-size:14px}
.bookfoot{margin-top:12px;font-size:12px;color:var(--dim)}
.web{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.together{padding:14px 16px;font-size:15px;line-height:1.55;flex:1 1 auto;margin:0}

.together .cohort-person{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.together .cohort-person:hover{color:var(--hot)}
.together .mono{font-size:11px;color:var(--ink-faint)}
.eps{list-style:none;margin:0;padding:0}
.ep{display:grid;grid-template-columns:52px minmax(0,1fr) 54px;gap:14px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--rule-faint)}
.ep-y,.ep-d{font-family:"Geist Mono",monospace;font-size:11.5px;color:var(--ink-mute);
  font-variant-numeric:tabular-nums}
.ep-d{text-align:right}
.ep-t a{font-size:16.5px}
.ep-t a:hover{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.ep-s{display:block;font-size:13px;color:var(--ink-mute)}
.ep-s a{color:var(--ink-mute);text-decoration:none;border-bottom:1px solid transparent}
.ep-s a:hover{color:var(--crimson);border-bottom-color:var(--crimson)}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;text-decoration:none;font-size:14px}
.pill:hover{transform:translateY(-1px)}
.pill .mono{font-size:11px;opacity:.6}
/* Raakvlakken van 44px op smal scherm; onder die maat mis je met een duim.
   Gemeten 2026-09-05 op 375px, waar de knoppen 27 tot 33px hoog waren. */
@media(max-width:820px){
  .pill,.book{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .bookrow{gap:10px}
  .bookrow-b{width:100%}
  .bookrow-b .book{flex:1 1 auto}
}
.crumbs{font-size:13px;color:var(--ink-mute);margin:20px 0 6px;font-family:"Geist Mono",monospace}
.crumbs a{color:var(--ink-mute);text-decoration:none}
.crumbs a:hover{color:var(--crimson)}
.crumbs span{opacity:.5;padding:0 3px}
.more{color:var(--ink-faint);font-size:12px;margin-top:14px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.pcard{background:var(--stone);padding:16px 16px 14px;display:flex;flex-direction:column;gap:3px;
  transition:background var(--tempo)}
.pcard:hover{background:var(--stone-2)}
.pcard.has-thumb{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center}
.pcard.has-thumb .thumb{grid-row:1 / span 3;width:64px;height:64px;border-radius:12px;object-fit:contain;padding:2px;
  border:1px solid var(--rule);background:#efe4cc}
.pn{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-weight:640;font-variation-settings:"SOFT" 22,"WONK" 1;font-size:16px;letter-spacing:-.004em}
.pm{font-size:13px;color:var(--ink-mute)}
.pc{font-size:11px;color:var(--teal)}
.foot{margin-top:64px;padding:22px 0 60px;border-top:1px solid var(--rule);color:var(--ink-mute);
  font-size:14px;max-width:66ch}
.foot a{color:var(--teal)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}