@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Urbanist:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Sometype+Mono:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --turfzwart: #1f1420;
  --turfzwart-soft: #3a2a3c;
  --nevelwit: #f2ede4;
  --nevelwit-deep: #e6ddc9;
  --zeildoek: #ece3d3;
  --wiekpaars: #96406f;
  --wiekpaars-deep: #6f2d53;
  --wiekpaars-tint: #f1dde8;
  --vaargeul: #5c6b74;
  --vaargeul-deep: #3f4c53;
  --wit: #fffdfa;

  --font-display: "Alfa Slab One", Georgia, serif;
  --font-body: "Urbanist", "Segoe UI", sans-serif;
  --font-data: "Sometype Mono", ui-monospace, monospace;

  --content-max: 74rem;
  --reading-max: 42rem;

  --step-0: clamp(.85rem, .8rem + .2vw, .95rem);
  --step-1: clamp(1.05rem, 1rem + .2vw, 1.15rem);
  --step-2: clamp(1.35rem, 1.15rem + .8vw, 1.9rem);
  --step-3: clamp(1.8rem, 1.4rem + 1.7vw, 2.7rem);
  --step-4: clamp(2.3rem, 1.7rem + 2.6vw, 3.6rem);

  --space-xs: clamp(.6rem, .5rem + .4vw, .9rem);
  --space-s: clamp(1rem, .8rem + .9vw, 1.6rem);
  --space-m: clamp(1.7rem, 1.3rem + 1.8vw, 2.7rem);
  --space-l: clamp(2.8rem, 2rem + 3.6vw, 5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--turfzwart);
  background: var(--nevelwit);
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.62;
}
img { display: block; max-width: 100%; }
p { max-width: 70ch; }
a { color: var(--wiekpaars-deep); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--wiekpaars); }
:focus-visible { outline: .18rem solid var(--wiekpaars); outline-offset: .16rem; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--turfzwart);
  text-wrap: balance;
}
h1 { margin: 0; font-size: var(--step-4); }
h2 { margin: 0 0 .8rem; font-size: var(--step-3); }
h3 { margin: 0 0 .5rem; font-size: var(--step-2); }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: .8rem 1.1rem; background: var(--wiekpaars); color: var(--wit); }
.skip-link:focus { left: 1rem; top: 1rem; }
.eyebrow { display: inline-block; font-family: var(--font-data); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--vaargeul-deep); }
.shell { width: min(calc(100% - 2rem), var(--content-max)); margin-inline: auto; }

/* ---------- Header: .kap (the mill's rotating cap) ---------- */
.kap { background: var(--wit); border-bottom: 2px solid var(--turfzwart); }
.kap-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; min-height: 4.4rem; padding-block: .6rem; }
.kap-merk { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--turfzwart); }
.kap-merk-mark { width: 2rem; height: 2rem; flex-shrink: 0; }
.kap-merk-naam { font-family: var(--font-display); font-size: 1.2rem; line-height: 1; }
.kap-merk-sub { display: block; font-family: var(--font-data); font-size: .62rem; letter-spacing: .04em; color: var(--vaargeul-deep); margin-top: .2rem; }
.kap-nav { display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.kap-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: .3rem .3rem; color: var(--turfzwart-soft); text-decoration: none; font-weight: 600; font-size: .92rem; border-bottom: 2px solid transparent; }
.kap-nav a:hover, .kap-nav a[aria-current="page"] { color: var(--wiekpaars-deep); border-bottom-color: var(--wiekpaars); }

/* ---------- Hero: .wieken (the sails) ---------- */
.wieken { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--wiekpaars-tint) 0%, var(--nevelwit) 62%); border-bottom: 2px solid var(--turfzwart); padding-block: var(--space-l) var(--space-m); }
.wieken-rotor { position: absolute; top: -14vw; right: -12vw; width: min(58vw, 34rem); height: min(58vw, 34rem); pointer-events: none; opacity: .16; animation: wieken-draai 46s linear infinite; }
@media (prefers-reduced-motion: reduce) { .wieken-rotor { animation: none; } }
@keyframes wieken-draai { to { transform: rotate(360deg); } }
.wieken-inner { position: relative; z-index: 1; }
.wieken-kop { max-width: 46rem; }
.wieken-kop h1 { margin-top: .6rem; }
.wieken-dek { margin-top: 1.1rem; font-size: clamp(1.05rem, .98rem + .4vw, 1.28rem); max-width: 52ch; }
.wieken-naaf { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .9rem; margin-top: var(--space-m); }
.wieken-blad { position: relative; display: block; padding: 1.1rem 1.2rem 1.3rem; background: var(--wit); border: 2px solid var(--turfzwart); text-decoration: none; color: var(--turfzwart); border-radius: 0 1.4rem 0 1.4rem; transition: transform .15s ease; }
.wieken-blad:hover { transform: translateY(-.2rem); color: var(--turfzwart); }
.wieken-blad-nr { font-family: var(--font-data); font-size: .7rem; color: var(--wiekpaars-deep); }
.wieken-blad h3 { margin: .3rem 0 .3rem; font-size: 1.2rem; }
.wieken-blad p { margin: 0; font-size: .92rem; color: var(--turfzwart-soft); max-width: none; }
@media (min-width: 40rem) {
  .wieken-naaf { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (min-width: 60rem) {
  .wieken-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-m); align-items: start; }
  .wieken-naaf { grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 0; }
}

