:root {
  --paper: #fbf6ec;
  --ink: #22201c;
  --ink-soft: #5b564c;
  --accent: #c4562e;
  --tile-radius: 6px;

  /* Overheersende kleur van elke tegel-illustratie, gebruikt voor de hero-
     band en de aanbod-tegels op de bijbehorende content-pagina. */
  --tile-schrijven: #e39cb6;
  --tile-kinderen: #f5c518;
  --tile-organisaties: #3f47b0;
  --tile-vakgenoten: #1e7a46;
  --tile-overmij: #8c82d6;
  --hover-donkergrijs: #46433d;
}

/* Duidelijk zichtbare duur voor de View Transition (homepage-tegel die
   uitgroeit tot de hero-band op de content-pagina) — de standaardduur van
   de browser is kort (~250ms) en oogt dan eerder als een flits dan een
   vloeiende overgang. */
::view-transition-group(*) {
  animation-duration: 500ms;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Public Sans', -apple-system, sans-serif;
}

a {
  color: inherit;
}

/* ---------- Header, doorlopend op elke pagina ---------- */

header.site-top {
  padding: 22px 32px;
  border-bottom: 2px solid var(--ink);
  view-transition-name: site-header;
}

.header-row {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* "Sonja van der Arend" is geen link meer — de "Over mij"-knop hiernaast
   neemt die rol over — en blijft daarom overal gewoon zwart. */
.site-name {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: 'WONK' 1, 'SOFT' 0;
  font-size: 1.75rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.header-back,
.header-overmij,
.nav-cta {
  flex-shrink: 0;
  display: inline-block;
  padding: 12px 22px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform 0.2s ease, background 0.2s ease;
}

/* Alle drie de knoppen (Terug naar homepage, Over mij, Aanmelden & Contact)
   volgen dezelfde, per-pagina kleur bij hover. Standaard (over-mij,
   contact, schrijven, organisaties): lila. Homepage, kinderen-pagina en
   vakgenoten-pagina krijgen hieronder hun eigen kleur. */
.header-back:hover,
.header-overmij:hover,
.nav-cta:hover {
  background: var(--tile-overmij);
  transform: translateY(-2px);
}

body.home-body .header-overmij:hover,
body.home-body .nav-cta:hover {
  background: var(--hover-donkergrijs);
}

body.page-kinderen .header-back:hover,
body.page-kinderen .header-overmij:hover,
body.page-kinderen .nav-cta:hover {
  background: var(--tile-kinderen);
}

body.page-vakgenoten .header-back:hover,
body.page-vakgenoten .header-overmij:hover,
body.page-vakgenoten .nav-cta:hover {
  background: var(--tile-vakgenoten);
}

/* Op mobiel: de naam altijd bovenaan, alle knoppen (Terug naar homepage,
   Over mij, Aanmelden & Contact) daaronder op hun eigen regel(s). */
@media (max-width: 720px) {
  .header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }

  .header-left,
  .header-right {
    display: contents;
  }

  .site-name {
    order: 1;
    flex-basis: 100%;
  }

  .header-back {
    order: 2;
  }

  .header-overmij {
    order: 3;
  }

  .nav-cta {
    order: 4;
  }
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 32px 96px;
}

/* ---------- Homepage: tegels + gekoppelde "Binnenkort"-kaartjes ---------- */

body.home-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

main.home-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  padding: 48px 32px;
}

.home-main .placeholder-note {
  flex: 0 0 auto;
  width: 100%;
  max-width: 700px;
  margin-top: 16px;
}

/* De vier doelgroeptegels vormen samen een eigen, strak 2x2-rooster (één
   herkenbaar groot vierkant, het hart van de homepage). De "Binnenkort"-
   kaartjes hangen daar als losse satellieten omheen: position:absolute,
   dus ze hebben geen invloed op de afmetingen van het rooster zelf — de
   tegels blijven daardoor altijd gelijk en dicht bij elkaar staan, ongeacht
   hoeveel kaartjes er bij een doelgroep horen. */
