/* ============================================================================
   Driftzz — driftzz-ghost 1.0.0
   Blogthema voor blog.driftzz.nl.

   HERKOMST (lees dit vóór je iets wijzigt)
   ----------------------------------------
   De STRUCTUUR komt uit `datadriftdigital-studio/03_Blog/ddd-ghost/` — kaarten-
   grid, auto-hide nav, artikelkop, auteursblok, paginering. De HUISSTIJL komt
   uit `driftzz-site/src/styles/tokens.css`, dat op zijn beurt Brams
   `datadriftdigital-driftzz/7-brand/brand-guidelines.md` volgt.

   ⚠️ DIT IS GEEN HERKLEURING VAN ddd-ghost. Drie dingen zijn er bewust uit:

   1. DE TERMINAL. ddd-ghost opent elke post met een terminal-hero (`$ cat`,
      titelbalk met stoplichten, mono-font, knipperende cursor). Die taal is van
      DataDrift, niet van Driftzz. Alle `.ddk`-terminalonderdelen staan hier op
      `display: none` — zie §9. De THEMA-kop is nu de hero.
   2. DE DISCOURSE-REACTIESECTIE. Driftzz heeft geen community.
   3. DE AMBER-SCOPE. ddd-ghost draagt één merkkleur (#F59E0B) op álles.
      Driftzz heeft er drie met een rolverdeling — zie hieronder.

   DE ROLVERDELING, LETTERLIJK UIT brand-guidelines.md §2
   ------------------------------------------------------
   "Donker en cyaan dragen, roze en geel accentueren. Nooit alle vier even hard
   in één sectie." Vertaald naar dit bestand:

     cyaan  #2BE0E0  het draagvlak — links, tags, knoppen, CTA, card-go
     geel   #F5E547  het label     — eyebrow, kickers, markering
     roze   #FF3D9A  het accent    — randen, schaduwen, onderstreping, hover
     zee    #12333B  het vlak      — pagina, en de tekstkleur ÓP cyaan/geel

   🔴 ROZE DRAAGT NERGENS KLEINE TEKST, EN DAT IS GEMETEN, NIET GEVOELD.
   Nagerekend tegen WCAG 2.1 op 16-8-2026:

     wit      op zee        13,44:1   AA
     geel     op zee        10,36:1   AA
     cyaan    op zee         8,22:1   AA
     text-dim op zee         6,69:1   AA
     zee      op cyaan       8,22:1   AA   ← knop- en tagtekst
     zee      op geel       10,36:1   AA   ← labeltekst
     roze     op zee         4,09:1   alleen AA-GROOT
     zee      op roze        4,09:1   alleen AA-GROOT
     wit      op roze        3,29:1   alleen AA-GROOT

   Daarom is roze hier uitsluitend rand, schaduw, onderstreping en focusring —
   nooit een vlak met tekst erop en nooit een linkkleur. Wie hem alsnog als
   tekstkleur inzet, zakt onder AA. Hover op een cyaan knop gaat naar
   cyaan-diep (zelfde tint) en krijgt roze als schaduw: de beweging is roze,
   de leesbaarheid blijft cyaan.

   VORM (brand-guidelines §4): dikke randen, harde schaduwen zónder blur, en
   maximaal 1,2 graden kanteling. Dat is dezelfde neo-brutalistische grammatica
   als ddd-ghost — vandaar dat de structuur zo goed overzet. Verschil: Driftzz
   heeft afgeronde hoeken (--dz-radius), ddd-ghost heeft scherpe.
   ============================================================================ */

/* ── 1. Tokens ─────────────────────────────────────────────────────────────
   Waarden letterlijk uit driftzz-site/src/styles/tokens.css. Wijkt dit bestand
   daarvan af, dan is dít bestand fout. */
:root {
  --dz-zee:        #12333B;   /* dragend donker: pagina, tekst op accentvlakken */
  --dz-zee-licht:  #1A4650;   /* velden en kaarten bínnen een zeevlak           */
  --dz-zee-diep:   #0C242A;   /* footer, harde schaduw op een zeevlak           */
  --dz-cyaan:      #2BE0E0;   /* het draagvlak                                  */
  --dz-cyaan-diep: #17C4C4;   /* hover op cyaan                                 */
  --dz-roze:       #FF3D9A;   /* accent — rand/schaduw/onderstreping, GEEN tekst */
  --dz-geel:       #F5E547;   /* label                                          */
  --dz-wit:        #FFFFFF;   /* lopende tekst — 13,44:1 op zee                 */
  --dz-dim:        #9FBCC2;   /* secundaire tekst — 6,69:1 op zee               */

  --dz-line:       rgba(255, 255, 255, .38);
  --dz-line-soft:  rgba(255, 255, 255, .18);
  --dz-roze-dim:   rgba(255, 61, 154, .45);
  --dz-grid:       rgba(255, 255, 255, .035);

  --dz-radius:     14px;
  --dz-radius-lg:  26px;
  --dz-pill:       999px;
  --dz-rand:       3px;
  --dz-kantel:     1.2deg;    /* ≤ 2deg — brand-guidelines §4 */

  --dz-maxw:       780px;
  --dz-maxw-wide:  1180px;

  /* Ghost custom fonts (Admin → Design → Typography) overschrijven deze drie
     via ghost_head. De fallback is de huisstijl.
     ⚠️ De body-stack is BEWUST het systeemfont en niet Montserrat: dat is de
     opdracht van 16-8. brand-guidelines §3 vraagt Montserrat ook voor lopende
     tekst; wie dat alsnog wil, wisselt hier één regel. Caveat staat er als
     decoratie (.dz-hand) en nergens als lopende tekst — §3 verbiedt dat. */
  --gh-font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gh-font-body:    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gh-font-mono:    ui-monospace, "SF Mono", Monaco, "Cascadia Code", monospace;
  --dz-font-hand:    "Caveat", "Bradley Hand", cursive;
}

