:root {
    --ink: #0d0d0d;
    --paper: #f5f0e8;
    --aged: #e8dfc8;
    --red: #c0392b;
    --red-dark: #922b21;
    --gold: #b8860b;
    --grey: #6b6b6b;
    --grey-light: #9e9e9e;
    --slate: #2c3e50;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Lora', Georgia, serif;
    font-size: 17px;
    line-height: 1.75;
    overflow-x: hidden;
  }
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1000;
    opacity: 0.4;
  }
  a { color: var(--red-dark); text-decoration: underline; text-underline-offset: 3px; }
  a:hover { color: var(--red); }

  .masthead {
    background: var(--ink);
    color: var(--paper);
    padding: 12px 0;
    text-align: center;
    letter-spacing: 0.3em;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    text-transform: uppercase;
  }
  .masthead a { color: var(--aged); text-decoration: none; }

  /* TAGLINE-BAND — satirische 'reclame' */
  .tagline-band {
    background: var(--red-dark);
    color: var(--paper);
    text-align: center;
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: clamp(14px, 1.7vw, 17px);
    line-height: 1.4;
    padding: 11px 18px;
  }
  .tagline-band .brand { font-style: normal; font-weight: 700; }
  .tagline-band .reg { font-style: normal; font-size: 0.62em; vertical-align: super; }

  /* ANCHOR NAV */
  .anchor-nav {
    background: var(--paper);
    border-bottom: 1px solid var(--ink);
    position: sticky;
    top: 0;
    z-index: 50;
    overflow-x: auto;
    white-space: nowrap;
  }
  .anchor-nav-inner { display: inline-flex; }
  .anchor-nav a {
    display: inline-block;
    padding: 13px 18px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--grey);
    text-decoration: none;
    border-right: 1px solid var(--aged);
    transition: background 0.15s, color 0.15s;
  }
  .anchor-nav a:hover { background: var(--ink); color: var(--paper); }

  .wrap { max-width: 1100px; margin: 0 auto; padding: 0 40px; }
  @media (max-width: 700px){ .wrap { padding: 0 18px; } }

  /* HERO */
  .hero {
    background: var(--ink);
    color: var(--paper);
    border-bottom: 4px solid var(--red);
    padding: 64px 0 56px;
  }
  .hero-kicker {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--red);
    text-transform: uppercase;
    margin-bottom: 26px;
  }
  .ratio {
    display: flex;
    align-items: baseline;
    gap: 22px;
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    line-height: 0.9;
    margin-bottom: 24px;
  }
  .ratio .one { font-size: clamp(80px, 16vw, 200px); color: var(--paper); }
  .ratio .vs {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: clamp(16px, 3vw, 28px);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--grey-light);
    align-self: center;
  }
  .ratio .fifty { font-size: clamp(80px, 16vw, 200px); color: var(--red); }
  .hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 30px;
    max-width: 1000px;
  }
  .hero h1 em { font-style: italic; color: #e88; }

  /* EPIGRAPH — uitgelicht kopje boven een alinea */
  .epigraph {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(20px, 2.6vw, 30px);
    line-height: 1.3;
    color: var(--paper);
    max-width: 900px;
    margin: 0 0 28px;
    padding-left: 22px;
    border-left: 4px solid var(--red);
  }
  .epigraph em { font-style: italic; color: #e88; }
  section:not(.dark) .epigraph { color: var(--ink); }

  /* HERO CITE — bronverwijzing onder de kop */
  .hero-cite {
    font-family: 'Lora', serif;
    font-size: clamp(15px, 1.7vw, 18px);
    line-height: 1.55;
    color: #c9c2b4;
    max-width: 820px;
    margin: 18px 0 30px;
    padding-left: 16px;
    border-left: 3px solid var(--red);
  }
  .hero-cite em { font-style: italic; color: #ece7db; }
  .hero-cite a {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.82em;
    color: #e88;
    text-decoration: none;
    border-bottom: 1px solid rgba(238,136,136,0.5);
    white-space: nowrap;
  }
  .hero-cite a:hover { color: var(--paper); border-bottom-color: var(--paper); }
  .hero h1 .tm {
    font-size: 0.32em;
    vertical-align: super;
    font-weight: 400;
    letter-spacing: 0;
  }
  .hero h1 .tm a { color: #e88; text-decoration: none; }

  /* HERO LEAD — these in onze woorden */
  .hero-lead {
    font-family: 'Lora', serif;
    font-size: clamp(19px, 2.3vw, 24px);
    line-height: 1.5;
    color: #ece7db;
    max-width: 880px;
    margin: 0 0 34px;
  }
  .hero-lead strong { color: var(--paper); }
  .hero-lead em { color: #e88; font-style: italic; }

  /* HERO SOURCE — herkomst + link naar schijnfraude.com */
  .hero-source {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: #c9c2b4;
    max-width: 880px;
    margin: -10px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.14);
  }
  .hero-source strong { color: var(--paper); }
  .hero-source a {
    color: #e88;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(238,136,136,0.5);
    white-space: nowrap;
  }
  .hero-source a:hover { color: var(--paper); border-bottom-color: var(--paper); }

  /* HERO QUOTE — epigraaf */
  .hero-quote {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(19px, 2.5vw, 28px);
    line-height: 1.3;
    color: var(--paper);
    max-width: 860px;
    margin: 0 0 40px;
    padding: 6px 0 6px 24px;
    border-left: 3px solid var(--red);
  }
  .hero-quote em { font-style: italic; color: #e88; }

  /* HERO DECKS — tweekoloms */
  .hero-decks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 48px;
    max-width: 920px;
  }
  .hero .deck {
    font-size: 17px;
    line-height: 1.72;
    color: #d8d2c4;
    margin: 0;
    max-width: none;
  }
  .hero .deck strong { color: var(--paper); }
  .hero .deck a { color: #e88; }
  @media (max-width: 720px) {
    .hero-decks { grid-template-columns: 1fr; gap: 22px; }
  }

  /* HERO FOOTNOTE */
  .hero-foot {
    margin-top: 40px;
    max-width: 900px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12.5px;
    line-height: 1.7;
    color: #b0aa9c;
    border-top: 1px solid #3a3a3a;
    padding-top: 16px;
  }
  .hero-foot .ast { color: #e88; font-weight: 700; }
  .hero-foot strong { color: var(--paper); }

  /* SECTION BASE */
  section.block { padding: 64px 0; border-bottom: 1px solid var(--aged); }
  section.dark { background: #160a0a; color: var(--paper); border-bottom: 3px solid var(--red); }
  .kicker {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--red-dark);
    margin-bottom: 16px;
  }
  section.dark .kicker { color: #e88; }
  h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(26px, 3.6vw, 40px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin-bottom: 18px;
  }
  h2 em { font-style: italic; color: var(--red-dark); }
  section.dark h2 em { color: #e88; }
  .lead { font-size: 19px; line-height: 1.7; max-width: 800px; margin-bottom: 8px; }
  p.body { font-size: 17px; line-height: 1.75; max-width: 800px; margin-top: 16px; }
  section.dark p.body { color: #ddd; }

  /* DE OPTELSOM — 50 grid */
  .tally {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 7px;
    max-width: 560px;
    margin: 28px 0 8px;
  }
  .tally .cell {
    aspect-ratio: 1 / 1;
    border-radius: 2px;
    opacity: 0.92;
  }
  .tally .cell.me { outline: 3px solid var(--paper); outline-offset: 1px; }
  @media (max-width: 560px){ .tally { gap: 5px; } }

  .legend { list-style: none; margin: 26px 0 0; max-width: 640px; }
  .legend li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    color: #ccc;
  }
  .legend .swatch { width: 16px; height: 16px; border-radius: 2px; flex: none; }
  .legend .lg-label { flex: 1; }
  .legend .lg-count { font-weight: 500; color: var(--paper); }
  .legend .lg-total { color: var(--red); border-bottom: none; padding-top: 14px; font-size: 14px; }

  /* POGINGEN */
  .pogingen { counter-reset: pog; max-width: 820px; margin-top: 10px; }
  .poging {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 20px;
    padding: 22px 0;
    border-top: 1px solid var(--aged);
  }
  .poging:last-child { border-bottom: 1px solid var(--aged); }
  .poging .num {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 40px;
    color: var(--red);
    line-height: 1;
  }
  .poging h3 { font-family: 'Playfair Display', serif; font-size: 21px; font-weight: 700; margin-bottom: 6px; }
  .poging p { font-size: 16px; color: #444; }
  .poging .tag {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--paper);
    background: var(--grey);
    padding: 2px 8px;
    border-radius: 2px;
    margin-top: 8px;
  }
  .poging .tag.fail { background: var(--red-dark); }

  .verdict {
    border-left: 4px solid var(--gold);
    padding: 6px 0 6px 24px;
    margin-top: 26px;
    max-width: 800px;
    font-size: 20px;
    line-height: 1.6;
    font-style: italic;
  }
  section.dark .verdict { color: var(--paper); }
  .verdict cite { display:block; font-style: normal; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.1em; color: var(--gold); margin-top: 12px; text-transform: uppercase; }

  /* DE SPELERS — uitschuifbare lijst */
  .roster { max-width: 840px; margin-top: 24px; border-top: 1px solid var(--ink); }
  .speler { border-bottom: 1px solid var(--aged); }
  .speler summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 4px;
    font-family: 'Playfair Display', serif;
  }
  .speler summary::-webkit-details-marker { display: none; }
  .speler summary::before {
    content: '▶';
    font-size: 0.66rem;
    color: var(--red);
    transition: transform 0.2s;
    flex: none;
  }
  .speler[open] summary::before { transform: rotate(90deg); }
  .speler summary:hover::before { color: var(--gold); }
  .s-num { font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 400; color: var(--grey); min-width: 26px; flex: none; }
  .s-name { font-size: 21px; font-weight: 700; color: var(--ink); }
  .speler summary:hover .s-name { color: var(--red); }
  .s-role { margin-left: auto; text-align: right; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-dark); }
  .speler[data-flip] .s-role { color: var(--gold); }
  .s-body { padding: 2px 0 20px 42px; max-width: 720px; }
  .s-body p { font-size: 16px; line-height: 1.65; color: #444; margin-bottom: 12px; }
  .s-body a.s-link { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: 2px; }
  .s-body a.s-link:hover { color: var(--red); }
  /* VIDEO-SLOT per speler */
  .s-video { max-width: 560px; margin: 12px 0; }
  .s-video video, .s-video iframe { width: 100%; aspect-ratio: 16 / 9; display: block; border: 1px solid var(--aged); background: #000; border-radius: 2px; }
  .s-video figcaption { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--grey); margin-top: 6px; }
  .s-video-ph { display: flex; align-items: center; gap: 10px; max-width: 560px; margin: 12px 0; padding: 14px 16px; border: 1px dashed var(--grey-light); border-radius: 2px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--grey); background: rgba(0,0,0,0.02); }
  /* BIJLAGEN per speler */
  .s-files { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; max-width: 600px; }
  .s-file { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--aged); border-radius: 2px; text-decoration: none; color: var(--ink); font-size: 14px; transition: border-color .15s, background .15s; }
  .s-file:hover { border-color: var(--red); background: rgba(192,57,43,0.04); color: var(--red); }
  .s-file .fi { font-size: 16px; flex: none; }
  .s-file em { margin-left: auto; font-style: normal; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-light); }
  section.dark .s-file { color: var(--paper); border-color: rgba(245,240,232,0.28); }
  section.dark .s-file:hover { color: #e88; border-color: #e88; background: rgba(224,130,120,0.08); }
  @media (max-width: 620px){
    .speler summary { flex-wrap: wrap; }
    .s-role { margin-left: 42px; text-align: left; width: 100%; }
    .s-body { padding-left: 26px; }
  }
  .fictief-note { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.05em; color: var(--grey); margin-top: 22px; border-top: 1px dashed var(--grey-light); padding-top: 14px; max-width: 720px; }

  /* REFREIN-STRIP — hun slogan omgedraaid */
  .refrain { background: var(--ink); color: var(--paper); text-align: center; padding: 46px 24px; border-top: 3px solid var(--red); border-bottom: 3px solid var(--red); }
  .refrain .official { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
  .refrain .real { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(26px, 4.6vw, 48px); line-height: 1.1; letter-spacing: -0.01em; max-width: 900px; margin: 0 auto; }
  .refrain .real em { font-style: italic; color: #e88; }
  .refrain .sub { margin: 20px auto 0; max-width: 780px; font-family: 'Lora', serif; font-style: italic; font-size: clamp(15px, 2vw, 19px); line-height: 1.6; color: #cfc8b8; }
  .refrain .sub strong { color: var(--paper); font-style: normal; }

  /* OFFICIEEL CITAAT */
  .official-quote { border-left: 4px solid var(--gold); background: #fbf7ee; padding: 18px 22px; margin: 22px 0 6px; max-width: 820px; font-family: 'Lora', serif; font-style: italic; font-size: 17px; line-height: 1.65; color: #333; }
  .official-quote .src { display: block; font-style: normal; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--grey); margin-top: 13px; }
  .official-quote .src a { color: var(--red-dark); }

  /* READER-CHECK — directe aanspreking */
  .reader-check {
    max-width: 780px;
    margin: 34px 0;
    padding: 28px 32px;
    background: var(--aged);
    border-left: 4px solid var(--red);
  }
  .reader-check p {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink);
    margin: 0 0 14px;
  }
  .reader-check .punch {
    font-family: 'Playfair Display', serif;
    font-style: normal;
    font-weight: 800;
    font-size: clamp(20px, 2.4vw, 27px);
    line-height: 1.25;
    color: var(--red-dark);
    margin: 18px 0 0;
  }

  /* STATEMENT — groot openingsstatement onder de hero */
  .statement { max-width: 940px; margin: 0 auto; text-align: center; }
  .statement::before { content: ""; display: block; width: 64px; height: 4px; background: var(--red); margin: 0 auto 28px; }
  .statement p {
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    font-size: clamp(23px, 3.1vw, 38px);
    line-height: 1.22;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
  }
  .statement p strong { color: var(--red-dark); font-weight: 800; }
  .statement .tail {
    display: block;
    margin-top: 20px;
    font-family: 'Lora', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(16px, 1.8vw, 21px);
    line-height: 1.5;
    color: var(--grey);
  }

  /* PULL-QUOTE — eigen stellingname, geen bron */
  .pullquote { max-width: 760px; margin: 40px auto; text-align: center; }
  .pullquote p { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500; font-size: clamp(22px, 3vw, 32px); line-height: 1.3; color: var(--ink); margin: 0; }
  .pullquote p em { color: var(--red-dark); font-style: italic; }
  .pullquote::before { content: ""; display: block; width: 56px; height: 3px; background: var(--red); margin: 0 auto 24px; }
  .pullquote::after { content: ""; display: block; width: 56px; height: 3px; background: var(--red); margin: 24px auto 0; }
  section.dark .pullquote p { color: var(--paper); }
  section.dark .pullquote p em { color: var(--gold); }

  /* BELOFTE vs REALITEIT */
  .contrast-head { font-family: 'Playfair Display', serif; font-size: clamp(20px, 2.6vw, 28px); font-weight: 700; line-height: 1.2; margin-top: 36px; margin-bottom: 4px; }
  .contrast-head em { font-style: italic; color: var(--red-dark); }
  .contrast { max-width: 860px; margin-top: 18px; border-top: 2px solid var(--ink); }
  .contrast .row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--aged); }
  .contrast .promise, .contrast .reality { padding: 14px 18px; font-size: 16px; line-height: 1.5; }
  .contrast .promise { color: var(--grey); border-right: 1px solid var(--aged); text-decoration: line-through; text-decoration-color: var(--grey-light); }
  .contrast .reality { color: var(--ink); }
  .contrast .tag { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 5px; text-decoration: none; }
  .contrast .promise .tag { color: var(--grey-light); }
  .contrast .reality .tag { color: var(--red); }
  .contrast .reality strong { color: var(--red-dark); }
  @media (max-width: 620px){
    .contrast .row { grid-template-columns: 1fr; }
    .contrast .promise { border-right: none; border-bottom: 1px dashed var(--aged); }
  }

  /* CLAIMS LIST */
  .claims { list-style: none; max-width: 840px; margin: 22px 0 0; }
  .claims li { position: relative; padding: 13px 0 13px 30px; border-bottom: 1px solid var(--aged); font-size: 17px; line-height: 1.6; color: #3a3a3a; }
  .claims li::before { content: '▸'; position: absolute; left: 4px; top: 13px; color: var(--red); }
  .claims li strong { color: var(--ink); }
  section.dark .claims li { border-bottom-color: rgba(255,255,255,0.12); color: #ddd; }
  section.dark .claims li strong { color: var(--paper); }

  /* SUBKOP */
  .subhead { font-family: 'Playfair Display', serif; font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; line-height: 1.25; margin-top: 34px; margin-bottom: 6px; }
  .subhead .n { color: var(--red); }

  /* FOOTER */
  footer { background: var(--ink); color: var(--grey-light); padding: 50px 0 40px; }
  footer .cross { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 26px; }
  footer .cross a { color: var(--aged); font-family:'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.1em; text-decoration: none; }
  footer .cross a:hover { color: var(--red); }
  footer .fine { font-family:'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--grey); }
/* DE 3 FASEN */
.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
@media (max-width: 760px){ .phases { grid-template-columns: 1fr; } }
.phase { border: 1px solid var(--aged); border-top: 4px solid var(--red); background: #fff; padding: 22px 20px; }
.phase .pf-num { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 46px; line-height: 1; color: var(--red); }
.phase h3 { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; margin: 8px 0; line-height: 1.2; }
.phase p { font-size: 15px; line-height: 1.6; color: #555; }
.phase .pf-tag { display: inline-block; margin-top: 12px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }