/* ==========================================================================
   Studio Filmkids — gedeelde ontwerplaag (sfk-*)
   Menubalk, paginakop, voetregel en de accentletter. Geldt op alle pagina's.

   Aanleiding 2026-09-19: Tes wil de kop en menubalk in de opzet van
   northboundfoundation.com — één doorlopend kleurvlak waar de balk in opgaat,
   een groot koptekstblok met af en toe een woord in een schrijfletter
   (Caveat Brush), en het beeld als schuin blok met een patroon erachter.

   Kleuren zijn haar eigen merkkleuren, geoogst uit de bestaande site:
   lila #AA8CC0 (menubalk + voetregel), crème #EBE4D9, paars #5C3F92.
   Contrastverhoudingen staan als commentaar bij elk paar (WCAG AA = 4.5:1
   voor gewone tekst, 3:1 voor grote tekst en vormen).

   LET OP — crème en wit halen het NIET op lila (2.30:1 en 2.91:1). Op elk
   lila vlak is de tekst daarom donker. Dat is de reden dat de koptekst hier
   diep paars is en niet wit zoals op de voorbeeldsite (die heeft een donkere
   ondergrond).
   ========================================================================== */

:root {
  /* Gronden */
  --sfk-lila:       #AA8CC0;  /* menubalk + paginakop */
  --sfk-lila-diep:  #8E6EA8;  /* rand/scheiding op lila */
  --sfk-paper:      #FBF6EE;  /* warm papier, lichte secties */
  --sfk-paper-lila: #F2ECF7;  /* zacht lila papier, tweede lichte grond */
  --sfk-diep:       #2E2050;  /* diep paars, donkere secties + voet */
  --sfk-inkt:       #241A40;  /* bijna-zwart paars, tekst op licht */

  /* Merk- en accentkleuren */
  --sfk-room:       #EBE4D9;
  --sfk-knop: #FFFFFF;      /* knopvlak: wit, niet beige (keuze Tes 2026-09-23) */
  --sfk-paars:      #5C3F92;
  --sfk-paars-diep: #4A3277;
  /* --sfk-teal is HAAR turquoise en hoort op knoppen, pillen en vlakken te
     staan, met donkere tekst erop (6.02:1). Nooit vervangen door een
     verdiepte variant om witte tekst leesbaar te maken: dan verwater je de
     merkkleur. --sfk-teal-diep is er alleen voor dunne lijnen op een lichte
     grond, waar #00B295 met 2.2-2.5:1 wegvalt. */
  --sfk-teal:       #00B295;
  --sfk-teal-diep:  #007D69;
  /* Letterkleuren op een beige knop: haar turquoise en koraal halen als
     letter maar 2.1:1 en 2.3:1 op beige. Verdiept tot 5.2:1 en 4.5:1. */
  --sfk-teal-tekst:   #00695C;
  --sfk-koraal-tekst: #B33F22;
  /* Haar eigen oranje, letterlijk uit de opmaak van de Filmkits
     (#EA7A4E, 14 keer gebruikt in het kitbestand). Hier stond een
     lichtere afgeleide #F4A158; Tes 2026-09-23: "graag wel echt mijn
     oranje kleur, niet een tint". */
  --sfk-oranje:     #EA7A4E;
  --sfk-koraal:     #EE7252;

  /* Letters */
  --sfk-kop:    "Londrina Solid", sans-serif;
  --sfk-tekst:  "Quattrocento Sans", sans-serif;
  --sfk-schrijf:"Caveat Brush", "Comic Sans MS", cursive;

  --sfk-balk:   96px;   /* hoogte menubalk op desktop */
  --sfk-balk-s: 72px;   /* hoogte menubalk op smal */
  --sfk-breed:  1200px;
}

/* ==========================================================================
   1. Menubalk
   Diep paars met lichte letters (wens Tes 2026-09-21). Eerst was de balk
   lila en liep hij naadloos over in de kop; nu zet hij zich er juist tegen
   af. Crème op diep paars = 11.56:1, ruim binnen de norm.
   ========================================================================== */

.sfk-nav {
  background: var(--sfk-diep);
  font-family: var(--sfk-tekst);
  position: relative;
  z-index: 60;
}

.sfk-nav__inner {
  max-width: var(--sfk-breed);
  margin: 0 auto;
  padding: 0 var(--sfk-kant);
  height: var(--sfk-balk);
  display: flex;
  align-items: center;
  gap: 24px;
}

.sfk-nav__logo {
  display: block;
  flex: none;
  line-height: 0;
}

.sfk-nav__logo img {
  height: 64px;
  width: auto;
  display: block;
}

.sfk-nav__menu {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
}

/* crème op diep paars = 11.56:1 — AA */
.sfk-nav__link {
  font-size: 1.02rem;
  color: var(--sfk-room);
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: border-color .15s ease;
}

