/* ============================================================
   ProofOfReturns — editorial restyle (proposal, 29 jul 2026)
   Van "donkere comic" naar "editorial ledger line-art":
   lichtblauw papier · diep-navy inkt · Georgia-koppen · mono-labels.
   Merk-identiteit blijft: navy + amber + jade + de munt.
   Kleur = betekenis: jade houdt stand · rust = hype · amber = mixed · navy = neutraal.
   ============================================================ */

:root {
  --paper:      #E7EFF9;   /* zacht lichtblauw papier (was crème) */
  --paper-hi:   #FBFDFF;   /* koel bijna-wit voor kaarten/panelen — poppen op het lichtblauw */
  --ink:        #14263C;   /* diep navy — leest als bijna-zwart op lichtblauw, blijft PoR */
  --ink-70:     rgba(20, 38, 60, .70);
  /* ⚠️ De naam zegt 45, de waarde is .65 — bewust. Op .46 haalde dit token 2,73:1
     op de kaartachtergrond, terwijl het overal onder kleine mono-labels, captions en
     placeholders staat (WCAG AA: 4,5:1 voor normale tekst). Nu 4,87:1. Niet terugzetten. */
  --ink-45:     rgba(20, 38, 60, .65);
  --ink-22:     rgba(20, 38, 60, .22);
  --ink-10:     rgba(20, 38, 60, .10);
  --grid:       rgba(20, 38, 60, .045);
  --navy:       #254B72;
  --navy-deep:  #1c3a5a;
  --masthead:   #234a70;   /* navy band voor kop/voet/nadruk — "onze blauw" */
  --cream:      #F7F0E3;   /* vaste crème voor tekst op navy (niet theme-swap) */
  --amber:      #E8A93C;
  --amber-on-navy: #F0B94F; /* amber-tékst op de navy band: 5,15:1 — --amber haalt daar 4,45:1 waar 4,5 moet (audit 8 aug) */
  --amber-deep: #96610F;   /* tekst-amber op licht papier: 4,51:1 — was #B9791A = 3,12:1 (audit 8 aug) */
  --jade:       #4CAF7D;
  --jade-deep:  #27704C;   /* 5,16:1 op papier — was #2E7D54 = 4,34:1 */
  --rust:       #B04A24;   /* 4,70:1 op papier — was #C4572E = 3,81:1 */
  /* Soort-as (14 aug 2026) — bewust blauw, want jade/rust/amber zijn het óórdeel en een
     soort is geen oordeel. Alleen voor het Check/Explainer-label; nooit voor een uitkomst. */
  --sky:        #AECBE8;   /* explainer-chip; inkt erop = 9,11:1 */
  --sky-deep:   #4E7EAA;   /* rand van die chip: 4,21:1 tegen de kaart (UI-grens 3,0) */

  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --maxw: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:    #0f1d2e;
    --paper-hi: #16283d;
    --ink:      #F1EADB;
    --ink-70:   rgba(241, 234, 219, .70);
    --ink-45:   rgba(241, 234, 219, .55);   /* zie de opmerking hierboven: was 3,69:1, nu 4,81:1 */
    --ink-22:   rgba(241, 234, 219, .22);
    --ink-10:   rgba(241, 234, 219, .10);
    --grid:     rgba(241, 234, 219, .05);
    --navy:     #6f9fce;
    --amber:      #F0B94F;
    --amber-deep: #F5CC80;
    --jade:       #5FC492;
    --jade-deep:  #86D6AE;
    --rust:       #E27F55;
    /* --sky/--sky-deep swappen bewust NIET mee: de chip draagt zijn eigen achtergrond en
       staat los van het papier, net als --cream en --masthead. Meeswappen zou de twee
       soorten in donkere modus naar elkaar toe trekken. */
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; height: auto; }

/* papiervezel — nu maar een zweempje, zodat het lichtblauw schoon blijft */
.grain {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { .grain { mix-blend-mode: screen; opacity: .14; } }

/* ---- Kop / nav — navy masthead (full-bleed) ------------------------- */
.topbar {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 1rem var(--gutter);
  max-width: var(--maxw); margin: 0 auto;
  background: var(--masthead); color: var(--cream);
  box-shadow: 0 0 0 100vmax var(--masthead);
  clip-path: inset(0 -100vmax);
}
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--cream); text-decoration: none;
  font-family: var(--serif); font-weight: 400; font-size: 1.24rem; letter-spacing: -.01em;
}
.brand svg { width: 40px; height: auto; flex: none; }
.navlinks { display: flex; gap: .4rem 1.3rem; flex-wrap: wrap; align-items: center; }
.navlinks a {
  color: rgba(247, 240, 227, .74); text-decoration: none; font-weight: 700;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 2px solid transparent; padding-bottom: 3px;
}
.navlinks a:hover, .navlinks a[aria-current="page"] { color: var(--cream); border-color: var(--amber); }
.navlinks a.nl-library { color: var(--amber-on-navy); }
.navlinks a.nl-tools   { color: var(--jade); }
.navlinks a.nl-library:hover, .navlinks a.nl-tools:hover { color: var(--cream); }
.navtoggle { display: none; background: none; border: 0; color: var(--cream); font-size: 1.5rem; cursor: pointer; }
@media (max-width: 720px) {
  .navtoggle { display: block; }
  /* ⚠️ Mobiele-menu-fix (11 aug 2026, gevonden op een iPhone). De masthead
     draagt de full-bleed-truc `box-shadow 100vmax` + `clip-path: inset(0 -100vmax)`,
     en die clip-path knipt óók de kínderen af. Het uitklapmenu is een kind dat ónder
     de balkrand uitklapt — het opende dus wel (class .open kwam erop), maar onzichtbaar.
     Op ≤720px is de balk toch al schermbreed, dus de truc kan hier veilig uit. */
  .topbar { box-shadow: none; clip-path: none; }
  .navlinks {
    position: absolute; top: calc(100% + 4px); right: var(--gutter); left: var(--gutter);
    flex-direction: column; align-items: flex-start; gap: .2rem;
    background: var(--masthead); border: 1.5px solid rgba(247, 240, 227, .2);
    padding: .8rem 1.1rem; display: none; z-index: 30;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
  }
  .navlinks.open { display: flex; }
  .navlinks a { padding: .5rem 0; font-size: .8rem; }
}

