/* ============================================================
   The Puncke's Delight
   Static rebuild of the WordPress/Astra site: same colours, fonts
   and layout. Fonts are self-hosted: no requests to third parties.
   ============================================================ */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/fonts/montserrat-400.woff2) format("woff2"); }
@font-face { font-family: "Fahkwang"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/fahkwang-500.woff2) format("woff2"); }
@font-face { font-family: "Fahkwang"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/fonts/fahkwang-600.woff2) format("woff2"); }
@font-face { font-family: "Fahkwang"; font-style: italic; font-weight: 500; font-display: swap;
  src: url(/fonts/fahkwang-500-italic.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/cormorant-garamond-500.woff2) format("woff2"); }

:root {
  --goud: #deb668;
  --goud-donker: #cea350;
  --donker: #2c2a26;
  --grijs: #7f7c76;
  --licht: #f0f0f0;
  --wit: #ffffff;
  --bruin: #423f38;
  --papier: #efe6d2;
  --inkt: #2a251e;
  --kopfont: "Fahkwang", Georgia, serif;
  --tekstfont: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* eigen cursor: de gewone pijl, maar in inkt met een rand van papier;
   boven links en knoppen wordt hij goud. Tekstvakken houden de streep. */
html { cursor: url(/img/cursor.svg) 5 3, auto; }
a, button, .kiezer-lijst li { cursor: url(/img/cursor-link.svg) 5 3, pointer; }
input, textarea { cursor: text; }

body {
  background: var(--donker);
  color: var(--donker);
  font-family: var(--tekstfont);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:hover, a:focus { color: var(--goud-donker); }
:focus-visible { outline: 2px solid var(--goud); outline-offset: 3px; }

h1, h2, h3, h5, h6 { font-family: var(--kopfont); font-weight: 600; line-height: 1.2; }
h1 { font-size: clamp(2.75rem, 9vw, 5rem); font-weight: 500; line-height: 1.1; }
h2 { font-size: clamp(2rem, 6vw, 3rem); }
h3 { font-size: clamp(1.6rem, 5vw, 2.5rem); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--wit); padding: .5rem 1rem; }

/* kop: menu links en rechts van het logo, zoals in Astra; het volledige menu zit achter de engel linksboven */
.kop {
  position: sticky; top: 0; z-index: 40;
  background: var(--donker);
  padding-inline: 24px;
  /* menu.js schuift de kop weg bij naar beneden scrollen en terug bij omhoog scrollen */
  transition: top .6s cubic-bezier(.2, .7, .2, 1);
}
/* het wegschuiven gaat rustig: de balk versnelt langzaam en glijdt omhoog,
   terwijl het menu en de engels erin al zacht vervagen */
.kop.weg { transition: top 1s cubic-bezier(.55, 0, .25, 1); }
.kop-nav, .engel { transition: opacity .6s ease, transform .9s cubic-bezier(.55, 0, .25, 1); }
.kop.weg .kop-nav, .kop.weg .engel { opacity: 0; transform: translateY(-16px); }
@media (prefers-reduced-motion: reduce) { .kop, .kop.weg, .kop-nav, .engel { transition: none; } }
.kop-nav {
  max-width: 1200px; margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: 112px;
}
.kop-nav ul { list-style: none; display: flex; }
.kop-nav ul:first-child { justify-content: flex-end; }
.kop-nav ul a {
  display: block; padding: 0 24px; line-height: 112px;
  color: var(--licht); font-size: .875rem; text-decoration: none;
}
.kop-nav ul a:hover, .kop-nav ul a[aria-current="page"] { color: var(--goud-donker); }
.logo { display: block; width: 100px; margin-block: 6px; }

/* de strakke balk: komt de kop halverwege de pagina terug (menu.js zet .dun),
   dan staat de T klein in de linkerhoek en de links als tekst in de
   rechterhoek, zonder engels en zonder menuknop. Bovenaan de pagina is het
   weer de volle kop. */
.kop.dun .kop-nav { display: flex; align-items: center; max-width: none; min-height: 56px; }
.kop.dun .home-logo { order: -1; margin-right: auto; }
.kop.dun .logo { width: auto; height: 40px; margin-block: 8px; }
.kop.dun .kop-nav ul a { line-height: 56px; padding: 0 16px; }
.kop.dun .kop-nav ul:last-child a { padding-right: 0; }
.kop.dun .engel { display: none; }

/* YouTube en Facebook als witte logo's linksboven in de balk, op dezelfde
   hoogte als de menuknop rechts; goud bij aanwijzen. Ze vervagen mee als de
   kop wegschuift. In de dunne balk staat linksboven de kleine T, dus daar
   staan ze rechts, achter de links. */
.kop-sociaal { position: absolute; left: clamp(16px, 3vw, 40px); top: 0; z-index: 4; height: 112px; display: flex; align-items: center; gap: 18px; list-style: none; transition: opacity .6s ease; }
.kop-sociaal a { display: block; padding: 4px; color: var(--papier); transition: color .3s, transform .3s; }
.kop-sociaal a:hover, .kop-sociaal a:focus-visible { color: var(--goud); transform: translateY(-2px); }
.kop-sociaal svg { display: block; width: 24px; height: 24px; fill: currentColor; }
.kop.weg .kop-sociaal { opacity: 0; }
.kop.dun .kop-sociaal { left: auto; right: 24px; height: 56px; gap: 12px; }
.kop.dun .kop-sociaal svg { width: 20px; height: 20px; }
.kop.dun .kop-nav { padding-right: 168px; }
/* de taalknop EN / NL (taal.js) staat rechtsboven in de balk, gecentreerd
   boven het woord Menu; de gekozen taal in goud. Hij vervaagt mee als de kop
   wegschuift. In de dunne balk, waar de menuknop weg is, staat hij links
   naast YouTube en Facebook. */
.kop-taal { position: absolute; top: 22px; right: clamp(16px, 3vw, 40px); z-index: 31; width: 72px; display: flex; justify-content: center; transition: opacity .6s ease; }
.kop.weg .kop-taal { opacity: 0; }
/* met het menu open staat de knop onderaan in het menu zelf */
html.menu-open .kop-taal { opacity: 0; pointer-events: none; }
.kop.dun .kop-taal { top: 0; right: 96px; width: auto; height: 56px; align-items: center; }
.taal-knop {
  display: flex; align-items: center; gap: 6px; padding: 6px 2px; border: 0; background: none;
  font: 500 .72rem var(--tekstfont); letter-spacing: .14em; color: rgba(240, 240, 240, .55);
  cursor: url(/img/cursor-link.svg) 5 3, pointer; transition: color .3s;
}
.taal-knop .aan { color: var(--goud); }
.taal-knop:hover, .taal-knop:focus-visible { color: var(--papier); }
@media (max-width: 700px) {
  .kop-sociaal { left: 10px; height: 104px; gap: 10px; }
  .kop-sociaal svg { width: 22px; height: 22px; }
  .kop.dun .kop-sociaal { left: auto; right: 12px; height: 48px; gap: 6px; }
  .kop.dun .kop-sociaal svg { width: 18px; height: 18px; }
  .kop.dun .kop-nav { padding-right: 116px; }
  .kop-taal { top: 18px; right: 10px; width: 60px; }
  .kop.dun .kop-taal { top: 0; right: 66px; height: 48px; }
  .kop.dun .taal-knop { font-size: .66rem; letter-spacing: .08em; }
}
/* op een heel smal scherm passen ze niet meer naast de links in de dunne balk */
@media (max-width: 420px) { .kop.dun .kop-sociaal { display: none; } .kop.dun .kop-taal { right: 12px; } .kop.dun .kop-nav { padding-right: 56px; } }
.menu-knop { transition: opacity .3s, visibility .3s; }
.kop.dun:not(.weg) .menu-knop { opacity: 0; visibility: hidden; }

/* de engel uit de houtsnede-T, nu met zijn omgeving uit de originele
   prent (engel-hoek.png): de inkt is doorzichtig, het papier een zachte
   groengoud tint, en vanuit de hoek loopt hij rond uit in het donker, zodat
   hij opgaat in de balk. Hij staat in beide bovenhoeken: links zoals in de
   prent, rechts in spiegelbeeld achter de menuknop. */
/* de engels zijn 8,5% van de schermbreedte, op een smal scherm niet kleiner dan 76px */
.engel { position: absolute; right: 0; top: 0; z-index: 3; display: block; width: max(76px, 8.5vw); pointer-events: none; }
/* gedempt tot vlak boven het donker: net iets feller dan het patroon achter de galerij */
.engel img { display: block; width: 100%; height: auto; transform: scaleX(-1); opacity: .14; transition: filter .4s, opacity .4s; }
.engel-links { right: auto; left: 0; }
.engel-links img { transform: none; }
.kop:has(.menu-knop:hover) .engel:not(.engel-links) img { opacity: .3; }

/* de menuknop rechts: drie gouden lijnen met het woord Menu eronder.
   Hij staat vast in beeld en loopt de hele pagina mee. */
.menu-knop {
  position: fixed; right: clamp(16px, 3vw, 40px); top: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  width: 72px; height: 112px;
  color: var(--goud); text-decoration: none;
}
/* een zachte donkere gloed achter de knop, zodat lijnen en woord leesbaar blijven op de prent */
.menu-knop::before { content: ""; position: absolute; inset: 14px -14px; z-index: 0; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(44, 42, 38, .92) 0, rgba(44, 42, 38, .65) 42%, rgba(44, 42, 38, 0) 70%); transition: opacity .4s; }
/* zodra de kop uit beeld is (menu.js zet .zwevend): een eigen donker vlak zonder rand,
   zodat de knop ook op foto's en op de crème voet leesbaar blijft */