/* ── 2. Reset + basis ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--dz-zee);
  /* Zelfde 34px-raster als ddd-ghost, maar zó licht dat het textuur is en geen
     patroon. Het houdt een leeg vlak (deze blog heeft nog weinig posts) van
     "kapot" af. */
  background-image:
    linear-gradient(var(--dz-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--dz-grid) 1px, transparent 1px);
  background-size: 34px 34px;
  color: var(--dz-wit);
  font-family: var(--gh-font-body, system-ui, sans-serif);
  font-weight: 400;
  line-height: 1.7;
  font-size: 1.02rem;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--dz-wit); }

.dz-inner { width: 100%; max-width: var(--dz-maxw); margin: 0 auto; padding: 0 22px; }
/* 🔴 De brede variant is nodig, niet cosmetisch. ddd-ghost zet `max-width` op
   .ddd-feed zelf, maar die staat ÍN een .ddd-inner van 780px — een kind kan zijn
   ouder niet overtreffen, dus die regel doet daar niets en het kaartengrid zit
   geklemd op de leeskolom. Hier draagt de wrapper de brede maat en houdt de hero
   zijn eigen leesbreedte. */
.dz-inner-wide { max-width: var(--dz-maxw-wide); }
.dz-inner-wide .dz-hero { max-width: var(--dz-maxw); margin-left: 0; }
.dz-feed  { max-width: var(--dz-maxw-wide); }
.dz-dot   { opacity: .45; }
.dz-empty { color: var(--dz-dim); padding: 40px 0; }

/* Het label-lettertype. ddd-ghost gebruikt hier Space Mono; Driftzz kent geen
   mono in zijn huisstijl, dus de labelvorm komt uit gewicht + spatiëring +
   kapitalen in Montserrat. Zelfde functie, geen geleende terminal-signatuur. */
.dz-label {
  font-family: var(--gh-font-heading, "Montserrat", sans-serif);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Caveat, uitsluitend decoratief. Nooit voor een hele alinea — §3. */
.dz-hand { font-family: var(--dz-font-hand); font-weight: 600; font-size: 1.35em; }

/* Focus: dubbele ring, buitenring roze. Roze mag hier wél — een focusring is
   geen tekst, en 4,09:1 tegen het vlak is ruim boven de 3:1 die WCAG voor
   niet-tekstuele contouren vraagt. */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--dz-zee), 0 0 0 6px var(--dz-roze);
  border-radius: 4px;
}

/* ── 3. Navigatie ─────────────────────────────────────────────────────────── */
.dz-nav {
  border-bottom: var(--dz-rand) solid var(--dz-line);
  background: rgba(18, 51, 59, .88);
  backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 20;
  transition: transform .28s ease;
  will-change: transform;
}
/* Auto-hide: assets/js/nav-scroll.js zet .is-hidden bij scroll omlaag. Zonder
   JS blijft de header gewoon sticky staan — de klasse wordt dan nooit gezet. */
.dz-nav.is-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .dz-nav { transition: none; } }

