/* =============================================================================
   Jitske Kramer — main.css
   Richting: acht beats, één stem. De homepage vertelt één verhaal in vaste
   volgorde; elke sectie heeft één taak en één kop.

   Drie regels die het ontwerp bij elkaar houden:
     1. Eén kopmaat (--t-head) plus de H1 (--t-h1). Geen deck, geen thin, geen
        losse uitspraak — meer varianten maakten de pagina rommelig.
     2. Tekst staat niet op beeld. Eén uitzondering: de hero op desktop, waar
        het beeld een donkere linkerkolom afstaat. Onder 56rem kantelt dat naar
        foto boven, tekst eronder.
     3. Inhoud staat in de box (--page). Alleen een slider mag doorlopen tot
        de rand, zodat zichtbaar is dat er meer staat.

   Volgorde: fonts → tokens → reset → typografie → raster → onderdelen → utils.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Fonts
   Lasiver, in de gewichten die de site zelf gebruikt: de koppen staan er in
   licht en breed, niet in zwart en strak. Dat is de stem van het merk en die
   volgen we hier letterlijk — thin voor de grootste koppen, regular voor de rest.

   De lopende tekst is Roboto, zoals op de huidige site. Beide families staan
   op onze eigen server; er is geen externe verbinding voor typografie.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Lasiver";
  src: url("../fonts/lasiver-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Roboto, self-hosted — de broodletter van de huidige site. Google levert dit
   als één variabel bestand per schriftsubset; de gewichten 400 tot 600 zitten
   in hetzelfde bestand. Twee requests. */
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-latin-ext.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -----------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Hoogte van de plakkende kopbalk: alles wat zelf plakt, gaat eronder. */
  --masthead-h: 4.5rem;

  /* Zodat <details> naar "auto" kan animeren in plaats van te springen. */
  interpolate-size: allow-keywords;
  color-scheme: light;

  /* Gemeten op de huidige site: goud #c2ab69, antraciet #292b33 voor de
     donkere vlakken, tekst #202124, lichtgrijs #f3f3f3, wit. Alleen --gold-deep
     en --caption zijn nieuw: goud op wit haalt 2,2:1 en is als tekst
     onleesbaar, dus voor links en figuurnummers is er een donkerder goud. */
  --paper: #ffffff;
  --paper-warm: #f3f3f3;
  --ink: #292b33;
  --ink-soft: #3f4046;
  --body: #202124;
  --caption: #706b61;
  --rule: #dcd7cc;
  --rule-strong: #14151a;
  --gold: #c2ab69;
  --gold-deep: #7a6937;

  /* Typografie */
  --display: "Lasiver", "Helvetica Neue", Arial, sans-serif;
  --body-face: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --util: "Roboto", "Helvetica Neue", Arial, sans-serif;

  /* Vier maten, niet zeven: label, tekst, inleiding, kop. Plus één maat voor
     de H1. Alles wat daarbuiten viel — deck, cover, statement — is weg. */
  --t-cap: 0.78rem;
  --t-small: 0.9rem;
  --t-body: clamp(1rem, 0.97rem + 0.15vw, 1.1rem);
  --t-lead: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --t-head: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem);
  --t-h1: clamp(2.4rem, 1.6rem + 3vw, 4.25rem);
  --t-deck: var(--t-head);
  --t-cover: var(--t-h1);

  /* Raster: twaalf kolommen, met een marge waarin bijschriften kunnen hangen. */
  --gutter: clamp(1.15rem, 3.5vw, 2.75rem);
  --page: 76rem;
  --measure: 33rem;
  --space: clamp(3.5rem, 7vw, 7rem);

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* -----------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  background: var(--paper);
  color: var(--body);
  font-family: var(--body-face);
  font-size: var(--t-body);
  line-height: 1.85;
  font-optical-sizing: auto;
  overflow-x: hidden;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

figure {
  margin: 0;
}

/* Focus is de enige aanwijzing die een toetsenbordgebruiker heeft. Bewust geen
   :where() hier: die heeft specificiteit 0 en wordt door elke latere regel
   overschreven, waardoor de focusring stilletjes kan verdwijnen. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Op een donkere ondergrond is het diepe goud te weinig; daar pakken we wit
   met een gouden kern, zodat de ring op beide gronden zichtbaar is. */
.jk-section--ink a:focus-visible,
.jk-section--ink button:focus-visible,
.jk-colofon a:focus-visible,
.jk-duo__panel a:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 6px rgba(194, 171, 105, 0.55);
}

/* Een rij met een uitgerekte link: de link zelf is onzichtbaar klein, dus de
   focusring hoort om de hele rij te staan. */
.jk-index__row:has(a:focus-visible) {
  outline: 3px solid var(--gold-deep);
  outline-offset: 2px;
}

.jk-section--ink .jk-index__row:has(a:focus-visible),
.jk-section--gold .jk-index__row:has(a:focus-visible) {
  outline-color: var(--ink);
}

.jk-section--ink .jk-index__row:has(a:focus-visible) {
  outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* -----------------------------------------------------------------------------
   4. Typografie
   -------------------------------------------------------------------------- */
.jk-h1,
.jk-cover,
.jk-head,
.jk-deck {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  text-wrap: balance;
}

/* De H1: Lasiver regular in zinsvorm — gemeten op de huidige site. */
.jk-h1,
.jk-cover {
  font-size: var(--t-h1);
  line-height: 1.05;
  letter-spacing: 0;
}

/* Elke sectiekop dezelfde maat, in kapitalen. Eén stem. */
.jk-head,
.jk-deck {
  font-size: var(--t-head);
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.1;
}

/* Klein label boven een kop: wat is dit. */
.jk-label {
  font-family: var(--util);
  font-size: var(--t-cap);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* Standfirst: de inleidende alinea van een reportage, in een groter corps
   dan de lopende tekst en met een iets ruimere regelafstand. */
.jk-standfirst {
  font-size: var(--t-lead);
  line-height: 1.42;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.jk-body {
  max-width: var(--measure);
}

.jk-body > * + * {
  margin-top: 0.9em;
}

.jk-body a {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.jk-body a:hover {
  color: var(--gold-deep);
}

/* Bijschrift: de kleinste, meest precieze tekst op de pagina. */
.jk-cap {
  font-family: var(--util);
  font-size: var(--t-cap);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.06em;
  color: var(--caption);
  text-wrap: pretty;
}

.jk-cap b,
.jk-cap strong {
  font-weight: 600;
  color: var(--ink-soft);
}

.jk-credit {
  font-family: var(--util);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--caption);
}

/* Sectie-opener: kop en inleiding onder elkaar, links, op leesbreedte.
   Eerder stonden ze in twee kolommen ver uit elkaar met de inleiding een halve
   rij lager — op een breed scherm las dat als losse stukken. */
.jk-opener {
  display: grid;
  gap: 0.9rem;
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.jk-opener .jk-standfirst {
  max-width: 40rem;
}

/* -----------------------------------------------------------------------------
   5. Raster
   Twaalf kolommen. Elementen kiezen bewust een ongelijke breedte en inzet;
   niets vult automatisch op.
   -------------------------------------------------------------------------- */
.jk-page {
  width: min(100% - var(--gutter) * 2, var(--page));
  margin-inline: auto;
}

.jk-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* Op smalle schermen loopt alles over de volle breedte. */
.jk-grid > * {
  grid-column: 1 / -1;
}

@media (min-width: 56rem) {
  .c-full { grid-column: 1 / -1; }
  .c-left-7 { grid-column: 1 / 8; }
  .c-left-8 { grid-column: 1 / 9; }
  .c-right-5 { grid-column: 8 / -1; }
  .c-right-4 { grid-column: 9 / -1; }
  .c-mid-6 { grid-column: 4 / 10; }
  .c-inset-8 { grid-column: 3 / 11; }
  .c-margin { grid-column: 1 / 3; }
  .c-column { grid-column: 3 / 9; }
  .c-late { grid-column: 6 / -1; }
  .c-half { grid-column: span 6; }

  /* Kolom die een halve rij lager begint dan zijn buur — het schuine ritme
     dat een reportagespread heeft. */
  .c-drop { margin-top: clamp(1.25rem, 2.5vw, 2.5rem); }
}

.jk-section {
  padding-block: var(--space);
}

.jk-section--tight {
  padding-block: clamp(2rem, 4vw, 3.5rem);
}

.jk-section--warm {
  background: var(--paper-warm);
}

.jk-section--ink {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.82);
}

.jk-section--ink .jk-head,
.jk-section--ink .jk-h1 {
  color: #fff;
}

.jk-section--ink .jk-standfirst {
  color: rgba(255, 255, 255, 0.78);
}

.jk-section--ink .jk-cap {
  color: rgba(255, 255, 255, 0.55);
}

.jk-section--ink .jk-cap b {
  color: rgba(255, 255, 255, 0.85);
}

.jk-section--ink .jk-rule,
.jk-section--ink .jk-index__row {
  border-color: rgba(255, 255, 255, 0.18);
}

/* Hairline die de secties markeert in plaats van een kleurvlak. */
.jk-rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

/* -----------------------------------------------------------------------------
   6. Figuur met bijschrift
   Het centrale onderdeel: een foto is nooit decoratie, altijd een genummerd
   beeld met een bijschrift eronder.
   -------------------------------------------------------------------------- */
.jk-fig img {
  width: 100%;
  background: var(--paper-warm);
}

/* Beeld over de volle breedte: begrensd op 21:9, anders wordt een liggende
   foto op een breed scherm een muur van duizend pixels hoog. */
.jk-fig--wide img {
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

.jk-fig figcaption {
  display: grid;
  gap: 0.15rem;
  margin-top: 0.7rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--rule);
}

/* -----------------------------------------------------------------------------
   7. Hero
   Het beeld loopt van rand tot rand — dit is het enige onderdeel dat de box
   doorbreekt, en het enige waar tekst op een foto ligt. Onder 56rem kantelt
   het: eerst de foto, dan de tekst eronder.

   De hoogte is gekoppeld aan het scherm (min(88vh, 48rem)) zodat er onderaan
   altijd een rand overblijft: je ziet dat de pagina doorloopt.
   -------------------------------------------------------------------------- */
.jk-hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  isolation: isolate;
}

.jk-hero__media {
  position: relative;
  overflow: hidden;
}

.jk-hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 62% 22%;
}

.jk-hero__inner {
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
}

.jk-hero .jk-label {
  color: var(--gold);
  margin-bottom: 0.9rem;
}

.jk-hero .jk-h1 {
  color: #fff;
  max-width: 15ch;
}

.jk-hero .jk-accent {
  color: var(--gold);
}

.jk-hero__lead {
  max-width: 34rem;
  margin-top: 1.1rem;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}

/* De film ligt op de foto en onder het verloop. Hij komt pas in beeld als hij
   echt speelt: tot dan zie je de poster, en die is scherper dan een half
   geladen video. Op smalle schermen speelt hij niet — daar is het alleen
   dataverbruik. */
.jk-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 74% 18%;
  border: 0;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
  pointer-events: none;
}

