/* ==========================================================================
   TeFre - tefre.nl - Het Lichtmengpaneel, vierde snede
   Geen verzameling posters maar één installatie. Eén doorlopende
   glasbaan verbindt alle hoofdstukken. Glasplaten schuiven op
   scrollpositie, zaallichten gaan aan als de bezoeker ervoor staat,
   het vuurtorenlicht ademt en de bundel draait mee. Geen fade-ins,
   geen parallax, geen hoverkunstjes. Beweging is gedrag, geen effect.
   80% rust, 20% licht. Homepage en Lighthouse gebruiken dit blad;
   de overige pagina's volgen bij hun ombouw.
   ========================================================================== */

/* Lettertypes lokaal (november 2026): geen verzoeken meer naar Google */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Papier en inkt */
  --papier: #faf8f4;
  --inkt: #20222b;
  --inkt-zacht: #575c68;
  --haarlijn: rgba(32, 34, 43, 0.16);

  /* Werelden als licht (altijd transparant toegepast) */
  --tao: #0d9488;
  --ai: #2f6bff;
  --podcast: #f26f22;
  --lessen: #2f9e44;
  --kunst: #e5397f;
  --licht: #f5b700;

  /* Donkere varianten voor tekst op papier (contrast) */
  --tao-tekst: #0a6e66;
  --ai-tekst: #1d4fd8;
  --podcast-tekst: #bb4d0a;
  --lessen-tekst: #23742f;
  --kunst-tekst: #c2255c;
  --licht-tekst: #7d5b00;

  --font: "General Sans", "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;

  --kader: 92rem;
  --rand: clamp(1.4rem, 5vw, 5.5rem);
  /* De doorlopende glasbaan: overal dezelfde plek en breedte */
  --draad-rechts: 22%;
  --draad-breed: clamp(3.5rem, 7vw, 7rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--inkt);
  background: var(--papier);
  overflow-x: hidden;
}

/* Korrel: licht wordt materiaal */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  opacity: 0.05;
}

/* De lichtvlek: een zachte plek daglicht die de bezoeker volgt */
.lichtvlek {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(245, 183, 0, 0.06), rgba(245, 183, 0, 0) 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 80;
  opacity: 0;
  transition: opacity 1.4s ease;
}

img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1.1em; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.02; letter-spacing: -0.03em; }

a { color: inherit; }
::selection { background: rgba(245, 183, 0, 0.35); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ai);
  outline-offset: 3px;
}

.kader { max-width: var(--kader); margin: 0 auto; padding-left: var(--rand); padding-right: var(--rand); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Kickers: de kleine mono-stem */
.kicker {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--inkt-zacht);
  margin: 0 0 1.4rem;
}

/* Het mengpunt: twee lichtjes die overlappen. Het merk in acht pixels. */
.mengpunt {
  display: inline-block;
  position: relative;
  width: 1.15em;
  height: 0.62em;
  margin-right: 0.55em;
}
.mengpunt::before, .mengpunt::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  mix-blend-mode: multiply;
}
.mengpunt::before { left: 0; background: rgba(13, 148, 136, 0.75); }
.mengpunt::after { right: 0; background: rgba(242, 111, 34, 0.75); }

/* Schuivend glas: elk element met data-schuif wordt door js/licht.js
   op scrollpositie verschoven; de trage overgang geeft het glas
   dezelfde traagheid als de platen van het mottoveld */
[data-schuif] {
  will-change: transform;
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* De draad: één teal glasbaan die de hele installatie doorloopt
   en onderaan uitmondt in de lichtlijn */
.draad {
  position: absolute;
  top: 0;
  bottom: 0;
  right: var(--draad-rechts);
  width: var(--draad-breed);
  background: rgba(13, 148, 136, 0.12);
  pointer-events: none;
}

/* ==========================================================================
   Navigatie: een dunne regel bovenaan, elke wereld draagt haar lichtje
   ========================================================================== */
.balk {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--kader);
  margin: 0 auto;
  padding: 1.6rem var(--rand) 0.4rem;
}
.merk { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; color: var(--inkt); }
.merk-logo { height: 40px; width: auto; }
.merk-tekst { display: flex; flex-direction: column; line-height: 1.25; }
.merk-naam { font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; }
.merk-naam .punt { color: var(--podcast); }
.merk-sub { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--inkt-zacht); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--haarlijn);
  border-radius: 2px;
  padding: 0.5rem 0.85rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--inkt);
  cursor: pointer;
}

.site-nav ul { list-style: none; display: flex; gap: 1.35rem; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0;
  text-decoration: none;
  color: var(--inkt-zacht);
  font-size: 0.95rem;
  font-weight: 500;
}
.site-nav a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wkleur, transparent);
  opacity: 0.55;
}
.site-nav a.neutraal::before { display: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--inkt); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.w-tao { --wkleur: var(--tao); }
.w-ai { --wkleur: var(--ai); }
.w-podcast { --wkleur: var(--podcast); }
.w-lessen { --wkleur: var(--lessen); }
.w-kunst { --wkleur: var(--kunst); }
.w-licht { --wkleur: var(--licht); }
/* Home draagt het mengpunt in het klein: teal en oranje in één stip */
.site-nav a.w-home::before {
  background: linear-gradient(135deg, var(--tao) 0 48%, var(--podcast) 52% 100%);
  opacity: 0.7;
}

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; width: 100%; }
  .site-nav.open { display: block; }
  .balk { flex-wrap: wrap; }
  .site-nav ul { flex-direction: column; gap: 0.1rem; padding: 0.8rem 0 1rem; border-top: 1px solid var(--haarlijn); margin-top: 0.8rem; }
  .site-nav a { padding: 0.55rem 0; font-size: 1.05rem; }
}

/* ==========================================================================
   De opening
   Drie verspringende regels, viewport-groot. Teal licht valt over
   "beter". De draad begint hier: hij rijst uit het kleurveld op,
   dwars door de regel "of leuker." heen, en loopt de hele pagina door.
   ========================================================================== */
.opening { position: relative; padding-top: clamp(2.5rem, 7vh, 5.5rem); }

.rug {
  position: absolute;
  left: clamp(0.6rem, 1.6vw, 1.6rem);
  top: clamp(8rem, 16vh, 12rem);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  z-index: 4;
}
.rug .mengpunt { margin: 0 0 0.55em; }

/* Het begin van de draad */
.zuil {
  position: absolute;
  right: var(--draad-rechts);
  top: 34%;
  bottom: 0;
  width: var(--draad-breed);
  background: rgba(13, 148, 136, 0.12);
  pointer-events: none;
}

