/* ==========================================================================
   jungske.com

   De wereld: een reisbureau, ergens tussen 1965 en 1975. Teak, crème,
   messing, zee. Eén accentkleur, de gloed van een oranje beeldscherm.
   Afgeleid van een teardown van twin.so, maar met eigen kleuren, eigen
   letters en eigen opbouw. Zie docs/referenties/twin/TEARDOWN.md.

   Volgorde van dit bestand:
     1  letters
     2  tokens
     3  reset
     4  type en kleine onderdelen
     5  knoppen
     6  navigatie en menu
     7  de hero
     8  het vertrekbord
     9  schermen en telefoons
    10  de dossiers (homepage)
    11  overige blokken op de homepage
    12  binnenpagina's
    13  formulier
    14  colofon
    15  beweging
   ========================================================================== */

/* ---------------------------------------------------------------- 1 letters */

@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrumentserif.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* De cursieve krijgt een eigen naam. Twee sneden onder dezelfde naam met
   hetzelfde gewicht laat Chromium soms de verkeerde kiezen. */
@font-face {
  font-family: 'Instrument Serif Cursief';
  src: url('../fonts/instrumentserif-cursief.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

/* De pixelletter is geen grap: het is de letter van de beeldschermen op de
   foto. Alleen voor codes, jaartallen en statusregels. */
@font-face {
  font-family: 'Departure';
  src: url('../fonts/departure.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* ---------------------------------------------------------------- 2 tokens */

:root {
  /* Papier. Warm, zoals een folder die twintig jaar in een la lag. */
  --papier: #f4f1e8;
  --papier-2: #eae4d6;
  --wit: #fcfbf7;

  /* Inkt. Nooit zwart: warm donkerbruin. */
  --inkt: #241f19;
  --inkt-2: #574e42;
  --inkt-3: #6b6152;

  /* Eén accent. */
  --amber: #ffc845;
  --amber-diep: #e0a316;

  /* De vlakken waar een schermafdruk op staat. Uit de foto geplukt en uit
     het kleurenpalet van die tijd: teak, olijf, oker, roest, kastanje.
     Geen enkele koele kleur, want die hoort niet bij deze wereld. */
  --teak: #3b2c1e;
  --olijf: #4f5530;
  --oker: #8a5a1c;
  --roest: #8f3f1e;
  --kastanje: #4a2a22;

  /* De oude namen blijven werken, zodat werk.json niet hoeft te veranderen. */
  --zee: var(--kastanje);
  --palm: var(--olijf);
  --terracotta: var(--roest);
  /* Dezelfde kleur maar dieper, voor als het letters zijn en geen stip. */
  --terracotta-tekst: #a44826;
  --nacht: var(--oker);
  --groen: #55654a;
  --zon: #b4552f;

  --lijn: rgba(36, 31, 25, 0.14);
  --lijn-sterk: rgba(36, 31, 25, 0.3);

  --maat: 1220px;
  --marge: clamp(1.25rem, 5vw, 4rem);
  --sectie: clamp(4rem, 9vw, 7rem);

  /* Curves. Sterk, niet de standaard van de browser. */
  --uit: cubic-bezier(0.23, 1, 0.32, 1);
  --zwaar: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------- 3 reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 1.02rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

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

/* Moet met kracht: een klasse met display:grid wint anders van [hidden]. */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--amber);
  color: var(--inkt);
}

:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.8rem 1.2rem;
  background: var(--inkt);
  color: var(--papier);
  text-decoration: none;
}

.overslaan:focus {
  left: 0;
}

/* De leesbalk bovenaan. Vertelt hoe ver je bent. */
.voortgang {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  z-index: 50;
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: var(--amber);
  pointer-events: none;
}

.alleen-lezer {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------- 4 type en kleine onderdelen */

h1,
h2,
h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.03;
  margin: 0;
  text-wrap: balance;
}

/* Type op de uitersten: monumentaal of piepklein, weinig middenmaat. */
h1 {
  font-size: clamp(3rem, 7.4vw, 6.4rem);
}

h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
}

h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
}

p {
  margin: 0 0 1.1em;
  max-width: 62ch;
}

p:last-child {
  margin-bottom: 0;
}

strong,
b {
  font-weight: 600;
}

em,
.cursief {
  font-family: 'Instrument Serif Cursief', Georgia, serif;
  font-style: normal;
}

/* Technische kantlijn: codes, jaartallen, statusregels. */
.label,
.mono {
  display: block;
  font-family: 'Departure', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--inkt-3);
}

.kleine-letter {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--inkt-2);
}

/* Het pilletje boven een kop */
.pil {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.36rem 0.85rem 0.36rem 0.7rem;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  background: var(--wit);
  font-family: 'Departure', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inkt-2);
  box-shadow: 0 1px 2px rgba(36, 31, 25, 0.05);
}

.pil::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  /* Het stipje mag warmer en feller dan de grote vlakken. */
  background: #b4552f;
}

/* Een link die alleen een streep is */
.streep {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--lijn-sterk);
  padding-bottom: 1px;
  transition: border-color 200ms ease;
}

.streep:hover {
  border-color: var(--inkt);
}

/* De handgeschreven kanttekening */
.kant {
  font-family: 'Instrument Serif Cursief', Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--terracotta-tekst);
  max-width: 22ch;
}

.kant svg {
  width: 70px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
  margin-bottom: 0.3rem;
}

.kant--rechts svg {
  transform: scaleX(-1);
}

/* ---------------------------------------------------------------- layout */

.band {
  width: 100%;
  max-width: var(--maat);
  margin-inline: auto;
  padding-inline: var(--marge);
}

