/* ==========================================================================
   Langzaam Leven — huisstijl in code
   Kalk · Leem · Aarde · Houtskool. De kunst levert de kleur.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Materiaalkleuren */
  --kalk:        #FDFBF6;
  --kalk-warm:   #F6F1E7;
  --leem:        #EBE3D5;
  --leem-line:   #DED4C2;
  --aarde:       #6E5C48;
  --aarde-soft:  #8B7A64;
  --houtskool:   #241F1B;
  --wit:         #FFFFFF;

  /* Accenten — komen uit het werk, niet uit een merkboek */
  --oker:        #B98A2E;
  --roest:       #A4472A;

  /* Rollen */
  --bg:          var(--kalk);
  --bg-alt:      var(--kalk-warm);
  --ink:         var(--houtskool);
  --ink-muted:   var(--aarde);
  --ink-faint:   var(--aarde-soft);
  --line:        var(--leem-line);
  --on-dark:     #F6EFE2;

  /* Typografie */
  --serif: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Ritme */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --maxw: 1560px;
  --maxw-text: 40rem;
  --section-y: clamp(4.5rem, 10vw, 9.5rem);

  /* Beweging — één curve voor de hele site */
  --ease: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.6s;

  --header-h: 5.25rem;
}

/* ---------- 2. 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(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--leem); color: var(--houtskool); }

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

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  background: var(--houtskool); color: var(--on-dark);
  padding: .75rem 1.25rem; z-index: 200; font-size: .8125rem;
  transition: transform .2s var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- 3. Typografie ------------------------------------------------ */
.display, h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.005em; }

.t-hero {
  font-family: var(--serif);
  font-size: clamp(2.75rem, 6.4vw, 5.25rem);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.t-h1 { font-family: var(--serif); font-size: clamp(2.25rem, 4.6vw, 3.75rem); line-height: 1.08; letter-spacing: -0.012em; }
.t-h2 { font-family: var(--serif); font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.14; letter-spacing: -0.01em; }
.t-h3 { font-family: var(--serif); font-size: clamp(1.375rem, 2.2vw, 1.875rem); line-height: 1.2; }

.t-lead {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.65vw, 1.4375rem);
  line-height: 1.5;
  color: var(--ink-muted);
}
.t-body { font-size: clamp(.9375rem, 1.05vw, 1.0625rem); line-height: 1.75; color: var(--ink-muted); }
.t-body-serif { font-family: var(--serif); font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.62; color: var(--ink-muted); }

.t-eyebrow {
  font-family: var(--sans);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-faint);
}
.t-label {
  font-family: var(--sans);
  font-size: .75rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}
.t-micro { font-size: .8125rem; line-height: 1.5; color: var(--ink-faint); }
.t-price { font-family: var(--sans); font-size: .875rem; font-weight: 500; letter-spacing: .01em; font-variant-numeric: tabular-nums; }

/* Zachte, iets ruimere spatiëring — de stilte in Langzaam Leven */
.t-airy { letter-spacing: .01em; }

/* Handmatige regelval in koppen */
.line { display: block; }

/* ---------- 4. Layout ---------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: 60rem; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section-tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.bleed { width: 100%; }

/* ---------- 5. Buttons --------------------------------------------------- */
.btn {
  --btn-fg: var(--ink);
  --btn-line: var(--ink);
  --btn-fill: var(--ink);
  --btn-fg-hover: var(--kalk);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .875rem 1.75rem;
  border: 1px solid var(--btn-line);
  border-radius: 999px;
  color: var(--btn-fg);
  font-family: var(--sans);
  font-size: .8125rem;
  letter-spacing: .045em;
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease);
  white-space: nowrap;
}
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--btn-fill);
  transform: translateY(101%);
  transition: transform .5s var(--ease);
}
.btn:hover, .btn:focus-visible { color: var(--btn-fg-hover); border-color: var(--btn-fill); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.btn--light { --btn-fg: var(--on-dark); --btn-line: rgba(246,239,226,.6); --btn-fill: var(--on-dark); --btn-fg-hover: var(--houtskool); }
.btn--solid { --btn-fg: var(--kalk); --btn-line: var(--ink); --btn-fg-hover: var(--ink); --btn-fill: transparent; background: var(--ink); }
.btn--solid::before { background: var(--kalk); }
.btn--lg { padding: 1.0625rem 2.25rem; font-size: .875rem; }
.btn--sm { padding: .6875rem 1.25rem; font-size: .75rem; }

/* Tekstlink met onderstreping die groeit */
.link-u {
  position: relative;
  font-size: .8125rem; letter-spacing: .045em;
  padding-bottom: 2px;
}
.link-u::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform-origin: right; transform: scaleX(0);
  transition: transform .5s var(--ease);
}
.link-u:hover::after, .link-u:focus-visible::after { transform-origin: left; transform: scaleX(1); }

/* ---------- 6. Header ---------------------------------------------------- */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  color: var(--on-dark);
  transition: transform .55s var(--ease), background-color .45s var(--ease),
              color .45s var(--ease), box-shadow .45s var(--ease), height .45s var(--ease);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(20,16,12,.42), rgba(20,16,12,0));
  opacity: 1; transition: opacity .45s var(--ease);
}
.site-header.is-solid {
  background: rgba(253,251,246,.92);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(36,31,27,.08);
  height: 4.25rem;
}
.site-header.is-solid::before { opacity: 0; }
.site-header.is-hidden { transform: translateY(-100%); }
/* Pagina's zonder hero starten meteen 'solid' */
.site-header.is-static { position: sticky; }

.header-inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
}

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 3rem); }
.nav--right { justify-content: flex-end; }
.nav-link {
  position: relative;
  font-size: .8125rem; letter-spacing: .05em; padding-block: .35rem;
  opacity: .92; transition: opacity .3s var(--ease);
}
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.nav-link:hover, .nav-link:focus-visible { opacity: 1; }
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav-link.is-current::after { transform: scaleX(1); opacity: .45; }

.brand { justify-self: center; display: block; line-height: 0; }

