:root{
  /* Kalksteen: de gedeelde ondergrond van beide mozaieken. */
  --tessera:#E4DACA; --tessera-2:#D5C8B3; --stone:#F1EBDD; --stone-2:#F8F4EA;
  /* Inkt uit de voegen van het gladiatorenmozaiek. */
  --ink:#2E2120; --ink-soft:#57453F; --ink-mute:#897566; --ink-faint:#B4A491;
  /* Turkoois uit het badwater; de enige interactiekleur. */
  --teal:#2F6265; --teal-lift:#245053; --teal-soft:#7DABAC;
  /* Ossenbloed uit het gladiatorenmozaiek; spaarzaam, en alleen waar het brandt. */
  --hot:#7A3B2E;
  /* Oker uit de randen van beide beelden. */
  --gold:#8F6B3C; --gold-light:#C09A63;
  --rule:rgba(46,33,32,.17); --rule-faint:rgba(46,33,32,.075);
  --grout:rgba(46,33,32,.022);
  --lift:0 1px 0 rgba(255,255,255,.55),0 12px 30px -20px rgba(46,33,32,.55);

  --canvas:var(--tessera); --surface:var(--stone); --surface-2:var(--stone-2);
  --parchment-2:var(--tessera-2); --vellum:var(--stone);
  --text:var(--ink); --muted:var(--ink-soft); --dim:var(--ink-mute);
  --crimson:var(--teal); --crimson-deep:var(--teal-lift);
  --gilt:var(--gold); --gilt-deep:var(--gold);
  --column:var(--tessera-2);
  --blad:1240px; --tempo:.2s;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --tessera:#1B1916; --tessera-2:#262219; --stone:#221F1A; --stone-2:#2B2721;
  --ink:#EAE1CF; --ink-soft:#C7B8A0; --ink-mute:#95826C; --ink-faint:#6E5F4C;
  --teal:#7DB2B3; --teal-lift:#9ACACB; --teal-soft:#4E8184;
  --hot:#C87257;
  --gold:#C09A63; --gold-light:#DBBB84;
  --rule:rgba(192,154,99,.22); --rule-faint:rgba(192,154,99,.10);
  --grout:rgba(192,154,99,.028);
  --lift:0 1px 0 rgba(255,255,255,.04),0 16px 36px -22px #000;

  --canvas:var(--tessera); --surface:var(--stone); --surface-2:var(--stone-2);
  --parchment-2:var(--tessera-2); --vellum:var(--stone);
  --text:var(--ink); --muted:var(--ink-soft); --dim:var(--ink-mute);
  --crimson:var(--teal); --crimson-deep:var(--teal-lift);
  --gilt:var(--gold); --gilt-deep:var(--gold);
  --column:var(--tessera-2);
}}
:root[data-theme="dark"]{
  --tessera:#1B1916; --tessera-2:#262219; --stone:#221F1A; --stone-2:#2B2721;
  --ink:#EAE1CF; --ink-soft:#C7B8A0; --ink-mute:#95826C; --ink-faint:#6E5F4C;
  --teal:#7DB2B3; --teal-lift:#9ACACB; --teal-soft:#4E8184;
  --hot:#C87257;
  --gold:#C09A63; --gold-light:#DBBB84;
  --rule:rgba(192,154,99,.22); --rule-faint:rgba(192,154,99,.10);
  --grout:rgba(192,154,99,.028);
  --lift:0 1px 0 rgba(255,255,255,.04),0 16px 36px -22px #000;

  --canvas:var(--tessera); --surface:var(--stone); --surface-2:var(--stone-2);
  --parchment-2:var(--tessera-2); --vellum:var(--stone);
  --text:var(--ink); --muted:var(--ink-soft); --dim:var(--ink-mute);
  --crimson:var(--teal); --crimson-deep:var(--teal-lift);
  --gilt:var(--gold); --gilt-deep:var(--gold);
  --column:var(--tessera-2);
}
*,*::before,*::after{box-sizing:border-box}
body{
  background:var(--canvas);
  /* Een tesserae-raster van 22px met een haarfijne voeg. Twee lagen, geen beeldbestand.
     Bewust bijna onzichtbaar: het moet het papier tekenen, niet de tekst opeten. */
  background-image:
    repeating-linear-gradient(0deg,transparent 0 25px,var(--grout) 25px 26px),
    repeating-linear-gradient(90deg,transparent 0 25px,var(--grout) 25px 26px);
  color:var(--text);
  font-family:"EB Garamond",Georgia,"Times New Roman",serif;
  font-size:17.5px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.blad{width:min(var(--blad),100%);margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gilt);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:Cinzel,"Trajan Pro",Georgia,serif;font-weight:600;letter-spacing:.05em;margin:0}
