/* Hero-collage met polaroid-effect en zachte tilt */
.hero-collage { position: relative; }

.polaroid-stack {
  width: min(1050px, 92vw);
  margin: 1.5rem auto 0;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  gap: 1.25rem;
}

.polaroid {
  background: #fff;
  padding: .6rem .6rem 1.1rem;
  border-radius: .75rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  transition: transform .35s ease, box-shadow .35s ease;
  will-change: transform;
}

.polaroid img {
  border-radius: .5rem;
}

/* Citaten onderaan de “polaroid” */
.polaroid .quote {
  margin-top: .55rem;
  font-size: .95rem;
  color: #475569;
  text-align: center;
}

/* Subtiele tilt variaties */
.tilt-left { transform: rotate(-2.5deg); }
.tilt-right { transform: rotate(2.5deg); }
.tilt-center { transform: rotate(0.5deg); }

.hover-rise:hover {
  transform: translateY(-4px) scale(1.01) rotate(0deg);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}

/* Intro-tekst onder de collage */
.hero-text {
  width: min(900px, 92vw);
  margin: 1rem auto 0;
  color: #1f2937;
}

/* Desktop: schik 3 polaroids in een speelse layout */
@media (min-width: 880px) {
  .polaroid-stack {
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    gap: 1.5rem;
  }
  .tilt-left { transform: translateY(6px) rotate(-3deg); }
  .tilt-center { transform: translateY(-4px) rotate(0.8deg); }
  .tilt-right { transform: translateY(10px) rotate(3deg); }
}

