/*
 * Pages — de binnenpagina's
 * ----------------------------------------
 * Paginakop, de twee hoofdstukvormen (volvlak en ingekaderd), het
 * droom-hoofdstuk en de volledige footer. De homepage gebruikt story.css.
 *
 * Beweging: blokken komen binnen zodra ze in beeld schuiven (.reveal), en
 * beelden schuiven traag mee (assets/js/pages.js zet de doelpositie, de
 * lange CSS-transitie doet de rest).
 */

/* Binnenpagina's lezen iets ruimer dan het scroll-verhaal op de homepage.
   Dit bestand wordt alleen daar ingeladen, dus body mag hier. */
body,
p {
  line-height: var(--leading-page);
}

/* De knop is op de binnenpaginas iets compacter dan op de homepage. */
.btn {
  --btn-pad-y: 15px;
  --btn-pad-x: 28px;
}

/* Koppen volgen de kleur van hun sectie. Zonder dit zet typography.css ze
   altijd op creme, en dat is onleesbaar op de lichte secties. */
.page-hero__title,
.team-hero__title,
.feature__title,
.showcase__title,
.person__title,
.callout__title,
.closing__title {
  color: inherit;
}

/* ----------------------------------------
 * PAGINAKOP
 * ---------------------------------------- */

.page-hero {
  position:         relative;
  display:          flex;
  align-items:      flex-end;
  min-height:       88vh;
  overflow:         hidden;
  background-color: var(--color-ink);
}

.page-hero__media {
  position: absolute;
  inset:    0;
}

.page-hero__image {
  position:     absolute;
  inset:        0;
  width:        100%;
  height:       100%;
  object-fit:   cover;
  object-position: 70% 35%;
  transform:    scale(1.10);
  transition:   transform 1.8s var(--ease-drift);
  will-change:  transform;
}

.page-hero__tint {
  position:       absolute;
  inset:          0;
  mix-blend-mode: multiply;
  background:     var(--tint-page);
}

.page-hero__scrim {
  position:   absolute;
  inset:      0;
  background: var(--scrim-page-hero);
}