/* ---------- Content architecture: .peilschaal (a water-level gauge running beside the content) ---------- */
/* Not a stack of heading-then-content blocks: each .meting is a single row
   where a real depth reading (tied to Kinderdijk's actual sea-level figures)
   sits in its own label column beside — not above — its content column. */
.peilschaal { position: relative; padding-block: var(--space-l); width: min(calc(100% - 2rem), var(--content-max)); margin-inline: auto; }
.meting { position: relative; padding-block: var(--space-m); border-top: 2px solid var(--turfzwart); }
.meting:first-child { border-top: none; padding-top: 0; }
.meting-peil { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .6rem; font-family: var(--font-data); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--vaargeul-deep); }
.meting-peil-balk { position: relative; display: inline-block; width: 3.2rem; height: .5rem; background: var(--wiekpaars-tint); border: 1px solid var(--turfzwart); }
.meting-peil-balk span { position: absolute; inset: 0; background: var(--wiekpaars); }
.meting--laag .meting-peil-balk span { width: 30%; }
.meting--midden .meting-peil-balk span { width: 62%; }
.meting--hoog .meting-peil-balk span { width: 94%; }
.meting-kop { margin: 0 0 .3rem; max-width: var(--reading-max); }
.meting-lede { margin: 0 0 1.4rem; max-width: var(--reading-max); color: var(--turfzwart-soft); }
@media (min-width: 56rem) {
  .meting { display: grid; grid-template-columns: 11rem 1fr; gap: var(--space-m); align-items: start; padding-block: var(--space-l); }
  .meting-peil { flex-direction: column; align-items: flex-start; gap: .5rem; position: sticky; top: 6rem; }
}

/* ---------- Inner-page content wrapper: .zolder / .leeszaal ---------- */
/* Staggered "reading room" stack, distinct name from the homepage's gauge
   architecture above (different CSS shape, so the two never collide). */
.zolder { position: relative; padding-block: var(--space-l); }
.zolder::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - var(--content-max)/2 + 1.4rem); width: 2px; background: repeating-linear-gradient(180deg, var(--vaargeul) 0 10px, transparent 10px 18px); z-index: 0; }
@media (max-width: 61.9rem) { .zolder::before { left: 1.1rem; } }
.leeszaal { position: relative; z-index: 1; margin-inline: auto; width: min(calc(100% - 2rem), var(--content-max)); padding-left: 2.6rem; margin-bottom: var(--space-l); }
.leeszaal:last-child { margin-bottom: 0; }
.leeszaal::before { content: attr(data-peil); position: absolute; left: 0; top: .15rem; width: 2.1rem; height: 2.1rem; display: flex; align-items: center; justify-content: center; background: var(--turfzwart); color: var(--wit); font-family: var(--font-data); font-size: .68rem; border-radius: 50%; }
.leeszaal { --edge: max(1rem, calc((100% - var(--content-max)) / 2)); --shift: 0px; margin-left: calc(var(--edge) + var(--shift)); margin-right: auto; width: min(calc(100% - 2rem - var(--shift)), calc(var(--content-max) - var(--shift))); }
.leeszaal--diep { --shift: 0px; }
.leeszaal--midden { --shift: clamp(0px, 4vw, 3rem); }
.leeszaal--hoog { --shift: clamp(0px, 8vw, 6rem); }
.leeszaal-kop { display: grid; gap: .4rem; margin-bottom: 1.4rem; max-width: var(--reading-max); }
.leeszaal-kop p { margin: 0; color: var(--turfzwart-soft); }