.dz-nav-inner { max-width: var(--dz-maxw-wide); display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 66px; flex-wrap: wrap; }
.dz-nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.dz-nav-brand img { max-height: 34px; width: auto; }
.dz-nav-mark {
  width: 36px; height: 36px;
  background: var(--dz-cyaan); color: var(--dz-zee);
  border: var(--dz-rand) solid var(--dz-line);
  border-radius: var(--dz-pill);
  display: grid; place-items: center;
  font-family: var(--gh-font-heading, "Montserrat", sans-serif);
  font-weight: 800; flex: none;
  transform: rotate(calc(var(--dz-kantel) * -1));
}
.dz-nav-title { font-family: var(--gh-font-heading, "Montserrat", sans-serif); font-weight: 800; letter-spacing: -.02em; font-size: 1.05rem; text-transform: lowercase; }
.dz-nav-menu { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dz-nav-list { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; }
.dz-nav-item a {
  font-family: var(--gh-font-heading, "Montserrat", sans-serif);
  font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .08em;
  text-decoration: none;
}
.dz-nav-item a:hover, .dz-nav-item.is-current a { color: var(--dz-cyaan); }

/* De uitgang naar het hoofddomein. ddd-ghost heeft hier twee externe links
   (hoofdsite + community); Driftzz heeft er één, want er is geen community. */
.dz-nav-extern { padding-left: 18px; border-left: 1px solid var(--dz-line-soft); }

/* ── 4. Hero op index en tag ─────────────────────────────────────────────── */
.dz-main { padding: 46px 0 90px; }
.dz-hero { padding: 20px 0 40px; }
.dz-hero-kicker { display: block; color: var(--dz-geel); margin-bottom: 14px; }
.dz-hero-title {
  font-family: var(--gh-font-heading, "Montserrat", sans-serif);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
  font-size: clamp(2rem, 6vw, 3.2rem); margin: 0;
  /* brand-guidelines §3: koppen in kleine letters. Alleen hier en op de
     tag-kop — dus op wat het THEMA schrijft. Post- en contentkoppen blijven
     ongemoeid: die dragen eigennamen (Meta, WhatsApp) die door een
     lowercase-regel stilletjes fout worden. */
  text-transform: lowercase;
}
.dz-hero-lead { max-width: 56ch; font-size: clamp(1.02rem, 2.2vw, 1.18rem); margin: 18px 0 0; color: var(--dz-wit); }

/* ── 5. Postlijst — twee kolommen ─────────────────────────────────────────
   ddd-ghost gebruikt auto-fill met minmax(300px): dat levert op een breed
   scherm drie of vier kolommen. De opdracht vraagt er twee, dus een vaste
   2-koloms-grid boven 820px en één eronder. */
.dz-feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 0 auto; }
.dz-card {
  background: var(--dz-zee-licht);
  border: var(--dz-rand) solid var(--dz-line);
  border-radius: var(--dz-radius);
  box-shadow: 8px 8px 0 var(--dz-roze-dim);
  transition: transform .12s, box-shadow .12s;
}
/* "Alsof het op tafel ligt" — §4. Nooit meer dan 1,2 graden. */
.dz-card:nth-child(2n)   { transform: rotate(calc(var(--dz-kantel) * -.7)); }
.dz-card:nth-child(3n+1) { transform: rotate(calc(var(--dz-kantel) * .5)); }
.dz-card:hover { transform: translate(-2px, -2px) rotate(0); box-shadow: 11px 11px 0 var(--dz-roze); }
.dz-card-link { display: flex; flex-direction: column; gap: 11px; padding: 24px; text-decoration: none; height: 100%; }
.dz-card-tag {
  align-self: flex-start;
  background: var(--dz-cyaan); color: var(--dz-zee);
  border-radius: var(--dz-pill);
  padding: 5px 13px;
  font-size: .68rem;
  transform: rotate(calc(var(--dz-kantel) * -1.5));
}
.dz-card-title { font-family: var(--gh-font-heading, "Montserrat", sans-serif); font-weight: 800; font-size: 1.24rem; line-height: 1.25; letter-spacing: -.01em; margin: 0; }
.dz-card-excerpt { font-size: .94rem; line-height: 1.55; margin: 0; color: var(--dz-dim); }
/* De metaregel van een kaart is een rij geworden: auteursfoto · naam · datum ·
   leestijd. `inline-flex` en niet `flex`, want het element staat in een
   kolom-flex en moet zijn eigen breedte houden. */
.dz-card-meta { color: var(--dz-dim); font-size: .78rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dz-card-ava {
  width: 22px; height: 22px; flex: none;
  object-fit: cover;
  border-radius: var(--dz-pill);
  border: 2px solid var(--dz-line);
  background: var(--dz-zee);
  /* Kleiner dan de andere avatars, dus ook een kleinere kanteling — op 22px
     leest 1,8 graden als een scheve foto in plaats van als vormtaal. */
  transform: rotate(calc(var(--dz-kantel) * -.6));
}
.dz-card-auteur { color: var(--dz-wit); }
.dz-card-go { margin-top: auto; color: var(--dz-cyaan); font-weight: 700; font-size: .84rem; }

/* Paginering — Ghost' pagination-helper levert .pagination met prev/next. */
.pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 54px auto 0; max-width: var(--dz-maxw-wide); font-family: var(--gh-font-heading, "Montserrat", sans-serif); font-weight: 700; font-size: .82rem; }
.pagination a { text-decoration: none; border: var(--dz-rand) solid var(--dz-line); border-radius: var(--dz-pill); padding: 9px 18px; box-shadow: 4px 4px 0 var(--dz-roze-dim); }
.pagination a:hover { box-shadow: 6px 6px 0 var(--dz-roze); color: var(--dz-cyaan); }
.page-number { color: var(--dz-dim); }

/* ── 6. Artikel-koptekst ──────────────────────────────────────────────────
   Dit ÍS de hero op een post. Anders dan bij ddd-ghost wijkt hij nooit voor een
   terminal-blok in de post-inhoud — dat blok staat hier verborgen (§9). */
.dz-article-header { padding-top: 12px; padding-bottom: 8px; }
.dz-article-tag {
  display: inline-block;
  background: var(--dz-cyaan); color: var(--dz-zee);
  border-radius: var(--dz-pill);
  padding: 6px 14px; text-decoration: none;
  margin-bottom: 20px;
  transform: rotate(calc(var(--dz-kantel) * -1.5));
}
.dz-article-tag:hover { background: var(--dz-cyaan-diep); }
.dz-article-title { font-family: var(--gh-font-heading, "Montserrat", sans-serif); font-weight: 800; letter-spacing: -.02em; line-height: 1.18; font-size: clamp(1.9rem, 5.2vw, 3.1rem); margin: 0; }
.dz-article-excerpt { max-width: 56ch; font-size: 1.12rem; margin: 18px 0 0; color: var(--dz-dim); }
.dz-article-meta { margin-top: 24px; padding-top: 18px; border-top: var(--dz-rand) solid var(--dz-line); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .82rem; font-weight: 600; color: var(--dz-dim); }
.dz-ava {
  width: 34px; height: 34px;
  background: var(--dz-cyaan); color: var(--dz-zee);
  border: var(--dz-rand) solid var(--dz-line);
  border-radius: var(--dz-pill);
  display: inline-grid; place-items: center;
  font-family: var(--gh-font-heading, "Montserrat", sans-serif);
  font-weight: 800; font-size: .8rem;
  transform: rotate(calc(var(--dz-kantel) * -1.5));
}
/* De auteursfoto in de metaregel van een post. Zelfde maat en vorm als het
   `dz`-schildje dat hij vervangt, zodat de regel niet verspringt als een post
   wél of géén profielfoto heeft. */