.jk-hero__video.is-playing {
  opacity: 1;
}

.jk-hero__video iframe {
  /* De achtergrondspeler van Vimeo houdt zijn eigen verhouding aan; deze twee
     regels laten hem het vlak vullen in plaats van er zwarte balken bij te
     zetten. */
  width: 100vw;
  height: 56.25vw;
  min-height: 100%;
  min-width: 177.78vh;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border: 0;
  pointer-events: none;
}

@media (max-width: 55.99rem), (prefers-reduced-motion: reduce) {
  .jk-hero__video {
    display: none;
  }
}

/* Onder de knoppen: het eerstvolgende optreden. Eén regel die bewijst dat de
   agenda leeft, met de datum als het enige gouden element. */
.jk-hero__next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-family: var(--util);
  font-size: var(--t-small);
  color: rgba(255, 255, 255, 0.78);
}

/* De titel van een event kan lang zijn ("Masterclass Tricky Tijden — omgaan
   met grote veranderingen"). Eén regel, en wat niet past valt weg: dit is een
   signaal, geen agenda-item. */
.jk-hero__next > span {
  display: block;
  max-width: min(100%, 30rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jk-hero__next svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--gold);
}

.jk-hero__next b {
  font-weight: 600;
  color: var(--gold);
}

.jk-hero__next a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 0.22em;
  transition: text-decoration-color 0.25s var(--ease), color 0.25s var(--ease);
}

.jk-hero__next a:hover {
  color: var(--gold);
  text-decoration-color: var(--gold);
}

/* Fotocredit: op mobiel een regel onder het beeld, op desktop in de hoek. */
.jk-photo-credit {
  display: block;
  padding: 0.45rem var(--gutter) 0;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--util);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
}

/* De aanwijzing onderaan. Geen pijltje dat op en neer wipt: een dunne lijn die
   zakt, één keer per vier seconden. */
.jk-hero__cue {
  display: none;
}

@media (min-width: 56rem) {
  .jk-hero {
    display: grid;
    align-items: center;
    min-height: min(88vh, 48rem);
  }

  .jk-hero__media {
    grid-area: 1 / 1;
    align-self: stretch;
  }

  /* De foto mag de hoogte van de band niet bepalen — anders rekt zijn eigen
     verhouding de hero tot voorbij het scherm. Hij vult wat de tekst en de
     min-hoogte samen opspannen. */
  .jk-hero__media img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    object-position: 74% 18%;
  }

  /* Twee lagen: een vlakke demping over het hele beeld zodat de foto nooit
     feller wordt dan de tekst, en daarbovenop een donkere linkerkolom waar de
     tekst in staat. Gemeten op het vuurbeeld — het felste beeld dat hier ooit
     komt te staan. */
  .jk-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(96deg, rgba(18, 19, 24, 0.95) 0%, rgba(18, 19, 24, 0.9) 26%, rgba(18, 19, 24, 0.62) 46%, rgba(18, 19, 24, 0.16) 66%, rgba(18, 19, 24, 0) 82%),
      linear-gradient(to top, rgba(18, 19, 24, 0.55), rgba(18, 19, 24, 0) 45%),
      linear-gradient(rgba(18, 19, 24, 0.18), rgba(18, 19, 24, 0.18));
  }

  .jk-hero__inner {
    position: relative;
    z-index: 1;
    grid-area: 1 / 1;
    padding-block: clamp(3rem, 7vh, 5rem);
  }

  .jk-hero__inner > * {
    max-width: 36rem;
  }

  .jk-photo-credit {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 1;
    padding: 0.2rem 0.55rem;
    background: rgba(20, 21, 26, 0.5);
    color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(2px);
  }

  .jk-hero__cue {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    translate: -50% 0;
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--util);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.25s var(--ease);
  }

  .jk-hero__cue::after {
    content: "";
    width: 1px;
    height: 2.25rem;
    background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
    transform-origin: top center;
    animation: jk-drop 4s var(--ease) infinite;
  }

  .jk-hero__cue:hover {
    color: var(--gold);
  }

  /* Bij het scrollen zakt de aanwijzing weg: hij heeft zijn werk gedaan. */
  @supports (animation-timeline: view()) {
    .jk-hero__cue {
      animation: jk-fade-out linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 45%;
    }
  }
}

@keyframes jk-drop {
  0%, 60%, 100% { scale: 1 1; opacity: 1; }
  30% { scale: 1 0.45; opacity: 0.45; }
}

@keyframes jk-fade-out {
  to { opacity: 0; translate: -50% 1rem; }
}

/* -----------------------------------------------------------------------------
   8. Knoppen
   Eén vorm, spaarzaam gebruikt. Goud alleen op de handeling die er echt toe doet.
   -------------------------------------------------------------------------- */
.jk-btn {
  --btn-fill: var(--gold);
  --btn-fill-fg: var(--ink);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.85em 1.4em;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  font-family: var(--display);
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

/* De vulling schuift van onderaf in. Het label ligt erboven en wisselt van
   kleur zodra de vulling langskomt. Alleen transform: geen reflow. */
.jk-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fill);
  transform: scaleY(0);
  transform-origin: center bottom;
  transition: transform 0.34s var(--ease);
}

.jk-btn:hover,
.jk-btn:focus-visible {
  color: var(--btn-fill-fg);
  border-color: var(--btn-fill);
}

.jk-btn:hover::before,
.jk-btn:focus-visible::before {
  transform: scaleY(1);
}

.jk-btn:active {
  transform: scale(0.985);
}