.sfk-nav__link:hover,
.sfk-nav__link:focus-visible { border-bottom-color: var(--sfk-room); }

.sfk-nav__link[aria-current="page"] {
  border-bottom-color: var(--sfk-room);
  font-weight: 700;
}

/* Beige knop op de donkere balk: 11.56:1 verschil met de grond, dus de
   knopvorm springt er goed uit. Diep paars op beige = 8.3:1. */
.sfk-nav__cta {
  font-family: var(--sfk-kop);
  font-size: 1.15rem;
  line-height: 1;
  background: var(--sfk-knop);
  color: var(--sfk-paars-diep);   /* op wit = 9,9:1 — AA */
  text-decoration: none;
  padding: 13px 22px 10px;
  border-radius: 14px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(36, 26, 64, .26);
  transition: transform .15s ease, background .15s ease;
}

.sfk-nav__cta:hover { background: #F4F0FB; transform: translateY(-2px); }

/* Dun filmklapperrandje onder de balk (wens Tes 2026-09-21). Zelfde motief
   als de rand boven de voetregel, maar veel smaller: het is hier een accent,
   geen scheiding. */
.sfk-nav__strip {
  height: 9px;
  background: repeating-linear-gradient(-55deg, #131313 0 8px, #F6F1E7 8px 16px);
  border-bottom: 2px solid #131313;
  position: relative;
  z-index: 59;
}

.sfk-nav__socials { display: flex; align-items: center; gap: 10px; }

.sfk-nav__socials a {
  color: var(--sfk-room);
  width: 26px;
  height: 26px;
  display: block;
  transition: opacity .15s ease;
}

.sfk-nav__socials a:hover { opacity: .65; }
.sfk-nav__socials svg { width: 100%; height: 100%; display: block; }

/* --- Hamburger (alleen smal) --------------------------------------------- */
.sfk-nav__toggle {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 2px solid var(--sfk-room);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.sfk-nav__toggle span {
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--sfk-room);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

.sfk-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.sfk-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sfk-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 991px) {
  .sfk-nav__inner { height: var(--sfk-balk-s); }
  .sfk-nav__logo img { height: 48px; }
  .sfk-nav__toggle { display: flex; }

  .sfk-nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--sfk-diep);
    border-top: 2px solid var(--sfk-paars-diep);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px clamp(16px, 4vw, 40px) 24px;
    margin: 0;
    display: none;
    box-shadow: 0 18px 30px rgba(36, 26, 64, .22);
  }

  .sfk-nav__menu[data-open="true"] { display: flex; }

  .sfk-nav__link {
    font-size: 1.15rem;
    padding: 14px 0;
    border-bottom: 1px solid rgba(235, 228, 217, .22);
  }

  .sfk-nav__link[aria-current="page"] { border-bottom-color: rgba(235, 228, 217, .22); }
  .sfk-nav__socials { padding: 18px 0 4px; }
  .sfk-nav__cta { margin-top: 6px; text-align: center; }
}

/* ==========================================================================
   2. Paginakop
   Opzet van northboundfoundation.com/field-notes: schrijfletter-opstapje,
   grote kop, inleiding, knoppen — en rechts het beeld als schuin blok met
   een patroon erachter. Loopt door in de kleur van de menubalk.
   ========================================================================== */

.sfk-kop {
  background: var(--sfk-lila);
  color: var(--sfk-inkt);
  font-family: var(--sfk-tekst);
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 5vw, 64px) 0 clamp(20px, 2.5vw, 34px);
}