/* Twee kolommen: verhaal en kantlijn. */
.twee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  padding-bottom: var(--sectie);
}

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

.verhaal p {
  font-size: 1.08rem;
  line-height: 1.68;
}

.verhaal h2 {
  margin: 2.4rem 0 1rem;
}

.verhaal > .pil + h2 {
  margin-top: 1.1rem;
}

.verhaal h3 {
  margin: 2rem 0 0.7rem;
}

.verhaal ul {
  margin: 0 0 1.2em;
  padding-left: 1.1rem;
  max-width: 62ch;
}

.verhaal li {
  margin-bottom: 0.5rem;
}

/* De regel die het scharnier van het verhaal is. Krijgt lucht en gewicht.
   Moet .verhaal p verslaan, vandaar de dubbele klasse. */
.verhaal .uitspraak,
.uitspraak {
  margin: 1.8rem 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  max-width: 20ch;
}

/* De drie eisen, genummerd. */
.drie {
  list-style: none;
  counter-reset: drie;
  margin: 0.9rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  border-top: 1px solid var(--lijn);
  padding-top: 1.1rem;
}

.drie li {
  counter-increment: drie;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: baseline;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--inkt-2);
}

.drie li::before {
  content: counter(drie, decimal-leading-zero);
  font-family: 'Departure', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--inkt-3);
}

.drie b {
  color: var(--inkt);
}

/* Een kanttekening in de marge, met een randje eromheen. */
.notitie {
  margin-top: 1.8rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  background: var(--wit);
}

.notitie .label {
  margin-bottom: 0.5rem;
}

.notitie p:not(.label) {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--inkt-2);
}

.kantlijn dl {
  margin: 0 0 2rem;
  border-top: 1px solid var(--inkt);
}

.kantlijn dt {
  padding-top: 0.8rem;
  font-family: 'Departure', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--inkt-3);
}

.kantlijn dd {
  margin: 0.2rem 0 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--lijn);
  color: var(--inkt-2);
  font-size: 0.95rem;
}

/* ---------------------------------------------------------------- 5 knoppen */

.knop,
.stempel {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.78rem 1.4rem;
  border: 1px solid var(--inkt);
  border-radius: 999px;
  background: var(--wit);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--uit), background-color 220ms ease, box-shadow 220ms var(--uit);
}

.knop:active,
.stempel:active {
  transform: translateY(1px);
}

.stempel svg,
.knop svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.knop--amber,
.stempel {
  background: var(--amber);
  border-color: var(--amber);
  /* Moet er staan: anders erft de knop de witte letterkleur van de
     navigatie over de foto, of van het donkere contactblok. */
  color: var(--inkt);
  font-weight: 600;
  box-shadow: 0 2px 0 var(--amber-diep);
}

/* De ingetogen variant, in de tekst. */
.stempel--inkt {
  background: transparent;
  border-color: var(--lijn-sterk);
  box-shadow: none;
  font-weight: 500;
}

.knop--stil {
  background: transparent;
  border-color: rgba(252, 251, 247, 0.55);
  color: var(--wit);
  box-shadow: none;
  font-weight: 500;
}

@media (hover: hover) and (pointer: fine) {
  .knop:hover,
  .stempel:hover {
    box-shadow: 0 6px 18px -8px rgba(36, 31, 25, 0.4);
  }
  .knop--amber:hover,
  .stempel:not(.stempel--inkt):hover {
    background: #ffd469;
  }
  .stempel--inkt:hover {
    background: var(--wit);
    border-color: var(--inkt);
  }
  .knop--stil:hover {
    background: rgba(252, 251, 247, 0.14);
    border-color: var(--wit);
  }
}

/* ------------------------------------------------------ 6 navigatie en menu */

.nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--marge);
  color: var(--wit);
}

/* Boven de foto staan witte letters op een muur die soms fel is. */
.p-home .nav .merk,
.p-home .nav__lijst a,
.p-home .knop-menu {
  text-shadow: 0 1px 12px rgba(20, 14, 8, 0.75);
}

/* Alleen de homepage heeft een foto om overheen te liggen. Op alle andere
   pagina's staat de navigatie gewoon op papier. */
body:not(.p-home) .nav {
  position: sticky;
  color: var(--inkt);
  background: var(--papier);
  border-bottom: 1px solid var(--lijn);
  transition: transform 320ms var(--uit);
}

/* Ga je naar beneden, dan gaat de balk mee weg. Kom je terug, dan is hij er. */
body:not(.p-home) .nav.is-weg {
  transform: translateY(-102%);
}

.merk {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  line-height: 1;
}

.nav__lijst {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
}

.nav__lijst a {
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}

.nav__lijst a:hover,
.nav__lijst a[aria-current='page'] {
  border-color: currentColor;
}

.knop-menu {
  display: none;
  padding: 0.5rem 0.9rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  font-family: 'Departure', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 820px) {
  .nav__lijst {
    display: none;
  }
  .knop-menu {
    display: block;
  }
  .nav .knop {
    display: none;
  }
}

/* Het schermvullende menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  align-content: center;
  padding: var(--marge);
  background: var(--inkt);
  color: var(--papier);
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms var(--uit), visibility 320ms;
}

.menu.is-open {
  opacity: 1;
  visibility: visible;
}

.menu ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid rgba(244, 241, 232, 0.16);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms var(--zwaar), transform 420ms var(--zwaar);
  transition-delay: calc(var(--i, 0) * 60ms + 80ms);
}

.menu.is-open li {
  opacity: 1;
  transform: none;
}

.menu a {
  display: block;
  padding: 0.8rem 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(2.4rem, 11vw, 4rem);
  line-height: 1.1;
  text-decoration: none;
}

.menu__voet {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  font-family: 'Departure', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244, 241, 232, 0.6);
}

body.op-slot {
  overflow: hidden;
}

/* ---------------------------------------------------------------- 7 de hero */