.jk-btn--gold {
  --btn-fill: var(--ink);
  --btn-fill-fg: #fff;
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.jk-btn--plain {
  --btn-fill: var(--ink);
  --btn-fill-fg: #fff;
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}

.jk-section--ink .jk-btn--plain,
.jk-hero .jk-btn--plain {
  --btn-fill: var(--gold);
  --btn-fill-fg: var(--ink);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

/* Tekstlink met een streep die meebeweegt. */
.jk-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-family: var(--display);
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.25em;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

/* Techniek overgenomen van "Arrow Pass-Through" uit de animatiebibliotheek,
   maar zonder de pill-markup: de pijlen zijn hier pseudo-elementen, zodat er
   geen extra HTML nodig is en elke bestaande .jk-link het meteen doet.
   De rechterpijl schuift naar buiten terwijl er links een tweede in glijdt. */
.jk-link {
  position: relative;
  overflow: hidden;
}

.jk-link::before,
.jk-link::after {
  content: "\2192";
  display: inline-block;
  transition: translate 0.42s var(--ease), opacity 0.24s ease-out;
}

.jk-link::before {
  position: absolute;
  left: 0;
  translate: -1.4em 0;
  opacity: 0;
}

.jk-link::after {
  translate: 0 0;
}

.jk-link:hover,
.jk-link:focus-visible {
  color: var(--gold-deep);
  border-color: var(--gold-deep);
}

.jk-link:hover::after,
.jk-link:focus-visible::after {
  translate: 1.6em 0;
  opacity: 0;
}

.jk-link:hover::before,
.jk-link:focus-visible::before {
  translate: 0 0;
  opacity: 1;
}

.jk-section--ink .jk-link {
  color: #fff;
}

.jk-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.75rem;
}

/* -----------------------------------------------------------------------------
   9. Kop van de site
   -------------------------------------------------------------------------- */
.jk-skip {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 0.7rem 1.2rem;
  font-family: var(--util);
  text-decoration: none;
}

.jk-skip:focus {
  top: 1rem;
}

.jk-masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.jk-masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.jk-logo {
  flex-shrink: 0;
  line-height: 0;
}

.jk-logo img {
  height: 30px;
  width: auto;
}

.jk-nav {
  display: none;
}

@media (min-width: 64rem) {
  .jk-nav {
    display: block;
  }
  .jk-burger {
    display: none;
  }
}

.jk-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.jk-nav__item {
  position: relative;
}

.jk-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 1.4rem 0;
  font-family: var(--util);
  font-size: var(--t-cap);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.jk-nav__item:hover > .jk-nav__link,
.jk-nav__item.current-menu-item > .jk-nav__link {
  border-color: var(--gold);
}

.jk-nav__caret {
  width: 0.7em;
  height: 0.7em;
}

.jk-nav__sub {
  position: absolute;
  top: 100%;
  left: -1rem;
  min-width: 16rem;
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--gold);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s var(--ease), visibility 0.18s;
}

.jk-nav__item:hover > .jk-nav__sub,
.jk-nav__item:focus-within > .jk-nav__sub {
  opacity: 1;
  visibility: visible;
}

.jk-nav__sub a {
  display: block;
  padding: 0.55rem 1rem;
  font-family: var(--body-face);
  font-size: var(--t-small);
  text-decoration: none;
  color: var(--ink-soft);
}

.jk-nav__sub a:hover {
  background: var(--paper-warm);
  color: var(--ink);
}

.jk-masthead__aside {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.jk-lang {
  display: flex;
  gap: 0.45rem;
  font-family: var(--util);
  font-size: var(--t-cap);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.jk-lang a {
  text-decoration: none;
  color: var(--caption);
}

.jk-lang a[aria-current="true"],
.jk-lang a:hover {
  color: var(--ink);
}

@media (max-width: 40rem) {
  .jk-masthead .jk-btn {
    display: none;
  }
}

.jk-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.jk-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  margin-inline: auto;
  background: var(--ink);
  transition: transform 0.25s var(--ease), opacity 0.2s;
}

.jk-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.jk-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.jk-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.jk-drawer {
  position: fixed;
  inset: 4.25rem 0 0 0;
  z-index: 99;
  padding: 1.5rem var(--gutter) 3rem;
  background: var(--paper);
  overflow-y: auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.3s var(--ease), visibility 0.3s;
}

.jk-drawer.is-open {
  transform: translateY(0);
  visibility: visible;
}

.jk-drawer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jk-drawer > ul > li {
  border-bottom: 1px solid var(--rule);
}

.jk-drawer > ul > li > a {
  display: block;
  padding: 0.9rem 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.35rem;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

.jk-drawer .jk-nav__sub {
  position: static;
  opacity: 1;
  visibility: visible;
  border: 0;
  background: none;
  padding: 0 0 0.8rem 1rem;
  min-width: 0;
}

body.jk-locked {
  overflow: hidden;
}

/* -----------------------------------------------------------------------------
   10. Index
   De keynotes en de agenda zijn geen kaarten maar een genummerde lijst met
   hairlines — de inhoudsopgave van de reportage.
   -------------------------------------------------------------------------- */
.jk-index {
  border-top: 1px solid var(--rule-strong);
}

.jk-section--ink .jk-index {
  border-top-color: rgba(255, 255, 255, 0.4);
}

.jk-index__row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1.25rem;
  align-items: baseline;
  padding-block: clamp(1.1rem, 2.2vw, 1.7rem);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 52rem) {
  /* Vier kolommen, twee rijen: nummer en beeld overspannen beide rijen, de
     titel staat boven de notitie, de meta rechts. Zo is elke regel één blok
     in plaats van vijf losse dingen op een lijn. */
  .jk-index__row {
    grid-template-columns: 2.5rem 7rem minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 1.5rem;
    row-gap: 0.3rem;
    align-items: center;
  }
  .jk-index__num,
  .jk-index__thumb,
  .jk-index__meta,
  .jk-index__row > .jk-date {
    grid-row: 1 / span 2;
  }
  .jk-index__title {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
  }
  .jk-index__note {
    grid-column: 3;
    grid-row: 2;
    align-self: start;
  }
  .jk-index__meta {
    grid-column: 4;
  }
  /* De agenda heeft geen beeld: daar valt de beeldkolom weg. */
  .jk-index--nomedia .jk-index__row {
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  }
  .jk-index--nomedia .jk-index__title,
  .jk-index--nomedia .jk-index__note {
    grid-column: 2;
  }
  .jk-index--nomedia .jk-index__meta {
    grid-column: 3;
  }
}

/* Het beeld staat er altijd, ook op een telefoon. In een reportage is de foto
   geen hover-extraatje. */
.jk-index__thumb {
  order: -1;
  width: 100%;
  max-width: 11rem;
}

@media (min-width: 52rem) {
  .jk-index__thumb {
    order: 0;
    max-width: none;
  }
}

.jk-index__thumb img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.92);
  transition: filter 0.3s var(--ease), transform 0.4s var(--ease);
}

.jk-index__row:hover .jk-index__thumb img,
.jk-index__row:focus-within .jk-index__thumb img {
  filter: saturate(1.05);
  transform: scale(1.02);
}

.jk-index__num {
  font-family: var(--util);
  font-size: var(--t-cap);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gold-deep);
}

.jk-index__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.2rem, 0.95rem + 0.9vw, 1.6rem);
  line-height: 1.12;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}

.jk-section--ink .jk-index__title {
  color: #fff;
}

.jk-index__title a {
  text-decoration: none;
}

.jk-index__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.jk-index__row:hover .jk-index__title {
  color: var(--gold-deep);
}

.jk-section--ink .jk-index__row:hover .jk-index__title {
  color: var(--gold);
}

.jk-index__note {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--caption);
  max-width: 46rem;
}

.jk-index__meta {
  font-family: var(--util);
  font-size: var(--t-cap);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--caption);
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   11. Datumkolom in de agenda
   -------------------------------------------------------------------------- */
.jk-date {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
}

.jk-date__day {
  display: block;
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem);
  letter-spacing: -0.02em;
}

.jk-date__month {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--util);
  font-size: var(--t-cap);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   11b. Bewijsstrook
   Waar eerder een grijze logowand stond: dezelfde informatie als redactionele
   regel, zodat het bij de rest van de pagina hoort.
   -------------------------------------------------------------------------- */
.jk-proof {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.jk-proof__label {
  flex-shrink: 0;
}

.jk-proof__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.jk-proof__list li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--util);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.jk-proof__list svg {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--gold-deep);
  flex-shrink: 0;
}

.jk-proof__where {
  font-size: var(--t-small);
  color: var(--caption);
}

.jk-proof__list img {
  height: clamp(1.5rem, 3vw, 2.1rem);
  width: auto;
  opacity: 0.75;
  filter: grayscale(1);
}

/* -----------------------------------------------------------------------------
   12. Citaat
   -------------------------------------------------------------------------- */
.jk-pullquote {
  max-width: 44rem;
}