.dz-ava-foto {
  width: 34px; height: 34px; flex: none;
  object-fit: cover;
  border: var(--dz-rand) solid var(--dz-line);
  border-radius: var(--dz-pill);
  background: var(--dz-zee-licht);
  transform: rotate(calc(var(--dz-kantel) * -1.5));
}
.dz-feature-image { margin: 30px 0 0; border: var(--dz-rand) solid var(--dz-line); border-radius: var(--dz-radius); overflow: hidden; box-shadow: 8px 8px 0 var(--dz-roze-dim); }
.dz-feature-image figcaption { font-size: .78rem; padding: 10px 14px; border-top: var(--dz-rand) solid var(--dz-line); color: var(--dz-dim); }

/* ── 7. Artikel-body ─────────────────────────────────────────────────────── */
.dz-content { padding-top: 34px; }
.dz-content > * { max-width: 100%; }
.dz-content p, .dz-content ul, .dz-content ol { font-size: 1.06rem; margin: 0 0 20px; }
.dz-content h2 { font-family: var(--gh-font-heading, "Montserrat", sans-serif); font-weight: 800; font-size: clamp(1.4rem, 3.4vw, 1.9rem); letter-spacing: -.02em; line-height: 1.25; margin: 48px 0 16px; }
.dz-content h3 { font-family: var(--gh-font-heading, "Montserrat", sans-serif); font-weight: 800; font-size: 1.24rem; margin: 34px 0 12px; }
/* Links dragen cyaan (8,22:1) met een roze onderstreping: de kleur die niet mag
   dragen, doet hier het accentwerk waar hij wél voor deugt. */
.dz-content a { color: var(--dz-cyaan); text-decoration: underline; text-decoration-color: var(--dz-roze); text-decoration-thickness: 3px; text-underline-offset: 3px; font-weight: 600; }
.dz-content a:hover { color: var(--dz-wit); text-decoration-color: var(--dz-cyaan); }
.dz-content blockquote { margin: 0 0 26px; padding: 4px 0 4px 24px; border-left: 6px solid var(--dz-roze); font-weight: 600; font-size: 1.2rem; }
.dz-content hr { border: 0; border-top: var(--dz-rand) solid var(--dz-line-soft); margin: 40px 0; }
.dz-content code { font-family: var(--gh-font-mono, monospace); background: var(--dz-zee-licht); border: 2px solid var(--dz-line-soft); border-radius: 5px; padding: 1px 6px; font-size: .92em; }
.dz-content pre { font-family: var(--gh-font-mono, monospace); background: var(--dz-zee-diep); border: var(--dz-rand) solid var(--dz-line); border-radius: var(--dz-radius); box-shadow: 8px 8px 0 var(--dz-roze-dim); padding: 20px; overflow-x: auto; }
.dz-content pre code { background: none; border: 0; padding: 0; }
.dz-content figure { margin: 30px 0; }
.dz-content figcaption { font-size: .78rem; color: var(--dz-dim); margin-top: 8px; }
.dz-content table { width: 100%; border-collapse: collapse; margin: 0 0 26px; font-size: .96rem; display: block; overflow-x: auto; }
.dz-content th, .dz-content td { border: 2px solid var(--dz-line-soft); padding: 10px 12px; text-align: left; }
.dz-content th { font-weight: 800; background: var(--dz-zee-licht); }