.menu-knop::after { content: ""; position: absolute; inset: 18px 0; z-index: 0; border-radius: 14px; background: rgba(44, 42, 38, .9); box-shadow: 0 6px 20px rgba(20, 18, 15, .35); opacity: 0; transform: scale(.9); transition: opacity .4s, transform .4s cubic-bezier(.2, .7, .2, 1); }
.menu-knop.zwevend::after { opacity: 1; transform: none; }
.menu-knop.zwevend::before { opacity: 0; }
.menu-knop:focus-visible { outline: 2px solid var(--goud); outline-offset: -6px; }

/* dicht staat er alleen het woord Menu; open komt er een kruis van twee
   gouden lijnen boven het woord Close */
.menu-streep { position: relative; z-index: 1; display: block; width: 38px; height: 0; margin-bottom: -12px; transition: height .35s cubic-bezier(.2, .7, .2, 1), margin .35s cubic-bezier(.2, .7, .2, 1); }
.menu-knop[aria-expanded="true"] .menu-streep, html:not(.js) .kop:has(.menu:target) .menu-streep { height: 38px; margin-bottom: 0; }
.menu-streep i { position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: currentColor; opacity: 0; transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .3s; }
.menu-woord { position: relative; z-index: 1; font-size: .68rem; letter-spacing: .26em; margin-right: -.26em; text-transform: uppercase; color: var(--licht); transition: color .3s; }
.menu-knop:hover .menu-woord { color: var(--goud); }
.menu-knop[aria-expanded="true"] .menu-streep i, html:not(.js) .kop:has(.menu:target) .menu-streep i { opacity: 1; }
.menu-knop[aria-expanded="true"] .menu-streep i:first-of-type, html:not(.js) .kop:has(.menu:target) .menu-streep i:first-of-type { transform: rotate(45deg); }
.menu-knop[aria-expanded="true"] .menu-streep i:last-of-type, html:not(.js) .kop:has(.menu:target) .menu-streep i:last-of-type { transform: rotate(-45deg); }

