@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=DM+Sans:wght@400;450;500;600&display=swap');
:root {
  --bg: #15110e;
  --surface: #1e1915;
  --surface-2: #28211c;
  --line: #3b3029;
  --text: #f0e7da;
  --muted: #b5a695;
  --faint: #86796b;
  --ember: #ee7a3c;
  --ember-soft: #f4a766;
  --ember-bg: rgba(238, 122, 60, 0.12);
  --ok: #8fc27a;
  --warn: #e6b450;
  --bad: #e0705f;
  --code-bg: #110e0b;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --radius: 12px;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ember-soft); text-underline-offset: 3px; }
a:hover { color: var(--ember); }
h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.2; font-weight: 600; letter-spacing: 0.005em; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 0 0 0.4em; }
h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); margin: 2.2em 0 0.6em; padding-top: 0.2em; }
h3 { font-size: 1.22rem; margin: 1.8em 0 0.5em; color: var(--ember-soft); }
h4 { font-size: 1.05rem; margin: 1.4em 0 0.4em; }
p, ul, ol { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 12px; z-index: 50; background: var(--surface); padding: 8px 12px; }

/* top bar */
.bar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.bar-in { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 10px 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-family: var(--serif); font-size: 1.15rem; white-space: nowrap; }
.brand svg { width: 26px; height: 26px; flex: none; }
.brand small { color: var(--faint); font-family: var(--sans); font-size: 0.8rem; }
.nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  color: var(--muted); text-decoration: none; padding: 7px 11px; border-radius: 8px;
  white-space: nowrap; font-size: 0.94rem;
}
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--ember-soft); background: var(--ember-bg); }

/* layout */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.hero { padding: 56px 0 28px; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.76rem; color: var(--ember-soft); margin: 0 0 12px; font-weight: 600; }
.lead { font-size: 1.14rem; color: var(--muted); max-width: 760px; }
.with-toc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; padding-bottom: 80px; }
.toc { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; font-size: 0.9rem; padding: 6px 0 20px; }
.toc p { margin: 0 0 8px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 600; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc ul ul { padding-left: 12px; }
.toc a { display: block; color: var(--muted); text-decoration: none; padding: 3px 0 3px 10px; border-left: 2px solid transparent; }
.toc a:hover { color: var(--text); }
.toc a.active { color: var(--ember-soft); border-left-color: var(--ember); }
.prose { max-width: 820px; min-width: 0; }
.prose > h2:first-child { margin-top: 0.4em; }
.prose table { border-collapse: collapse; width: 100%; margin: 0 0 1.4em; font-size: 0.93rem; display: block; overflow-x: auto; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.prose th { color: var(--muted); font-weight: 600; background: var(--surface); }
.prose blockquote { margin: 0 0 1.2em; padding: 10px 16px; border-left: 3px solid var(--ember); background: var(--surface); border-radius: 0 8px 8px 0; color: var(--muted); }
code { font-family: var(--mono); font-size: 0.88em; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }
pre {
  position: relative; background: var(--code-bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; overflow-x: auto; margin: 0 0 1.3em; line-height: 1.5;
}
pre code { background: none; padding: 0; font-size: 0.85rem; white-space: pre-wrap; word-break: break-word; }
.copy {
  position: absolute; top: 8px; right: 8px; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); border-radius: 7px; font: 600 0.75rem var(--sans); padding: 5px 9px; cursor: pointer;
}
.copy:hover { color: var(--text); border-color: var(--ember); }
.copy.done { color: var(--ok); border-color: var(--ok); }
.swatch { display: inline-block; width: 0.95em; height: 0.95em; border-radius: 3px; vertical-align: -0.12em; margin-right: 4px; border: 1px solid rgba(0,0,0,0.3); }

/* cards on home */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 28px 0 60px; }
.tile {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--text);
  transition: border-color 0.15s, transform 0.15s;
}
.tile:hover { border-color: var(--ember); transform: translateY(-2px); color: var(--text); }
.tile img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; background: var(--surface-2); }
.tile div { padding: 14px 16px 16px; }
.tile h3 { margin: 0 0 4px; color: var(--text); font-size: 1.15rem; }
.tile p { margin: 0; color: var(--muted); font-size: 0.93rem; }
.steps { counter-reset: s; list-style: none; padding: 0; display: grid; gap: 10px; max-width: 820px; }
.steps li { counter-increment: s; position: relative; padding: 12px 14px 12px 52px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.steps li::before { content: counter(s); position: absolute; left: 14px; top: 11px; width: 26px; height: 26px; border-radius: 50%; background: var(--ember-bg); color: var(--ember-soft); display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; }

/* filters */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; align-items: center; }
.chip {
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  border-radius: 999px; padding: 6px 13px; font: 500 0.87rem var(--sans); cursor: pointer;
}
.chip:hover { color: var(--text); }
.chip[aria-pressed="true"] { background: var(--ember-bg); color: var(--ember-soft); border-color: var(--ember); }
.search {
  flex: 1 1 220px; max-width: 360px; background: var(--surface); border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; padding: 7px 14px; font: 0.92rem var(--sans);
}
.search:focus, .chip:focus-visible, .copy:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

/* gallery */
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin: 2.4em 0 0.3em; }
.section-head h2 { margin: 0; }
.group-intro { color: var(--muted); max-width: 820px; margin: 0.4em 0 1.1em; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 18px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; margin: 0; }
.card button.open { all: unset; cursor: zoom-in; display: block; background: var(--surface-2); }
.card button.open:focus-visible { outline: 2px solid var(--ember); outline-offset: -2px; }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.card figcaption { padding: 10px 12px 12px; font-size: 0.88rem; color: var(--muted); display: grid; gap: 4px; }
.card figcaption strong { color: var(--text); font-weight: 600; font-size: 0.95rem; }
.badge { justify-self: start; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; padding: 2px 7px; border-radius: 5px; border: 1px solid currentColor; }
.badge.in-het-spel { color: var(--ok); }
.badge.afgekeurd { color: var(--bad); }
.badge.test, .badge.onbekend { color: var(--faint); }
.badge.referentie { color: var(--warn); }
.meta { font-family: var(--mono); font-size: 0.72rem; color: var(--faint); word-break: break-all; }