/* Ghost kg-cards. kg-width-wide/full zijn gscan-vereisten. */
.dz-content .kg-card { margin: 0 0 26px; }
.dz-content .kg-html-card, .dz-content .kg-html-card > * { max-width: none; }
.dz-content .kg-image-card img { border: var(--dz-rand) solid var(--dz-line); border-radius: var(--dz-radius); }
.dz-content .kg-width-wide { position: relative; width: 100vw; max-width: var(--dz-maxw-wide); margin-left: 50%; transform: translateX(-50%); }
.dz-content .kg-width-full { position: relative; width: 100vw; max-width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.dz-content .kg-width-full img { width: 100%; border-left: 0; border-right: 0; border-radius: 0; }
@media (max-width: 1180px) { .dz-content .kg-width-wide { width: 100%; margin-left: 0; transform: none; } }

/* Ghost' eigen toggle-card is het FAQ-blok voor wie in de editor werkt. Zelfde
   vorm als de .ddk-accordeon hieronder, zodat beide routes hetzelfde opleveren. */
.dz-content .kg-toggle-card {
  background: var(--dz-zee-licht);
  border: var(--dz-rand) solid var(--dz-line);
  border-radius: var(--dz-radius);
  box-shadow: 6px 6px 0 var(--dz-roze-dim);
  padding: 4px 20px; margin-bottom: 14px;
}
.dz-content .kg-toggle-heading-text { font-family: var(--gh-font-heading, "Montserrat", sans-serif); font-weight: 700; font-size: 1.06rem; }
.dz-content .kg-toggle-card-icon { color: var(--dz-cyaan); }

/* ── 8. Tags, CTA-band, auteur, verwante posts, footer ───────────────────── */
.dz-article-tags { margin-top: 46px; padding-top: 22px; border-top: var(--dz-rand) solid var(--dz-line-soft); display: flex; gap: 10px; flex-wrap: wrap; }
.dz-tag-pill {
  background: var(--dz-zee-licht); color: var(--dz-wit);
  border: var(--dz-rand) solid var(--dz-line);
  border-radius: var(--dz-pill);
  padding: 6px 14px; text-decoration: none;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  font-family: var(--gh-font-heading, "Montserrat", sans-serif);
}
.dz-tag-pill:hover { background: var(--dz-cyaan); color: var(--dz-zee); border-color: var(--dz-cyaan); }

/* DE CTA-BAND — staat op elke post, komt uit het thema en niet uit de inhoud.
   Dit is het meest opvallende blok van de pagina: cyaan vlak, zee-tekst
   (8,22:1), harde roze schaduw, één graad scheef. */
.dz-cta {
  margin-top: 56px;
  background: var(--dz-cyaan); color: var(--dz-zee);
  border: var(--dz-rand) solid var(--dz-zee);
  border-radius: var(--dz-radius-lg);
  box-shadow: 10px 10px 0 var(--dz-roze);
  padding: clamp(26px, 4vw, 38px);
  transform: rotate(calc(var(--dz-kantel) * -.5));
}
.dz-cta-label { display: block; color: var(--dz-zee); opacity: .72; margin-bottom: 10px; }
.dz-cta-title { font-family: var(--gh-font-heading, "Montserrat", sans-serif); font-weight: 800; font-size: clamp(1.5rem, 4.2vw, 2.2rem); letter-spacing: -.02em; line-height: 1.2; margin: 0 0 10px; color: var(--dz-zee); }
.dz-cta-text { margin: 0 0 22px; max-width: 48ch; color: var(--dz-zee); font-weight: 500; }
/* De knop: pill, maar omgekeerd t.o.v. het vlak — een cyaan knop op een cyaan
   band is geen knop. Zee-vlak met cyaan tekst haalt dezelfde 8,22:1. */
.dz-cta-btn {
  display: inline-block;
  background: var(--dz-zee); color: var(--dz-cyaan);
  border: var(--dz-rand) solid var(--dz-zee);
  border-radius: var(--dz-pill);
  padding: 13px 28px;
  font-family: var(--gh-font-heading, "Montserrat", sans-serif);
  font-weight: 800; font-size: .96rem;
  text-decoration: none;
  box-shadow: 5px 5px 0 var(--dz-zee-diep);
  transition: transform .12s, box-shadow .12s;
}
.dz-cta-btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--dz-zee-diep); color: var(--dz-wit); }
@media (max-width: 560px) { .dz-cta { transform: none; box-shadow: 6px 6px 0 var(--dz-roze); } }

.dz-author-box { margin-top: 46px; padding-top: 26px; border-top: var(--dz-rand) solid var(--dz-line-soft); display: flex; gap: 18px; align-items: flex-start; }
.dz-author-avatar { flex: 0 0 auto; display: block; text-decoration: none; }
.dz-author-avatar img { width: 64px; height: 64px; object-fit: cover; display: block; background: var(--dz-zee-licht); border: var(--dz-rand) solid var(--dz-line); border-radius: var(--dz-pill); transform: rotate(calc(var(--dz-kantel) * -1.5)); }
.dz-ava-lg { width: 64px; height: 64px; font-size: 1.15rem; }
.dz-author-text { min-width: 0; }
.dz-author-label { display: block; color: var(--dz-geel); margin-bottom: 7px; }
.dz-author-name { font-family: var(--gh-font-heading, "Montserrat", sans-serif); font-weight: 800; font-size: 1.15rem; line-height: 1.2; color: var(--dz-wit); text-decoration: none; border-bottom: var(--dz-rand) solid var(--dz-roze); }
.dz-author-name:hover { color: var(--dz-cyaan); border-bottom-color: var(--dz-cyaan); }
.dz-author-bio { margin: 11px 0 0; color: var(--dz-dim); font-size: .95rem; line-height: 1.6; }
@media (max-width: 560px) { .dz-author-box { gap: 14px; } .dz-author-avatar img, .dz-ava-lg { width: 52px; height: 52px; } }

.dz-related { margin-top: 72px; padding-top: 40px; border-top: var(--dz-rand) solid var(--dz-line); max-width: var(--dz-maxw-wide); }
.dz-related-head {
  font-family: var(--gh-font-heading, "Montserrat", sans-serif);
  display: inline-block; font-weight: 800;
  font-size: clamp(1.3rem, 4vw, 1.9rem); letter-spacing: -.02em;
  background: var(--dz-geel); color: var(--dz-zee);
  border-radius: var(--dz-radius);
  padding: 5px 15px; margin-bottom: 26px;
  transform: rotate(calc(var(--dz-kantel) * -.8));
  text-transform: lowercase;
}

