/* ============================================================================
   blog.css — leestypografie voor de artikelen
   ----------------------------------------------------------------------------
   De rest van de site is gemaakt om langs te lopen: hero's van bijna een heel
   scherm, brede blokken, veel te kijken. Een artikel van tweeduizend woorden
   is iets anders. Daar telt maar een ding: dat je op regel 400 nog steeds
   comfortabel zit.

   Vandaar de smalle kolom, de grotere regelafstand en de ruimte boven een kop.
   Zelfde letters, zelfde kleuren, ander ritme.
   ========================================================================== */

:root{--rust:#a8492f;--spark-text:hsl(30 72% 34%)}

.bwrap{max-width:1180px;margin:0 auto;padding:0 28px}
@media(max-width:700px){.bwrap{padding:0 16px}}

/* ---- het artikel -------------------------------------------------------- */
.bpost{padding:46px 0 10px}
.kruimels{font-size:12.5px;color:var(--ink-soft);margin-bottom:26px}
.kruimels a{color:var(--ink-soft);text-decoration:none}
.kruimels a:hover{color:var(--ink);text-decoration:underline}

.blabel{display:inline-block;font-family:var(--font-head);font-weight:600;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rust);margin-bottom:14px}

.bpost h1{font-family:var(--font-head);font-weight:500;
  font-size:clamp(2rem,5vw,3.4rem);letter-spacing:-.035em;line-height:1.04;
  max-width:20ch;margin-bottom:20px}

.bintro{font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.55;max-width:60ch;
  color:var(--ink);margin-bottom:16px}

.bmeta{font-size:13px;color:var(--ink-soft);display:flex;gap:9px;
  align-items:baseline;flex-wrap:wrap;margin-bottom:30px}

.bcover{margin:0 0 34px;border-radius:14px;overflow:hidden}
.bcover img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}

/* ---- de lopende tekst ---------------------------------------------------
   66 tekens per regel. Breder leest niet sneller maar juist trager: je oog
   verliest de volgende regel. */
.bproza{max-width:66ch;font-size:1.06rem;line-height:1.75;color:var(--ink)}
.bproza p{margin:0 0 20px}
.bproza h2{font-family:var(--font-head);font-weight:500;
  font-size:clamp(1.4rem,3vw,1.95rem);letter-spacing:-.03em;line-height:1.18;
  margin:44px 0 14px;scroll-margin-top:80px}
.bproza h3{font-family:var(--font-head);font-weight:600;
  font-size:clamp(1.1rem,2.2vw,1.3rem);letter-spacing:-.02em;
  margin:32px 0 10px;scroll-margin-top:80px}
.bproza ul,.bproza ol{margin:0 0 20px;padding-left:22px}
.bproza li{margin-bottom:8px}
.bproza a{color:var(--spark-text);text-decoration:underline;text-underline-offset:2px}
.bproza a:hover{color:var(--ink)}
.bproza strong{font-weight:600}
.bproza img{max-width:100%;height:auto;border-radius:10px;margin:8px 0 20px}
.bproza hr{border:0;border-top:1px solid var(--hairline);margin:34px 0}

.bproza blockquote{margin:26px 0;padding:2px 0 2px 22px;
  border-left:3px solid var(--rust)}
.bproza blockquote p{font-size:1.12rem;line-height:1.6;margin:0;color:var(--ink)}

.bproza code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:rgba(17,17,17,.06);padding:2px 5px;border-radius:4px}
.bproza pre{background:var(--ink);color:var(--paper);padding:18px 20px;
  border-radius:10px;overflow-x:auto;margin:0 0 22px}
.bproza pre code{background:none;padding:0;color:var(--paper)}

/* Een tabel is breder dan de leeskolom; die mag in zichzelf rollen in plaats
   van de pagina opzij te duwen. */
.tabelrol{overflow-x:auto;margin:0 0 24px;-webkit-overflow-scrolling:touch}
.bproza table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:420px}
.bproza th,.bproza td{text-align:left;padding:10px 14px;
  border-bottom:1px solid var(--hairline);vertical-align:top}
.bproza th{font-family:var(--font-head);font-weight:600;font-size:.85rem;
  letter-spacing:.02em;border-bottom:1.5px solid var(--ink)}

.btags{display:flex;gap:9px;flex-wrap:wrap;margin:38px 0 0;
  padding-top:24px;border-top:1px solid var(--hairline);max-width:66ch}
.btag{font-family:var(--font-head);font-weight:600;font-size:12px;
  color:var(--ink-soft);text-decoration:none;border:1px solid var(--hairline);
  border-radius:99px;padding:5px 13px}
