/* ============================================================================
   privacy.css - de privacyverklaring op /spoke-privacy-policy/ (ronde 7 stap 2)

   NAAMRUIMTE: alles onder .privacy-. Getoetst tegen styles.css, forms.css,
   services.css, work.css, about.css en news.css vóór het bouwen, met een
   positieve controle op .news-head en .about-careers: 0 treffers voor
   `privacy`, `legal` en `toc`. Dat is DESIGN.md §6b3, en het kostte ronde 6 een
   kopsectie van 495px in plaats van 1240px.

   Uitsluitend bestaande tokens (§1). Geen nieuwe kleur, ease of radius.
   ========================================================================== */

/* ------------------------------------------------- BAND 1: de kop (ink) */
.privacy-head {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(96px, 11vw, 150px) 0 clamp(56px, 6vw, 80px);
}
/* De huisregel die nergens stond tot ronde 2: elke donkere sectie zet .kicker op
   --grey. Op --grey-2 is dat 3,37:1 op ink en dus onder de 4,5:1 van §8. */
.privacy-head .kicker { color: var(--grey); }

/* Tweezonig (§6b), op het story-raster "tekst naast beeld". Hier draagt de
   tweede zone geen beeld maar de drie feiten uit het document; §6b staat
   meta-labels daar expliciet voor toe. */
.privacy-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: end;
}
.privacy-head h1 { margin: 0; }

/* Label boven waarde, letterlijk de .about-facts-vorm uit ronde 4. Bewust NIET
   de .minifacts-vorm (label links, waarde rechts): die widget staat op de
   homepage en dezelfde vorm hergebruiken zou de optelsom zijn die §6d verbiedt. */
.privacy-facts {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--line-w);
}
.privacy-facts div {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-w);
}
.privacy-facts dt { color: var(--grey); }
.privacy-facts dd { margin: 0; font-weight: 650; font-size: 1.05rem; }

/* --------------------------------------------- BAND 2: het document (paper) */
.privacy-body {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(64px, 7vw, 96px) 0 clamp(80px, 9vw, 120px);
}

/* ---- de inhoudsopgave ---------------------------------------------------- */
/* PLAKKEN IS APPARATUUR EN GEEN EIS (§6b). .news-rail plakt onvoorwaardelijk;
   dat kan daar omdat die rail kort is. Deze draagt negen labels, dus hij plakt
   pas vanaf een vensterhoogte waarop hij aantoonbaar past. De drempel staat
   hieronder en is GEMETEN, niet geschat: een min-height die op elk scherm
   uitstaat is dode code, precies de drift van --glide. */
.privacy-toc { align-self: start; }
.privacy-toc-label { color: var(--grey-2); margin: 0 0 18px; }
.privacy-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-k);
}
.privacy-toc-list li { border-bottom: 1px solid var(--line-k); }
.privacy-toc-list a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 11px 0;
  color: var(--ink);
  transition: color 0.25s var(--ease-out);
}
.privacy-toc-num { color: var(--red-deep); }
.privacy-toc-text { font-weight: 620; line-height: 1.25; }
/* Hover alleen achter een echte muis (§8), en deze belofte wordt ingelost: elk
   item is een link naar een anker dat op deze pagina bestaat, en check-links
   toets 1 bewaakt dat. */
@media (hover: hover) and (pointer: fine) {
  .privacy-toc-list a:hover { color: var(--red-deep); }
}

/* ---- de tekst ------------------------------------------------------------ */
/* GEEN max-width op de alinea's, en dat is gemeten en geen slordigheid. In de
   2fr-kolom van .news-inner is een regel op 1440px ongeveer 723px, bij 16px
   tekst dus rond de 72 tekens: precies het leesbare bereik. Een extra
   begrenzing zou de sectie onder de 80% van §6c duwen zonder iets op te lossen. */
.privacy-text > :first-child { margin-top: 0; }
.privacy-text p { margin: 0 0 18px; line-height: 1.62; }
.privacy-text strong { font-weight: 700; }
.privacy-text em { font-style: italic; }