.opening > .kader { position: relative; z-index: 2; }
.kop-xxl {
  font-size: clamp(3.4rem, 11.5vw, 10.5rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.96;
}
.kop-xxl > span { display: block; }
.kop-xxl .r2 { margin-left: clamp(2rem, 9vw, 9rem); }
.kop-xxl .r3 { margin-left: clamp(4rem, 19vw, 19rem); }
.kop-xxl em { font-style: italic; font-weight: 500; }

/* Teal licht valt over een woord: multiply tint papier en letters samen */
.glas-woord { display: inline-block; position: relative; }
.glas-woord::after {
  content: "";
  position: absolute;
  inset: 0.06em -0.12em 0 -0.08em;
  background: rgba(13, 148, 136, 0.34);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ==========================================================================
   Het mottoveld
   Twee glasplaten, teal en geel. Ze schuiven met de bezoeker mee:
   het groen in het midden ontstaat waar ze elkaar raken en lost weer
   op. De plaat ligt op de naad van papier en kleur.
   ========================================================================== */
.mottoveld {
  position: relative;
  margin-top: clamp(9rem, 22vh, 16rem);
  padding: clamp(4rem, 9vh, 7rem) 0 clamp(5rem, 12vh, 9rem);
}
/* De platen steken buiten beeld zodat het schuiven nooit een rand toont */
.mottoveld .veld-a {
  position: absolute;
  top: 0; bottom: 0;
  left: -8%;
  width: 74%;
  background: rgba(13, 148, 136, 0.26);
  will-change: transform;
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mottoveld .veld-b {
  position: absolute;
  top: 0; bottom: 0;
  right: -8%;
  width: 62%;
  background: rgba(245, 183, 0, 0.32);
  will-change: transform;
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.motto {
  position: relative;
  z-index: 2;
  font-size: clamp(2.1rem, 5.6vw, 5rem);
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.03em;
  line-height: 1.08;
  max-width: 21ch;
  margin: clamp(-11rem, -20vh, -6rem) 0 clamp(2.5rem, 6vh, 4.5rem);
}
.uitleg {
  position: relative;
  z-index: 2;
  max-width: 44ch;
  margin-left: clamp(0rem, 32vw, 34rem);
  margin-bottom: 0;
}

/* De plaat: volledig in beeld, bewust op de naad gelegd */
.plaat {
  position: absolute;
  z-index: 3;
  top: 0;
  right: clamp(2rem, 8vw, 9rem);
  width: clamp(10rem, 19vw, 17rem);
  height: clamp(10rem, 19vw, 17rem);
  margin: 0;
  transform: translateY(-56%);
}
.plaat img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 26%;
  border-radius: 50%;
}

/* ==========================================================================
   Het register als museumzaal
   Per ingang een cijfer zo groot als de wand. Het licht van een zaal
   gaat aan wanneer de bezoeker ervoor staat: --aan komt uit de
   scrollpositie, niet uit de muis.
   ========================================================================== */
.hulp { position: relative; padding: clamp(6rem, 14vw, 11rem) 0 clamp(2rem, 5vw, 4rem); }
.hulp > .kader { position: relative; z-index: 1; }
.hulp h2 {
  position: relative;
  font-size: clamp(2.2rem, 5.6vw, 4.8rem);
  letter-spacing: -0.04em;
  max-width: 14ch;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
/* Blauw licht schuift van buiten het beeld achter de vraag */
.hulp h2::before {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  bottom: 0.02em;
  width: 52vw;
  height: 0.85em;
  background: rgba(47, 107, 255, 0.13);
  z-index: -1;
}

.rij {
  position: relative;
  padding: clamp(5rem, 16vh, 11rem) 0;
}
/* Het zaallicht, van rand tot rand, gestuurd door aanwezigheid */
.rij::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: linear-gradient(100deg, var(--wkleur) 0%, transparent 78%);
  opacity: calc(var(--aan, 0) * 0.09);
  pointer-events: none;
}

/* Het zaalcijfer licht mee op */
.rij-nr {
  position: absolute;
  z-index: 0;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: clamp(11rem, 30vw, 27rem);
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--wkleur);
  opacity: calc(0.07 + var(--aan, 0) * 0.18);
  pointer-events: none;
}

.rij-kop, .rij-inhoud { position: relative; z-index: 1; }
.rij h3 {
  font-size: clamp(2rem, 4.6vw, 4rem);
  letter-spacing: -0.035em;
  margin-bottom: 1.4rem;
  color: var(--inkt);
  color: color-mix(in srgb, var(--wtekst, var(--inkt)) calc(var(--aan, 0) * 65%), var(--inkt));
}
.rij-inhoud p { color: var(--inkt-zacht); max-width: 36ch; margin-bottom: 1.4rem; }

/* Elke zaal hangt anders; de cijfers raken de rand, de inhoud nooit */
.rij:nth-of-type(1) .rij-nr { left: calc(50% - 50vw - 0.1em); }
.rij:nth-of-type(1) .rij-kop, .rij:nth-of-type(1) .rij-inhoud { margin-left: 44%; }
.rij:nth-of-type(2) .rij-nr { right: calc(50% - 50vw - 0.1em); }
.rij:nth-of-type(2) .rij-kop, .rij:nth-of-type(2) .rij-inhoud { margin-left: 2%; max-width: 52%; }
.rij:nth-of-type(3) .rij-nr { left: 24%; }
.rij:nth-of-type(3) .rij-kop, .rij:nth-of-type(3) .rij-inhoud { margin-left: 13%; }

.t-tao { --wtekst: var(--tao-tekst); }
.t-ai { --wtekst: var(--ai-tekst); }
.t-podcast { --wtekst: var(--podcast-tekst); }
.t-lessen { --wtekst: var(--lessen-tekst); }
.t-kunst { --wtekst: var(--kunst-tekst); }
.t-licht { --wtekst: var(--licht-tekst); }

.spoor {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wtekst, var(--inkt));
  padding-bottom: 0.25rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  margin-right: 1.8rem;
}

@media (max-width: 820px) {
  .rij { padding: clamp(4rem, 10vh, 7rem) 0; }
  .rij:nth-of-type(1) .rij-kop, .rij:nth-of-type(1) .rij-inhoud,
  .rij:nth-of-type(2) .rij-kop, .rij:nth-of-type(2) .rij-inhoud,
  .rij:nth-of-type(3) .rij-kop, .rij:nth-of-type(3) .rij-inhoud { margin-left: 0; max-width: none; }
  .rij:nth-of-type(3) .rij-nr { left: calc(50% - 50vw - 0.1em); }
}

/* ==========================================================================
   De vuurtoren
   Hier is het licht letterlijk aan: de cirkel ademt langzaam, en de
   lichtbundel draait mee met de positie van de bezoeker. De draad
   snijdt door het licht en wordt groen.
   ========================================================================== */
.vuurtoren {
  position: relative;
  margin-top: clamp(3rem, 7vw, 5rem);
  padding: clamp(7rem, 16vw, 13rem) 0;
  overflow: hidden;
}
.vuurtoren .lichtcirkel {
  position: absolute;
  top: 50%;
  right: clamp(-26rem, -22vw, -12rem);
  width: clamp(26rem, 66vw, 64rem);
  height: clamp(26rem, 66vw, 64rem);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(245, 183, 0, 0.52), rgba(245, 183, 0, 0.4) 62%, rgba(245, 183, 0, 0.18) 88%, rgba(245, 183, 0, 0) 100%);
  animation: adem 9s ease-in-out infinite alternate;
}
@keyframes adem {
  from { transform: translateY(-50%) scale(1); opacity: 0.88; }
  to { transform: translateY(-50%) scale(1.05); opacity: 1; }
}
/* De bundel: draait om het hart van het licht, gestuurd door scroll */
.bundel {
  position: absolute;
  top: 50%;
  right: 4%;
  width: 64vw;
  height: clamp(5rem, 12vw, 12rem);
  background: linear-gradient(270deg, rgba(245, 183, 0, 0.3), rgba(245, 183, 0, 0) 88%);
  transform-origin: 100% 50%;
  transform: translateY(-50%) rotate(var(--zwaai, 0deg));
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
  pointer-events: none;
}
.vuurtoren-inhoud { position: relative; z-index: 2; }
.vuurtoren .kicker { color: var(--licht-tekst); }
.vuurtoren h2 {
  font-size: clamp(2.3rem, 5.8vw, 5rem);
  letter-spacing: -0.04em;
  max-width: 15ch;
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}
.vuurtoren-prosa { max-width: 46ch; }
.vuurtoren-prosa p { margin-bottom: 1.1em; }
.vuurtoren-actie { margin-top: 2.2rem; }

/* ==========================================================================
   Over
   Het portret staat volledig in beeld; het magenta glas snijdt de
   fotorand en draagt de kop. De draad loopt er stil doorheen.
   ========================================================================== */
.over { position: relative; padding: clamp(6rem, 14vw, 11rem) 0 clamp(5rem, 11vw, 8rem); overflow: hidden; }
.over-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 1.5rem;
  align-items: center;
}
.portret {
  grid-column: 1 / 6;
  margin: 0;
  position: relative;
  z-index: 1;
}
.portret img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
/* De magenta plaat die de fotorand afsnijdt */
.over .glas-m {
  position: absolute;
  top: 4%;
  bottom: 16%;
  left: 30%;
  width: 20%;
  background: rgba(229, 57, 127, 0.22);
  z-index: 2;
  pointer-events: none;
}
.over .glas-o {
  position: absolute;
  left: 42%;
  top: 0;
  width: clamp(6rem, 12vw, 12rem);
  height: clamp(6rem, 12vw, 12rem);
  border-radius: 50%;
  background: rgba(242, 111, 34, 0.2);
  z-index: 2;
  pointer-events: none;
}
.over-tekst { grid-column: 7 / 12; position: relative; z-index: 3; }
.over-tekst h2 {
  font-size: clamp(2.1rem, 5vw, 4.2rem);
  letter-spacing: -0.04em;
  margin-left: clamp(-7rem, -8vw, -1rem);
  margin-bottom: 1.6rem;
  max-width: 14ch;
}
.over-tekst p { color: var(--inkt-zacht); max-width: 44ch; margin-bottom: 2rem; }

@media (max-width: 820px) {
  .portret { grid-column: 1 / 9; margin: 0 0 2.2rem; }
  .over .glas-m { left: 48%; width: 26%; }
  .over .glas-o { left: 62%; }
  .over-tekst { grid-column: 1 / 13; }
  .over-tekst h2 { margin-left: 0; }
}

/* ==========================================================================
   Knoppen: rustig kader, stil antwoord
   ========================================================================== */
.knop {
  display: inline-block;
  font-weight: 600;
  font-size: 1rem;
  color: var(--inkt);
  text-decoration: none;
  padding: 0.95rem 1.8rem;
  border: 1px solid rgba(32, 34, 43, 0.45);
  border-radius: 2px;
  background: transparent;
}
.knop:hover { background-color: rgba(32, 34, 43, 0.05); }

/* ==========================================================================
   De laatste bladzijde
   Het merk paginagroot, de zin die alles samenvat, de wegwijzers.
   De draad mondt uit in de lichtlijn: alle werelden komen samen.
   ========================================================================== */
