/* devlog.sjoeff.com (v7, 11-11): Instrument Sans voor de tekst, IBM Plex Mono voor de kleine gegevens, een accent (paars).
   Palet: gunmetal, staalachtig grijsblauw; gebroken wit voor licht. Opbouw: dezelfde kop en lijn op elke pagina, het
   middenstuk GECENTREERD, rechts een kleine zijbalk (in een artikel: de inhoud en de artikelen; op de lijst: wat komt en
   wie schrijft). Het kenmerk blijft de KNOOP: een commit op een lijn; HEAD in het accent. Het merk is overal een knoop
   voor de naam. */
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-latin.woff2?v=8b74e9bc") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-Italic-latin.woff2?v=9519d501") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Regular-latin.woff2?v=08949f72") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Medium-latin.woff2?v=01d28544") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-SemiBold-latin.woff2?v=0d1f0b8d") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;
  --bg: #e9ebee;              /* gebroken wit, een vleug staal */
  --vlak: #dfe2e6;
  --inkt: #22272e;            /* gunmetal, geen zwart */
  --zacht: #59616c;
  --dun: #858d97;
  --lijn: #cbd0d6;
  --accent: #5b34a8;          /* paars: 7,3:1 op de achtergrond */
  --term: #1c2027;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --rand: 48px;
  --maat: 66ch;
  --knoop: 11px;
  --midden: 680px;
  --zij: 220px;
  --zij-gat: 40px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #262b32; --vlak: #30363e; --inkt: #e4e7ea; --zacht: #a7aeb7; --dun: #7a828c; --lijn: #414951; --accent: #b39dfc; --term: #1b1f25; }
  ::selection { color: #262b32; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 32px; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--inkt);
  font-family: var(--sans); font-size: 17.5px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent); }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: #fff; }
.mono { font-family: var(--mono); font-size: 12.5px; line-height: 1.65; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.weg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- de knoop ---------- */
.knoop { display: inline-block; width: var(--knoop); height: var(--knoop); border-radius: 50%; border: 1.5px solid currentColor; background: var(--bg); position: relative; flex: none; }
.knoop--head { color: var(--accent); background: var(--accent); }
.knoop--head::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; }
.knoop--volgend { background: var(--bg); color: var(--dun); }
.head { color: var(--accent); font-weight: 500; }