/* Het woordmerk is echte tekst, geen beeld. Dat scheelt een bestand, schaalt
   scherp mee op elk scherm, is te lezen door een schermlezer en te selecteren
   — en de naam veranderen is voortaan één woord in content/site.json in plaats
   van een nieuwe PNG laten maken.
   Cormorant is gekozen omdat het van de beschikbare letters het dichtst bij het
   oorspronkelijke woordmerk staat: dezelfde hoge contrastwerking, dezelfde
   fijne haarlijnen, dezelfde schuine t-top. Zeker weten kan niet — het origineel
   was een platgeslagen PNG zonder bronbestand. */
.wordmark {
  display: block;
  font-family: "Cormorant", "EB Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.25rem, 2.1vw, 1.65rem);
  line-height: 1;
  /* Het oude woordmerk stond strakker op elkaar dan Cormorant van zichzelf
     doet; dit haalt dat verschil grotendeels weg. */
  letter-spacing: -.012em;
  color: currentColor;
  white-space: nowrap;
}
.wordmark--footer { font-size: clamp(1.5rem, 2.8vw, 2.1rem); color: var(--aarde-soft); }

.lang {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
}
.lang a { opacity: .5; transition: opacity .3s var(--ease); }
.lang a:hover { opacity: 1; }
.lang .is-active { opacity: 1; }
.lang span[aria-hidden] { opacity: .3; }
.lang > span { display: inline-block; }

/* Burger (mobiel) */
.burger { display: none; width: 2.5rem; height: 2.5rem; margin-inline-start: -.625rem; position: relative; }
.burger span {
  position: absolute; left: .5rem; right: .5rem; height: 1px; background: currentColor;
  transition: transform .45s var(--ease), opacity .3s var(--ease);
}
.burger span:nth-child(1) { top: 1rem; }
.burger span:nth-child(2) { bottom: 1rem; }
.burger.is-open span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* Mobiel menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--kalk); color: var(--ink);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--header-h) var(--gutter) 3rem;
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu ul { display: flex; flex-direction: column; gap: .25rem; }
.mobile-menu a {
  font-family: var(--serif); font-size: clamp(2rem, 9vw, 3rem); line-height: 1.25;
  display: block; opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.mobile-menu.is-open a { opacity: 1; transform: none; }
.mobile-menu.is-open li:nth-child(1) a { transition-delay: .10s; }
.mobile-menu.is-open li:nth-child(2) a { transition-delay: .16s; }
.mobile-menu.is-open li:nth-child(3) a { transition-delay: .22s; }
.mobile-menu.is-open li:nth-child(4) a { transition-delay: .28s; }
.mobile-menu__foot { margin-top: 3rem; display: flex; gap: 1.5rem; align-items: center; }

@media (max-width: 860px) {
  .burger { display: block; }
  .nav--left .nav-link, .nav--right .nav-link { display: none; }
  .header-inner { grid-template-columns: 1fr auto 1fr; }
}

/* ---------- 7. Hero ------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  color: var(--on-dark);
  background: #6B5B47;
}
.hero__media { position: absolute; inset: 0; overflow: hidden; }
/* <picture> is een gewoon blok en zou de hoogteketen breken: een foto met
   height:118% zou dan 118% van de omhulling nemen in plaats van van de
   header. Daarom krijgt de omhulling zelf de maat van het headervak. */
.hero__media picture { display: block; position: absolute; inset: 0; }
.hero__media img,
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 118%;
  object-fit: cover; object-position: center 42%;
  will-change: transform;
}
/* De video ligt precies over de foto. Hij wordt pas zichtbaar zodra hij
   werkelijk speelt — zie heroVideo() in site.js. Gaat er onderweg iets mis,
   dan blijft de foto staan en merkt de bezoeker er niets van. */
.hero__video {
  opacity: 0; transition: opacity .9s ease;
  pointer-events: none;
}
.hero__video.is-speelt { opacity: 1; }

/* Op een staand scherm valt de tekst anders midden op het schilderij, en dat
   leest slecht: gemeten 2,4:1 waar 3:1 het minimum is. Twee ingrepen. Het
   beeld schuift een stukje omhoog, zodat de donkere voorgrond — tafel en
   vloer — achter de tekst komt in plaats van het lichte doek, en het
   schilderij bovenin nog heel blijft. En de sluier onderin wordt
   dieper. Samen brengt dat de titel op ruim 4:1 en de kleine tekst boven 4,5:1. */