.jk-pullquote blockquote {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.35rem, 1rem + 1.4vw, 2.1rem);
  line-height: 1.3;
  color: inherit;
  text-indent: -0.4em;
  text-wrap: balance;
}

.jk-pullquote figcaption {
  margin-top: 1.4rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
}

.jk-section--ink .jk-pullquote blockquote {
  color: #fff;
}

.jk-section--ink .jk-pullquote figcaption {
  border-top-color: rgba(255, 255, 255, 0.22);
}

/* -----------------------------------------------------------------------------
   13. Video als filmbeeld
   -------------------------------------------------------------------------- */
.jk-still {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--ink);
  cursor: pointer;
  overflow: hidden;
}

.jk-still img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: opacity 0.3s var(--ease);
}

.jk-still:hover img {
  opacity: 0.72;
}

.jk-still iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* -----------------------------------------------------------------------------
   14. Boeken als gefotografeerde objecten
   -------------------------------------------------------------------------- */
.jk-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: end;
}

.jk-vol img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  box-shadow: 0 10px 26px rgba(20, 21, 26, 0.16);
  transition: transform 0.3s var(--ease);
}

.jk-vol a:hover img {
  transform: translateY(-5px);
}

.jk-vol figcaption {
  margin-top: 0.85rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rule);
}

.jk-vol__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}

/* -----------------------------------------------------------------------------
   15. Formulier
   -------------------------------------------------------------------------- */
.jk-form {
  display: grid;
  gap: 1.1rem;
}

@media (min-width: 40rem) {
  .jk-form {
    grid-template-columns: 1fr 1fr;
  }
  .jk-field--full {
    grid-column: 1 / -1;
  }
}

.jk-field {
  display: grid;
  gap: 0.35rem;
}

.jk-field label {
  font-family: var(--util);
  font-size: var(--t-cap);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.jk-req {
  color: var(--gold-deep);
}

.jk-field input,
.jk-field textarea,
.jk-field select {
  padding: 0.7rem 0.15rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  font-family: var(--body-face);
  transition: border-color 0.2s var(--ease);
}

.jk-field input:focus,
.jk-field textarea:focus,
.jk-field select:focus {
  outline: 0;
  border-bottom-color: var(--gold-deep);
  border-bottom-width: 2px;
}

.jk-field textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.jk-field__error {
  font-family: var(--util);
  font-size: var(--t-cap);
  color: #9d2f22;
}

.jk-field[data-invalid="true"] input,
.jk-field[data-invalid="true"] textarea {
  border-bottom-color: #9d2f22;
}

.jk-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.jk-form__status {
  grid-column: 1 / -1;
  padding: 0.85rem 1.1rem;
  background: var(--paper-warm);
  border-left: 2px solid var(--gold);
  font-size: var(--t-small);
}

.jk-form__status[hidden] {
  display: none;
}

/* -----------------------------------------------------------------------------
   16. Colofon
   -------------------------------------------------------------------------- */
.jk-colofon {
  padding-block: clamp(2.5rem, 5vw, 4rem) 1.75rem;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.66);
  font-size: var(--t-small);
}

.jk-colofon h2 {
  margin-bottom: 0.9rem;
  font-family: var(--util);
  font-size: var(--t-cap);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

.jk-colofon ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.jk-colofon a {
  text-decoration: none;
}

.jk-colofon a:hover {
  color: var(--gold);
}

.jk-colofon__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--util);
  font-size: var(--t-cap);
  letter-spacing: 0.06em;
}

.jk-social {
  display: flex;
  gap: 1.1rem;
}

.jk-social a svg {
  width: 1.05rem;
  height: 1.05rem;
}

.jk-social a:hover svg {
  color: var(--gold);
}

/* -----------------------------------------------------------------------------
   17. Utils
   -------------------------------------------------------------------------- */
.jk-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.jk-icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jk-accent {
  color: var(--gold);
}

/* -----------------------------------------------------------------------------
   19. Merkmiddelen van de huidige site
   Drie dingen die het ontwerp van jitskekramer.nl zijn eigen gezicht geven en
   die we hier overnemen in plaats van vervangen.
   -------------------------------------------------------------------------- */

/* 19b. Het gouden vlak. Op de huidige site is goud geen accentlijntje maar een
   hele band waar de sectie in staat: één keer bij de keynotes, één keer bij de
   agenda. Donkere tekst op goud, geen wit. */
.jk-section--gold {
  background: var(--gold);
  color: var(--ink);
}

.jk-section--gold .jk-head,
.jk-section--gold .jk-index__title,
.jk-section--gold .jk-date {
  color: var(--ink);
}

.jk-section--gold .jk-cap,
.jk-section--gold .jk-index__note,
.jk-section--gold .jk-index__meta,
.jk-section--gold .jk-credit {
  color: rgba(20, 21, 26, 0.78);
}

.jk-section--gold .jk-index__num {
  color: rgba(20, 21, 26, 0.85);
}

/* Label, feiten en bijschriftlijn op goud: donker, niet goud-op-goud. */
.jk-section--gold .jk-label,
.jk-section--gold .jk-facts dd {
  color: var(--ink);
}

.jk-section--gold .jk-facts dt {
  color: rgba(20, 21, 26, 0.78);
}

.jk-section--gold .jk-fig figcaption,
.jk-section--gold .jk-facts > div {
  border-color: rgba(20, 21, 26, 0.22);
}

.jk-section--gold .jk-index,
.jk-section--gold .jk-index__row {
  border-color: rgba(20, 21, 26, 0.22);
}

.jk-section--gold .jk-index__row:hover .jk-index__title {
  color: #fff;
}

.jk-section--gold .jk-btn--plain {
  --btn-fill: var(--ink);
  --btn-fill-fg: #fff;
  color: var(--ink);
  border-color: rgba(20, 21, 26, 0.4);
}

.jk-section--gold .jk-link {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* 19d. Twee panelen naast elkaar, elk met eigen beeld — de manier waarop Jam
   Cultures en Deep Democracy nu naast elkaar staan. */
/* Binnen de box: alleen een slider mag van rand tot rand lopen. */
.jk-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  width: min(100% - var(--gutter) * 2, var(--page));
  margin-inline: auto;
}

/* Geen tekst meer over deze foto's: het beeld staat boven, de tekst eronder
   op antraciet. Leesbaarheid hangt zo niet meer af van hoe donker de foto
   toevallig is. */
@media (min-width: 52rem) {
  .jk-duo {
    grid-template-columns: 1fr 1fr;
  }
}

.jk-duo__panel {
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: #fff;
}

.jk-duo__panel img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.jk-duo__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

.jk-duo__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
}

.jk-duo__panel p {
  max-width: 32rem;
  margin-top: 0.7rem;
  font-size: var(--t-small);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.jk-duo__panel .jk-link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1.25rem;
}


/* -----------------------------------------------------------------------------
   20. Hover en focus
   Alles hier is puur CSS en beweegt alleen `transform` en `opacity`. Elke
   hover heeft een `:focus-visible`-tegenhanger, zodat wie met het toetsenbord
   navigeert dezelfde aanwijzing krijgt als wie een muis gebruikt.
   -------------------------------------------------------------------------- */

/* 20a. Menu: de gouden streep tekent zich van links naar rechts, in plaats van
   in één keer aan te floepen. */
.jk-nav__link {
  border-bottom-color: transparent;
}

.jk-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s var(--ease);
}

.jk-nav__item:hover > .jk-nav__link::after,
.jk-nav__item:focus-within > .jk-nav__link::after,
.jk-nav__item.current-menu-item > .jk-nav__link::after {
  transform: scaleX(1);
}

/* 20b. Indexregel. Dit is de belangrijkste hover van de pagina: hier kiest een
   bezoeker een keynote of een event. De regel schuift een haarbreedte op, het
   nummer kleurt goud en er tekent zich een gouden lijn onder de regel. */
.jk-index__row {
  transition: background-color 0.25s var(--ease);
}

.jk-index__row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--gold-deep);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--ease);
}

.jk-index__row:hover::after,
.jk-index__row:focus-within::after {
  transform: scaleX(1);
}

.jk-index__num,
.jk-index__title,
.jk-date {
  transition: color 0.25s var(--ease), translate 0.3s var(--ease);
}

.jk-index__row:hover .jk-index__num,
.jk-index__row:focus-within .jk-index__num {
  color: var(--gold-deep);
}

.jk-index__row:hover .jk-index__title,
.jk-index__row:focus-within .jk-index__title {
  translate: 0.35rem 0;
}