.mono{font-family:"Geist Mono",ui-monospace,SFMono-Regular,monospace;font-variant-numeric:tabular-nums}

/* ---------- balk ---------- */
.bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:20px;
  height:58px;padding:0 28px;background:color-mix(in srgb,var(--canvas) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--rule)}
.bar .mark{font-family:Cinzel,serif;font-weight:600;font-size:12.5px;letter-spacing:.24em;
  text-transform:uppercase;white-space:nowrap;color:var(--text)}
.bar .mark b{color:var(--crimson);font-weight:600}
.bar .spacer{flex:1}
.bar .hint{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  font-family:"Geist Mono",monospace}
.bar .hint kbd{border:1px solid var(--rule);border-bottom-width:2px;border-radius:3px;
  padding:1px 5px;background:var(--surface)}
.themetoggle{border:1px solid var(--rule);background:var(--surface);color:var(--muted);
  width:32px;height:32px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  font-size:14px;transition:var(--tempo)}
.themetoggle:hover{color:var(--crimson);border-color:var(--gilt)}

/* ---------- titelblok ---------- */
.mast{position:relative;padding:64px 0 40px;text-align:center}
.mast::before,.mast::after{content:"";position:absolute;top:52px;bottom:44px;width:10px;
  background:linear-gradient(90deg,var(--column) 0%,var(--ink-mute) 50%,var(--column) 100%);
  border-radius:2px;opacity:.55}
.mast::before{left:8px} .mast::after{right:8px}
@media(max-width:820px){.mast::before,.mast::after{display:none}}
.eyebrow{font-family:Cinzel,serif;font-size:11px;letter-spacing:.34em;color:var(--crimson);
  text-transform:uppercase;margin:0 0 18px}
h1.title{font-size:clamp(38px,7.4vw,86px);line-height:.98;letter-spacing:.02em;
  text-wrap:balance;margin:0 0 8px}
.motto{font-style:italic;color:var(--gilt-deep);font-size:clamp(15px,2vw,20px);margin:0 0 14px}
.sub{color:var(--muted);font-size:clamp(15px,1.7vw,18.5px);max-width:56ch;margin:0 auto}
.rule{height:0;border:0;border-top:1px solid var(--gilt);width:min(560px,86%);margin:32px auto 0;opacity:.75}

/* ---------- welkom ---------- */
.welcome{max-width:60ch;margin:34px auto 0;text-align:center;color:var(--muted);font-size:17px}
.welcome .salve{font-family:Cinzel,serif;color:var(--crimson);letter-spacing:.2em;
  text-transform:uppercase;font-size:12px;display:block;margin-bottom:12px}
.counter{margin-top:18px;font-family:"Geist Mono",monospace;font-size:12px;letter-spacing:.06em;
  color:var(--dim)}
.counter b{color:var(--crimson);font-weight:500}

/* ---------- cijfers ---------- */
.figures{display:flex;flex-wrap:wrap;justify-content:center;gap:0;margin:40px 0 0;
  border-top:1px solid var(--rule-faint);border-bottom:1px solid var(--rule-faint)}
.fig{flex:1 1 130px;padding:16px 18px;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:21px;color:var(--crimson);
  font-weight:500;font-variant-numeric:tabular-nums}
.fig span{font-size:11.5px;letter-spacing:.07em;color:var(--dim);text-transform:uppercase}

/* ---------- start here ---------- */
.starthere{margin:52px 0 0;padding:30px 32px;background:var(--surface);
  border:1px solid var(--rule);border-left:4px solid var(--hot);box-shadow:var(--lift);
  display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
@media(max-width:700px){.starthere{grid-template-columns:1fr;gap:16px;padding:24px}}
.starthere .badge{font-family:Cinzel,serif;font-size:10.5px;letter-spacing:.26em;
  text-transform:uppercase;color:#F6F0E4;background:var(--hot);padding:7px 12px;
  white-space:nowrap;align-self:start}

.starthere h2{font-size:26px;margin:0 0 4px}
.starthere .meta{font-family:"Geist Mono",monospace;font-size:11.5px;color:var(--dim);
  letter-spacing:.05em;margin:0 0 12px}
.starthere p{margin:0 0 16px;color:var(--muted);max-width:70ch}

/* ---------- pick one for me ---------- */
.pick{margin:44px 0 0;display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.pickbtn{display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  padding:20px 30px;border:0;cursor:pointer;font:inherit;text-align:left;
  background:var(--hot);color:#F6F0E4;
  box-shadow:0 12px 30px -18px var(--hot);
  transition:transform var(--tempo),filter var(--tempo)}

.pickbtn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.pickbtn:active{transform:translateY(0)}
.pickbtn-k{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;opacity:.8}
.pickbtn-v{font-family:Cinzel,serif;font-size:23px;letter-spacing:.04em;line-height:1.1}
.pick-note{margin:0;flex:1 1 240px;color:var(--dim);font-size:14px;max-width:44ch}

/* ---------- kopjes tussen de blokken ---------- */
.sechead{font-family:Cinzel,serif;font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);margin:52px 0 14px;font-weight:500}

/* ---------- categorieknoppen ---------- */
.formats{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.fmt{display:flex;flex-direction:column;gap:4px;align-items:flex-start;
  background:var(--surface);border:0;cursor:pointer;font:inherit;text-align:left;
  padding:24px 22px 22px;color:inherit;position:relative;
  transition:background var(--tempo),color var(--tempo)}
.fmt:hover{background:var(--surface-2)}
.fmt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--teal);transform:scaleX(0);transform-origin:left;
  transition:transform var(--tempo)}