@media (orientation: portrait) and (max-width: 900px) {
  .hero__media img,
  .hero__video { top: -7%; bottom: auto; }
  .hero__scrim {
    background:
      linear-gradient(to top,
        rgba(28,22,16,.58) 0%,
        rgba(28,22,16,.46) 30%,
        rgba(28,22,16,.18) 55%,
        rgba(28,22,16,0) 78%);
  }
}
/* Twee sluiers: één van onderaf voor de tekstzone, één van links voor de
   kolom waar titel en knop staan. De maten zijn gemeten, niet geschat: met
   het oude, lichtere beeld haalde de titel maar 2,6:1 waar grote tekst 3:1
   nodig heeft. Zo staat hij op 3,3:1 zonder dat de foto dichtslibt. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(28,22,16,.56) 0%, rgba(28,22,16,.32) 40%, rgba(28,22,16,0) 72%),
    linear-gradient(to right, rgba(28,22,16,.40) 0%, rgba(28,22,16,0) 58%);
}
.hero__inner {
  position: relative;
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding: 0 var(--gutter) clamp(4rem, 11vh, 8rem);
}
.hero__title { max-width: 16ch; text-wrap: balance; }
.hero__sub { margin-top: 1.5rem; font-size: clamp(.9375rem, 1.3vw, 1.0625rem); letter-spacing: .015em; opacity: .92; }
.hero__cta { margin-top: 2.25rem; }

/* Hero-intro: regel voor regel omhoog */
.js .hero__title .line, .js .hero__sub, .js .hero__cta {
  opacity: 0; transform: translateY(22px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.hero.is-ready .hero__title .line { opacity: 1; transform: none; }
.hero.is-ready .hero__title .line:nth-child(1) { transition-delay: .18s; }
.hero.is-ready .hero__title .line:nth-child(2) { transition-delay: .30s; }
.hero.is-ready .hero__sub  { opacity: .92; transform: none; transition-delay: .46s; }
.hero.is-ready .hero__cta  { opacity: 1;   transform: none; transition-delay: .58s; }

.hero__scroll {
  position: absolute; right: var(--gutter); bottom: clamp(4rem, 11vh, 8rem);
  display: flex; align-items: center; gap: .625rem;
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  opacity: .75; transition: opacity .8s var(--ease) .8s;
}
.js .hero__scroll { opacity: 0; }
.hero.is-ready .hero__scroll { opacity: .75; }
.hero__scroll i { display: block; width: 1px; height: 2.5rem; background: currentColor; position: relative; overflow: hidden; }
.hero__scroll i::after {
  content: ""; position: absolute; inset-inline: 0; height: 40%; background: var(--kalk);
  animation: drip 2.4s var(--ease) infinite;
}
@keyframes drip { 0% { top: -40%; } 60%, 100% { top: 100%; } }
@media (max-width: 860px) { .hero__scroll { display: none; } }

/* Kleinere hero voor subpagina's */
.page-head { padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6rem)); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.page-head__eyebrow { margin-bottom: 1.25rem; }
.page-head__title { max-width: 18ch; text-wrap: balance; }
.page-head__lead { margin-top: 1.5rem; max-width: 44ch; }

/* ---------- 8. Sectiekop ------------------------------------------------- */
.sec-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(1rem, 3vw, 2.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.sec-head__title { flex: 0 1 auto; }
.sec-head__lead { flex: 1 1 18rem; max-width: 34ch; }
.sec-head__cta { flex: 0 0 auto; margin-inline-start: auto; }
@media (max-width: 700px) { .sec-head__cta { margin-inline-start: 0; } }

/* ---------- 9. Werk-grid ------------------------------------------------- */
.works {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.5rem, 1.1vw, 1rem);
}
@media (max-width: 1240px) { .works { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .works { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } }
@media (max-width: 520px) {
  .work-card__meta { flex-direction: column; align-items: flex-start; gap: .125rem; }
}

.work-card { display: block; position: relative; }
.work-card__frame {
  display: block;
  position: relative; overflow: hidden;
  background: var(--leem);
  aspect-ratio: var(--ratio, 0.8);
}
.work-card__frame img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.001);
  transition: transform 1.15s var(--ease), opacity .6s var(--ease);
}
.work-card:hover .work-card__frame img,
.work-card:focus-visible .work-card__frame img { transform: scale(1.045); }

.work-card__tag {
  position: absolute; top: .75rem; left: .75rem;
  background: rgba(253,251,246,.94); color: var(--ink);
  font-size: .625rem; letter-spacing: .11em; text-transform: uppercase;
  padding: .375rem .625rem; border-radius: 999px;
  font-weight: 500;
}
/* Verkocht valt op: de roest uit het eigen palet, geen alarmrood.
   Dat een werk weg is, is nieuws — het laat zien dat er beweging in zit. */
.work-card__tag--sold { background: var(--roest); color: var(--on-dark); }
.work__status.is-sold,
.work__status.is-reserved { color: var(--roest); }

.work-card__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .875rem .125rem 0;
}
.work-card__name { font-size: .875rem; letter-spacing: .01em; }
.work-card__price { color: var(--ink-muted); white-space: nowrap; flex: none; }
.work-card.is-sold .work-card__frame img { opacity: .62; }
.work-card.is-sold .work-card__price { text-decoration: line-through; opacity: .5; }
.work-card.is-sold .work-card__name { color: var(--ink-muted); }

/* Horizontale rail (mobiel + 'meer werk') */
.rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(60vw, 17rem);
  gap: clamp(.5rem, 1.1vw, 1rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 900px) { .rail { grid-auto-columns: minmax(0, 20rem); } }

/* ---------- 10. Cadeau-band ---------------------------------------------- */
/* Cadeausectie: tekst links, de foto van het ingepakte werk rechts. De foto
   is met scripts/beeld op de papierkleur van deze band gezet, zodat er geen
   witte rechthoek in de pagina staat waar de foto ophoudt. */
/* Bewust lager dan een gewone sectie: dit is een tussendoortje, geen hoofdstuk.
   De foto is daarom ook smaller dan de tekstkolom breed zou toestaan. */