.voet { position: relative; margin-top: clamp(4rem, 10vw, 8rem); font-size: 0.95rem; }
.voet > .draad { bottom: 6px; }
.voet > .kader { position: relative; z-index: 1; }
.voet-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem 1.5rem;
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.voet-intro { grid-column: 1 / -1; margin-bottom: clamp(1.5rem, 4vw, 3.5rem); }
.voet-merk {
  font-weight: 700;
  font-size: clamp(4.2rem, 13vw, 12rem);
  letter-spacing: -0.05em;
  line-height: 0.95;
  margin: 0 0 1.6rem;
  color: var(--inkt);
}
/* De vogel strijkt neer naast de paginagrote naam */
.voet-vogel {
  display: inline-block;
  height: 0.5em;
  width: auto;
  margin-right: 0.08em;
  vertical-align: baseline;
}
/* De punt is een plaat: oranje schijf met gaatje en één stille groef */
.voet-merk .punt { position: relative; color: transparent; }
.voet-merk .punt::after {
  content: "";
  position: absolute;
  left: 0.03em;
  bottom: 0.02em;
  width: 0.17em;
  height: 0.17em;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    var(--papier) 0 10%,
    var(--podcast) 11% 54%,
    rgba(250, 248, 244, 0.5) 55% 60%,
    var(--podcast) 61% 100%);
}
.voet-intro p:nth-of-type(2) {
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  font-style: italic;
  color: var(--inkt);
  margin-bottom: 0.8rem;
}
.voet-intro p:nth-of-type(3) { font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.06em; }
.voet-intro a { text-decoration: none; }
.voet-intro a:hover { text-decoration: underline; text-underline-offset: 3px; }

.voet h2 {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  margin-bottom: 1rem;
}
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li { margin-bottom: 0.45em; }
.voet a { color: var(--inkt); text-decoration: none; }
.voet a:hover { text-decoration: underline; text-underline-offset: 3px; }
.voet-onder {
  border-top: 1px solid var(--haarlijn);
  padding: 1.1rem 0 1.6rem;
  color: var(--inkt-zacht);
  font-size: 0.85rem;
}
.lichtlijn {
  height: 6px;
  background: linear-gradient(90deg,
    rgba(13, 148, 136, 0.9),
    rgba(47, 158, 68, 0.85) 18%,
    rgba(245, 183, 0, 0.9) 38%,
    rgba(242, 111, 34, 0.9) 58%,
    rgba(229, 57, 127, 0.85) 78%,
    rgba(47, 107, 255, 0.85));
}

@media (max-width: 700px) {
  .voet-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ==========================================================================
   Kleine schermen
   ========================================================================== */
@media (max-width: 960px) {
  .rug {
    position: static;
    writing-mode: horizontal-tb;
    transform: none;
    padding: 0 var(--rand);
    margin-bottom: 1.6rem;
  }
  .rug .mengpunt { margin: 0 0.55em 0 0; }
  .zuil { top: 42%; }
  .kop-xxl .r2 { margin-left: clamp(1rem, 6vw, 4rem); }
  .kop-xxl .r3 { margin-left: clamp(2rem, 12vw, 8rem); }
  .mottoveld { margin-top: clamp(7rem, 16vh, 11rem); padding-top: clamp(5.5rem, 11vh, 8rem); }
  /* De plaat hangt boven het veld; de tekst begint eronder in plaats van
     ernaast, anders valt de plaat over de eerste regels heen */
  .plaat { right: var(--rand); transform: translateY(-50%); width: clamp(8.5rem, 34vw, 12rem); height: clamp(8.5rem, 34vw, 12rem); }
  .motto { margin-top: 0; }
  .uitleg { margin-left: 0; margin-top: 2.5rem; }
  .lichtvlek { display: none; }
  /* Op touch schuift het glas sneller mee met de duim: kortere naloop
     en meer slag (js/licht.js vergroot de slag; de platen steken daarom
     verder buiten beeld) */
  [data-schuif],
  .mottoveld .veld-a,
  .mottoveld .veld-b { transition-duration: 0.4s; }
  .mottoveld .veld-a { left: -16%; width: 82%; }
  .mottoveld .veld-b { right: -16%; width: 70%; }
}

@media (max-width: 640px) {
  .kicker { font-size: 0.68rem; letter-spacing: 0.13em; }
}

/* ==========================================================================
   Lighthouse: de pagina waar het licht thuis is
   Het ademende licht van de homepage leeft hier groter: de bezoeker
   komt binnen in de cirkel zelf, de draad snijdt erdoorheen en wordt
   groen. Vraagstukken meren aan vanuit alle werelden, dus elk nummer
   in het register draagt de kleur van zijn wereld. Onderaan wacht een
   klein ademend licht bij het formulier: hier meer je aan.
   ========================================================================== */

/* De aankomst: binnenlopen in het licht */
.lh-hero {
  margin-top: 0;
  padding: clamp(3.5rem, 9vh, 7rem) 0 clamp(7rem, 16vh, 12rem);
}
.lh-hero .lichtcirkel {
  right: clamp(-30rem, -24vw, -14rem);
  width: clamp(30rem, 78vw, 74rem);
  height: clamp(30rem, 78vw, 74rem);
}
.lh-hero .kader { position: relative; z-index: 2; }
.lh-hero h1 { max-width: none; }

/* Geel licht valt over het woord waar het om gaat */
.gw-licht::after { background: rgba(245, 183, 0, 0.42); }

.lh-lead {
  position: relative;
  z-index: 2;
  max-width: 44ch;
  margin: clamp(3rem, 7vh, 5.5rem) 0 0 clamp(0rem, 30vw, 32rem);
}

/* De line-up: rustige kolom, verschoven uit de as */
.lh-intro { position: relative; padding: clamp(2rem, 5vw, 4rem) 0 clamp(4rem, 9vw, 7rem); }
.lh-intro .kader { position: relative; z-index: 1; }
.lh-intro-tekst { max-width: 46ch; margin-left: clamp(0rem, 26vw, 28rem); }
.lh-intro-tekst p:last-child { margin-bottom: 0; }

/* Het aanmeer-register: vijf vraagstukken, vijf werelden */
.lh-vragen { position: relative; padding: clamp(5rem, 12vw, 9rem) 0 clamp(2rem, 5vw, 4rem); }
.lh-vragen > .kader { position: relative; z-index: 1; }
.lh-vragen h2 {
  position: relative;
  font-size: clamp(2.2rem, 5.6vw, 4.8rem);
  letter-spacing: -0.04em;
  max-width: 14ch;
  margin-bottom: clamp(1rem, 3vw, 2rem);
}
/* Geel licht schuift van buiten het beeld achter de kop */
.lh-vragen h2::before {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  bottom: 0.04em;
  width: 46vw;
  height: 0.8em;
  background: rgba(245, 183, 0, 0.22);
  z-index: -1;
}
.lh-register { list-style: none; margin: 0; padding: 0; }
.lh-rij {
  position: relative;
  padding: clamp(3.5rem, 9vh, 6.5rem) 0;
  font-size: clamp(1.35rem, 2.8vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: color-mix(in srgb, var(--wtekst, var(--inkt)) calc(var(--aan, 0) * 60%), var(--inkt));
}
/* Het zaallicht komt van de kant waar het nummer hangt */
.lh-rij::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: linear-gradient(100deg, var(--wkleur) 0%, transparent 72%);
  opacity: calc(var(--aan, 0) * 0.07);
  pointer-events: none;
}
.lh-rij:nth-child(even)::before { background: linear-gradient(260deg, var(--wkleur) 0%, transparent 72%); }
.lh-nr {
  position: absolute;
  z-index: 0;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: clamp(6rem, 15vw, 13rem);
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--wkleur);
  opacity: calc(0.09 + var(--aan, 0) * 0.2);
  pointer-events: none;
}
.lh-rij:nth-child(odd) .lh-nr { left: calc(50% - 50vw - 0.06em); }
.lh-rij:nth-child(even) .lh-nr { right: calc(50% - 50vw - 0.06em); }
.lh-zin { position: relative; z-index: 1; display: block; max-width: 24ch; }
/* Elke aanlegplek ligt anders in de haven */
.lh-rij:nth-child(1) .lh-zin { margin-left: 34%; }
.lh-rij:nth-child(2) .lh-zin { margin-left: 4%; }
.lh-rij:nth-child(3) .lh-zin { margin-left: 46%; }
.lh-rij:nth-child(4) .lh-zin { margin-left: 10%; }
.lh-rij:nth-child(5) .lh-zin { margin-left: 26%; }
.lh-uitloop { max-width: 40ch; margin: clamp(2rem, 5vw, 3.5rem) 0 0 26%; }
.lh-uitloop a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Het voorbeeldproject: twee glasplaten, de zin duikt over de naad */
.lh-qr {
  margin-top: clamp(7rem, 16vw, 12rem);
  padding: clamp(4.5rem, 10vh, 8rem) 0 clamp(5rem, 11vh, 8.5rem);
}
.lh-qr h2 {
  position: relative;
  z-index: 2;
  font-size: clamp(2rem, 4.8vw, 4rem);
  letter-spacing: -0.035em;
  max-width: 20ch;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}
.lh-qr-prosa {
  position: relative;
  z-index: 2;
  max-width: 44ch;
  margin-left: clamp(0rem, 30vw, 32rem);
}
.lh-qr-prosa p:last-child { margin-bottom: 0; }
.lh-quote {
  display: block;
  font-size: clamp(1.9rem, 4.4vw, 3.6rem);
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.03em;
  line-height: 1.12;
  max-width: 16ch;
  margin: 0 0 clamp(1.6rem, 4vh, 2.6rem) clamp(-16rem, -26vw, 0rem);
}