/* ---- Layout --------------------------------------------------------- */
main { position: relative; z-index: 1; }
section { position: relative; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: clamp(3rem, 8vw, 6rem) var(--gutter); }
/* ⚠️ 52rem, niet 44 (besluit eigenaar, 20 aug 2026). `max-width` telt met border-box de
   gutter mee, dus 44rem leverde een tekstkolom van maar ~560px op — terwijl
   een vergelijkbare leespagina ~674px doet. Dat is het verschil dat opviel: niet de letter (17px
   tegenover 17,5px) maar de kolom, en dus ook de figuren, die op 100% van die kolom
   staan. 52rem geeft 832 − 2×72 = ~688px tekst en dus ~23% grotere figuren.
   Verander je dit, verander dan ook de figcaption-breedte van .herofig hieronder. */
.prose { max-width: 52rem; margin: 0 auto; padding: clamp(2rem, 6vw, 4rem) var(--gutter); }

.crumbs {
  max-width: 44rem; margin: 0 auto; padding: 1.2rem var(--gutter) 0;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-45);
}
.crumbs a { color: var(--ink-70); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

/* labels + koppen */
.eyebrow, .sectionlabel {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--ink-45);
  display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1.3rem;
}
.sectionlabel i { font-style: normal; color: var(--amber-deep); font-weight: 700; font-variant-numeric: tabular-nums; }
.sl-navy i { color: var(--navy); }
.sl-jade i { color: var(--jade-deep); }
.sl-rust i { color: var(--rust); }

h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.5rem, 7vw, 4.6rem); line-height: 1.04; letter-spacing: -.02em;
  text-wrap: balance; margin: .4rem 0 0; max-width: 16ch;
}
h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.8rem, 4.4vw, 2.9rem); line-height: 1.12; letter-spacing: -.018em;
  text-wrap: balance; margin: 0 0 1.1rem; max-width: 20ch;
}
h3 { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; margin: 2rem 0 .5rem; }
.lede {
  font-size: clamp(1.05rem, 2.3vw, 1.3rem); line-height: 1.55; color: var(--ink-70);
  max-width: var(--measure); margin: 1.7rem 0 0;
}
.lede strong, .lede b { color: var(--ink); font-weight: 600; }
.center { text-align: center; }
.center .eyebrow, .center .sectionlabel { justify-content: center; }
.center h1, .center h2 { margin-left: auto; margin-right: auto; }
.center .lede { margin-left: auto; margin-right: auto; }

.body { max-width: var(--measure); color: var(--ink-70); }
.body p + p { margin-top: 1rem; }

/* ---- Prose (about / faq) ------------------------------------------- */
.prose h1 { max-width: 18ch; }
.prose h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin-top: 2.6rem; }
.prose p { margin-top: 1rem; color: var(--ink-70); }
.prose p b, .prose li b { color: var(--ink); }
.prose ul, .prose ol { margin: 1rem 0 0 1.3rem; }
.prose li { margin-top: .5rem; color: var(--ink-70); }
.prose li::marker { color: var(--amber-deep); }
a.inline, a.inlink {
  color: var(--navy); text-decoration: none;
  border-bottom: 1.5px solid var(--amber); padding-bottom: 1px;
}
a.inline:hover, a.inlink:hover { color: var(--ink); border-color: var(--ink); }

/* pull-quote (het standaard-motief) */
.pull {
  font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.25;
  color: var(--ink); margin: 1.6rem 0; padding-left: 1.3rem;
  border-left: 3px solid var(--amber);
}