/* Extra brede schermen: iets meer ademruimte */
@media (min-width: 1200px) {
  .polaroid-stack { gap: 2rem; }
}
/* ====== Sectie 2: Lintgalerij (horizontaal scrollen) ====== */
.strip-gallery .strip {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.strip-gallery .strip::-webkit-scrollbar { height: 8px; }
.strip-gallery .strip::-webkit-scrollbar-thumb { background: rgba(15,23,42,.2); border-radius: 8px; }

.strip-item {
  scroll-snap-align: start;
  background: #fff;
  padding: .5rem .5rem .9rem;
  border-radius: .75rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  text-align: center;
  min-width: 280px;
}
.strip-item figcaption { margin-top: .45rem; color: #475569; font-size: .95rem; }
.strip-hint { text-align: right; width: min(1100px, 92vw); margin: .35rem auto 0; color: #64748b; font-size: .9rem; opacity: .85; }

/* ====== Sectie 3: Split-essay met typografische strofe ====== */
.split-essay .split-grid {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  gap: 1.25rem;
}
.split-essay .essay-column { color: #1f2937; }
.split-essay .media-column { display: grid; gap: 1rem; grid-template-columns: 1fr; }

.frame {
  background: #fff;
  padding: .6rem .6rem 1rem;
  border-radius: .75rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.frame figcaption { margin-top: .5rem; text-align: center; color: #475569; font-size: .95rem; }

.stanza {
  --accent: #94a3b8;
  margin: 1rem 0;
  padding: .75rem 1rem;
  border-left: 4px solid var(--accent);
  background: linear-gradient(90deg, rgba(148,163,184,.12), transparent 70%);
  border-radius: .5rem;
  font-style: italic;
}
.stanza p { margin: 0; }

@media (min-width: 880px) {
  .split-essay .split-grid {
    grid-template-columns: 1.1fr .9fr;
    align-items: start;
  }
}

/* ====== Sectie 4: Scrollytelling met sticky citaat ====== */
.dike-steps .steps-grid {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  gap: 1.25rem;
}

.sticky-quote {
  position: relative;
  background: #ffffffa6;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: .75rem;
  padding: 1rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.sticky-quote .lead { font-weight: 700; margin: 0 0 .25rem 0; }
.sticky-quote .small { color: #475569; margin: 0; }

.steps { display: grid; gap: 1rem; }
.step {
  background: #fff;
  padding: .6rem .6rem 1rem;
  border-radius: .75rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.step figcaption { margin-top: .5rem; color: #475569; text-align: center; }

@media (min-width: 880px) {
  .dike-steps .steps-grid {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: start;
  }
  .sticky-quote {
    position: sticky;
    top: 84px; /* houdt rekening met de vaste header + marge */
  }
  .steps {
    grid-template-columns: 1fr;
  }
  .steps .step:nth-child(2) { transform: translateX(12px); }
  .steps .step:nth-child(3) { transform: translateX(24px); }
}

/* ====== Kleine micro-animaties ====== */
.hover-rise { transition: transform .3s ease, box-shadow .3s ease; }
.hover-rise:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.12); }
/* ====== Sectie 5: Kaartstrook met pinnen ====== */
.map-strip .pin-line {
  width: min(1100px, 92vw);
  margin: 0 auto 1rem;
  display: grid;
  gap: .5rem;
  position: relative;
  counter-reset: pin;
}
.map-strip .pin {
  position: relative;
  padding-left: 1.75rem;
}
.map-strip .pin::before {
  counter-increment: pin;
  content: counter(pin);
  position: absolute; left: 0; top: .1rem;
  width: 1.2rem; height: 1.2rem; line-height: 1.2rem; text-align: center;
  border-radius: 50%;
  background: #0f172a; color: #fff; font-size: .8rem; font-weight: 700;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.pin-title { display: block; font-weight: 700; }
.pin-meta  { display: block; color: #475569; font-size: .95rem; }

.map-media {
  width: min(1100px, 92vw);
  margin: .75rem auto 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.map-card {
  background: #fff;
  padding: .6rem .6rem 1rem;
  border-radius: .75rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  text-align: center;
}
.map-card figcaption { margin-top: .5rem; color: #475569; }

@media (min-width: 880px) {
  .map-media { grid-template-columns: repeat(2, 1fr); }
}


/* ====== Sectie 7: Typografische grid met overlay ====== */
.marks-grid {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.mark-card {
  position: relative;
  overflow: hidden;
  border-radius: .75rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  background: #fff;
}
.mark-card img { display: block; }
.mark-card figcaption {
  position: absolute; left: .6rem; right: .6rem; bottom: .6rem;
  background: rgba(245,247,246,.92);
  border: 1px solid rgba(15,23,42,.08);
  padding: .5rem .6rem;
  border-radius: .6rem;
  transform: translateY(8px);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.mark-card:hover figcaption { transform: translateY(0); opacity: 1; }
.mark-card figcaption strong { display: block; }
.mark-card figcaption span { color: #475569; font-size: .95rem; }

@media (min-width: 880px) {
  .marks-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ====== Sectie 8: Stroken-essay met drop cap ====== */
.stripe-essay .stripe-layout {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  gap: 1.25rem;
}
.stripe-text { color: #1f2937; }
.dropcap::first-letter {
  float: left;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: .9;
  padding-right: .35rem;
  margin-top: .2rem;
}
.stripe-media {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.stripe-card {
  background: #fff;
  padding: .6rem .6rem 1rem;
  border-radius: .75rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  text-align: center;
}
.stripe-card figcaption { margin-top: .5rem; color: #475569; }

@media (min-width: 880px) {
  .stripe-essay .stripe-layout {
    grid-template-columns: 1.05fr .95fr;
    align-items: start;
  }
  .stripe-media { grid-template-columns: 1fr; }
}

/* ====== Sectie 9: Seizoenslint met micro-animatie ====== */
.seasons-ribbon .ribbon {
  width: min(900px, 92vw);
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.ribbon-card {
  background: #fff;
  padding: .6rem .6rem 1rem;
  border-radius: .75rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  text-align: center;
  position: relative;
}
.ribbon-card figcaption { margin-top: .5rem; color: #475569; }
.hint-glow::after {
  content: "";
  position: absolute; inset: -2px;
  border-radius: .85rem;
  opacity: 0;
  box-shadow: 0 0 0 0 rgba(15,23,42,.25);
  transition: opacity .25s ease, box-shadow .25s ease;
  pointer-events: none;
}
.hint-glow:hover::after {
  opacity: 1;
  box-shadow: 0 0 0 6px rgba(15,23,42,.08);
}
.seasons-ribbon .ribbon-note {
  width: min(900px, 92vw);
  margin: .5rem auto 0;
  color: #334155;
  text-align: center;
  font-style: italic;
}

@media (min-width: 880px) {
  .seasons-ribbon .ribbon { grid-template-columns: repeat(2, 1fr); }
}

/* ====== Sectie 10: Horizonraster mozaïek ====== */
.horizon-grid .grid-mosaic {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.mosaic-card {
  background: #fff;
  padding: .6rem .6rem 1rem;
  border-radius: .75rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  text-align: center;
}
.mosaic-card figcaption { margin-top: .5rem; color: #475569; }

@media (min-width: 880px) {
  .horizon-grid .grid-mosaic { grid-template-columns: repeat(3, 1fr); }
}
/* ====== Sectie 11: Woord & Beeld ====== */
.word-image .wordimg-grid {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  gap: 1.25rem;
}
.word-image .wordcol { color: #1f2937; }
.word-image .leadline { font-weight: 700; margin: 0 0 .5rem 0; }
.word-image .microquote {
  --accent: #94a3b8;
  margin: .75rem 0;
  padding: .6rem .8rem;
  border-left: 4px solid var(--accent);
  background: linear-gradient(90deg, rgba(148,163,184,.12), transparent 70%);
  border-radius: .5rem;
  font-style: italic;
}
.word-image .imgcol {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.word-image .panel {
  background: #fff;
  padding: .6rem .6rem 1rem;
  border-radius: .75rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  text-align: center;
}
.word-image .panel figcaption { margin-top: .45rem; color: #475569; }

@media (min-width: 880px) {
  .word-image .wordimg-grid {
    grid-template-columns: 1.05fr .95fr;
    align-items: start;
  }
}

/* ====== Sectie 12: Nachtval (duotone-gevoel via filters) ====== */
.nightfall .night-grid {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.night-card {
  background: #0b1220;
  color: #e5e7eb;
  padding: .6rem .6rem 1rem;
  border-radius: .75rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  text-align: center;
}
.night-card figcaption { margin-top: .5rem; opacity: .9; }
/* “Duotone”: деликатный фильтр без внешних библиотек */
.night-card .duo {
  filter: grayscale(1) contrast(1.1) brightness(.95) hue-rotate(190deg) saturate(1.2);
  border-radius: .5rem;
}

@media (min-width: 880px) {
  .nightfall .night-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ====== Sectie 13: Windschrift (sticky aside + steps) ====== */
.wind-script .wind-grid {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  gap: 1.25rem;
}
.wind-aside {
  background: #ffffffcc;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: .75rem;
  padding: 1rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  position: relative;
}
.wind-aside .aside-lead { font-weight: 700; margin: 0 0 .25rem 0; }
.wind-aside .aside-small { margin: 0; color: #475569; }

.wind-steps { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.wind-card {
  background: #fff;
  padding: .6rem .6rem 1rem;
  border-radius: .75rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  text-align: center;
}
.wind-card figcaption { margin-top: .5rem; color: #475569; }

@media (min-width: 880px) {
  .wind-script .wind-grid {
    grid-template-columns: .9fr 1.1fr;
    align-items: start;
  }
  .wind-aside { position: sticky; top: 84px; }
}
/* ====== Sectie 14: Rietspraak (zigzag) ====== */
.reed-speech .reed-zigzag {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.reed-card {
  background: #fff;
  padding: .6rem .6rem 1rem;
  border-radius: .75rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  text-align: center;
}
.reed-card figcaption { margin-top: .45rem; color: #475569; }
.reed-text {
  background: linear-gradient(90deg, rgba(148,163,184,.12), transparent 70%);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: .75rem;
  padding: .9rem 1rem;
  color: #1f2937;
}
@media (min-width: 880px) {
  .reed-speech .reed-zigzag {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 1fr;
    align-items: stretch;
  }
  .reed-card:nth-of-type(1) { grid-column: 1 / span 2; }
  .reed-text:nth-of-type(2) { grid-column: 3 / span 2; }
  .reed-card:nth-of-type(3) { grid-column: 5 / span 2; }
  .reed-text:nth-of-type(4) { grid-column: 2 / span 2; }
  .reed-card:nth-of-type(5) { grid-column: 4 / span 2; }
}

/* ====== Sectie 15: Waterpeil-Notities ====== */
.level-notes .level-grid {
  width: min(900px, 92vw);
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.level-card {
  position: relative;
  background: #fff;
  padding: .6rem .6rem 1rem;
  border-radius: .75rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  text-align: center;
}
.level-card .badge {
  display: inline-block;
  font-size: .8rem;
  line-height: 1;
  padding: .35rem .5rem;
  border-radius: .5rem;
  background: #0f172a;
  color: #fff;
  margin-right: .35rem;
}
.measurebar {
  height: 8px;
  background: rgba(15,23,42,.08);
  border-radius: 999px;
  margin-top: .6rem;
  overflow: hidden;
}
.measurebar span {
  display: block;
  height: 100%;
  width: var(--v);
  background: linear-gradient(90deg, #0f172a, #334155);
  border-radius: inherit;
  transition: width .6s ease;
}
@media (min-width: 880px) {
  .level-notes .level-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ====== Sectie 16: Knotwilgen-TripTych ====== */
.willow-triptych .willow-grid {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.willow-card {
  position: relative;
  overflow: hidden;
  border-radius: .75rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  background: #fff;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.willow-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.12); }
.willow-card figcaption { 
  position: absolute; left: .6rem; right: .6rem; bottom: .6rem;
  background: rgba(245,247,246,.92);
  border: 1px solid rgba(15,23,42,.08);
  padding: .45rem .6rem; border-radius: .6rem; 
  color: #1f2937;
}
@media (min-width: 880px) {
  .willow-triptych .willow-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Waterpeil-Notities — значения без инлайна */
.measurebar span.v36 { --v: 36%; }
.measurebar span.v68 { --v: 68%; }