.gift {
  background: var(--bg-alt); color: var(--houtskool);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.gift__grid {
  display: grid; align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}
.gift__box { max-width: 34ch; }
.gift__body { margin-top: 1.25rem; color: #4E4034; }
.gift__cta { margin-top: 2rem; }
.gift__media { margin: 0; }
.gift__media img { display: block; width: 100%; height: auto; }
/* De foto is op de papierkleur van deze band gezet, maar JPEG laat altijd een
   punt speling. Op zo'n groot vlak kun je die naad net zien. Door de buitenste
   randen te laten vervagen kán er geen rand ontstaan — ook niet als er later
   een andere foto in komt. Browsers zonder mask-ondersteuning tonen gewoon de
   hele foto; dan is er hooguit dat ene punt verschil. */
@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in) {
  .gift__media img {
    mask-image:
      linear-gradient(to right,  transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
  }
}

@media (min-width: 861px) {
  .gift__grid { grid-template-columns: 1fr minmax(0, 21rem); }
  .gift__media { justify-self: end; }
}
@media (max-width: 860px) {
  .gift__media { max-width: 78vw; margin-inline: auto; }
}

/* ---------- 11. Over-blok (home) ----------------------------------------- */
.about-home { display: grid; gap: clamp(2.5rem, 6vw, 5rem); grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 900px) { .about-home { grid-template-columns: 1fr; } }
.about-home__title { text-wrap: balance; }
.about-home__portrait {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  width: min(23rem, 74%);
  transform: rotate(-2.4deg);
  box-shadow: 0 18px 44px -18px rgba(36,31,27,.34);
  background: var(--wit); padding: .5rem .5rem 2.75rem;
  transition: transform .8s var(--ease);
}
.about-home__portrait:hover { transform: rotate(-1deg); }
.about-home__portrait img { width: 100%; }
.about-home__text > * + * { margin-top: 1.5rem; }
.about-home__cta { margin-top: 2.25rem; }

/* ---------- 12. Werkpagina ----------------------------------------------- */
.work-detail { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 940px) { .work-detail { grid-template-columns: 1fr; } }

.work-detail__media { position: relative; background: var(--leem); overflow: hidden; }
.work-detail__media img { width: 100%; }

.work-detail__side { position: sticky; top: calc(var(--header-h) + 1.5rem); }
@media (max-width: 940px) { .work-detail__side { position: static; } }

.work-detail__gallery { display: grid; gap: .5rem; }
.work-thumbs {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 5.5rem);
  gap: .5rem; justify-content: start;
  overflow-x: auto; scrollbar-width: none;
}
.work-thumbs::-webkit-scrollbar { display: none; }
.work-thumb {
  display: block; padding: 0; overflow: hidden;
  background: var(--leem); aspect-ratio: var(--ratio, 0.8);
  opacity: .55; transition: opacity .4s var(--ease), outline-color .3s var(--ease);
  outline: 1px solid transparent; outline-offset: -1px;
}
.work-thumb img { width: 100%; height: 100%; object-fit: cover; }
.work-thumb:hover { opacity: .85; }
.work-thumb.is-active { opacity: 1; outline-color: var(--ink); }

.work-detail__series { margin-top: .625rem; color: var(--ink-faint); }
.work-detail__series em { font-family: var(--serif); font-style: italic; font-size: 1.0625rem; color: var(--ink-muted); }

.work-detail__title { margin-top: .75rem; }
.work-detail__price { margin-top: 1rem; font-family: var(--sans); font-size: 1.125rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.work-detail__desc { margin-top: 1.75rem; }
.work-detail__buy { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
/* Het mailadres onder de aanvraagknop. Een mailto doet niets bij wie geen
   mailprogramma heeft ingesteld; dan moet het adres over te tikken zijn. */
.work-detail__fallback { margin-top: .75rem; color: var(--ink-faint); width: 100%; }
.work-detail__buy { flex-direction: column; align-items: stretch; }
.work-detail__buy .btn { align-self: flex-start; }
.work-detail__notes { margin-top: 1.5rem; display: grid; gap: .5rem; }
.work-detail__notes p { display: flex; gap: .625rem; align-items: flex-start; }
.work-detail__notes svg { flex: none; margin-top: .28rem; opacity: .5; }

.spec { margin-top: 2.25rem; border-top: 1px solid var(--line); }
.spec div { display: flex; justify-content: space-between; gap: 1rem; padding: .8125rem 0; border-bottom: 1px solid var(--line); }
.spec dt { color: var(--ink-faint); font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; }
.spec dd { margin: 0; font-size: .875rem; text-align: right; }

.form-error {
  margin-top: 1rem; font-size: .8125rem; color: var(--roest);
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity .3s var(--ease), max-height .3s var(--ease);
}
.form-error.is-shown { opacity: 1; max-height: 6rem; }

/* ---------- 13. Over-pagina ---------------------------------------------- */
.prose > * + * { margin-top: 1.375rem; }
.prose p { color: var(--ink-muted); }
.measure { max-width: var(--maxw-text); }

.pull {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.24; text-wrap: balance;
  max-width: 22ch; color: var(--ink);
}
.manifesto { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); max-width: 46rem; }
.manifesto p { font-family: var(--serif); font-size: clamp(1.125rem, 1.7vw, 1.5rem); line-height: 1.5; color: var(--ink-muted); }
.manifesto p:last-child { color: var(--ink); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split--reverse > :first-child { order: 2; }
@media (max-width: 900px) { .split--reverse > :first-child { order: 0; } }

.band { background: var(--bg-alt); }
.band--ink { background: var(--houtskool); color: var(--on-dark); }
.band--ink .t-eyebrow, .band--ink .t-body, .band--ink .prose p { color: rgba(246,239,226,.7); }
.band--ink .pull { color: var(--on-dark); }

.figure figcaption { margin-top: .875rem; }

/* ---------- 14. Contact -------------------------------------------------- */
.contact-page-body { padding-top: 0; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.field { display: grid; gap: .5rem; }
.field + .field { margin-top: 1.25rem; }
.field label { font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); }
.field input, .field textarea {
  font: inherit; font-size: .9375rem; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: .625rem 0; border-radius: 0;
  transition: border-color .35s var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field textarea { resize: vertical; min-height: 8rem; }

.contact-aside > * + * { margin-top: 2rem; }
.contact-aside dt { font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .375rem; }
.contact-aside dd { margin: 0; }

/* ---------- 15. Footer --------------------------------------------------- */
.site-footer { background: var(--bg-alt); padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: 2rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
.footer-brand p { margin-top: 1.25rem; max-width: 26ch; }
.footer-col h4 { font-family: var(--sans); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--ink-faint); margin-bottom: 1rem; }
.footer-col li + li { margin-top: .625rem; }
.footer-col a { font-size: .875rem; color: var(--ink-muted); transition: color .3s var(--ease); }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.5rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
}

/* ---------- 16. Scroll-reveal -------------------------------------------- */
/* Zonder JS blijft alles gewoon zichtbaar — de animatie is een extraatje. */
.js .reveal { opacity: 0; transform: translateY(26px);
              transition: opacity .95s var(--ease-out), transform .95s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }
/* Stagger binnen een grid */
.js .stagger > * { opacity: 0; transform: translateY(26px);
                    transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); }
.stagger.is-in > * { opacity: 1; transform: none; }
.stagger.is-in > *:nth-child(1) { transition-delay: .00s; }
.stagger.is-in > *:nth-child(2) { transition-delay: .06s; }
.stagger.is-in > *:nth-child(3) { transition-delay: .12s; }
.stagger.is-in > *:nth-child(4) { transition-delay: .18s; }
.stagger.is-in > *:nth-child(5) { transition-delay: .24s; }
.stagger.is-in > *:nth-child(6) { transition-delay: .30s; }
.stagger.is-in > *:nth-child(7) { transition-delay: .36s; }
.stagger.is-in > *:nth-child(8) { transition-delay: .42s; }
.stagger.is-in > *:nth-child(9) { transition-delay: .48s; }
.stagger.is-in > *:nth-child(n+10) { transition-delay: .54s; }

/* Beeld dat zachtjes 'invalt'.
   De klip zit op het beeld zelf, niet op het kader eromheen. Een element dat
   zichzelf helemaal wegklipt wordt door IntersectionObserver namelijk als
   onzichtbaar geteld: die ging dan nooit af, en het beeld bleef weg tenzij
   het vangnet in site.js het op tijd zag. */
.js .img-in img { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease); }
.img-in.is-in img { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger > *, .hero__title .line, .hero__sub, .hero__cta, .hero__scroll { opacity: 1 !important; transform: none !important; }
  .hero__video { display: none; }
  .img-in img { clip-path: none !important; }
  .work-card:hover .work-card__frame img { transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- 17. Diversen ------------------------------------------------- */
.notice { padding: clamp(4rem, 12vh, 9rem) 0; text-align: center; }
.notice .t-h1 { margin-inline: auto; }
.notice p { margin: 1.5rem auto 0; max-width: 38ch; }
.notice .btn { margin-top: 2.5rem; }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter {
  border: 1px solid var(--line); border-radius: 999px;
  padding: .5rem 1rem; font-size: .75rem; letter-spacing: .045em;
  color: var(--ink-muted);
  transition: color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.filter:hover { border-color: var(--ink-faint); color: var(--ink); }
.filter.is-active { background: var(--ink); border-color: var(--ink); color: var(--kalk); }

/* ==========================================================================
   Het verhaal — Over Langzaam Leven en over Els Schram
   --------------------------------------------------------------------------
   Vijf bouwstenen, allemaal aangedreven door één getal: --p, de voortgang van
   het element door het scherm, van 0 (komt onderin binnen) tot 1 (verdwijnt
   bovenaan). Dat getal wordt gezet door verteller() in site.js. Staat er geen
   JavaScript, of heeft de bezoeker 'minder beweging' aanstaan, dan blijft --p
   op zijn beginwaarde staan en is alles gewoon rustig en stil zichtbaar.
   ========================================================================== */

.verhaal { --p: 0.5; }

/* ---------- 1. Scène: schermvullend beeld met tekst eroverheen ------------ */
.scene {
  position: relative;
  min-height: 100svh;
  display: grid; align-items: end;
  overflow: clip;
  color: var(--on-dark);
  background: var(--houtskool);
}
.scene__media { position: absolute; inset: 0; overflow: hidden; }
.scene__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 50%;
  /* langzaam uitzoomen terwijl je erlangs scrolt: net genoeg om te leven */
  transform: scale(calc(1.12 - 0.10 * var(--p)));
  transform-origin: center 40%;
  will-change: transform;
}
.scene__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(20,16,12,.68) 0%, rgba(20,16,12,.34) 34%, rgba(20,16,12,.06) 70%),
    linear-gradient(to right, rgba(20,16,12,.42) 0%, rgba(20,16,12,0) 62%),
    /* bovenin een vleugje donker, anders valt de menubalk weg tegen een lichte lucht */
    linear-gradient(to bottom, rgba(20,16,12,.34) 0%, rgba(20,16,12,0) 20%);
}
.scene__inner {
  position: relative;
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding: 0 var(--gutter) clamp(3.5rem, 10vh, 7rem);
}
.scene__eyebrow { color: var(--on-dark); opacity: .74; margin-bottom: 1.5rem; }
.scene__title { max-width: 15ch; text-wrap: balance; }
.scene__sub {
  margin-top: 1.75rem; max-width: 42ch;
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem); line-height: 1.55;
  color: var(--on-dark); opacity: .9;
}
/* De tekst komt mee omhoog, iets trager dan de pagina zelf. */
.js .scene__inner > * { transform: translate3d(0, calc(40px - 80px * var(--p)), 0); }

