/* ---------------------------------------------------------------
   de ruigte - ruwe schets
   Palet en typografie komen uit de foto's: winterriet, veenzwart,
   korstmosgroen. Display = Bricolage Grotesque (onaf, wat scheef),
   lopende tekst = Newsreader (traag, leesbaar, warm).
----------------------------------------------------------------- */

:root {
  --ink: #1e1c17;
  --ink-soft: #4a463c;
  --paper: #e8e5d9;
  --paper-2: #dbd7c6;
  --moss: #4b5a3c;
  --ochre: #a8702a;
  --sky: #7c8a93;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --rule: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(1.03rem, 0.98rem + 0.25vw, 1.18rem);
  line-height: 1.62;
  font-optical-sizing: auto;
}

h1, h2, h3, .display, .label, nav a, .btn {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-optical-sizing: auto;
}

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; max-width: var(--measure); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--ochre); }
:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }
img { max-width: 100%; display: block; }

.wrap { max-width: 74rem; margin-inline: auto; padding-inline: var(--gutter); }

.label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--moss);
  margin: 0 0 1.1rem;
}

/* ---------- kop ---------- */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
  flex-wrap: wrap;
}

.lockup { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.lockup img { width: 2.1rem; height: 2.1rem; }
.lockup span {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 1.32rem;
  letter-spacing: -0.035em;
}

.site-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; font-size: 0.9rem; font-weight: 500; }
.site-nav a { text-decoration: none; }
.site-nav a:hover,
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--ochre); }

/* De knop staat er alleen als menu.js gedraaid heeft; zonder JS blijft het
   hoofdmenu gewoon staan en wrapt het naar een tweede regel. */
.menu-knop {
  display: none;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 0;
  padding: 0.3rem 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
}
.menu-knop i {
  display: block;
  width: 1.25rem;
  height: 1px;
  background: var(--ink);
  box-shadow: 0 5px 0 var(--ink), 0 -5px 0 var(--ink);
}
.menu-knop[aria-expanded="true"] i { box-shadow: 0 5px 0 var(--ochre), 0 -5px 0 var(--ochre); }

@media (max-width: 46rem) {
  .menu-js .menu-knop { display: inline-flex; }
  .menu-js .site-nav { display: none; }
  .menu-js .menu-knop[aria-expanded="true"] + .site-nav {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    gap: 0.9rem;
    padding-top: 0.4rem;
  }
}

/* Submenu: de ankers binnen de pagina, op een eigen regel onder de kop. */
.page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  padding-bottom: 1rem;
  border-bottom: var(--rule);
}
.page-nav a { text-decoration: none; color: var(--ink-soft); }
.page-nav a:hover { text-decoration: underline; text-decoration-color: var(--ochre); }

/* ---------- hero ---------- */

.hero { padding-block: clamp(2rem, 6vw, 4.5rem) 0; }

.hero h1 {
  font-size: clamp(3.4rem, 15vw, 9.5rem);
  letter-spacing: -0.045em;
  line-height: 0.86;
  font-weight: 800;
}
.hero .lede {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  /* Onder 33.6rem valt de lede op de home naar vijf regels, boven 44.5rem
     naar drie. 38rem zit ruim in het midden, dus een andere letterweergave
     of een woord meer kantelt hem niet meteen. */
  max-width: 38rem;
  margin-top: 1.4rem;
  color: var(--ink-soft);
}

.hero-figure { margin-top: clamp(1.5rem, 4vw, 2.5rem); position: relative; }
.hero-figure img {
  width: 100%;
  height: clamp(14rem, 42vh, 26rem);
  object-fit: cover;
  filter: saturate(0.72) contrast(1.05);
  mix-blend-mode: multiply;
}
.hero-figure figcaption { font-size: 0.78rem; color: var(--sky); padding-top: 0.5rem; }

/* ---------- rietrand: de terugkerende scheidingslijn ---------- */

.stems { opacity: 0.5; height: 3.4rem; margin-block: clamp(2.5rem, 7vw, 4.5rem); }
.stems img { width: 100%; height: 100%; }

/* ---------- secties ---------- */

section { padding-block: clamp(1rem, 3vw, 2rem); }

.two-col { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) {
  .two-col { grid-template-columns: 15rem minmax(0, 1fr); }
}

h2 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); margin-bottom: 1rem; }

.reasons {
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.6rem);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin-top: 2rem;
}
.reasons h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.reasons p { font-size: 0.98rem; color: var(--ink-soft); }

/* ---------- agenda ---------- */

.agenda { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }

.agenda li {
  display: grid;
  gap: 0.25rem 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  padding-block: 1.15rem;
  border-bottom: var(--rule);
  align-items: baseline;
}
@media (min-width: 44rem) {
  .agenda li { grid-template-columns: 9.5rem minmax(0, 1fr) auto; }
}