.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--teak);
  color: var(--wit);
}

/* De foto van het reisbureau. De kleur eronder is dezelfde teak, zodat er
   niets oplicht terwijl het beeld nog laadt. */
.hero__beeld {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #6b5334;
  background-image: linear-gradient(168deg, #8a6c44 0%, #6b5334 42%, #3b2c1e 100%);
}

.hero__beeld picture,
.hero__beeld img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__beeld img {
  object-fit: cover;
  object-position: 50% 50%;
}

/* Op een telefoon staat er een eigen staande uitsnede van dezelfde foto,
   rond de balie. Een liggende foto op een telefoon laat bijna niets zien. */
@media (max-width: 700px) {
  .hero__beeld img {
    object-position: 50% 50%;
  }
}

/* De sluier is geen donkere deken over alles. Twee lagen: links waar de kop
   staat, en boven en onder voor de navigatie en het bord. Het raam met de
   zee rechts blijft zo helder als hij is. */
.hero__sluier {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(96deg, rgba(26, 18, 11, 0.84) 0%, rgba(26, 18, 11, 0.7) 28%, rgba(26, 18, 11, 0.36) 54%, rgba(26, 18, 11, 0.08) 76%, rgba(26, 18, 11, 0) 100%),
    linear-gradient(180deg, rgba(26, 18, 11, 0.68) 0%, rgba(26, 18, 11, 0.42) 9%, rgba(26, 18, 11, 0) 24%, rgba(26, 18, 11, 0) 58%, rgba(26, 18, 11, 0.72) 100%);
}

@media (max-width: 700px) {
  .hero__sluier {
    background: linear-gradient(180deg, rgba(26, 18, 11, 0.72) 0%, rgba(26, 18, 11, 0.55) 46%, rgba(26, 18, 11, 0.72) 100%);
  }
}

/* Precies één scherm hoog. Het vertrekbord komt er daarna onder, nog steeds
   op de foto, zodat je bij het openen alleen het beeld ziet. */
.hero__woord {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  min-height: 100dvh;
  /* Alleen boven en onder. Een `padding`-korting zou de zijkant nul maken en
     dan staat de kop niet meer in lijn met de rest van de pagina.
     De maat rekent mee met de schermhoogte, anders zakken de knoppen op een
     laptop van 768 pixels hoog onder de vouw weg. */
  padding-block: clamp(5rem, 9vh, 7rem) clamp(2.5rem, 5vh, 5rem);
}

.hero__woord h1 {
  margin: 1.4rem 0 1.1rem;
  max-width: 13ch;
  text-shadow: 0 2px 30px rgba(20, 14, 8, 0.45);
}

/* De pil is inline, maar als vak in een raster rekt hij zich uit over de
   volle breedte. Vandaar. */
.hero .pil {
  justify-self: start;
}

/* Op een breed scherm loopt de muur op de foto tot ongeveer 43% van de
   breedte. Daar moet alles binnen blijven, punt en al, anders valt de kop op
   de plant en de balie. De maten hieronder zijn gemeten, niet geschat: bij
   deze grootte past "De techniek" nog net op de smalste stand (1024px) en
   blijft er op elk breder scherm minstens 70px rustige muur over. */

.hero__woord p {
  max-width: 44ch;
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  color: rgba(252, 251, 247, 0.88);
}

/* De regel onder de inleiding: het uitgangspunt, in de cursieve. */
.hero__regel {
  margin-top: 0.9rem;
  font-family: 'Instrument Serif Cursief', Georgia, serif;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.35;
  color: rgba(255, 200, 69, 0.92);
}

/* Op een laag scherm valt deze regel weg. Hij is de aanvulling, de knoppen
   zijn de hoofdzaak, en die moeten zichtbaar blijven zonder te scrollen. */
@media (max-height: 745px) {
  .hero__regel {
    display: none;
  }
}

.hero__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 2rem;
}