/* het menu schuift van rechts in, onder de knop door; de rest van de pagina wordt donkerder */
.menu {
  position: fixed; top: 0; bottom: 0; right: 0; z-index: 20;
  width: min(440px, 100%); overflow-y: auto;
  padding: 150px 56px 40px 48px;
  background: var(--donker); border-left: 1px solid rgba(222, 182, 104, .22);
  transform: translateX(100%); visibility: hidden;
  transition: transform .55s cubic-bezier(.2, .7, .2, 1), box-shadow .55s, visibility 0s .55s;
}
.menu.open, html:not(.js) .menu:target {
  transform: none; visibility: visible;
  box-shadow: 0 0 0 100vmax rgba(20, 18, 15, .55);
  transition: transform .55s cubic-bezier(.2, .7, .2, 1), box-shadow .55s;
}
html.menu-open { overflow: hidden; }
.menu ul { list-style: none; }
.menu li { opacity: 0; transform: translateX(16px); transition: opacity .4s, transform .4s; }
.menu.open li, html:not(.js) .menu:target li { opacity: 1; transform: none; }
.menu.open li:nth-child(1), html:not(.js) .menu:target li:nth-child(1) { transition-delay: .12s; }
.menu.open li:nth-child(2), html:not(.js) .menu:target li:nth-child(2) { transition-delay: .18s; }
.menu.open li:nth-child(3), html:not(.js) .menu:target li:nth-child(3) { transition-delay: .24s; }
.menu.open li:nth-child(4), html:not(.js) .menu:target li:nth-child(4) { transition-delay: .30s; }
.menu ul a {
  display: inline-block; padding: .3rem 0;
  font-family: var(--kopfont); font-weight: 500; font-size: clamp(2rem, 5vw, 2.6rem); line-height: 1.25;
  color: var(--papier); text-decoration: none; transition: color .3s;
}
.menu ul a:hover, .menu ul a:focus-visible { color: var(--goud); font-style: italic; }
.menu ul a[aria-current="page"] { color: var(--goud); }
/* het fleuron staat voor de huidige pagina, en schuift ook in bij het woord waar je boven hangt */
.menu ul a::before { content: "\2767"; display: inline-block; width: 0; margin-right: 0; overflow: hidden; opacity: 0; font-size: .55em; vertical-align: middle; font-style: normal; transition: width .3s, margin-right .3s, opacity .3s; }
.menu ul a[aria-current="page"]::before, .menu ul a:hover::before, .menu ul a:focus-visible::before { width: 1.1em; margin-right: .5em; opacity: 1; }
.menu-voet { margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid rgba(222, 182, 104, .22); color: rgba(240, 240, 240, .7); font-size: .85rem; line-height: 1.9; }
.menu-voet p:first-child { font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--goud); margin-bottom: .5rem; }
.menu-voet a { color: inherit; text-decoration: none; }
.menu-voet a:hover { color: var(--goud); }
/* YouTube en Facebook als witte logo's onder e-mail en telefoon; goud bij aanwijzen */
/* (zonder de grote letters en het krulletje van de menulinks hierboven) */
.menu .menu-sociaal { display: flex; gap: 16px; margin-top: .9rem; padding: 0; }
.menu .menu-sociaal a { display: block; padding: 2px; font-size: 1rem; line-height: 1; color: var(--papier); transition: color .3s, transform .3s; }
.menu .menu-sociaal a::before { content: none; }
.menu .menu-sociaal a:hover, .menu .menu-sociaal a:focus-visible { color: var(--goud); font-style: normal; transform: translateY(-2px); }
.menu-sociaal svg { display: block; width: 24px; height: 24px; fill: currentColor; }
/* de taalknop EN / NL (taal.js) onderaan het uitschuifmenu, iets groter dan in de balk */
.menu-voet .taal-knop { margin-top: .9rem; padding: 4px 0; font-size: .8rem; }
.menu-dicht { display: inline-block; margin-top: 2rem; color: var(--goud); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; }
.js .menu-dicht { display: none; }

@media (prefers-reduced-motion: reduce) {
  .menu, .menu li, .menu-streep, .menu-streep i { transition: none; }
}

@media (max-width: 700px) {
  .kop { padding-inline: 16px; }
  .kop-nav { grid-template-columns: 1fr 1fr; grid-template-areas: "logo logo" "l r"; min-height: 0; padding-block: 1rem .5rem; }
  .kop-nav .home-logo { grid-area: logo; justify-self: center; }
  .kop-nav ul:first-child { grid-area: l; }
  .kop-nav ul:last-child { grid-area: r; }
  .kop-nav ul a { line-height: 3; padding: 0 12px; }
  .logo { width: 72px; }
  /* kleine telefoons: de vier links naast elkaar zonder uit het scherm te lopen */
  @media (max-width: 360px) { .kop-nav ul a { padding: 0 8px; font-size: .8125rem; } }
  /* strak op de telefoon: kleiner, zodat de vier links naast de T passen */
  .kop.dun .kop-nav { min-height: 48px; padding-block: 0; }
  .kop.dun .logo { width: auto; height: 34px; margin-block: 7px; }
  .kop.dun .kop-nav ul a { line-height: 48px; padding: 0 7px; font-size: .78rem; }
  .menu-knop { right: 10px; width: 60px; height: 104px; gap: 10px; }
  .menu-streep { width: 32px; margin-bottom: -10px; }
  .menu-knop[aria-expanded="true"] .menu-streep, html:not(.js) .kop:has(.menu:target) .menu-streep { height: 32px; }
  .menu-woord { font-size: .6rem; }
  .menu { padding: 120px 32px 32px 28px; }
}

/* home: zoals Spectra, titel als overlay bovenaan de foto (773 x 900) */
.hero { padding: 64px 3em 3em; text-align: center; }
/* de foto op zijn oorspronkelijke maat van de oude site (773 bij 900); aan
   alle kanten loopt hij zacht uit in het donker (foto en waas krijgen
   hetzelfde masker) */
.hero figure { position: relative; width: 773px; max-width: 100%; margin: 0 auto; }
.hero figure img { width: 773px; height: 900px; object-fit: cover; }
.hero figure img, .hero-waas {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent);
  mask-composite: intersect;
}
/* alleen de randen wazig: een laag die de foto eronder vervaagt, maar door
   een omgekeerd masker alleen langs de vier randen zichtbaar is; het midden
   blijft scherp */