.agenda .when {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.agenda .what { font-size: 1rem; }
.agenda .where { font-size: 0.85rem; color: var(--sky); }
.agenda .note { font-size: 0.85rem; color: var(--ochre); }
.agenda .next {
  color: var(--ochre);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.agenda-empty { color: var(--sky); padding-block: 1.5rem; }

/* ---------- praktisch ---------- */

.facts { margin: 0; display: grid; gap: 0 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) {
  .facts { grid-template-columns: 8.5rem minmax(0, 1fr); }
}
.facts dt {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moss);
  padding-top: 0.85rem;
}
.facts dd { margin: 0; padding-block: 0 0.85rem; border-bottom: var(--rule); }
@media (min-width: 40rem) {
  .facts dd { padding-top: 0.85rem; }
  .facts dt { border-bottom: var(--rule); padding-bottom: 0.85rem; }
}

/* ---------- plaat: een beeld dat volledig in beeld blijft ---------- */

.plate { margin: clamp(2rem, 5vw, 3rem) 0 0; }
.plate img {
  width: 100%;
  filter: saturate(0.72) contrast(1.05);
  mix-blend-mode: multiply;
}
.plate figcaption { font-size: 0.78rem; color: var(--sky); padding-top: 0.6rem; }

/* ---------- genummerde stappen ---------- */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: stap; border-top: var(--rule); }
.steps li {
  counter-increment: stap;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0 1rem;
  padding-block: 1.4rem;
  border-bottom: var(--rule);
}
.steps li::before {
  content: counter(stap);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ochre);
  line-height: 1.2;
}
.steps h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.3rem; }
.steps p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }

/* ---------- thema's per jaargang ---------- */

.themas {
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.6rem);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-top: 2rem;
}
.themas h3 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--moss);
  padding-bottom: 0.7rem;
  border-bottom: var(--rule);
}
.themas ul { list-style: none; margin: 0; padding: 0; }
.themas li {
  padding-block: 0.55rem;
  border-bottom: var(--rule);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ---------- panel op donkere grond ---------- */

.panel {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(1.75rem, 5vw, 3.25rem);
  margin-block: clamp(2rem, 6vw, 3.5rem);
}
.panel .label { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.panel a { color: var(--paper); }

.btn {
  display: inline-block;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.7rem 1.4rem;
  background: var(--ochre);
  color: var(--paper);
  text-decoration: none;
  border: 0;
}
.btn:hover { background: var(--paper); color: var(--ink); }

/* ---------- begeleiders ---------- */

.people { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.people h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.35rem; }
.people p { font-size: 0.95rem; color: var(--ink-soft); }

.sketch { width: min(20rem, 60%); opacity: 0.32; mix-blend-mode: multiply; margin-inline: auto; }

/* ---------- voet ---------- */

.site-foot {
  border-top: var(--rule);
  margin-top: clamp(3rem, 8vw, 5rem);
  padding-block: 2rem 3rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .lede { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  .hero .lede { animation-delay: 0.09s; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(0.6rem); }
    to { opacity: 1; transform: none; }
  }
}

/* ---------- wettelijke vermeldingen in de voet ---------- */

.site-foot { align-items: flex-start; }
.site-foot .legal { font-style: normal; max-width: 34rem; }
.site-foot .legal span { white-space: nowrap; }

/* ---------- inschrijfformulier ---------- */

.form { display: grid; gap: 1.15rem; max-width: 32rem; margin-top: 1.8rem; }
.form > p { margin: 0; max-width: none; }

.form label {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 65%, transparent);
  margin-bottom: 0.4rem;
}

.form input,
.form select,
.form textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--paper);
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 35%, transparent);
  border-radius: 0;
  padding: 0.5rem 0;
  appearance: none;
}
.form select { background-image: none; }
.form select option { color: var(--ink); background: var(--paper); }
.form textarea { resize: vertical; min-height: 4.5rem; }

.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
  outline: 0;
  border-bottom-color: var(--ochre);
  border-bottom-width: 2px;
}

.form .fine { font-size: 0.82rem; color: color-mix(in srgb, var(--paper) 62%, transparent); }
.form .fine a { color: inherit; }

/* honeypot: alleen voor bots, uit beeld en uit de tabvolgorde */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- eenvoudige tekstpagina (bedankt, privacy) ---------- */

.prose { max-width: 38rem; padding-block: clamp(1rem, 4vw, 3rem); }
.prose h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); margin-top: 2.4rem; margin-bottom: 0.7rem; }
.prose p, .prose li { max-width: none; }
.prose ul { padding-left: 1.1rem; }
.prose li { margin-bottom: 0.4rem; }

/* ---------- aanbod op de homepage ---------- */

.offer { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
.offer li { padding-block: 1.6rem; border-bottom: var(--rule); }
.offer h3 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); margin-bottom: 0.6rem; }
.offer h3 a { text-decoration: none; }
.offer h3 a:hover { text-decoration: underline; text-decoration-color: var(--ochre); }
.offer p { color: var(--ink-soft); }
.offer .offer-meta {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--moss);
  margin-bottom: 0;
}