/* 20c. Boeken: de omslag tilt al op. Daar komt een gouden bijschriftlijn bij
   die met de omslag mee reageert. */
.jk-vol figcaption {
  position: relative;
}

.jk-vol figcaption::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--gold-deep);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--ease);
}

.jk-vol:hover figcaption::before,
.jk-vol:focus-within figcaption::before {
  transform: scaleX(1);
}

/* 20d. Videobeeld: het afspeel-label schuift naar binnen vanaf de rand. */
.jk-still__play {
  transition: background 0.22s var(--ease), color 0.22s var(--ease),
    translate 0.3s var(--ease);
}

.jk-still:hover .jk-still__play,
.jk-still:focus-visible .jk-still__play {
  translate: 0.35rem 0;
}

/* 20e. Panelen: het beeld ademt langzaam in, de tekst blijft staan. */
.jk-duo__panel img {
  transition: transform 0.7s var(--ease);
}

.jk-duo__panel:hover img,
.jk-duo__panel:focus-within img {
  transform: scale(1.04);
}

/* 20f. Formulier: het label kleurt mee zodra het veld actief is, zodat je ziet
   waar je bent zonder de rand te hoeven volgen. */
.jk-field label {
  transition: color 0.2s var(--ease);
}

.jk-field:focus-within label {
  color: var(--gold-deep);
}

/* 20g. Social-iconen in het colofon. */
.jk-social a svg {
  transition: transform 0.25s var(--ease), color 0.2s var(--ease);
}

.jk-social a:hover svg,
.jk-social a:focus-visible svg {
  transform: translateY(-2px);
}

/* 20h. Bijschriften bij een figuur die zelf een link is. */
.jk-fig a:hover img,
.jk-fig a:focus-visible img {
  filter: brightness(1.04);
}

/* Wie minder beweging wil, krijgt alleen de kleurwissels. Alle verplaatsingen,
   vullingen en schaalslagen gaan uit — de aanwijzing blijft, de beweging niet. */
@media (prefers-reduced-motion: reduce) {
  .jk-btn::before,
  .jk-nav__link::after,
  .jk-index__row::after,
  .jk-vol figcaption::before {
    transition: none;
    transform: scaleX(1) scaleY(1);
  }

  .jk-btn::before {
    transform: scaleY(0);
  }

  .jk-btn:hover::before,
  .jk-btn:focus-visible::before {
    transform: scaleY(1);
  }

  .jk-link::before,
  .jk-link::after,
  .jk-index__title,
  .jk-still__play,
  .jk-duo__panel img,
  .jk-social a svg {
    transition: opacity 0.2s ease, color 0.2s ease;
  }

  .jk-index__row:hover .jk-index__title,
  .jk-still:hover .jk-still__play,
  .jk-social a:hover svg {
    translate: 0;
    transform: none;
  }

  .jk-duo__panel:hover img {
    transform: none;
  }
}

/* -----------------------------------------------------------------------------
   21. Binnenpagina's
   De homepage is een reportage; een binnenpagina is een artikel. Zelfde stem,
   rustiger opbouw: een kop over de halve breedte, één tekstkolom op leesmaat,
   en beeld dat uit die kolom mag breken.
   -------------------------------------------------------------------------- */
.jk-pagehead {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.jk-pagehead--warm {
  background: var(--paper-warm);
}

.jk-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  margin-bottom: 1rem;
}

/* Terugkoppeling naar het overzicht. Geen broodkruimelbalk: één duidelijke
   stap terug is genoeg op een site van deze omvang. */
.jk-back {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-family: var(--util);
  font-size: var(--t-cap);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--caption);
  transition: color 0.2s var(--ease), translate 0.25s var(--ease);
}

.jk-back::before {
  content: "\2190";
}

.jk-back:hover,
.jk-back:focus-visible {
  color: var(--ink);
  translate: -0.2rem 0;
}

/* Uitvoer van de editor. Alles wat een redacteur in WordPress typt landt hier,
   dus dit blok moet elk element aankunnen dat de editor kan maken. */
.jk-article {
  max-width: var(--measure);
}

.jk-article > * + * {
  margin-top: 1.05em;
}

.jk-article h2,
.jk-article h3,
.jk-article h4 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.12;
  color: var(--ink);
  margin-top: 2em;
}

.jk-article h2 {
  font-size: var(--t-deck);
}
.jk-article h3 {
  font-size: var(--t-lead);
}
.jk-article h4 {
  font-size: 1.05rem;
}

.jk-article a {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 2px;
}

.jk-article a:hover {
  color: var(--gold-deep);
}

.jk-article ul,
.jk-article ol {
  padding-left: 1.2em;
}

.jk-article li + li {
  margin-top: 0.35em;
}

.jk-article blockquote {
  margin-block: 1.75em;
  padding-left: 1.25rem;
  border-left: 2px solid var(--gold);
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.3;
  color: var(--ink);
}

.jk-article figure {
  margin-block: 1.75em;
}

.jk-article figcaption {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--util);
  font-size: var(--t-cap);
  letter-spacing: 0.06em;
  color: var(--caption);
}

/* Tabellen mogen breed zijn maar de pagina mag nooit zijwaarts schuiven. */
.jk-article table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
}

/* De scroll zit in .jk-scroll (zie inc/content.php), niet op de tabel zelf:
   display:block op een <table> haalt de tabelsemantiek weg, waardoor een
   schermlezer geen rijen en kolommen meer aankondigt. */
.jk-scroll {
  overflow-x: auto;
  max-width: 100%;
  margin-block: 1.5em;
}

.jk-scroll:focus-visible {
  outline: 3px solid var(--gold-deep);
  outline-offset: 2px;
}

.jk-article th,
.jk-article td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}

.jk-article th {
  font-family: var(--util);
  font-size: var(--t-cap);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Feitenlijst: label links, waarde rechts. Gebruikt op keynote- en
   agendapagina's voor duur, vorm, plaats en organisator. */
.jk-facts {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Op leesgrootte, niet op bijschriftgrootte: dit is boekingsinformatie —
   duur, vorm, taal, ISBN — geen onderschrift. Gemeten op 12px op een breed
   scherm, en dat was te klein. */
.jk-facts > div,
.jk-facts > li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--util);
  font-size: var(--t-small);
  letter-spacing: 0.02em;
  color: var(--caption);
}

.jk-facts dt,
.jk-facts .jk-facts__label {
  font-size: var(--t-cap);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-self: baseline;
}

.jk-facts dd,
.jk-facts .jk-facts__value {
  margin: 0;
  font-weight: 500;
  color: var(--ink);
}

.jk-section--ink .jk-facts > div,
.jk-section--ink .jk-facts > li {
  border-bottom-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.6);
}

.jk-section--ink .jk-facts dd {
  color: #fff;
}

/* -----------------------------------------------------------------------------
   22. Expertblok
   Wie zegt dit, en waarom mag zij dat zeggen. Staat onder elke inhoudelijke
   pagina. Dit is het onderdeel dat de site het hardst miste: de hele site
   beweert veel over Jitske en toont nergens waar dat op rust.
   -------------------------------------------------------------------------- */
.jk-expert {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

@media (min-width: 52rem) {
  .jk-expert {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  }
}

.jk-expert__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.jk-expert__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--t-lead);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--ink);
}

.jk-expert__role {
  margin-top: 0.3rem;
}

.jk-expert__text {
  max-width: var(--measure);
  margin-top: 1rem;
}

.jk-expert .jk-facts {
  margin-top: 1.5rem;
  max-width: 30rem;
}

/* -----------------------------------------------------------------------------
   23. Zoekresultaten en lege staten
   -------------------------------------------------------------------------- */
.jk-empty {
  max-width: var(--measure);
}

.jk-searchform {
  display: flex;
  gap: 0.75rem;
  max-width: 28rem;
  margin-top: 1.5rem;
}

.jk-searchform input {
  flex: 1;
  padding: 0.7rem 0.15rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--body-face);
}

.jk-searchform input:focus {
  outline: 0;
  border-bottom-color: var(--gold-deep);
  border-bottom-width: 2px;
}

/* Maandkop in het agenda-archief. */
.jk-monthhead {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--util);
  font-size: var(--t-cap);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.jk-monthhead:first-child {
  margin-top: 0;
}

/* Paginering. */
.jk-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 3rem;
  font-family: var(--util);
  font-size: var(--t-cap);
  letter-spacing: 0.08em;
}

.jk-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: 0.6rem;
  border: 1px solid var(--rule);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.jk-pagination .page-numbers:hover,