/* ---- De deuren (drie tot 14 aug 2026, sindsdien twee) ---------------- */
.cats { display: grid; gap: 1.1rem; margin-top: 2.4rem; }
@media (min-width: 840px) { .cats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 840px) { .cats.cats-2 { grid-template-columns: repeat(2, 1fr); } }
.cat {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: linear-gradient(var(--wash), var(--wash)) var(--paper-hi);
  border: 1.5px solid var(--accent); border-top-width: 4px;
  padding: 1.6rem 1.5rem 1.7rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cat-amber { --accent: var(--amber); --accent-deep: var(--amber-deep); --wash: rgba(232, 169, 60, .12); }
.cat-navy  { --accent: var(--navy);  --accent-deep: var(--navy);       --wash: rgba(37, 75, 114, .10); }
.cat-jade  { --accent: var(--jade);  --accent-deep: var(--jade-deep);  --wash: rgba(76, 175, 125, .13); }
.cat:hover { transform: translateY(-3px); border-color: var(--accent-deep); box-shadow: 0 14px 28px -18px rgba(0,0,0,.45); }
.cat svg.ico { width: 44px; height: 44px; display: block; margin-bottom: 1rem; }
.cat svg.ico path, .cat svg.ico circle, .cat svg.ico line { fill: none; stroke: var(--ink); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.cat svg.ico .acc { stroke: var(--accent-deep); }
.cat svg.ico .accfill { fill: var(--accent); stroke: none; }
.cat h3 { margin: 0 0 .5rem; font-size: 1.5rem; }
.cat p { margin: 0; font-size: .95rem; color: var(--ink-70); line-height: 1.55; flex: 1 1 auto; }
.cat .go {
  display: inline-block; margin-top: 1.15rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-deep); font-weight: 700;
}
.cat.soon { opacity: .96; }
.cat .flag {
  align-self: flex-start; margin-bottom: .9rem;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-deep); border: 1px solid var(--accent); padding: .2rem .5rem;
}

/* ---- Cijfers (de huisregel-tellingen / stats) ----------------------- */
.counts { display: grid; gap: clamp(1.4rem, 4vw, 2.6rem); margin-top: 2.2rem; grid-template-columns: repeat(3, 1fr); }
.count .n {
  font-family: var(--mono); font-weight: 500; font-size: clamp(2.2rem, 5.6vw, 3.6rem);
  line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--jade-deep);
}
.count.warn .n { color: var(--rust); }
.count .l {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-45); margin-top: .6rem; display: block; line-height: 1.5;
}
@media (max-width: 620px) { .counts { grid-template-columns: 1fr 1fr; } }

/* stat-tiles met bron-superscript (why-pagina) */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; margin-top: 2.2rem; }
.stat {
  background: var(--paper-hi); border: 1.5px solid var(--ink-22); padding: 1.4rem 1.5rem;
  position: relative;
}
.stat .n {
  font-family: var(--mono); font-weight: 500; font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 1; letter-spacing: -.02em; color: var(--amber-deep); font-variant-numeric: tabular-nums;
}
.stat .n sup { font-size: .3em; }
.stat .n sup a { color: var(--ink-45); text-decoration: none; }
.stat p { margin-top: .8rem; font-size: .95rem; line-height: 1.5; color: var(--ink-70); }
.stat p b { color: var(--ink); }
.stat.wide { grid-column: 1 / -1; display: flex; gap: .5rem 1.8rem; align-items: center; flex-wrap: wrap; }
.stat.wide .n { flex: none; }
.stat.wide div { flex: 1 1 320px; }
@media (max-width: 640px) { .stats { grid-template-columns: 1fr; } }

/* ---- Check-demo met Proof Stack ------------------------------------- */
.checkcard {
  display: grid; gap: clamp(1.2rem, 4vw, 2.5rem); align-items: center;
  grid-template-columns: 1fr; max-width: 62rem;
}
@media (min-width: 860px) { .checkcard { grid-template-columns: 1.1fr .9fr; } }
.claim {
  background: var(--paper-hi); border: 1.5px solid var(--ink-22);
  padding: clamp(1.4rem, 3.5vw, 2.2rem); position: relative;
}
.claim::before, .claim::after { content: ""; position: absolute; width: 12px; height: 12px; border: 1.5px solid var(--amber); }
.claim::before { top: -1.5px; left: -1.5px; border-right: 0; border-bottom: 0; }
.claim::after { bottom: -1.5px; right: -1.5px; border-left: 0; border-top: 0; }
.claim .k { font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-45); margin-bottom: .8rem; }
.claim .q { font-family: var(--serif); font-size: clamp(1.4rem, 3.4vw, 2rem); line-height: 1.22; margin: 0; }
.claim .note { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--ink-22); font-size: .95rem; color: var(--ink-70); }
.claim .note b { color: var(--ink); }

.panel { border: 1.5px solid var(--ink-22); background: var(--paper-hi); padding: clamp(1.2rem, 3vw, 1.7rem); text-align: center; }
.panel .ph {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-45); padding-bottom: .9rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--ink-10);
}
.panel .stackwrap { display: flex; justify-content: center; }
/* ⛔ De verdict-chip is verwijderd op 8 aug 2026 — PoR kent geen verdict-label meer
   (protocol §9). Het antwoord staat in gewone woorden (.stackanswer), niet in een stempel.
   ⚠️ Let op: `.res .verdict` verderop in dit bestand bestaat nog en is iets ánders — dat
   markeert de "Good for / Watch out"-alinea's op /resources, geen oordeel over een claim. */