.hero .pil {
  background: rgba(252, 251, 247, 0.12);
  border-color: rgba(252, 251, 247, 0.3);
  color: rgba(252, 251, 247, 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.hero .pil::before {
  background: var(--amber);
}

@media (min-width: 1000px) {
  .hero__woord {
    /* Hoeveel rustige muur er naast de tekst overblijft.
       De foto is opgemeten: de hoek van de muur zit op 43,2% van de breedte.
       De tekst begint waar de band begint, dus op (100vw - 1220px) / 2 + 64px.
       Wat ertussen past is 546px min 6,77% van de vensterbreedte. Er gaat 3rem
       vanaf zodat de punt niet tegen de hoek aan komt te staan.
       Hoe breder het scherm, hoe smaller die ruimte: de band schuift sneller
       naar rechts dan de muur meegroeit. Daarom rekent dit mee. */
    --muur: calc(546px - 6.77vw - 3rem);
  }
  .hero__woord h1 {
    /* "De techniek" is 3,85 keer de lettergrootte breed. Vandaar de 0,26.
       De 10,5vh is de rem op een laag scherm: liever een kleinere kop dan
       knoppen die je niet ziet. */
    font-size: min(5.5rem, calc(var(--muur) * 0.26), 10.5vh);
    max-width: var(--muur);
    text-wrap: normal;
  }
  .hero__woord p {
    max-width: var(--muur);
  }
}

/* Onder de 1348px staat de band niet meer gecentreerd maar tegen de marge aan.
   Dan klopt de rekensom hierboven niet meer en is de muur smaller dan hij
   lijkt. Gemeten op 1024 en 1280 breed. */
@media (min-width: 1000px) and (max-width: 1347px) {
  .hero__woord {
    --muur: calc(38vw - 4rem);
  }
}

/* --------------------------------------------------------- 8 vertrekbord */

/* Geen los onderdeel maar de onderrand van het beeld: het bord in de
   vertrekhal. Dit is het sterkste eigen idee van de site en het blijft. */
.bord {
  position: relative;
  z-index: 3;
  margin-top: -1px;
  background: rgba(24, 18, 12, 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  border-top: 1px solid rgba(255, 200, 69, 0.35);
  color: var(--amber);
}

.bord--los {
  min-height: 62dvh;
  display: grid;
  align-content: center;
  background: var(--inkt);
  border-top: 0;
}

.bord__band {
  width: 100%;
  max-width: var(--maat);
  margin-inline: auto;
  padding: 1rem var(--marge) 1.4rem;
}

.bord__kap,
.bord__kolommen {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1.5fr) minmax(0, 1fr) 5.5rem;
  gap: 0.5rem 1.4rem;
  align-items: center;
  padding-bottom: 0.5rem;
  font-family: 'Departure', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Niet lichter maken: hieronder zakt de leesbaarheid onder de norm. */
  color: rgba(255, 200, 69, 0.68);
}

.bord__kolommen {
  border-bottom: 1px solid rgba(255, 200, 69, 0.28);
}

.bord__kap {
  justify-content: space-between;
  grid-template-columns: 1fr auto;
  padding-bottom: 0.8rem;
}

.bord__kap span:last-child {
  justify-self: end;
}

.bord__klok {
  font-variant-numeric: tabular-nums;
  color: var(--amber);
}

/* Eén regel op het bord is één project. */
.vlucht {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1.5fr) minmax(0, 1fr) 5.5rem;
  gap: 0.5rem 1.4rem;
  align-items: center;
  padding: 0.72rem 0;
  border-bottom: 1px solid rgba(255, 200, 69, 0.16);
  text-decoration: none;
  font-family: 'Departure', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--amber);
  transition: background-color 180ms ease;
}

.vlucht:last-child {
  border-bottom: 0;
}

.vlucht:hover {
  background: rgba(255, 200, 69, 0.08);
}

.vlucht__naam {
  font-size: 1rem;
  color: #fff6e0;
}

.vlucht__soort {
  color: rgba(255, 200, 69, 0.65);
}

.vlucht__stand {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 246, 224, 0.8);
}

.vlucht__stand::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7fd48a;
}

.vlucht--af .vlucht__stand::before {
  background: #e0774f;
}

/* Elk teken in een eigen klapje, met een naad in het midden */
.klap {
  display: inline-block;
  background: linear-gradient(180deg, #33261a 0 calc(50% - 0.5px), rgba(0, 0, 0, 0.6) calc(50% - 0.5px) calc(50% + 0.5px), #1d1509 calc(50% + 0.5px) 100%);
  padding: 0.14em 0.07em 0.1em;
  margin-right: 0.04em;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.klap--leeg {
  background: none;
  box-shadow: none;
}

/* Zonder deze regel weet niemand dat de rijen links zijn. */
.bord__hint {
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 200, 69, 0.28);
  max-width: none;
  font-family: 'Departure', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 200, 69, 0.62);
}

@media (max-width: 760px) {
  .bord__kolommen {
    display: none;
  }
  /* Elk deel krijgt zijn eigen vakje. Laat je dat aan de browser over, dan
     valt de naam in de smalle jaartalkolom en breekt hij in stukjes. */
  .vlucht {
    grid-template-columns: 4rem minmax(0, 1fr);
    row-gap: 0.2rem;
    padding: 0.9rem 0;
  }
  .vlucht__tijd {
    grid-area: 1 / 1;
  }
  .vlucht__stand {
    grid-area: 1 / 2;
  }
  .vlucht__naam {
    grid-area: 2 / 1 / 3 / 3;
  }
  .vlucht__soort {
    grid-area: 3 / 1 / 4 / 3;
  }
}

/* ------------------------------------------------ 9 schermen en telefoons */

/* Een echte site in een echt venster, met het echte adres erin. Nooit een
   nagemaakt scherm: alles wat hier staat stond op dat moment online. */
.scherm {
  margin: 0;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  background: var(--wit);
  box-shadow: 0 26px 50px -20px rgba(36, 25, 14, 0.45);
}

.scherm__balk {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: clamp(26px, 2.4vw, 34px);
  padding-inline: 0.8rem;
  background: #e6e0d2;
  border-bottom: 1px solid #d3ccbb;
}

.scherm__balk i {
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  flex: none;
  background: #c3bbaa;
}

.scherm__balk i:nth-child(1) {
  background: #d98b6a;
}
.scherm__balk i:nth-child(2) {
  background: var(--amber);
}
.scherm__balk i:nth-child(3) {
  background: #8fb686;
}

.scherm__adres {
  margin-inline: auto;
  padding: 0.2em 0.85em 0.26em;
  border-radius: 999px;
  background: var(--wit);
  border: 1px solid #d8d1c0;
  font-family: 'Departure', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--inkt-2);
  font-style: normal;
  max-width: 62%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scherm img,
.telefoon img {
  width: 100%;
  height: auto;
}

.telefoon {
  margin: 0;
  border: 7px solid var(--teak);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  overflow: hidden;
  background: var(--teak);
  box-shadow: 0 22px 40px -18px rgba(36, 25, 14, 0.5);
}