/* ---------- kop en voet: op elke pagina dezelfde; het merk is een knoop voor de naam ---------- */
.merk { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; view-transition-name: merk; }
.merk b { font-weight: 700; letter-spacing: 0.14em; font-size: 15px; }
.merk .knoop { width: 10px; height: 10px; }
.merk .mono { color: var(--zacht); margin-left: 2px; }
.merk:hover { color: inherit; }
.merk:hover .mono { color: var(--accent); }
.kop { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--rand); height: 84px; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 15px; }
.kop nav { display: flex; gap: 24px; }
.kop nav a { color: var(--zacht); text-decoration: none; }
.kop nav a:hover { color: var(--accent); }
.kop nav a[aria-current] { color: var(--inkt); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.spoor { width: calc(100% - 2 * var(--rand)); max-width: calc(1440px - 2 * var(--rand)); height: 1.5px; margin: 0 auto; background: var(--inkt); view-transition-name: spoor; transform-origin: left center; }
.voet { width: 100%; max-width: 1440px; margin: auto auto 0; padding: 28px var(--rand) 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; font-size: 14px; color: var(--zacht); }
.voet nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.voet a { text-decoration: none; }
.voet p { margin: 0; }

/* ---------- het raam: het middenstuk in het midden van de pagina, de zijbalk rechts ernaast ---------- */
.raam { width: 100%; max-width: 1440px; margin: 0 auto; padding: 44px var(--rand) 88px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--midden)) minmax(0, 1fr); align-items: start; }
.midden { grid-column: 2; grid-row: 1; min-width: 0; }   /* grid-row 1: de zijbalk staat eerder in de DOM, anders zet de grid het middenstuk in rij 2 (zijn lege vlak, 11-11) */
.zij { grid-column: 3; grid-row: 1; justify-self: start; width: calc(var(--zij) + var(--zij-gat)); padding-left: var(--zij-gat); position: sticky; top: 28px; max-height: calc(100vh - 56px); overflow-y: auto; scrollbar-width: thin; font-size: 14px; }
.zij__knop { display: none; }
.zij__label { margin: 0 0 8px; color: var(--dun); }
.zij__label:not(:first-child) { margin-top: 30px; }
.zij__zin { margin: 0; color: var(--zacht); font-size: 14px; line-height: 1.5; }
.zij__over { display: inline-flex; align-items: center; min-height: 32px; margin-top: 6px; color: var(--zacht); text-decoration: none; }
.zij__over:hover { color: var(--accent); }
.zij__over[aria-current] { color: var(--inkt); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.zij__volgende { display: grid; grid-template-columns: 11px minmax(0, 1fr); column-gap: 12px; align-items: baseline; margin: 0; padding: 0; }
.zij__volgende[hidden] { display: none; }
.zij__volgende .knoop { align-self: start; margin-top: 5px; }
.zij__tijd { color: var(--accent); font-weight: 500; }
.legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.legenda li span:last-child { display: block; color: var(--zacht); padding-left: 14px; line-height: 1.45; font-size: 13.5px; }

/* de artikelen als graaf (in een artikel: het open artikel in het accent) */
.zij__graaf { list-style: none; margin: 0; padding: 0; position: relative; }
.zij__graaf::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 12px; width: 1.5px; background: var(--lijn); transform-origin: top; }
.zij__bericht > a { display: grid; grid-template-columns: 11px minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 5px 0; text-decoration: none; color: var(--zacht); font-size: 14px; line-height: 1.35; }
.zij__bericht > a .knoop { align-self: start; margin-top: 4px; position: relative; z-index: 1; color: var(--dun); }
.zij__bericht > a:hover { color: var(--accent); }
.zij__bericht > a:hover .knoop:not(.knoop--head) { color: var(--accent); }
.zij__bericht.is-open > a { color: var(--inkt); font-weight: 600; }
.zij__bericht.is-open > a .knoop { color: var(--accent); background: var(--accent); }
.zij__nr { color: var(--dun); margin-right: 8px; }
.zij__bericht.is-open > a .zij__nr { color: var(--accent); }

/* de inhoud van het open artikel: een rail, gelezen vol, waar je bent het accent */
.inhoud { list-style: none; margin: 0; padding: 0; position: relative; }
.inhoud::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1.5px; background: var(--lijn); }
.inhoud li { position: relative; }
.inhoud li.inhoud__voortgang { position: absolute; left: 4px; top: 8px; width: 1.5px; height: 0; background: var(--accent); transition: height .35s ease; }
.inhoud a { display: flex; gap: 12px; align-items: flex-start; padding: 4px 0; color: var(--zacht); text-decoration: none; line-height: 1.35; }
.inhoud a .knoop { width: 9.5px; height: 9.5px; margin-top: 4px; color: var(--dun); z-index: 1; }
.inhoud a:hover { color: var(--accent); }
.inhoud a[data-gelezen="true"] .knoop { background: var(--dun); }
.inhoud a[aria-current="true"] { color: var(--inkt); }
.inhoud a[aria-current="true"] .knoop { color: var(--accent); background: var(--accent); }

/* ---------- het middenstuk ---------- */
.stuk__regel { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 0 0 14px; color: var(--dun); }
.stuk__regel a { color: var(--zacht); }
.midden h1 { font-size: 46px; line-height: 1.04; font-weight: 600; font-stretch: 88%; letter-spacing: -0.03em; margin: 0 0 26px; max-width: 18ch; text-wrap: balance; }
.stuk__dek { font-size: 20px; line-height: 1.5; color: var(--zacht); margin: 0 0 40px; max-width: 34em; padding-bottom: 32px; border-bottom: 1px solid var(--lijn); }
.lijst__dek { font-size: 18px; line-height: 1.55; color: var(--zacht); margin: -8px 0 36px; max-width: 36em; }

