/* De huisstijl staat in 5-stijl/stijl.md: kleuren, letters, logo en koppen. De namen hieronder volgen die tabel. */

@font-face { font-family: "Host Grotesk"; src: url("fonts/host-grotesk.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Doto"; src: url("fonts/doto.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --grond: #0C1014;
  --vlak: #12171C;
  --uit: #232A31;
  --ijs: #7CD8FF;
  --tekst: #F0F4F7;
  --gedempt: #98A4AF;
  --gloed: rgba(124, 216, 255, 0.8);

  --sans: "Host Grotesk", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --doto: "Doto", "Geist Mono", monospace;

  --balk: 72px;
  --rand: clamp(16px, 3.5vw, 56px);
  --breed: 1680px;
  --zij: max(var(--rand), calc((100% - var(--breed)) / 2));
  --lucht: clamp(72px, 9vw, 144px);
  --kop: clamp(36px, 4.7vw, 76px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: dark;
  background: var(--grond);
  scrollbar-color: var(--gedempt) var(--grond);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--balk) + 8px);
}

body {
  margin: 0;
  background: var(--grond);
  color: var(--tekst);
  font: 400 17px/1.5 var(--sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.03em; text-wrap: balance; }
h2 { font-size: var(--kop); line-height: 1.07; }
p, figure, blockquote { margin: 0; }
a { color: inherit; }
::selection { background: var(--ijs); color: var(--grond); }
:focus-visible { outline: 2px solid var(--ijs); outline-offset: 3px; }

.ijs { color: var(--ijs); }

/* De punt achter een kop is rond, net als de punt in het logo. */
.kop-punt {
  display: inline-block;
  overflow: hidden;
  width: 0.17em;
  height: 0.17em;
  margin-left: 0.04em;
  border-radius: 50%;
  background: var(--ijs);
  color: transparent;
  line-height: 0;
}

.label {
  font: 500 12px/16px var(--mono);
  text-transform: uppercase;
  color: var(--gedempt);
}

.lees {
  max-width: 34em;
  font-size: clamp(17px, 1.35vw, 20px);
  color: var(--gedempt);
  text-wrap: pretty;
}

.getal {
  font-family: var(--doto);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ijs);
  text-shadow: 0 0 0.11em var(--gloed);
}

.knop {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--ijs);
  color: var(--grond);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.18s, box-shadow 0.18s;
}
/* Een knop reageert op de muis en op aanraking. Hover alleen op apparaten met een muis, anders blijft die na een tik hangen. */
@media (hover: hover) {
  .knop:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--ijs), white 22%);
  }
}
.knop:active { transform: scale(0.97); }
button.knop { border: 0; font-family: inherit; cursor: pointer; }
.knop-balk { padding: 0 16px; min-height: 44px; font-size: 15px; }

.overslaan {
  position: absolute;
  left: var(--rand);
  top: 12px;
  z-index: 20;
  padding: 8px 14px;
  background: var(--ijs);
  color: var(--grond);
  font-weight: 600;
  transform: translateY(-200%);
}
.overslaan:focus { transform: none; }

/* De plekken die op beeld wachten. */
.plek {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: var(--uit);
  color: var(--gedempt);
  font: 400 12px/16px var(--mono);
  text-align: center;
}

/* Label voor een AI-beeld: <figcaption class="ai-label">AI-beeld</figcaption>. Het portret heeft dit bewust niet, zie LEESMIJ.md. */
.ai-label {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 8px;
  background: var(--grond);
  color: var(--tekst);
  font: 500 11px/14px var(--mono);
  text-transform: uppercase;
}

/* Het raster: 7 dagen van 24 uur, als stippen op een lijn, zodat ze op elk formaat scherp blijven. */
.raster { display: block; width: 100%; height: auto; overflow: visible; }
.raster .stippen { stroke: var(--uit); }
.raster .aan { fill: var(--ijs); }
.raster .fel { filter: drop-shadow(0 0 8px var(--gloed)); }
.raster .half { opacity: 0.45; }

/* De naam */
.naam {
  display: inline-block;
  padding-block: 8px;
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-decoration: none;
}
.punt {
  display: inline-block;
  width: 0.22em;
  height: 0.22em;
  margin-left: 0.08em;
  border-radius: 50%;
  background: var(--ijs);
}