.panel .cap { margin-top: .9rem; font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; color: var(--ink-45); line-height: 1.5; }

/* ---- De navy nadruk-band (measurement / evidence) ------------------- */
.rule { background: var(--masthead); color: var(--cream); }
.rule .sectionlabel { color: rgba(247, 240, 227, .78); }
.rule .sectionlabel i { color: #F0B94F; }   /* lichter amber: 4,45:1 -> 5,15:1 op de navy band */
.rule h2 { color: var(--cream); }
.rule .body { color: rgba(247, 240, 227, .82); }
.rule .body a.inline, .rule a.inline { color: var(--amber-on-navy); border-color: var(--amber-on-navy); }
.rule .count .n, .rule .count.warn .n { color: var(--amber-on-navy); }
.rule .count .l { color: rgba(247, 240, 227, .78); }
.rule .punch { color: var(--cream); }
.rule .punch b { color: var(--amber-on-navy); }

/* pills (house rules) */
.pills { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.pill {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  border: 1.5px solid var(--ink-22); padding: .55rem .9rem; color: var(--ink-70);
  display: inline-flex; align-items: center; gap: .5rem;
}
.pill b { color: var(--rust); font-weight: 800; }
.pill.yes { border-color: var(--jade-deep); color: var(--jade-deep); }
.pill.yes b { color: var(--jade-deep); }

/* ⛔ .pill hierboven is een CHIP: mono, uppercase, en een flexbox voor een icoon
   naast een label van drie woorden ("✗ Trading signals" op /why). Zet je daar een
   hele zin in, dan gaat het stuk: élk kind wordt een eigen flex-item — de <b>, elke
   losse tekstrun én de <em> ertussen — en die krijgen alle drie hun eigen kolom.
   De zin valt dan uit elkaar in onleesbare brokken. Zo stond de eerste check op
   26 aug 2026 live; het viel meteen op.
   Draagt een blokje een zin in plaats van een label, gebruik dan .pill.say:
   gewone tekstflow, geen kapitalen, en de leesletter in plaats van de mono. */
.pill.say {
  display: block; flex: 1 1 100%;
  font-family: inherit; font-size: .95rem; letter-spacing: 0; text-transform: none;
  line-height: 1.65; padding: .85rem 1.15rem; color: var(--ink-70);
}
.pill.say b { display: inline; color: var(--ink); font-weight: 700; }
.pill.say em { font-style: italic; }

/* callout */
.callout {
  background: var(--paper-hi); border-left: 3px solid var(--amber);
  padding: 1.1rem 1.4rem; margin-top: 1.6rem; font-size: .97rem; color: var(--ink-70);
}
.callout.evidence { border-left-color: var(--jade); }
.callout b { color: var(--ink); }

/* ---- Aanmelden ------------------------------------------------------ */
.signup-wrap { max-width: 44rem; margin: 0 auto; text-align: center; padding: clamp(3rem, 7vw, 5rem) var(--gutter); border-top: 1px solid var(--ink-10); }
form.signup { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; justify-content: center; }
form.signup input[type="email"] {
  flex: 1 1 17rem; min-width: 0; max-width: 20rem;
  padding: .9rem 1.2rem; font-size: 1rem; font-family: var(--sans);
  color: var(--ink); background: var(--paper-hi); border: 1.5px solid var(--ink-22); border-radius: 0; outline: none;
}
form.signup input[type="email"]::placeholder { color: var(--ink-45); }
form.signup input[type="email"]:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(232,169,60,.22); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
button.cta, a.cta {
  padding: .9rem 1.5rem; border: 1.5px solid var(--ink); cursor: pointer; text-decoration: none;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  transition: transform .14s ease, background .14s ease; display: inline-block;
}
button.cta:hover, a.cta:hover { transform: translateY(-2px); background: var(--amber-deep); border-color: var(--amber-deep); color: var(--paper-hi); }
a.cta.ghost { background: transparent; color: var(--ink); }
a.cta.ghost:hover { background: transparent; color: var(--amber-deep); border-color: var(--amber-deep); }
button.cta:disabled { opacity: .55; transform: none; cursor: default; }
.formnote { font-size: .82rem; color: var(--ink-45); margin-top: 1rem; }
.formmsg, #formmsg { font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; margin-top: 1rem; min-height: 1.4em; }
.formmsg.ok, #formmsg.ok { color: var(--jade-deep); }
.formmsg.err, #formmsg.err { color: var(--rust); }
.herocta { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 2rem; }
.center .herocta { justify-content: center; }

/* ---- Bronnen + footer ---------------------------------------------- */
.sources { max-width: 44rem; margin: 0 auto; padding: 0 var(--gutter); font-size: .82rem; line-height: 1.6; color: var(--ink-70); }
.sources h2 { font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-45); margin: 0 0 1rem; }
.sources ol { padding-left: 1.3rem; }
.sources li { margin-bottom: .6rem; }
.sources a { color: var(--navy); }

footer.site {
  margin-top: 3rem; background: var(--masthead); color: var(--cream);
  box-shadow: 0 0 0 100vmax var(--masthead); clip-path: inset(0 -100vmax);
  padding: 2.6rem var(--gutter) 1rem; max-width: var(--maxw); margin-left: auto; margin-right: auto;
}
.foot-top { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; justify-content: space-between; }
.foot-brand { max-width: 30ch; }
.foot-brand .wm { font-family: var(--serif); font-size: 1.2rem; color: var(--cream); }
.foot-brand p { font-size: .85rem; color: rgba(247, 240, 227, .78); margin: .5rem 0 0; }
.foot-links { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.foot-col h2 { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(247, 240, 227, .78); margin: 0 0 .7rem; font-weight: 600; }
.foot-col a { display: block; font-size: .88rem; color: rgba(247, 240, 227, .78); text-decoration: none; margin-top: .45rem; }
.foot-col a:hover { color: var(--cream); }
.disclaimer { margin: 1.6rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid rgba(247, 240, 227, .16); font-size: .74rem; color: rgba(247, 240, 227, .78); line-height: 1.6; }
.foot-bottom {
  margin: 0; padding: 1rem 0 1.2rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(247, 240, 227, .78);
}

/* ---- Reveal on scroll ---------------------------------------------- */
.reveal { opacity: 0; transform: translateY(20px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.d1.in { transition-delay: .08s; }
.reveal.d2.in { transition-delay: .16s; }
.reveal.d3.in { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.in { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   LEGACY-VOCABULAIR — zodat de bestaande pagina's (educational,
   resources, research, de 4 explainers) editorial worden zonder
   HTML-herschrijving. Ze houden hun comic-logo en content; ze
   linken alleen dit stylesheet i.p.v. het oude styles.css.
   ============================================================ */

/* (de dode .glow-divs zijn 11 aug 2026 uit de pagina's én hier verwijderd) */

/* oude masthead .top / .nav → navy masthead */
.top {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 1rem var(--gutter);
  max-width: var(--maxw); margin: 0 auto;
  background: var(--masthead); color: var(--cream);
  box-shadow: 0 0 0 100vmax var(--masthead); clip-path: inset(0 -100vmax);
}
.top .nav { display: flex; gap: .4rem 1.3rem; flex-wrap: wrap; align-items: center; }
.top .nav a {
  color: rgba(247, 240, 227, .74); text-decoration: none; font-weight: 700;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 2px solid transparent; padding-bottom: 3px;
}
.top .nav a:hover, .top .nav a[aria-current="page"] { color: var(--cream); border-color: var(--amber); }
@media (max-width: 720px) {
  /* zelfde mobiele-menu-fix als bij .topbar hierboven — de clip-path van de
     full-bleed-truc maakte het geopende menu onzichtbaar (11 aug 2026) */
  .top { box-shadow: none; clip-path: none; }
  .top .nav {
    position: absolute; top: calc(100% + 4px); right: var(--gutter); left: var(--gutter);
    flex-direction: column; align-items: flex-start; gap: .2rem;
    background: var(--masthead); border: 1.5px solid rgba(247, 240, 227, .2);
    padding: .8rem 1.1rem; display: none; z-index: 30; box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
  }
  .top .nav.open { display: flex; }
  .top .nav a { padding: .5rem 0; font-size: .8rem; width: 100%; }
}

/* labels + lead */
.kicker {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--amber-deep); font-weight: 700; display: block; margin-bottom: .6rem;
}
.lead {
  font-size: clamp(1.05rem, 2.3vw, 1.3rem); line-height: 1.55; color: var(--ink-70);
  max-width: var(--measure); margin: 1.4rem 0 0;
}
.lead b, .lead strong { color: var(--ink); font-weight: 600; }
section .wrap[style*="center"] .lead, .prose[style*="center"] .lead { margin-left: auto; margin-right: auto; }

/* oude section-wrappers */
section { padding: 0; }
main section > .wrap { padding-top: clamp(3rem, 8vw, 6rem); padding-bottom: clamp(3rem, 8vw, 6rem); }

/* educational-hub kaarten */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.1rem; margin-top: 2.2rem; }
.card {
  display: flex; flex-direction: column; gap: .35rem; text-decoration: none; color: inherit;
  background: var(--paper-hi); border: 1.5px solid var(--ink-22); border-top: 4px solid var(--amber);
  padding: 1.5rem 1.4rem 1.6rem; transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(0, 0, 0, .45); }
.card .tag { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--amber-deep); font-weight: 700; }
/* :is(h2,h3) — de kaarttitels zijn h2 geworden voor een correcte kopvolgorde; de
   styling moet aan beide hangen, anders erven ze de paginabrede h2-clamp. */
.card :is(h2, h3) { font-family: var(--serif); font-weight: 400; font-size: 1.38rem; margin: .3rem 0; color: var(--ink); }
.card p { font-size: .95rem; color: var(--ink-70); line-height: 1.55; margin: 0; }
.card .go { margin-top: auto; padding-top: .7rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-deep); font-weight: 700; }

/* ---- Library — kaarten op /library (landingspatroon 11 aug 2026, één hub 14 aug) -
   Eén kaart per gepubliceerd stuk, check én explainer door elkaar; de weekronde
   plaatst ze boven het CHECKS:INSERT-anker in library.html. Een check-kaart draagt
   het antwoord in gewone woorden + promised·proven + het zekerheidswoord — géén
   label (protocol §9). De klassenaam `check-card` is historisch en blijft: de gate
   hangt R-KLEUR eraan op. */
.checkgrid { display: grid; gap: 1.1rem; margin: 1.6rem 0 .4rem; }
@media (min-width: 680px) { .checkgrid { grid-template-columns: 1fr 1fr; } }
.check-card {
  display: flex; flex-direction: column;
  background: var(--paper-hi); border: 1.5px solid var(--ink-22);
  padding: 1.2rem 1.3rem;
}
.check-card .date { margin: 0; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-45); }
.check-card h3 { font-family: var(--serif); margin: .5rem 0 .4rem; font-size: 1.15rem; line-height: 1.3; }
.check-card h3 a { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--amber); }
.check-card h3 a:hover { border-color: var(--ink); }
.check-card .answer { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink-70); }
.check-card .stackline { margin: .8rem 0 0; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; color: var(--ink-70); }
.check-card .go { margin-top: auto; padding-top: .8rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-deep); font-weight: 700; }
.check-card.hide { display: none; }