/* De steiger: het formulier, met een klein licht dat aan is */
.lh-vorm { position: relative; padding: clamp(6rem, 14vw, 10rem) 0 clamp(3rem, 7vw, 5rem); }
.lh-vorm .gloed {
  position: absolute;
  top: 55%;
  left: clamp(-22rem, -18vw, -10rem);
  width: clamp(22rem, 48vw, 42rem);
  height: clamp(22rem, 48vw, 42rem);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(245, 183, 0, 0.3), rgba(245, 183, 0, 0.14) 68%, rgba(245, 183, 0, 0) 100%);
  transform: translateY(-50%);
  animation: adem 9s ease-in-out infinite alternate;
  pointer-events: none;
}
.lh-vorm > .kader { position: relative; z-index: 1; }
.lh-vorm h2 {
  font-size: clamp(2.2rem, 5.6vw, 4.6rem);
  letter-spacing: -0.04em;
  max-width: 12ch;
  margin-bottom: 1.6rem;
}
.lh-vorm-intro { max-width: 44ch; color: var(--inkt-zacht); }
.lh-vorm form { max-width: 40rem; margin: clamp(2.5rem, 6vh, 4rem) 0 0 clamp(0rem, 22vw, 22rem); }
.veldlabel, .lh-vorm legend {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--inkt-zacht);
  margin: 1.9rem 0 0.55rem;
  padding: 0;
}
.lh-vorm input[type="text"],
.lh-vorm input[type="email"],
.lh-vorm textarea,
.lh-vorm select,
.vorm input[type="text"],
.vorm input[type="email"],
.vorm textarea,
.vorm select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--inkt);
  background: transparent;
  border: 1px solid rgba(32, 34, 43, 0.35);
  border-radius: 2px;
  padding: 0.75rem 0.9rem;
}
.lh-vorm textarea, .vorm textarea { min-height: 10rem; resize: vertical; }
.lh-vorm input:focus-visible,
.lh-vorm textarea:focus-visible,
.lh-vorm select:focus-visible,
.vorm input:focus-visible,
.vorm textarea:focus-visible,
.vorm select:focus-visible {
  outline: 2px solid var(--ai);
  outline-offset: 3px;
}
.lh-vorm fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.lh-vorm .radio-row { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 0.55rem; }
.lh-vorm .radio-row input { accent-color: var(--licht-tekst); }
.lh-vorm .knop {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  margin-top: 2.4rem;
  background: rgba(245, 183, 0, 0.22);
}
.lh-vorm .knop:hover { background: rgba(245, 183, 0, 0.34); }

@media (max-width: 960px) {
  .lh-lead { margin-left: 0; }
  .lh-intro-tekst { margin-left: 0; }
  .lh-qr-prosa { margin-left: 0; }
  .lh-quote { margin-left: 0; }
  .lh-vorm form { margin-left: 0; }
}

@media (max-width: 820px) {
  .lh-rij { padding: clamp(2.8rem, 8vh, 4.5rem) 0; }
  .lh-register .lh-rij .lh-zin { margin-left: 0; max-width: none; }
  .lh-rij:nth-child(even) .lh-nr { right: auto; left: calc(50% - 50vw - 0.06em); }
  .lh-uitloop { margin-left: 0; }
}

/* ==========================================================================
   Kunst: het atelier
   Magenta is hier de omgeving, maar de kunstwerken zelf zijn de enige
   volle kleur op de site en blijven onbewerkt. De pagina maakt haar
   eigen titel waar: een grijs veld (het zware) en een magenta veld
   (wat je ervan maakt) overlappen elkaar, en waar ze elkaar raken
   begint de kleur. De galerij hangt als museumwand van rand tot rand;
   de shop voelt als ateliershop, niet als webwinkel.
   ========================================================================== */

.k-hero { position: relative; padding: clamp(3.5rem, 9vh, 7rem) 0 0; }
.k-hero .kader { position: relative; z-index: 2; }

/* Magenta licht valt over het woord dat de pagina draagt */
.gw-kunst::after { background: rgba(229, 57, 127, 0.28); }

.k-lead {
  position: relative;
  z-index: 2;
  max-width: 40ch;
  margin: clamp(2.5rem, 6vh, 4.5rem) 0 0 clamp(0rem, 30vw, 32rem);
}

/* Het atelier: warm geel licht en het magenta glas schuiven over
   elkaar en mengen tot koraal, en het magenta veld duikt over de
   sectiegrens naar de projecten. Geen grauwe kleuren. */
.k-atelier {
  position: relative;
  margin-top: clamp(5rem, 12vh, 9rem);
  padding: clamp(4.5rem, 10vh, 8rem) 0;
}
.k-atelier .veld-zon {
  position: absolute;
  top: 0;
  bottom: 20%;
  left: -8%;
  width: 55%;
  background: rgba(245, 183, 0, 0.16);
  pointer-events: none;
}
.k-atelier .veld-kunst {
  position: absolute;
  top: 24%;
  bottom: -12%;
  left: 41%;
  width: 27%;
  background: rgba(229, 57, 127, 0.16);
  z-index: 3;
  pointer-events: none;
}
.k-atelier-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 1.5rem;
  align-items: center;
}
.k-atelier-tekst { grid-column: 1 / 6; }
.k-atelier-tekst p { max-width: 40ch; }
.k-atelier-tekst p:last-child { margin-bottom: 0; }
.k-foto { grid-column: 7 / 13; margin: 0; }

@media (max-width: 820px) {
  .k-atelier-tekst { grid-column: 1 / 13; }
  .k-foto { grid-column: 1 / 12; margin-top: 2.4rem; }
  .k-atelier .veld-zon { bottom: 46%; width: 82%; }
  .k-atelier .veld-kunst { top: 42%; bottom: -8%; left: 52%; width: 40%; }
}

/* De projecten: drie zalen, elk met het licht van de wereld die het
   project raakt (lessen, licht, kunst) */
.k-projecten { position: relative; padding: clamp(6rem, 14vw, 11rem) 0 clamp(2rem, 5vw, 4rem); }
.k-projecten > .kader { position: relative; z-index: 1; }
.k-projecten h2 {
  position: relative;
  font-size: clamp(2.2rem, 5.6vw, 4.8rem);
  letter-spacing: -0.04em;
  max-width: 14ch;
  margin-bottom: clamp(1rem, 3vw, 2rem);
}
/* Magenta licht schuift van buiten het beeld achter de kop */
.k-projecten h2::before {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  bottom: 0.04em;
  width: 42vw;
  height: 0.8em;
  background: rgba(229, 57, 127, 0.13);
  z-index: -1;
}

/* De galerij: museumwand plus ateliershop */
.k-galerij { position: relative; padding: clamp(5rem, 12vw, 9rem) 0 clamp(3rem, 7vw, 5rem); }
.k-galerij > .kader { position: relative; z-index: 1; }
.k-galerij h2 {
  font-size: clamp(2.2rem, 5.6vw, 4.8rem);
  letter-spacing: -0.04em;
  margin-bottom: clamp(1.6rem, 4vw, 3rem);
}
/* De wand hangt van rand tot rand */
.k-galerij .wall {
  position: relative;
  z-index: 1;
  width: 100vw;
  margin: clamp(2rem, 5vw, 3.5rem) calc(50% - 50vw) 0;
}
.k-galerij .note { color: var(--inkt-zacht); max-width: 44ch; margin: 2rem 0 0; }

/* De ateliershop: werken op papier, prijzen in mono, geen webwinkel */
.k-galerij .gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(3.5rem, 8vw, 6rem);
}
.k-galerij .gallery .artwork:nth-child(3n+2) { margin-top: clamp(2rem, 5vw, 4rem); }
.artwork { margin: 0; }
.artwork-img { display: block; }
.artwork figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1.4rem;
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--haarlijn);
}
.artwork .title { font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em; }
.artwork .price {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}
.artwork .buy {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kunst-tekst);
  padding-bottom: 0.2rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  margin-left: auto;
}