/* De balk */
.balk {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--balk);
  padding-inline: var(--zij);
  background: var(--grond);
}
.balk nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.balk nav a {
  padding-block: 12px;
  font-size: 15px;
  line-height: 20px;
  text-decoration: none;
}

/* Onder een link tekent zich een lijn. */
.balk nav a:not(.knop),
.voet-links a { position: relative; }
.balk nav a:not(.knop)::after,
.voet-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.balk nav a:not(.knop):focus-visible::after,
.voet-links a:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) {
  .balk nav a:not(.knop):hover,
  .voet-links a:hover { color: var(--ijs); }
  .balk nav a:not(.knop):hover::after,
  .voet-links a:hover::after { transform: scaleX(1); }
  .naam:hover { opacity: 0.75; }
}
/* Bij een tik op een telefoon is er geen hover, dus die reactie komt hier. */
.balk nav a:not(.knop):active,
.voet-links a:active,
.kanalen a:active { color: var(--ijs); }
.naam:active { opacity: 0.75; }

.sectie { padding: var(--lucht) var(--zij); }
.sectie > .label { margin-bottom: 16px; }

/* De opening: de opbouw komt uit het blok SITE in 5-stijl/De-set.dc.html. Staat "beweeg" aan, dan tekent opening.js het raster op een doek. */
.opening {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 40px);
  min-height: calc(100svh - var(--balk));
  padding: clamp(8px, 1.6vw, 24px) var(--zij) clamp(24px, 3vw, 40px);
}
.opening h1 { font-size: clamp(44px, min(7.03vw, 13.5svh), 132px); line-height: 1.055; }
.w { display: inline-block; overflow: hidden; vertical-align: bottom; margin: 0 -0.05em -0.16em; padding: 0 0.05em 0.16em; }
.w > span { display: inline-block; }

.opening-onder {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  grid-template-rows: auto minmax(200px, 1fr);
  grid-template-areas: ". label" "tekst podium";
  gap: 12px clamp(24px, 3.6vw, 56px);
}
.opening-beeld { display: contents; }
.opening-tekst { grid-area: tekst; display: grid; gap: 24px; justify-items: start; align-self: end; }
.opening-label { grid-area: label; display: flex; align-items: flex-end; gap: 12px 14px; }
.teller { display: none; font-size: clamp(44px, 5vw, 88px); line-height: 0.8; }
/* Deze zin is het bewijs op het eerste scherm, dus gewone tekst en geen label. */
.opening-zin { position: relative; max-width: 44em; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.3; text-wrap: pretty; }
.opening-nu { margin-left: auto; white-space: nowrap; }
.podium { grid-area: podium; position: relative; min-height: 0; }
.podium .raster { position: absolute; inset: 0; height: 100%; }