/* de lijst: elk artikel een kaart die er klikbaar uitziet */
.berichten { list-style: none; margin: 0; padding: 0; }
.regel a { display: grid; grid-template-columns: minmax(0, 1fr) 150px; column-gap: 24px; padding: 22px 24px 18px; margin-bottom: 18px; border: 1px solid var(--lijn); border-radius: 10px; background: var(--bg); text-decoration: none; color: inherit; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.regel a:hover { border-color: var(--accent); background: var(--vlak); box-shadow: 0 0 0 1px var(--accent); }
.regel a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; border-color: var(--accent); background: var(--vlak); }
.regel__k { display: flex; gap: 16px; margin: 0 0 6px; color: var(--dun); }
.regel__in h2 { margin: 0 0 10px; font-size: 25px; line-height: 1.15; font-weight: 600; font-stretch: 90%; letter-spacing: -0.02em; max-width: 30ch; }
.regel__tldr { list-style: none; margin: 0 0 12px; padding: 0; color: var(--zacht); font-size: 15.5px; line-height: 1.5; }
.regel__tldr li { position: relative; padding-left: 1.2em; margin: 0 0 3px; }
.regel__tldr li::before { content: ""; position: absolute; left: 0.1em; top: 0.75em; width: 0.5em; height: 1px; background: var(--dun); }
.regel__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; font-size: 14px; color: var(--zacht); }
.tag { font-family: var(--mono); font-size: 11.5px; padding: 1px 7px; border: 1px solid var(--lijn); border-radius: 4px; color: var(--zacht); }
.regel__duim img { display: block; width: 150px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: var(--vlak); }
.regel__lees { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; font-weight: 600; font-size: 15px; color: var(--accent); }
.regel__lees .pijl { width: 18px; height: 18px; transition: transform .15s ease; }
.regel a:hover h2 { color: var(--accent); }
.regel a:hover .regel__lees .pijl, .regel a:focus-visible .regel__lees .pijl { transform: translateX(5px); }
.regel a:hover .regel__lees { text-decoration: underline; text-underline-offset: 0.22em; }
.lijst__einde { color: var(--dun); }

/* een artikel */
.wie { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.wie::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.wie--agents::before { background: currentColor; }
.wie--sjoeff::before { box-shadow: inset 0 0 0 1.5px currentColor; }
.tekst { font-size: 18px; line-height: 1.7; }
.tekst > * > * { max-width: var(--maat); }
.tekst p { margin: 0 0 1.15em; }
.tekst .noot { font-size: 15px; line-height: 1.55; color: var(--zacht); margin-bottom: 2em; }
.tekst h2, .tekst h3 { position: relative; font-weight: 600; font-stretch: 92%; letter-spacing: -0.012em; }
.tekst h2 { font-size: 25px; line-height: 1.22; margin: 2.2em 0 0.6em; }
.tekst h3 { font-size: 20px; line-height: 1.3; margin: 1.8em 0 0.5em; }
.tekst h2::before, .tekst h3::before { display: inline-block; margin-right: 12px; vertical-align: 0.2em; font-family: var(--mono); font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: var(--dun); }
.tekst h2::before { content: "##"; }
.tekst h3::before { content: "###"; }
.tekst h2 a, .tekst h3 a { color: inherit; text-decoration: none; }
.tekst h2 a:hover { color: var(--accent); }
.tekst strong { font-weight: 640; }
.tekst code { font-family: var(--mono); font-size: 0.82em; background: var(--vlak); padding: 0.1em 0.35em; border-radius: 4px; }
.tekst pre { font-family: var(--mono); font-size: 13.5px; line-height: 1.6; background: var(--vlak); padding: 16px 18px; border-radius: 6px; overflow-x: auto; }
.tekst pre code { background: none; padding: 0; font-size: inherit; }
.tekst ul, .tekst ol { margin: 0 0 1.3em; padding: 0; list-style: none; }
.tekst li { position: relative; padding-left: 1.6em; margin: 0 0 0.6em; }
.tekst ul li::before { content: ""; position: absolute; left: 0.25em; top: 0.8em; width: 0.5em; height: 1px; background: var(--zacht); }
.tekst ol { counter-reset: n; }
.tekst ol li { counter-increment: n; padding-left: 2.4em; }
.tekst ol li::before { content: counter(n); position: absolute; left: 0; top: 0.12em; width: 1.6em; height: 1.6em; border: 1px solid var(--lijn); border-radius: 50%; font-family: var(--mono); font-size: 0.72em; line-height: 1.55em; text-align: center; color: var(--zacht); }
.tekst blockquote { margin: 1.5em 0; padding: 0 0 0 1.1em; border-left: 2px solid var(--inkt); color: var(--zacht); }
.tekst figure { margin: 2em 0; }
.tekst figure img { display: block; width: 100%; height: auto; border-radius: 4px; }
.tekst figcaption { margin-top: 10px; font-size: 14px; color: var(--zacht); }
.tekst hr { border: 0; border-top: 1px solid var(--lijn); margin: 2.4em 0; }
.stem { position: relative; }
.stem--anders { padding-left: 20px; border-left: 2px solid currentColor; margin: 0 0 1.4em; }
.stem__wie { display: block; margin: 0 0 6px; }
.stem:not(.stem--anders) .stem__wie { display: none; }
.stuk__slot { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--inkt); display: grid; gap: 16px; }
.stuk__eind { margin: 0; color: var(--dun); }
.bron { margin: 0; color: var(--dun); display: flex; flex-wrap: wrap; gap: 2px 22px; }
.bron div { display: flex; gap: 8px; }
.bron dd { margin: 0; color: var(--zacht); }
.stuk__nav { display: grid; gap: 8px; font-size: 15px; }
.stuk__nav p { margin: 0; color: var(--zacht); }
.stuk__vv { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 28px; }
.stuk__vv a { font-weight: 600; }
.cursor { display: inline-block; width: 0.55em; height: 1.05em; margin-left: 0.3em; vertical-align: -0.16em; background: var(--accent); }