.jk-pagination .page-numbers:focus-visible {
  border-color: var(--gold-deep);
  color: var(--gold-deep);
}

.jk-pagination .page-numbers.current {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* -----------------------------------------------------------------------------
   24. Beeldreeks
   Een reeks foto's halverwege een artikel, met ongelijke breedtes zodat het
   geen contactafdruk wordt. Elk beeld houdt zijn eigen bijschrift.
   -------------------------------------------------------------------------- */
.jk-strip {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: clamp(2rem, 4vw, 3.25rem);
}

.jk-strip > * {
  grid-column: 1 / -1;
}

@media (min-width: 56rem) {
  /* Het patroon herhaalt zich per drie: breed, smal-met-verspringing, midden.
     Zo krijgt de reeks ritme zonder dat er per foto iets ingesteld hoeft. */
  .jk-strip > *:nth-child(3n + 1) {
    grid-column: 1 / 8;
  }
  .jk-strip > *:nth-child(3n + 2) {
    grid-column: 8 / -1;
    margin-top: clamp(2rem, 5vw, 4.5rem);
  }
  .jk-strip > *:nth-child(3n + 3) {
    grid-column: 3 / 11;
  }
}

.jk-strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.jk-strip > *:nth-child(3n + 3) img {
  aspect-ratio: 16 / 9;
}

/* -----------------------------------------------------------------------------
   26. Foutensamenvatting
   Bij een afgekeurd formulier springt de focus hierheen. Zonder zo'n
   samenvatting moet iemand met een schermlezer het hele formulier aflopen om
   te vinden wat er mis is.
   -------------------------------------------------------------------------- */
.jk-errors {
  grid-column: 1 / -1;
  padding: 1rem 1.1rem;
  border: 2px solid #9d2f22;
  background: var(--paper);
}

.jk-errors:focus {
  outline: 3px solid var(--gold-deep);
  outline-offset: 3px;
}

.jk-errors h2 {
  font-family: var(--util);
  font-size: var(--t-cap);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9d2f22;
  margin-bottom: 0.5rem;
}

.jk-errors ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: var(--t-small);
}

.jk-errors a {
  color: var(--ink);
}

.jk-errors[hidden] {
  display: none;
}

/* -----------------------------------------------------------------------------
   27. Toestemmingsbanner
   Geen modal, geen overlay: een strook onderaan die je kunt negeren. Weigeren
   en accepteren zijn even groot en staan naast elkaar — geen dark pattern.
   -------------------------------------------------------------------------- */
.jk-consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  padding: clamp(1rem, 2.5vw, 1.5rem) var(--gutter);
  background: var(--paper);
  color: var(--body);
  border-top: 2px solid var(--gold);
  box-shadow: 0 -8px 30px rgba(20, 21, 26, 0.12);
  transform: translateY(100%);
  transition: transform 0.3s var(--ease);
}

.jk-consent.is-visible {
  transform: translateY(0);
}

.jk-consent[hidden] {
  display: none;
}

.jk-consent__inner {
  width: min(100%, var(--page));
  margin-inline: auto;
  display: grid;
  gap: 1rem 2rem;
  align-items: center;
}

@media (min-width: 56rem) {
  .jk-consent__inner {
    grid-template-columns: 1fr auto;
  }
}

.jk-consent__title {
  font-family: var(--util);
  font-size: var(--t-cap);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.jk-consent__text p {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.55;
  max-width: 52rem;
}

.jk-consent__text a {
  color: var(--ink);
  text-decoration-color: var(--gold);
}

.jk-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .jk-consent {
    transition: none;
  }
}

/* -----------------------------------------------------------------------------
   28. Downloads
   -------------------------------------------------------------------------- */
.jk-downloads {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-strong);
  max-width: var(--measure);
}

.jk-download {
  border-bottom: 1px solid var(--rule);
}

.jk-download__link {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 1rem;
  align-items: start;
  padding: 0.9rem 0;
  text-decoration: none;
  color: var(--ink);
  transition: color 0.2s var(--ease);
}

.jk-download__link:hover,
.jk-download__link:focus-visible {
  color: var(--gold-deep);
}

.jk-download__type {
  display: grid;
  place-items: center;
  height: 2.6rem;
  border: 1px solid var(--rule-strong);
  font-family: var(--util);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.jk-download__link:hover .jk-download__type,
.jk-download__link:focus-visible .jk-download__type {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.jk-download__body {
  display: grid;
  gap: 0.15rem;
}

.jk-download__label {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.jk-download__note {
  font-size: var(--t-small);
  color: var(--body);
}

/* -----------------------------------------------------------------------------
   29. Utilities
   Vervangen de inline style-attributen die in de eerste versies in de
   templates stonden. Klein, saai en voorspelbaar: dat is de bedoeling.
   -------------------------------------------------------------------------- */
.jk-list { list-style: none; margin: 0; padding: 0; }
.jk-block { display: block; }
.jk-gold { color: var(--gold-deep); }

.u-mt-1   { margin-top: 1rem; }
.u-mt-11  { margin-top: 1.1rem; }
.u-mt-125 { margin-top: 1.25rem; }
.u-mt-15  { margin-top: 1.5rem; }
.u-mt-175 { margin-top: 1.75rem; }
.u-mt-2   { margin-top: 2rem; }
.u-mt-225 { margin-top: 2.25rem; }
.u-mt-25  { margin-top: 2.5rem; }
.u-mt-m   { margin-top: clamp(2rem, 4vw, 3rem); }
.u-mt-l   { margin-top: clamp(2.5rem, 5vw, 4rem); }

.u-mb-08  { margin-bottom: 0.8rem; }
.u-mb-1   { margin-bottom: 1rem; }
.u-mb-125 { margin-bottom: 1.25rem; }
.u-mb-s   { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.u-mb-m   { margin-bottom: clamp(2rem, 4vw, 3rem); }
.u-mb-l   { margin-bottom: clamp(2rem, 4vw, 3.25rem); }

.u-pt-0   { padding-top: 0; }
.u-pt-s   { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.u-pb-0   { padding-bottom: 0; }
.u-py-s   { padding-block: clamp(2rem, 4vw, 3.5rem); }

.u-max-14 { max-width: 14rem; }
.u-max-20 { max-width: 20rem; }
.u-max-22 { max-width: 22rem; }
.u-max-26 { max-width: 26rem; }
.u-max-30 { max-width: 30rem; }
.u-max-38 { max-width: 38rem; }

.u-rows-2 { row-gap: 2rem; }
.u-rows-l { row-gap: clamp(2.5rem, 5vw, 4rem); }

@media (min-width: 56rem) {
  .u-span-3 { grid-column: span 3; }
  .u-span-6 { grid-column: span 6; }
}

/* Bijschrift onder een video of beeldreeks-item: figuurnummer links, tekst
   rechts, credit eronder. Eerder als inline style in twee templates. */
.jk-figcap {
  display: grid;
  gap: 0.15rem;
  margin-top: 0.7rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--rule);
}

.jk-section--ink .jk-figcap { border-top-color: rgba(255, 255, 255, 0.18); }

/* Label-waardeparen: gegevenskolom naast de aanhef, contactgegevens. */
.jk-pairs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.jk-pairs > li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--rule);
}

.u-mt-03 { margin-top: 0.3rem; }
.u-mt-05 { margin-top: 0.5rem; }
.u-pt-l  { padding-top: clamp(4rem, 7vw, 6rem); }

/* Datum als regel in plaats van als blok, op de detailpagina van een event. */
.jk-date--inline {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  margin-bottom: 0.75rem;
}

.u-mt-08 { margin-top: 0.75rem; }

/* -----------------------------------------------------------------------------
   31. Citaten als slider
   De enige plek die de volle breedte mag pakken. Scroll-snap, geen library;
   de knoppen scrollen alleen, de inhoud is ook zonder JavaScript bereikbaar.
   -------------------------------------------------------------------------- */
.jk-quotes {
  position: relative;
}

.jk-quotes__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(100%, 44rem);
  gap: clamp(1.5rem, 4vw, 3rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: max(var(--gutter), (100% - var(--page)) / 2);
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}

.jk-quotes__track::-webkit-scrollbar {
  display: none;
}

.jk-quotes__item {
  scroll-snap-align: start;
}

.jk-quotes__nav {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.jk-quotes__btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}

.jk-quotes__btn:hover,
.jk-quotes__btn:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.jk-quotes__btn svg {
  width: 1rem;
  height: 1rem;
}

.jk-quotes__btn--prev svg {
  transform: rotate(180deg);
}

.jk-pullquote__who {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.jk-pullquote__who img {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  object-fit: cover;
}

/* -----------------------------------------------------------------------------
   32. Veelgestelde vragen
   Native <details>: toetsenbord, schermlezer en zoekmachine begrijpen het
   zonder script. De vragen voeden ook het FAQPage-schema.
   -------------------------------------------------------------------------- */
.jk-faq {
  display: grid;
  gap: 0.6rem;
  max-width: 54rem;
}

/* Elke vraag is een eigen kaart met een rand, geen regel in een lijst: zo is
   het aanklikbare vlak ook zichtbaar een vlak. */
.jk-faq__item {
  background: var(--paper);
  border: 1px solid var(--rule);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.jk-faq__item:hover,
.jk-faq__item[open] {
  border-color: var(--gold);
}

.jk-faq__item[open] {
  box-shadow: 0 8px 22px rgba(20, 21, 26, 0.07);
}

.jk-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem clamp(1rem, 2vw, 1.5rem);
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem);
  letter-spacing: 0.01em;
  color: var(--ink);
}

.jk-faq__item summary::-webkit-details-marker {
  display: none;
}

/* Het teken rechts: een plus die bij openen naar een min kantelt. */
.jk-faq__item summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  font-family: var(--util);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--gold-deep);
  transition: transform 0.3s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.jk-faq__item summary:hover::after {
  background: var(--paper-warm);
  border-color: var(--gold);
}

.jk-faq__item[open] summary::after {
  transform: rotate(135deg);
  border-color: var(--gold);
}

.jk-faq__item summary:hover,
.jk-faq__item summary:focus-visible {
  color: var(--gold-deep);
}

.jk-faq__body {
  max-width: var(--measure);
  padding: 0 clamp(1rem, 2vw, 1.5rem) 1.25rem;
}

/* Openvouwen met een animatie waar de browser dat kan; waar niet, klapt hij
   gewoon open zoals <details> altijd deed. Geen script nodig. */
@supports selector(::details-content) {
  .jk-faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.35s var(--ease), content-visibility 0.35s allow-discrete;
  }

  .jk-faq__item[open]::details-content {
    block-size: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jk-faq__item::details-content {
    transition: none;
  }
}

.jk-faq__body p {
  margin: 0;
}


/* -----------------------------------------------------------------------------
   33. Zwevende knop
   Verschijnt zodra de opening uit beeld is. Eén echte link, geen widget.
   -------------------------------------------------------------------------- */
.jk-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: calc(var(--float-bottom, 1.25rem));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.2rem 0.85rem 1rem;
  background: var(--gold);
  color: var(--ink);
  border-radius: 999px;
  font-family: var(--display);
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(20, 21, 26, 0.24);
  opacity: 0;
  translate: 0 1rem;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), translate 0.3s var(--ease), background 0.2s var(--ease);
}