.btag:hover{color:var(--ink);border-color:var(--ink)}

/* ---- de FAQ -------------------------------------------------------------
   Deze staat er omdat hij in het FAQPage-schema komt, en schema mag nooit iets
   beweren dat niet zichtbaar op de pagina staat. Uitklapbaar, want vijf vragen
   onder een artikel van tweeduizend woorden leest niemand als lopende tekst. */
.faq{max-width:66ch;margin:52px 0 0;padding-top:34px;
  border-top:1px solid var(--hairline)}
.faq h2{font-family:var(--font-head);font-weight:500;
  font-size:clamp(1.3rem,2.6vw,1.7rem);letter-spacing:-.03em;margin-bottom:16px}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{cursor:pointer;list-style:none;padding:15px 0;
  font-family:var(--font-head);font-weight:600;font-size:1.02rem;
  display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--rust);font-weight:500;flex:none}
.faq details[open] summary::after{content:'\2013'}
.faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.faq details>div{padding:0 0 18px;line-height:1.7;color:var(--ink)}
.faq details>div p{margin:0 0 12px}
.faq details>div p:last-child{margin-bottom:0}

/* ---- het overzicht ------------------------------------------------------ */
.bfilter{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 22px}
.btagknop{font:inherit;font-family:var(--font-head);font-weight:600;font-size:12.5px;
  background:none;color:var(--ink-soft);border:1px solid var(--hairline);
  border-radius:99px;padding:7px 15px;cursor:pointer;transition:all .18s}
.btagknop:hover{color:var(--ink);border-color:var(--ink)}
.btagknop.aan{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btagknop:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.btelling{font-size:12.5px;color:var(--ink-soft);margin:0 0 20px}
.bleeg{padding:40px 0;color:var(--ink-soft)}

/* De scheidingslijnen zitten op de KAARTEN, niet als achtergrond onder het
   raster. --hairline is #111 -- inkt, geen lichte lijn -- dus een raster met
   die achtergrond wordt een zwart vlak dat de kaarten toevallig afdekken. Bij
   twee kaarten in drie kolommen bleef er rechts een zwart gat over.

   Dit is exact dezelfde fout als eerder op de learners-pagina en bij de
   advertentiekaarten. Derde keer, zelfde oorzaak: aannemen dat een naam
   betekent wat hij lijkt te betekenen. */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
  gap:1px;background:var(--paper)}
.bkaart{background:var(--paper);outline:1px solid var(--hairline);
  padding:26px 26px 28px;text-decoration:none;
  color:var(--ink);display:flex;flex-direction:column;gap:10px;
  transition:background .16s;min-height:210px}
.bkaart:hover{background:#fff}
.bkaart:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.bkaart h2,.bkaart h3{font-family:var(--font-head);font-weight:600;
  font-size:1.18rem;letter-spacing:-.022em;line-height:1.25;margin:0}
.bkaart p{font-size:.92rem;line-height:1.6;color:var(--ink-soft);margin:0}
.bmin{margin-top:auto;padding-top:12px;font-size:.78rem;color:var(--ink-soft)}
.bkaart .blabel{margin-bottom:0}

.meer{max-width:none;margin:56px 0 0;padding-top:34px;
  border-top:1px solid var(--hairline)}
.meer h2{font-family:var(--font-head);font-weight:500;
  font-size:clamp(1.3rem,2.6vw,1.7rem);letter-spacing:-.03em;margin-bottom:18px}

@media(max-width:700px){
  .bpost{padding:30px 0 6px}
  .bproza{font-size:1.02rem}
}

.bintroblok{max-width:60ch;margin:0 0 34px}
.bintroblok h2{font-family:var(--font-head);font-weight:500;
  font-size:clamp(1.5rem,3.2vw,2.1rem);letter-spacing:-.032em;line-height:1.12;
  margin:8px 0 14px}
.bintroblok p{line-height:1.7;margin:0 0 12px}
.bintroblok .klein{font-size:.88rem;color:var(--ink-soft)}
.bintroblok .klein a{color:var(--spark-text);text-decoration:underline;
  text-underline-offset:2px}

/* De sluitband komt uit site.css en is daar getekend voor papieren knoppen op
   inkt. Op deze pagina staat .btn niet apart, dus hier expliciet -- anders
   krijg je inkt op inkt, en dat is hier al eens gebeurd. */
.cta .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cta .btn.ghost{background:none;color:var(--paper);border-color:rgb(120,118,113)}
.cta .btn.ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cta .caption{color:rgb(176,174,168)}