.hero figure::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to right, #000, transparent 13%, transparent 87%, #000), linear-gradient(to bottom, #000, transparent 11%, transparent 89%, #000);
  mask-image: linear-gradient(to right, #000, transparent 13%, transparent 87%, #000), linear-gradient(to bottom, #000, transparent 11%, transparent 89%, #000);
}
/* bij aanwijzen wordt alleen het stukje foto achter de titel donkerder, niet de hele foto */
.hero-waas { position: absolute; inset: 0; background: radial-gradient(ellipse 48% 16% at 50% 8%, rgba(0, 0, 0, .6), rgba(0, 0, 0, .3) 55%, transparent 100%); opacity: 0; transition: opacity .35s ease-in-out; }
.hero figure:hover .hero-waas { opacity: 1; }
.hero figcaption { position: absolute; inset: 15px; display: flex; flex-direction: column; align-items: center; color: var(--wit); }
.hero figcaption h1 { font-size: 3rem; font-weight: 600; line-height: 1em; margin: 0; transform: translate3d(0, 24px, 0); transition: transform .35s; }
.hero figcaption p { margin: .5em 0 1em; transform: translate3d(0, 35px, 0); transition: transform .45s; }
.hero figure:hover h1, .hero figure:hover figcaption p { transform: none; }
/* een klik op de foto brengt je naar de galerij: de link ligt over het hele beeld */
.hero-link { position: absolute; inset: 0; z-index: 2; }
.hero-link:focus-visible { outline: 2px solid var(--goud); outline-offset: 4px; }
.hero figure:focus-within .hero-waas { opacity: 1; }
.hero figure:focus-within h1, .hero figure:focus-within figcaption p { transform: none; }
.hero > h2 { color: var(--licht); font-size: 3rem; padding: 1.5rem 0 1em; }
/* korte inleiding onder de naam, rustig en gedempt */
.hero-intro { max-width: 34em; margin: -.5em auto 1.5em; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 1.3rem; line-height: 1.55; color: rgba(240, 240, 240, .72); }
@media (max-width: 921px) { .hero { padding: 48px 2em 3em; } .hero figure img { height: auto; } }
@media (max-width: 544px) { .hero { padding: 32px 1.5em 3em; } .hero figcaption h1, .hero > h2 { font-size: 2rem; } }

/* binnenpagina's */
.titel { color: var(--licht); text-align: center; padding: 64px 16px 24px; }
.inhoud { background: var(--wit); padding: 104px 16px 160px; }
.kader { max-width: 1200px; margin-inline: auto; }

/* foto links, tekst rechts; bio.js schuift de tekst zo dat "Nicholas Milne"
   links op dezelfde plek begint als het woord "Biography" erboven */
.bio { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 48px; align-items: start; }
/* de bovenkant van "Nicholas Milne" is de bovenkant van de letters zelf (de
   ruimte boven de hoofdletters is weggesneden), zodat de foto ernaast precies
   op dezelfde hoogte begint */
.bio h2 { margin-bottom: 1.5rem; text-box-trim: trim-start; text-box-edge: cap alphabetic; }
/* op de biografie begint alles dichter onder de kop: minder ruimte boven de titel en boven de tekst */
main:has(.bio) .titel { padding: 32px 16px 16px; }
main:has(.bio) .inhoud { padding-top: 48px; }
/* de levensloop in Cormorant Garamond, een oude boekletter, wat groter gezet */
.bio p { margin-bottom: 1em; color: var(--bruin); font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 1.25rem; line-height: 1.6; }
@media (max-width: 800px) { .bio { grid-template-columns: minmax(0, 1fr); } .bio img { max-width: min(360px, 100%); margin-inline: auto; } }

/* de galerijpagina: het donker van de contactpagina met dezelfde houtsnede
   (logo-t-goud.jpg) als zacht patroon, van boven in het scherm, achter de
   kop, tot onder de foto's. Een laag donker van 95% over de prent laat er
   5% van door; de inkt is precies de achtergrondkleur, dus alleen het goud
   van het papier blijft, heel gedempt. Pagina en kop krijgen hetzelfde
   patroon, vast aan het scherm, zodat het naadloos doorloopt, ook als de
   kop meeschuift. */
.galerij { background: none; color: var(--licht); }
/* de foto's beginnen dicht onder de titel "Gallery" */
main:has(.galerij) .titel { padding-bottom: 8px; }
main:has(.galerij) .inhoud { padding-top: 32px; }
/* op de galerijpagina geen engels in de bovenhoeken */
body:has(.galerij) .engel { display: none; }
body:has(.galerij), body:has(.galerij) .kop {
  background: linear-gradient(rgba(44, 42, 38, .95), rgba(44, 42, 38, .95)), url(/img/logo-t-goud.jpg) 50% 0 / 640px auto repeat fixed var(--donker);
}
/* elke foto in een eigen lijst: een smalle rand roomwit papier, een haarlijn
   in hetzelfde roomwit eromheen en een schaduw, zodat hij los van het patroon staat */
.collage img {
  display: block; width: 100%; height: auto;
  border: 4px solid var(--papier);
  outline: 1px solid var(--papier); outline-offset: 5px;
  box-shadow: 0 14px 32px -8px rgba(0, 0, 0, .6);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s, outline-color .4s, opacity .9s ease;
}
/* elke foto is een link naar de Facebookpagina; aanwijzen: de foto komt een stukje naar voren */
.collage > a { display: block; position: relative; }
.collage > a:hover, .collage > a:focus-visible { z-index: 1; }
.collage > a:hover img, .collage > a:focus-visible img { transform: translateY(-6px) scale(1.02); box-shadow: 0 26px 48px -12px rgba(0, 0, 0, .75); }
.collage > a:focus-visible { outline: none; }
.collage > a:focus-visible img { outline-color: var(--goud); }

/* galerij: een collage op een raster van 12 kolommen. Groot en klein wisselen
   elkaar af, de staande foto's lopen over twee rijen en alles verspringt
   een beetje; alles staat recht en de foto's worden niet bijgesneden */
.collage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); row-gap: clamp(24px, 3vw, 40px); max-width: 1200px; margin-inline: auto; align-items: start; }
.collage > :nth-child(1) { grid-column: 1 / 8; grid-row: 1; }
.collage > :nth-child(2) { grid-column: 8 / 12; grid-row: 1 / 3; margin-top: clamp(40px, 10vw, 120px); }
.collage > :nth-child(3) { grid-column: 2 / 7; grid-row: 2; }
.collage > :nth-child(4) { grid-column: 6 / 13; grid-row: 3; margin-top: clamp(24px, 6vw, 80px); }
.collage > :nth-child(5) { grid-column: 1 / 5; grid-row: 3; }
/* de laatste foto sluit af, in het midden onder de rest */
.collage > :nth-child(6) { grid-column: 4 / 10; grid-row: 4; }

/* op de telefoon: één kolom, om en om naar links en rechts geschoven */
@media (max-width: 700px) {
  .collage { grid-template-columns: 1fr; row-gap: 36px; }
  .collage > :nth-child(n) { grid-column: 1; grid-row: auto; margin-top: 0; width: 86%; }
  .collage > :nth-child(even) { justify-self: end; }
}

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

/* de vergrote foto (galerij.js): midden in beeld in dezelfde roomwitte lijst,
   over een donkere waas; rechtsboven een kruisje, rechtsonder in de lijst
   een klein Facebook-logo als tweede klik */