.home-tiles-wrap {
  position: relative;
  width: 100%;
  max-width: 720px;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

.tile-cell {
  position: relative;
}

/* Positioneringsvak voor de kaartjes van één tegel: position:absolute (dus
   geen invloed op de hoogte van het tegel-rooster), als geheel verticaal
   gecentreerd naast de tegel. Kaartjes tonen nu alleen de eerste zin (zie
   build.js), dus blijven kort genoeg om ook met twee stuks netjes binnen
   de hoogte van de tegel te passen. */
.tile-satellites {
  position: absolute;
  top: calc(50% + 26px);
  transform: translateY(-50%);
  width: 230px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tile-satellites--right {
  left: 100%;
}

.tile-satellites--left {
  right: 100%;
}

.tile-satellite {
  display: flex;
  align-items: center;
}

.tile-satellites--left .tile-satellite {
  flex-direction: row-reverse;
}

/* De lijn begint en eindigt exact op de rand van de tegel en het kaartje
   (viewBox-eenheden komen 1-op-1 overeen met px, dankzij de vaste breedte/
   hoogte hieronder, en het vak zelf sluit al direct aan). Eén organische,
   licht onregelmatige welving (geen symmetrische sinusgolf), geen
   pijlpunt. */
.tile-connector {
  flex: 0 0 auto;
  width: 60px;
  height: 26px;
  overflow: visible;
}

.tile-connector path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linecap: round;
}

.binnenkort-card {
  display: block;
  flex: 0 0 170px;
  width: 170px;
  border-radius: var(--tile-radius);
  padding: 12px 14px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
  text-decoration: none;
  transform: rotate(-0.8deg);
  transition: transform 0.2s ease;
}

.tile-satellite:nth-child(2) .binnenkort-card {
  transform: rotate(0.8deg);
}

.tile-satellite .binnenkort-card:hover {
  transform: rotate(0deg);
}

.binnenkort-card .binnenkort-label {
  margin: 0 0 8px;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.binnenkort-card .binnenkort-datum {
  white-space: nowrap;
}

.binnenkort-card h3 {
  margin: 0 0 6px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 0.9rem;
  line-height: 1.25;
}

.binnenkort-card p {
  margin: 0 0 6px;
  font-size: 0.74rem;
  line-height: 1.45;
}

.binnenkort-card p:last-child {
  margin-bottom: 0;
}

.binnenkort-card .binnenkort-cta {
  display: inline-block;
  margin-top: 2px;
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}

@media (max-width: 900px) {
  body.home-body {
    display: block;
    min-height: 0;
  }

  main.home-main {
    display: block;
    padding: 56px 32px 96px;
  }

  .home-tiles-wrap {
    max-width: 480px;
  }

  .tile-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .tile-cell {
    margin-bottom: 8px;
  }

  .tile-satellites {
    position: static;
    top: auto;
    transform: none;
    width: auto;
    gap: 12px;
    margin-top: 16px;
  }

  .tile-satellite {
    flex-direction: column;
    align-items: stretch;
  }

  .tile-connector {
    display: none;
  }

  .binnenkort-card {
    width: auto;
    flex: 1 1 auto;
  }

  .site-name {
    font-size: clamp(1.3rem, 8vw, 1.9rem);
    white-space: nowrap;
  }
}

.tile {
  position: relative;
  display: block;
  text-decoration: none;
  color: white;
  border-radius: var(--tile-radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  isolation: isolate;
  transform: rotate(0deg);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}

.tile:hover {
  transform: translateY(-6px) rotate(-0.6deg);
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.18);
}

.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.tile:hover img {
  transform: scale(1.06);
}

.tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0) 55%);
  z-index: 1;
}

.tile-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 20px 22px 18px;
}

.tile-label .pijler {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: 'WONK' 1, 'SOFT' 0;
  font-size: clamp(0.95rem, 2.6vh, 1.45rem);
  font-weight: 750;
  line-height: 1.15;
}

.tile-label .sub {
  display: block;
  margin-top: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(0.6rem, 1vh, 0.78rem);
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.85);
}

/* Naamgeving voor de View Transition: dezelfde naam op de homepage-tegel
   en op de hero van de bijbehorende doelgroep-pagina laat de browser
   (in ondersteunende browsers, zie de meta-tag in <head>) de tegel
   soepel laten uitgroeien tot de hero, in plaats van een harde paginawissel. */