.dz-footer { border-top: var(--dz-rand) solid var(--dz-line); margin-top: 40px; background: var(--dz-zee-diep); }
.dz-footer-inner { max-width: var(--dz-maxw-wide); padding-top: 40px; padding-bottom: 46px; }
.dz-footer-brand { font-family: var(--gh-font-heading, "Montserrat", sans-serif); font-weight: 800; font-size: 1.1rem; margin: 0 0 8px; text-transform: lowercase; }
.dz-footer-brand a { text-decoration: none; }
.dz-footer-note { color: var(--dz-dim); max-width: 54ch; margin: 0 0 18px; }
.dz-footer-meta { font-size: .8rem; font-weight: 600; display: flex; gap: 12px; flex-wrap: wrap; margin: 0; color: var(--dz-dim); }
.dz-footer-meta a { color: var(--dz-cyaan); text-decoration: none; }
.dz-footer-meta a:hover { text-decoration: underline; text-decoration-color: var(--dz-roze); text-decoration-thickness: 2px; }

/* ============================================================================
   9. .ddk — de blokken die ÍN de post-HTML staan

   De bestaande post `klantwerving-zonder-risico` is overgezet van de DDD-blog
   en draagt een kg-html-card met deze classes: .term .bar .screen .prompt
   .crumb .tag .hl .cur .lead .meta .who .ava .dot .pull .log .ln .ok .body
   .calc .k .big .plain .sechead .sec .intro .faq .ico .ans .ddd-ai-note.
   Het thema stylet ze; de post draagt alleen markup.

   🔴 DE TERMINAL-ONDERDELEN STAAN OP display:none, NIET IN EEN DRIFTZZ-JASJE.
   Dat is de opdracht van 16-8 ("geen $ prompt, geen breadcrumb, geen mono-font
   hero") en het lost tegelijk een dubbeling op: .term draagt titel, lead, auteur
   én datum, en dat staat allemaal al in de thema-kop hierboven. Ze allebei tonen
   levert twee koppen; de terminal herkleuren levert een DDD-vorm in
   Driftzz-kleuren. Verbergen is de enige uitkomst waarin de post één hero heeft.

   ⚠️ GEVOLG: ddd-ghost' --ddd-published-truc is hier NIET overgenomen. Die
   bestond alleen om de hardgecodeerde datum ín de terminal te corrigeren. Zonder
   terminal draagt de thema-kop de datum, en die komt uit published_at — dus
   correct by construction.
   ============================================================================ */
.ddk .term,
.ddk .bar,
.ddk .screen > .prompt,
.ddk .prompt,
.ddk .crumb,
.ddk .cur { display: none !important; }

.ddk {
  font-family: var(--gh-font-body, system-ui, sans-serif);
  color: var(--dz-wit);
  line-height: 1.7;
}

.ddk p { margin: 0 0 20px; font-size: 1.08rem; }
.ddk p a, .ddk li a { color: var(--dz-cyaan); text-decoration: underline; text-decoration-color: var(--dz-roze); text-decoration-thickness: 3px; text-underline-offset: 3px; font-weight: 600; }
.ddk p a:hover, .ddk li a:hover { color: var(--dz-wit); text-decoration-color: var(--dz-cyaan); }

.ddk h2 { font-family: var(--gh-font-heading, "Montserrat", sans-serif); font-weight: 800; font-size: clamp(1.4rem, 3.4vw, 2rem); letter-spacing: -.02em; line-height: 1.3; margin: 54px 0 18px; }
.ddk h2 .k { display: block; color: var(--dz-geel); font-weight: 700; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; }
/* Gemarkeerd blok in een kop. Geel vlak, zee-letter: 10,36:1.
   box-decoration-break houdt de markering heel over twee regels; de line-height
   van 1,3 houdt de staarten van g/j/p/q/y vrij (dezelfde descender-val die
   ddd-ghost op 26-7 opving). */
.ddk h2 .t, .ddk h1 .hl {
  background: var(--dz-geel); color: var(--dz-zee);
  padding: 0 .12em .14em; border-radius: 4px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  display: inline;
}

.ddk .lead { font-weight: 400; font-size: clamp(1.05rem, 2.2vw, 1.24rem); line-height: 1.6; margin: 20px 0 0; max-width: 56ch; }
.ddk .tag { display: inline-block; background: var(--dz-cyaan); color: var(--dz-zee); border-radius: var(--dz-pill); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; padding: 7px 14px; margin-bottom: 22px; transform: rotate(calc(var(--dz-kantel) * -1.5)); }
.ddk .tag .amber { color: var(--dz-zee); opacity: .55; }

.ddk .pull { margin: 0 0 28px; padding: 6px 0 6px 26px; border-left: 6px solid var(--dz-roze); font-weight: 600; font-size: clamp(1.2rem, 2.6vw, 1.5rem); line-height: 1.4; letter-spacing: -.01em; }