/* DE OPSOMMINGEN KRIJGEN HUN PUNT TERUG, en het is de huispunt. styles.css r.56
   zet `ul, ol { list-style: none }` voor de hele site, dus zonder deze regels
   staan de 31 lijstitems van dit document als losse regels onder elkaar: precies
   een opsomming die niet meer als opsomming leest, terwijl de items hier
   OPSOMMEND zijn (welke gegevens verzameld worden, aan wie ze verstrekt worden).
   Zichtbaar op de eerste opname, en door geen enkele poort te vinden.

   Letterlijk de vorm van .person-prose li::before uit ronde 4, hergebruikt en
   niet nagebouwd. De rode punt is bovendien het kicker-patroon van §4 in het
   klein, dus de opsomming leest als deze site en niet als een browser-default. */
.privacy-text ul { margin: 0 0 18px; padding: 0; }
.privacy-text li { position: relative; padding-left: 20px; margin: 0 0 8px; line-height: 1.55; }
.privacy-text li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}

/* Link-kleur erft de tekstkleur; het rood zit in de onderstreping. Een rode
   link op paper haalt 3,54:1 en dat is te weinig voor lopende tekst, terwijl de
   decoratiekleur niet aan die eis gebonden is. Zelfde behandeling als
   .person-prose a. */
.privacy-text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.25s var(--ease-out);
}
.privacy-text a:hover { text-decoration-color: var(--ink); }

/* De sectiekoppen. Het kop-recept van §2 (smal en zwaar, uppercase), op de
   huismaat voor een kop in een kolom. Ze dragen een id en zijn het doel van de
   inhoudsopgave, vandaar de scroll-marge onder de vaste nav: zonder die marge
   verdwijnt de kop waar je net heen sprong onder de balk. */
.privacy-text h2 {
  margin: 44px 0 14px;
  scroll-margin-top: calc(var(--nav-h) + 24px);
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  font-stretch: 64%;
  font-weight: 820;
  letter-spacing: 0.002em;
  line-height: 1.1;
  text-transform: uppercase;
}
.privacy-text h2:first-child { margin-top: 0; }
/* EEN <strong> BINNEN EEN KOP MAG DIE KOP NIET LICHTER MAKEN, en dat is precies
   wat er hier gebeurde. De bron van de klant zet zeven van de negen sectiekoppen
   als vetgedrukte tekst, dus privacyBlocks.mjs draagt op die zeven een
   `strong`-mark. `.privacy-text strong` en `.privacy-text h2` hebben dezelfde
   specificiteit maar raken VERSCHILLENDE elementen: de kop kreeg 820, de span
   erbinnen 700. Gemeten op 1440px, vóór deze regel: zeven koppen op 700 en twee
   op 820 op dezelfde pagina, dus zeven buiten het bereik 780-840 van §2.
   Zichtbaar naast elkaar, en door geen enkele poort gezien.
   De regel staat hier en niet in de data: hij houdt ook als SPOKE morgen een
   sectie bijplakt met opmaak eraan. Toets 5 van check-careers.mjs bewaakt de
   uitkomst en niet de aanwezigheid van deze regel. */
.privacy-text h2 strong { font-weight: inherit; }

.privacy-contact { margin: 36px 0 0; }

/* ---- responsive ---------------------------------------------------------- */
/* Onder 1000px klappen beide rasters naar één kolom, net als elk ander
   twee-zone-raster van deze site (.news-inner, .statement-cols, story). */
@media (max-width: 1000px) {
  .privacy-head-grid { grid-template-columns: 1fr; align-items: start; }
  .privacy-facts { margin-top: 28px; }
}

/* De rail plakt alleen als hij PAST, en de drempel is GEMETEN (§6b).
   Railhoogte 543px op 1024px breed en 522px op 1440px; onder de nav is er
   vensterhoogte - 98px beschikbaar, dus hij past vanaf ongeveer 641px. De
   drempel staat op 700px, dezelfde die /yield/ na zijn hermeting kreeg.

   NIET HOGER ZETTEN "voor de zekerheid". Plakt de rail niet, dan staat deze
   kolom 4400px lang leeg naast de tekst, en dat is precies het gat dat §6b
   vierde geval beschrijft. Een drempel die op de meeste schermen uitstaat is
   bovendien dode code, de drift van --glide.

   De rail GROEIT als SPOKE een sectie toevoegt (elke rij is ~56px op 1024px),
   dus dit is geen eenmalige meting: check-careers.mjs toetst de hoogte op
   1024x700 en 1440x800, precies zoals check-about.mjs dat voor de
   expertiserail doet. */
@media (min-width: 1001px) and (min-height: 700px) {
  .privacy-toc {
    position: sticky;
    top: calc(var(--nav-h) + 26px);
  }
}