/* ===== Verhalen — уникальные макеты ===== */

/* Общие ограничители секций страницы */
.section { padding: clamp(2rem, 4vw, 4rem) 0; }

/* ——— SECTIE 1: Luisterlijnen — вертикальная “timeline” ——— */
.listen-lines .listen-timeline {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  gap: 1.1rem;
  counter-reset: step;
}
.listen-lines .moment {
  position: relative;
  background: #fff;
  padding: .9rem 1rem;
  border-radius: .9rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  display: grid;
  gap: .6rem;
}
.listen-lines .moment::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: -12px; top: 12px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #0f172a; color: #fff; font-weight: 700; font-size: .9rem;
  display: grid; place-items: center;
  box-shadow: 0 8px 16px rgba(0,0,0,.2);
}
.moment-card { text-align: center; }
.moment-card img { border-radius: .6rem; }
.moment-card figcaption { margin-top: .45rem; color: #475569; }
.note { color: #334155; margin: 0; }

@media (min-width: 880px) {
  .listen-lines .listen-timeline { grid-template-columns: repeat(3, 1fr); }
  .listen-lines .moment::before { left: 12px; }
}

/* ——— SECTIE 2: Brief aan een Polder — split letter ——— */
.polder-letter .letter-grid {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid; gap: 1.25rem;
}
.letter-body { color: #1f2937; background: #fff; border-radius: .9rem; padding: 1rem 1.1rem; box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.letter-body .dropcap::first-letter {
  float: left; font-weight: 700; font-size: 3rem; line-height: .9; margin-top: .2rem; padding-right: .35rem;
}
.letter-body .sign { font-style: italic; color: #475569; }
.letter-media { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.letter-card { background: #fff; padding: .6rem .6rem 1rem; border-radius: .75rem; box-shadow: 0 12px 30px rgba(0,0,0,.08); text-align: center; }
.letter-card figcaption { margin-top: .45rem; color: #475569; }

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

/* ——— SECTIE 3: Slootkanten Atlas — мозаика ——— */
.ditch-atlas .atlas-grid {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid; gap: 1rem; grid-template-columns: 1fr;
}
.atlas-card { background: #fff; padding: .6rem .6rem 1rem; border-radius: .75rem; box-shadow: 0 12px 30px rgba(0,0,0,.08); text-align: center; }
.atlas-card figcaption { margin-top: .45rem; color: #475569; }
@media (min-width: 880px) {
  .ditch-atlas .atlas-grid { grid-template-columns: repeat(3, 1fr); }
}
/* ——— SECTIE 4: Orale Geschiedenis ——— */
.oral-history .oral-grid {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid; gap: 1rem; grid-template-columns: 1fr;
}
.oral-card {
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: .9rem;
  padding: 1rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  position: relative;
}
.oral-card .tag {
  position: absolute; top: .8rem; right: .8rem;
  background: #0f172a; color: #fff; font-size: .75rem; line-height: 1;
  padding: .25rem .5rem; border-radius: .5rem;
}
.oral-card .quote {
  margin: 0 0 .6rem 0; font-style: italic; color: #334155;
  padding-left: .8rem; border-left: 3px solid #94a3b8;
}
.oral-media { margin: .25rem 0 0 0; text-align: center; }
.oral-media img { border-radius: .6rem; }
.oral-media figcaption { margin-top: .45rem; color: #475569; }

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

/* ——— SECTIE 5: Marginalia van de Rand ——— */
.marginalia .marg-grid {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid; gap: 1rem; grid-template-columns: 1fr;
}
.marg-card {
  background: #fff;
  border-radius: .9rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  border: 1px solid rgba(15,23,42,.08);
  padding: .6rem .6rem 1rem;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.marg-card figcaption { margin-top: .5rem; color: #475569; }
.marg-note {
  position: absolute; right: .6rem; top: .6rem;
  background: rgba(245,247,246,.95);
  border: 1px dashed rgba(15,23,42,.25);
  padding: .4rem .6rem;
  border-radius: .5rem;
  font-size: .9rem; color: #334155;
}
@media (min-width: 880px) {
  .marginalia .marg-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ——— SECTIE 6: Vaartritme — ladderstrook ——— */
.flow-ladder .ladder-strip {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid; gap: 1rem; grid-template-columns: 1fr;
}
.ladder-card {
  background: #fff;
  border-radius: .9rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  border: 1px solid rgba(15,23,42,.08);
  padding: .6rem .6rem 1rem;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ladder-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.12); }

@media (min-width: 880px) {
  .flow-ladder .ladder-strip { grid-template-columns: repeat(3, 1fr); }
  .flow-ladder .ladder-card:nth-child(2) { transform: translateY(10px); }
  .flow-ladder .ladder-card:nth-child(3) { transform: translateY(20px); }
}
/* ===== SECTIE 7: Kaartlegende — уникальная анимация пути ===== */
.map-legend .legend-wrap {
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid; gap: 1.25rem; grid-template-columns: 1fr;
}
.legend-aside {
  background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: .9rem;
  padding: 1rem 1.1rem; box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.legend-head { margin: 0 0 .35rem 0; }
.legend-list { margin-top: .5rem; display: grid; gap: .35rem; color: #334155; }
.legend-list .dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .4rem; }
.dot-dike { background: #0f172a; }
.dot-sluice { background: #334155; }
.dot-path { background: #64748b; }

.legend-media { position: relative; display: grid; gap: 1rem; grid-template-columns: 1fr; }
.legend-card {
  background: #fff; padding: .6rem .6rem 1rem; border-radius: .75rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.08); text-align: center;
}
.legend-card figcaption { margin-top: .45rem; color: #475569; }

/* Путь — пунктир, который «рисуется» */
.legend-route { position: absolute; inset: auto 0 -10px 0; height: 120px; }
.route-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.route-path {
  fill: none; stroke: #0f172a; stroke-width: 3;
  stroke-dasharray: 6 8; stroke-linecap: round;
  animation: dash-move 2.8s linear infinite;
}
@keyframes dash-move {
  to { stroke-dashoffset: -140; }
}
/* Пины */
.pin { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #0f172a; box-shadow: 0 0 0 6px rgba(15,23,42,.1); }
.pin.start { left: 6px; bottom: 16px; }
.pin.mid   { left: 50%; bottom: 58px; transform: translateX(-50%); }
.pin.end   { right: 6px; bottom: 14px; }

@media (min-width: 880px) {
  .map-legend .legend-wrap { grid-template-columns: .95fr 1.05fr; align-items: start; }
}

/* ===== SECTIE 8: Schuurwoorden — типографика + анимация набора ===== */
.barn-words .barn-grid {
  width: min(1100px, 92vw); margin: 0 auto;
  display: grid; gap: 1.25rem; grid-template-columns: 1fr;
}
.barn-text {
  background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: .9rem;
  padding: 1rem 1.1rem; box-shadow: 0 12px 30px rgba(0,0,0,.08); color: #1f2937;
}
.barn-text .type-in {
  /* Эффект “набирающегося” текста: маска + мигающий курсор */
  --chars: 120ch; /* достаточно большое значение, чтобы перекрыть абзац */
  position: relative; 
  white-space: nowrap; overflow: hidden;
  display: block; width: 0; 
  animation: type-width 4s steps(60, end) forwards;
}
.barn-text .type-in + p { margin-top: .75rem; }
.barn-quote {
  margin: .75rem 0 0 0; padding-left: .8rem;
  border-left: 3px solid #94a3b8; color: #334155; font-style: italic;
}
@keyframes type-width {
  from { width: 0; }
  to   { width: 100%; }
}

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

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

/* ===== SECTIE 9: Nachtnotulen — twinkle + плавающие подписи ===== */
.night-minutes .nightmin-grid {
  width: min(1100px, 92vw); margin: 0 auto;
  display: grid; gap: 1rem; grid-template-columns: 1fr;
}
.nightmin-card {
  position: relative; background: #0b1220;
  border-radius: .9rem; padding: .6rem .6rem 1rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.25); text-align: center;
}
.nightmin-card img { border-radius: .6rem; filter: grayscale(.2) brightness(.95) contrast(1.05); }
.nightmin-card .float-caption {
  position: absolute; left: 12px; bottom: 14px; right: 12px;
  background: rgba(11,18,32,.75); color: #e5e7eb;
  padding: .45rem .6rem; border-radius: .6rem;
  transform: translateY(6px); opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
}
.nightmin-card:hover .float-caption { transform: translateY(0); opacity: 1; }

/* звёздное мерцание над каждой карточкой */
.starfield::before, .starfield::after {
  content: ""; position: absolute; inset: 6px 6px auto auto; width: 3px; height: 3px; border-radius: 50%;
  background: #e5e7eb; opacity: .7; filter: drop-shadow(0 0 6px #e5e7eb);
  animation: twinkle 2.4s ease-in-out infinite;
}
.starfield::after { inset: 12px auto auto 10px; animation-delay: 1.2s; }
@keyframes twinkle {
  0%, 100% { transform: scale(1); opacity: .6; }
  50% { transform: scale(1.6); opacity: 1; }
}

@media (min-width: 880px) {
  .night-minutes .nightmin-grid { grid-template-columns: repeat(3, 1fr); }
}
/* БЫЛО: white-space: nowrap + width-анимация — вызывало overflow */
/* СТАЛО: аккуратное раскрытие текста через clip-path, переносы разрешены */
.barn-text .type-in {
  position: relative;
  display: block;
  overflow: hidden;                  /* ничего не вылезает */
  /* разрешаем переносы строк */
  white-space: normal;
  /* «маска» справа: отсекаем текст и плавно раскрываем */
  clip-path: inset(0 100% 0 0);
  animation: reveal-lines 1400ms steps(30, end) forwards;
}

/* мигающий курсор внутри блока (не вылезает за края) */
.barn-text .type-in::after {
  content: "";
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 2px;
  background: #0f172a;
  opacity: .6;
  animation: caret-blink 900ms step-end infinite;
}

@keyframes reveal-lines {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
@keyframes caret-blink {
  0%, 50% { opacity: .6; }
  50.01%, 100% { opacity: 0; }
}
/* ===== SECTIE 10: Regenbrief ===== */
.rain-letter .rain-wrap {
  width: min(1100px, 92vw); margin: 0 auto;
  display: grid; gap: 1.25rem; grid-template-columns: 1fr;
}
.rain-text {
  background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: .9rem;
  padding: 1rem 1.1rem; color: #1f2937; box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.rain-media { position: relative; display: grid; gap: 1rem; grid-template-columns: 1fr; overflow: hidden; }
.rain-card {
  background: #fff; padding: .6rem .6rem 1rem; border-radius: .75rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.08); text-align: center;
}
.rain-card figcaption { margin-top: .45rem; color: #475569; }

/* дождь — безопасно внутри контейнера */
.rain-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rain-overlay .drop {
  position: absolute; top: -10%; left: 10%;
  width: 2px; height: 22px; background: rgba(15,23,42,.18); border-radius: 1px;
  transform: translateY(-100%); animation: rain-fall 1.6s linear infinite;
}
.rain-overlay .drop:nth-child(2){ left: 28%; animation-delay: .2s; height: 18px; }
.rain-overlay .drop:nth-child(3){ left: 46%; animation-delay: .5s; height: 26px; }
.rain-overlay .drop:nth-child(4){ left: 64%; animation-delay: .8s; height: 20px; }
.rain-overlay .drop:nth-child(5){ left: 78%; animation-delay: 1.1s; height: 24px; }
.rain-overlay .drop:nth-child(6){ left: 90%; animation-delay: 1.3s; height: 19px; }

@keyframes rain-fall {
  to { transform: translateY(220%); opacity: 0.2; }
}

@media (min-width: 880px) {
  .rain-letter .rain-wrap { grid-template-columns: 1.05fr .95fr; align-items: start; }
  .rain-media { grid-template-columns: repeat(2, 1fr); }
}

/* ===== SECTIE 11: Woordenkaart ===== */
.words-map .words-grid {
  width: min(1100px, 92vw); margin: 0 auto;
  display: grid; gap: 1.25rem; grid-template-columns: 1fr;
}
.words-text {
  background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: .9rem;
  padding: 1rem 1.1rem; color: #1f2937; box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.glow-when-inview {
  position: relative;
}
.reveal-on-scroll.in-view .glow-when-inview strong,
.reveal-on-scroll.in-view .glow-when-inview em {
  background: linear-gradient(90deg, rgba(148,163,184,.25), rgba(148,163,184,0));
  border-radius: .3rem;
  box-shadow: 0 0 0 0 rgba(15,23,42,.0);
  animation: word-glow 1400ms ease forwards;
}
@keyframes word-glow {
  0% { box-shadow: 0 0 0 0 rgba(15,23,42,.0); }
  100% { box-shadow: 0 0 0 6px rgba(148,163,184,.15); }
}

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

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

/* ===== SECTIE 12: Kleipalet ===== */
.clay-palette .clay-grid {
  width: min(1100px, 92vw); margin: 0 auto;
  display: grid; gap: 1rem; grid-template-columns: 1fr;
}
.clay-card {
  background: #fff; padding: .6rem .6rem 1rem; border-radius: .75rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.08); text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.clay-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.12); }
.tone { border-radius: .5rem; transition: filter .35s ease; }
.clay-card:hover .tone { filter: hue-rotate(6deg) saturate(1.06); }

@media (min-width: 880px) {
  .clay-palette .clay-grid { grid-template-columns: repeat(3, 1fr); }
  /* ступеньки для карточек */
  .clay-card:nth-child(2) { transform: translateY(8px); }
  .clay-card:nth-child(3) { transform: translateY(16px); }
}
/* ===== SECTIE 13: Veldnotities ===== */
.field-notes .field-grid{
  width: min(1100px,92vw); margin:0 auto;
  display:grid; gap:1.25rem; grid-template-columns:1fr;
}
.field-essay{
  background:#fff; border:1px solid rgba(15,23,42,.08);
  border-radius:.9rem; padding:1rem 1.1rem; color:#1f2937;
  box-shadow:0 12px 30px rgba(0,0,0,.08); position:relative;
}
.side-quote{
  margin:.8rem 0; padding:.6rem .8rem; font-style:italic; color:#334155;
  border-left:4px solid #94a3b8; background:linear-gradient(90deg, rgba(148,163,184,.12), transparent 70%);
  border-radius:.5rem;
}
/* Плавная волна-подчёркивание при появлении */
.wave-underline{
  background: linear-gradient(0deg, rgba(15,23,42,.2), rgba(15,23,42,.2)) no-repeat 0 100%/0 2px;
  transition: background-size 900ms ease;
}
.reveal-on-scroll.in-view .wave-underline{ background-size:100% 2px; }

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

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

/* ===== SECTIE 14: Wind & Werk (mask-reveal изображений) ===== */
.wind-work .windwork-grid{
  width:min(1100px,92vw); margin:0 auto;
  display:grid; gap:1.25rem; grid-template-columns:1fr;
}
.windwork-text{
  background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:.9rem;
  padding:1rem 1.1rem; color:#1f2937; box-shadow:0 12px 30px rgba(0,0,0,.08);
}
.windwork-media{ display:grid; gap:1rem; grid-template-columns:1fr; }
.mask-reveal{
  background:#fff; padding:.6rem .6rem 1rem; border-radius:.75rem;
  box-shadow:0 12px 30px rgba(0,0,0,.08); text-align:center;
  overflow:hidden;
}
.mask-reveal img{ border-radius:.5rem; clip-path: inset(0 100% 0 0); transition: clip-path .9s ease; }
.reveal-on-scroll.in-view .mask-reveal img{ clip-path: inset(0 0 0 0); }
.mask-reveal figcaption{ margin-top:.45rem; color:#475569; }

@media (min-width:880px){
  .wind-work .windwork-grid{ grid-template-columns:1.05fr .95fr; align-items:start; }
  .windwork-media{ grid-template-columns:repeat(2,1fr); }
}

/* ===== SECTIE 15: Brieven aan de Horizon (многоколонник) ===== */
.letters-columns{
  width:min(1100px,92vw); margin:0 auto;
  background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:.9rem;
  box-shadow:0 12px 30px rgba(0,0,0,.08); color:#1f2937;
  padding:1rem 1.1rem;
  column-gap:1.4rem;
  column-width: 28rem;           /* авто-колонки на широких экранах */
  hyphens:auto;
}
.letters-columns .dropcap::first-letter{
  float:left; font-weight:700; font-size:3rem; line-height:.9; margin-top:.2rem; padding-right:.35rem;
}
.letters-figure{
  break-inside: avoid; margin: .8rem 0 0 0; text-align:center;
  background:#f8fafc; border:1px solid rgba(15,23,42,.08); border-radius:.75rem; padding:.5rem .6rem 1rem;
}
.letters-figure figcaption{ margin-top:.45rem; color:#475569; }

/* ===== SECTIE 16: Kaartenkamer ===== */
.map-room .maproom-wrap{
  width:min(1100px,92vw); margin:0 auto;
  display:grid; gap:1.25rem; grid-template-columns:1fr;
}
.maproom-legend{
  background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:.9rem;
  padding:1rem 1.1rem; box-shadow:0 12px 30px rgba(0,0,0,.08); color:#1f2937;
}
.maproom-grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
.maproom-card{
  background:#fff; padding:.6rem .6rem 1rem; border-radius:.75rem;
  box-shadow:0 12px 30px rgba(0,0,0,.08); text-align:center;
}
.maproom-card figcaption{ margin-top:.45rem; color:#475569; }

@media (min-width:880px){
  .map-room .maproom-wrap{ grid-template-columns:1.1fr .9fr; align-items:start; }
  .maproom-grid{ grid-template-columns:repeat(2,1fr); }
}

/* Страховка на всякий случай */
html, body, .site-main { overflow-x: hidden; }