/* ---------- 2. Groeiend beeld -------------------------------------------- */
/* Begint als een ingelegde foto en groeit naar de volle breedte terwijl je
   erheen scrolt. Het duidelijkste gebaar van de hele pagina, dus spaarzaam
   gebruiken: twee keer per pagina, niet meer. */
.groei { padding-block: clamp(2rem, 6vw, 5rem); }
.groei__frame {
  margin: 0 auto;
  overflow: hidden;
  /* van 62% naar 100% breedte, en de ronding loopt tegelijk weg */
  width: min(100%, calc(62% + var(--p) * 76%));
  max-width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--leem);
}
.groei__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(max(1, calc(1.14 - var(--p) * 0.28)));
  will-change: transform;
}
.groei__bij {
  max-width: var(--maxw); margin: 1.25rem auto 0;
  padding-inline: var(--gutter);
}

/* ---------- 3. Grote uitspraak ------------------------------------------- */
.groot {
  padding-block: clamp(5rem, 14vw, 12rem);
}
.groot__tekst {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 4.2vw, 3.4rem);
  line-height: 1.16; letter-spacing: -0.012em;
  color: var(--ink);
  max-width: 22ch; text-wrap: balance;
  margin-inline: auto;
}
.groot--links .groot__tekst { margin-inline: 0; }