/* about */
.over__kern { font-size: 23px; line-height: 1.4; font-weight: 600; font-stretch: 92%; letter-spacing: -0.015em; }
.over__links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 2em; font-size: 16px; }
.over__links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--accent); }

/* ---------- onderdelen (::: tldr, stats, broke-fixed, note, warning, quote; ```terminal; {labels}) ---------- */
.tekst .blok { position: relative; margin: 1.9em 0; max-width: var(--maat); }
.blok__wie { display: block; margin: 0 0 6px; color: var(--dun); }
.tekst .tldr { background: var(--vlak); border-radius: 2px 8px 8px 2px; padding: 14px 22px 14px; font-size: 16.5px; line-height: 1.5; border-left: 3px solid var(--accent); }
.tldr .blok__wie { color: var(--accent); }
.tekst .tldr ul { margin: 0; }
.tekst .tldr li { margin: 0 0 0.35em; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border-top: 1px solid var(--inkt); border-bottom: 1px solid var(--lijn); }
.stat { padding: 14px 16px 14px 0; }
.stat + .stat { padding-left: 16px; border-left: 1px solid var(--lijn); }
.stat b { display: block; font-size: 34px; line-height: 1.08; font-weight: 600; font-stretch: 85%; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--zacht); }
.tekst .bf { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.bf th { text-align: left; font-weight: 400; font-size: 12px; color: var(--dun); padding: 0 16px 8px 0; border-bottom: 1px solid var(--inkt); width: 50%; }
.bf td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.bf td + td, .bf th + th { padding-left: 16px; border-left: 1px solid var(--lijn); }
.tekst .callout { padding: 2px 0 2px 18px; border-left: 2px solid var(--inkt); font-size: 16.5px; line-height: 1.55; }
.tekst .callout p { margin: 0 0 0.6em; }
.tekst .callout p:last-child { margin-bottom: 0; }
.tekst .callout--warning { border-left-color: var(--accent); }
.callout--warning .blok__wie { color: var(--accent); }
.tekst blockquote.trek { margin: 2em 0; padding: 0; border: 0; color: var(--inkt); }
.trek p { margin: 0; font-size: 26px; line-height: 1.28; font-weight: 600; font-stretch: 88%; letter-spacing: -0.018em; max-width: 30ch; }
.trek::before { content: ">"; display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 13px; color: var(--accent); }
.term { border-radius: 8px; overflow: hidden; background: var(--term); color: #e4e7ea; }
.term figcaption { margin: 0; padding: 8px 14px; font-size: 12px; color: #8a919b; border-bottom: 1px solid #353b44; }
.tekst .term pre { margin: 0; padding: 14px 16px 16px; background: none; border-radius: 0; color: inherit; font-size: 13px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.term .prompt { color: #b39dfc; }
.term .uit { color: #b3bac3; }
@media (prefers-color-scheme: dark) { .term { border: 1px solid var(--lijn); } }
.label { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11.5px; line-height: 1; padding: 3px 8px 3px 7px; border: 1px solid currentColor; border-radius: 999px; vertical-align: 0.12em; white-space: nowrap; color: var(--inkt); }
.label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.label--werkt { color: var(--accent); }
.label--brak { background: var(--inkt); color: var(--bg); border-color: var(--inkt); }
.label--brak::before { content: "\00d7"; width: auto; height: auto; background: none; font-size: 12px; line-height: 1; }
.label--open { border-style: dashed; color: var(--zacht); }
.label--open::before { background: none; box-shadow: inset 0 0 0 1px currentColor; }

/* ---------- beweging: een keer bij het eerste laden; HEAD ademt; uit zonder beweging ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .spoor { animation: teken-x .8s cubic-bezier(.2, .7, .2, 1) both; }
  .merk .knoop { animation: knoop-in .4s .15s cubic-bezier(.2, .9, .3, 1.3) both; }
  .zij__graaf::before { animation: teken-y 1s .15s cubic-bezier(.2, .7, .2, 1) both; }
  .zij__bericht > a .knoop, .zij__volgende .knoop { animation: knoop-in .4s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: calc(.3s + var(--i, 0) * .12s); }
  .knoop--head::after { animation: adem 3.2s 1.4s ease-out infinite; }
  .cursor { animation: knip 1.2s linear infinite; }
  @keyframes teken-x { from { transform: scaleX(0); } }
  @keyframes teken-y { from { transform: scaleY(0); } }
  @keyframes knoop-in { from { transform: scale(0); opacity: 0; } }
  @keyframes adem { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
  @keyframes knip { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
}
::view-transition-group(*) { animation-duration: 300ms; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
html.zonder-intro .spoor, html.zonder-intro .merk .knoop, html.zonder-intro .zij__graaf::before,
html.zonder-intro .zij__bericht > a .knoop, html.zonder-intro .zij__volgende .knoop { animation: none; }

/* ---------- smaller dan 1240: de zijbalk schuift naast het middenstuk (niet meer strikt gecentreerd) ---------- */
@media (max-width: 1239px) {
  .raam { grid-template-columns: minmax(0, 1fr) var(--zij); column-gap: var(--zij-gat); max-width: calc(var(--midden) + var(--zij) + var(--zij-gat) + 2 * var(--rand)); }
  .midden { grid-column: 1; }
  .zij { grid-column: 2; width: auto; padding-left: 0; }
}
/* ---------- smaller dan 900: de zijbalk wordt een inklapbaar menu boven het middenstuk ---------- */
@media (max-width: 900px) {
  :root { --rand: 16px; }
  body { font-size: 16.5px; }
  .kop { height: 64px; }
  .kop nav { gap: 16px; }
  .merk .mono { display: none; }
  .raam { grid-template-columns: minmax(0, 1fr); padding-top: 10px; row-gap: 22px; }
  .midden { grid-column: 1; grid-row: 2; } .zij { grid-column: 1; grid-row: 1; }
  .zij { position: static; justify-self: stretch; width: 100%; max-height: none; overflow: visible; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
  .zij__knop { display: flex; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; }
  .zij__knop::-webkit-details-marker { display: none; }
  .zij__knop .mono { color: var(--accent); font-weight: 500; }
  .zij__knop::after { content: "+"; margin-left: auto; font-family: var(--mono); color: var(--dun); }
  .zij[open] .zij__knop::after { content: "\2212"; }
  .zij__in { padding: 4px 0 18px; }
  .zij__label:not(:first-child) { margin-top: 22px; }
  .midden h1 { font-size: 36px; }
  .regel a { grid-template-columns: minmax(0, 1fr); padding: 18px 16px 6px; }
  .regel__duim { display: none; }
  .regel__in h2 { font-size: 22px; }
  .tekst { font-size: 17px; line-height: 1.66; }
  .tekst h2 { font-size: 22px; }
  .stat b { font-size: 29px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--lijn); }
  .bf thead { display: none; }
  .bf tr { display: block; border-bottom: 1px solid var(--lijn); padding: 10px 0; }
  .bf td { display: block; border: 0 !important; padding: 2px 0 !important; }
  .bf td::before { content: attr(data-kop); display: block; font-family: var(--mono); font-size: 12px; color: var(--dun); }
  .bf tr:first-child { border-top: 1px solid var(--inkt); }
  .trek p { font-size: 22px; }
  .over__kern { font-size: 20px; }
}
@media (max-width: 520px) { .kop nav { gap: 14px; } .kop nav a[href$="feed.xml"] { display: none; } }