.groot { padding: 0; border: 0; background: none; max-width: none; max-height: none; overflow: visible; margin: auto; }
.groot::backdrop { background: rgba(28, 26, 23, .88); backdrop-filter: blur(4px); }
.groot-lijst { position: relative; margin: 0; }
.groot-lijst img {
  display: block; width: auto; height: auto; max-width: min(92vw, 1400px); max-height: 86vh;
  border: 6px solid var(--papier); outline: 1px solid var(--papier); outline-offset: 7px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
}
.groot-dicht {
  position: absolute; top: -52px; right: -8px; width: 40px; height: 40px; border: 0; background: none;
  color: var(--papier); cursor: url(/img/cursor-link.svg) 5 3, pointer;
}
.groot-dicht span::before, .groot-dicht span::after { content: ""; position: absolute; left: 9px; right: 9px; top: 50%; height: 2px; margin-top: -1px; background: currentColor; border-radius: 2px; }
.groot-dicht span::before { transform: rotate(45deg); }
.groot-dicht span::after { transform: rotate(-45deg); }
.groot-dicht:hover, .groot-dicht:focus-visible { color: var(--goud); }
.groot-fb {
  position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(44, 42, 38, .82); color: var(--papier); box-shadow: 0 6px 18px rgba(0, 0, 0, .4); transition: color .3s, background-color .3s, transform .3s;
}
.groot-fb svg { width: 22px; height: 22px; fill: currentColor; }
.groot-fb:hover, .groot-fb:focus-visible { color: var(--donker); background: var(--goud); transform: translateY(-2px); }
@media (prefers-reduced-motion: no-preference) {
  .groot[open] .groot-lijst { animation: groot-in .4s cubic-bezier(.2, .7, .2, 1); }
  .groot[open]::backdrop { animation: waas-in .4s ease; }
}
@keyframes groot-in { from { opacity: 0; transform: scale(.94); } }
@keyframes waas-in { from { opacity: 0; } }
@media (max-width: 700px) { .groot-lijst img { max-width: 94vw; max-height: 80vh; border-width: 4px; } .groot-fb { right: 12px; bottom: 12px; width: 38px; height: 38px; } }


/* contact: opgebouwd zoals de offertepagina van websites.endeastudio.com.
   Links in het donker een klein label, de houtsnede met de grote kop
   eroverheen, een korte tekst en de gegevens; rechts het formulier op een
   vel papier. Beide kolommen beginnen op dezelfde hoogte. Een zachte
   lichtbundel achter het formulier, zoals podiumlicht in de kerk. */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) auto minmax(0, 6fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

.bovenregel { font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--goud); display: flex; align-items: center; gap: 14px; }
.bovenregel::before { content: ""; width: 36px; height: 1px; background: var(--goud); }

.contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-info .bovenregel { position: relative; z-index: 1; }
/* de strook met de T loopt over de kolom; de kop staat erboven */
.contact-beeld { display: flex; flex-direction: column; }
/* de kop op één regel, boven de strook, met wat lucht ertussen zodat het niet krap oogt */
.contact-kop {
  position: relative; z-index: 1; margin: -.75rem 0 1.5rem -4%;
  font-size: clamp(2.2rem, 3.6vw, 3.2rem); font-weight: 500; line-height: 1.05; letter-spacing: -.01em; color: var(--licht);
}
/* links op dezelfde lijn als waar de strook begint */
@media (min-width: 901px) { .contact-kop { margin-left: -10%; } }
.contact-tekst { max-width: 26em; font-size: .95rem; line-height: 1.7; color: rgba(240, 240, 240, .72); }
/* tekst en gegevens liggen boven de strook, want brief.js kan ze over de uitlopende onderkant schuiven */
.contact-tekst, .kanalen { position: relative; z-index: 1; }
/* links op dezelfde lijn als "Send a message" en de strook */
.contact-tekst, .kanalen { margin-left: -4%; }
@media (min-width: 901px) { .contact-tekst, .kanalen { margin-left: -10%; } }
/* op de telefoon zou die lijn tegen de rand van het scherm liggen: daar de gewone marge */
@media (max-width: 900px) { .contact-kop, .contact-tekst, .kanalen { margin-left: 0; } }

/* telefoon, e-mail en socials: een klein label en de gegevens erachter, gescheiden door haarlijnen */
.kanalen { border-top: 1px solid rgba(240, 240, 240, .12); }
.kanalen > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid rgba(240, 240, 240, .12); }
.kanalen dt { font-size: .75rem; letter-spacing: .08em; color: rgba(240, 240, 240, .5); }
.kanalen dd { font-size: .95rem; color: var(--papier); overflow-wrap: anywhere; }
.kanalen a { color: inherit; text-decoration: none; background: linear-gradient(var(--goud), var(--goud)) 0 100% / 0 1px no-repeat; transition: color .3s, background-size .35s ease; }
.kanalen a:hover, .kanalen a:focus-visible { color: var(--goud); background-size: 100% 1px; }

/* YouTube en Facebook als volle witte logo's naast elkaar, in de regel
   "socials" onder het e-mailadres; goud bij aanwijzen */
.sociaal { display: flex; align-items: center; gap: 14px; list-style: none; }
.kanalen .sociaal a { display: block; padding: 2px; background-image: none; color: var(--papier); transition: color .3s, transform .3s; }
.kanalen .sociaal a:hover, .kanalen .sociaal a:focus-visible { color: var(--goud); transform: translateY(-2px); }
.sociaal svg { display: block; width: 24px; height: 24px; fill: currentColor; }
.kanalen > div:has(.sociaal) { align-items: center; }
/* de smalle middenkolom waar de logo's stonden blijft even breed, zodat het
   vel en de linkerkolom precies dezelfde maat houden */
@media (min-width: 901px) { .contact { grid-template-columns: minmax(0, 5fr) 38px minmax(0, 6fr); } .contact > .vel { grid-column: 3; } }


/* de foto opent de pagina en laat de hele viool op het krukje zien, van de
   krul bovenaan tot de onderkant van de klankkast: bijna de volle foto, alleen
   een smal randje eraf. Hij is nooit hoger dan het scherm onder de kop; op een
   breed scherm wordt hij daarvoor smaller en staat hij in het midden. */