.page-hero__grain {
  position:         absolute;
  inset:            0;
  opacity:          0.3;
  mix-blend-mode:   overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.page-hero__inner {
  position:   relative;
  z-index:    5;
  width:      100%;
  max-width:  var(--page-inner);
  margin:     0 auto;
  padding:    0 var(--page-gutter) 12vh;
  color:      var(--color-cream);
}

.page-hero__title {
  font-size:      var(--text-page-title);
  line-height:    0.86;
  letter-spacing: -0.04em;
  margin-bottom:  var(--space-6);
}

.page-hero__intro {
  max-width:  var(--measure-hero);
  font-size:  var(--text-page-intro);
  color:      var(--color-cream-90);
}

/* ----------------------------------------
 * GEDEELDE ONDERDELEN VAN EEN HOOFDSTUK
 * ---------------------------------------- */

.chapter-number {
  display:        block;
  font-family:    var(--font-display);
  font-weight:    var(--font-extrabold);
  font-size:      0.8rem;
  letter-spacing: 0.22em;
  color:          var(--color-sun);
  margin-bottom:  18px;
}

.chapter-cost {
  display:      block;
  font-family:  var(--font-serif);
  font-style:   italic;
  font-size:    var(--text-cost);
  color:        var(--color-sun);
  margin:       26px 0 22px;
}

.arrow-link {
  display:        inline-flex;
  align-items:    center;
  gap:            0.5em;
  font-weight:    var(--font-extrabold);
  font-size:      var(--text-base);
  color:          var(--color-cream);
  border-bottom:  3px solid var(--color-sun);
  padding-bottom: 3px;
  transition:     gap 0.2s ease, color 0.2s ease;
}

.arrow-link:hover {
  gap:    0.85em;
  color:  var(--color-sun);
}

/* ----------------------------------------
 * HOOFDSTUK — VOLVLAK BEELD
 * ---------------------------------------- */

.feature {
  position:         relative;
  display:          flex;
  align-items:      center;
  min-height:       96vh;
  padding:          20vh 0;
  overflow:         hidden;
  background-color: var(--color-ink);
  color:            var(--color-cream);
}

.feature__media {
  position: absolute;
  inset:    0;
}

.feature__image {
  position:     absolute;
  inset:        0;
  width:        100%;
  height:       100%;
  object-fit:   cover;
  opacity:      0.44;
  transform:    scale(1.10);
  transition:   transform 1.8s var(--ease-drift);
  will-change:  transform;
}

.feature__tint {
  position:       absolute;
  inset:          0;
  mix-blend-mode: multiply;
  background:     var(--tint-feature);
}

.feature__scrim {
  position: absolute;
  inset:    0;
}

.feature--left .feature__scrim  { background: var(--scrim-feature-left); }
.feature--right .feature__scrim { background: var(--scrim-feature-right); }

.feature__grain {
  position:         absolute;
  inset:            0;
  opacity:          0.28;
  mix-blend-mode:   overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Geen width: de sectie is een flexbox, dus dit blok krimpt naar zijn inhoud
   en komt door margin auto gecentreerd te staan. Precies zoals in het ontwerp:
   een smalle tekstkolom staat midden op het scherm, de brede droom-kolommen
   lopen door tot de maximale binnenmaat. */
.feature__inner {
  position:   relative;
  z-index:    5;
  max-width:  var(--page-inner);
  margin:     0 auto;
  padding:    0 var(--page-gutter);
}

.feature__body {
  max-width: var(--measure-intro);
}

.feature--right .feature__body {
  margin-left: auto;
}

.feature__title {
  font-size:      var(--text-feature);
  line-height:    var(--leading-none);
  letter-spacing: var(--tracking-display);
  margin-bottom:  28px;
}

.feature__text p {
  font-size:      var(--text-feature-flow);
  line-height:    var(--leading-feature);
  color:          var(--color-cream-92);
  max-width:      var(--measure-feature);
  margin-bottom:  18px;
}

/* ----------------------------------------
 * HOOFDSTUK — INGEKADERD BEELD NAAST DE TEKST
 * ---------------------------------------- */

.showcase {
  position:         relative;
  padding:          16vh 0;
  overflow:         hidden;
  background-color: var(--color-ink);
  color:            var(--color-cream);
}

/* Hetzelfde beeld, sterk vervaagd, als sfeer achter het hoofdstuk */
.showcase__ambient {
  position:       absolute;
  inset:          0;
  z-index:        0;
  pointer-events: none;
}

.showcase__ambient-image {
  position:     absolute;
  inset:        -8%;
  width:        116%;
  height:       116%;
  object-fit:   cover;
  opacity:      0.16;
  filter:       saturate(0.85);
  transform:    scale(1.08);
  transition:   transform 1.8s var(--ease-drift);
  will-change:  transform;
}

.showcase__wash {
  position:   absolute;
  inset:      0;
  background: var(--wash-showcase);
}

.showcase__inner {
  position:   relative;
  z-index:    2;
  max-width:  var(--page-inner-narrow);
  margin:     0 auto;
  padding:    0 var(--page-gutter);
}

.showcase__grid {
  display:                grid;
  grid-template-columns:  repeat(12, 1fr);
  align-items:            center;
}

.showcase__figure {
  position:       relative;
  overflow:       hidden;
  aspect-ratio:   4 / 5;
  border-radius:  var(--radius-sm);
  box-shadow:     var(--shadow-figure);
  grid-row:       1;
}

.showcase__image {
  position:     absolute;
  inset:        0;
  width:        100%;
  height:       100%;
  object-fit:   cover;
  transform:    scale(1.12);
  transition:   transform 1.8s var(--ease-drift);
  will-change:  transform;
}

.showcase__figure-tint {
  position:       absolute;
  inset:          0;
  mix-blend-mode: multiply;
  background:     var(--tint-figure);
}

.showcase__body {
  grid-row: 1;
}

/* Beeld links, tekst rechts */
.showcase--image-left .showcase__figure { grid-column: 1 / 6; }
.showcase--image-left .showcase__body   { grid-column: 7 / 13; }

/* Beeld rechts, tekst links */
.showcase--image-right .showcase__figure { grid-column: 8 / 13; }
.showcase--image-right .showcase__body   { grid-column: 1 / 6; }

.showcase__title {
  font-size:      var(--text-showcase);
  line-height:    var(--leading-none);
  letter-spacing: var(--tracking-display);
  margin-bottom:  22px;
}

.showcase__text p {
  font-size:      var(--text-showcase-flow);
  line-height:    var(--leading-showcase);
  color:          var(--color-cream-90);
  max-width:      var(--measure-column);
  margin-bottom:  16px;
}

/* ----------------------------------------
 * HOOFDSTUK — DE DROOM
 * ---------------------------------------- */

.dream .feature__title {
  font-size:      var(--text-feature-large);
  max-width:      13ch;
  margin-bottom:  34px;
}

.dream__columns {
  display:                grid;
  grid-template-columns:  1.1fr 1fr;
  gap:                    56px;
  align-items:            start;
}

/* Zelfde verhaal als bij het citaat: in het ontwerp is een grotere vraagzin
   bedoeld (--text-ask), maar op het scherm staat hij op bodyformaat, vet, in
   Bricolage. We volgen het scherm. */
.dream__ask {
  font-family:  var(--font-display);
  font-weight:  var(--font-extrabold);
  font-size:    var(--text-feature-flow);
  line-height:  var(--leading-feature);
  color:        var(--color-cream-92);
  margin:       28px 0 18px;
}

/* Zo staat het citaat in het ontwerp op het scherm: cursief serif, maar op
   bodyformaat en in crème. In de ontwerp-CSS is een groter geel citaat
   bedoeld (--text-dream-quote, kleur zon), alleen wint de regel voor gewone
   alinea's daar op specificiteit. We volgen het zichtbare ontwerp; wil je het
   bedoelde grote citaat, dan is dat een kleine wijziging hier. */
.dream__quote {
  font-family:  var(--font-serif);
  font-style:   italic;
  font-size:    var(--text-feature-flow);
  line-height:  var(--leading-feature);
  color:        var(--color-cream-92);
  border-left:  2px solid var(--color-sun);
  padding-left: var(--space-6);
}

.dream__cta {
  margin-top: var(--space-3);
}

/* ----------------------------------------
 * VOLLEDIGE FOOTER
 * ---------------------------------------- */

/* Geen lijn erboven en 40px onder, zoals in het ontwerp van de binnenpaginas.
   De horizontale marge zit op .site-footer__inner. */
.site-footer {
  padding: 70px 0 40px;
}

.site-footer__inner {
  max-width:  1120px;
  margin:     0 auto;
  padding:    0 var(--gutter);
}

@media (min-width: 1300px) {
  .site-footer__inner {
    padding: 0 var(--space-10);
  }
}

.site-footer__columns {
  display:                grid;
  grid-template-columns:  1.4fr 1fr 1fr;
  gap:                    var(--space-10);
  padding-bottom:         34px;
  border-bottom:          1px solid var(--color-cream-12);
}

.site-footer__logo {
  width:          190px;
  margin-bottom:  var(--space-4);
}

.site-footer__title {
  font-family:    var(--font-body);
  font-size:      0.72rem;
  font-weight:    var(--font-extrabold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--color-sun);
  margin-bottom:  14px;
}

.site-footer__menu a,
.site-footer__inline-link {
  display:    block;
  padding:    5px 0;
  font-size:  0.95rem;
  color:      var(--color-cream-muted);
}

.site-footer__inline-link {
  display:  inline;
  padding:  0;
}

.site-footer__menu a:hover,
.site-footer__inline-link:hover {
  color: var(--color-cream);
}

.site-footer__bottom {
  display:          flex;
  flex-wrap:        wrap;
  justify-content:  space-between;
  gap:              14px;
  padding-top:      var(--space-5);
  font-size:        0.82rem;
  color:            var(--color-cream-50);
}

/* ----------------------------------------
 * BINNENKOMEN BIJ HET SCROLLEN
 * ---------------------------------------- */

.reveal {
  opacity:    0;
  transform:  translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.reveal.is-revealed {
  opacity:    1;
  transform:  none;
}

/* ----------------------------------------
 * MOBIEL
 * ---------------------------------------- */

@media (max-width: 900px) {

  .feature {
    padding:    12vh 0;
    min-height: 0;
  }

  .feature--right .feature__body {
    margin-left: 0;
  }

  .showcase {
    padding: 10vh 0;
  }

  .showcase__grid {
    display: block;
  }

  .showcase__figure {
    aspect-ratio:   4 / 3;
    margin-bottom:  28px;
  }

  .dream__columns {
    grid-template-columns: 1fr;
    gap:                   30px;
  }
}

@media (max-width: 760px) {

  .site-footer__columns {
    grid-template-columns: 1fr 1fr;
  }

  .page-hero__inner {
    padding-bottom: 10vh;
  }
}

/* ----------------------------------------
 * BEWEGING BEPERKEN
 * ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .reveal {
    opacity:    1;
    transform:  none;
    transition: none;
  }

  .page-hero__image,
  .feature__image,
  .showcase__image,
  .showcase__ambient-image {
    transform: none !important;
  }
}

/* ----------------------------------------
 * PAGINAKOP MET GEZICHTEN (Ons team)
 *
 * Geen vaste hoogte: deze kop groeit mee met het raster portretten dat
 * eronder hangt en over de onderrand heen steekt.
 * ---------------------------------------- */

.team-hero {
  position:         relative;
  overflow:         hidden;
  padding-bottom:   130px;
  background-color: var(--color-ink);
}

.team-hero__media {
  position: absolute;
  inset:    0;
}

.team-hero__image {
  position:     absolute;
  inset:        0;
  width:        100%;
  height:       100%;
  object-fit:   cover;
  transform:    scale(1.1);
  transition:   transform 1.8s var(--ease-drift);
  will-change:  transform;
}

.team-hero__tint {
  position:       absolute;
  inset:          0;
  mix-blend-mode: multiply;
  background:     var(--tint-page);
}

.team-hero__scrim {
  position:   absolute;
  inset:      0;
  background: var(--scrim-team-hero);
}

.team-hero__grain {
  position:         absolute;
  inset:            0;
  opacity:          0.3;
  mix-blend-mode:   overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.team-hero__inner {
  position:     relative;
  z-index:      5;
  padding-top:  24vh;
  color:        var(--color-cream);
}

.team-hero__title {
  font-size:      var(--text-team-title);
  line-height:    0.9;
  letter-spacing: -0.04em;
  margin-bottom:  22px;
}

.team-hero__intro {
  max-width:  var(--measure-intro);
  font-size:  var(--text-team-intro);
  color:      var(--color-cream-92);
}

/* ----------------------------------------
 * RASTER MET GEZICHTEN
 * ---------------------------------------- */

.faces {
  position:               relative;
  z-index:                6;
  margin-top:             56px;
  display:                grid;
  grid-template-columns:  repeat(6, 1fr);
  gap:                    var(--space-3);
}

.face {
  position:       relative;
  overflow:       hidden;
  border-radius:  14px;
  aspect-ratio:   3 / 4;
  opacity:        0;
  transform:      translateY(20px);
  transition:     opacity 0.7s ease, transform 0.7s ease;
}

.face.is-revealed {
  opacity:    1;
  transform:  none;
}

/* Het raster staat bewust niet strak op één lijn */
.face:nth-child(2) { margin-top: 22px; }
.face:nth-child(3) { margin-top: -10px; }
.face:nth-child(5) { margin-top: 26px; }
.face:nth-child(6) { margin-top: 8px; }

.face__image {
  position:     absolute;
  inset:        0;
  width:        100%;
  height:       100%;
  object-fit:   cover;
  transform:    scale(1.05);
  transition:   transform 0.8s var(--ease-drift);
}

.face:hover .face__image {
  transform: scale(1.12);
}

.face__veil {
  position:   absolute;
  inset:      0;
  background: var(--veil-face);
}

.face__name {
  position:     absolute;
  left:         var(--space-3);
  right:        10px;
  bottom:       11px;
  z-index:      2;
  font-family:  var(--font-display);
  font-weight:  var(--font-extrabold);
  font-size:    0.92rem;
  line-height:  1.1;
  color:        var(--color-cream);
}

.face__since {
  display:        block;
  margin-top:     3px;
  font-family:    var(--font-body);
  font-weight:    var(--font-bold);
  font-size:      0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-sun);
}

/* ----------------------------------------
 * TEAMLID — foto tegen de rand, tekst ernaast
 * ---------------------------------------- */

.person {
  position:     relative;
  display:      grid;
  align-items:  center;
  padding:      13vh 0;
}

.person__figure {
  position:     relative;
  overflow:     hidden;
  aspect-ratio: 4 / 5;
  max-height:   82vh;
  width:        100%;
  grid-row:     1;
}

.person__image {
  position:     absolute;
  inset:        0;
  width:        100%;
  height:       100%;
  object-fit:   cover;
  transform:    scale(1.12);
  transition:   transform 1.8s var(--ease-drift);
  will-change:  transform;
}

.person__tint {
  position:       absolute;
  inset:          0;
  mix-blend-mode: multiply;
}

.person__side {
  position: relative;
  z-index:  5;
  grid-row: 1;
}

.person__text {
  max-width: 60ch;
}

.person__title {
  font-size:      var(--text-person);
  line-height:    var(--leading-none);
  letter-spacing: -0.03em;
  margin-bottom:  var(--space-3);
}

.person__since {
  display:        block;
  font-family:    var(--font-serif);
  font-style:     italic;
  font-size:      1.1rem;
  margin-bottom:  18px;
}

.person__body p {
  font-size:      var(--text-person-flow);
  line-height:    var(--leading-person);
  margin-bottom:  15px;
}

.person__pull {
  font-family:  var(--font-serif);
  font-style:   italic;
  font-size:    var(--text-pull);
  line-height:  1.34;
  margin:       22px 0 18px;
  padding-left: var(--space-5);
  border-left:  2px solid currentColor;
}

/* Foto links tegen de rand, lege ruimte rechts */
.person--left {
  grid-template-columns: 44% minmax(0, 1fr) 8%;
}

.person--left .person__figure {
  grid-column:  1;
  justify-self: start;
}

.person--left .person__side {
  grid-column:  2;
  justify-self: start;
  padding:      0 2vw 0 2.6vw;
}

/* Foto rechts tegen de rand, lege ruimte links */
.person--right {
  grid-template-columns: 8% minmax(0, 1fr) 44%;
}

.person--right .person__figure {
  grid-column:  3;
  justify-self: end;
}

.person--right .person__side {
  grid-column:  2;
  justify-self: end;
  padding:      0 2.6vw 0 2vw;
}

/* Donkere en lichte variant */
.person--dark {
  background-color: var(--color-ink);
  color:            var(--color-cream);
}

.person--dark .label,
.person--dark .person__title .it,
.person--dark .person__pull,
.person--dark .person__since {
  color: var(--color-sun);
}

.person--dark .person__body p {
  color: var(--color-cream-90);
}

.person--dark .person__tint {
  background: var(--tint-portret-donker);
}

.person--light {
  background-color: var(--color-paper);
  color:            var(--color-ink);
}

.person--light .label,
.person--light .person__title .it,
.person--light .person__pull,
.person--light .person__since {
  color: var(--color-clay);
}

.person--light .person__body p {
  color: var(--color-ink-soft);
}

.person--light .person__tint {
  background: var(--tint-portret-licht);
}

/* ----------------------------------------
 * GROEN TUSSENBLOK
 * ---------------------------------------- */

.callout {
  position:         relative;
  overflow:         hidden;
  padding:          13vh 0;
  background-color: var(--color-leaf);
  color:            var(--color-cream);
}

.callout__inner {
  position: relative;
  z-index:  2;
}

.callout .label {
  color: var(--color-sun);
}

.callout__title {
  font-size:      var(--text-green-title);
  line-height:    var(--leading-none);
  letter-spacing: -0.03em;
  max-width:      18ch;
  margin-bottom:  var(--space-5);
}

.callout__text p {
  font-size:    var(--text-green-flow);
  line-height:  var(--leading-green);
  color:        var(--color-cream-92);
  max-width:    60ch;
}

/* ----------------------------------------
 * SLOTBLOK MET OPROEP
 * ---------------------------------------- */

.closing {
  position:         relative;
  overflow:         hidden;
  padding:          20vh 0;
  text-align:       center;
  background-color: var(--color-ink);
  color:            var(--color-cream);
}

/* Op een pagina die alleen uit dit blok bestaat (404) vult het blok het scherm.
   82vh is dezelfde hoogte als de compacte paginakop van Steun ons. */
.closing--fill {
  display:      flex;
  align-items:  center;
  min-height:   82vh;
}

.closing__image {
  position:     absolute;
  inset:        0;
  width:        100%;
  height:       100%;
  object-fit:   cover;
  opacity:      0.34;
  transform:    scale(1.08);
  transition:   transform 1.8s var(--ease-drift);
  will-change:  transform;
}

.closing__tint {
  position:       absolute;
  inset:          0;
  mix-blend-mode: multiply;
  background:     var(--tint-feature);
}

.closing__scrim {
  position:   absolute;
  inset:      0;
  background: var(--scrim-closing);
}

.closing__inner {
  position: relative;
  z-index:  5;
}

.closing .label {
  color: var(--color-sun);
}

.closing__title {
  font-size:    var(--text-close-title);
  line-height:  var(--leading-tight);
  max-width:    24ch;
  margin:       0 auto 30px;
}

.closing__text p {
  font-size:  var(--text-close-flow);
  color:      var(--color-cream-90);
  max-width:  52ch;
  margin:     0 auto 32px;
}

/* ----------------------------------------
 * LABEL BOVEN EEN BLOK
 * ---------------------------------------- */

.label {
  display:        block;
  font-weight:    var(--font-extrabold);
  font-size:      0.72rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  margin-bottom:  14px;
}

/* ----------------------------------------
 * MOBIEL — teamonderdelen
 * ---------------------------------------- */

@media (max-width: 1000px) {

  .person--left,
  .person--right {
    grid-template-columns: 1fr;
  }

  .person {
    padding: 9vh 0;
  }

  .person__figure {
    grid-column:    1;
    grid-row:       auto;
    aspect-ratio:   4 / 3;
    max-height:     none;
    margin-bottom:  26px;
  }

  .person__side {
    grid-column:  1;
    grid-row:     auto;
    justify-self: stretch;
    padding:      0 var(--gutter);
  }
}

@media (max-width: 900px) {

  .faces {
    grid-template-columns: repeat(3, 1fr);
  }

  .face {
    margin-top: 0;
  }
}

@media (max-width: 520px) {

  .faces {
    grid-template-columns: repeat(2, 1fr);
    gap:                   var(--space-2);
  }
}

@media (prefers-reduced-motion: reduce) {

  .face {
    opacity:    1;
    transform:  none;
  }

  .team-hero__image,
  .person__image,
  .face__image,
  .closing__image {
    transform: none !important;
  }
}

/* ----------------------------------------
 * NIEUWSPAGINA — kop met de nieuwsbriefkaart eroverheen
 *
 * De kop loopt onderaan over in het papieren vlak van het archief, zodat de
 * kaart half op de foto en half op het papier staat.
 * ---------------------------------------- */

/* Twee binnenmaten: breed voor de teampaginas, smal voor de paginas met een
   paneel over de kop heen. */
.container {
  width:  100%;
  margin: 0 auto;
}

.container--wide {
  max-width:      var(--container-wide);
  padding-left:   var(--container-wide-pad);
  padding-right:  var(--container-wide-pad);
}

.container--narrow {
  max-width:      var(--container-narrow);
  padding-left:   var(--container-narrow-pad);
  padding-right:  var(--container-narrow-pad);
}

@media (max-width: 640px) {

  .container--wide,
  .container--narrow {
    padding-left:   var(--container-pad-mobiel);
    padding-right:  var(--container-pad-mobiel);
  }
}

.fade-hero {
  position:         relative;
  display:          block;
  overflow:         hidden;
  padding-bottom:   210px;
  background-color: var(--color-ink);
}

.fade-hero__media {
  position: absolute;
  inset:    0;
}

.fade-hero__image {
  position:         absolute;
  inset:            0;
  width:            100%;
  height:           100%;
  object-fit:       cover;
  object-position:  center;
  transform:        scale(1.1);
  transition:       transform 1.8s var(--ease-drift);
  will-change:      transform;
}

.fade-hero__tint {
  position:       absolute;
  inset:          0;
  mix-blend-mode: multiply;
  background:     var(--tint-page);
}

.fade-hero__scrim {
  position:   absolute;
  inset:      0;
  background: var(--scrim-fade-hero);
}

.fade-hero__grain {
  position:         absolute;
  inset:            0;
  opacity:          0.3;
  mix-blend-mode:   overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Onderaan vloeit het beeld over in de papierkleur van het archief */
.fade-hero__fade {
  position:       absolute;
  left:           0;
  right:          0;
  bottom:         0;
  height:         420px;
  z-index:        4;
  pointer-events: none;
  background:     var(--fade-to-paper);
}

.fade-hero__inner {
  position:     relative;
  z-index:      5;
  padding-top:  24vh;
  color:        var(--color-cream);
}

.fade-hero__title {
  font-size:      clamp(2.6rem, 6.5vw, 5rem);
  line-height:    0.92;
  letter-spacing: -0.035em;
  margin-bottom:  22px;
}

.fade-hero__intro p {
  max-width:      60ch;
  font-size:      clamp(1.04rem, 1.5vw, 1.18rem);
  color:          var(--color-cream-92);
  margin-bottom:  14px;
}

.fade-hero__intro p:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------
 * NIEUWSBRIEFKAART
 * ---------------------------------------- */

.news-card {
  position:         relative;
  z-index:          6;
  margin-top:       56px;
  padding:          48px 52px;
  border-radius:    24px;
  background-color: var(--color-paper);
  color:            var(--color-ink);
  box-shadow:       0 30px 70px rgba(0, 0, 0, 0.5);
}

.news-card .label {
  color: var(--color-clay);
}

.news-card__title {
  font-size:      clamp(1.7rem, 3.4vw, 2.4rem);
  line-height:    1.02;
  letter-spacing: var(--tracking-display);
  color:          inherit;
  margin-bottom:  14px;
}

.news-card__title .it {
  color: var(--color-clay);
}

.news-card__text {
  font-size:      1.05rem;
  line-height:    var(--leading-feature);
  color:          var(--color-ink-soft);
  max-width:      62ch;
  margin-bottom:  28px;
}

.news-card__form {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-3);
}

.news-card__input {
  flex:             1 1 260px;
  min-width:        0;
  padding:          16px 22px;
  font-family:      var(--font-body);
  font-size:        var(--text-base);
  color:            var(--color-ink);
  background-color: #FFFFFF;
  border:           2px solid var(--color-ink);
  border-radius:    var(--radius-pill);
  outline:          none;
}

.news-card__input:focus {
  border-color: var(--color-clay);
  box-shadow:   0 0 0 3px rgba(228, 85, 43, 0.14);
}

.news-card__form .btn {
  flex:        0 0 auto;
  white-space: nowrap;
}

.news-card__note {
  margin-top: 14px;
  font-size:  0.88rem;
  color:      var(--color-ink-soft);
}

@media (max-width: 640px) {

  .news-card {
    margin-top:     40px;
    padding:        32px 26px;
    border-radius:  20px;
  }
}

/* ----------------------------------------
 * ARCHIEF MET NIEUWSBRIEVEN
 * ---------------------------------------- */

.archive {
  padding:          90px 0 130px;
  background-color: var(--color-paper);
  color:            var(--color-ink);
}

.archive .label {
  color: var(--color-clay);
}

.archive__title {
  font-size:      clamp(1.8rem, 3.6vw, 2.6rem);
  line-height:    1.02;
  letter-spacing: var(--tracking-display);
  color:          inherit;
  margin-bottom:  36px;
}

.archive__title .it {
  color: var(--color-clay);
}

.archive__note {
  margin-top: 28px;
  font-size:  0.94rem;
  color:      var(--color-ink-soft);
}

.letters {
  border-top: 1px solid var(--color-ink-15);
}

.letter {
  display:        flex;
  align-items:    center;
  gap:            var(--space-6);
  padding:        var(--space-6) var(--space-1);
  border-bottom:  1px solid var(--color-ink-15);
  transition:     background-color 0.18s ease, padding-left 0.18s ease;
}

.letter:hover {
  background-color: var(--color-ink-035);
  padding-left:     14px;
}

.letter__number {
  flex:         0 0 88px;
  font-family:  var(--font-display);
  font-weight:  var(--font-extrabold);
  font-size:    var(--text-base);
  color:        var(--color-clay);
}

.letter__title {
  flex:           1;
  font-family:    var(--font-display);
  font-weight:    var(--font-extrabold);
  font-size:      1.2rem;
  letter-spacing: -0.01em;
}

.letter__action {
  flex:         0 0 auto;
  font-weight:  var(--font-extrabold);
  font-size:    0.9rem;
  color:        var(--color-ink-soft);
}

.letter:hover .letter__action {
  color: var(--color-clay);
}

@media (max-width: 600px) {

  .letter {
    flex-wrap: wrap;
    gap:       6px var(--space-4);
  }

  .letter__title {
    flex: 1 1 100%;
  }

  .letter__action {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .fade-hero__image {
    transform: none !important;
  }
}

/* ----------------------------------------
 * CONTACT — paneel over de kop heen
 *
 * Links het formulier op papier, rechts de directe gegevens op groen.
 * Het paneel valt half over de foto en half over het papieren vlak eronder.
 * ---------------------------------------- */

/* Op de nieuwspagina ligt de uitsnede rechts van het midden */
.fade-hero--nieuws .fade-hero__image {
  object-position: 70% 30%;
}

/* De contactkop is iets dieper dan die van nieuws */
.fade-hero--contact {
  padding-bottom: 220px;
}

/* Papieren strook waarin de kop uitloopt */
.paper-strip {
  height:           120px;
  background-color: var(--color-paper);
}

.contact-panel {
  position:               relative;
  z-index:                6;
  margin-top:             60px;
  display:                grid;
  grid-template-columns:  1.3fr 0.9fr;
  border-radius:          24px;
  overflow:               hidden;
  box-shadow:             0 30px 70px rgba(0, 0, 0, 0.5);
}

.contact-panel__form {
  padding:          48px 46px;
  background-color: var(--color-paper);
  color:            var(--color-ink);
}

.contact-panel__aside {
  display:          flex;
  flex-direction:   column;
  justify-content:  center;
  padding:          48px 40px;
  background-color: var(--color-leaf);
  color:            var(--color-cream);
}

.contact-panel__form .label {
  color: var(--color-clay);
}

.contact-panel__aside .label {
  color: var(--color-sun);
}

.contact-panel__title {
  font-size:      clamp(1.6rem, 3vw, 2.2rem);
  line-height:    1.02;
  letter-spacing: var(--tracking-display);
  color:          inherit;
  margin-bottom:  var(--space-6);
}

.contact-panel__title .it {
  color: var(--color-clay);
}

.contact-panel__subtitle {
  font-family:    var(--font-display);
  font-weight:    var(--font-extrabold);
  font-size:      1.4rem;
  line-height:    1.15;
  letter-spacing: var(--tracking-display);
  color:          inherit;
  margin-bottom:  var(--space-6);
}

/* ----------------------------------------
 * FORMULIERVELDEN
 * ---------------------------------------- */

.field {
  margin-bottom: 18px;
}

.field__label {
  display:        block;
  font-weight:    var(--font-bold);
  font-size:      0.9rem;
  margin-bottom:  7px;
  color:          var(--color-ink);
}

.field__required {
  color: var(--color-clay);
}

.field__input,
.field__textarea {
  width:            100%;
  padding:          14px 18px;
  font-family:      var(--font-body);
  font-size:        var(--text-base);
  color:            var(--color-ink);
  background-color: #FFFFFF;
  border:           2px solid var(--color-ink-16);
  border-radius:    14px;
  outline:          none;
  transition:       border-color 0.18s ease, box-shadow 0.18s ease;
}

.field__textarea {
  min-height: 130px;
  resize:     vertical;
}

.field__input:focus,
.field__textarea:focus {
  border-color: var(--color-clay);
  box-shadow:   0 0 0 3px rgba(228, 85, 43, 0.14);
}

.contact-panel__form .btn {
  margin-top: 6px;
}

/* Verborgen veld tegen spam: alleen invulbaar door robots */
.field--val {
  position:   absolute;
  left:       -9999px;
  width:      1px;
  height:     1px;
  overflow:   hidden;
}

/* ----------------------------------------
 * DIRECTE GEGEVENS
 * ---------------------------------------- */

.contact-line {
  display:        block;
  margin-bottom:  18px;
}

.contact-line__label {
  display:        block;
  font-size:      0.7rem;
  font-weight:    var(--font-extrabold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--color-sun);
  margin-bottom:  var(--space-1);
}

.contact-line a {
  font-size:      var(--text-base);
  line-height:    var(--leading-normal);
  color:          var(--color-cream-95);
  border-bottom:  1px solid var(--color-cream-40);
  word-break:     break-word;
}

.contact-line a:hover {
  color:        var(--color-sun);
  border-color: var(--color-sun);
}

.contact-address {
  margin-top:   var(--space-2);
  padding-top:  22px;
  border-top:   1px solid var(--color-cream-22);
  font-size:    0.98rem;
  line-height:  1.75;
  color:        var(--color-cream-88);
  font-style:   normal;
}

/* ----------------------------------------
 * MELDING NA HET VERSTUREN
 *
 * Staat niet in het ontwerp: het formulier verstuurt echt, dus de bezoeker
 * moet zien of het gelukt is. Vormgegeven in dezelfde taal.
 * ---------------------------------------- */

.form-notice {
  margin-bottom:  var(--space-6);
  padding:        16px 20px;
  border-radius:  14px;
  font-size:      0.98rem;
  line-height:    var(--leading-normal);
  border:         2px solid transparent;
}

.form-notice--ok {
  background-color: rgba(14, 81, 56, 0.08);
  border-color:     var(--color-leaf);
  color:            var(--color-leaf);
}

.form-notice--fout {
  background-color: rgba(228, 85, 43, 0.08);
  border-color:     var(--color-clay);
  color:            var(--color-clay-deep);
}

/* ----------------------------------------
 * MOBIEL
 * ---------------------------------------- */

@media (max-width: 860px) {

  .contact-panel {
    grid-template-columns: 1fr;
    margin-top:            44px;
    border-radius:         20px;
  }
}

@media (max-width: 640px) {

  .contact-panel__form,
  .contact-panel__aside {
    padding: 34px 26px;
  }
}

/* ----------------------------------------
 * STEUN ONS
 * ---------------------------------------- */

/* Iets lagere paginakop dan de andere binnenpagina's */
.page-hero--compact {
  min-height: 82vh;
}

.page-hero--compact .page-hero__scrim {
  background: var(--scrim-hero-diep);
}

.page-hero--compact .page-hero__image {
  object-position: center;
}

.page-hero--compact .page-hero__inner {
  padding-bottom: 16vh;
}

.page-hero--compact .page-hero__title {
  font-size:      var(--text-hero-compact);
  line-height:    0.9;
  letter-spacing: -0.035em;
  margin-bottom:  var(--space-6);
}

.page-hero--compact .page-hero__intro {
  max-width: var(--measure-intro);
}

/* Binnenmaat van de blokken op deze pagina */
.section-inner {
  position:   relative;
  z-index:    5;
  max-width:  var(--page-inner);
  margin:     0 auto;
  padding:    0 var(--page-gutter);
}

/* ----------------------------------------
 * DONATIEMODULE
 *
 * De module valt over de donkere strook onder de kop heen en staat met
 * zijn onderhelft op het papier.
 * ---------------------------------------- */

.give {
  position:         relative;
  z-index:          6;
  padding:          0 0 12vh;
  background-color: var(--color-paper);
}

.give::before {
  content:          "";
  position:         absolute;
  top:              0;
  left:             0;
  right:            0;
  height:           220px;
  z-index:          0;
  background-color: var(--color-ink);
}

/* Geen zijmarge en niet gecentreerd: in het ontwerp begint de module bij de
   linkerrand en loopt hij door tot de binnenmaat van 1240px. Pas op smallere
   schermen komt er marge bij. */
.give__inner {
  position:   relative;
  z-index:    1;
  max-width:  var(--page-inner);
}

.module {
  display:                grid;
  grid-template-columns:  1.35fr 0.95fr;
  margin-top:             -7vh;
  border-radius:          28px;
  overflow:               hidden;
  background-color:       var(--color-paper);
  color:                  var(--color-ink);
  box-shadow:             0 40px 90px rgba(0, 0, 0, 0.5);
}

.module__main {
  padding: 44px 44px 40px;
}

.module__side {
  display:          flex;
  flex-direction:   column;
  justify-content:  center;
  padding:          44px 36px;
  background-color: var(--color-leaf);
  color:            var(--color-cream);
}

.module__title {
  font-size:      var(--text-module);
  line-height:    0.95;
  letter-spacing: -0.03em;
  color:          inherit;
  margin-bottom:  var(--space-2);
}

.module__title .it {
  color: var(--color-clay);
}

.module__intro {
  font-size:      1.02rem;
  color:          var(--color-ink-soft);
  margin-bottom:  26px;
}

/* Keuze tussen eenmalig en maandelijks */
.freq {
  display:          inline-flex;
  padding:          5px;
  margin-bottom:    26px;
  border-radius:    var(--radius-pill);
  background-color: var(--color-ink-07);
}

.freq__option {
  border:         none;
  background:     transparent;
  cursor:         pointer;
  font-family:    var(--font-body);
  font-weight:    var(--font-extrabold);
  font-size:      0.95rem;
  padding:        11px 22px;
  border-radius:  var(--radius-pill);
  color:          var(--color-ink-soft);
  transition:     background-color 0.2s ease, color 0.2s ease;
}

.freq__option.is-on {
  background-color: var(--color-ink);
  color:            var(--color-cream);
}

/* Bedragen met hun betekenis */
.amounts {
  display:                grid;
  grid-template-columns:  1fr 1fr;
  gap:                    var(--space-3);
  margin-bottom:          var(--space-4);
}

.amount {
  position:         relative;
  text-align:       left;
  cursor:           pointer;
  padding:          16px 18px;
  border:           2px solid var(--color-ink-15);
  border-radius:    16px;
  background-color: #FFFFFF;
  font-family:      var(--font-body);
  transition:       border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.amount:hover {
  border-color: var(--color-ink);
  transform:    translateY(-2px);
}

.amount.is-on {
  border-color: var(--color-clay);
  box-shadow:   0 0 0 3px rgba(228, 85, 43, 0.16);
}

.amount__value {
  display:        block;
  font-family:    var(--font-display);
  font-weight:    var(--font-extrabold);
  font-size:      1.7rem;
  line-height:    var(--leading-none);
  margin-bottom:  6px;
}

.amount.is-on .amount__value {
  color: var(--color-clay);
}

.amount__meaning {
  display:      block;
  font-size:    0.9rem;
  line-height:  1.4;
  color:        var(--color-ink-soft);
}

/* Eigen bedrag */
.custom-amount {
  display:          flex;
  align-items:      center;
  gap:              10px;
  padding:          14px 18px;
  margin-bottom:    22px;
  border:           2px solid var(--color-ink-15);
  border-radius:    16px;
  background-color: #FFFFFF;
  transition:       border-color 0.18s ease, box-shadow 0.18s ease;
}

.custom-amount.is-on {
  border-color: var(--color-clay);
  box-shadow:   0 0 0 3px rgba(228, 85, 43, 0.16);
}

.custom-amount__sign {
  font-family:  var(--font-display);
  font-weight:  var(--font-extrabold);
  font-size:    1.5rem;
  color:        var(--color-ink-soft);
}

.custom-amount__input {
  flex:         1;
  width:        100%;
  border:       none;
  outline:      none;
  background:   transparent;
  font-family:  var(--font-display);
  font-weight:  var(--font-extrabold);
  font-size:    1.5rem;
  color:        var(--color-ink);
}

.custom-amount__input::placeholder {
  color:        var(--color-ink-28);
  font-weight:  var(--font-bold);
}

.module__cta {
  width:            100%;
  justify-content:  center;
  font-size:        1.08rem;
  padding:          19px 28px;
}

.module__cta[disabled] {
  opacity:  0.5;
  cursor:   not-allowed;
}

.pay {
  display:      flex;
  align-items:  center;
  flex-wrap:    wrap;
  gap:          14px;
  margin-top:   var(--space-4);
  font-size:    0.85rem;
  color:        var(--color-ink-soft);
}

.pay__methods {
  display:      flex;
  align-items:  center;
  gap:          7px;
}

.pay__method {
  padding:          5px 9px;
  border:           1px solid var(--color-ink-14);
  border-radius:    6px;
  background-color: #FFFFFF;
  font-size:        0.72rem;
  font-weight:      var(--font-extrabold);
  letter-spacing:   var(--tracking-wide);
  color:            var(--color-ink);
}

/* Zijkolom: waarom uw gift aankomt */
.module__side .label {
  color: var(--color-sun);
}

.module__subtitle {
  font-family:    var(--font-display);
  font-weight:    var(--font-extrabold);
  font-size:      1.5rem;
  line-height:    1.05;
  letter-spacing: var(--tracking-display);
  color:          inherit;
  margin-bottom:  var(--space-5);
}

.trustlist {
  display:  grid;
  gap:      var(--space-4);
}

.trustlist__item {
  display:      flex;
  align-items:  flex-start;
  gap:          var(--space-3);
  font-size:    0.96rem;
  line-height:  var(--leading-normal);
  color:        var(--color-cream-90);
}

.trustlist__tick {
  flex:             none;
  width:            22px;
  height:           22px;
  margin-top:       1px;
  border-radius:    var(--radius-full);
  background-color: var(--color-sun);
  color:            var(--color-leaf);
  display:          grid;
  place-items:      center;
  font-weight:      var(--font-extrabold);
  font-size:        0.8rem;
}

.module__fine {
  margin-top:   22px;
  padding-top:  18px;
  border-top:   1px solid var(--color-cream-20);
  font-size:    0.86rem;
  line-height:  var(--leading-feature);
  color:        var(--color-cream-72);
}

/* ----------------------------------------
 * WAT UW DONATIE DOET — lichte lijst
 * ---------------------------------------- */

.impact {
  position:         relative;
  padding:          4vh 0 12vh;
  background-color: var(--color-paper);
  color:            var(--color-ink);
}

.impact .label {
  color: var(--color-clay);
}

.impact__title {
  font-size:      var(--text-impact);
  line-height:    0.95;
  letter-spacing: -0.03em;
  color:          inherit;
  margin-bottom:  var(--space-3);
}

.impact__title .it {
  color: var(--color-clay);
}

.impact__list {
  display:    grid;
  margin-top: 44px;
}

.impact__row {
  display:                grid;
  grid-template-columns:  180px 1fr;
  gap:                    30px;
  align-items:            start;
  padding:                32px 0;
  border-top:             1px solid var(--color-ink-14);
}

.impact__amount {
  font-family:  var(--font-display);
  font-weight:  var(--font-extrabold);
  font-size:    var(--text-impact-amount);
  line-height:  0.9;
  color:        var(--color-clay);
}

.impact__text p {
  font-size:    1.08rem;
  line-height:  var(--leading-feature);
  color:        var(--color-ink-soft);
  max-width:    var(--measure-intro);
}

/* ----------------------------------------
 * EEN VERHAAL — donker, gecentreerd
 * ---------------------------------------- */

.verhaal {
  position:         relative;
  display:          flex;
  align-items:      center;
  overflow:         hidden;
  min-height:       90vh;
  padding:          20vh 0;
  text-align:       center;
  background-color: var(--color-ink);
  color:            var(--color-cream);
}

.verhaal__image {
  position:     absolute;
  inset:        0;
  width:        100%;
  height:       100%;
  object-fit:   cover;
  opacity:      0.42;
  transform:    scale(1.1);
  transition:   transform 1.8s var(--ease-drift);
  will-change:  transform;
}

.verhaal__tint {
  position:       absolute;
  inset:          0;
  mix-blend-mode: multiply;
  background:     var(--tint-feature);
}

.verhaal__scrim {
  position:   absolute;
  inset:      0;
  background: var(--scrim-verhaal);
}

.verhaal__grain {
  position:         absolute;
  inset:            0;
  opacity:          0.28;
  mix-blend-mode:   overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.verhaal .label {
  color: var(--color-sun);
}

.verhaal__tale {
  font-family:  var(--font-serif);
  font-style:   italic;
  font-size:    var(--text-verhaal);
  line-height:  1.3;
  max-width:    30ch;
  margin:       0 auto 26px;
}

.verhaal__beat {
  display:      block;
  margin-top:   14px;
  font-family:  var(--font-display);
  font-style:   normal;
  font-weight:  var(--font-extrabold);
  font-size:    0.82em;
  color:        var(--color-sun);
}

.verhaal__after {
  max-width:  54ch;
  margin:     0 auto 32px;
  font-size:  1.08rem;
  color:      var(--color-cream-90);
}

/* ----------------------------------------
 * VERANTWOORDING — groen, twee kolommen
 * ---------------------------------------- */

.accountability {
  position:         relative;
  padding:          15vh 0;
  background-color: var(--color-leaf);
  color:            var(--color-cream);
}

.accountability .label {
  color: var(--color-sun);
}

.accountability__title {
  font-size:      var(--text-leaf-title);
  line-height:    0.95;
  letter-spacing: -0.03em;
  color:          inherit;
  margin-bottom:  var(--space-5);
}

.accountability__title .it {
  color: var(--color-sun);
}

.accountability__columns {
  display:                grid;
  grid-template-columns:  1fr 1.05fr;
  gap:                    var(--space-12);
  align-items:            start;
  margin-top:             var(--space-3);
}

.accountability__text p {
  font-size:      1.08rem;
  line-height:    var(--leading-showcase);
  color:          var(--color-cream-92);
  max-width:      62ch;
  margin-bottom:  var(--space-4);
}

.accountability__cta {
  margin-top: 10px;
}

.bank {
  padding:        28px 32px;
  border:         1px solid var(--color-cream-28);
  border-radius:  20px;
  line-height:    var(--leading-feature);
}

.bank__title {
  font-family:    var(--font-display);
  font-weight:    var(--font-extrabold);
  font-size:      1.1rem;
  margin-bottom:  10px;
  color:          var(--color-sun);
}

.bank__row {
  display:                grid;
  grid-template-columns:  auto 1fr;
  gap:                    var(--space-1) var(--space-3);
  align-items:            baseline;
  margin-bottom:          2px;
  font-size:              var(--text-base);
}

.bank__row b {
  white-space:  nowrap;
  color:        var(--color-sun);
}

/* ----------------------------------------
 * SLOT — twee kolommen, donker
 * ---------------------------------------- */

.duo {
  position:         relative;
  padding:          14vh 0;
  background-color: var(--color-ink);
  color:            var(--color-cream);
}

.duo__columns {
  display:                grid;
  grid-template-columns:  1fr 1fr;
  gap:                    60px;
}

.duo .label {
  color: var(--color-sun);
}

.duo__title {
  font-size:      var(--text-duo-title);
  line-height:    0.95;
  letter-spacing: -0.03em;
  color:          inherit;
  margin-bottom:  14px;
}

.duo__title .it {
  color: var(--color-sun);
}

.duo__text p {
  font-size:    1.05rem;
  line-height:  var(--leading-feature);
  color:        var(--color-cream-90);
}

.duo__text a {
  font-weight:    var(--font-bold);
  color:          var(--color-sun);
  border-bottom:  2px solid currentColor;
}

/* Het nieuwsbriefveld staat hier iets krapper dan op de homepage */
.duo .newsletter {
  gap:        10px;
  margin-top: var(--space-5);
}

.duo .newsletter__input {
  min-width:    200px;
  border-color: var(--color-cream-50);
}

.duo .newsletter__input::placeholder {
  color: var(--color-cream-55);
}

/* ----------------------------------------
 * MOBIEL
 * ---------------------------------------- */

@media (max-width: 980px) {

  .give__inner {
    padding-left:   var(--space-6);
    padding-right:  var(--space-6);
  }

  .module {
    grid-template-columns:  1fr;
    margin-top:             -4vh;
  }
}

@media (max-width: 900px) {

  .accountability__columns {
    grid-template-columns: 1fr;
    gap:                   var(--space-8);
  }

  .duo__columns {
    grid-template-columns: 1fr;
    gap:                   var(--space-10);
  }

  .bank__row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {

  .impact__row {
    grid-template-columns:  1fr;
    gap:                    var(--space-2);
    padding:                var(--space-6) 0;
  }
}

@media (max-width: 600px) {

  .module__main {
    padding: 30px var(--space-6);
  }

  .module__side {
    padding: var(--space-8) 26px;
  }

  .amounts {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {

  .verhaal__image {
    transform: none !important;
  }
}

/* ----------------------------------------
 * DOCUMENTPAGINA
 *
 * Voor privacyverklaring, ANBI-gegevens en verantwoording: een compacte
 * donkere kop, lopende tekst en een meelopende zijbalk. Deze pagina's staan
 * als enige op een papieren grond.
 * ---------------------------------------- */

.body-document {
  background-color: var(--color-paper);
}

/* --- Kop --- */

/* Het ontwerp declareert .phead twee keer: de eerste regel zet de flexbox en
   min-height, de tweede alleen de padding. Beide gelden. */
.doc-hero {
  position:         relative;
  display:          flex;
  align-items:      flex-end;
  min-height:       62vh;
  overflow:         hidden;
  padding:          22vh 0 9vh;
  background-color: var(--color-ink);
}

.doc-hero__image {
  position:     absolute;
  inset:        0;
  width:        100%;
  height:       100%;
  object-fit:   cover;
  opacity:      0.5;
  transform:    scale(1.08);
  transition:   transform 1.8s var(--ease-drift);
  will-change:  transform;
}

.doc-hero__tint {
  position:       absolute;
  inset:          0;
  mix-blend-mode: multiply;
  background:     var(--tint-document);
}

.doc-hero__scrim {
  position:   absolute;
  inset:      0;
  background: var(--scrim-document);
}

.doc-hero__grain {
  position:         absolute;
  inset:            0;
  opacity:          0.28;
  mix-blend-mode:   overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.doc-hero__inner {
  position: relative;
  z-index:  5;
  width:    100%;
  color:    var(--color-cream);
}

.doc-hero__title {
  font-size:      var(--text-doc-title);
  line-height:    var(--leading-none);
  letter-spacing: -0.035em;
  color:          inherit;
  margin-bottom:  var(--space-4);
}

.doc-hero__meta {
  font-size:  0.92rem;
  color:      var(--color-cream-75);
}

/* --- Tekst met zijbalk --- */

.doc {
  padding: 90px 0 130px;
}

.doc__grid {
  display:                grid;
  grid-template-columns:  minmax(0, 1fr) 300px;
  gap:                    64px;
  align-items:            start;
}

.prose {
  max-width: 70ch;
}

/* Binnen .prose staat een regel voor alle alineas; die wint van een losse
   klasse. Daarom hier ook op .prose selecteren. */
.prose .prose__intro {
  font-size:      1.2rem;
  line-height:    var(--leading-page);
  color:          var(--color-ink);
  margin-bottom:  34px;
}

.prose h2 {
  font-family:    var(--font-display);
  font-weight:    var(--font-extrabold);
  font-size:      var(--text-doc-h2);
  line-height:    1.15;
  letter-spacing: var(--tracking-tight);
  color:          var(--color-ink);
  margin:         52px 0 var(--space-4);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  font-family:  var(--font-display);
  font-weight:  var(--font-extrabold);
  font-size:    1.12rem;
  color:        var(--color-ink);
  margin:       30px 0 10px;
}

.prose p {
  font-size:      1.06rem;
  line-height:    1.78;
  color:          var(--color-ink-soft);
  margin-bottom:  18px;
}

.prose ul {
  margin:     0 0 var(--space-5);
  padding:    0;
  list-style: none;
}

.prose ul li {
  position:       relative;
  padding-left:   26px;
  margin-bottom:  11px;
  font-size:      1.05rem;
  line-height:    var(--leading-feature);
  color:          var(--color-ink-soft);
}

.prose ul li::before {
  content:          "";
  position:         absolute;
  left:             2px;
  top:              0.72em;
  width:            8px;
  height:           8px;
  border-radius:    var(--radius-full);
  background-color: var(--color-clay);
}

.prose a {
  font-weight:    var(--font-bold);
  color:          var(--color-clay);
  border-bottom:  2px solid currentColor;
}

.prose a:hover {
  color:        var(--color-ink);
  border-color: var(--color-ink);
}

.prose hr {
  border:     none;
  border-top: 1px solid var(--color-ink-14);
  margin:     44px 0;
}

.prose table {
  width:            100%;
  border-collapse:  collapse;
  margin:           var(--space-2) 0 var(--space-6);
}

.prose td {
  padding:        var(--space-3) 0;
  border-bottom:  1px solid var(--color-ink-12);
  font-size:      1.02rem;
  color:          var(--color-ink-soft);
  vertical-align: top;
}

.prose td:first-child {
  width:        190px;
  font-weight:  var(--font-bold);
  color:        var(--color-ink);
}

/* --- Zijbalk --- */

.aside {
  position: sticky;
  top:      110px;
}

.box {
  padding:          28px 26px;
  margin-bottom:    18px;
  border-radius:    20px;
  background-color: var(--color-leaf);
  color:            var(--color-cream);
}

.box__title {
  font-family:    var(--font-display);
  font-weight:    var(--font-extrabold);
  font-size:      1.1rem;
  letter-spacing: var(--tracking-display);
  color:          inherit;
  margin-bottom:  var(--space-3);
}

.box p {
  font-size:      0.95rem;
  line-height:    var(--leading-page);
  color:          var(--color-cream-90);
  margin-bottom:  14px;
}

.box__link {
  display:        block;
  padding:        7px 0;
  font-size:      0.95rem;
  color:          var(--color-cream-85);
  border-bottom:  1px solid var(--color-cream-16);
}

.box__link:last-child {
  border-bottom: none;
}

.box__link:hover {
  color: var(--color-sun);
}

.box .btn {
  width:            100%;
  justify-content:  center;
  margin-top:       6px;
}

/* Lichte variant: alleen een randje op het papier */
.box--pale {
  background-color: transparent;
  border:           1px solid var(--color-ink-16);
  color:            var(--color-ink);
}

.box--pale .box__title {
  color: var(--color-ink);
}

.box--pale p {
  color: var(--color-ink-soft);
}

.box--pale .box__link {
  color:        var(--color-ink-soft);
  border-color: var(--color-ink-10);
}

.box--pale .box__link:hover {
  color: var(--color-clay);
}

@media (max-width: 960px) {

  .doc__grid {
    grid-template-columns:  1fr;
    gap:                    44px;
  }

  .aside {
    position: static;
  }
}

@media (prefers-reduced-motion: reduce) {

  .doc-hero__image {
    transform: none !important;
  }
}

/* Naam en e-mail, alleen zichtbaar bij een maandelijkse donatie */
.donor {
  margin-bottom: 22px;
}

.donor__uitleg {
  margin-top: -6px;
  font-size:  0.86rem;
  color:      var(--color-ink-soft);
}

.module__main .form-notice {
  margin-top: var(--space-4);
}