.ddk .log { background: var(--dz-zee-licht); border: var(--dz-rand) solid var(--dz-line); border-radius: var(--dz-radius); box-shadow: 8px 8px 0 var(--dz-roze-dim); padding: clamp(18px, 4vw, 30px); margin: 8px 0 24px; }
.ddk .log .ln { font-size: .98rem; padding: 14px 0; border-bottom: 2px dashed var(--dz-line-soft); display: flex; gap: 14px; align-items: baseline; }
.ddk .log .ln:first-child { padding-top: 0; }
.ddk .log .ln:last-child { border-bottom: 0; padding-bottom: 0; }
.ddk .log .ok { font-weight: 700; font-size: .78rem; background: var(--dz-geel); color: var(--dz-zee); padding: 2px 10px; border-radius: var(--dz-pill); flex: none; }
.ddk .log .ln .body { font-weight: 400; line-height: 1.5; }

/* 🔴 HET CTA-BLOK ÍN DE POST STAAT UIT — het thema draagt de CTA nu.
   Gemeten op de gerenderde pagina, niet bedacht: de bestaande post eindigt met
   een .calc-blok ("Plan een gesprek (30 min)") en de thema-band zet daar
   dezelfde vraag pal onder. Twee bijna identieke CTA's op een rij verzwakken
   allebei. De opdracht van 16-8 zegt "CTA-band op elke post", dus de band wint
   en het blok in de inhoud wijkt — zelfde redenering als bij de terminal-hero.

   Terugdraaien is deze ene regel schrappen; de opmaak eronder blijft staan, dus
   het blok komt dan meteen weer in Driftzz-kleuren terug.
   ⚠️ Wie de thema-band ooit uit post.hbs haalt, MOET deze regel ook weghalen —
   anders heeft de post helemaal geen CTA meer. */
.ddk .calc { display: none; }

/* De opmaak van datzelfde blok, voor als het weer aan gaat. Zelfde taal als de
   thema-band: cyaan vlak, zee-tekst, harde roze schaduw. */
.ddk .calc { background: var(--dz-cyaan); color: var(--dz-zee); border: var(--dz-rand) solid var(--dz-zee); border-radius: var(--dz-radius-lg); box-shadow: 10px 10px 0 var(--dz-roze); padding: clamp(24px, 4vw, 34px); margin: 36px 0; transform: rotate(calc(var(--dz-kantel) * -.5)); }
.ddk .calc .k { font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dz-zee); opacity: .72; margin-bottom: 12px; }
.ddk .calc p { margin: 0; color: var(--dz-zee); }
.ddk .calc .big { font-family: var(--gh-font-heading, "Montserrat", sans-serif); font-weight: 800; font-size: clamp(2rem, 7vw, 3.4rem); letter-spacing: -.02em; line-height: 1.05; margin: 10px 0; color: var(--dz-zee); }
.ddk .calc .big em { font-style: normal; background: var(--dz-zee); color: var(--dz-cyaan); padding: 0 .12em; border-radius: 4px; }
/* De post zet een inline kleur op deze link (amber, uit de DDD-versie).
   Overschrijven, anders staat er amber op cyaan. */