/* ------------------------------------------------------- 10 de dossiers */

/* De inleiding boven de dossiers. */
.werkkop {
  padding: var(--sectie) 0 0;
}

.werkkop h2 {
  margin: 1.1rem 0 1.4rem;
}

.werkkop__twee {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 3rem);
  align-items: baseline;
}

.werkkop__twee p {
  margin: 0;
}

/* Een hele zin in kapitalen leest niet. Dus gewoon klein en zacht. */
.werkkop__bij {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--inkt-3);
}

@media (max-width: 800px) {
  .werkkop__twee {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
}

.werk {
  max-width: var(--maat);
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--marge) var(--sectie);
}

.dossiers {
  display: grid;
  gap: clamp(3.5rem, 8vw, 6rem);
}

.dossier {
  scroll-margin-top: 5rem;
}

.dossier__kop {
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--inkt);
  margin-bottom: 1.6rem;
}

.dossier__kop h2 {
  margin: 0.7rem 0;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
}

.dossier__kop p {
  color: var(--inkt-2);
  margin: 0;
  max-width: 56ch;
}

/* De plaat loopt uit tot de rand van het scherm. Het vlak eronder heeft de
   kleur van het project zelf. */
/* Het vlak waar een schermafdruk op staat.
   Geen vlakke kleur maar een blad met warm licht dat van linksboven invalt,
   zoals de zon door het raam op de foto boven aan de pagina. Zo hoort de
   onderkant van de site bij de bovenkant. */
.dossier__plaat,
.galerij__doek,
.proef__doek {
  position: relative;
  background-color: var(--vlak, var(--teak));
  background-image:
    radial-gradient(120% 95% at 10% -10%, rgba(255, 233, 186, 0.26), rgba(255, 233, 186, 0) 62%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.26) 100%);
  overflow: hidden;
}

.dossier__plaat {
  display: flex;
  align-items: flex-end;
  gap: clamp(0.8rem, 2vw, 1.8rem);
  padding: clamp(1.4rem, 3vw, 2.6rem);
  padding-bottom: 0;
  margin-right: calc(-1 * (max(var(--marge), (100vw - var(--maat)) / 2 + var(--marge))));
}

/* Het scherm komt omhoog uit het blad terwijl je erlangs scrolt, alsof
   iemand het beeldscherm op de balie omhoog schuift. Alleen transform, dus
   het kost niets. De waarde --op wordt door app.js gezet, van 0 naar 1. */
html.js .dossier__plaat .scherm,
html.js .dossier__plaat .telefoon,
html.js .proef__doek .scherm,
html.js .galerij__doek .scherm,
html.js .galerij__doek .telefoon {
  transform: translate3d(0, calc((1 - var(--op, 1)) * 26px), 0);
  will-change: transform;
}

/* De telefoon komt iets later, dat leest als diepte. */
html.js .dossier__plaat .telefoon {
  transform: translate3d(0, calc((1 - var(--op, 1)) * 44px), 0);
}

@media (prefers-reduced-motion: reduce) {
  html.js .dossier__plaat .scherm,
  html.js .dossier__plaat .telefoon,
  html.js .proef__doek .scherm,
  html.js .galerij__doek .scherm,
  html.js .galerij__doek .telefoon {
    transform: none;
  }
}

.dossier__plaat .scherm {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: -2rem;
}

.dossier__plaat .telefoon {
  flex: 0 0 clamp(6rem, 15%, 11rem);
  margin-bottom: -1rem;
}

.dossier__feit {
  margin: 1.2rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--lijn);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.68rem;
  line-height: 1.6;
  max-width: 52ch;
}

.dossier__meer {
  margin-top: 1.2rem;
}

/* Op een casuspagina staat de plaat in het midden en loopt hij naar beide
   kanten uit tot de rand van het scherm. */
.dossier__plaat--breed {
  --uitloop: calc((100vw - var(--maat)) / 2 + var(--marge));
  margin-inline: calc(-1 * max(var(--marge), var(--uitloop)));
  padding-inline: clamp(2rem, 8vw, 7rem);
}

@media (max-width: 900px) {
  .dossier__plaat {
    margin-inline: calc(-1 * var(--marge));
  }
  .dossier__plaat .telefoon {
    display: none;
  }
  .dossier__plaat .scherm {
    flex-basis: 100%;
  }
}

/* ------------------------------------- 11 overige blokken op de homepage */

/* Waar kan ik mee helpen. De bezoeker kiest zijn eigen vraag. */
.keuze {
  padding: var(--sectie) 0;
}

.keuze__vraag {
  margin-bottom: 2rem;
}

.keuze__lijst {
  border-top: 1px solid var(--inkt);
}

.keuze__rij {
  display: grid;
  grid-template-columns: 3rem minmax(0, 17rem) minmax(0, 1fr);
  gap: 0.4rem 1.6rem;
  align-items: baseline;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--lijn);
  text-decoration: none;
  transition: background-color 200ms ease;
}

/* De inhoud schuift, het vlak eronder niet, en de rechterkolom blijft op
   zijn plek. Met translate in plaats van padding, zie de index hierboven. */
.keuze__rij > *:not(.keuze__hoe) {
  transition: translate 260ms var(--uit);
}

.keuze__rij:hover > *:not(.keuze__hoe) {
  translate: 0.6rem;
}

.keuze__rij:hover {
  background: rgba(252, 251, 247, 0.6);
}

.keuze__nr {
  font-family: 'Departure', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--inkt-3);
}

.keuze__wat {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.2;
}

.keuze__hoe {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--inkt-2);
}