.jk-float.is-visible {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

.jk-float:hover,
.jk-float:focus-visible {
  background: var(--ink);
  color: #fff;
}

.jk-float svg {
  width: 1rem;
  height: 1rem;
}

/* Boven de toestemmingsbanner blijven zolang die open staat. */
body.jk-consent-open .jk-float {
  --float-bottom: 7.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .jk-float {
    transition: none;
  }
}

/* -----------------------------------------------------------------------------
   34. Colofon: adres en directe knoppen
   -------------------------------------------------------------------------- */
.jk-colofon__address {
  font-family: var(--body-face);
  font-style: normal;
  line-height: 1.7;
}

.jk-colofon__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.jk-colofon .jk-btn--plain {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

/* -----------------------------------------------------------------------------
   35. Waar ze staat
   Eén sectie voor "wanneer": het eerstvolgende event groot links, de drie
   daarna als lijst rechts. Eerder twee losse secties.
   -------------------------------------------------------------------------- */
.jk-waar__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--t-lead);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--ink);
}

.jk-waar__list .jk-index__row {
  padding-block: 0.9rem;
}

.jk-waar__list .jk-index__title {
  font-size: 1.05rem;
}

/* -----------------------------------------------------------------------------
   36. Slider
   Eén slidermechaniek voor boeken, video's en citaten: een scroll-snap-spoor
   met twee knoppen. Het spoor is zelf scrollbaar en focusbaar, dus met een
   toetsenbord, een touchpad of een veegbeweging kom je er ook zonder de
   knoppen. Dit is de enige plek waar inhoud buiten de box mag lopen: het
   spoor loopt door tot de rand, zodat zichtbaar is dat er meer staat.
   -------------------------------------------------------------------------- */
.jk-slider {
  position: relative;
}

.jk-slider__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  width: min(100% - var(--gutter) * 2, var(--page));
  margin-inline: auto;
  margin-bottom: 1.5rem;
}

.jk-slider__track + .jk-slider__head {
  margin-top: 0.25rem;
  margin-bottom: 0;
}

.jk-slider__track {
  display: grid;
  grid-auto-flow: column;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: max(var(--gutter), (100% - var(--page)) / 2);
  padding-inline: max(var(--gutter), (100% - var(--page)) / 2);
  padding-block: 0.25rem 1rem;
  scrollbar-width: none;
}

.jk-slider__track::-webkit-scrollbar {
  display: none;
}

.jk-slider__track > * {
  scroll-snap-align: start;
}

.jk-slider--covers .jk-slider__track {
  grid-auto-columns: clamp(9rem, 17vw, 13rem);
  align-items: end;
}

.jk-slider--wide .jk-slider__track {
  grid-auto-columns: min(88vw, 30rem);
}

.jk-slider__nav {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.jk-slider__btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), opacity 0.2s var(--ease);
}

.jk-slider__btn svg {
  width: 1.1rem;
  height: 1.1rem;
}

.jk-slider__btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* Aan het eind van het spoor: zichtbaar uitgeschakeld, niet verdwenen — een
   knop die wegspringt kost de bezoeker zijn plek. */
.jk-slider__btn[disabled] {
  opacity: 0.3;
  cursor: default;
}

.jk-slider__btn[disabled]:hover {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--ink);
}

.jk-section--ink .jk-slider__btn {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.jk-section--ink .jk-slider__btn:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

.jk-section--ink .jk-slider__btn[disabled]:hover {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.jk-slider__track:focus-visible {
  outline: 3px solid var(--gold-deep);
  outline-offset: 4px;
}

.jk-section--ink .jk-slider__track:focus-visible {
  outline-color: var(--gold);
}

/* -----------------------------------------------------------------------------
   37. Video's als kaart
   De still is nu een beeld met een ronde afspeelknop erop en de titel eronder.
   De knop is het enige wat op de foto ligt, en dat is een bedieningselement,
   geen tekst.
   -------------------------------------------------------------------------- */
.jk-still__play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  transition: background 0.2s var(--ease), scale 0.2s var(--ease);
}

.jk-still:hover .jk-still__play {
  background: var(--gold);
  scale: 1.08;
}

.jk-still__play svg {
  width: 1.1rem;
  height: 1.1rem;
  margin-left: 0.15rem;
}

.jk-clip {
  margin: 0;
}

.jk-clip .jk-still img {
  aspect-ratio: 16 / 9;
}

/* -----------------------------------------------------------------------------
   38. Vragen met een kaartje ernaast
   De vragenlijst is smal — langer dan 54rem leest een vraag niet meer prettig.
   Rechts bleef daardoor een halve pagina leeg. Daar staat nu de samenvatting
   van de antwoorden plus de twee directe routes, en die blijft meescrollen
   zolang de vragen langsgaan.
   -------------------------------------------------------------------------- */
.jk-faq-grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
}

@media (min-width: 62rem) {
  .jk-faq-grid {
    grid-template-columns: minmax(0, 1fr) 19rem;
    align-items: start;
  }
}

.jk-aside {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--paper-warm);
  border-top: 2px solid var(--gold);
}

@media (min-width: 62rem) {
  .jk-aside {
    position: sticky;
    /* Onder de plakkende kopbalk, niet erachter. */
    top: calc(var(--masthead-h, 4.5rem) + 1.5rem);
  }
}

.jk-aside .jk-label {
  display: block;
  margin-bottom: 1rem;
}

/* De feiten staan hier onder elkaar in plaats van in twee kolommen: de kolom
   is te smal om label en waarde naast elkaar te zetten zonder afbreken. */
.jk-facts--stacked > div {
  display: block;
  padding-block: 0.6rem;
}

.jk-facts--stacked dt {
  margin-bottom: 0.15rem;
}

.jk-facts--stacked dd {
  font-size: var(--t-small);
  line-height: 1.45;
}