.fmt[aria-pressed="true"]{background:var(--parchment-2)}
.fmt[aria-pressed="true"]::after{transform:scaleX(1)}
.fmt-n{font-family:"Geist Mono",monospace;font-size:30px;line-height:1;color:var(--crimson);
  font-variant-numeric:tabular-nums;font-weight:500}
.fmt-t{font-family:Cinzel,serif;font-size:18px;letter-spacing:.05em}
.fmt-s{font-size:13px;color:var(--dim)}

/* ---------- gereedschap ---------- */
.tools{position:sticky;top:58px;z-index:50;margin:44px 0 0;padding:14px 0 12px;
  background:color-mix(in srgb,var(--canvas) 92%,transparent);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule)}
.searchrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
#q{flex:1 1 260px;padding:12px 15px;font:inherit;font-size:16px;color:var(--text);
  background:var(--surface);border:1px solid var(--rule);border-radius:3px;
  transition:border-color var(--tempo),box-shadow var(--tempo)}
#q:focus{border-color:var(--gilt);box-shadow:0 0 0 3px rgba(184,146,60,.16);outline:none}
#q::placeholder{color:var(--ink-faint)}
.timerow{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:12px}
.timerow-k{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-right:4px}
.chip{font-family:"Geist Mono",monospace;font-size:12px;letter-spacing:.05em;
  padding:11px 15px;border:1px solid var(--rule);background:var(--surface);color:var(--muted);
  cursor:pointer;transition:var(--tempo);display:inline-flex;align-items:center;gap:8px}
.chip:hover{border-color:var(--gilt);color:var(--text)}
.chip[aria-pressed="true"]{background:var(--crimson);border-color:var(--crimson);color:var(--vellum)}
:root[data-theme="dark"] .chip[aria-pressed="true"],
:root:not([data-theme="light"]) .chip[aria-pressed="true"]{color:#1B1916}
.chip-n{font-size:11px;opacity:.6;font-variant-numeric:tabular-nums}
.chip-strong{padding:12px 20px;font-size:13px;border-width:2px;border-color:var(--gilt);
  color:var(--text);white-space:nowrap}
.chip-clear{border-style:dashed;margin-left:auto}

/* ---------- indeling ---------- */
.cols{display:grid;grid-template-columns:212px minmax(0,1fr);gap:52px;align-items:start;margin-top:8px}
@media(max-width:960px){.cols{grid-template-columns:1fr;gap:22px}}
.rail{position:sticky;top:136px;padding-top:34px}
@media(max-width:960px){.rail{display:none}}
.rail h3{font-family:Cinzel,serif;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin:0 0 10px}
.rail a{display:grid;grid-template-columns:26px 1fr auto;gap:8px;align-items:baseline;
  padding:6px 0;border-bottom:1px solid var(--rule-faint);color:var(--muted);
  transition:color var(--tempo)}
.rail a:hover,.rail a.on{color:var(--crimson)}
.rail a.on{font-weight:600}
.rail .n{font-family:Cinzel,serif;font-size:11px;color:var(--gilt-deep)}
.rail .t{font-size:13.5px}
.rail .c{font-family:"Geist Mono",monospace;font-size:10.5px;color:var(--ink-faint)}

/* ---------- tijdvak ---------- */
.era{margin-top:54px;scroll-margin-top:150px;
  content-visibility:auto;contain-intrinsic-size:auto 900px}
.era-head{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:baseline;
  padding-bottom:12px;border-bottom:2px solid var(--ink)}
@media(max-width:640px){.era-head{grid-template-columns:auto 1fr}.era-meta{grid-column:2}}
.era-num{font-family:Cinzel,serif;font-size:30px;color:var(--gilt);line-height:1;min-width:54px}
.era h2{font-size:23px}
.era-note{margin:5px 0 0;font-size:14px;color:var(--dim);max-width:64ch}
.era-meta{text-align:right;font-family:"Geist Mono",monospace;font-size:11px;color:var(--dim);
  white-space:nowrap}
.era-span{color:var(--crimson);display:block}

.grouplabel{font-family:Cinzel,serif;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);margin:26px 0 8px;display:flex;align-items:center;gap:12px}
.grouplabel::after{content:"";flex:1;height:1px;background:var(--rule-faint)}