/* Wachtrijkaart (14 aug 2026): een stuk dat nog niet bestaat. Draagt bewust geen link,
   geen samenvatting en geen datum — dát zijn de signalen, plus het woord "Up next".
   ⛔ Géén stippellijn (besluit 14 aug, tweede keer): dat was de eerste opzet — gestippeld
   staat elders voor "nog niet gedekt", zoals bij de Proof Stack — maar op een kaart die
   zo groot is valt het uit elkaar. Nu een rustigere rand en geen vulling: even leesbaar,
   een stuk minder druk. Gate: R-WACHTRIJ. */
.check-card.queued { border-color: var(--ink-10); background: transparent; }
.check-card.queued h3 { margin-bottom: 0; color: var(--ink-70); }

/* Soortlabel op de kaart (14 aug 2026, kleur toegevoegd op verzoek van de eigenaar dezelfde dag —
   de eerste versie onderscheidde met een stippellijn en die viel lelijk uit).

   De regel die dit oplost: **de soort-as leeft in het blauw, het oordeel in de warme
   kleuren.** Jade/rust/amber blijven gereserveerd voor "houdt stand · hype · mixed"; een
   soort is geen oordeel, dus een blauwpaar kan het afgeschafte verdict-label niet opnieuw
   bouwen (§3b, gate R-KLEUR bewaakt dat de kaart zélf geen oordeelskleur draagt).
   Onderscheid = donker tegenover licht binnen ons eigen blauw: 5,47:1 uit elkaar, dus ook
   op afstand en in grijstinten tellbaar. Het wóórd staat er altijd bij, dus het label werkt
   ook zonder kleur (R-SOORT).
   Nagemeten 14 aug: cream op navy 8,11:1 · inkt op sky 9,11:1 · sky-rand tegen de kaart
   4,21:1 (UI-grens vraagt 3,0). Niet verruimen zonder opnieuw te meten. */