.contact-foto { position: relative; margin: 0 auto; max-width: calc((100svh - 112px) * 1.45); }
.contact-foto img { width: 100%; height: auto; aspect-ratio: 1600 / 1100; object-fit: cover; object-position: 50% 40%; }
/* aan alle kanten loopt de foto smal weg in het donker, rechtsonder iets dieper zodat de titel leesbaar blijft */
.contact-foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--donker), rgba(44, 42, 38, .55) 4%, transparent 11%, transparent 84%, var(--donker)),
    linear-gradient(to right, var(--donker), transparent 7%, transparent 93%, var(--donker)),
    radial-gradient(55% 45% at 100% 95%, rgba(44, 42, 38, .72), rgba(44, 42, 38, .3) 55%, transparent 80%);
}
/* de titel staat in de foto, rechtsonder op de lege vloer naast de viool,
   en valt precies op de rechterrand van het formulier eronder */
.held-tekst { position: absolute; inset: auto 0 0; z-index: 1; padding: 0 0 clamp(48px, 7vw, 104px); color: var(--licht); text-align: right; }
.held-tekst .bovenregel { justify-content: flex-end; }
.held-tekst .bovenregel::after { content: ""; width: 36px; height: 1px; background: var(--goud); }
.held-tekst .bovenregel::before { display: none; }
.held-tekst h1 {
  font-size: clamp(3.25rem, 9vw, 6.5rem); font-weight: 500; line-height: 1; margin-top: .9rem;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
}
@media (max-width: 1232px) { .held-tekst { padding-inline: 16px; } }

/* het formulier als een vel papier, het roomwit van de tabulatuur op de
   lessenaar in de foto's: inkt erop, het kopstuk uit het logo bovenaan,
   gelinieerd als een schrift, en een knop als een donkere stempel */
/* het licht beweegt: de amber gloed ademt traag als kaarslicht en schuift
   een beetje mee met de muis (licht.js zet --dx/--dy); het vel vangt een
   zachte glans waar het licht valt en de schaduw valt de andere kant op */
@property --gloed-x { syntax: "<percentage>"; inherits: true; initial-value: 72%; }
@property --gloed-y { syntax: "<percentage>"; inherits: true; initial-value: 58%; }
@property --gloed-a { syntax: "<number>"; inherits: true; initial-value: .12; }
@property --dx { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --dy { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
.contact-podium {
  --amber: #c98a3a;
  position: relative; padding: 56px 16px 112px; color: var(--licht);
  /* bovenaan begint het vlak in hetzelfde donker als de onderkant van de foto,
     zodat er geen streep tussen foto en formulier zit; de gloed komt pas daaronder op */
  background:
    linear-gradient(var(--donker), rgba(44, 42, 38, 0) 160px),
    radial-gradient(55% 60% at calc(var(--gloed-x) + var(--dx)) calc(var(--gloed-y) + var(--dy)), rgba(201, 138, 58, var(--gloed-a)), transparent 72%),
    radial-gradient(40% 50% at calc(18% - var(--dx)) 50%, rgba(201, 138, 58, calc(var(--gloed-a) * .35)), transparent 70%);
  transition: --dx 1.8s cubic-bezier(.2, .7, .2, 1), --dy 1.8s cubic-bezier(.2, .7, .2, 1);
  animation: kaarslicht 11s ease-in-out infinite alternate;
}
/* een gouden haarlijn tussen de foto en het formulier, zo breed als de inhoud en aan de uiteinden uitlopend */
.contact-podium::before {
  content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0; width: min(1200px, calc(100% - 32px)); height: 1px;
  background: linear-gradient(to right, transparent, rgba(222, 182, 104, .55) 15%, rgba(222, 182, 104, .55) 85%, transparent);
}
@keyframes kaarslicht {
  0%   { --gloed-x: 72%; --gloed-y: 58%; --gloed-a: .11; }
  23%  { --gloed-a: .15; }
  41%  { --gloed-x: 69%; --gloed-y: 52%; --gloed-a: .12; }
  67%  { --gloed-a: .16; }
  100% { --gloed-x: 75%; --gloed-y: 62%; --gloed-a: .13; }
}
.vel {
  --glans-x: 30%; --glans-y: 20%;
  position: relative; color: var(--inkt); padding: 0 clamp(24px, 4vw, 48px) clamp(28px, 4vw, 40px);
  background-color: var(--papier);
  background-image:
    radial-gradient(70% 55% at var(--glans-x) var(--glans-y), rgba(255, 249, 234, .55), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(120, 90, 50, .14));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset,
    calc(var(--dx) * -1.2) 30px 60px -20px rgba(0, 0, 0, .65),
    calc(var(--dx) * -.3) 6px 14px rgba(0, 0, 0, .25);
}
@media (prefers-reduced-motion: reduce) {
  .contact-podium { animation: none; transition: none; }
}
/* de houtsnede-T uit het logo, groot links boven de kop, zo breed als de
   kolom. In logo-t-goud.jpg is de inkt precies de achtergrondkleur en het
   papier warm goud, dus de T gaat op in het donker; als rechthoek met een
   zacht uitdovende rand, en de kop schuift een stukje over de onderkant */
/* een lage strook uit de T (de dwarsbalk en wat eronder), niet de hele prent, zodat hij niet te veel hoogte kost */
.filmstrook { position: relative; margin: -.5rem -4% 0; aspect-ratio: 1300 / 520; pointer-events: none; }
/* naast het formulier wat breder, aan beide kanten evenveel, zodat hij midden in de kolom staat */
@media (min-width: 901px) { .filmstrook { margin-inline: -10%; } }
.filmstrook img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; opacity: .4;
  /* een rechthoek: een horizontale en een verticale verloop over elkaar,
     zodat alleen een smalle rand aan alle vier de kanten uitdooft */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 82%, transparent);
  mask-composite: intersect;
}
/* het formulier zoals het offerteformulier van endeastudio.com: genummerde
   stappen met een klein kopje, het label boven elk vak, naam en e-mail naast
   elkaar. Alles in één letter (Montserrat), de vakken strak omlijnd in inkt
   op papier, en overal dezelfde maten. */