@media (min-width: 760px) and (max-aspect-ratio: 9/5) {
  .opening-onder {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(220px, 1fr) auto;
    grid-template-areas: "label" "podium" "tekst";
  }
  .opening-tekst { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
}

@media (min-width: 760px) and (max-aspect-ratio: 1/1) {
  .opening h1 { font-size: 10.4vw; }
}

/* Het doek ligt over de pagina heen en vangt geen klikken. */
.doek { position: fixed; top: 0; left: 0; z-index: 4; width: 100%; height: 100lvh; pointer-events: none; }

.beweeg .podium .raster { display: none; }
.beweeg .teller { display: block; animation: verschijn 0.5s 0.35s both; }
.beweeg .teller-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.opening-zin.bezig { color: transparent; }
.opening-zin-laag { position: absolute; inset: 0; overflow: hidden; color: var(--tekst); }
.beweeg .week-168 .getal { opacity: 0; }

/* De kop komt woord voor woord omhoog. "vrij" en de punt wachten op de stip die uit het raster springt. */
@keyframes woord { from { transform: translateY(112%); } }
@keyframes verschijn { from { opacity: 0; } }
@keyframes omhoog { from { opacity: 0; transform: translateY(14px); } }
@keyframes vrij-licht { 30% { text-shadow: 0 0 0.3em var(--gloed); } }
@keyframes punt-land { from { transform: scale(2.4); } }
.beweeg .w > span { animation: woord 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
.beweeg .w:nth-child(2) > span { animation-delay: 0.05s; }
.beweeg .w:nth-child(3) > span { animation-delay: 0.1s; }
.beweeg .w:nth-child(4) > span { animation-delay: 0.15s; }
.beweeg .w:nth-child(5) > span { animation-delay: 0.2s; }
.beweeg .w:nth-child(6) > span { animation-delay: 0.25s; }
.beweeg .w:nth-child(7) > span { animation-delay: 0.3s; }
.beweeg .w:nth-child(8) > span { animation-delay: 0.35s; }
.beweeg .opening-tekst .lees { animation: omhoog 0.7s 0.8s both; }
.beweeg .opening-tekst .knop { animation: omhoog 0.7s 0.95s both; }
.beweeg .opening-zin, .beweeg .opening-nu { animation: verschijn 0.5s 0.4s both; }
.beweeg .opening:not(.geland) .vrij { color: var(--tekst); }
.beweeg .opening:not(.geland) .opening-punt { opacity: 0; }
.beweeg .opening .vrij { transition: color 0.45s; }
.beweeg .opening.geland .vrij { animation: vrij-licht 1.5s ease-out; }
.beweeg .opening.woorden-klaar .w { overflow: visible; }
.beweeg .opening.geland .opening-punt { animation: punt-land 0.55s cubic-bezier(0.3, 1.6, 0.5, 1); }

/* De week: de bezoeker zet zelf de uren aan. */
.week { background: var(--vlak); }
.week-boven {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.week-168 .getal { display: block; margin-left: -0.03em; font-size: clamp(112px, 15.5vw, 260px); line-height: 0.92; }
.week-regel {
  display: block;
  margin-top: 8px;
  font-size: clamp(26px, 2.8vw, 44px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.week-vraag { display: grid; gap: 16px; }

html:not(.js) .week-spel, html:not(.js) .week-vraag .lees { display: none; }
.week-spel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(250px, 22vw, 360px);
  grid-template-rows: auto 1fr;
  grid-template-areas: "raster uitkomst" "raster keuzes";
  gap: 24px clamp(24px, 3vw, 48px);
}
.speelveld { display: contents; }

.raster-spel {
  grid-area: raster;
  display: grid;
  grid-template-columns: 2.4ch repeat(24, minmax(0, 1fr));
  grid-template-rows: 22px repeat(7, auto);
  align-self: start;
  font: 400 11px/1 var(--mono);
  color: var(--gedempt);
  user-select: none;
  -webkit-user-select: none;
}
.rk-dag { grid-column: 1; grid-row: calc(var(--dag) + 2); display: flex; align-items: center; }
.rk-uur { grid-column: calc(var(--uur) + 2); grid-row: 1; display: flex; align-items: flex-start; justify-content: center; }
.uur {
  grid-column: calc(var(--uur) + 2);
  grid-row: calc(var(--dag) + 2);
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.uur::before {
  content: "";
  width: 61%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--uit);
  transition: background-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.uur:hover::before { background: color-mix(in srgb, var(--uit), var(--tekst) 22%); }
.uur[aria-pressed="true"]::before {
  background: var(--ijs);
  box-shadow: 0 0 8px var(--gloed);
  transform: scale(1.12);
}
.uur:focus-visible { outline-offset: -2px; }

.uitkomst { grid-area: uitkomst; display: grid; gap: 8px; align-content: start; }
.uitkomst .getal { font-size: clamp(56px, 7.4vw, 124px); line-height: 0.95; }
.uitkomst-tekst { display: grid; gap: 10px; }
.uitkomst-zin {
  font-size: clamp(18px, 1.55vw, 24px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.uitkomst-uitleg { font-size: 14px; line-height: 1.35; color: var(--gedempt); text-wrap: pretty; }

.keuzes-kolom { grid-area: keuzes; display: grid; gap: 12px; align-content: end; }
.keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.keuze {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--uit);
  border-radius: 999px;
  background: none;
  color: var(--tekst);
  font: 500 14px/1 var(--sans);
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
}
.keuze:hover { border-color: var(--gedempt); }
.keuze:active { transform: scale(0.96); }
.keuze::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--uit);
}
.keuze[aria-pressed="true"]::before { background: var(--ijs); box-shadow: 0 0 6px var(--gloed); }
.keuze[data-wis]::before { display: none; }

/* De twee sterkste zinnen van de pagina krijgen elk een eigen scherm. */
.herkenning,
.uitspraak {
  display: grid;
  align-content: center;
  gap: clamp(24px, 3vw, 44px);
  min-height: calc(100svh - var(--balk));
}
.herkenning h2,
.uitspraak h2 { font-size: clamp(42px, min(6.8vw, 13svh), 124px); line-height: 1.04; }
.herkenning-tekst { display: grid; gap: 16px; }
/* Op een tablet die rechtop staat, is het scherm veel hoger dan de zin nodig heeft. */
@media (min-width: 760px) and (max-aspect-ratio: 1/1) {
  .herkenning h2,
  .uitspraak h2 { font-size: 10.4vw; }
  .herkenning,
  .uitspraak { min-height: min(calc(100svh - var(--balk)), 100vw); }
}

/* Verhaal */
.verhaal {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: start;
}
.verhaal-kop { display: grid; gap: 20px; justify-items: start; }
.verhaal-foto { position: relative; width: min(100%, 300px); aspect-ratio: 4 / 5; margin-top: 12px; }
.verhaal-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hoofdstukken { margin: 0; padding: 0; list-style: none; }
.hoofdstukken li {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 8px 24px;
  padding-block: clamp(24px, 2.6vw, 36px);
  border-top: 1px solid var(--uit);
}
.hoofdstukken li:first-child { padding-top: 0; border-top: 0; }
.hoofdstukken .label { padding-top: 0.5em; }
.hoofdstukken h3 { font-size: clamp(24px, 2.35vw, 36px); line-height: 1.14; letter-spacing: -0.025em; }
.hoofdstukken h3 + p { margin-top: 10px; color: var(--gedempt); text-wrap: pretty; }

/* Eigen OS */
.os { background: var(--vlak); }
.os-boven { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: end; }
.os .getal { display: block; margin-left: -0.04em; font-size: clamp(92px, 17vw, 290px); line-height: 0.92; letter-spacing: -0.03em; white-space: nowrap; }
.os h2 { margin-top: 12px; font-size: clamp(28px, 3.4vw, 54px); line-height: 1.12; letter-spacing: -0.025em; }
.taken { margin: 20px 0 0; padding: 0; list-style: none; font-size: 20px; line-height: 28px; }
.taken li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px;
  border-top: 1px solid var(--uit);
}
.taken li::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ijs);
  box-shadow: 0 0 8px var(--gloed);
}

.mijn-week {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(250px, 22vw, 360px);
  gap: 14px clamp(24px, 3vw, 48px);
  align-items: end;
  margin-top: clamp(48px, 6vw, 96px);
}
.mijn-week-raster {
  display: grid;
  grid-template-columns: 2.4ch minmax(0, 1fr);
  grid-template-rows: 22px auto;
  font: 400 11px/1 var(--mono);
  color: var(--gedempt);
}
.mw-uren { grid-column: 2; display: grid; grid-template-columns: repeat(4, 1fr); }
.mw-uren span { width: calc(100% / 6); text-align: center; }
.mw-dagen { grid-row: 2; display: grid; grid-template-rows: repeat(7, 1fr); align-items: center; }
.mijn-week-raster .raster { grid-column: 2; grid-row: 2; }
.mijn-week-uitleg { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.4; color: var(--gedempt); text-wrap: pretty; }

.os-onder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 88px);
  margin-top: clamp(48px, 6vw, 96px);
}
.thuis { display: grid; gap: 16px; align-content: start; }
.thuis h3, .gastheer blockquote {
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.gastheer { display: grid; gap: 16px; align-content: start; }

/* Video's */
.videos-rij {
  display: grid;
  grid-template-columns: minmax(0, 16fr) minmax(0, 5.0625fr) minmax(0, 5.0625fr);
  gap: clamp(12px, 1.6vw, 24px);
  margin-top: clamp(32px, 4vw, 56px);
}
.plek-breed { aspect-ratio: 16 / 9; }
.plek-staand { aspect-ratio: 9 / 16; }
.kanalen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(12px, 1.6vw, 24px); margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; list-style: none; }
.kanalen a {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-block: 14px;
  border-top: 1px solid var(--uit);
  text-decoration: none;
}
/* De lijn boven een kanaal licht op van links naar rechts. */
.kanalen a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--ijs);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.kanalen a:focus-visible::before { transform: scaleX(1); }
.kanalen span { color: var(--gedempt); }
@media (hover: hover) {
  .kanalen a:hover { color: var(--ijs); }
  .kanalen a:hover::before { transform: scaleX(1); }
}