.kind {
  display: inline-block; margin-right: .5rem; padding: .12rem .5rem;
  background: var(--masthead); color: var(--cream);
  border: 1.5px solid var(--masthead); font-weight: 700; letter-spacing: .1em;
}
.kind.ghost { background: var(--sky); color: var(--ink); border-color: var(--sky-deep); }

/* Soortfilter boven het raster. Secundair aan de kaarten: het is een hulpmiddel,
   geen navigatie. Zonder JS blijft alles zichtbaar (de knoppen doen dan niets). */
.libfilter { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.8rem; }
.libfilter-label { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-45); font-weight: 700; margin-right: .2rem; }
.libpill {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-70); background: transparent;
  border: 1.5px solid var(--ink-22); border-radius: 999px; padding: .34rem .8rem;
  cursor: pointer; transition: background .13s ease, color .13s ease, border-color .13s ease;
}
.libpill:hover { border-color: var(--ink); color: var(--ink); }
.libpill[aria-pressed="true"] { background: var(--masthead); border-color: var(--masthead); color: var(--cream); }
.libpill:focus-visible { outline: 2px solid var(--amber-deep); outline-offset: 2px; }
.libcount { margin: .8rem 0 0; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-45); }
.libempty { margin: 1rem 0 0; font-size: .95rem; color: var(--ink-70); }

/* callout */
.note { background: var(--paper-hi); border-left: 3px solid var(--amber); padding: 1.1rem 1.4rem; margin-top: 1.6rem; font-size: .97rem; color: var(--ink-70); }
.note.evidence { border-left-color: var(--jade); }
.note b { color: var(--ink); }