.sfk-kop__inner {
  max-width: var(--sfk-breed);
  margin: 0 auto;
  padding: 0 var(--sfk-kant);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.sfk-kop--smal .sfk-kop__inner { grid-template-columns: minmax(0, 1fr); max-width: 900px; }

/* Schrijfletter. Diep paars op lila = 3.59:1 — haalt AA voor grote tekst
   (deze staat op 2rem en hoger, dus ruim boven de 24px-grens). */
.sfk-schrijf,
.sfk-kop__opstap {
  font-family: var(--sfk-schrijf);
  font-weight: 400;
  color: var(--sfk-paars-diep);
  line-height: 1.05;
}

.sfk-kop__opstap {
  display: block;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  margin: 0 0 4px;
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

.sfk-kop h1 {
  font-family: var(--sfk-kop);
  font-weight: 400;
  color: var(--sfk-inkt);
  font-size: clamp(2.5rem, 5.4vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.005em;
  margin: 0 0 18px;
  text-wrap: balance;
}

/* Een woord in de schrijfletter middenin een kop */
.sfk-kop h1 .sfk-schrijf {
  font-size: 1.12em;
  color: var(--sfk-paars-diep);
  display: inline-block;
  transform: rotate(-2deg);
  padding: 0 .06em;
}

.sfk-kop__lead {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  max-width: 34em;
  margin: 0 0 8px;
  color: var(--sfk-inkt);
}

.sfk-kop__lead strong { font-weight: 700; }

.sfk-kop__acties {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.sfk-kop__feiten {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  padding: 0;
  list-style: none;
}

/* inkt op papier = 15.05:1 — AA */
.sfk-kop__feiten li {
  background: var(--sfk-paper);
  color: var(--sfk-inkt);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: .95rem;
}

/* Oranje variant van die feitjes (wens Tes 2026-09-23, op /popup-workshops).
   Inkt op #EA7A4E = 5,7:1 — AA. */
.sfk-kop__feiten--oranje li { background: var(--sfk-oranje); }

/* --- "Film is een manier om:" -------------------------------------------- */
/* Stond als vijf witte kaarten met de nummers 1 tot 5: vijf grote vlakken voor
   vijf halve zinnen, met een scheve onderste rij en een volgorde die er niet
   is. Nu pillen, keuze van Tes uit vijf opzetten (2026-09-26). Inkt op papier
   15:1, op haar oranje 5,7:1, op het lichte turquoise 12,6:1 — allemaal AA. */
.sfk-manieren {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.sfk-manieren li {
  background: var(--sfk-paper);
  color: var(--sfk-inkt);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 1.02rem;
  line-height: 1.35;
  box-shadow: 0 6px 16px rgba(36, 26, 64, .14);
}
.sfk-manieren li:nth-child(2) { background: var(--sfk-oranje); }
.sfk-manieren li:nth-child(4) { background: #CFE8E2; }

/* --- Documentpagina (algemene voorwaarden) -------------------------------- */
/* Eén kolom op papierwit, zodat een lange juridische tekst rustig leest. De
   regelbreedte blijft onder de 70 tekens; daarboven raak je bij het
   terugspringen de regel kwijt. */
.sfk-doc {
  background: var(--sfk-paper);
  border-radius: 20px;
  padding: clamp(26px, 4vw, 56px);
  max-width: 44rem;
  margin: 0 auto;
  color: var(--sfk-inkt);
  box-shadow: 0 12px 34px rgba(46, 32, 80, .16);
}
.sfk-doc h1 {
  font-family: var(--sfk-kop);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.08;
  margin: 0 0 6px;
  color: var(--sfk-paars);
}
.sfk-doc h1 + p { color: #5f5646; font-size: .92rem; margin-bottom: 30px; }
.sfk-doc h2 {
  font-family: var(--sfk-kop);
  font-weight: 400;
  font-size: 1.35rem;
  margin: 34px 0 8px;
  color: var(--sfk-paars);
}
.sfk-doc ol { margin: 0 0 4px; padding-left: 1.3em; }
.sfk-doc li { margin-bottom: 7px; line-height: 1.6; }
.sfk-doc p { line-height: 1.65; }
.sfk-doc__voet { margin-top: 38px; padding-top: 18px; border-top: 1px solid #ddd3c3; }

/* --- Het beeld ----------------------------------------------------------- */
.sfk-kop__beeld {
  position: relative;
  margin: 0;
}

.sfk-kop__beeld img {
  display: block;
  width: 100%;
  height: clamp(300px, 42vw, 470px);
  object-fit: cover;
  border-radius: 8px;
  position: relative;
  z-index: 2;
  /* schuine linkerrand, zoals het beeldblok op de voorbeeldsite */
  clip-path: polygon(4.5% 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: 0 22px 44px rgba(36, 26, 64, .3);
}

/* Het vlak dat schuin achter de foto uitsteekt.
   Op de voorbeeldsite staat daar een patroonvlak, maar dat werkt alleen
   achter een UITGEKNIPT figuur: je ziet het patroon dan rondom de personen.
   Achter een rechthoekige foto blijft er een reepje van over waarin de
   vormen doormidden zijn gesneden. Daarom hier een egaal crèmevlak, schuin
   gedraaid — hetzelfde gebaar als de scheve fotostrip op de hoofdpagina. */
.sfk-kop__beeld::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: var(--sfk-paper);
  border-radius: 10px;
  transform: rotate(-3deg) translate(-14px, 14px);
  box-shadow: 0 14px 30px rgba(36, 26, 64, .2);
}

/* Kop met een liggende foto: breder beeldvak, lagere hoogte. Anders zou een
   groepsfoto in het staande vak aan weerszijden worden afgesneden. */
.sfk-kop--breed .sfk-kop__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
.sfk-kop--breed .sfk-kop__beeld img { height: clamp(240px, 30vw, 390px); }

/* --- Drieluik: drie gewaaierde foto's ------------------------------------
   Zelfde gebaar als de posterwaaier op /filmkits (.fk-poster-fan), maar
   afgestemd op het lila vlak: een warme gloed in plaats van de teal gloed,
   en een zachtere slagschaduw omdat de ondergrond hier licht is.
   De foto's krijgen allemaal 3/4 met object-fit, zodat ze even hoog staan
   ook als de bronfoto's verschillende verhoudingen hebben. */
.sfk-waaier {
  position: relative;
  display: grid;
  place-items: center;
  /* Past om de foto's heen. Stond op 510px, terwijl de gewaaierde foto's
     daar maar ~330px van vulden: die loze reservering maakte het lila vlak
     onnodig lang en daardoor leeg. */
  min-height: clamp(340px, 33vw, 455px);
}

.sfk-waaier::before {
  content: "";
  position: absolute;
  inset: 8% 2%;
  background: radial-gradient(closest-side, rgba(251, 246, 238, .6), transparent 72%);
}

.sfk-waaier figure {
  margin: 0;
  position: absolute;
  width: min(46%, 264px);
  background: #fff;
  border: 6px solid #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 38px rgba(36, 26, 64, .38);
  transition: transform .2s ease;
}

/* height:auto is nodig, niet optioneel: zonder die regel telt de
   height="..."-waarde uit de HTML als vaste hoogte en wordt aspect-ratio
   genegeerd (die geldt alleen als één van beide maten auto is). De panelen
   werden daarmee ruim 1000px hoog. */
.sfk-waaier figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.sfk-waaier figure:nth-child(1) { transform: rotate(-10deg) translate(-78%, 3%); }
.sfk-waaier figure:nth-child(2) { transform: rotate(9deg) translate(78%, 7%); }
.sfk-waaier figure:nth-child(3) { transform: rotate(-1deg) translateY(-2%); z-index: 2; }
.sfk-waaier:hover figure:nth-child(3) { transform: rotate(-1deg) translateY(-5%) scale(1.03); }

/* Op smalle vensters moet de waaier ook smaller uitwaaieren, anders loopt de
   rechterfoto over de paginarand: de sectie heeft overflow:hidden, dus je ziet
   geen schuifbalk maar wel een afgesneden foto. Bij 375px komt de rechterrand
   nu op ~329px uit, met de gedraaide hoeken meegerekend. */
@media (max-width: 860px) {
  /* Op de telefoon stonden de drie foto's zo dicht op elkaar dat de achterste
     twee bijna helemaal achter de voorste verdwenen; je zag er maar één
     (gemeld door Tes 2026-09-26). Ze staan nu verder uit elkaar, en de twee
     achterste iets hoger dan de voorste, zodat alle drie te zien zijn. */
  .sfk-waaier { min-height: clamp(320px, 84vw, 420px); }
  .sfk-waaier figure { width: min(42%, 160px); }
  .sfk-waaier figure:nth-child(1) { transform: rotate(-8deg) translate(-56%, -9%); }
  .sfk-waaier figure:nth-child(2) { transform: rotate(7deg) translate(56%, -6%); }
  .sfk-waaier figure:nth-child(3) { transform: rotate(-1deg) translateY(12%); }
}

@media (prefers-reduced-motion: reduce) {
  .sfk-waaier figure { transition: none !important; }
}

@media (max-width: 860px) {
  .sfk-kop__inner { grid-template-columns: minmax(0, 1fr); }
  .sfk-kop--breed .sfk-kop__inner { grid-template-columns: minmax(0, 1fr); }
  .sfk-waaier { order: -1; }
  .sfk-kop__beeld { order: -1; margin-bottom: 8px; }
  .sfk-kop__beeld img { height: clamp(220px, 52vw, 320px); clip-path: none; }
  .sfk-kop__beeld::before { transform: rotate(-2deg) translate(-8px, 8px); }
}

/* ==========================================================================
   3. Knoppen (dezelfde vorm als op de feestjespagina's)
   ========================================================================== */

/* Vorm gekozen door Tes (2026-09-21): zacht blok. Ronde hoeken zoals de
   blokken op de pagina, met een zachte schaduw in plaats van de harde balk
   van 5px die er eerst onder zat. */
.sfk-btn {
  font-family: var(--sfk-kop);
  font-size: 1.2rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 15px 28px 12px;
  border-radius: 14px;
  text-decoration: none;
  border: 2px solid transparent;
  background: var(--sfk-knop);
  color: var(--sfk-inkt);        /* op wit = 16,2:1 */
  box-shadow: 0 8px 20px rgba(36, 26, 64, .28);
  transition: transform .15s ease, box-shadow .15s ease;
}

.sfk-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(36, 26, 64, .32);
}

/* Pijltje op de gevulde knoppen. Decoratief, dus verborgen voor voorleessoftware. */
.sfk-btn--teal::after,
.sfk-btn--oranje::after,
.sfk-btn--paars::after {
  content: "\2192";
  font-size: .9em;
  line-height: 1;
  transform: translateY(-1px);
  speak: never;
}

/* Haar eigen turquoise #00B295, niet een verdiepte variant ervan (besluit Tes
   2026-09-19). Wit erop haalt maar 2.69:1; donkere tekst haalt 6.02:1. De
   leesbaarheid wordt dus met de LETTERKLEUR opgelost, niet door de merkkleur
   aan te passen. */
/* verdiepte turquoise op beige = 5.2:1 — AA */
.sfk-btn--teal { color: var(--sfk-teal-tekst); }   /* op wit = 6,6:1 */

/* haar paars op beige = 6.4:1 — AA */
.sfk-btn--paars { color: var(--sfk-paars); }  /* op wit = 8,1:1 */

/* verdiept koraal op beige = 4.5:1 — AA */
.sfk-btn--oranje { color: var(--sfk-koraal-tekst); }  /* op wit = 5,8:1 */

/* De rustige variant: ook beige, alleen zonder accentkleur in de letter.
   Zo is elke knop op de site beige en zit het verschil in de letterkleur. */
.sfk-btn--rand { color: var(--sfk-inkt); }

/* Geen eigen hover meer: die verving het witte vlak door een doorzichtige
   donkere vulling, en op het diep paarse slotblok verdween de knop daarmee
   (gemeld door Tes 2026-09-23). Nu geldt de gewone knop-hover: hij komt
   omhoog en de schaduw wordt dieper. Sinds alle knoppen wit zijn is deze
   variant gelijk aan de gewone knop; de klasse blijft voor de HTML staan. */

/* ==========================================================================
   4. Voetregel
   Diep paars in plaats van het oude vlakke lila: crème op lila haalde maar
   2.30:1 en las daardoor grijzig weg. Erboven de filmklapper-rand die ook
   op de feestjespagina's staat.
   ========================================================================== */

.sfk-voet {
  background: var(--sfk-diep);
  color: var(--sfk-room);
  font-family: var(--sfk-tekst);
}

/* Even dun als het randje onder de menubalk, zodat de twee op elkaar lijken
   en het een accent blijft in plaats van een balk (wens Tes 2026-09-22). */
.sfk-voet__strip {
  height: 9px;
  background: repeating-linear-gradient(-55deg, #131313 0 8px, #F6F1E7 8px 16px);
  border-bottom: 2px solid #131313;
}

.sfk-voet__inner {
  max-width: var(--sfk-breed);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 60px) clamp(16px, 4vw, 40px) 28px;
  display: grid;
  grid-template-columns: minmax(200px, 1fr) repeat(2, 200px);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.sfk-voet__merk img { height: 96px; width: auto; display: block; }

.sfk-voet h2 {
  font-family: var(--sfk-kop);
  font-weight: 400;
  font-size: 1.25rem;
  color: #fff;
  margin: 0 0 14px;
  letter-spacing: .02em;
}

.sfk-voet ul { list-style: none; margin: 0; padding: 0; }
.sfk-voet li { margin-bottom: 10px; }

/* crème op diep paars = 11.56:1 — AA (was crème op lila: 2.30:1) */
.sfk-voet a {
  color: var(--sfk-room);
  text-decoration: none;
  border-bottom: 1px solid rgba(235, 228, 217, .35);
  transition: border-color .15s ease;
}

.sfk-voet a:hover { border-bottom-color: var(--sfk-room); }

.sfk-voet__onder {
  max-width: var(--sfk-breed);
  margin: 0 auto;
  padding: 20px clamp(16px, 4vw, 40px) 34px;
  /* De lijn hoort even breed te zijn als de inhoud. Als border-top liep hij
     over de padding-rand en stak hij er aan weerszijden 40px buiten. */
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  font-size: .92rem;
}

.sfk-voet__onder::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(16px, 4vw, 40px);
  right: clamp(16px, 4vw, 40px);
  height: 1px;
  background: rgba(235, 228, 217, .22);
}

.sfk-voet__socials { display: flex; gap: 14px; }

.sfk-voet__socials a {
  width: 26px;
  height: 26px;
  border: 0;
  color: var(--sfk-room);
  display: block;
}

.sfk-voet__socials a:hover { color: var(--sfk-lila); }
.sfk-voet__socials svg { width: 100%; height: 100%; display: block; }

@media (max-width: 860px) {
  .sfk-voet__inner { grid-template-columns: 1fr 1fr; }
  .sfk-voet__merk { grid-column: 1 / -1; }
  .sfk-voet__merk img { height: 78px; }
}

@media (max-width: 520px) {
  .sfk-voet__inner { grid-template-columns: 1fr; gap: 28px; }
}

/* ==========================================================================
   5. Secties op de gewone pagina's (over, pop-up workshop)
   Zelfde bouwstenen als de feestjespagina's: papier en diep paars om en om,
   witte kaarten, één accentkleur per blok.
   ========================================================================== */

.sfk-sectie { padding: clamp(48px, 6vw, 84px) 0; font-family: var(--sfk-tekst); }
.sfk-sectie--paper { background: var(--sfk-paper); }
.sfk-sectie--lila  { background: var(--sfk-paper-lila); }
.sfk-sectie--diep  { background: var(--sfk-diep); color: var(--sfk-room); }

/* --- Blokken op één doorlopende grond -------------------------------------
   Aanpak naar vitalimail.nl (voorbeeld van Tes, 2026-09-21). Daar liggen geen
   gekleurde banen onder elkaar: de hele pagina heeft ÉÉN achtergrondkleur en
   de inhoud staat in afgeronde blokken die daarop zweven. Er zijn dan ook
   geen naden om te laten verlopen — dat probleem verdwijnt in plaats van dat
   het wordt verzacht.

   Op dat voorbeeld verandert die ene grond bovendien van kleur terwijl je
   scrollt: groen bovenaan, blauwgrijs in het midden, paars onderaan. Dat is
   het "verloop" dat Tes bedoelt — geen verloop binnen één scherm, maar een
   kleur die met je meeloopt over de hele pagina.

   Hier begint de grond in haar lila (dezelfde kleur als de menubalk, zodat
   kop en balk zonder overgang doorlopen) en schuift naar zacht turquoise en
   zacht koraal, allebei afgeleid van haar eigen merkkleuren. Welke sectie
   welke grond aanzet staat als data-grond in de HTML; het omschakelen doet
   /js/sfk.js. */
:root {
  --sfk-grond:        #AA8CC0;  /* startkleur = de lila van de menubalk */
  --sfk-grond-lila:   #AA8CC0;
  --sfk-grond-teal:   #8CD6CA;  /* haar #00B295, verzacht tot een grond */
  --sfk-grond-koraal: #EE8462;  /* haar #EE7252, net iets zachter als grond */
}

body,
.page-wrapper,
.main-wrapper {
  background-color: var(--sfk-grond);
  transition: background-color .9s ease;
}

/* De kop hoort bij de grond en schuift dus mee, in plaats van vast lila. */
.sfk-kop { background: var(--sfk-grond); transition: background-color .9s ease; }

@media (prefers-reduced-motion: reduce) {
  body, .page-wrapper, .main-wrapper, .sfk-kop { transition: none !important; }
}

/* Sectie zonder eigen vlak: de kaartjes erin zweven rechtstreeks op de
   meelopende grond. Zo doet vitalimail het ook — daar zit alleen een blok om
   secties die ��chte panelen zijn, niet om kaartenrijen. */
.sfk-open { background: transparent !important; }

/* Een doorzichtige sectie heeft geen eigen vlak, dus zijn bovenruimte is
   gewoon extra grond. Direct onder de kop telde dat op bij de onderruimte
   van de kop; samen werd dat een lange lege band. */
.sfk-open { padding-top: clamp(34px, 4vw, 52px); }
.fkh-section.sfk-open { padding-top: clamp(34px, 4vw, 52px); }

.sfk-blok {
  border-radius: clamp(20px, 2.4vw, 34px);
  margin: clamp(18px, 3vw, 40px) clamp(12px, 3vw, 34px);
  overflow: hidden;
}

/* De blokken zitten al binnen een marge, dus binnenin mag de ruimte wat
   krapper dan bij een band over de volle breedte. */
.sfk-sectie/* Sectie zonder eigen vlak: de kaartjes erin zweven rechtstreeks op de
   meelopende grond. Zo doet vitalimail het ook — daar zit alleen een blok om
   secties die ��chte panelen zijn, niet om kaartenrijen. */
.sfk-open { background: transparent !important; }

/* Een doorzichtige sectie heeft geen eigen vlak, dus zijn bovenruimte is
   gewoon extra grond. Direct onder de kop telde dat op bij de onderruimte
   van de kop; samen werd dat een lange lege band. */
.sfk-open { padding-top: clamp(34px, 4vw, 52px); }
.fkh-section.sfk-open { padding-top: clamp(34px, 4vw, 52px); }

/* Alleen boven en onder: dit blok zit vaak OP een sectie die zelf al een
   zijmarge heeft, en een padding-korting met een 0 erin wist die. */
.sfk-blok { padding-top: clamp(44px, 5.5vw, 76px); padding-bottom: clamp(44px, 5.5vw, 76px); }

/* De zijmarge van de hele site zit in deze ene waarde. Op een telefoon van
   375px was hij 16px, en op andere plekken 19px of zelfs 12px; dat oogde
   rommelig (gemeld door Tes 2026-09-26). Nu overal 20px op de smalste
   telefoon, meegroeiend tot 40px. */
:root { --sfk-kant: clamp(20px, 4vw, 40px); }

.sfk-houder {
  max-width: var(--sfk-breed);
  margin: 0 auto;
  padding: 0 var(--sfk-kant);
}

.sfk-houder--smal { max-width: 860px; }

.sfk-kicker {
  display: inline-block;
  font-family: var(--sfk-kop);
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sfk-inkt);           /* inkt op haar turquoise = 6.02:1 — AA */
  background: var(--sfk-teal);
  border-radius: 999px;
  padding: .35rem 1rem .3rem;
  margin-bottom: 14px;
}

/* Regelval (opmerking Tes 2026-09-23: "de onderbrekingen staan niet netjes").
   Koppen en korte inleidingen kregen regels van heel ongelijke lengte, met
   soms een enkel woord dat op de vorige regel achterbleef. balance verdeelt
   de woorden over de regels, pretty houdt in lopende tekst het laatste woord
   van een alinea gezelschap. Browsers die het niet kennen breken zoals nu. */
p, li, dd, figcaption, summary, blockquote { text-wrap: pretty; }
h1, h2, h3, h4, .sfk-h2, .sfk-h3, .sfk-lead, .sfk-kop__lead, .sfk-kicker { text-wrap: balance; }

.sfk-h2 {
  font-family: var(--sfk-kop);
  font-weight: 400;
  color: var(--sfk-paars);          /* paars op papier = 7.56:1 — AA */
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.18;
  margin: 0 0 14px;
}

.sfk-sectie--diep .sfk-h2 { color: #fff; }

.sfk-h3 {
  font-family: var(--sfk-kop);
  font-weight: 400;
  font-size: 1.55rem;
  color: var(--sfk-paars);
  margin: 0 0 10px;
}

.sfk-sectie--diep .sfk-h3 { color: var(--sfk-oranje); }  /* oranje op diep = 5,1:1 — AA */

.sfk-lead {
  font-size: 1.12rem;
  line-height: 1.65;
  max-width: 42em;
  margin: 0 0 16px;
}

.sfk-sectie p { line-height: 1.68; }

.sfk-center { text-align: center; }
.sfk-center .sfk-lead { margin-left: auto; margin-right: auto; }

/* --- Kaarten ------------------------------------------------------------- */
.sfk-kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 36px;
}

.sfk-kaart {
  background: #fff;
  color: var(--sfk-inkt);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(46, 32, 80, .14);
  border-top: 6px solid var(--sfk-teal);
}

/* Vijf blokken vielen als 4 + 1 uiteen, met één eenzaam blok op rij twee.
   Zes kolommen, elk blok twee breed, en het vierde begint een kolom later:
   dan staat het als 3 + 2 gecentreerd onder elkaar. */
@media (min-width: 900px) {
  .sfk-kaarten--vijf { grid-template-columns: repeat(6, 1fr); }
  .sfk-kaarten--vijf > * { grid-column: span 2; }
  .sfk-kaarten--vijf > :nth-child(4) { grid-column: 2 / span 2; }
}

.sfk-kaart--paars  { border-top-color: var(--sfk-paars); }
.sfk-kaart--oranje { border-top-color: var(--sfk-koraal); }
.sfk-kaart p:last-child { margin-bottom: 0; }

.sfk-kaart__nr {
  font-family: var(--sfk-schrijf);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--sfk-lila);
  display: block;
  margin-bottom: 4px;
}

/* --- Twee kolommen met beeld --------------------------------------------- */
.sfk-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.sfk-duo__beeld img {
  display: block;
  width: 100%;
  height: clamp(260px, 32vw, 400px);
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(46, 32, 80, .24);
}

.sfk-duo--omgekeerd .sfk-duo__beeld { order: 2; }

@media (max-width: 720px) {
  .sfk-duo--omgekeerd .sfk-duo__beeld { order: 0; }
}

/* --- Citaat -------------------------------------------------------------- */
.sfk-citaat {
  font-family: var(--sfk-schrijf);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.3;
  color: var(--sfk-paars-diep);     /* op papier = 9.69:1 — AA */
  border-left: 5px solid var(--sfk-lila);
  padding: 4px 0 4px 22px;
  margin: 0 0 18px;
}

.sfk-sectie--diep .sfk-citaat { color: var(--sfk-lila); border-left-color: var(--sfk-oranje); }

/* --- Afsluitblok met oproep ---------------------------------------------- */
/* Getekende popcorn op de donkere slotblokken, net als op de feestjespagina's
   (wens Tes 2026-09-22). Rondom, met het midden vrij: de tekst staat op schoon
   diep paars en de popcorn hoeft niet achter een sluier. Opnieuw tekenen met
   python3 bron/popcorn.py */
.sfk-popcorn {
  background-color: var(--sfk-inkt) !important;
  background-image: url("/images/popcorn.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sfk-slot {
  background-color: var(--sfk-paars-diep);
  background-image: url("/images/popcorn.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--sfk-room);
  border-radius: 20px;
  padding: clamp(28px, 4vw, 48px);
  text-align: center;
}

.sfk-slot .sfk-h2 { color: #fff; }
.sfk-slot p { max-width: 40em; margin: 0 auto 22px; }

/* ==========================================================================
   6. Formulier (mailinglijst voor de pop-up workshops)
   Het formulier op /popup-workshops post via /js/mailinglijst.js naar
   joepa-api (/api/site-lead). Veldnamen en de .w-form-done / .w-form-fail
   ernaast horen bij dat script.
   ========================================================================== */

.sfk-formulier {
  background: #fff;
  border-radius: 18px;
  padding: clamp(24px, 3vw, 36px);
  box-shadow: 0 12px 34px rgba(46, 32, 80, .16);
  border-top: 6px solid var(--sfk-teal);
}

.sfk-formulier label,
.sfk-formulier .form_field-label {
  display: block;
  font-family: var(--sfk-kop);
  font-size: 1.05rem;
  color: var(--sfk-paars);          /* paars op wit = 8.26:1 — AA */
  margin: 0 0 6px;
}

.sfk-formulier label + input { margin-bottom: 20px; }

.sfk-formulier input[type="text"],
.sfk-formulier input[type="email"] {
  width: 100%;
  font-family: var(--sfk-tekst);
  font-size: 1rem;
  color: var(--sfk-inkt);
  background: var(--sfk-paper);
  border: 2px solid #CBB9DA;
  border-radius: 10px;
  padding: 12px 14px;
}

.sfk-formulier input::placeholder { color: #6B6478; }   /* op papier = 5.32:1 — AA */

.sfk-formulier input:focus-visible {
  outline: 3px solid var(--sfk-paars);
  outline-offset: 2px;
  border-color: var(--sfk-paars);
}

/* De oude Webflow-knoppen op de pagina's die nog in het oude ontwerp staan
   (/mailinglijst, /aanmelden-pop-up). Die waren koraal op de lila grond:
   1,01:1, je ziet er geen knop meer in. Nu dezelfde vorm als de rest van de
   site. Turquoise op wit = 6,6:1. Staat zo'n knop wél in een wit
   formuliervlak, dan wint de regel hieronder en wordt hij diep paars. */
.button_form, .button_01 {
  font-family: var(--sfk-kop);
  font-size: 1.2rem;
  line-height: 1;
  background: var(--sfk-knop);
  color: var(--sfk-teal-tekst);
  border: 0;
  border-radius: 14px;
  padding: 15px 28px 12px;
  box-shadow: 0 8px 20px rgba(36, 26, 64, .28);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.button_form:hover, .button_01:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(36, 26, 64, .32);
}

.sfk-formulier input[type="submit"] {
  font-family: var(--sfk-kop);
  font-size: 1.2rem;
  /* Deze knop staat op het WITTE formuliervlak, dus hij kan niet wit zijn
     zoals de andere knoppen: dan heeft hij geen vorm meer. Gevuld diep paars,
     net als de bestelknop op de Filmkit-pagina. Wit op #4A3277 = 9,9:1. */
  background: var(--sfk-paars-diep);
  color: #fff;
  border: 0;
  border-radius: 14px;
  padding: 15px 28px 12px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(36, 26, 64, .28);
  margin-top: 4px;
}

.sfk-formulier input[type="submit"]:hover { transform: translateY(-2px); }
.sfk-formulier input[type="submit"]:disabled { opacity: .7; cursor: default; transform: none; }

/* De meldingen van mailinglijst.js. .w-form-done en .w-form-fail staan
   standaard uit en worden op display:block gezet; hier alleen de vormgeving. */
.sfk-melding {
  margin-top: 18px;
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 1rem;
  line-height: 1.5;
}

.sfk-melding--goed {
  background: #CCF0EA;
  color: var(--sfk-inkt);           /* inkt op mint = 12.9:1 — AA */
  border-left: 5px solid var(--sfk-teal-diep);
}

.sfk-melding--fout {
  background: #FBE3DC;
  color: #7A2612;                   /* op zalm = 6.4:1 — AA */
  border-left: 5px solid #B03A1F;
}

/* Het vinkje "stuur me een mail" en de foutmelding in het formulier. De
   dubbele class wint van ".sfk-formulier label" (kopletter, paars, block). */
.sfk-formulier .sfk-toestemming {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 4px 0 18px;
  font-family: var(--sfk-tekst);
  font-size: .95rem;
  line-height: 1.45;
  color: var(--sfk-inkt);
  cursor: pointer;
}
.sfk-toestemming input { width: 18px; height: 18px; margin: .15em 0 0; flex: none; accent-color: var(--sfk-teal-diep); }
.sfk-toestemming input[aria-invalid="true"] { outline: 2px solid #B03A1F; outline-offset: 2px; }
.sfk-formulier input[aria-invalid="true"] { border-color: #B03A1F; }
.sfk-verborgen { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sfk-mailinglijst__fout { margin: 0 0 16px; }
.sfk-mailinglijst__fout[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sfk-btn, .sfk-nav__cta, .sfk-nav__toggle span { transition: none !important; }
}