/* ---------- item ---------- */
.item{border-bottom:1px solid var(--rule-faint)}
.item summary{display:grid;grid-template-columns:66px minmax(0,1fr) auto;gap:16px;
  align-items:baseline;padding:11px 0;cursor:pointer;list-style:none;
  transition:background var(--tempo)}
.item summary::-webkit-details-marker{display:none}
.item summary:hover{background:var(--surface-2)}
.item summary:hover .it{color:var(--crimson)}
.dur{font-family:"Geist Mono",monospace;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.it{font-size:16.5px;transition:color var(--tempo)}
.it .show{color:var(--dim);font-size:13.5px}
.tags{display:flex;gap:7px;align-items:center;white-space:nowrap}
.tag{font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--rule-faint);padding:2px 6px;border-radius:2px}
.tag.canon{color:var(--hot);border-color:var(--hot);letter-spacing:.1em}
.body{padding:2px 0 20px 82px;max-width:74ch}
@media(max-width:640px){.item summary{grid-template-columns:56px 1fr}.tags{grid-column:2}
  .body{padding-left:0}}
.body p{margin:0 0 14px;color:var(--muted)}
.body .noverdict{font-style:italic;color:var(--ink-faint)}
.where{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.where a{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  padding:7px 12px;border:1px solid var(--rule);color:var(--muted);border-radius:2px;
  transition:var(--tempo)}
.where a:hover{background:var(--crimson);border-color:var(--crimson);color:var(--vellum);
  transform:translateY(-1px)}
:root[data-theme="dark"] .where a:hover,
:root:not([data-theme="light"]) .where a:hover{color:#1B1916}
.where a.primary{border-color:var(--gilt);color:var(--text)}
.copy{background:transparent;cursor:pointer;font:inherit}
details[open] > summary .it{color:var(--crimson)}
/* ---------- genestelde reeks ---------- */
.run{margin:16px 0 0;border-top:1px solid var(--rule-faint);padding-top:12px}
.runlink{display:inline-block;margin-top:14px;font-family:"Geist Mono",monospace;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--teal);border-bottom:1px solid var(--teal);
  padding-bottom:2px}
.runlink:hover{color:var(--crimson-deep)}
.runlist-page{max-height:none;border-left:0;padding-left:0;margin-top:26px}
/* ---------- tijdvak- en seriekaarten op de voorpagina ---------- */
.eracards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-bottom:8px}
.eracard{display:flex;flex-direction:column;gap:4px;background:var(--surface);padding:20px 18px;
  transition:background var(--tempo)}
.eracard:hover{background:var(--surface-2)}
.eracard-n{font-family:Cinzel,serif;font-size:20px;color:var(--gold);line-height:1}
.eracard-t{font-family:Cinzel,serif;font-size:16px;letter-spacing:.03em}
.eracard-s{font-size:13px;color:var(--teal)}
.eracard-c{font-size:11px;color:var(--dim)}
.mast-sub{padding:44px 0 26px}
.title-sub{font-size:clamp(30px,5vw,58px)}
.eyebrow a{border-bottom:1px solid var(--rule)}
.run-head{cursor:pointer;list-style:none;font-family:"Geist Mono",monospace;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--teal);padding:4px 0}
.run-head::-webkit-details-marker{display:none}
.run-head::before{content:"+ ";font-weight:600}
.run[open] .run-head::before{content:"\2212 "}
.runlist{list-style:none;margin:10px 0 0;padding:0;max-height:460px;overflow-y:auto;
  content-visibility:auto;contain-intrinsic-size:auto 400px;
  border-left:2px solid var(--rule-faint);padding-left:14px}
.runrow{display:grid;grid-template-columns:38px minmax(0,1fr) 56px;gap:12px;align-items:baseline;
  padding:5px 0;border-bottom:1px solid var(--rule-faint)}
.runrow-n{font-size:11px;color:var(--ink-faint);text-align:right}
.runrow-t{font-size:14.5px;color:var(--muted)}
.runrow-t:hover{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.runrow-d{font-size:11px;color:var(--dim);text-align:right}
.runrow.hide{display:none}

.item.hide,.era.hide,.group.hide{display:none}
.item.flash > summary{background:var(--parchment-2);box-shadow:inset 3px 0 0 var(--hot)}

/* ---------- voet ---------- */
.foot{margin-top:80px;padding:26px 0 60px;border-top:1px solid var(--rule);
  font-size:13.5px;color:var(--dim);max-width:74ch}
.foot a{color:var(--crimson);text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}