/* Drie slides uit de post Mijn verhaal, samen één link naar Instagram. Niets ingesloten, dus geen cookies van anderen. */
.posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 24px);
  margin-top: clamp(32px, 4vw, 56px);
}
.post { display: block; overflow: hidden; background: var(--uit); }
.post img { display: block; width: 100%; height: auto; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
@media (hover: hover) {
  .posts:hover .post img { transform: scale(1.025); }
}
.posts:active .post img { transform: scale(1.01); }

/* CAZT: op een vlak in IJs blijft alles donker. */
.cazt {
  --uit: rgba(12, 16, 20, 0.13);
  display: grid;
  gap: clamp(40px, 6vw, 88px);
  background: var(--ijs);
  color: var(--grond);
}
.cazt ::selection { background: var(--grond); color: var(--ijs); }
.cazt :focus-visible { outline-color: var(--grond); }
.cazt-merk { width: clamp(44px, 4.4vw, 64px); height: auto; margin-left: -2px; }
.cazt h2 {
  margin-top: clamp(24px, 3vw, 40px);
  font-size: clamp(56px, 10.4vw, 196px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.cazt-onder {
  display: grid;
  grid-template-columns: minmax(280px, 440px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: end;
}
.cazt-tekst { display: grid; gap: 24px; justify-items: start; }
.cazt-tekst p { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; text-wrap: pretty; }
.cazt .knop { background: var(--grond); color: var(--ijs); }
@media (hover: hover) {
  .cazt .knop:hover { background: color-mix(in srgb, var(--grond), var(--ijs) 14%); box-shadow: 0 8px 22px rgba(12, 16, 20, 0.28); }
}
.cazt .raster .aan { fill: var(--grond); }
.cazt .raster .fel { filter: none; }

/* De voet */
.voet { padding: clamp(40px, 5vw, 72px) var(--zij) clamp(24px, 3vw, 40px); }
.voet-boven { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 5vw, 88px); }
.voet-zin { max-width: 30em; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.35; letter-spacing: -0.01em; text-wrap: pretty; }
.voet-links { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 0 clamp(24px, 4vw, 64px); align-content: start; }
.voet-links a { justify-self: start; padding-block: 10px; font-size: 16px; text-decoration: none; }
.voet-naam { margin-top: clamp(40px, 6vw, 88px); container-type: inline-size; }
.voet-naam > span {
  display: block;
  font-size: 14vw;
  font-size: calc(100cqw / 6.5);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: nowrap;
}
.voet-naam .punt { width: 0.2em; height: 0.2em; margin-left: 0.07em; }
.voet-gegevens { margin-top: clamp(16px, 2vw, 24px); font-size: 13px; line-height: 1.4; color: var(--gedempt); }

/* Privacy en 404 */
.pagina { padding: clamp(24px, 4vw, 56px) var(--zij) var(--lucht); }
.pagina h1 { font-size: clamp(44px, 6vw, 96px); line-height: 1.04; }
.pagina .label { margin-bottom: 16px; }
.tekst { max-width: 44em; margin-top: clamp(32px, 4vw, 56px); }
.tekst h2 { margin-top: 40px; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; letter-spacing: -0.02em; }
.tekst p { margin-top: 12px; color: var(--gedempt); text-wrap: pretty; }
.tekst a { color: var(--tekst); }
.tekst a:hover { color: var(--ijs); }
.niet-gevonden { display: grid; gap: clamp(32px, 5vw, 64px); align-content: space-between; min-height: calc(100svh - var(--balk)); padding-bottom: clamp(24px, 3vw, 40px); }
.niet-gevonden-tekst { display: grid; gap: 24px; justify-items: start; }
.afmelden { display: grid; gap: 24px; justify-items: start; align-content: start; }
.afmelden p { max-width: 34em; color: var(--gedempt); }
.afmelden a:not(.knop) { color: var(--tekst); }
.voet-klein {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  padding: 24px var(--zij);
  border-top: 1px solid var(--uit);
}
.voet-klein p { font-size: 13px; line-height: 1.4; color: var(--gedempt); }
.voet-klein a { color: var(--gedempt); }
.voet-klein a:hover { color: var(--ijs); }
.voet-klein nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* Telefoon */
@media (max-width: 759px) {
  :root { --balk: 64px; }
  .naam { font-size: 20px; }

  .herkenning,
  .verhaal,
  .os-boven,
  .os-onder,
  .cazt-onder,
  .week-boven,
  .voet-boven { grid-template-columns: minmax(0, 1fr); }
  .opening h1 { font-size: clamp(40px, 12.2vw, 76px); }
  .opening-onder {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "tekst" "label" "podium";
    gap: 12px;
  }
  .opening-tekst { margin-bottom: 20px; }
  .podium { aspect-ratio: 624 / 182; }
  .opening-nu { display: none; }

  /* Met beweging staat de week rechtop, zoals in de reels: dagen naast elkaar, uren onder elkaar. */
  .beweeg .opening-onder {
    grid-template-columns: minmax(0, 1fr) clamp(116px, 41vw, 190px);
    grid-template-rows: 1fr auto;
    grid-template-areas: "label podium" "tekst podium";
    gap: 16px 14px;
  }
  .beweeg .opening-label { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 8px; }
  .beweeg .opening-tekst { margin-bottom: 0; gap: 16px; }
  .beweeg .opening-tekst .lees { font-size: 16px; line-height: 1.4; }
  .beweeg .opening-zin { font-size: 15px; line-height: 1.32; }
  .beweeg .opening-tekst .knop { padding: 0 16px; font-size: 15px; white-space: nowrap; }
  .beweeg .podium { aspect-ratio: auto; }

  .week-boven { gap: 28px; }
  .week-spel { display: block; }
  .keuzes-kolom { margin-bottom: 8px; }
  [data-status] { display: none; }
  .speelveld { display: block; }

  /* Het getal blijft in beeld terwijl je uren aanzet. */
  .uitkomst {
    position: sticky;
    top: var(--balk);
    z-index: 5;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding-block: 12px;
    background: var(--vlak);
  }
  .uitkomst .getal { font-size: 60px; min-width: 1.75em; }
  .uitkomst-tekst { gap: 4px; }
  .uitkomst-zin { font-size: 16px; }
  .uitkomst-uitleg { font-size: 13px; }

  .raster-spel {
    margin-top: 4px;
    grid-template-columns: 2.6ch repeat(7, minmax(0, 1fr));
    grid-template-rows: 22px repeat(24, 28px);
  }
  .rk-dag { grid-column: calc(var(--dag) + 2); grid-row: 1; justify-content: center; }
  .rk-uur { grid-column: 1; grid-row: calc(var(--uur) + 2); align-items: center; justify-content: flex-start; }
  .uur { grid-column: calc(var(--dag) + 2); grid-row: calc(var(--uur) + 2); aspect-ratio: auto; }
  .uur::before { width: 18px; }

  .hoofdstukken li { grid-template-columns: minmax(0, 1fr); }
  .herkenning h2,
  .uitspraak h2 { font-size: clamp(40px, min(12.2vw, 13svh), 76px); }

  .hoofdstukken .label { padding-top: 0; }
  .verhaal-foto { width: 100%; }

  .taken { margin-top: 0; }
  .mijn-week { grid-template-columns: minmax(0, 1fr); }

  .videos-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plek-breed { grid-column: 1 / -1; }
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post:first-child { grid-column: 1 / -1; }
  .kanalen { grid-template-columns: minmax(0, 1fr); }
}

/* Op een smalle telefoon past de knop naar CAZT niet naast drie links. */
@media (max-width: 419px) {
  .balk nav a[href="#videos"] { display: none; }
}

@media (max-width: 359px) {
  .naam { font-size: 18px; }
  .balk nav { gap: 10px; }
  .balk nav a { font-size: 14px; }
  .beweeg .opening-zin { font-size: 14px; line-height: 1.28; }
  .beweeg .opening-tekst { gap: 12px; }
  .pagina h1 { font-size: 30px; }
}

/* Lange computerschermen: de kop van het verhaal blijft staan terwijl de hoofdstukken voorbijkomen. */
@media (min-width: 1000px) and (min-height: 900px) {
  .verhaal-kop { position: sticky; top: calc(var(--balk) + 24px); }
  /* Het portret krimpt mee met de hoogte van het scherm, zodat de hele kop in beeld past. */
  .verhaal-foto { width: min(100%, 300px, calc((100svh - 540px) * 0.8)); }
}

/* Met ?beweging in het adres draait de beweging ook als de computer om minder beweging vraagt, om te beoordelen. */
@media (prefers-reduced-motion: reduce) {
  html:not(.beweeg) { scroll-behavior: auto; }
  html:not(.beweeg) *, html:not(.beweeg) *::before, html:not(.beweeg) *::after { animation: none !important; transition: none !important; }
}