@media (max-width: 860px) {
  .keuze__rij {
    grid-template-columns: 2.4rem minmax(0, 1fr);
    row-gap: 0.35rem;
  }
  .keuze__hoe {
    grid-column: 2;
  }
}

/* Het kleinere werk, als tabel. */
.kort {
  padding: var(--sectie) 0;
}

.kort__kop {
  margin-bottom: 2rem;
}

.kort__kop .label {
  margin-top: 0.8rem;
}

.kort__lijst {
  border-top: 1px solid var(--inkt);
}

.kort__item {
  display: grid;
  grid-template-columns: 3rem 16rem minmax(0, 1fr);
  gap: 0.4rem 1.5rem;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--lijn);
  color: inherit;
}

.kort__item span {
  font-family: 'Departure', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--inkt-3);
}

.kort__item h3 {
  margin: 0;
  font-size: 1.35rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.kort__item h3 svg {
  width: 13px;
  height: 13px;
  flex: none;
  fill: none;
  stroke: var(--inkt-3);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

a.kort__item {
  text-decoration: none;
  transition: background-color 200ms ease;
}

a.kort__item > * {
  transition: translate 260ms var(--uit);
}

a.kort__item:hover {
  background: var(--papier-2);
}

a.kort__item:hover > * {
  translate: 0.6rem;
}

.kort__item p {
  margin: 0;
  color: var(--inkt-2);
  font-size: 0.95rem;
}

@media (max-width: 800px) {
  .kort__item {
    grid-template-columns: 2.4rem minmax(0, 1fr);
  }
  .kort__item p {
    grid-column: 2;
  }
}

/* De korte introductie van Patrick, meteen onder het vertrekbord. */
.intro {
  padding: var(--sectie) 0;
  background: var(--papier-2);
}

.intro__twee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: start;
}

.intro h2 {
  margin-top: 1.1rem;
  max-width: 12ch;
}

.intro__woord p {
  font-size: 1.05rem;
  line-height: 1.68;
  max-width: 60ch;
}

@media (max-width: 900px) {
  .intro__twee {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .intro h2 {
    max-width: none;
  }
}

/* De inleiding boven "ook buiten de reiswereld" */
.kort__onder {
  margin-top: 1rem;
  max-width: 62ch;
  color: var(--inkt-2);
}

/* Hoe ik werk: vier regels naast elkaar, genummerd. */
.werkwijze {
  padding: var(--sectie) 0;
  background: var(--papier-2);
}

.werkwijze__kop h2 {
  margin-top: 1.1rem;
  margin-bottom: 2.2rem;
}

.werkwijze__lijst {
  list-style: none;
  counter-reset: stap;
  margin: 0;
  padding: 1.4rem 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.5rem);
  border-top: 1px solid var(--inkt);
}

.werkwijze__lijst li {
  counter-increment: stap;
}

.werkwijze__lijst li::before {
  content: counter(stap, decimal-leading-zero);
  display: block;
  margin-bottom: 0.7rem;
  font-family: 'Departure', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--terracotta-tekst);
}

.werkwijze__lijst span {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.2;
}

@media (max-width: 900px) {
  .werkwijze__lijst {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* Door naar het volledige overzicht. */
.meer {
  padding: var(--sectie) 0;
}

.meer__twee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-top: 1.6rem;
  border-top: 1px solid var(--inkt);
}

.meer__twee h2 {
  margin-bottom: 0.9rem;
}

.meer__twee p {
  margin: 0;
  color: var(--inkt-2);
  max-width: 56ch;
}

@media (max-width: 760px) {
  .meer__twee {
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

/* AI, nuchter. Staat op de werkpagina, boven het contactblok. */
.ai {
  padding: var(--sectie) 0;
  background: var(--papier-2);
}

.ai__twee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: start;
}

.ai h2 {
  margin-top: 1.1rem;
  max-width: 12ch;
}

.ai__twee p {
  font-size: 1.05rem;
  line-height: 1.68;
  max-width: 60ch;
}

.ai__slot {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--lijn);
  font-family: 'Instrument Serif Cursief', Georgia, serif;
  font-size: 1.2rem;
  color: var(--inkt);
}

@media (max-width: 900px) {
  .ai__twee {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .ai h2 {
    max-width: none;
  }
}

/* Inbegrepen en niet inbegrepen */
.inbegrepen {
  padding: var(--sectie) 0;
  background: var(--papier-2);
}

.inbegrepen__twee {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}

.inbegrepen__wel,
.inbegrepen__niet {
  padding: 1.8rem;
  border-radius: 14px;
  background: var(--wit);
  border: 1px solid var(--lijn);
}

.inbegrepen__niet {
  background: transparent;
  border-style: dashed;
}

.inbegrepen h3 {
  margin: 0 0 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--lijn);
}

.inbegrepen ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.inbegrepen li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  font-size: 0.95rem;
  line-height: 1.5;
}

.inbegrepen svg {
  width: 16px;
  height: 16px;
  margin-top: 0.2rem;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inbegrepen__wel svg {
  stroke: var(--palm);
}

.inbegrepen__niet {
  color: var(--inkt-2);
}

.inbegrepen__niet svg {
  stroke: var(--inkt-3);
}

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

/* ---------------------------------------------------- 12 binnenpagina's */

/* De kop van een binnenpagina. Geen foto, wel lucht. */
.kop {
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3.5rem);
}

.kop h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  max-width: 16ch;
}

.kop__onder {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}

.kop__onder p {
  color: var(--inkt-2);
  font-size: 1.05rem;
}

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