.jk-aside__routes {
  margin: 1.25rem 0 0;
  padding: 1rem 0 0;
  list-style: none;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 0.6rem;
}

.jk-aside__routes li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--util);
  font-size: var(--t-small);
}

.jk-aside__routes svg {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
  color: var(--gold-deep);
}

.jk-aside__routes a {
  color: var(--body);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.2em;
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}

.jk-aside__routes a:hover {
  color: var(--gold-deep);
  text-decoration-color: var(--gold);
}

.jk-aside .jk-btn {
  width: 100%;
  margin-top: 1.25rem;
  justify-content: center;
}

/* -----------------------------------------------------------------------------
   39. Sliders, de tweede ronde
   Het spoor is nu ook met de muis te slepen, met een voortgangsbalk en een
   teller erbij. Aan de randen vervaagt de inhoud in plaats van te worden
   afgekapt: dat leest als "hier gaat het verder" in plaats van als een fout.
   -------------------------------------------------------------------------- */
.jk-slider__track {
  cursor: grab;
  /* Zachte randen. Alleen aan de kant waar nog inhoud staat — de klassen
     komen van het script, dus zonder script vervaagt er niets en mist er ook
     niets. */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 100%);
  mask-image: linear-gradient(to right, #000 0, #000 100%);
  transition: -webkit-mask-image 0.3s var(--ease), mask-image 0.3s var(--ease);
}

.jk-slider__track.has-before {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7rem);
  mask-image: linear-gradient(to right, transparent 0, #000 7rem);
}

.jk-slider__track.has-after {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 7rem);
  mask-image: linear-gradient(to left, transparent 0, #000 7rem);
}

.jk-slider__track.has-before.has-after {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7rem, #000 calc(100% - 7rem), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7rem, #000 calc(100% - 7rem), transparent 100%);
}

/* Tijdens het slepen: geen snap (die vecht met de hand), geen tekstselectie,
   en de cursor laat zien dat je vasthoudt. */
.jk-slider__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}

.jk-slider__track.is-dragging a,
.jk-slider__track.is-dragging button,
.jk-slider__track.is-dragging img {
  pointer-events: none;
}

.jk-slider__meta {
  display: none;
  align-items: center;
  gap: 1rem;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 26rem;
  margin-inline: auto;
}

/* De balk hoort bij een muis. Op een telefoon veeg je gewoon en is een
   voortgangsbalk een streep die niets doet. */
@media (min-width: 48rem) {
  .jk-slider__meta:not([hidden]) {
    display: flex;
  }
}

.jk-slider__progress {
  min-width: 8rem;
}

.jk-slider__progress {
  position: relative;
  flex: 1;
  height: 2px;
  background: var(--rule);
  overflow: hidden;
}

.jk-slider__progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--jk-progress, 25%);
  background: var(--gold-deep);
  transition: width 0.2s var(--ease), translate 0.2s var(--ease);
  translate: var(--jk-progress-x, 0) 0;
}

.jk-section--ink .jk-slider__progress {
  background: rgba(255, 255, 255, 0.25);
}

.jk-section--ink .jk-slider__progress span {
  background: var(--gold);
}

.jk-slider__count {
  font-family: var(--util);
  font-size: var(--t-cap);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--caption);
  white-space: nowrap;
}

.jk-section--ink .jk-slider__count {
  color: rgba(255, 255, 255, 0.7);
}

/* -----------------------------------------------------------------------------
   40. Beweging bij het scrollen
   Alles wat binnenkomt, komt één keer rustig binnen: acht pixels omhoog en van
   doorzichtig naar vol, met een klein verschil per element zodat een rij niet
   als blok knippert. Het script zet `jk-js` op <html>; zonder script is er dus
   niets verborgen. Bij voorkeur voor minder beweging staat alles meteen goed.
   -------------------------------------------------------------------------- */
.jk-js .jk-reveal {
  opacity: 0;
  translate: 0 0.75rem;
  transition: opacity 0.7s var(--ease), translate 0.7s var(--ease);
  transition-delay: var(--jk-delay, 0ms);
}

.jk-js .jk-reveal.is-in {
  opacity: 1;
  translate: 0 0;
}

/* Beeld dat binnenkomt schuift een fractie mee: de foto loopt iets achter op
   de pagina en komt tot stilstand. Alleen waar de browser scroll-tijdlijnen
   kent, want met een scroll-luisteraar is dit niet gratis. */
@supports (animation-timeline: view()) {
  .jk-fig--wide img,
  .jk-hero__media img,
  .jk-duo__panel img {
    animation: jk-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 60%;
  }
}

@keyframes jk-rise {
  from { scale: 1.08; }
  to { scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .jk-js .jk-reveal {
    opacity: 1;
    translate: none;
    transition: none;
  }

  .jk-fig--wide img,
  .jk-hero__media img,
  .jk-duo__panel img,
  .jk-hero__cue::after {
    animation: none;
  }
}

/* -----------------------------------------------------------------------------
   41. Aanwijzen
   De hoverlaag van de pagina, op één plek bij elkaar. Alleen voor wie een
   muis heeft: op touch gebeurt er niets van dit alles, daar is elke staat al
   zichtbaar.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  /* Sectiekop: een gouden streep die uitschuift zodra de sectie in beeld komt.
     Het is het enige verschil tussen de koppen onderling, en het markeert waar
     een beat begint. */
  .jk-head {
    position: relative;
    padding-bottom: 0.5rem;
  }

  .jk-head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 3.5rem;
    height: 2px;
    background: var(--gold);
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform 0.6s var(--ease) 0.15s;
  }

  /* Staat de kop nog onder de vouw, dan schuift de streep pas uit als hij in
     beeld komt. Een kop die al zichtbaar was, heeft zijn streep gewoon. */
  .jk-js .jk-reveal.jk-head::after {
    transform: scaleX(0);
  }

  .jk-js .jk-reveal.jk-head.is-in::after {
    transform: scaleX(1);
  }

  /* Boekomslag: tilt op, werpt schaduw, en de rug licht op. */
  .jk-vol a {
    display: block;
    overflow: hidden;
  }

  .jk-vol img {
    transition: transform 0.45s var(--ease), filter 0.45s var(--ease);
  }

  .jk-vol a:hover img {
    transform: translateY(-6px) scale(1.02);
    filter: saturate(1.05);
  }

  /* Video: het beeld komt naar je toe, de knop groeit mee. */
  .jk-still img {
    transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
  }

  .jk-still:hover img {
    transform: scale(1.04);
  }

  /* Paneel: hetzelfde, maar trager — het is een groter vlak. */
  .jk-duo__panel {
    overflow: hidden;
  }

  .jk-duo__panel img {
    transition: transform 0.6s var(--ease);
  }

  .jk-duo__panel:hover img {
    transform: scale(1.03);
  }

  /* Kaartje naast de vragen: licht op zodra je erin gaat werken. */
  .jk-aside {
    transition: box-shadow 0.3s var(--ease);
  }

  .jk-aside:hover {
    box-shadow: 0 10px 30px rgba(20, 21, 26, 0.09);
  }
}

/* De pijl in een knop schuift een halve letter vooruit. Dit hoort niet bij de
   hover-media-query: het werkt ook bij toetsenbordfocus. */
.jk-btn svg,
.jk-link svg {
  transition: translate 0.25s var(--ease);
}

.jk-btn:hover svg,
.jk-btn:focus-visible svg,
.jk-link:hover svg,
.jk-link:focus-visible svg {
  translate: 0.25em 0;
}

@media (prefers-reduced-motion: reduce) {
  .jk-head::after {
    transition: none;
    transform: scaleX(1);
  }

  .jk-vol img,
  .jk-still img,
  .jk-duo__panel img,
  .jk-btn svg,
  .jk-link svg {
    transition: none;
  }
}

/* -----------------------------------------------------------------------------
   42. De grote video
   Eén optreden krijgt de volle breedte van de box, de rest staat in de slider
   eronder. Zes gelijke kaartjes laten een bezoeker niet kiezen; één groot
   beeld met een naam eronder wel.
   -------------------------------------------------------------------------- */
.jk-lead-video {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}

.jk-lead-video .jk-still img {
  aspect-ratio: 16 / 9;
}

.jk-lead-video .jk-still__play {
  width: 4.5rem;
  height: 4.5rem;
}

.jk-lead-video .jk-still__play svg {
  width: 1.4rem;
  height: 1.4rem;
}

.jk-lead-video .jk-cap b {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--t-lead);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}