@media (max-width: 900px) {
  .k-galerij .gallery { grid-template-columns: repeat(2, 1fr); }
  .k-galerij .gallery .artwork:nth-child(3n+2) { margin-top: 0; }
  .k-galerij .gallery .artwork:nth-child(even) { margin-top: clamp(1.5rem, 5vw, 3rem); }
  .artwork .buy { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Kunst-subpagina's: drie project-affiches.
   Kraanvogels draagt het groen van de levenslessen, Lachtlampjes het
   gele licht, Kinderspel blijft bijna zonder kleur: bij dat onderwerp
   is soberheid de enige juiste keuze.
   -------------------------------------------------------------------------- */

/* Kraanvogels: het verhaal naast de stapel vogels; het groene glas
   van de levenslessen snijdt de fotorand */
.k-verhaal {
  position: relative;
  margin-top: clamp(4rem, 10vh, 7rem);
  padding: clamp(4rem, 9vh, 7rem) 0 clamp(3rem, 7vh, 5rem);
}
.k-verhaal .veld-les {
  position: absolute;
  top: -6%;
  bottom: 14%;
  left: 26%;
  width: 13%;
  background: rgba(47, 158, 68, 0.14);
  z-index: 3;
  pointer-events: none;
}
/* Het blauw van de belastingenveloppen schuift onder het groen door;
   waar les en envelop elkaar raken wordt het cyaan */
.k-verhaal .veld-envelop {
  position: absolute;
  top: 34%;
  bottom: -12%;
  left: -8%;
  width: 34%;
  background: rgba(47, 107, 255, 0.1);
  pointer-events: none;
}
.k-verhaal-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 1.5rem;
}
.k-verhaal-foto { grid-column: 1 / 5; margin: 0; }
.k-verhaal-prosa { grid-column: 6 / 12; max-width: 46ch; }
.k-verhaal-prosa p:last-child { margin-bottom: 0; }

/* Doe mee: rustige uitgang, stille knoppen */
.k-doe { position: relative; padding: clamp(6rem, 13vw, 10rem) 0 clamp(3rem, 7vw, 5rem); }
.k-doe > .kader { position: relative; z-index: 1; }
.k-doe h2 {
  position: relative;
  font-size: clamp(2.2rem, 5.6vw, 4.6rem);
  letter-spacing: -0.04em;
  max-width: 14ch;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.k-doe h2::before {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  bottom: 0.04em;
  width: 38vw;
  height: 0.8em;
  background: rgba(47, 158, 68, 0.13);
  z-index: -1;
}
.k-doe p { max-width: 44ch; }
.knoppen { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }
.knop-lessen { background: rgba(47, 158, 68, 0.16); }
.knop-lessen:hover { background: rgba(47, 158, 68, 0.26); }

/* Lachtlampjes: het lampje brandt echt, dus achter de foto ademt een
   kleine gele gloed; de stappen zijn een mono-genummerd lijstje */
.k-lamp {
  position: relative;
  margin-top: clamp(4rem, 10vh, 7rem);
  padding: clamp(4rem, 9vh, 7rem) 0 clamp(3rem, 7vh, 5rem);
}
/* Het gele glas draagt het stappenlijstje en schuift traag mee */
.k-lamp .veld-licht {
  position: absolute;
  top: 28%;
  bottom: -14%;
  left: -8%;
  width: 48%;
  background: rgba(245, 183, 0, 0.14);
  pointer-events: none;
}
.k-lamp .gloed {
  position: absolute;
  top: 38%;
  right: clamp(-16rem, -10vw, -6rem);
  width: clamp(20rem, 44vw, 38rem);
  height: clamp(20rem, 44vw, 38rem);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(245, 183, 0, 0.3), rgba(245, 183, 0, 0.14) 68%, rgba(245, 183, 0, 0) 100%);
  transform: translateY(-50%);
  animation: adem 9s ease-in-out infinite alternate;
  pointer-events: none;
}
.k-lamp-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 1.5rem;
}
.k-lamp-prosa { grid-column: 1 / 8; max-width: 46ch; }
.k-lamp-prosa p:last-child { margin-bottom: 0; }
.k-lamp-foto { grid-column: 9 / 13; margin: 0; }
.k-lamp h2 {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  letter-spacing: -0.035em;
  max-width: 16ch;
  margin: 2.6rem 0 1.4rem;
}
.k-stappen {
  list-style: none;
  counter-reset: stap;
  margin: 0 0 1.6rem;
  padding: 0;
  max-width: 44ch;
}
.k-stappen li {
  position: relative;
  padding: 0.9rem 0 0.9rem 3.2rem;
  border-top: 1px solid var(--haarlijn);
  counter-increment: stap;
}
.k-stappen li:last-child { border-bottom: 1px solid var(--haarlijn); }
.k-stappen li::before {
  content: "0" counter(stap);
  position: absolute;
  left: 0;
  top: 1.15rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--licht-tekst);
}

/* Kinderspel: ingetogen, maar niet grauw. Het koele blauw van de
   dichtgedraaide kaarten draagt de pagina; verder doen de werken en
   de haarlijnen het werk. */
.k-spel {
  position: relative;
  margin-top: clamp(4rem, 10vh, 7rem);
  padding: clamp(3.5rem, 8vh, 6rem) 0;
}
.k-spel .veld-kaart {
  position: absolute;
  top: -8%;
  bottom: 30%;
  left: -8%;
  width: 44%;
  background: rgba(47, 107, 255, 0.08);
  pointer-events: none;
}
.k-spel h2 { position: relative; }
.k-spel h2::before {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  bottom: 0.04em;
  width: 34vw;
  height: 0.8em;
  background: rgba(47, 107, 255, 0.09);
  z-index: -1;
}
.k-spel-prosa {
  position: relative;
  z-index: 2;
  max-width: 46ch;
  margin-left: clamp(0rem, 26vw, 28rem);
}
.k-spel-prosa p:last-child { margin-bottom: 0; }
.k-spel h2 {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  letter-spacing: -0.035em;
  max-width: 16ch;
  margin: 2.6rem 0 1.4rem;
}
.k-drieluik {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: clamp(3.5rem, 8vw, 6rem);
}
.k-drieluik .artwork:nth-child(2) { margin-top: clamp(2rem, 5vw, 4rem); }

@media (max-width: 820px) {
  .k-verhaal-foto { grid-column: 1 / 10; }
  .k-verhaal-prosa { grid-column: 1 / 13; margin-top: 2.4rem; }
  .k-verhaal .veld-les { top: -3rem; bottom: auto; height: clamp(14rem, 52vw, 22rem); left: 52%; width: 36%; }
  .k-lamp-prosa { grid-column: 1 / 13; }
  .k-lamp-foto { grid-column: 2 / 12; margin-top: 2.4rem; }
  .k-lamp .gloed { top: auto; bottom: -6%; transform: none; }
  .k-spel-prosa { margin-left: 0; }
  .k-spel .veld-kaart { width: 70%; }
  .k-drieluik { grid-template-columns: 1fr; }
  .k-drieluik .artwork:nth-child(2) { margin-top: 0; }
}

/* ==========================================================================
   TAO: de rustigste pagina van de site
   Het zakelijkste publiek, dus het lef zit in typografie en witruimte,
   niet in extra kleur. Teal is het enige licht: het valt over "samen"
   in de kop, draagt de boeken en tint de knop. Verder doen haarlijnen
   en mono-nummers het werk.
   ========================================================================== */

/* Een maat kleiner dan de xxl, voor langere koppen die toch als
   affiche moeten hangen */
.kop-xxl.kop-xl { font-size: clamp(2.7rem, 8.2vw, 7.4rem); }

.t-hero { position: relative; padding: clamp(3.5rem, 9vh, 7rem) 0 0; }
.t-hero .kader { position: relative; z-index: 2; }
.t-lead {
  position: relative;
  z-index: 2;
  max-width: 44ch;
  margin: clamp(2.5rem, 6vh, 4.5rem) 0 0 clamp(0rem, 28vw, 30rem);
}

.t-intro { position: relative; padding: clamp(5rem, 12vh, 9rem) 0 clamp(2rem, 5vh, 4rem); }
.t-intro > .kader { position: relative; z-index: 1; }
.t-intro-tekst { max-width: 46ch; margin-left: clamp(0rem, 26vw, 28rem); }
.t-intro-tekst p:last-child { margin-bottom: 0; }

.t-doen { position: relative; padding: clamp(4rem, 9vw, 7rem) 0 clamp(2rem, 5vw, 4rem); }
.t-doen > .kader { position: relative; z-index: 1; }
.t-doen h2 {
  position: relative;
  font-size: clamp(2.2rem, 5.6vw, 4.8rem);
  letter-spacing: -0.04em;
  max-width: 14ch;
  margin-bottom: clamp(1rem, 3vw, 2rem);
}
.t-doen h2::before {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  bottom: 0.04em;
  width: 40vw;
  height: 0.8em;
  background: rgba(13, 148, 136, 0.13);
  z-index: -1;
}
/* De genummerde lijst: mono-nummers, haarlijnen, koppen als regels.
   Draagt de kleur van zijn wereld via t-* (zie .t-tao enzovoort). */
.nr-lijst {
  list-style: none;
  counter-reset: nr;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding: 0;
  max-width: 56ch;
}
.nr-lijst li {
  position: relative;
  padding: clamp(1.8rem, 4.5vh, 2.8rem) 0 clamp(1.8rem, 4.5vh, 2.8rem) clamp(3.6rem, 8vw, 7rem);
  border-top: 1px solid var(--haarlijn);
  counter-increment: nr;
}
.nr-lijst li:last-child { border-bottom: 1px solid var(--haarlijn); }
.nr-lijst li::before {
  content: "0" counter(nr);
  position: absolute;
  left: 0;
  top: clamp(2.1rem, 4.8vh, 3.1rem);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--wtekst, var(--inkt-zacht));
}
.nr-lijst strong {
  display: block;
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 0.7rem;
  /* De regel licht op in de wereldkleur als de bezoeker ervoor staat */
  color: color-mix(in srgb, var(--wtekst, var(--inkt)) calc(var(--aan, 0) * 60%), var(--inkt));
}
.nr-lijst li::before { opacity: calc(0.55 + var(--aan, 0) * 0.45); }

