/* ==========================================================================
   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. */
.gift { background: var(--bg-alt); color: var(--houtskool); }
.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, 30rem); }
  .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; }
.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' */
.js .img-in { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease); }
.img-in.is-in { 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 { 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; }
.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; }
}