/* key takeaways */
.takeaways { background: var(--paper-hi); border: 1.5px solid var(--ink-22); border-top: 4px solid var(--jade); padding: 1.5rem 1.6rem; margin-top: 2rem; }
.takeaways h3 { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-45); margin: 0 0 .6rem; }
.takeaways ul { margin: 0; padding-left: 1.2rem; }
.takeaways li { margin-top: .5rem; color: var(--ink-70); font-size: .98rem; line-height: 1.5; }
.takeaways li b { color: var(--ink); }
.takeaways li::marker { color: var(--jade-deep); }

/* resource rows */
.reslist { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.res { background: var(--paper-hi); border: 1.5px solid var(--ink-22); padding: 1.3rem 1.4rem; }
.res h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.25rem; }
.res h3 a { color: var(--navy); text-decoration: none; border-bottom: 1.5px solid var(--amber); }
.res .meta { font-family: var(--mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-45); margin-top: .3rem; font-weight: 700; }
.res p { font-size: .95rem; color: var(--ink-70); margin-top: .6rem; }
.res .verdict { font-size: .9rem; margin-top: .6rem; color: var(--ink-70); }
.res .verdict b { color: var(--jade-deep); }
.res .verdict.care b { color: var(--amber-deep); }

/* oude signup-block (gecentreerd) */
.signup-block { max-width: 44rem; margin: 0 auto; text-align: center; padding: clamp(3rem, 7vw, 5rem) var(--gutter); border-top: 1px solid var(--ink-10); }
.signup-block .kicker { color: var(--ink-45); }
.signup-block h2, .signup-block .lead { margin-left: auto; margin-right: auto; }
.signup-block .signup { justify-content: center; }

/* oude footer-grid */
.foot-grid { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; justify-content: space-between; }
.foot-brand .wm { font-family: var(--serif); font-size: 1.2rem; color: var(--cream); }
/* .foot-col h2: gedeclareerd in de footer-sectie hierboven (duplicaat verwijderd 11 aug 2026) */
.foot-col a { display: block; font-size: .88rem; color: rgba(247, 240, 227, .78); text-decoration: none; margin-top: .45rem; }
.foot-col a:hover { color: var(--cream); }

/* categoriekleuren ook op de legacy-nav */
.top .nav a.nl-library { color: var(--amber-on-navy); }
.top .nav a.nl-library:hover { color: var(--cream); }

/* "How we checked" — verificatienotitie onder de bronnenlijst van elke publicatie.
   Hoort bij de tegenleesregel in CLAUDE.md: elke pagina met cijfers zegt zelf waar ze
   vandaan komen, wat we wel en niet gelezen hebben, en waar je een fout kunt melden. */
.fineprint {
  margin-top: 1.6rem;
  padding: 1rem 1.2rem;
  border: 1px dashed var(--ink-22);
  background: var(--paper-hi);
  font-size: .86rem;
  line-height: 1.65;
  color: var(--ink-70);
}
.fineprint b { color: var(--ink); }
.prose sup a { text-decoration: none; font-weight: 600; }

/* Skip-link: eerste tabstop op elke pagina, springt over nav + breadcrumbs heen.
   Onzichtbaar tot hij focus krijgt. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--masthead); color: var(--cream);
  padding: .7rem 1.1rem; font-family: var(--mono); font-size: .8rem;
  border-radius: 0 0 6px 0; text-decoration: none;
}
.skip:focus { left: 0; }

/* Het antwoord in gewone woorden onder de Proof Stack. Verving de verdict-chip:
   sinds 8 aug 2026 kent PoR geen verdict-label meer (protocol §9) — een stempel maakt
   zich los van het bewijs, een zin niet. */
.stackanswer {
  margin: 1rem auto 0; font-family: var(--serif); font-size: 1.02rem; line-height: 1.45;
  color: var(--ink); max-width: 26rem;
}

/* Publicatiedatum onder de kop. Elke publicatie draagt er een (besluit eigenaar, 8 aug 2026),
   in dd/mm/yyyy. Twee datums als het stuk herzien is: wanneer het verscheen en wanneer we
   het voor het laatst tegen de bronnen hebben gelegd. Een lezer die wil weten of iets nog
   geldt, hoeft dan niet te gokken. */
.byline {
  margin: .2rem 0 1.2rem; font-family: var(--mono); font-size: .74rem;
  letter-spacing: .04em; color: var(--ink-45);
}

/* ── Figuren ──────────────────────────────────────────────────────────────────
   Minimaal 5 per publicatie (protocol §Figuren). Ze worden gebouwd met
   method/figure.py op 1200×675 en dragen hun eigen kop, bron en logostrip — de
   pagina hoeft er dus niets omheen te zetten behalve ruimte en een bijschrift.
   width/height staan verplicht in de <img> zelf: zonder die twee verspringt de
   tekst tijdens het laden (layout shift). */
.prose figure { margin: 2.2rem 0; }
.prose figure img {
  display: block; width: 100%; height: auto;
  border: 1.5px solid var(--ink-22); background: var(--paper-hi);
}
.prose figcaption {
  margin-top: .7rem; font-family: var(--mono); font-size: .74rem; line-height: 1.55;
  color: var(--ink-70); letter-spacing: .01em;
}
.prose figcaption b { color: var(--ink); }