/* De boeken rusten op het enige teal glasvlak van de pagina */
.t-boeken { position: relative; padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5rem); }
.t-boeken .veld-tao {
  position: absolute;
  top: 34%;
  bottom: -22%;
  left: -8%;
  width: 62%;
  background: rgba(13, 148, 136, 0.14);
  pointer-events: none;
}
.t-boeken > .kader { position: relative; z-index: 1; }
.t-boeken-tekst { max-width: 46ch; }
.t-boeken-rij {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: 58rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.t-boeken-rij figure { margin: 0; }
.t-boeken-rij figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  margin-top: 0.8rem;
}

.t-coach { position: relative; padding: clamp(6rem, 13vw, 10rem) 0 clamp(3rem, 7vw, 5rem); }
.t-coach > .kader { position: relative; z-index: 1; }
.t-coach h2 {
  font-size: clamp(2.2rem, 5.6vw, 4.6rem);
  letter-spacing: -0.04em;
  max-width: 16ch;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.t-coach p { max-width: 46ch; }
.t-coach .knoppen { margin-top: 2.4rem; }
.knop-tao { background: rgba(13, 148, 136, 0.14); }
.knop-tao:hover { background: rgba(13, 148, 136, 0.24); }

@media (max-width: 960px) {
  .t-lead { margin-left: 0; }
  .t-intro-tekst { margin-left: 0; }
}
@media (max-width: 700px) {
  .t-boeken-rij { grid-template-columns: 1fr; max-width: 30rem; }
  .t-boeken .veld-tao { width: 84%; }
}

/* ==========================================================================
   AI: helder blauw, nuchter, geen futurisme
   Het blauwe licht valt over het woord AI; de voorbeelden staan op een
   blauw glasvlak dat van buiten het beeld binnenschuift. Verder is de
   pagina gewoon helder: koppen, kolommen, een genummerde lijst.
   ========================================================================== */

/* Generieke subpagina-opening (AI en verder): rug, kop, verschoven lead */
.pag-hero { position: relative; padding: clamp(3.5rem, 9vh, 7rem) 0 0; }
.pag-hero .kader { position: relative; z-index: 2; }
.pag-lead {
  position: relative;
  z-index: 2;
  max-width: 44ch;
  margin: clamp(2.5rem, 6vh, 4.5rem) 0 0 clamp(0rem, 28vw, 30rem);
}

.gw-ai::after { background: rgba(47, 107, 255, 0.22); }

.a-workshops { position: relative; padding: clamp(5rem, 12vh, 9rem) 0 clamp(2rem, 5vw, 4rem); }
.a-workshops > .kader { position: relative; z-index: 1; }
.a-workshops h2 {
  position: relative;
  font-size: clamp(2.2rem, 5.6vw, 4.8rem);
  letter-spacing: -0.04em;
  max-width: 16ch;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.a-workshops h2::before {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  bottom: 0.04em;
  width: 44vw;
  height: 0.8em;
  background: rgba(47, 107, 255, 0.13);
  z-index: -1;
}
.a-workshops .prosa { max-width: 46ch; }

/* De voorbeelden: op een blauw glasvlak dat van links binnenschuift */
.a-voorbeelden {
  position: relative;
  margin: clamp(3rem, 7vw, 5rem) 0 0;
  padding: clamp(2.5rem, 6vh, 4.5rem) 0;
}
/* Het blauwe glas schuift al scrollend onder de teal draad door;
   waar ze elkaar raken ontstaat een koeler mengsel dat weer wegtrekt */
.a-voorbeelden .veld-ai {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 82vw;
  background: rgba(47, 107, 255, 0.1);
  pointer-events: none;
}
.a-voorbeelden p { position: relative; max-width: 48ch; margin-left: clamp(0rem, 10vw, 9rem); }
.a-voorbeelden p:last-child { margin-bottom: 0; font-weight: 600; letter-spacing: -0.01em; }

.a-workshops .knoppen { margin-top: clamp(2.5rem, 6vw, 4rem); }
.knop-ai { background: rgba(47, 107, 255, 0.12); }
.knop-ai:hover { background: rgba(47, 107, 255, 0.2); }

.a-hs { position: relative; padding: clamp(6rem, 13vw, 10rem) 0 clamp(3rem, 7vw, 5rem); }
.a-hs > .kader { position: relative; z-index: 1; }
.a-hs h2 {
  font-size: clamp(2.2rem, 5.6vw, 4.6rem);
  letter-spacing: -0.04em;
  max-width: 18ch;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.a-hs p { max-width: 46ch; }
.a-hs .nr-lijst { margin-bottom: clamp(2rem, 5vw, 3rem); }
.a-hs .knoppen { margin-top: 2.4rem; }

@media (max-width: 960px) {
  .pag-lead { margin-left: 0; }
}

/* ==========================================================================
   Podcast: oranje, warm en persoonlijk
   De openingszin van het verhaal klinkt groot en cursief, als een stem
   die begint te vertellen. Het oranje glas snijdt de opnamefoto; de
   twee varianten zijn twee zalen met oranje zaallicht.
   ========================================================================== */

.gw-podcast::after { background: rgba(242, 111, 34, 0.26); }

.pd-verhaal {
  position: relative;
  margin-top: clamp(4rem, 10vh, 7rem);
  padding: clamp(4rem, 9vh, 7rem) 0 clamp(3rem, 7vh, 5rem);
}
.pd-verhaal .veld-podcast {
  position: absolute;
  top: 18%;
  bottom: -10%;
  left: 56%;
  width: 18%;
  background: rgba(242, 111, 34, 0.16);
  z-index: 3;
  pointer-events: none;
}
/* Warm geel schuift het oranje tegemoet: samen worden ze amber */
.pd-verhaal .veld-warmte {
  position: absolute;
  top: 44%;
  bottom: -18%;
  left: 28%;
  width: 36%;
  background: rgba(245, 183, 0, 0.13);
  pointer-events: none;
}
.pd-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 1.5rem;
}
.pd-tekst { grid-column: 1 / 7; max-width: 46ch; }
.pd-tekst p:last-child { margin-bottom: 0; }
/* De stem die begint te vertellen */
.pd-tekst .pd-motto {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.03em;
  line-height: 1.2;
  max-width: 24ch;
  margin-bottom: clamp(1.6rem, 4vh, 2.4rem);
}
.pd-foto { grid-column: 8 / 13; margin: 0; align-self: start; }

.pd-varianten { position: relative; padding: clamp(5rem, 12vw, 9rem) 0 clamp(2rem, 5vw, 4rem); }
.pd-varianten > .kader { position: relative; z-index: 1; }
.pd-varianten h2 {
  position: relative;
  font-size: clamp(2.2rem, 5.6vw, 4.8rem);
  letter-spacing: -0.04em;
  max-width: 14ch;
  margin-bottom: clamp(1rem, 3vw, 2rem);
}
.pd-varianten h2::before {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  bottom: 0.04em;
  width: 40vw;
  height: 0.8em;
  background: rgba(242, 111, 34, 0.14);
  z-index: -1;
}
.pd-prijs { max-width: 44ch; margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.knop-podcast { background: rgba(242, 111, 34, 0.14); }
.knop-podcast:hover { background: rgba(242, 111, 34, 0.24); }
.pd-varianten .note { color: var(--inkt-zacht); max-width: 44ch; margin: 1.6rem 0 0; }

@media (max-width: 820px) {
  .pd-tekst { grid-column: 1 / 13; }
  .pd-foto { grid-column: 1 / 12; margin-top: 2.4rem; }
  .pd-verhaal .veld-podcast { top: auto; bottom: -6%; height: 40%; left: 48%; width: 44%; }
}

/* ==========================================================================
   Levenslessen: groen
   De paradoxen zijn het hart van de pagina en hangen als motto op het
   groene veld; de tekst duikt over de veldrand heen.
   ========================================================================== */

.gw-lessen::after { background: rgba(47, 158, 68, 0.24); }

.le-intro { position: relative; padding: clamp(5rem, 12vh, 9rem) 0 clamp(2rem, 5vh, 4rem); }
.le-intro > .kader { position: relative; z-index: 1; }
.le-intro-tekst { max-width: 46ch; margin-left: clamp(0rem, 26vw, 28rem); }
.le-intro-tekst p:last-child { margin-bottom: 0; }

.le-paradox {
  position: relative;
  margin-top: clamp(4rem, 10vh, 7rem);
  padding: clamp(4rem, 9vh, 7rem) 0 clamp(4.5rem, 10vh, 8rem);
}
.le-paradox .veld-lessen {
  position: absolute;
  top: 22%;
  bottom: 0;
  right: -8%;
  width: 78%;
  background: rgba(47, 158, 68, 0.16);
  pointer-events: none;
}
/* Het teal glas eronder: samen mengen ze tot diep zeegroen, en al
   scrollend rekken de platen uit elkaar (breken wordt oprekken) */
.le-paradox .veld-rek {
  position: absolute;
  top: 0;
  bottom: 26%;
  left: -8%;
  width: 52%;
  background: rgba(13, 148, 136, 0.12);
  pointer-events: none;
}
.le-paradox .kader { position: relative; z-index: 1; }
.le-motto {
  font-size: clamp(1.6rem, 3.6vw, 2.9rem);
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.03em;
  line-height: 1.22;
  max-width: 26ch;
  margin: 0 0 clamp(2rem, 5vh, 3.2rem) clamp(0rem, 8vw, 7rem);
}
.le-naklank { max-width: 46ch; margin-left: clamp(0rem, 26vw, 28rem); margin-bottom: 0; }

.le-boek { position: relative; padding: clamp(6rem, 13vw, 10rem) 0 clamp(2rem, 5vw, 4rem); }
.le-boek > .kader { position: relative; z-index: 1; }
.le-boek h2, .le-spreker h2 {
  position: relative;
  font-size: clamp(2.2rem, 5.6vw, 4.6rem);
  letter-spacing: -0.04em;
  max-width: 16ch;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.le-boek h2::before {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  bottom: 0.04em;
  width: 34vw;
  height: 0.8em;
  background: rgba(47, 158, 68, 0.13);
  z-index: -1;
}
.le-boek p, .le-spreker p { max-width: 46ch; }
.le-spreker { position: relative; padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5rem); }
.le-spreker > .kader { position: relative; z-index: 1; }
.le-spreker .knoppen { margin-top: 2.4rem; }

@media (max-width: 960px) {
  .le-intro-tekst { margin-left: 0; }
  .le-motto { margin-left: 0; }
  .le-naklank { margin-left: 0; }
}

/* ==========================================================================
   Over en Contact: neutraal papier
   Geen wereldkleur in de hoofdrol; het mengpunt en één warm oranje
   glasvlak (de kleur van de merkpunt) zijn de enige kleurmomenten.
   Contact is een rustige, uitnodigende pagina zonder conversiedruk.
   ========================================================================== */

.o-verhaal {
  position: relative;
  margin-top: clamp(3rem, 8vh, 5rem);
  padding: clamp(4rem, 10vh, 8rem) 0 clamp(3rem, 7vw, 5rem);
}
/* De oranje merkpunt als glas: snijdt het portret */
.o-verhaal .veld-warm {
  position: absolute;
  top: 4%;
  bottom: 26%;
  right: 31%;
  width: 12%;
  background: rgba(242, 111, 34, 0.16);
  z-index: 3;
  pointer-events: none;
}
/* Geel glas schuift het oranje tegemoet: de rollen mengen warm */
.o-verhaal .veld-glans {
  position: absolute;
  top: -8%;
  bottom: 48%;
  left: 36%;
  width: 28%;
  background: rgba(245, 183, 0, 0.12);
  pointer-events: none;
}
.o-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 1.5rem;
}
.o-prosa { grid-column: 1 / 7; max-width: 46ch; }
.o-prosa p:last-child { margin-bottom: 0; }
.o-prosa h2 {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  letter-spacing: -0.035em;
  max-width: 18ch;
  margin: 2.8rem 0 1.4rem;
}
.o-foto { grid-column: 8 / 13; margin: 0; align-self: start; }

.c-vorm {
  position: relative;
  margin-top: clamp(3rem, 8vh, 5rem);
  padding: clamp(4rem, 10vh, 7rem) 0 clamp(3rem, 7vw, 5rem);
}
.c-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 1.5rem;
}
.c-links { grid-column: 1 / 7; max-width: 36rem; }
.c-links .knop { margin-top: 2.2rem; font: inherit; font-weight: 600; cursor: pointer; }
.c-alt { margin: 2.4rem 0 0; max-width: 40ch; color: var(--inkt-zacht); }
.c-foto { grid-column: 8 / 13; margin: 0; align-self: start; }

@media (max-width: 820px) {
  .o-prosa { grid-column: 1 / 13; }
  .o-foto { grid-column: 1 / 11; margin-top: 2.4rem; }
  .o-verhaal .veld-warm { top: auto; bottom: -4%; height: 32%; right: -8%; width: 34%; }
  .c-links { grid-column: 1 / 13; }
  .c-foto { grid-column: 1 / 12; margin-top: 2.8rem; }
}

/* ==========================================================================
   Bedankt en 404
   Bedankt: er is aangemeerd, dus een klein licht is aan. 404: het
   cijfer hangt als wandcijfer in de zaal, de routes zijn een register
   met de stipjes van alle werelden.
   ========================================================================== */

.b-hero { position: relative; padding: clamp(4rem, 12vh, 9rem) 0 clamp(4rem, 10vh, 7rem); }
.b-hero .gloed {
  position: absolute;
  top: 42%;
  right: clamp(-18rem, -12vw, -8rem);
  width: clamp(20rem, 44vw, 36rem);
  height: clamp(20rem, 44vw, 36rem);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(245, 183, 0, 0.28), rgba(245, 183, 0, 0.12) 68%, rgba(245, 183, 0, 0) 100%);
  transform: translateY(-50%);
  animation: adem 9s ease-in-out infinite alternate;
  pointer-events: none;
}
.b-hero .kader { position: relative; z-index: 1; }
.b-hero .knoppen { margin-top: clamp(2.5rem, 6vh, 4rem); }