.vel { display: grid; row-gap: 2rem; padding: clamp(28px, 4vw, 48px); }
/* het vel met licht afgeronde hoeken */
.vel { border-radius: 12px; }
.vel fieldset { border: 0; min-width: 0; display: grid; row-gap: 1rem; }
.vel legend { padding: 0; margin-bottom: 1rem; font: 600 .72rem var(--tekstfont); letter-spacing: .2em; text-transform: uppercase; color: #7a5a2c; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.vak { display: grid; min-width: 0; }
.vak > label { margin-bottom: .45rem; font: 400 .8rem var(--tekstfont); letter-spacing: .06em; color: #5b4630; }
.nodig { color: #9a7330; }
.vak input, .vak textarea {
  display: block; width: 100%; font: 400 1rem/1.5 var(--tekstfont); color: var(--inkt);
  background: rgba(255, 252, 244, .6); border: 1.5px solid rgba(42, 37, 30, .25); border-radius: 8px;
  padding: .75rem .9rem; transition: border-color .2s, background .2s;
}
.vak textarea { resize: vertical; min-height: 9rem; }
.vak input::placeholder, .vak textarea::placeholder { color: rgba(42, 37, 30, .42); }
.vak input:hover, .vak textarea:hover { border-color: rgba(42, 37, 30, .45); }
.vak input:focus, .vak textarea:focus { outline: none; border-color: var(--inkt); background: rgba(255, 252, 244, .9); }
.vak:focus-within > label { color: var(--inkt); }

.vel-voet { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.vel-noot { font-size: .8rem; color: rgba(42, 37, 30, .55); }
.stempel {
  cursor: url(/img/cursor-link.svg) 5 3, pointer; padding: .85rem 1.9rem; border: 1.5px solid var(--inkt); border-radius: 8px;
  background: var(--inkt); color: var(--papier); font: 600 .9rem var(--tekstfont); letter-spacing: .03em;
  transition: background .25s, color .25s;
}
.stempel:hover, .stempel:focus-visible { background: transparent; color: var(--inkt); }
.stempel:disabled { opacity: .6; cursor: progress; }

/* "subject": een eigen keuzelijst (brief.js), in hetzelfde omlijnde vak als
   de andere velden, met een lijstje als een strookje papier eronder;
   zonder JS blijft de gewone select staan, in dezelfde stijl */
.vak select, .kiezer-knop {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
  font: 400 1rem/1.5 var(--tekstfont); color: var(--inkt); text-align: left; cursor: url(/img/cursor-link.svg) 5 3, pointer;
  background: rgba(255, 252, 244, .6); border: 1.5px solid rgba(42, 37, 30, .25); border-radius: 8px;
  padding: .75rem .9rem; transition: border-color .2s, background .2s;
}
.vak select { appearance: none; -webkit-appearance: none; }
.kiezer { position: relative; }
.kiezer select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; padding: 0; border: 0; }
.kiezer-knop::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: .2rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .25s;
}
.kiezer-knop:hover { border-color: rgba(42, 37, 30, .45); }
/* nog niets gekozen: zacht grijs, zoals de voorbeeldtekst in het bericht */
.kiezer-knop.leeg { color: rgba(42, 37, 30, .42); }
.kiezer-lijst li:first-child { color: rgba(42, 37, 30, .5); }
.kiezer-knop:focus-visible, .kiezer.open .kiezer-knop { outline: none; border-color: var(--inkt); background: rgba(255, 252, 244, .9); }
.kiezer.open .kiezer-knop::after { transform: translateY(2px) rotate(225deg); }
.kiezer-lijst {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); list-style: none; padding: .4rem;
  background: #f8f2e4; border: 1.5px solid rgba(42, 37, 30, .22); border-radius: 8px;
  box-shadow: 0 18px 36px -14px rgba(42, 37, 30, .5);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s;
}
.kiezer.open .kiezer-lijst { opacity: 1; visibility: visible; transform: none; }
.kiezer-lijst:focus { outline: none; }
.kiezer-lijst li { display: flex; justify-content: space-between; align-items: center; padding: .65rem .8rem; border-radius: 7px; cursor: url(/img/cursor-link.svg) 5 3, pointer; font-size: .98rem; }
.kiezer-lijst li.actief { background: rgba(42, 37, 30, .08); }
/* de gekozen regel: wat zwaarder, met een klein inktpuntje erachter */
.kiezer-lijst li[aria-selected="true"] { font-weight: 600; }
.kiezer-lijst li[aria-selected="true"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #9a7330; }

/* spamval: buiten beeld, niet weg, zodat bots hem wel vinden */
.honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* de melding staat pas in het vel als er iets te melden is */
.melding { font-size: .9rem; color: #5b4630; }
.melding:empty { display: none; }
.melding.fout { color: #8a2f1d; }
.melding.goed { color: var(--inkt); }

/* het lakzegel: drukt zich na het versturen rechtsonder op het vel.
   Het vel knipt het af, anders maakt het vergrote zegel (onzichtbaar,
   vóór het indrukken) de pagina op de telefoon breder dan het scherm */
.vel { overflow: clip; }
.zegel { position: absolute; right: clamp(16px, 3vw, 36px); bottom: clamp(70px, 9vw, 96px); width: 112px; pointer-events: none; opacity: 0; transform: scale(1.6) rotate(-18deg); }
.zegel .lak { fill: #8a2f1d; }
.zegel .rand { fill: none; stroke: rgba(255, 230, 200, .35); stroke-width: 1.5; }
.zegel text { fill: rgba(255, 236, 214, .85); font-family: var(--kopfont); font-style: italic; font-size: 17px; }
.vel.verzegeld .zegel { animation: zegel .55s cubic-bezier(.3, 1.4, .5, 1) forwards; filter: drop-shadow(0 4px 6px rgba(60, 20, 10, .35)); }
@keyframes zegel { to { opacity: 1; transform: scale(1) rotate(-12deg); } }
@media (prefers-reduced-motion: reduce) { .vel.verzegeld .zegel { animation: none; opacity: 1; transform: rotate(-12deg); } }
@media (max-width: 640px) { .duo { grid-template-columns: 1fr; } .kanalen > div { grid-template-columns: 5.5rem minmax(0, 1fr); } }
@media (max-width: 544px) { .vel-voet { flex-direction: column-reverse; align-items: flex-start; } }

.knop {
  display: inline-block; margin-top: 1.25rem; padding: .85rem 2rem; border: 0;
  background: var(--goud-donker); color: var(--wit); font: 600 .9rem var(--tekstfont); letter-spacing: .04em; cursor: url(/img/cursor-link.svg) 5 3, pointer;
}
.knop:hover { background: var(--donker); color: var(--wit); }

/* voet: opgebouwd zoals die van aelir.nl. Een vol vlak in de huiskleur (hier
   het roomwit papier van de brief, met inkt erop), vijf kolommen, veel lucht,
   dan een groot motto met rechts een groot teken (de houtsnede-T uit het
   logo, gedrukt op het papier), en onderaan een regel achter een haarlijn */
/* de hele voet in Fahkwang, de letter van "The Puncke's Delight" op de foto bovenaan */
.voet {
  position: relative; color: var(--inkt); padding: 104px 36px 36px;
  font-family: var(--kopfont); font-weight: 500;
  background-color: var(--papier);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* de eerste kolom iets breder, voor het lange e-mailadres */
.voet-kolommen { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)); gap: 32px; max-width: 1200px; }
.voet-kolommen li { overflow-wrap: break-word; }
/* de kopjes zoals "The Puncke's Delight" op de foto: Fahkwang 600,
   gewone hoofd- en kleine letters; warm bruin */
.voet-kop {
  margin: 0 0 12px;
  font-family: var(--kopfont); font-size: 1.375rem; font-weight: 600; line-height: 1.2;
  color: #7a5a2c;
}
.voet ul { margin: 0; padding: 0; list-style: none; }
.voet li { font-size: 1.0625rem; line-height: 1.5; }
/* alles onder de kopjes: Fahkwang is breder dan een Garamond, dus iets kleiner */
.voet-kolommen li { font-size: 1.125rem; line-height: 1.5; }
.voet a { color: var(--inkt); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .18s; }
.voet a:hover, .voet a:focus-visible { color: var(--inkt); border-bottom-color: currentColor; }
/* YouTube en Facebook als volle logo's in inkt op het papier; warm bruin bij aanwijzen */
.voet .voet-sociaal { display: flex; gap: 16px; padding-top: 4px; }
.voet-sociaal a { display: block; border: 0; transition: color .25s, transform .25s; }
.voet .voet-sociaal a:hover, .voet .voet-sociaal a:focus-visible { color: #9a7330; transform: translateY(-2px); }
.voet-sociaal svg { display: block; width: 28px; height: 28px; fill: currentColor; }

.voet-onder { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 220px; }
.voet-motto { margin: 0; font-family: var(--kopfont); font-weight: 500; letter-spacing: -.03em; font-size: clamp(3rem, 7vw, 6.5rem); line-height: .92; }
/* het teken: de houtsnede-T, met "multiply" gedrukt in het papier */
.voet-teken { flex: none; width: clamp(7rem, 17vw, 15rem); height: auto; mix-blend-mode: multiply; filter: contrast(1.1) sepia(.15); }

.voet-regel { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(42, 37, 30, .3); }
.voet-regel ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.voet-regel li { font-size: .9375rem; }

@media (max-width: 760px) {
  .voet { padding: 72px 20px 28px; }
  .inhoud { padding-top: 72px; }
  .voet-kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voet-kolommen > :first-child { grid-column: 1 / -1; }
  /* kleinere kopjes, zodat "The ensemble" en "Listen & follow" op één regel passen */
  .voet-kop { font-size: 1.0625rem; }
  .voet-onder { margin-top: 96px; }
  .voet a { display: inline-block; padding-block: 8px; }
}
/* kleine telefoons: het motto en de T samen binnen het scherm */
@media (max-width: 380px) {
  .voet-motto { font-size: 2.6rem; }
  .voet-teken { width: 5.5rem; }
}
.midden { text-align: center; }
.bedankt-tekst { color: var(--gedempt, #c9c4bb); margin: 1.5rem auto 0; max-width: 32rem; }

/* het woord "Contact" in de foto brengt je naar het formulier (#brief):
   rustig scrollen, en het vel stopt net onder de bovenkant van het scherm */
.naar-brief { color: inherit; text-decoration: none; background: linear-gradient(var(--goud), var(--goud)) 100% 100% / 0 2px no-repeat; transition: color .3s, background-size .45s ease; }
.naar-brief:hover, .naar-brief:focus-visible { color: var(--goud); background-size: 100% 2px; background-position: 0 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.vel { scroll-margin-top: 24px; }

/* zacht laden: een nieuwe pagina vloeit in terwijl de kop blijft staan
   (view transitions tussen pagina's). De foto's ontwikkelen zich als een
   oude afdruk zodra ze in beeld en binnen zijn: zacht.js zet img.wacht tot
   dan, en img.onthul zolang het verschijnen duurt. De foto in de voet
   vloeit alleen in (img.laden). */
@view-transition { navigation: auto; }
.kop { view-transition-name: kop; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
@keyframes pagina-in { from { opacity: 0; transform: translateY(10px); } }
main, .voet { animation: pagina-in .8s cubic-bezier(.2, .7, .2, 1) both; }
.voet { animation-delay: .1s; }
main img, .voet img { transition: opacity .9s ease; }
img.laden, img.wacht { opacity: 0; }
/* van onder naar boven onthuld, uit de waas en de sepia naar scherp en in kleur;
   aan het eind is de uitsnede ruimer dan de foto, zodat lijst en schaduw blijven */
@keyframes onthul {
  from { opacity: 0; clip-path: inset(100% 0 0 0); filter: blur(10px) sepia(.9) brightness(1.25); scale: 1.06; }
  to   { clip-path: inset(-80px); filter: blur(0) sepia(0) brightness(1); scale: 1; }
}
img.onthul { animation: onthul 1.4s cubic-bezier(.2, .7, .2, 1) both; }
@media (prefers-reduced-motion: reduce) {
  main, .voet { animation: none; }
  main img, .voet img { transition: none; }
}


/* ---------- de opening op de homepagina (intro-start.js en intro.js) ---------- */
/* tot intro.js begint, dekt een donker vlak de pagina af; daarna neemt het doek het over */
html.intro::before { content: ""; position: fixed; inset: 0; z-index: 99; background: var(--donker); }
html.intro.intro-loopt::before { content: none; }
/* de echte T in de kop wacht tot de grote T geland is */
html.intro .kop .logo { opacity: 0; }
.intro-laag { position: fixed; inset: 0; z-index: 100; overflow: hidden; pointer-events: none; }
.intro-doek { position: absolute; inset: 0; background: var(--donker); pointer-events: auto; }
.intro-t { position: fixed; max-width: none; margin: 0; transform-origin: 50% 50%; will-change: transform; }
.intro-noot { position: fixed; color: var(--goud); will-change: transform, opacity; }
.intro-noot svg { display: block; width: 100%; height: 100%; overflow: visible; }