.tile--schrijven {
  view-transition-name: hero-schrijven;
}

.tile--schrijven img {
  view-transition-name: hero-img-schrijven;
}

.tile--kinderen {
  view-transition-name: hero-kinderen;
}

.tile--kinderen img {
  view-transition-name: hero-img-kinderen;
}

.tile--organisaties {
  view-transition-name: hero-organisaties;
}

.tile--organisaties img {
  view-transition-name: hero-img-organisaties;
}

.tile--vakgenoten {
  view-transition-name: hero-vakgenoten;
}

.tile--vakgenoten img {
  view-transition-name: hero-img-vakgenoten;
}

.placeholder-note {
  margin-top: 40px;
  padding: 16px 20px;
  border: 1px dashed var(--ink-soft);
  border-radius: var(--tile-radius);
  font-family: 'Public Sans', sans-serif;
  font-size: 0.92rem;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.5;
}

/* ---------- Doelgroep-hero: de tegel, uitvergroot ----------
   De vaste ruggengraat (typografie/layout) blijft gelijk, maar iedere
   pijler laat zijn eigen tegelkleur zien (conceptdocument §5.1). Klik je
   op een homepage-tegel, dan groeit die (in ondersteunende browsers) uit
   tot deze hero-band, met de illustratie die naar links-midden verschuift. */

.tile-hero {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 125px);
}

.tile-hero-inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 32px;
  display: flex;
  align-items: center;
  gap: 48px;
}

.tile-hero-image {
  flex: 0 0 auto;
  width: min(38%, 420px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--tile-radius);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
}

.tile-hero-text {
  flex: 1 1 auto;
}