.f-hero { position: relative; padding: clamp(3rem, 9vh, 7rem) 0 clamp(3rem, 7vw, 5rem); }
.f-hero .f-code {
  position: absolute;
  z-index: 0;
  top: -0.12em;
  left: calc(50% - 50vw - 0.06em);
  margin: 0;
  font-weight: 700;
  font-size: clamp(11rem, 32vw, 30rem);
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--inkt);
  opacity: 0.05;
  pointer-events: none;
}
.f-hero .kader { position: relative; z-index: 1; }

.r-lijst { list-style: none; margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding: 0; }
.r-lijst li {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) 1fr;
  gap: 0.3rem 2rem;
  align-items: baseline;
  padding: clamp(1.3rem, 3.5vh, 2rem) 0;
  border-top: 1px solid var(--haarlijn);
}
.r-lijst li:last-child { border-bottom: 1px solid var(--haarlijn); }
.r-lijst h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  letter-spacing: -0.02em;
}
.r-lijst h3::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--wkleur, var(--inkt));
  opacity: 0.7;
  flex: none;
}
.r-lijst p { margin: 0 0 0.6rem; color: var(--inkt-zacht); max-width: 40ch; }

@media (max-width: 820px) {
  .r-lijst li { grid-template-columns: 1fr; gap: 0.4rem 0; }
}

/* ==========================================================================
   Juridische bladzijden: alleen typografie, haarlijnen en de draad
   ========================================================================== */

.jur { position: relative; padding: clamp(3rem, 8vh, 6rem) 0 clamp(3rem, 7vw, 5rem); }
.jur > .kader { position: relative; z-index: 1; }
.jur h1 {
  font-size: clamp(2.4rem, 6.5vw, 5.5rem);
  letter-spacing: -0.04em;
  max-width: 16ch;
  margin-bottom: 1rem;
}
.jur-datum {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--inkt-zacht);
  margin: 0 0 clamp(2.5rem, 6vh, 4rem);
}
.jur-prosa { max-width: 46ch; }
.jur-prosa h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  letter-spacing: -0.025em;
  margin: 2.4rem 0 0.9rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--haarlijn);
}
.jur-prosa ul { margin: 0 0 1.1em; padding-left: 1.2rem; }
.jur-prosa li { margin-bottom: 0.4em; }
.jur-prosa p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Reduced motion: de installatie staat stil, de compositie blijft
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lichtcirkel { animation: none; }
  .bundel { transition: none; }
  .mottoveld .veld-a, .mottoveld .veld-b { transition: none; }
  [data-schuif] { transition: none; }
  .lichtvlek { display: none; }
  .rij::before { opacity: 0.05; }
  .rij-nr { opacity: 0.16; }
  .lh-vorm .gloed { animation: none; }
  .k-lamp .gloed { animation: none; }
  .b-hero .gloed { animation: none; }
  .lh-rij::before { opacity: 0.04; }
  .lh-nr { opacity: 0.16; }
}

/* ==========================================================================
   Herstructurering oktober 2026
   Vierde zaal in het register, keynotes op /ai/, overzicht /maker/.
   ========================================================================== */
.rij:nth-of-type(3) h3 { max-width: 18ch; }
.rij:nth-of-type(4) .rij-nr { right: calc(50% - 50vw - 0.1em); }
.rij:nth-of-type(4) .rij-kop, .rij:nth-of-type(4) .rij-inhoud { margin-left: 22%; max-width: 50%; }
@media (max-width: 820px) {
  .rij:nth-of-type(4) .rij-kop, .rij:nth-of-type(4) .rij-inhoud { margin-left: 0; max-width: none; }
  .rij:nth-of-type(4) .rij-nr { right: calc(50% - 50vw - 0.1em); }
}