/* ---------- 4. Uitspraak van Els ----------------------------------------- */
/* Geen testimonial-kaartje. Alleen letters, veel lucht, en haar naam klein. */
.uitspraak { padding-block: clamp(5rem, 13vw, 11rem); }
.uitspraak__tekst {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(2rem, 5.4vw, 4.5rem);
  line-height: 1.1; letter-spacing: -0.018em;
  max-width: 18ch; text-wrap: balance;
}
.uitspraak__naam {
  margin-top: clamp(1.75rem, 4vw, 3rem);
  font-family: var(--sans); font-size: .8125rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.uitspraak--op-beeld {
  position: relative; overflow: clip;
  color: var(--on-dark);
  display: grid; align-items: center;
  min-height: 92svh;
}
.uitspraak--op-beeld .uitspraak__naam { color: var(--on-dark); opacity: .7; }
.uitspraak__inner {
  position: relative;
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- 5. Editorial raster ------------------------------------------ */
/* Foto's van verschillende maten, bewust uit het lood. Geen collage: er zit
   veel meer lucht in dan beeld. */
.editorial {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
}
.editorial figure { margin: 0; }
.editorial img { display: block; width: 100%; height: auto; }
.editorial figcaption {
  margin-top: .875rem;
  font-size: .8125rem; letter-spacing: .01em; color: var(--ink-faint);
}
@media (min-width: 861px) {
  .editorial { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .ed-a { grid-column: 1 / span 6; }
  .ed-b { grid-column: 8 / span 5; margin-top: clamp(3rem, 9vw, 8rem); }
  .ed-c { grid-column: 2 / span 4; margin-top: clamp(1rem, 4vw, 3rem); }
  .ed-d { grid-column: 7 / span 6; margin-top: clamp(-2rem, -1vw, 0rem); }
}

/* ---------- 6. Tekstkolom in het verhaal --------------------------------- */
.verhaal-tekst { max-width: 34rem; }
.verhaal-tekst p + p { margin-top: 1.5rem; }
.verhaal-tekst .btn { margin-top: 2.25rem; }
.verhaal-kop__eyebrow { margin-bottom: 1.5rem; }
.verhaal-kop__title { max-width: 17ch; text-wrap: balance; }
.verhaal-kop__sub {
  margin-top: 1.75rem; max-width: 46ch;
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); line-height: 1.58;
  color: var(--ink-muted);
}

/* ---------- 7. Minder beweging ------------------------------------------- */
/* Alles blijft staan waar het hoort, niets schuift of groeit. */
@media (prefers-reduced-motion: reduce) {
  .scene__media img,
  .groei__frame img { transform: none !important; }
  .groei__frame { width: 100% !important; }
  .js .scene__inner > * { transform: none !important; }
}

/* ---------- 8. Sectie 2 op de homepage: de maker ------------------------- */
/* Portret groot links, verhaal rechts. Het portret loopt bewust door tot
   onder de tekst: Els mag hier ruimte innemen zonder dat het een
   monument wordt. */
.maker { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.maker__portret { margin: 0; }
.maker__portret img { display: block; width: 100%; height: auto; }
.maker__tekst .verhaal-kop__sub { color: var(--ink-muted); }
@media (min-width: 861px) {
  .maker { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: clamp(3rem, 7vw, 6rem); }
}

/* ==========================================================================
   De vier blokken over Langzaam Leven en Els Schram op de homepage
   ========================================================================== */

/* ---------- Groeiende scène ----------------------------------------------
   Het blok begint als een ingelegd beeld en opent zich naar de volle breedte
   terwijl je erheen scrolt. Dezelfde beweging als op de Over-pagina, maar nu
   met de tekst mee in het kader. Zonder JavaScript staat --p op 0.5 en is het
   blok meteen volledig open: dat is de rusttoestand, niet een halve stand. */
.scene--groeit {
  /* Hoeveel het blok nog aan weerszijden inspringt. Van 8vw naar 0 terwijl je
     erheen scrolt: het beeld opent zich naar de volle breedte. Bij --p 0.5,
     de rusttoestand zonder JavaScript, staat het meteen helemaal open. */
  --inzet: max(0px, calc(8vw - var(--p) * 19vw));
  background: var(--bg);
}
/* Beeld en sluier krijgen de inspringing, niet de sectie zelf: een absoluut
   geplaatst kind rekent inset:0 tegen de opvullingsrand en zou dus gewoon
   over de opvulling heen lopen. */
.scene--groeit .scene__media,
.scene--groeit .scene__scrim { left: var(--inzet); right: var(--inzet); }
.scene--groeit .scene__media { background: var(--houtskool); }
/* De tekst schuift mee, zodat hij binnen het beeld blijft staan. */
.scene--groeit .scene__inner { padding-inline: calc(var(--gutter) + var(--inzet)); }
.scene--thuis { min-height: 86svh; align-items: center; }
/* De twee beelden op de homepage zijn licht: kalkmuren en middagzon. Met de
   sluier van de Over-pagina haalde het bovenschrift maar 3,7:1 waar kleine
   tekst 4,5:1 nodig heeft. Deze is dieper en reikt verder naar rechts. */
.scene--thuis .scene__scrim {
  background:
    linear-gradient(to top, rgba(20,16,12,.70) 0%, rgba(20,16,12,.40) 38%, rgba(20,16,12,.10) 72%),
    linear-gradient(to right, rgba(20,16,12,.60) 0%, rgba(20,16,12,.12) 46%, rgba(20,16,12,0) 66%),
    linear-gradient(to bottom, rgba(20,16,12,.30) 0%, rgba(20,16,12,0) 22%);
}
/* Volledig dekkend: een klein label mag niet ook nog eens doorzichtig zijn. */
.scene--thuis .scene__eyebrow { opacity: 1; }

/* In deze foto begint het schilderij al op 14% van boven. Met de standaard
   uitsnede in het midden valt het werk tegen de bovenrand aan en lijkt het
   eraf te vallen. Hier hoger uitsnijden, zodat er lucht boven het doek komt. */
.scene--ruimte-boven .scene__media img { object-position: center 12%; }
.scene--thuis .scene__inner { padding-block: clamp(3rem, 8vh, 6rem); }
.scene--thuis .scene__title { max-width: 13ch; }
.scene--thuis .scene__sub { max-width: 38ch; }
.scene__lijf {
  margin-top: 1.75rem; max-width: 44ch;
  font-size: clamp(.9375rem, 1.05vw, 1.0625rem); line-height: 1.72;
  color: var(--on-dark); opacity: .82;
}
.scene__knop { margin-top: 2.25rem; }

/* ---------- Licht blok: tekst links, beeld rechts tot de rand ------------- */
.duo {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.duo__tekst { max-width: 34rem; }
.duo__tekst p + p { margin-top: 1.25rem; }
.duo__tekst .btn { margin-top: 2.25rem; }
.duo__beeld { margin: 0; overflow: hidden; }
.duo__beeld img { display: block; width: 100%; height: auto; }
@media (min-width: 861px) {
  .duo { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
  /* het beeld loopt door tot de rechterrand van het scherm */
  .duo__beeld { margin-right: calc(var(--gutter) * -1); }
}

/* ---------- Features: de vermelding in Buitenleven ------------------------ */
.pers__kop { max-width: 22ch; }
.pers__strook {
  display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem);
  grid-template-columns: repeat(3, 1fr);
}
.pers__strook figure { margin: 0; overflow: hidden; background: var(--leem); }
.pers__strook img { display: block; width: 100%; height: auto; }
@media (min-width: 861px) {
  .pers__kop { max-width: 22ch; }
.pers__strook { margin-right: calc(var(--gutter) * -1); }
}

/* ---------- Minder beweging ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .scene--groeit { --inzet: 0px !important; }
}


/* ==========================================================================
   De Over-pagina
   --------------------------------------------------------------------------
   Zeven hoofdstukken onder elkaar in de volgorde van de mock-up: kamer, Els,
   haar hand, atelier, haar eigen woorden, waarom het bestaat, en de werken.
   Elk hoofdstuk is een kolom tekst naast een kolom beeld, om en om links en
   rechts. Alle beweging hangt aan --p; zonder JavaScript staat alles stil op
   zijn rustplaats.
   ========================================================================== */

/* ---------- Hoofdstuk: tekst naast beeld --------------------------------- */
.kapittel { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.kapittel__lijf { margin-top: 1.75rem; }
@media (min-width: 861px) {
  .kapittel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 6rem); }
  /* Het beeld van een omgekeerd hoofdstuk komt iets omhoog, zodat het over de
     sectie ervoor heen valt. Dat houdt de pagina uit het lood. */
  .kapittel--om .kapittel__beeld { margin-top: calc(-1 * clamp(2rem, 6vw, 5rem)); }
}
@media (max-width: 860px) {
  /* Op een telefoon eerst de kop, dan de foto: anders staan er twee foto's
     onder elkaar en verdwijnt het ritme van tekst, beeld, tekst, beeld. */
  .kapittel--om .kapittel__tekst { order: -1; }
}
/* Twee hoofdstukken op een rij hebben minder lucht nodig dan een losse sectie. */
.kap-strak { padding-top: 0; }

/* De kamer op deze foto is licht: kalkmuur, linnen bank, middagzon. Met de
   standaardsluier haalde het bovenschrift 4,3:1 waar kleine tekst 4,5:1
   nodig heeft. Dus volledig dekkend zetten, en de sluier onderin iets
   dieper trekken. Gemeten met de foto en de sluier in een canvas. */
.scene--over .scene__eyebrow { opacity: 1; }
.scene--over .scene__scrim {
  background:
    linear-gradient(to top, rgba(20,16,12,.76) 0%, rgba(20,16,12,.44) 36%, rgba(20,16,12,.08) 72%),
    linear-gradient(to right, rgba(20,16,12,.50) 0%, rgba(20,16,12,.10) 50%, rgba(20,16,12,0) 68%),
    linear-gradient(to bottom, rgba(20,16,12,.34) 0%, rgba(20,16,12,0) 20%);
}

/* De uitsnede van de kamer. Het drieluik hangt op 15% tot 49% van de hoogte
   van de foto en moet helemaal vrij onder de menubalk uitkomen, met lucht
   erboven. Dus twee dingen: de foto staat hoog in het kader, zodat de wand
   boven het werk meekomt, en het inzoomen gaat vanaf de bovenrand in plaats
   van vanuit het midden. Zoomen vanuit het midden duwt het werk namelijk
   omhoog, precies de kant die je niet wil. Gemeten: bovenkant van het werk
   op 143px bij een balk van 83px. */
.scene--over .scene__media img {
  object-position: center 12%;
  transform-origin: center top;
}

/* Op een staand scherm bepaalt de hoogte van het kader hoe breed de foto
   wordt uitgesneden, en dus of het drieluik nog helemaal past. Bij 92svh
   past het werk met marge aan weerszijden en houdt het bovenaan genoeg
   lucht. Het zoompje gaat er hier vanaf: elke procent schaal snijdt op deze
   breedte meteen een stuk van de lijsten af. */
@media (orientation: portrait) and (max-width: 900px) {
  .scene--over { min-height: 88svh; }
  .scene--over .scene__media img {
    /* 63% legt het midden van het drieluik op het midden van het scherm.
       Dat percentage hangt aan de verhouding van het kader, dus het schuift
       een paar pixels mee met de maat van de telefoon. Bij 88svh houdt het
       werk aan weerszijden zo'n 20px wand over. */
    object-position: 63% 0%;
    transform: none;
  }
  /* Op een telefoon staat de tekst niet op de wand maar op de bank en de
     tafel, en die zijn licht. Doorgerekend per punt onder de letters is er
     onderin 0,63 dekking nodig voor de subkop, 0,40 voor het bovenschrift en
     0,37 voor de titel. Deze verlopen halen dat, en zijn boven 72% weer
     bijna helemaal weg, zodat het drieluik niet in de schaduw komt. De tekst
     zakt tegelijk wat verder naar beneden: daar is het toch al donker. */
  .scene--over .scene__inner { padding-bottom: 3rem; }
  .scene--over .scene__scrim {
    background:
      linear-gradient(to top,
        rgba(20,16,12,.86) 0%,
        rgba(20,16,12,.66) 24%,
        rgba(20,16,12,.48) 46%,
        rgba(20,16,12,.06) 72%),
      linear-gradient(to bottom, rgba(20,16,12,.30) 0%, rgba(20,16,12,0) 18%);
  }
}

/* ---------- Beeldkader --------------------------------------------------- */
.beeld { margin: 0; overflow: hidden; background: var(--leem); }
.beeld img { display: block; width: 100%; height: auto; }
.beeld--staand { aspect-ratio: 4 / 5; }
.beeld--liggend { aspect-ratio: 3 / 2; }
.beeld--staand img,
.beeld--liggend img { height: 100%; object-fit: cover; }
/* Zweven: het beeld is 12% groter dan zijn kader en schuift daarbinnen 3%
   omhoog terwijl je erlangs scrolt. Ruim binnen de overmaat, dus er komt
   nooit een lege rand in beeld. */
.js .beeld--zweef img {
  transform: translate3d(0, calc((var(--p) - 0.5) * -6%), 0) scale(1.12);
  will-change: transform;
}

/* ---------- Uitspraak, in het midden van de pagina ----------------------- */
/* Hier hoeft de uitspraak niet te schreeuwen: hij staat tussen twee
   hoofdstukken en mag in twee regels voorbijkomen. Dus kleiner dan de losse
   uitspraak, en in een brede kolom in plaats van een smalle. De breedte
   staat op de tekst zelf: op de blockquote zou ch tegen het kleine
   schreefloze lijf gerekend worden en dan wordt de kolom veel te smal. */
.uitspraak--midden { padding-block: clamp(4rem, 9vw, 7rem); }
.uitspraak--midden blockquote { max-width: 46rem; margin-inline: auto; }
.uitspraak--midden .uitspraak__tekst {
  font-size: clamp(1.375rem, 2.9vw, 2.375rem);
  line-height: 1.26; letter-spacing: -0.01em;
  max-width: none;
}
/* Twee regels midden op de pagina, dus ook gecentreerd: links uitgelijnd in
   een brede kolom hangt de tekst uit het midden en staat de naam er los
   naast. De aanhalingstekens hangen hier niet buiten de kantlijn, want dan
   staat de eerste regel net niet meer in het midden. */
.uitspraak--midden { text-align: center; }
.uitspraak--midden .uitspraak__tekst { text-wrap: balance; text-indent: 0; }
.uitspraak--midden .uitspraak__naam { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
/* De aanhalingstekens hangen buiten de kolom, zodat de eerste letter van de
   regel netjes op de kantlijn blijft staan. */
.uitspraak__tekst--aanhaling { text-indent: -0.44em; }
.uitspraak__tekst--aanhaling::before { content: "\201C"; }
.uitspraak__tekst--aanhaling::after { content: "\201D"; }

/* ---------- Kunst om bij te leven ---------------------------------------- */
.kunst__grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
.kunst__title { max-width: 12ch; text-wrap: balance; }
@media (min-width: 861px) {
  .kunst__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: clamp(3rem, 6vw, 5rem); }
}

/* ---------- De fotocarrousel --------------------------------------------
   Eén foto per keer in een staand kader, met pijlen ernaast en een balkje
   eronder: een streepje per foto, het huidige donker. De overgang is een
   zachte wisseling met een klein terugkomend zoompje. Geen schuivende trein
   en geen stapel: het gaat om de foto die je nu ziet.

   Alleen de eerste foto staat in de bron; de rest wordt geladen zodra hij
   nodig is, plus alvast de buur ernaast. Vijf foto's tegelijk laden voor een
   sectie waar je er één ziet is zonde van de verbinding.                  */
.carrousel { max-width: 30rem; margin-inline: auto; }
.carrousel__kader {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--leem);
}
.carrousel__blad {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transform: scale(1.035);
  transition: opacity .7s var(--ease), visibility .7s var(--ease),
              transform 1.3s var(--ease-out);
}
.carrousel__blad.is-op { opacity: 1; visibility: visible; transform: none; }
.carrousel__blad img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- De navigatie eronder ---------------------------------------- */
.carrousel__voet {
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
  display: flex; flex-wrap: wrap; gap: .5rem 1rem;
  align-items: center; justify-content: space-between;
}
.carrousel__bij { margin: 0; }
.carrousel__nav { display: flex; align-items: center; gap: .5rem; }
.carrousel__balk { display: flex; align-items: center; gap: .375rem; }
/* Het streepje is dun, maar de knop eromheen is een normaal aanraakvlak. */
.carrousel__streep { width: 1.5rem; height: 1.25rem; display: grid; align-items: center; }
.carrousel__streep::after {
  content: ""; display: block; width: 100%; height: 2px;
  background: var(--line);
  transition: background-color .4s var(--ease);
}
.carrousel__streep:hover::after { background: var(--ink-faint); }
.carrousel__streep.is-op::after { background: var(--ink); }
.carrousel__pijl {
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  color: var(--ink-faint);
  transition: color .3s var(--ease);
}
.carrousel__pijl:hover { color: var(--ink); }
.carrousel__pijl i {
  width: .4375rem; height: .4375rem;
  border-left: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}
.carrousel__pijl--voor i { transform: rotate(-135deg); }

@media (max-width: 860px) {
  .carrousel { max-width: 26rem; }
}

/* ---------- Minder beweging ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .beeld--zweef img { transform: scale(1.12) !important; }
  .carrousel__blad { transition: none !important; }
  .carrousel__blad.is-op { transform: none !important; }
}


/* ---------- Contactformulier -------------------------------------------- */
/* Het verborgen veld tegen spam. Niet display:none, want sommige robots slaan
   dat over; zo staat het buiten beeld maar wel in het formulier. */
.honing {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}
.form-melding {
  margin-top: 1.25rem; padding: .875rem 1.125rem;
  border: 1px solid var(--line);
  font-size: .9375rem; line-height: 1.5;
}
.form-melding[data-toon="goed"] { border-color: #9BAE8E; color: var(--ink); background: rgba(155,174,142,.10); }
.form-melding[data-toon="fout"] { border-color: var(--roest); color: var(--ink); background: rgba(164,71,42,.07); }
form[data-bezig] button[type="submit"] { opacity: .55; pointer-events: none; }

/* ---------- Juridische pagina's ------------------------------------------ */
/* Lange lopende tekst. Smalle kolom, ruime regelafstand, koppen die je in het
   oog springen als je iets zoekt. */
.juridisch { max-width: 42rem; }
.juridisch section + section { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.juridisch h2 {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.25;
  margin-bottom: 1rem;
}
.juridisch p { font-size: clamp(.9375rem, 1.05vw, 1.0625rem); line-height: 1.75; color: var(--ink-muted); }
.juridisch p + p { margin-top: 1rem; }
.juridisch .adres { white-space: pre-line; }


/* ---------- Naar de hele collectie --------------------------------------- */
/* De laatste plek in het raster is geen werk maar een deur. Zelfde verhouding
   als een kaart, zodat de rij netjes uitkomt, maar duidelijk iets anders. */
.meer-card {
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end;
  aspect-ratio: var(--ratio, 0.8);
  padding: clamp(1rem, 1.6vw, 1.5rem);
  background: var(--leem);
  color: var(--ink);
  transition: background-color .5s var(--ease);
}
.meer-card:hover { background: var(--leem-line); }
.meer-card__tekst {
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem); line-height: 1.2;
  max-width: 12ch; text-wrap: balance;
}
.meer-card__pijl {
  margin-top: .875rem;
  display: flex; align-items: center; gap: .5rem;
  font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted);
}
.meer-card__pijl i {
  display: block; width: 1.75rem; height: 1px; background: currentColor;
  transition: width .5s var(--ease);
}
.meer-card:hover .meer-card__pijl i { width: 2.75rem; }
@media (prefers-reduced-motion: reduce) {
  .meer-card, .meer-card__pijl i { transition: none; }
}