/* ── Datatabel ────────────────────────────────────────────────────────────
   Toegevoegd 20 aug 2026 voor de valutavergelijking in what-the-market-is.
   Bewust sober: kaartwit paneel zoals .note en .takeaways, hairlines in
   plaats van randen, mono-cijfers zodat kolommen uitlijnen. ⛔ Géén
   oordeelskleur — een tabel is een meting, geen uitspraak (protocol §3b,
   gate R-KLEUR). Scrollt horizontaal mee op smalle schermen in plaats van
   de leeskolom op te rekken. */
.datatable { width: 100%; border-collapse: collapse; margin: 1.6rem 0;
  background: var(--paper-hi); font-size: .95rem; display: block;
  overflow-x: auto; }
.datatable caption { caption-side: bottom; text-align: left; padding: .8rem 1rem 0;
  font-size: .88rem; color: var(--ink-70); line-height: 1.5; }
.datatable th, .datatable td { padding: .6rem 1rem; text-align: right;
  border-bottom: 1px solid var(--ink-10); white-space: nowrap; }
.datatable thead th { font-family: var(--mono, Menlo, monospace); font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-70);
  border-bottom: 1px solid var(--ink-22); font-weight: 600; }
.datatable tbody th { text-align: left; color: var(--ink); font-weight: 700; }
.datatable td { font-variant-numeric: tabular-nums; color: var(--ink); }
.datatable tbody tr:last-child th, .datatable tbody tr:last-child td { border-bottom: none; }

/* ── Kopbeeld ─────────────────────────────────────────────────────────────
   Regel eigenaar, 20 aug 2026: elk stuk opent
   met beeld bij de kop. Breder dan de leeskolom (52rem incl. gutter) maar binnen het kader,
   zodat het als opening leest en niet als zomaar de eerste figuur. Op smalle
   schermen valt het terug op de gewone kolombreedte.
   ⚠️ Bij EP moest dit buiten de wrap staan omdat hun artikel een tweekoloms-raster
   is; .prose hier is één kolom, dus het mag gewoon in de stroom. */
/* ⚠️ Even breed als de tekst, niet als het kader (besluit 20 aug 2026 — tweede versie).
   De eerste opzet zette dit op --maxw (1080px), overgenomen van een ouder ontwerp. Daar
   werkt dat: hun artikel staat naast een zijkolom van 316px, dus het kopbeeld loopt over
   iets heen dat er óók is. Bij ons staat naast de leeskolom niets, dus stak het beeld
   196px per kant de witruimte in en zweefde het los van het stuk. Nu volgt het gewoon de
   kolom, net als de zes datafiguren — één linkerrand voor alles op de pagina. */
.prose figure.herofig { margin: 2.4rem 0 2.8rem; }
.prose figure.herofig img { border: none; }

/* ── Hele kaart klikbaar ───────────────────────────────────────────────────
   Regel eigenaar, 20 aug 2026: een gepubliceerde kaart is
   op /library zélf een <a>, niet een <article> met een linkje in de kop. Een
   wachtrijkaart blijft een <article> — die mag juist niet klikbaar zijn, want
   dat stuk bestaat nog niet (gate R-WACHTRIJ bewaakt beide kanten).
   ⚠️ Nooit een <a> ín deze kaart zetten: geneste links zijn ongeldige HTML en
   een schermlezer maakt er twee doelen van. De hele kaart is het doel. */
a.check-card { text-decoration: none; color: inherit; position: relative; overflow: hidden; }
a.check-card h3 { color: var(--ink); }
a.check-card:hover { border-color: var(--ink-45); }
a.check-card:hover h3 { text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 3px; }
a.check-card:hover .go { color: var(--ink); }
a.check-card:focus-visible { outline: 3px solid var(--amber-deep); outline-offset: 2px; }

/* Het kopbeeld van het stuk als doorschijnend watermerk, zoals bij EP. Staat
   achter de tekst, wordt genegeerd door schermlezers, en verdwijnt als iemand
   minder beweging/contrast wil. Alleen zichtbaar als de kaart een --wm meekrijgt. */
a.check-card[style*="--wm"]::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--wm); background-size: cover; background-position: center;
  opacity: .16; pointer-events: none;
}
a.check-card > * { position: relative; z-index: 1; }
@media (prefers-contrast: more) {
  a.check-card[style*="--wm"]::before { opacity: 0; }
}

/* Correctielogboek op een check. Stond tot 27 aug 2026 als één blok proza van 800
   woorden in de fine print; eerlijk maar onleesbaar, en dat is geen kleinigheid bij
   het enige onderdeel van de pagina waar we onze eigen fouten opbiechten. Een lezer
   die het niet dóórkomt, leest de correcties niet. */
.corrlog { margin: .8rem 0 0; padding-left: 1.4rem; }
.corrlog li { margin-bottom: .85rem; }
.corrlog li:last-child { margin-bottom: 0; }