.tile-hero-text .pijler {
  display: block;
  margin: 0 0 10px;
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: 'WONK' 1, 'SOFT' 0;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.tile-hero-text .sub {
  display: block;
  margin-bottom: 20px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.9rem;
  opacity: 0.8;
}

.tile-hero-text .sub:not(:last-child) {
  margin-bottom: 4px;
}

.tile-hero-text .lead {
  max-width: 480px;
  font-size: 1.1rem;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .tile-hero {
    min-height: auto;
  }

  .tile-hero-inner {
    flex-direction: column;
    text-align: center;
    padding: 64px 24px;
  }

  .tile-hero-image {
    width: min(70%, 320px);
  }

  .tile-hero-text .lead {
    max-width: none;
  }
}

.tile-hero--schrijven {
  background: var(--tile-schrijven);
  color: var(--ink);
  view-transition-name: hero-schrijven;
}

.tile-hero--schrijven .tile-hero-image {
  view-transition-name: hero-img-schrijven;
}

.tile-hero--kinderen {
  background: var(--tile-kinderen);
  color: var(--ink);
  view-transition-name: hero-kinderen;
}

.tile-hero--kinderen .tile-hero-image {
  view-transition-name: hero-img-kinderen;
}

.tile-hero--organisaties {
  background: var(--tile-organisaties);
  color: #fff;
  view-transition-name: hero-organisaties;
}

.tile-hero--organisaties .tile-hero-image {
  view-transition-name: hero-img-organisaties;
}

.tile-hero--vakgenoten {
  background: var(--tile-vakgenoten);
  color: #fff;
  view-transition-name: hero-vakgenoten;
}

.tile-hero--vakgenoten .tile-hero-image {
  view-transition-name: hero-img-vakgenoten;
}

.tile-hero--overmij {
  background: var(--tile-overmij);
  color: #fff;
  min-height: 0;
}

.tile-hero--overmij .tile-hero-image {
  width: min(420px, 42%);
}

/* Compacte variant: plaatje links, titel + aanbod ernaast in dezelfde
   kolom — allemaal binnen dezelfde gekleurde band, zodat je meteen
   zowel de tegel-identiteit als het aanbod ziet, hoger in beeld en
   zonder te scrollen. */
.tile-hero.tile-hero--compact {
  min-height: 0;
}

.tile-hero--compact .tile-hero-inner {
  align-items: flex-start;
  padding: 32px 32px 40px;
}

/* Vakgenoten heeft van de doelgroep-pagina's de minste kaartjes, waardoor
   de groene band anders veel korter zou zijn dan bij de andere pagina's —
   hij krijgt daarom zelf extra minimumhoogte, zodat het groen net zo ver
   doorloopt. De inhoud blijft daarbij bovenaan staan (niet verticaal
   gecentreerd in die extra hoogte). */
.tile-hero--vakgenoten.tile-hero--compact {
  min-height: calc(100vh - 125px);
  align-items: flex-start;
}

.tile-hero-media {
  flex: 0 0 auto;
  width: min(340px, 36%);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tile-hero-media .tile-hero-image {
  width: 100%;
}

.tile-hero-media .pijler {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: 'WONK' 1, 'SOFT' 0;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.tile-hero-media .sub {
  display: block;
  margin: 0;
  font-family: 'Public Sans', -apple-system, sans-serif;
  font-size: 0.95rem;
  opacity: 0.85;
}

.tile-hero-media .sub-quote {
  font-family: 'Public Sans', -apple-system, sans-serif;
  font-size: 0.95rem;
  opacity: 0.85;
}

.tile-hero-media .lead {
  font-size: 1rem;
  line-height: 1.5;
}

/* Tegel-kaartjes die binnen een hero-band liggen, staan op wit/beige
   in plaats van in dezelfde kleur als de band eromheen — anders
   verdwijnen ze erin. */
.tile-hero .offer-grid {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.tile-hero .offer-grid .offer-card {
  background: var(--paper);
  color: var(--ink);
}

@media (max-width: 720px) {
  .tile-hero--compact .tile-hero-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .tile-hero-media {
    width: 100%;
    max-width: 320px;
    align-items: center;
  }

  /* De titel/plaatje/ondertitel bovenaan blijven gecentreerd, maar de
     tekst in de kaartjes zelf leest prettiger links uitgelijnd. */
  .offer-grid,
  .offer-card {
    text-align: left;
  }
}

/* ---------- Aanbod-tegels: dezelfde grid-taal als de homepage, met
   tekst op een gekleurde achtergrond en de beige pagina-achtergrond
   ertussen ---------- */

.offer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 40px 0;
}

@media (max-width: 720px) {
  .offer-grid {
    grid-template-columns: 1fr;
  }
}

.offer-card {
  padding: 22px 20px;
  border-radius: var(--tile-radius);
  font-size: 0.9rem;
  line-height: 1.5;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
  transform: rotate(-0.8deg);
  transition: transform 0.2s ease;
}

.offer-grid .offer-card:nth-child(even) {
  transform: rotate(0.8deg);
}

.offer-card:hover {
  transform: rotate(0deg);
}

.offer-grid .offer-card--wide {
  transform: rotate(-0.4deg);
}

.offer-card--wide {
  grid-column: 1 / -1;
}

.offer-card-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.offer-card h3 {
  margin: 0 0 8px;
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: 'WONK' 1, 'SOFT' 0;
  font-size: 1.1rem;
  font-weight: 750;
}

.offer-card p {
  margin: 0 0 12px;
}

.offer-card p:last-child {
  margin-bottom: 0;
}

.offer-card a {
  font-weight: 600;
}

.card-cta-right {
  display: flex;
  flex-direction: column;
}

.card-cta-right .btn-dark {
  align-self: flex-end;
}

.btn-dark {
  display: inline-block;
  margin-top: 4px;
  padding: 10px 20px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 999px;
  transition: transform 0.2s ease, background 0.2s ease;
}

.btn-dark:hover {
  background: var(--accent);
  transform: translateY(-2px);
}

.offer-card blockquote {
  margin: 0;
  font-style: italic;
}

.offer-card cite {
  display: block;
  margin-top: 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  font-style: normal;
  opacity: 0.8;
}

.offer-grid--schrijven .offer-card {
  background: var(--tile-schrijven);
  color: var(--ink);
}

.offer-grid--kinderen .offer-card {
  background: var(--tile-kinderen);
  color: var(--ink);
}

.offer-grid--organisaties .offer-card {
  background: var(--tile-organisaties);
  color: #fff;
}

.offer-grid--vakgenoten .offer-card {
  background: var(--tile-vakgenoten);
  color: #fff;
}

/* ---------- Content-pagina's (tegel-pagina's, Over Sonja, Contact) ---------- */

.section-heading {
  margin: 40px 0 4px;
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: 'WONK' 1, 'SOFT' 0;
  font-size: 1.5rem;
  font-weight: 750;
}

.section-note {
  margin: 0 0 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* ---------- Contactformulier ---------- */

.contact-form {
  margin-top: 24px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-form label {
  display: block;
  margin-bottom: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Public Sans', sans-serif;
  font-size: 1rem;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.contact-submit {
  align-self: flex-start;
  padding: 12px 26px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Public Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.contact-submit:hover {
  background: var(--accent);
  transform: translateY(-2px);
}

.contact-note {
  padding: 12px 16px;
  border-radius: var(--tile-radius);
  font-size: 0.92rem;
}

.contact-note.success {
  background: rgba(30, 122, 70, 0.12);
  color: #1e5c37;
}

.contact-note.error {
  background: rgba(196, 86, 46, 0.12);
  color: #8a341b;
}

.contact-note[hidden] {
  display: none;
}

/* ---------- Stubpagina's (nog niet ingevulde onderdelen) ---------- */

.page-intro {
  max-width: 640px;
}

.back-link {
  display: inline-block;
  margin-bottom: 28px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--ink-soft);
}

.back-link:hover {
  color: var(--accent);
}

.page-title {
  margin: 0 0 8px;
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: 'WONK' 1, 'SOFT' 0;
  font-size: 1.5rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.page-sub {
  margin: 0 0 32px;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.in-progress-badge {
  display: inline-block;
  margin-bottom: 24px;
  padding: 6px 14px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.page-body p {
  line-height: 1.6;
  font-size: 1.05rem;
}

.page-body ul {
  margin: 16px 0;
  padding-left: 20px;
}

.page-body li {
  line-height: 1.6;
  font-size: 1.05rem;
  margin-bottom: 10px;
}

.page-body li:last-child {
  margin-bottom: 0;
}

/* ---------- Footer, doorlopend op elke pagina ---------- */

footer.site-bottom {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 32px 56px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.6;
  view-transition-name: site-footer;
}

footer.site-bottom p {
  margin: 0;
}

.footer-links {
  display: flex;
  gap: 16px;
}

footer.site-bottom a {
  color: var(--ink-soft);
  text-decoration: underline;
}

footer.site-bottom a:hover {
  color: var(--accent);
}

/* ---------- Login &amp; beheer ---------- */

.auth-main {
  max-width: 480px;
  margin: 0 auto;
  padding: 56px 32px 96px;
}

.auth-panel h2 {
  margin: 0 0 8px;
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: 'WONK' 1, 'SOFT' 0;
  font-size: 2rem;
  font-weight: 750;
}

.auth-panel p {
  margin: 0 0 24px;
  color: var(--ink-soft);
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  margin-bottom: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Public Sans', sans-serif;
  font-size: 1rem;
}

.field input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.btn {
  display: inline-block;
  padding: 12px 26px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Public Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn:hover {
  background: var(--accent);
  transform: translateY(-2px);
}

.btn.secondary {
  background: var(--ink-soft);
}

.btn.danger {
  padding: 8px 16px;
  font-size: 0.85rem;
  background: #8a341b;
}

.btn.danger:hover {
  background: #a83c28;
}

.message {
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: var(--tile-radius);
  font-size: 0.9rem;
}

.message.error {
  background: rgba(196, 86, 46, 0.12);
  color: #8a341b;
}

.message.success {
  background: rgba(30, 122, 70, 0.12);
  color: #1e5c37;
}

.message[hidden] {
  display: none;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.admin-header h2 {
  margin: 0;
}

.contact-manage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(34, 32, 28, 0.15);
}

.contact-manage-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(34, 32, 28, 0.15);
}

.contact-manage-title {
  display: block;
  font-weight: 700;
}

.contact-manage-meta {
  display: block;
  margin: 2px 0 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.contact-manage-text {
  display: block;
  font-size: 0.95rem;
  line-height: 1.5;
}

.empty-note {
  color: var(--ink-soft);
  font-style: italic;
}