.ddk .calc a, .ddk .calc a[style] { color: var(--dz-zee) !important; font-weight: 800; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.ddk .calc a:hover, .ddk .calc a[style]:hover { background: var(--dz-zee); color: var(--dz-cyaan) !important; }

.ddk ul.plain { list-style: none; margin: 6px 0 22px; padding: 0; }
.ddk ul.plain li { padding: 13px 0 13px 30px; position: relative; border-bottom: 2px dashed var(--dz-line-soft); font-size: 1.04rem; }
.ddk ul.plain li::before { content: "→"; position: absolute; left: 0; top: 12px; color: var(--dz-cyaan); font-weight: 700; }

.ddk .sechead { font-family: var(--gh-font-heading, "Montserrat", sans-serif); font-weight: 800; font-size: clamp(1.5rem, 5vw, 2.2rem); letter-spacing: -.02em; margin: 0 0 14px; display: inline-block; background: var(--dz-geel); color: var(--dz-zee); border-radius: var(--dz-radius); padding: 5px 15px; transform: rotate(calc(var(--dz-kantel) * -.8)); }
.ddk .sec { padding: 44px 0 6px; border-top: var(--dz-rand) solid var(--dz-line); margin-top: 48px; }
.ddk .sec .intro { max-width: 58ch; margin: 14px 0 26px; font-size: 1.05rem; }

.ddk .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 20px 0 10px; }
.ddk .bcard { background: var(--dz-zee-licht); border: var(--dz-rand) solid var(--dz-line); border-radius: var(--dz-radius); padding: 22px; box-shadow: 6px 6px 0 var(--dz-roze-dim); text-decoration: none; color: var(--dz-wit); display: flex; flex-direction: column; gap: 10px; transition: transform .12s, box-shadow .12s; }
.ddk .bcard:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--dz-roze); }
.ddk .bcard .k { color: var(--dz-geel); font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.ddk .bcard h3 { font-family: var(--gh-font-heading, "Montserrat", sans-serif); font-weight: 800; font-size: 1.18rem; margin: 0; line-height: 1.25; }
.ddk .bcard p { font-weight: 400; font-size: .93rem; margin: 0; line-height: 1.5; }
.ddk .bcard .go { margin-top: auto; color: var(--dz-cyaan); font-weight: 700; font-size: .84rem; }

/* De FAQ-accordeon. Native details/summary — geen JavaScript, dus hij werkt ook
   als er niets laadt, en een dichtgeklapt antwoord staat gewoon in de DOM (wat
   de FAQPage-schema in de post ondersteunt). */
.ddk .faq details { border: var(--dz-rand) solid var(--dz-line); background: var(--dz-zee-licht); border-radius: var(--dz-radius); box-shadow: 6px 6px 0 var(--dz-roze-dim); margin-bottom: 14px; }
.ddk .faq summary { list-style: none; cursor: pointer; padding: 18px 20px; display: flex; justify-content: space-between; gap: 18px; align-items: center; font-family: var(--gh-font-heading, "Montserrat", sans-serif); font-weight: 700; font-size: 1.06rem; }
.ddk .faq summary::-webkit-details-marker { display: none; }
.ddk .faq summary:hover { color: var(--dz-cyaan); }
.ddk .faq .ico { flex: none; width: 30px; height: 30px; background: var(--dz-cyaan); color: var(--dz-zee); border-radius: var(--dz-pill); display: grid; place-items: center; font-weight: 800; transition: transform .15s; }
.ddk .faq details[open] .ico { transform: rotate(45deg); }
.ddk .faq details[open] { box-shadow: 6px 6px 0 var(--dz-roze); }
.ddk .faq .ans { padding: 0 20px 20px; font-weight: 400; font-size: 1rem; line-height: 1.6; max-width: 66ch; }
@media (prefers-reduced-motion: reduce) { .ddk .faq .ico { transition: none; } }

/* AI-transparantieregel — verplicht per aug 2026 (ai-verordening §3.2).
   De post draagt de class, het thema de opmaak. */
.ddk .ddd-ai-note { font-size: .82rem; line-height: 1.6; color: var(--dz-dim); border-top: var(--dz-rand) solid var(--dz-line-soft); padding-top: 16px; margin-top: 36px; }
/* Terugval voor posts die de inline-variant nog dragen. */
.ddk p[style*="border-top"] { border-top-color: var(--dz-line-soft) !important; color: var(--dz-dim); }

/* ── 10. Responsief ──────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .dz-feed { grid-template-columns: 1fr; }
  .dz-card:nth-child(n) { transform: none; }
  .ddk .cards { grid-template-columns: 1fr; }
}
/* ── Mobiele navigatie ───────────────────────────────────────────────────────
   Merk gecentreerd bovenaan, de drie items in één rij eronder. De buitenste rij
   wordt een kolom; in kolomrichting is een linkerrand geen scheiding maar een
   streep naast gecentreerde tekst, dus die gaat weg.

   🔴 DE DRIE ITEMS BLIJVEN OP ÉÉN REGEL, EN DAT MOET AFGEDWONGEN WORDEN.
   Er staan twee lijsten naast elkaar (`.dz-nav-list` met de site-navigatie en
   `.dz-nav-extern` met de uitgang), en `.dz-nav-menu` erft `flex-wrap: wrap`
   van de basisregel. Zonder `nowrap` mag de tweede lijst dus naar een eigen
   regel springen — dan staat DRIFTZZ.NL onder HOME en BLOG.

   ⚠️ NOWRAP ALLEEN IS NIET GENOEG, EN DAT IS GEMETEN. Bij de vorige versie
   pasten de items op 360 px precies en liepen ze op 320 px over: DRIFTZZ.NL viel
   buiten beeld en `margin: 0 auto` centreerde het logo vervolgens in een balk
   die breder was dan het scherm, dus die schoof mee naar rechts. Niet-afbreken
   zonder krimpen verplaatst het probleem van wrappen naar overlopen.

   Daarom krimpen hieronder de spatiëring, de gap en de lettergrootte mee in twee
   stappen. Gemeten op 320 · 360 · 390 px; op 320 px is er nu marge over.
   Géén hamburger: drie items horen zichtbaar te blijven. */
@media (max-width: 768px) {
  .dz-nav-inner { flex-direction: column; justify-content: center; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
  .dz-nav-brand { margin: 0 auto; justify-content: center; }
  .dz-nav-menu { width: 100%; justify-content: center; gap: 14px; flex-wrap: nowrap; }
  .dz-nav-list { justify-content: center; gap: 14px; flex-wrap: nowrap; }
  .dz-nav-item a { white-space: nowrap; }
  .dz-nav-extern { padding-left: 0; border-left: 0; }
}
@media (max-width: 400px) {
  .dz-nav-menu, .dz-nav-list { gap: 10px; }
  .dz-nav-item a { font-size: .70rem; letter-spacing: .04em; }
}
@media (max-width: 340px) {
  .dz-nav-menu, .dz-nav-list { gap: 8px; }
  .dz-nav-item a { font-size: .64rem; letter-spacing: .02em; }
  .dz-nav-brand img { max-height: 28px; }
}
@media (max-width: 560px) {
  .dz-nav-inner { min-height: 58px; }
  .ddk .calc { transform: none; box-shadow: 6px 6px 0 var(--dz-roze); }
  .dz-card { box-shadow: 6px 6px 0 var(--dz-roze-dim); }
}

/* ── 11. Print ───────────────────────────────────────────────────────────── */
@media print {
  body { background: #fff; color: #000; }
  .dz-nav, .dz-footer, .dz-related, .dz-cta, .ddk .calc { display: none; }
  .ddk, .ddk .log, .ddk .faq details { background: #fff; color: #000; box-shadow: none; border-color: #000; }
  .dz-content a { color: #000; }
}