.kruimels {
  font-family: 'Departure', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--inkt-3);
  margin-bottom: 1.6rem;
}

.kruimels a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--lijn);
}

.kruimels a:hover {
  border-color: var(--inkt);
}

/* Het werkoverzicht staat in groepen: in de reiswereld, en daarbuiten. */
.groep {
  margin-bottom: var(--sectie);
}

.groep:last-child {
  margin-bottom: 0;
}

.groep__kop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(1rem, 4vw, 3rem);
  align-items: baseline;
  margin-bottom: 1.6rem;
}

/* De kop loopt over allebei de rijen, anders hangt het aantal los onderaan
   een rij die door de kop op hoogte wordt gehouden. */
.groep__kop h2 {
  grid-row: 1 / 3;
}

.groep__kop h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
}

.groep__kop p {
  margin: 0;
  color: var(--inkt-2);
  font-size: 0.95rem;
}

.groep__aantal {
  grid-column: 2;
  margin-top: 0.7rem;
}

@media (max-width: 800px) {
  .groep__kop h2 {
    grid-row: auto;
  }
  .groep__aantal {
    grid-column: 1;
    margin-top: 0.2rem;
  }
}

@media (max-width: 800px) {
  .groep__kop {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
}

/* De lijst zelf, als inhoudsopgave. */
.lijst {
  border-top: 1px solid var(--inkt);
}

.lijst__rij {
  display: grid;
  grid-template-columns: 3rem 17rem minmax(0, 1fr) 2rem;
  gap: 0.4rem 1.5rem;
  align-items: baseline;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--lijn);
  text-decoration: none;
  color: inherit;
  transition: background-color 200ms ease;
}

.lijst__rij > *:not(.lijst__pijl) {
  transition: translate 260ms var(--uit);
}

a.lijst__rij:hover > *:not(.lijst__pijl) {
  translate: 0.6rem;
}

a.lijst__rij:hover {
  background: var(--papier-2);
}

.lijst__nr {
  font-family: 'Departure', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--inkt-3);
}

.lijst__naam {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.15;
}

.lijst__wat {
  color: var(--inkt-2);
  font-size: 0.95rem;
}

.lijst__pijl {
  justify-self: end;
}

.lijst__pijl svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--inkt-3);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 860px) {
  .lijst__rij {
    grid-template-columns: 2.4rem minmax(0, 1fr) 2rem;
  }
  .lijst__wat {
    grid-column: 2;
  }
}

/* De galerij op een casuspagina */
.galerij {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}

.galerij__stuk--tel {
  grid-column: span 1;
}

.galerij__doek {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 14px 14px 0 0;
  padding: clamp(1rem, 2.5vw, 2rem);
  padding-bottom: 0;
}

.galerij__stuk--tel .galerij__doek .telefoon {
  width: min(58%, 15rem);
}

.galerij__bij {
  margin: 0.9rem 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--inkt-2);
  max-width: 46ch;
}

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

/* --------------------------------------------------------- 13 formulier */

.contact {
  padding: var(--sectie) 0;
  background: var(--inkt);
  color: var(--papier);
}

.contact h2 {
  max-width: 16ch;
}

.contact p {
  color: rgba(244, 241, 232, 0.76);
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

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

.regels {
  margin-top: 2rem;
  border-top: 1px solid rgba(244, 241, 232, 0.2);
}

.regels a,
.regels div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(244, 241, 232, 0.14);
  text-decoration: none;
  color: inherit;
}

.regels span {
  display: grid;
  gap: 0.15rem;
}

.regels b {
  font-size: 1.05rem;
}

.regels i {
  font-style: normal;
  font-size: 0.84rem;
  color: rgba(244, 241, 232, 0.6);
}

.regels svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: var(--amber);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.formulier {
  display: grid;
  gap: 1rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: 16px;
  background: rgba(244, 241, 232, 0.06);
  border: 1px solid rgba(244, 241, 232, 0.16);
}

.rij-twee {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 560px) {
  .rij-twee {
    grid-template-columns: 1fr;
  }
}

.veld {
  display: grid;
  gap: 0.35rem;
}

.veld label {
  font-family: 'Departure', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 241, 232, 0.62);
}

.veld input,
.veld textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(244, 241, 232, 0.24);
  border-radius: 9px;
  background: rgba(15, 11, 7, 0.4);
  color: var(--papier);
  font: inherit;
  font-size: 0.98rem;
  transition: border-color 200ms ease, background-color 200ms ease;
}

.veld textarea {
  min-height: 8rem;
  resize: vertical;
}

.veld input::placeholder,
.veld textarea::placeholder {
  color: rgba(244, 241, 232, 0.38);
}

.veld input:focus,
.veld textarea:focus {
  outline: none;
  border-color: var(--amber);
  background: rgba(15, 11, 7, 0.6);
}

.veld__fout {
  font-size: 0.8rem;
  color: #ff9d7a;
  min-height: 1em;
}

.verstop {
  position: absolute;
  left: -9999px;
}

.melding {
  margin: 0;
  padding: 0.8rem 1rem;
  border-radius: 9px;
  background: rgba(255, 200, 69, 0.14);
  border: 1px solid rgba(255, 200, 69, 0.4);
  font-size: 0.92rem;
  color: var(--papier);
}

.formulier .kleine-letter {
  color: rgba(244, 241, 232, 0.55);
}

.formulier .stempel {
  justify-self: start;
}

/* ------------------------------------------------------------ 14 colofon */

.colofon {
  padding: var(--sectie) 0 3rem;
  background: var(--papier-2);
  border-top: 1px solid var(--lijn);
}