/* 3d */
.models { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 18px; }
.model { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.model model-viewer {
  width: 100%; height: 380px; background: radial-gradient(circle at 50% 35%, var(--surface-2), var(--code-bg));
  --poster-color: transparent; --progress-bar-color: var(--ember);
}
.model .body { padding: 12px 14px 14px; display: grid; gap: 6px; font-size: 0.9rem; color: var(--muted); }
.model .body strong { color: var(--text); font-size: 1rem; }
.model .controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.model select, .model .btn {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 9px; font: 0.86rem var(--sans); max-width: 100%;
}
.model .btn { cursor: pointer; text-decoration: none; display: inline-block; }
.model .btn:hover { border-color: var(--ember); }
.load3d { all: unset; cursor: pointer; display: grid; place-items: center; height: 380px; background: radial-gradient(circle at 50% 35%, var(--surface-2), var(--code-bg)); color: var(--muted); text-align: center; font-size: 0.92rem; }
.load3d:hover { color: var(--text); }
.load3d span { display: block; font-size: 2rem; margin-bottom: 6px; color: var(--ember-soft); }

/* concept art */
.concept-hero { margin: 0 0 26px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.concept-hero button.open { all: unset; cursor: zoom-in; display: block; }
.concept-hero img { width: 100%; height: auto; }
.concepts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 24px; }
.concept { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.concept.breed { grid-column: 1 / -1; }
.concept button.open { all: unset; cursor: zoom-in; display: block; background: var(--code-bg); }
.concept button.open:focus-visible { outline: 2px solid var(--ember); outline-offset: -2px; }
.concept img { width: 100%; height: auto; }
.concept figcaption { padding: 12px 16px 14px; display: grid; gap: 6px; color: var(--muted); font-size: 0.93rem; }
.concept figcaption strong { color: var(--text); font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
details { margin-top: 4px; }
details summary { cursor: pointer; color: var(--ember-soft); font-weight: 600; font-size: 0.88rem; width: fit-content; }
details summary:hover { color: var(--ember); }
details[open] summary { margin-bottom: 8px; }
details pre { margin: 0; max-height: 420px; overflow: auto; }
.reeksprompt { margin: 0 0 16px; max-width: 900px; }
.datum { color: var(--faint); font-size: 0.88rem; }

/* quests */
:root { --st-idee: #7d7065; --st-bezig: #e6b450; --st-klaar: #8fc27a; --st-nvt: transparent; --main: #ee7a3c; --side: #7fa7d6; }
.qstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 14px; }
.qstats div { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 2px; }
.qstats b { font-family: var(--serif); font-size: 1.5rem; color: var(--text); }
.qstats span { color: var(--muted); font-size: 0.85rem; }
.legenda { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: 0.85rem; margin: 0 0 8px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i, .sporenbalk i { display: inline-block; width: 14px; height: 8px; border-radius: 2px; }
.s-idee { background: var(--st-idee); } .s-bezig { background: var(--st-bezig); } .s-klaar { background: var(--st-klaar); }
.s-nvt { background: transparent; border: 1px dashed var(--faint); }

.quest {
  display: grid; gap: 4px; text-decoration: none; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-left: 4px solid var(--main); border-radius: 10px; padding: 10px 12px 11px;
  transition: border-color .15s, transform .15s; min-width: 0;
}
.quest.q-zij { border-left-color: var(--side); }
.quest:hover { border-color: var(--ember); color: var(--text); transform: translateY(-1px); }
.quest strong { font-family: var(--serif); font-size: 1.08rem; font-weight: 600; line-height: 1.25; }
.quest.klein strong { font-size: 0.98rem; }
.q-soort { font-size: 0.68rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--main); }
.q-zij .q-soort { color: var(--side); }
.q-meta, .q-pct { color: var(--muted); font-size: 0.8rem; }
.sporenbalk { display: flex; gap: 3px; margin-top: 2px; }
.sporenbalk i { flex: 1; width: auto; height: 6px; }

.spine { list-style: none; margin: 10px 0 30px; padding: 0 0 0 26px; position: relative; }
.spine::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: linear-gradient(var(--main), color-mix(in srgb, var(--main) 25%, transparent)); }
.spine li { position: relative; margin: 0 0 14px; }
.spine .hs { margin: 22px 0 10px; }
.spine .hs:first-child { margin-top: 0; }
.spine .hs span { font-family: var(--serif); font-size: 1.15rem; color: var(--ember-soft); }
.spine .hs::before { content: ""; position: absolute; left: -24px; top: 6px; width: 17px; height: 17px; border-radius: 4px; transform: rotate(45deg); background: var(--bg); border: 3px solid var(--main); }
.knoop { display: grid; grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); gap: 14px; align-items: start; }
.knoop::before { content: ""; position: absolute; left: -22px; top: 16px; width: 13px; height: 13px; border-radius: 50%; background: var(--st-idee); border: 3px solid var(--bg); box-shadow: 0 0 0 2px var(--main); }
.knoop.st-bezig::before { background: var(--st-bezig); }
.knoop.st-klaar::before { background: var(--st-klaar); }
.takken { display: flex; flex-wrap: wrap; gap: 10px; position: relative; padding-left: 18px; }
.takken::before { content: ""; position: absolute; left: 0; top: 22px; width: 12px; border-top: 2px dashed var(--side); }
.takken .quest { flex: 1 1 200px; max-width: 280px; }
.takken.los { padding-left: 0; margin-bottom: 30px; }
.takken.los::before { display: none; }

.matrix-wrap { overflow-x: auto; margin: 0 0 30px; border: 1px solid var(--line); border-radius: 10px; }
.matrix { border-collapse: collapse; width: 100%; font-size: 0.85rem; min-width: 720px; }
.matrix th, .matrix td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.matrix thead th { background: var(--surface); color: var(--muted); font-weight: 600; text-transform: capitalize; position: sticky; top: 0; }
.matrix tbody th { font-weight: 500; }
.matrix tbody th a { color: var(--text); text-decoration: none; }
.matrix tbody th a:hover { color: var(--ember-soft); }
.matrix tbody th small { display: block; color: var(--faint); font-size: 0.74rem; }
.c-idee { color: var(--muted); }
.c-bezig { background: color-mix(in srgb, var(--st-bezig) 18%, transparent); color: var(--text); }
.c-klaar { background: color-mix(in srgb, var(--st-klaar) 20%, transparent); color: var(--text); }
.c-nvt { color: var(--faint); font-style: italic; }
.c-pct { font-weight: 700; }

.bord { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 30px; }
.kolom { background: var(--surface-2); border-radius: 12px; padding: 12px; display: grid; gap: 10px; align-content: start; min-height: 120px; }
.kolom h3 { margin: 0 0 2px; font-size: 1rem; color: var(--text); display: flex; justify-content: space-between; }
.kolom h3 span { color: var(--faint); font-family: var(--sans); font-weight: 500; }

.qside dl.feiten { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0 0 18px; font-size: 0.88rem; }
.qside dt { color: var(--faint); }
.qside dd { margin: 0; color: var(--text); }
.sporenlijst { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 4px; }
.sporenlijst li { display: flex; justify-content: space-between; padding: 5px 10px; border-radius: 6px; font-size: 0.86rem; text-transform: capitalize; }
.sporenlijst li b { font-weight: 600; text-transform: none; }
.qside ul.rel { list-style: none; padding: 0; margin: 0 0 18px; font-size: 0.88rem; display: grid; gap: 4px; }
.mist { color: var(--bad); }
.prose ul li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.2em; }

@media (max-width: 900px) {
  .knoop { grid-template-columns: minmax(0, 1fr); }
  .takken { padding-left: 14px; }
  .bord { grid-template-columns: minmax(0, 1fr); }
  .toc.qside ul { display: grid; }
}