/* Card language: .vlucht (a mill's named "flight" of sails, reused for content cards) */
.vlucht-rooster { display: grid; gap: 1.1rem; }
.vlucht { display: block; background: var(--wit); border: 2px solid var(--turfzwart); padding: 1.2rem 1.3rem; text-decoration: none; color: inherit; position: relative; }
.vlucht::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 4px; background: var(--wiekpaars); transform: scaleX(0); transform-origin: left; transition: transform .18s ease; }
.vlucht:hover::after, a.vlucht:focus-visible::after { transform: scaleX(1); }
.vlucht-foto { aspect-ratio: 4/3; overflow: hidden; margin: -1.2rem -1.3rem 1rem; border-bottom: 2px solid var(--turfzwart); }
.vlucht-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vlucht h3 { margin: 0 0 .35rem; font-size: 1.25rem; }
.vlucht p { margin: 0; font-size: .95rem; color: var(--turfzwart-soft); }
.vlucht-tag { display: inline-block; font-family: var(--font-data); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--wiekpaars-deep); margin-bottom: .4rem; }
@media (min-width: 40rem) { .vlucht-rooster.vlucht-rooster--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 52rem) { .vlucht-rooster.vlucht-rooster--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .vlucht-rooster.vlucht-rooster--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.feit-rooster { display: grid; gap: .15rem; margin: 1.4rem 0; background: var(--turfzwart); border: 2px solid var(--turfzwart); }
.feit-rooster div { background: var(--wit); padding: .8rem 1rem; }
.feit-rooster dt { font-family: var(--font-data); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--vaargeul-deep); }
.feit-rooster dd { margin: .2rem 0 0; font-family: var(--font-display); font-size: 1.25rem; }
@media (min-width: 34rem) { .feit-rooster { grid-template-columns: repeat(3, 1fr); } }

.kader { padding: 1.1rem 1.2rem; border: 2px solid var(--wiekpaars); background: var(--wiekpaars-tint); margin: 1.4rem 0; }
.kader p:last-child { margin-bottom: 0; }
.kader-label { display: block; font-family: var(--font-data); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--wiekpaars-deep); margin-bottom: .3rem; }

table.vergelijk { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .95rem; }
table.vergelijk th, table.vergelijk td { border: 1px solid var(--turfzwart-soft); padding: .6rem .7rem; text-align: left; vertical-align: top; }
table.vergelijk th { background: var(--turfzwart); color: var(--wit); font-family: var(--font-data); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }
table.vergelijk tr:nth-child(even) td { background: var(--zeildoek); }

/* ---------- Doorsnede: cross-section click-to-reveal (signature element) ---------- */
.doorsnede { display: grid; gap: 1.6rem; margin-top: 1.4rem; }
.doorsnede-svg { background: var(--wit); border: 2px solid var(--turfzwart); padding: 1rem; }
.doorsnede-svg svg { width: 100%; height: auto; display: block; }
.doorsnede-hotspot { cursor: pointer; }
.doorsnede-hotspot circle { fill: var(--wiekpaars); stroke: var(--wit); stroke-width: 2; transition: r .12s ease; }
.doorsnede-hotspot:hover circle, .doorsnede-hotspot.actief circle { fill: var(--turfzwart); }
.doorsnede-hotspot text { font-family: var(--font-data); font-size: 11px; fill: var(--wit); pointer-events: none; }
.doorsnede-lijst { display: flex; flex-wrap: wrap; gap: .5rem; }
.doorsnede-knop { font: inherit; font-family: var(--font-data); font-size: .78rem; letter-spacing: .02em; padding: .55rem .8rem; border: 2px solid var(--turfzwart); background: var(--wit); cursor: pointer; min-height: 44px; }
.doorsnede-knop[aria-pressed="true"] { background: var(--turfzwart); color: var(--wit); border-color: var(--turfzwart); }
.doorsnede-paneel { border: 2px solid var(--turfzwart); background: var(--wit); padding: 1.1rem 1.2rem; min-height: 8rem; }
.doorsnede-paneel h4 { margin: 0 0 .4rem; font-family: var(--font-display); font-size: 1.15rem; }
.doorsnede-paneel p { margin: 0; }
@media (min-width: 52rem) { .doorsnede { grid-template-columns: 1.1fr .9fr; align-items: start; } }

/* ---------- Footer: .fundament ---------- */
.fundament { background: var(--turfzwart); color: var(--zeildoek); padding-block: var(--space-m); border-top: 6px solid var(--wiekpaars); }
.fundament a { color: var(--wit); }
.fundament-grid { display: grid; gap: 1.6rem; }
.fundament h4 { color: var(--wit); font-family: var(--font-data); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .6rem; }
.fundament nav { display: flex; flex-direction: column; gap: .4rem; }
.fundament small { display: block; margin-top: 1.4rem; color: #b8ab8d; font-size: .82rem; }
@media (min-width: 44rem) { .fundament-grid { grid-template-columns: 1.3fr 1fr 1fr; } }

.terug { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1.5rem; font-size: .9rem; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Small screens: keep wide tables and card photos inside the viewport */
@media (max-width: 47.99rem) {
  table.vergelijk { display: block; max-width: 100%; overflow-x: auto; }
}
.vlucht-rooster { grid-template-columns: minmax(0, 1fr); }
.leeszaal > .vlucht-foto { margin: 0 0 1rem; border: 2px solid var(--turfzwart); }