.site-nav a[aria-current="true"] { color: var(--inkt); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.t-doen .knoppen { margin-top: clamp(2.5rem, 6vw, 4rem); }

.a-workshops .nr-lijst { margin-top: clamp(2rem, 5vw, 3rem); }
.a-inspiratie { margin-top: clamp(2.5rem, 6vw, 4rem); }

.a-keynotes { position: relative; padding: clamp(6rem, 13vw, 10rem) 0 clamp(3rem, 7vw, 5rem); }
.a-keynotes > .kader { position: relative; z-index: 1; }
.a-keynotes h2 {
  position: relative;
  font-size: clamp(2.2rem, 5.6vw, 4.6rem);
  letter-spacing: -0.04em;
  max-width: 18ch;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.a-keynotes h2::before {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  bottom: 0.04em;
  width: 36vw;
  height: 0.8em;
  background: rgba(47, 107, 255, 0.13);
  z-index: -1;
}
.a-keynotes p { max-width: 46ch; }
.a-keynotes .nr-lijst { margin-bottom: clamp(2rem, 5vw, 3rem); }
.a-keynotes .knoppen { margin-top: 2.4rem; }

.mk-overzicht { position: relative; padding: clamp(2rem, 6vw, 4rem) 0 clamp(4rem, 9vw, 7rem); }
.mk-overzicht > .kader { position: relative; z-index: 1; }
.mk-actie { margin-top: clamp(1rem, 3vw, 2rem); }
.knop-kunst { background: rgba(229, 57, 127, 0.12); }
.knop-kunst:hover { background: rgba(229, 57, 127, 0.22); }

/* ==========================================================================
   To The Lighthouse, rustiger (19 oktober 2026)
   Kleinere kop zonder verspringende regels, alle tekst in een linkerkolom,
   en de voorbeeldvraagstukken als rustige lijst.
   ========================================================================== */
.lh-hero { padding-bottom: clamp(3rem, 7vh, 5rem); }
.lh-hero h1.kop-xxl {
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-width: 17ch;
}
.lh-hero .kop-xxl > span { display: inline; margin-left: 0; }
.lh-lead { margin: clamp(1.6rem, 4vh, 2.4rem) 0 0; max-width: 50ch; }
.lh-intro-tekst,
.lh-qr-prosa,
.lh-uitloop,
.lh-vorm form { margin-left: 0; }
.lh-intro-tekst { max-width: 50ch; }

.lh-vragen h2,
.lh-qr h2,
.lh-vorm h2 { font-size: clamp(2rem, 4vw, 3.2rem); max-width: 20ch; }

.lh-register { max-width: 46rem; margin-top: clamp(1rem, 3vw, 2rem); border-top: 1px solid var(--haarlijn); }
.lh-rij {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  padding: 1.15rem 0;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.45;
  color: var(--inkt);
  border-bottom: 1px solid var(--haarlijn);
}
.lh-rij::before { display: none; }
.lh-register .lh-nr,
.lh-rij:nth-child(odd) .lh-nr,
.lh-rij:nth-child(even) .lh-nr {
  position: static;
  transform: none;
  flex: 0 0 2rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--wtekst, var(--inkt-zacht));
  opacity: 1;
}
.lh-register .lh-rij .lh-zin { margin-left: 0; max-width: none; }

.lh-quote { margin-left: 0; font-size: clamp(1.6rem, 3.2vw, 2.6rem); max-width: 22ch; }

/* ==========================================================================
   Vogel-cursor (logo als aanwijzer)
   ========================================================================== */
html { cursor: url("/images/cursor-vogel.png") 1 11, auto; }


/* ==========================================================================
   Ronde november 2026 (na de audit van 20 oktober)
   ========================================================================== */

/* Geen losse woorden op een regel */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* De opening zegt meteen wat ik doe, voor wie, en wat de volgende stap is */
.opening-wat {
  position: relative;
  z-index: 2;
  font-size: clamp(1.3rem, 2.4vw, 1.95rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.28;
  max-width: 30ch;
  margin: clamp(1.4rem, 3.5vh, 2.4rem) 0 0;
}
.opening-knoppen {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 2rem;
  margin-top: clamp(1.6rem, 4vh, 2.6rem);
}
.opening-knoppen .spoor { margin-right: 0; }
.mottoveld { margin-top: clamp(6rem, 14vh, 10rem); }
/* De uitleg ligt helemaal op het teal glas, niet meer over de naad */
.uitleg { margin-left: 0; max-width: 36ch; }
.hulp { padding-top: clamp(4rem, 9vw, 7rem); }

/* Foto's zijn gewoon foto's: het glas schuift erachter langs */
.over .portret { z-index: 3; }
.o-verhaal .veld-warm { z-index: 1; }
.o-foto, .c-foto { position: relative; z-index: 3; }

/* TAO: de inleiding is één rustig blok zonder verspringing */
.t-lead { margin-left: 0; }
.t-intro { padding-top: clamp(2rem, 5vh, 3.5rem); }
.t-intro-tekst { margin-left: 0; }

/* De draad stopt boven de kolommen van de voet (hoogte via js/nav.js) */
.voet > .draad { bottom: auto; height: var(--voet-draad, 0px); }

/* --------------------------------------------------------------------------
   De logoband: een trage stoet opdrachtgevers die onder het glas door
   schuift. Grijs en stil, in kleur als je erop wijst. Zonder js of met
   reduced motion staat de rij stil en loopt hij over meerdere regels.
   -------------------------------------------------------------------------- */
.logoband { position: relative; padding: clamp(3.5rem, 8vw, 6rem) 0; overflow: hidden; }
.logoband > .kader { position: relative; z-index: 2; }
.logoband .kicker { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.logoband-glas {
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: -8%;
  width: 46%;
  background: rgba(245, 183, 0, 0.12);
  pointer-events: none;
}
.logoband-baan { position: relative; z-index: 2; overflow: hidden; }
.logoband-lijst {
  list-style: none;
  margin: 0 auto;
  padding: 0 var(--rand);
  max-width: var(--kader);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem 0;
}
.logoband-lijst li {
  flex: none;
  display: flex;
  align-items: center;
  height: 3.4rem;
  margin-right: clamp(2.4rem, 4.5vw, 4.2rem);
}
.logoband-lijst img {
  height: 2.5rem;
  width: auto;
  filter: grayscale(1) contrast(1.15);
  opacity: 0.6;
  mix-blend-mode: multiply;
  transition: filter 0.6s ease, opacity 0.6s ease;
}
.logoband-lijst img[src*="vechtdal"] { height: 3.2rem; }
.logoband-lijst li:hover img { filter: none; opacity: 1; }
.lb-woord {
  font-weight: 600;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--inkt);
  opacity: 0.5;
}
/* De stoet loopt pas als js de rij heeft verdubbeld */
.logoband-baan.loopt {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logoband-baan.loopt .logoband-lijst {
  flex-wrap: nowrap;
  width: max-content;
  max-width: none;
  padding: 0;
  animation: stoet 70s linear infinite;
}
.logoband-baan.loopt:hover .logoband-lijst { animation-play-state: paused; }
@keyframes stoet { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   To The Lighthouse: zo werkt het. Twee glasplaten schuiven naar elkaar
   toe, maar ontmoeten elkaar rechts van de tekst: de lijst ligt altijd op
   één rustige tint.
   -------------------------------------------------------------------------- */
.lh-werkt { position: relative; padding: clamp(4rem, 9vw, 7rem) 0; overflow: hidden; }
.lh-werkt > .kader { position: relative; z-index: 2; }
.lh-werkt h2 { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -0.04em; max-width: 20ch; }
.lh-werkt .nr-lijst { margin-top: clamp(1.6rem, 4vw, 2.6rem); max-width: 50ch; }
.lh-glas-a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8%;
  width: 58%;
  background: rgba(245, 183, 0, 0.14);
  pointer-events: none;
}
.lh-glas-b {
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -8%;
  width: 46%;
  background: rgba(13, 148, 136, 0.12);
  pointer-events: none;
}
.knop-licht { background: rgba(245, 183, 0, 0.22); }
.knop-licht:hover { background: rgba(245, 183, 0, 0.34); }
.lh-qr { margin-top: clamp(3rem, 7vw, 5rem); }
.lh-qr .kicker { color: var(--licht-tekst); }
.lh-delen { margin-top: 1.9rem; }
.lh-delen input { accent-color: var(--licht-tekst); flex: none; }

@media (max-width: 960px) {
  .lh-glas-a { left: -16%; width: 132%; }
  .lh-glas-b { top: 0; bottom: 0; right: -2%; width: 7%; }
}

/* --------------------------------------------------------------------------
   Mobiel: de draad schuift naar de rand, koppen staan recht, het menu
   staat naast het logo
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  :root { --draad-rechts: 0px; --draad-breed: 0.6rem; }
  .draad, .zuil { background: rgba(13, 148, 136, 0.28); }
  .uitleg { max-width: none; }
}
@media (max-width: 700px) {
  .kop-xxl .r2, .kop-xxl .r3 { margin-left: 0; }
}
@media (max-width: 960px) {
  .balk { flex-wrap: wrap; row-gap: 0; }
  .merk { flex: 1 1 auto; min-width: 0; }
  .nav-toggle { flex: none; margin-left: auto; }
}
@media (max-width: 480px) {
  .merk-logo { height: 32px; }
  .merk-sub { font-size: 0.58rem; letter-spacing: 0.08em; }
}

@media (prefers-reduced-motion: reduce) {
  .logoband-baan.loopt .logoband-lijst { animation: none; }
}

/* Lange affichekoppen lopen op smalle schermen als één gebalanceerde zin */
@media (max-width: 700px) {
  .kop-xxl > span { display: inline; }
}
.lh-vorm fieldset { margin-top: 1.9rem; }
.lh-vorm fieldset legend { margin-top: 0; }

.over-tekst .knoppen { align-items: center; gap: 1.2rem 2rem; margin-top: 0; }
.over-tekst .spoor { margin-right: 0; }