/* lightbox */
dialog.lb { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; color: var(--text); }
dialog.lb::backdrop { background: rgba(8, 6, 4, 0.9); }
dialog.lb img { max-width: 96vw; max-height: 84vh; width: auto; object-fit: contain; border-radius: 8px; margin: 0 auto; }
dialog.lb p { text-align: center; margin: 10px 0 0; color: #e8dccb; font-size: 0.92rem; }
dialog.lb .x { position: fixed; top: 14px; right: 16px; background: rgba(0,0,0,0.5); color: #fff; border: 1px solid #555; border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 0.9rem; }

.foot { border-top: 1px solid var(--line); color: var(--faint); font-size: 0.85rem; padding: 26px 0 40px; margin-top: 40px; }
.hidden { display: none !important; }
.note { background: var(--ember-bg); border: 1px solid var(--line); border-left: 3px solid var(--ember); border-radius: 8px; padding: 12px 16px; color: var(--muted); margin: 0 0 1.4em; }

@media (max-width: 900px) {
  .with-toc { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { position: static; max-height: none; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 24px; background: var(--surface); }
  .toc ul ul { display: none; }
  .brand small { display: none; }
  .hero { padding: 36px 0 18px; }
}
@media (max-width: 760px) {
  .concepts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .model model-viewer, .load3d { height: 300px; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .models { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .tile { transition: none; } }

/* Actuele wereldrichting: leisteen, paars, groen en waterblauw. */
:root {
  --bg:#12131a; --surface:#1a1c26; --surface-2:#222531; --line:#353745;
  --text:#eeedf1; --muted:#bbb9c7; --faint:#a3a0b2;
  --ember:#b78adf; --ember-soft:#d0b1ea; --ember-bg:rgba(171,128,215,.12);
  --code-bg:#0d0f16; --blue:#8ac3e3; --purple:#c49be4; --green:#a2ca88;
  --radius:6px;
}
.bar-in {gap:12px;}
.brand small {display:block;line-height:1.15;}
.more-nav {position:relative;flex:none;font-size:.86rem;}
.more-nav summary {cursor:pointer;padding:8px;border:1px solid var(--line);border-radius:4px;}
.more-nav > div {position:absolute;right:0;top:44px;display:grid;grid-template-columns:1fr 1fr;gap:3px;min-width:380px;max-height:75vh;overflow:auto;padding:12px;background:var(--surface);box-shadow:var(--shadow);border:1px solid var(--line);}
.more-nav a {display:block;padding:8px 10px;text-decoration:none;}
.more-nav a:hover {background:var(--surface-2);}
.hero {padding:60px 20px 25px;}
.hero .lead {max-width:760px;}
.hero h1 {max-width:1000px;letter-spacing:-.025em;}
.wrap {min-width:0;}
.prose {min-width:0;overflow-wrap:anywhere;}
.prose .t {display:block;max-width:100%;overflow-x:auto;}
.actions {display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin:8px 0 30px;}
.btn.primary {background:var(--ember-bg);border-color:var(--ember);color:var(--text);}
.concept-hero {margin:0 0 32px;overflow:hidden;border-radius:5px;border:1px solid var(--line);}
.concept-hero img {width:100%;aspect-ratio:16/8;object-fit:cover;}
.glow-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:32px 0;}
.glow {text-decoration:none;padding:24px 22px;border:1px solid var(--line);border-top:2px solid currentColor;background:var(--surface);}
.glow h2 {font-size:1.4rem;margin:10px 0;color:var(--text);}
.glow p {color:var(--muted);margin:0;}
.glow span {font-size:.8rem;text-transform:uppercase;letter-spacing:.13em;}
.blue,.blue-text {color:var(--blue);}.purple,.purple-text {color:var(--purple);}.green,.green-text {color:var(--green);}
.library-counts {display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);margin:30px 0 52px;}
.library-counts a {padding:20px;text-decoration:none;color:var(--muted);border-right:1px solid var(--line);font-size:.88rem;}
.library-counts b {display:block;font:2rem var(--serif);color:var(--text);margin-bottom:6px;}
.library-counts a:last-child {border-right:0;}
.tile {border-radius:6px;}
.tile h3 {margin:7px 0 10px;}
.tile .eyebrow {font-size:.68rem;margin:0;}
.lore-first {max-width:840px;padding:28px 0 18px;margin:40px 0;border-top:1px solid var(--line);}
.lore-first h2 {margin:.5em 0;}
.story-route {display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0;list-style:none;counter-reset:route;}
.story-route li {counter-increment:route;position:relative;border:1px solid var(--line);padding:20px 16px 20px 45px;background:var(--surface);}
.story-route li::before {content:counter(route);position:absolute;left:17px;top:21px;color:var(--faint);}
.story-route span {display:block;font-size:.75rem;color:var(--muted);}
.story-route a {display:block;text-decoration:none;font-family:var(--serif);}
.use-grid {display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}
.use-card {padding:25px;border:1px solid var(--line);background:var(--surface);border-radius:5px;}
.use-card h2 {margin:8px 0 20px;font-size:1.4rem;}
.use-card p {font-size:.94rem;}
.use-card strong {display:block;margin-bottom:4px;font-size:.85rem;}
.results {font-size:.8rem;color:var(--muted);margin-bottom:22px;}
.search-results {display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.search-results .tile {min-width:0;}
.search-results .tile p {font-size:.9rem;}
.filters {flex-wrap:wrap;}
.search {flex:1 1 280px;min-width:0;}
.hidden {display:none!important;}
:focus-visible {outline:2px solid var(--blue);outline-offset:4px;}
@media(max-width:900px) {
 .bar-in {flex-wrap:wrap;gap:8px;}
 .brand {margin-right:auto;}
 .nav {order:4;flex-basis:100%;}
 .hero {padding-top:35px;}
 .story-route {grid-template-columns:1fr 1fr;}
}
@media(max-width:600px) {
 .hero {padding:32px 16px 20px;}
 .glow-grid,.use-grid,.search-results,.story-route {grid-template-columns:1fr;}
 .glow {padding:19px;}
 .library-counts {grid-template-columns:1fr 1fr;}
 .library-counts a:nth-child(2) {border-right:0;}
 .library-counts a:nth-child(-n+2) {border-bottom:1px solid var(--line);}
 .more-nav > div {right:0;min-width:0;width:min(350px,calc(100vw - 48px));grid-template-columns:1fr 1fr;}
 .more-nav a {font-size:.8rem;padding:7px;}
 .use-card {padding:20px;}
 .actions {gap:12px;}
}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior:auto;}* {transition:none!important;animation:none!important;}}
.actions .btn {display:inline-flex;align-items:center;padding:10px 16px;border:1px solid var(--line);border-radius:4px;text-decoration:none;font-size:.92rem;}
.actions .btn.primary {border-color:var(--ember);background:var(--ember-bg);}

/* Een gedeelde blauwe interface; factiekleuren alleen in inhoudelijke labels. */
:root {--bg:#10151d;--surface:#19222d;--surface-2:#222e3b;--line:#344657;--text:#edf2f5;--muted:#b4c2ce;--faint:#97aab9;--ember:#71b9e0;--ember-soft:#a2d3ed;--ember-bg:rgba(113,185,224,.12);--code-bg:#0b1119;}

/* Het nieuwe merk en de level-40-presentatie delen de blauwe interface. */
.brand {flex:none;gap:7px;}
.brand-logo {width:100px;height:auto;}
.brand small {font-size:.72rem;}
.home-intro {display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:48px;}
.home-mark {display:block;max-width:460px;justify-self:end;}
.home-mark img {width:100%;height:auto;}
.release-links {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 32px;}
.release-links a {display:block;padding:18px 20px;text-decoration:none;border:1px solid var(--line);background:var(--surface);border-radius:5px;}
.release-links a:hover {border-color:var(--ember);}
.release-links b {display:block;font-family:var(--serif);font-size:1.2rem;color:var(--text);}
.release-links span {display:block;margin-top:4px;font-size:.85rem;color:var(--muted);}
.class-plate {margin:20px 0 24px;}
.art-links {display:flex;gap:10px 20px;flex-wrap:wrap;margin:4px 0;font-size:.9rem;}
@media(max-width:700px) {
 .home-intro {grid-template-columns:1fr;gap:20px;}
 .home-mark {grid-row:1;justify-self:center;width:min(100%,320px);}
 .release-links {grid-template-columns:1fr;}
}

/* Basisinterface: kleuren en maten. De stenen randen komen uit frame.svg in de thema-laag. */
.bar {background:rgba(9,13,18,.97);border-bottom:1px solid #6b747d;box-shadow:0 2px 0 #14191e,0 12px 30px #0006;}
.bar-in {gap:8px;}
.brand {gap:8px;margin-right:10px;}
.brand-logo {width:110px;}
.brand small {color:#b4c2ce;}
.nav {gap:0;}
.nav a {display:inline-flex;align-items:center;justify-content:center;min-height:44px;border-radius:0;color:#c4cbd0;}
.more-nav summary,.more-nav > div {z-index:31;}
.actions .btn:hover {filter:brightness(1.3);}
.page-heading {padding-top:55px;padding-bottom:40px;border-bottom:1px solid #68758266;margin-bottom:34px;}
.page-heading h1 {text-shadow:0 2px 9px #0008;}
.cinematic {position:relative;isolation:isolate;display:grid;place-items:center;min-height:680px;overflow:hidden;border-bottom:1px solid #6b7781;box-shadow:0 16px 50px #000a;}
.cinematic-scene {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;}
.cinematic::before {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#03080d66,transparent 25%,transparent 75%,#03080d66),linear-gradient(#03080d1a,#03080d22 55%,#080e17f2);}
.cinematic-content {width:min(100%,760px);padding:35px 24px 40px;text-align:center;color:#eef4f7;text-shadow:0 2px 8px #000;}
.cinematic .eyebrow {letter-spacing:.22em;color:#c2dfed;margin:0;}
.cinematic-logo {display:block;width:min(100%,475px);margin:8px auto 0;}
.cinematic-logo img {width:100%;height:auto;filter:drop-shadow(0 6px 10px #000a);}
.cinematic h1 {font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:500;letter-spacing:.04em;margin:8px 0 16px;}
.cinematic-content > p:not(.eyebrow) {color:#cfdae2;font-size:1rem;line-height:1.8;margin:0 auto;}
.cinematic .actions {justify-content:center;gap:12px;margin:18px 0 0;}
.section-heading {display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px;}
.section-heading h2 {margin:0;font-size:2rem;}
.section-heading .eyebrow {margin:0 0 8px;}
.section-note {color:var(--muted);font-size:.8rem;}
.class-selection {padding:46px 0;}
.portal-grid {display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:12px 0 50px;}
.image-portal {position:relative;isolation:isolate;display:flex;align-items:end;min-height:330px;text-decoration:none;color:#fff;padding:32px;}
.image-portal > img {position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);object-fit:cover;z-index:-2;}
.image-portal::before {content:"";position:absolute;inset:8px;z-index:-1;background:linear-gradient(0deg,#030810f5,rgba(3,8,16,.78) 34%,transparent 80%);}
.portal-copy {display:grid;gap:9px;}
.portal-copy .eyebrow {font-size:.7rem;margin:0;color:#b9def1;}
.portal-copy strong {font:1.8rem var(--serif);color:#f2f3f6;text-shadow:0 2px 7px #000;}
.portal-copy > span:not(.eyebrow) {font-size:.88rem;line-height:1.6;color:#d0dae3;}
.portal-copy .portal-action {margin-top:4px;color:#a1d2ed!important;}
.image-portal:hover .portal-action {text-decoration:underline;}
.tile,.use-card,.glow,.concept,.toc,.lore-first {border:14px solid transparent;border-image:url('frame.svg') 30 stretch;border-radius:0;background:radial-gradient(ellipse at 50% 0,#1d344466,transparent 70%),linear-gradient(135deg,#0f1c27,#060d15);box-shadow:0 10px 25px #0008;}
.tile:hover {border-color:transparent;filter:brightness(1.08);}
.tile > div {padding:7px 12px 15px;}
.tile h3 {font-size:1.22rem;}
.tile p {font-size:.89rem;}
.use-card,.glow {padding:13px 14px;}
.glow h2 {font-size:1.4rem;}
.toc {padding:10px 9px 16px;border-width:12px;max-height:calc(100vh - 104px);}
.toc a {font-size:.82rem;}
.concept {border-width:14px;}
.concept figcaption {padding:14px;color:#becbd4;}
.concept figcaption strong {color:#f0f3f7;}
.concept button.open {background:transparent;}
.lore-first {padding:22px;max-width:none;margin-top:46px;}
.prose {background:rgba(12,18,25,.88);border:1px solid #65748066;padding:22px 26px;max-width:none;}
.prose h2 {border-bottom:1px solid #8e9baa55;padding-bottom:13px;margin-top:42px;}
.chip {border-radius:2px;border-color:#6c7986;background:linear-gradient(#25313b,#121c27);color:#c8d5df;box-shadow:inset 0 1px #b8c7d533;}
.chip[aria-pressed="true"] {background:linear-gradient(#294254,#142536);border-color:#9acbe5;color:#d9f1ff;box-shadow:inset 0 -2px #84bfdc;}
.search {border-radius:2px;border-color:#647482;background:#0b141e;color:#e1ebf2;}
.quest-tile > div {display:flex;flex-direction:column;height:100%;gap:8px;}
.quest-tile .quest-top {display:flex;align-items:start;justify-content:space-between;gap:8px;padding:0;}
.quest-top .eyebrow {font-size:.6rem;line-height:1.6;}
.level-badge {flex:none;font-size:.65rem;color:#c9e7f7;border:1px solid #8394a2;padding:2px 5px;background:#0b1520;}
.quest-tile h3 {margin:6px 0 0;}
.quest-tile .quest-place {color:#a5c9dd;font-size:.75rem;margin-bottom:4px;}
.quest-open {font-size:.75rem;color:#a9d3ea;margin-top:auto;padding-top:14px;}
.story-route li {background:linear-gradient(130deg,#202a34,#0e1721);border-color:#6b7884;box-shadow:inset 0 0 0 3px #080e15,inset 0 0 0 4px #576371;}
.story-route li::before {color:#b3d5e9;font-family:var(--serif);}
.library-counts {background:#111c27aa;border-color:#637180;}
.library-counts a {border-color:#637180;}
.foot {background:rgba(5,10,16,.75);border-top-color:#667786;}
@media(max-width:900px) {.bar-in .brand {margin-right:auto;}}
@media(max-width:700px) {
 .cinematic {min-height:620px;}
 .cinematic-content {padding:28px 18px;}
 .cinematic-logo {width:min(100%,390px);}
 .cinematic h1 {font-size:1.85rem;}
 .cinematic .actions {gap:0;}
 .wide-only {display:none;}
 .portal-grid {grid-template-columns:1fr;}
 .section-heading {align-items:start;flex-direction:column;gap:10px;}
 .section-heading h2 {font-size:1.7rem;}
 .page-heading {padding-top:32px;}
 .prose {padding:17px;}
 .bar-in {padding-top:5px;padding-bottom:5px;}
 .class-selection {padding:34px 0;}
 .image-portal {padding:30px;}
}
@media(max-width:500px) {
 .cinematic .actions {flex-direction:column;}
 .cinematic-logo {max-width:310px;}
 .cinematic {min-height:640px;}
 .cinematic .eyebrow {font-size:.65rem;}
}

/* Illustraties blijven bij hun uitleg; de interface blijft blauw. */
.explanation {margin:22px 0 32px;}
.explanation img {display:block;aspect-ratio:16/9;object-fit:cover;}
.explanation figcaption {gap:10px;}
.explanation figcaption .eyebrow {font-size:.71rem;color:#99c7dc;}
.image-reading {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:6px 0 0;padding:0;counter-reset:reading;list-style:none;}
.prose .image-reading {list-style:none;padding:0;}
.image-reading li {counter-increment:reading;padding:14px 14px 6px;border-top:1px solid #85abc44d;margin:0;font-size:.86rem;line-height:1.55;}
.image-reading li::before {content:'0' counter(reading);display:block;color:#95cbe6;font-size:.8rem;font-weight:700;letter-spacing:.08em;margin-bottom:7px;}
.image-reading li + li {border-left:1px solid #85abc433;}
.quest-tile {padding:0;overflow:hidden;}
.quest-tile > div:not(.quest-image) {padding:16px;}
.quest-image {position:relative;overflow:hidden;border-bottom:1px solid #718a9955;}
.quest-image img {display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .2s ease;}
.quest-tile:hover .quest-image img {transform:scale(1.025);}
.quest-image span {position:absolute;left:8px;bottom:8px;padding:4px 8px;background:#08111be8;color:#ccdeeb;font-size:.66rem;letter-spacing:.04em;}
.illustrated-domains {margin:24px 0;padding:20px;background:#101922;border:1px solid #647e9166;}
.illustrated-domains summary {cursor:pointer;color:#d7e7ef;font-family:var(--serif);font-size:1.15rem;}
.domain-images {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px;}
.use-illustration {margin:0;background:#0a1119;border:1px solid #627e9255;}
.use-illustration img {width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.use-illustration figcaption {display:grid;gap:7px;padding:15px;font-size:.87rem;color:#b5c7d4;}
.use-illustration figcaption strong {color:#e1e9ec;font-family:var(--serif);font-size:1.14rem;}
@media(max-width:700px){
 .image-reading {grid-template-columns:1fr;}
 .image-reading li + li {border-left:0;}
 .image-reading li {padding:12px 4px;}
 .image-reading li::before {display:inline-block;margin:0 10px 0 0;}
 .domain-images {grid-template-columns:1fr;}
 .explanation {margin:18px 0 24px;}
}
.quest-tile {display:flex;flex-direction:column;}
.quest-tile > .quest-image {display:block;padding:0;height:auto;flex:0 0 auto;}
.quest-tile > div:not(.quest-image) {height:auto;flex:1;}

/* Gelijke ruimte voor beide werkwijzen, met de bron en handeling in beeld. */
.method-gallery {padding-bottom:44px;}
.method-gallery [id] {scroll-margin-top:112px;}
.method-gallery > h2 {margin:10px 0 16px;}
.method-intro {max-width:850px;color:var(--muted);}
.method-mottos {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:26px 0;}
.method-mottos blockquote {margin:0;padding:18px 22px;background:#0c1722;border:1px solid #6c899b66;}
.method-mottos .eyebrow {margin:0 0 10px;}
.method-motto-text {margin:0;color:#e2edf2;font-family:var(--serif);font-size:1.25rem;}
.method-pair {margin-top:38px;}
.method-pair h3 {font-size:1.6rem;margin:0 0 10px;}
.method-context {max-width:900px;color:var(--muted);}
.method-pair-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch;}
.method-pair-grid .explanation {min-width:0;margin:0;}
.method-pair-grid .explanation img {aspect-ratio:auto;object-fit:contain;}
.method-pair-grid .image-reading {grid-template-columns:1fr;}
.method-pair-grid .image-reading li {padding:10px 0;}
.method-pair-grid .image-reading li + li {border-left:0;}
.method-pair-grid .image-reading li::before {display:inline-block;margin:0 10px 0 0;}
@media(max-width:760px){
 .method-mottos {grid-template-columns:1fr;gap:12px;}
 .method-gallery [id] {scroll-margin-top:150px;}
 .method-pair-grid {grid-template-columns:1fr;gap:18px;}
 .method-pair h3 {font-size:1.35rem;}
}

/* Gotisch redesign (1 oktober 2026): thema-laag voor alle pagina's. */
:root{color-scheme:dark;--bg:#080f18;--surface:#0e1a27;--line:#283c4e;--text:#dce3e8;--muted:#99adbd;--blue:#8ac9e4;--gold:#c6b58e;font-family:'DM Sans',sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);line-height:1.7}a{color:inherit;text-decoration:none}a,button,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:6px}img{max-width:100%;display:block}h1,h2,h3,strong.class-name{font-family:'Cinzel',Georgia,serif;font-weight:400;line-height:1.3}h1{font-size:clamp(1.65rem,3vw,2.7rem);margin:12px 0 22px}h2{font-size:clamp(1.6rem,2.4vw,2.2rem);margin:0 0 20px}h3{font-size:1.3rem;margin:0 0 14px}p{margin:0 0 20px;color:var(--muted)}.skip{position:fixed;top:-100px;left:10px;z-index:100;background:var(--text);color:var(--bg);padding:12px}.skip:focus{top:10px}.bar{border-bottom:1px solid var(--line);position:relative;z-index:10;background:var(--bg)}.bar-in{max-width:1480px;margin:auto;display:flex;align-items:center;gap:30px;padding:20px 4.5%}.brand{display:flex;align-items:center;gap:10px;white-space:nowrap}.brand svg{width:38px;height:44px;color:var(--gold)}.brand>span{font-family:'Cinzel',Georgia,serif;letter-spacing:.12em;font-size:1.4rem}.brand small{font-size:.75rem;color:var(--muted);border-left:1px solid var(--line);padding-left:12px;margin-left:8px}.nav{display:flex;gap:23px;margin-left:auto;font-size:.875rem}.nav a{color:var(--muted);padding:9px 0;position:relative}.nav a:hover,.nav a[aria-current]{color:var(--text)}.nav a[aria-current]:after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--blue)}.more-nav{font-size:.875rem}.more-nav summary{cursor:pointer;color:var(--muted)}.more-nav>div{position:absolute;right:4.5%;top:85%;background:#102030;border:1px solid var(--line);padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;max-height:70vh;overflow:auto;max-width:90vw}.more-nav a:hover{color:var(--blue)}.cinematic{position:relative;display:grid;grid-template-columns:1fr 1fr;max-width:1480px;min-height:630px;margin:auto;border-bottom:1px solid var(--line);overflow:hidden}.cinematic-content{padding:106px 0 90px 9%;z-index:1;align-self:center}.eyebrow{text-transform:uppercase;letter-spacing:.17em;font-size:.75rem;font-weight:600;line-height:1.7;color:var(--gold);margin-bottom:18px}.cinematic .eyebrow{color:var(--blue);margin-bottom:32px}.cinematic-logo{display:block;font-family:'Cinzel',Georgia,serif;font-size:clamp(3.7rem,7.5vw,7.3rem);line-height:1.12;letter-spacing:.055em;color:#e1e8e8}.cinematic-content>p:not(.eyebrow){max-width:470px;font-size:1rem}.wide-only{display:none}.actions{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:30px}.btn{padding:13px 22px;border:1px solid #526779;font-size:.875rem;transition:background .2s}.btn.primary{background:#9ccfe0;color:#091823;border-color:#9ccfe0}.btn:hover{background:#1e3548}.btn.primary:hover{background:#c2e7f3}.hero-art{position:relative;align-self:stretch;display:flex;align-items:center;overflow:hidden;border-left:1px solid #17283a}.hero-art img{height:100%;width:100%;object-fit:cover;object-position:center}.art-label{position:absolute;bottom:22px;right:26px;color:#7795ab;font-size:.75rem;letter-spacing:.14em}.wrap{max-width:1320px;margin:auto;padding:0 4.5%}.glow-grid{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);margin-bottom:76px}.glow{position:relative;padding:36px 30px 30px 0;display:grid;grid-template-columns:60px 1fr;column-gap:14px;align-content:start;transition:background .2s}.glow+.glow{border-left:1px solid var(--line);padding-left:25px}.glow:hover{background:#0e1c29}.glow svg{width:55px;grid-row:1/4;align-self:start}.glow>span{text-transform:uppercase;letter-spacing:.17em;font-size:.75rem;color:var(--accent)}.glow h2{font-family:'DM Sans',sans-serif;font-size:1rem;font-weight:500;margin:6px 0 9px}.glow p{font-size:.875rem;line-height:1.65;margin:0}.blue{--accent:#89cdeb;color:var(--accent)}.purple{--accent:#b3a0df;color:var(--accent)}.green{--accent:#9ccbaf;color:var(--accent)}.glow h2{color:var(--text)}.lore-first{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:44px 0;margin:65px 0}.lore-first>p:not(.eyebrow){max-width:740px}.lore-first .actions{max-width:980px;gap:14px 28px}.lore-first .actions a{font-size:.875rem;border-bottom:1px solid #4d6579;padding-bottom:3px;color:#b1cede}.lore-first .actions a:hover{color:white;border-color:var(--blue)}.concept{margin:0;display:grid;grid-template-columns:1.15fr 1fr;border:1px solid var(--line);background:#0c1723}.concept .open{padding:0;border:0;border-right:1px solid var(--line);background:#0c1723;cursor:zoom-in}.concept .open img{width:100%;height:100%;object-fit:cover}.concept figcaption{display:flex;flex-direction:column;align-items:start;padding:45px}.concept strong{font-family:'Cinzel',Georgia,serif;font-size:1.7rem;line-height:1.4;font-weight:400;margin-bottom:20px}.concept figcaption>span:not(.eyebrow){color:var(--muted)}.image-reading{list-style:none;padding:0;margin:28px 0 0;counter-reset:reading}.image-reading li{counter-increment:reading;font-size:.875rem;color:var(--muted);border-top:1px solid var(--line);padding:12px 0;display:flex;gap:14px}.image-reading li:before{content:'0' counter(reading);color:var(--gold);font-size:.75rem;padding-top:2px}.class-selection{margin:80px 0}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}.section-heading h2{margin:0}.section-note{color:var(--muted);font-size:.75rem;max-width:250px;text-align:right}.class-grid{display:grid;grid-template-columns:repeat(6,1fr);border-left:1px solid var(--line)}.class-choice{position:relative;border:1px solid var(--line);border-left:0;display:flex;flex-direction:column;padding:18px 12px 25px;align-items:center;transition:background .2s,transform .2s}.class-choice:hover{background:#132435;transform:translateY(-5px)}.class-choice img{width:100%;aspect-ratio:1}.class-level{position:absolute;top:8px;left:13px;font-size:.75rem;color:#7d94a7}.class-name{font-size:.95rem;font-family:'Cinzel',Georgia,serif;white-space:nowrap}.class-action{font-size:.75rem;color:var(--muted);margin-top:8px}.portal-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:65px}.image-portal{border:1px solid var(--line);background:#0e1926;display:grid;grid-template-columns:1fr 1.1fr;overflow:hidden;align-items:center}.image-portal img{height:100%;width:100%;object-fit:cover}.portal-copy{padding:28px 24px;display:flex;flex-direction:column;font-size:.875rem;color:var(--muted)}.portal-copy strong{font-family:'Cinzel',Georgia,serif;font-size:1.5rem;line-height:1.4;color:var(--text);font-weight:400;margin-bottom:16px}.portal-action{color:var(--blue);margin-top:24px}.image-portal:hover{border-color:#647f94}.library-counts{display:grid;grid-template-columns:repeat(4,1fr);margin:0 0 80px;border-block:1px solid var(--line)}.library-counts a{padding:26px 20px;text-align:center;color:var(--muted);font-size:.875rem}.library-counts a+a{border-left:1px solid var(--line)}.library-counts b{font-family:'Cinzel',Georgia,serif;display:block;color:var(--text);font-size:2.1rem;font-weight:400;line-height:1.4}.library-counts a:hover b{color:var(--blue)}.tiles{display:grid;grid-template-columns:repeat(3,1fr);counter-reset:tile;border-top:1px solid var(--line)}.tile{position:relative;counter-increment:tile;padding:30px 28px 20px 0;border-bottom:1px solid var(--line)}.tile:before{content:counter(tile,decimal-leading-zero);font-size:.75rem;color:#657f95;display:block;margin-bottom:19px}.tile:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid var(--line)}.tile .eyebrow{font-size:.75rem;margin-bottom:12px}.tile p:not(.eyebrow){font-size:.875rem;line-height:1.7}.tile:hover h3{color:var(--blue)}.foot{border-top:1px solid var(--line);padding:30px 0 40px;font-size:.75rem;color:var(--muted)}.foot .wrap{display:flex;flex-wrap:wrap;gap:10px 15px}.foot p{margin:0 auto 0 0}.foot a:hover{color:var(--text)}.lb{max-width:min(900px,92vw);max-height:90vh;background:var(--surface);color:var(--text);border:1px solid #627e90;padding:22px}.lb::backdrop{background:#02060be8}.lb img{max-height:64vh;margin:auto}.lb p{max-width:650px;margin:20px auto 0}.lb .x{display:block;margin:0 0 12px auto;border:1px solid var(--line);background:#152a3b;color:var(--text);padding:10px 20px;cursor:pointer}
@media(min-width:1600px){.cinematic{border-inline:1px solid var(--line)}}
@media(max-width:1150px){.bar-in{gap:18px}.brand small{display:none}.nav{gap:17px}.cinematic{min-height:570px}.cinematic-content{padding-top:75px;padding-bottom:70px}.glow{grid-template-columns:42px 1fr;gap:10px;padding-right:20px}.glow svg{width:40px}.concept figcaption{padding:30px}.class-name{font-size:.8rem}.portal-grid{gap:18px}.image-portal{grid-template-columns:1fr}.image-portal img{height:180px;object-fit:contain}}
@media(max-width:850px){.bar-in{flex-wrap:wrap;padding-block:14px;gap:9px 16px}.brand{margin-right:auto}.nav{order:3;width:100%;overflow:auto;gap:24px}.more-nav{margin-left:auto}.more-nav>div{top:65px}.cinematic{grid-template-columns:1fr 1fr;min-height:510px}.cinematic-content{padding:60px 0 60px 9%}.cinematic-logo{font-size:3.7rem;position:relative}.cinematic h1{font-size:1.8rem}.cinematic .actions{gap:12px}.btn{font-size:.875rem;padding:10px 15px}.hero-art{margin-left:20px}.glow{display:block;padding:28px 18px!important}.glow:first-child{padding-left:0!important}.glow svg{width:45px;margin-bottom:12px}.glow h2{min-height:44px}.class-grid{grid-template-columns:repeat(3,1fr);row-gap:16px;border:0}.class-choice{border-left:1px solid var(--line)}.class-choice img{max-width:150px}.class-name{font-size:1rem}.concept{grid-template-columns:1fr 1fr}.concept strong{font-size:1.45rem}.concept figcaption{padding:25px}.image-reading{margin-top:12px}.tiles{grid-template-columns:1fr 1fr}.tile:not(:nth-child(3n+1)){border-left:0;padding-left:0}.tile:nth-child(2n){border-left:1px solid var(--line);padding-left:24px}.section-note{max-width:200px}}
@media(max-width:580px){.wrap{padding:0 6%}.bar-in{padding-inline:6%}.brand>span{font-size:1.25rem}.brand svg{height:35px;width:30px}.nav{gap:23px;font-size:.875rem}.cinematic{display:flex;flex-direction:column;min-height:auto}.cinematic-content{padding:48px 6% 36px;align-self:stretch}.cinematic .eyebrow{margin-bottom:20px;font-size:.7rem}.cinematic-logo{font-size:clamp(3.2rem,14vw,5rem)}.cinematic h1{font-size:1.7rem;margin-top:16px}.cinematic-content>p:not(.eyebrow){font-size:1rem}.hero-art{height:270px;min-height:270px;margin:0;border-left:0;border-top:1px solid var(--line)}.hero-art img{object-fit:cover;object-position:center 50%;height:100%}.art-label{font-size:.7rem;bottom:12px}.actions{gap:12px}.btn{flex:1;text-align:center;white-space:nowrap;padding:12px 9px}.glow-grid{grid-template-columns:1fr;margin-bottom:40px}.glow,.glow:first-child{display:grid;grid-template-columns:48px 1fr;padding:25px 0!important;gap:0 18px}.glow+.glow{border-left:0;border-top:1px solid var(--line)}.glow h2{min-height:0;margin:5px 0 8px}.glow svg{width:46px;margin-top:10px}.lore-first{margin:45px 0;padding:30px 0}.lore-first .actions{display:grid;justify-items:start;margin-top:25px;gap:16px}.concept{grid-template-columns:1fr}.concept .open{border-right:0;border-bottom:1px solid var(--line)}.concept .open img{height:280px;object-fit:contain}.concept figcaption{padding:28px 24px}.section-heading{display:block}.section-note{text-align:left;display:block;margin-top:12px;max-width:none}.class-selection{margin:50px 0}.class-grid{grid-template-columns:repeat(2,1fr);gap:12px}.class-choice{padding:18px 8px}.class-name{font-size:.9rem}.portal-grid{grid-template-columns:1fr;margin-bottom:45px}.image-portal{grid-template-columns:.8fr 1fr}.image-portal img{height:100%;object-fit:cover}.portal-copy{padding:25px 20px}.portal-copy strong{font-size:1.3rem}.library-counts{grid-template-columns:1fr 1fr;margin-bottom:50px}.library-counts a{padding:20px 8px}.library-counts a:nth-child(3){border-left:0}.library-counts a:nth-child(n+3){border-top:1px solid var(--line)}.library-counts b{font-size:1.9rem}.tiles{grid-template-columns:1fr}.tile,.tile:nth-child(2n){border-left:0;padding:25px 0 15px}.tile:before{float:right;margin:0 0 10px 15px}.foot .wrap{display:block}.foot p{margin-bottom:15px}.foot a{line-height:2.2}.more-nav>div{grid-template-columns:1fr;max-width:88vw;right:6%}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* Sculpted gothic surfaces: vector mouldings, bevels and directional light. */
:root{--bg:#070d13;--surface:#0c1720;--line:#665939;--text:#e0e3df;--muted:#abb8c0;--gold:#b9c2c5;font-family:'DM Sans',sans-serif}body{background:radial-gradient(ellipse at 50% 0,#182b37 0,transparent 35%),#070d13}h1,h2,h3{font-family:Georgia,'Times New Roman',serif;letter-spacing:.025em;text-shadow:0 3px 3px #000}h2{font-size:clamp(1.65rem,3vw,2.15rem)}.bar{background:linear-gradient(#0d141b,#050b10);border-bottom:3px double #796a44;box-shadow:0 8px 30px #0009}.bar-in{padding:13px 3%;max-width:1400px;gap:22px}.brand{gap:8px}.brand img{width:124px;height:auto}.brand small{border:0;margin:0;padding:0;font-size:.7rem}.nav{gap:8px}.nav a{font-family:Georgia,serif;color:#c4d2d9;padding:4px 12px;border:9px solid transparent;border-image:url('frame.svg') 30 stretch;font-size:1rem;filter:drop-shadow(0 3px 3px #000);text-shadow:0 2px 2px #000}.nav a[aria-current]:after{display:none}.nav a:hover,.nav a[aria-current]{color:#e3f5ff;background:radial-gradient(ellipse,#4a739580,#07121d)}.more-nav summary{color:#bdd2df}.more-nav>div{background:linear-gradient(135deg,#172936,#070e16);border:10px solid transparent;border-image:url('frame.svg') 30 stretch;box-shadow:0 15px 40px #000}.cinematic{display:block;max-width:none;min-height:740px;isolation:isolate;border-bottom:3px double #938051;overflow:hidden;box-shadow:inset 0 0 90px #000}.hero-art{position:absolute;inset:0;margin:0;border:0;z-index:-2;display:block}.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center;filter:none}.cinematic:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,#03080dbb 0,#03080d66 36%,transparent 64%),linear-gradient(0deg,#030a12b3,transparent 35%,#02060b33)}.cinematic-content{position:relative;padding:58px 24px 66px;max-width:870px;margin:auto;text-align:center}.cinematic .eyebrow{font-size:.75rem;letter-spacing:.22em;color:#bacfdd;margin:0 0 8px;text-shadow:0 2px 6px #000}.cinematic-logo{width:min(570px,85%);margin:0 auto;font-size:initial;line-height:1;filter:drop-shadow(0 4px 9px #000)}.cinematic-logo img{width:100%;height:auto}.cinematic h1{margin:4px 0 20px;font-size:clamp(1.85rem,3.2vw,2.55rem);font-weight:400;color:#e7e9e0}.cinematic-content>p:not(.eyebrow){max-width:670px;margin:0 auto;color:#b9cbd5;line-height:1.8;text-shadow:0 2px 4px #000;font-size:1rem}.wide-only{display:block}.cinematic .actions{justify-content:center;gap:26px;margin-top:30px}.btn,.btn.primary{position:relative;flex:none;padding:3px 17px;border:13px solid transparent;border-image:url('frame.svg') 30 stretch;background:linear-gradient(#233643,#070f16 46%,#132734);font-family:Georgia,serif;font-size:1.07rem;line-height:1.5;color:#d9e7ee;min-width:208px;text-shadow:0 2px 2px #000;filter:drop-shadow(0 4px 4px #000)}.btn.primary{color:#d5f1ff;background:radial-gradient(ellipse at 50% 0,#42728d,#091622 68%)}.btn:hover,.btn.primary:hover{background:radial-gradient(ellipse at 50% 0,#507b94,#142c3f 75%);color:#fff}.wrap{max-width:1280px;padding:0 32px}.lore-first{padding:34px 36px;margin:48px 0;border:16px solid transparent;border-image:url('frame.svg') 30 stretch;background:radial-gradient(ellipse at 50% 0,#1d34448c,transparent 70%),linear-gradient(135deg,#0f1c27,#060d15);box-shadow:0 12px 30px #0008,inset 0 0 40px #0008}.lore-first:before,.lore-first:after{content:'';position:absolute;top:16px;bottom:16px;width:1px;background:linear-gradient(transparent,#7b6c4555,transparent);pointer-events:none}.lore-first:before{left:8px}.lore-first:after{right:8px}.eyebrow{color:#9fc2d7}.lore-first>p:not(.eyebrow){max-width:900px}.lore-first .actions{max-width:none}.lore-first .actions a{border-bottom:1px solid #58778c;color:#b4d5e8;text-shadow:0 2px 2px #000}.concept{border:14px solid transparent;border-image:url('frame.svg') 30 stretch;background:linear-gradient(110deg,#142735,#060d15);box-shadow:0 10px 25px #0008}.concept .open{background:radial-gradient(ellipse at 50% 20%,#3d5b6866,transparent 65%),linear-gradient(#0b1722,#152b38);border-color:#7e6e46}.concept .open img{filter:drop-shadow(0 8px 6px #0008)}.concept figcaption{padding:34px}.concept strong{font-family:Georgia,serif;text-shadow:0 3px 3px #000}.section-heading{position:relative;border-bottom:3px double #746743;padding-bottom:20px}.section-heading:after{content:'';position:absolute;bottom:-6px;left:50%;width:9px;height:9px;background:linear-gradient(135deg,#ccbe9a,#243641);border:1px solid #bdad81;transform:rotate(45deg);box-shadow:0 0 0 4px #08111b}.class-grid{gap:14px;border:0}.class-choice{border:11px solid transparent;border-image:url('frame.svg') 30 stretch;padding:21px 5px 23px;background:radial-gradient(ellipse at 50% 25%,#36516680,transparent 65%),linear-gradient(#132635,#070e17);box-shadow:0 8px 15px #0008}.class-choice:hover{background:radial-gradient(ellipse at 50% 25%,#47678199,transparent 70%),#112738;transform:translateY(-3px)}.class-choice img{filter:drop-shadow(0 8px 4px #0008);max-width:175px}.class-name{font-family:Georgia,serif;color:#d9e1e3;font-size:1rem;white-space:normal;text-align:center;text-shadow:0 2px 3px #000}.class-level{top:3px;left:7px;color:#d5c8a5;font-family:Georgia,serif}.class-action{color:#9eb7c8;font-size:.75rem}.image-portal{border:13px solid transparent;border-image:url('frame.svg') 30 stretch;background:linear-gradient(120deg,#1a2b38,#09111b);box-shadow:0 10px 25px #0008}.image-portal img{filter:drop-shadow(0 8px 6px #000)}.portal-copy strong{font-family:Georgia,serif;text-shadow:0 2px 3px #000}.glow-grid{gap:20px;border:0;margin:48px 0}.glow,.glow+.glow{padding:24px 16px!important;display:block;min-width:0;border:11px solid transparent;border-image:url('frame.svg') 30 stretch;background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--accent) 14%,transparent),transparent 75%),linear-gradient(#101e2b,#070e16);box-shadow:0 8px 18px #0008}.glow svg{float:left;width:45px;margin:2px 14px 6px 0;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 30%,transparent))}.glow h2{font-family:Georgia,serif;font-size:1.2rem;font-weight:400;min-height:0;line-height:1.4;margin-bottom:12px}.glow p{clear:both;padding-top:8px}.glow:hover{background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--accent) 22%,transparent),transparent 80%),#0c1d2a}.library-counts{border-block:3px double #695e3d;box-shadow:0 6px 16px #0005;background:linear-gradient(#101f2b,#08111b)}.library-counts b{font-family:Georgia,serif;text-shadow:0 3px 3px #000}.tiles{gap:20px;border:0;margin-top:28px}.tile,.tile:not(:nth-child(3n+1)),.tile:nth-child(2n){padding:25px 21px 10px;border:10px solid transparent;border-image:url('frame.svg') 30 stretch;background:radial-gradient(ellipse at 50% 0,#29455466,transparent 80%),linear-gradient(#101c26,#070e16);box-shadow:0 8px 20px #0006}.tile:before{float:right;margin:0 0 12px 12px;color:#8399a9;font-family:Georgia,serif}.tile .eyebrow{letter-spacing:.1em}.tile:hover{background:radial-gradient(ellipse at 50% 0,#36576c88,transparent 80%),#0d1c27}.foot{border-top:3px double #685c3c;background:linear-gradient(#0f1b24,#060c12)}.lb{border:13px solid transparent;border-image:url('frame.svg') 30 stretch;background:radial-gradient(ellipse at 50% 0,#243c4c,#07101a);box-shadow:0 0 70px #000}.lb .x{font-family:Georgia,serif;border:8px solid transparent;border-image:url('frame.svg') 30 stretch;padding:3px 16px}
@media(max-width:1150px){.bar-in{gap:12px;padding:12px 20px}.brand img{width:105px}.brand small{display:none}.nav{gap:4px}.nav a{font-size:.875rem;padding:3px 5px;border-width:8px}.cinematic{min-height:700px}.class-grid{gap:9px}.class-choice{border-width:9px}.class-name{font-size:.9rem}}
@media(max-width:850px){.bar-in{gap:10px 16px}.brand img{width:112px}.nav{gap:7px}.nav a{padding:3px 11px;font-size:.95rem}.cinematic{min-height:680px}.cinematic-content{padding:46px 22px 54px}.hero-art{margin:0}.hero-art img{object-position:center}.cinematic-logo{width:min(510px,90%)}.class-grid{gap:17px}.class-name{font-size:1.05rem}.concept figcaption{padding:24px}.glow-grid{gap:12px}.glow,.glow+.glow{padding:20px 12px!important}.glow svg{float:none;margin-bottom:10px}.glow h2{font-size:1.12rem}.wrap{padding:0 24px}.lore-first{padding:27px}.tiles{gap:16px}}
@media(max-width:580px){.bar-in{padding:10px 16px}.nav{gap:8px;padding:3px 2px}.nav a{font-size:.875rem;padding:2px 9px}.more-nav>div{top:68px}.cinematic{display:block;min-height:615px}.cinematic-content{padding:37px 19px 48px}.hero-art{height:auto;min-height:0;inset:0;position:absolute;border:0}.hero-art img{height:100%;object-fit:cover;object-position:center}.cinematic:after{background:radial-gradient(ellipse at 50% 40%,#03090dd9,#02081055 74%),linear-gradient(0deg,#020912aa,transparent)}.cinematic .eyebrow{font-size:.68rem;letter-spacing:.16em;margin-bottom:18px}.cinematic-logo{width:100%;margin-bottom:20px}.cinematic h1{font-size:1.65rem;line-height:1.3;margin:0 0 17px}.cinematic-content>p:not(.eyebrow){font-size:.95rem;line-height:1.8}.wide-only{display:none}.cinematic .actions{gap:16px;margin-top:26px;flex-direction:column;align-items:center}.btn,.btn.primary{font-size:1rem;padding:2px 18px;min-width:226px;border-width:12px}.wrap{padding:0 17px}.lore-first{margin:32px 0;padding:22px 15px;border-width:11px}.concept{border-width:11px}.concept .open img{height:290px}.concept figcaption{padding:24px 17px}.class-selection{margin:40px 0}.class-grid{gap:15px}.class-choice{padding:17px 6px;border-width:10px}.class-name{font-size:1rem}.portal-grid{gap:25px}.image-portal{grid-template-columns:1fr;border-width:11px}.image-portal img{height:210px;object-fit:contain}.portal-copy{padding:20px}.glow-grid{gap:22px;margin:34px 0}.glow,.glow+.glow,.glow:first-child{display:block;padding:22px 20px!important;border:11px solid transparent;border-image:url('frame.svg') 30 stretch}.glow svg{float:left;margin:0 16px 8px 0}.glow h2{font-size:1.25rem;margin:4px 0 12px}.glow p{padding-top:3px}.tiles{gap:20px}.tile,.tile:not(:nth-child(3n+1)),.tile:nth-child(2n){padding:22px 18px 8px;border-width:10px}.foot .wrap{padding-inline:22px}}

/* Preserve the proportions of the original concept paintings. */
.class-choice img{height:auto;aspect-ratio:auto}

/* Classkaarten: het beeld vult de hele kaart binnen de stenen rand. */
.class-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;border:0}
.class-choice{display:block;aspect-ratio:3/4;padding:0;overflow:hidden;isolation:isolate;background:#070e17}
.class-choice img{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:cover;object-position:24% 30%;z-index:-2;filter:none;transition:transform .3s}
.class-choice:hover img{transform:scale(1.04)}
.class-choice::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent 48%,#050a12e6 86%)}
.class-name{position:absolute;left:6px;right:6px;bottom:34px;margin:0;font-size:1rem;line-height:1.25}
.class-action{position:absolute;left:6px;right:6px;bottom:12px;margin:0;text-align:center;font-size:.72rem}
.class-level{position:absolute;top:8px;right:8px;left:auto;display:grid;place-items:center;width:28px;height:28px;border:1px solid #b7a77e;background:#0b111bdd;color:#d4eafa;font-size:.8rem}
@media(max-width:1150px){.class-grid{gap:10px}.class-name{font-size:.9rem}}
@media(max-width:950px){.class-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.class-name{font-size:1.05rem}}
@media(max-width:500px){.class-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.class-name{font-size:.95rem;bottom:30px}.class-action{font-size:.68rem;bottom:10px}}

/* Metaal in oud goud: randen en lijnen zijn goud getint. Het logo (v2) is zelf al goud en krijgt geen filter. */

/* Beeldportalen: één layout. Het beeld vult de portal binnen de rand, de tekst staat onderin over een verloop. */
.image-portal{display:flex;align-items:flex-end;grid-template-columns:none;min-height:340px;padding:0;overflow:hidden;isolation:isolate}
.image-portal > img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:none;z-index:-2;transition:transform .3s}
.image-portal:hover > img{transform:scale(1.03)}
.image-portal::before{inset:0;background:linear-gradient(0deg,#030810f2,rgba(3,8,16,.72) 40%,transparent 80%)}
.image-portal .portal-copy{position:relative;padding:28px 30px;max-width:560px;color:#d0dae3}
@media(max-width:580px){.image-portal{min-height:300px}.image-portal .portal-copy{padding:20px}}