.colofon__kop {
  font-family: 'Departure', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inkt-3);
  margin-bottom: 1.6rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--inkt);
}

.colofon__kolommen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.8rem 2rem;
}

@media (max-width: 900px) {
  .colofon__kolommen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.colofon__deel h3 {
  margin: 0 0 0.5rem;
  font-family: 'Departure', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inkt-3);
}

.colofon__deel p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--inkt-2);
}

.colofon__deel a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--lijn);
}

.colofon__deel a:hover {
  border-color: var(--inkt);
}

.colofon__slot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem 2rem;
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--lijn);
  font-family: 'Departure', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inkt-3);
}

/* ---------------------------------------------------------- 15 beweging */

/* Reveals met gewicht: van onderen, traag, met een zware curve.
   Nooit de standaard fade-in-up van 300ms. */
html.js [data-op] {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity 900ms var(--zwaar), transform 900ms var(--zwaar);
  transition-delay: calc(var(--v, 0) * 1ms);
}

html.js [data-op].is-op {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-op] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.12s !important;
  }
}

/* Filmkorrel over de hele pagina. Vast, klikt nergens doorheen. */
.korrel {
  position: fixed;
  inset: -50%;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media print {
  .korrel,
  .voortgang,
  .menu {
    display: none;
  }
}

/* ==========================================================================
   16  de vijf dienstenpagina's

   Zelfde bouwstenen als de rest van de site, alleen anders gestapeld:
   kop, blokken met tekst, kaarten, stappen en een oproep aan het slot.
   ========================================================================== */

.blok {
  padding-bottom: var(--sectie);
}

.blok--vlak {
  padding-block: var(--sectie);
  background: var(--papier-2);
}

.blok__kop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(1.2rem, 5vw, 4.5rem);
  align-items: start;
  margin-bottom: 2rem;
}

.blok__kop h2 {
  max-width: 14ch;
}

.blok__kop p {
  font-size: 1.05rem;
  line-height: 1.68;
  max-width: 58ch;
}

.blok__kop p + p {
  margin-top: 1.1em;
}

@media (max-width: 900px) {
  .blok__kop {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .blok__kop h2 {
    max-width: none;
  }
}

/* Kaarten: wat ik kan maken, wat er slimmer kan, waar we naar kunnen kijken. */
.kaarten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem);
  counter-reset: kaart;
}

.kaart {
  counter-increment: kaart;
  padding: 1.3rem 1.4rem 1.5rem;
  border: 1px solid var(--lijn);
  border-radius: 14px;
  background: var(--wit);
}

.kaart::before {
  content: counter(kaart, decimal-leading-zero);
  display: block;
  margin-bottom: 0.8rem;
  font-family: 'Departure', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--inkt-3);
}

.kaart h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.kaart p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--inkt-2);
}

@media (max-width: 900px) {
  .kaarten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* Projecten als voorbeeld op een dienstenpagina. */
.proeven {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 2.6rem);
}

.proef {
  text-decoration: none;
  color: inherit;
}

.proef__doek {
  border-radius: 14px 14px 0 0;
  padding: clamp(1rem, 2.2vw, 1.6rem);
  padding-bottom: 0;
}

.proef h3 {
  margin: 1rem 0 0.4rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.proef h3 svg {
  width: 13px;
  height: 13px;
  flex: none;
  fill: none;
  stroke: var(--inkt-3);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.proef p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--inkt-2);
}

.proef__doek .scherm {
  transition: transform 420ms var(--uit);
}

@media (hover: hover) and (pointer: fine) {
  .proef:hover .scherm {
    transform: translateY(-6px);
  }
}

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

/* De oproep aan het slot van elke dienstenpagina. */
.oproep {
  padding: var(--sectie) 0;
  background: var(--inkt);
  color: var(--papier);
}

.oproep__twee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.oproep h2 {
  margin-bottom: 0.9rem;
  max-width: 18ch;
}

.oproep p {
  margin: 0;
  color: rgba(244, 241, 232, 0.78);
  max-width: 56ch;
}

@media (max-width: 760px) {
  .oproep__twee {
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

/* Kleine technische termen in de lopende tekst, zoals een bestandsnaam. */
code {
  font-family: 'Departure', ui-monospace, monospace;
  font-size: 0.86em;
  letter-spacing: 0.02em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--papier-2);
  color: var(--inkt);
}

/* De technische details per project, op de techniekpagina. */
.motoren {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.2rem);
}

.motor {
  padding-top: 1.1rem;
  border-top: 1px solid var(--inkt);
}

.motor__kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.motor__kop h3 {
  margin: 0;
}

.motor__kop a {
  font-family: 'Departure', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inkt-2);
}

.motor ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.motor li {
  padding-left: 1rem;
  position: relative;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--inkt-2);
}

.motor li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 1px;
  background: var(--inkt-3);
}

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

/* De bedrijfsgegevens onderin het colofon. */
.colofon__bedrijf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem 2rem;
  align-items: end;
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--lijn);
}

.colofon__bedrijf .label {
  grid-column: 1 / -1;
  margin-bottom: 0.2rem;
}

.colofon__bedrijf p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--inkt-2);
}

.colofon__bedrijf a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--lijn);
}

.colofon__bedrijf a:hover {
  border-color: var(--inkt);
}

.colofon__nummers {
  justify-self: end;
  text-align: right;
  font-family: 'Departure', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inkt-3);
}

.colofon__slot a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--lijn);
}

.colofon__slot a:hover {
  border-color: var(--inkt-3);
}

@media (max-width: 640px) {
  .colofon__bedrijf {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .colofon__nummers {
    justify-self: start;
    text-align: left;
  }
}