/* =====================================================================
   Atelier Bartus Beer — stijl
   ---------------------------------------------------------------------
   Een dag in twee schilderijen: ochtendnevel op de rivier (home, met de
   artist statement), het portfolio op een lichte grond, de avond in de
   polder (contact) en de nacht (footer). Tussen alle delen, ook onder de
   navigatiebalk, lopen geschilderde randen, zodat de pagina als één doek
   voelt. Eén lettertype in twee gewichten, geen cursief, vaste tekstschaal.

   Opbouw:
     1. Tokens (kleur, type, ruimte)      ← hier pas je de stijl aan
     2. Lettertype en basis
     3. Utility-klassen (.u-*)
     4. Componenten (nav, link, knop, penseelranden, doek)
     5. Secties (home, portfolio, contact, footer)
     6. Lightbox
     7. Beweging (fade-in, scherpstellen; reduced motion)
   Mobiel eerst: basisregels voor kleine schermen, @media voor groter.
   Home en contact wisselen van opbouw bij (min-width: 900px) and
   (min-aspect-ratio: 1/1): daaronder (telefoon, staande tablet) staat het
   schilderij als blok bovenaan en de tekst eronder; daarboven ligt het
   schilderij over de volle breedte en staat de tekst op een sluier.

   Let op: design-system/src/styles/atelier.css bevat dezelfde tokens en
   regels voor Claude Design — pas beide bestanden samen aan.
   ===================================================================== */

/* 1. TOKENS ----------------------------------------------------------- */
:root {
  /* Tinten afgeleid van Sanzo Wada's "A Dictionary of Color Combinations" (1933):
     Neutral Gray, Salvia Blue, Grayish Lavender, Seashell Pink, Dark Greenish Glaucous,
     Dark Tyrian Blue (zie README). */
  --kleur-papier: #eef1f2;        /* nevel: home en achtergrond */
  --kleur-papier-licht: #f7f8f7;  /* portfolio: bijna wit, zodat de werken eruit springen */
  --kleur-diep: #13354d;          /* nacht: footer en knop (Dark Tyrian Blue) */
  --kleur-inkt: #1d2733;          /* titels/tekst — 13,3:1 op nevel */
  --kleur-inkt-zacht: #3b4654;    /* lopende tekst — 8,5:1 */
  --kleur-label: #566170;         /* kleine labels — 5,5:1 */
  --kleur-lijn: #c8cfd6;          /* lijnen, nooit tekst */
  --kleur-link: #1f4d73;          /* links (diep waterblauw) — 7,8:1 */
  --kleur-lijst: #26292e;         /* lijst om de schilderijen */
  --kleur-op-diep: #e4e9ee;       /* tekst op donker — 10,4:1 op --kleur-diep */
  --kleur-op-diep-zacht: #b9c5d2; /* labels op donker — 7,3:1 */
  --kleur-knop-tekst: #f4f7f9;    /* tekst op de knop — 11,9:1 */
  --kleur-beschikbaar: #3f6f55;   /* stipje bij 'Available' — 5,5:1 */
  --kleur-verkocht: #b24a3e;      /* rood stipje bij 'Sold' — 4,9:1 */
  --kleur-op-beeld: #f7f9fb;      /* tekst op een donker geschilderd vlak (contact) */
  --kleur-avond: #2a2c40;         /* avondgrond: achter en onder het avondschilderij */

  /* Sluiers: maken een schilderij rustig waar tekst op staat */
  --sluier-licht: 238, 241, 242;  /* nevel, voor donkere tekst (home) en de navigatiebalk */
  --sluier-donker: 20, 24, 40;    /* avond, voor lichte tekst (contact) */

  /* Muren van de portfoliotegels (wisselen per tegel) */
  --muur-kalk: #e2e8ef;           /* Salvia Blue, 72% lichter */
  --muur-warmgrijs: #f9e4d6;      /* Seashell Pink, 45% lichter */
  --muur-salie: #e4eadf;          /* Dark Greenish Glaucous, 70% lichter */

  /* Typografie — één familie, twee gewichten (400 en 600) */
  --font-basis: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --gewicht-normaal: 400;
  --gewicht-vet: 600;
  --tekst-label: 0.9375rem;                      /* 15 */
  --tekst-basis: 1.125rem;                       /* 18 */
  --tekst-h3: 1.5rem;                            /* 24 */
  --tekst-h2: clamp(2rem, 4vw, 2.5rem);          /* 40 */
  --tekst-h1: clamp(3rem, 6.5vw, 5.5rem);        /* 88: alleen de naam op home */

  /* Ruimte */
  --ruimte-1: 0.25rem;  /* 4 */
  --ruimte-2: 0.5rem;   /* 8 */
  --ruimte-3: 1rem;     /* 16 */
  --ruimte-4: 1.5rem;   /* 24 */
  --ruimte-5: 2.5rem;   /* 40 */
  --ruimte-6: 4rem;     /* 64 */
  --ruimte-7: 6rem;     /* 96 — sectie-afstand */

  --max-breedte: 82rem;
  --marge: 1.25rem;     /* zijmarge van elk vlak: 20 op telefoon, 40 vanaf 640px, 64 vanaf 1100px */
  --nav-hoogte: 4.5rem;
  --lijn-dun: 1px;
  --rand-hoogte: 56px;  /* hoogte van de geschilderde overgang tussen secties (44 op de telefoon) */
  --kop-rand: 30px;     /* hoogte van de geschilderde rand onder de navigatiebalk */

  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --duur: 500ms;
}
@media (max-width: 639px) { :root { --rand-hoogte: 44px; } }   /* op de telefoon een smallere overgang */
@media (min-width: 640px) { :root { --marge: 2.5rem; } }
@media (min-width: 1100px) { :root { --marge: 4rem; } }

/* 2. LETTERTYPE EN BASIS ---------------------------------------------- */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fonts/source-serif-4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-hoogte) + var(--kop-rand));
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html.has-dialog { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--kleur-papier);
  color: var(--kleur-inkt);
  font-family: var(--font-basis);
  font-size: var(--tekst-basis);
  font-weight: var(--gewicht-normaal);
  font-style: normal;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
p { margin: 0; }
a { color: inherit; }
em, i, cite, address { font-style: normal; }
h1, h2, h3 { margin: 0; font-weight: var(--gewicht-vet); line-height: 1.15; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--kleur-link); outline-offset: 4px; }
main:focus { outline: none; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: 0.6rem 1rem; background: var(--kleur-inkt); color: var(--kleur-papier);
  text-decoration: none; transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* De horizontale marge hoort bij het vlak (sectie, header, footer); de container begrenst alleen de breedte.
   Home en contact zetten hun marge zelf (zie sectie 5): op de telefoon loopt hun schilderij tot de rand. */
.portfolio, .site-footer, .site-header { padding-left: var(--marge); padding-right: var(--marge); }
.container { width: min(100%, var(--max-breedte)); margin-inline: auto; }

/* 3. UTILITIES -------------------------------------------------------- */
.u-zacht { color: var(--kleur-inkt-zacht); }
.u-label { font-size: var(--tekst-label); font-weight: var(--gewicht-vet); line-height: 1.5; color: var(--kleur-label); }
.u-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 4. COMPONENTEN ------------------------------------------------------ */

/* Navigatie: een nevelige balk die over het schilderij ligt en onderaan uitloopt in een
   geschilderde rand, net als de overgangen tussen de secties. Balk en rand zijn samen één
   vlak (::before), zodat de vervaging naadloos doorloopt. Het masker legt bovenaan de
   penseelrand en daaronder een effen vlak; scaleY(-1) spiegelt het geheel, zodat de balk
   boven komt en de rafelige kant naar beneden wijst. Geen backdrop-filter op de header zelf:
   dan zou het vlak de pagina erachter niet meer zien. */
/* Boven het avondschilderij krijgt de balk de avondtint (main.js zet .is-avond). */
.site-header {
  --kop-tint: var(--sluier-licht); --kop-nevel: 0.72;
  position: fixed; inset: 0 0 auto; z-index: 50;
}
.site-header.is-scrolled { --kop-nevel: 0.94; }
.site-header.is-avond { --kop-tint: var(--sluier-donker); --kop-nevel: 0.9; color: var(--kleur-op-beeld); }
.site-header.is-avond .nav__links a { color: var(--kleur-op-diep); }
.site-header.is-avond .nav__links a:hover, .site-header.is-avond .nav__links a[aria-current] { color: var(--kleur-op-beeld); }
.site-header.is-avond :focus-visible { outline-color: var(--kleur-op-beeld); }
.site-header, .nav__links a, .nav__brand { transition: color 0.5s var(--ease); }
.site-header::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: calc(var(--kop-rand) * -1); z-index: -1; pointer-events: none;
  background-color: rgba(var(--kop-tint), var(--kop-nevel));
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  -webkit-mask:
    url("../assets/img/brush-edge.webp") repeat-x 230px 0 / calc(var(--kop-rand) * 13.33) var(--kop-rand),
    linear-gradient(#000, #000) 0 100% / 100% calc(100% - var(--kop-rand) + 1px) no-repeat;
  mask:
    url("../assets/img/brush-edge.webp") repeat-x 230px 0 / calc(var(--kop-rand) * 13.33) var(--kop-rand),
    linear-gradient(#000, #000) 0 100% / 100% calc(100% - var(--kop-rand) + 1px) no-repeat;
  transform: scaleY(-1);
  transition: background-color var(--duur) var(--ease);
}
.nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0 var(--ruimte-5); min-height: var(--nav-hoogte);
  width: min(100%, var(--max-breedte)); margin-inline: auto;
}
.nav__brand {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: var(--gewicht-vet); text-decoration: none; white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.nav__brand:hover { color: var(--kleur-link); }
.nav__links { display: flex; flex-wrap: wrap; gap: 0 clamp(1rem, 2.6vw, 2rem); margin: 0; padding: 0; list-style: none; }
.nav__links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 1rem; color: var(--kleur-inkt);
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 11px;
  transition: color 0.3s var(--ease), text-decoration-color 0.3s var(--ease), text-underline-offset 0.35s var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current] { color: var(--kleur-inkt); text-decoration-color: currentColor; text-underline-offset: 6px; }
@media (max-width: 520px) {
  .nav { gap: 0 var(--ruimte-3); }
  .nav__brand { font-size: 1rem; }
  .nav__links { gap: 0 var(--ruimte-4); }
  .nav__links a { font-size: 0.9375rem; }
}
@media (max-width: 359px) {
  /* te smal voor naam en links naast elkaar: de naam staat groot op home */
  .nav { justify-content: center; }
  .nav__brand { display: none; }
}

/* Link: onderstreept; de onderstreping zakt en wordt dikker bij hover */
.link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: var(--gewicht-vet); color: var(--kleur-link);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
  transition: color 0.3s var(--ease), text-underline-offset 0.35s var(--ease), text-decoration-thickness 0.3s var(--ease);
}
.link:hover, .link:focus-visible { color: var(--kleur-inkt); text-underline-offset: 8px; text-decoration-thickness: 2px; }
.link--inkt { color: var(--kleur-inkt); }

/* Knop: de primaire actie. Donker vlak; bij hover veegt een lichtere kleur van links in. */
.knop {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.75rem;
  border: var(--lijn-dun) solid var(--kleur-diep);
  background-color: var(--kleur-diep); color: var(--kleur-knop-tekst);
  background-image: linear-gradient(var(--kleur-link), var(--kleur-link));
  background-repeat: no-repeat; background-size: 0% 100%;
  font-weight: var(--gewicht-vet); text-decoration: none; text-align: center;
  transition: background-size 0.45s var(--ease), border-color 0.3s var(--ease), transform 0.2s var(--ease);
}
.knop:hover, .knop:focus-visible { background-size: 100% 100%; border-color: var(--kleur-link); }
.knop:active { transform: translateY(1px); }

/* Geschilderde overgangen: de grond van een sectie loopt met rafelige penseelstreken
   over de rand van de vorige (rand-boven) of de volgende (rand-onder). */
.rand-boven, .rand-onder { position: relative; }
.rand-boven::before, .rand-onder::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--rand-hoogte); z-index: 2; pointer-events: none;
  background-color: var(--grond, var(--kleur-papier));
  -webkit-mask: url("../assets/img/brush-edge.webp") repeat-x var(--rand-x, 0) 0 / calc(var(--rand-hoogte) * 13.33) var(--rand-hoogte);
  mask: url("../assets/img/brush-edge.webp") repeat-x var(--rand-x, 0) 0 / calc(var(--rand-hoogte) * 13.33) var(--rand-hoogte);
}
.rand-boven::before { top: calc(var(--rand-hoogte) * -1 + 1px); }
.rand-onder::after { bottom: calc(var(--rand-hoogte) * -1 + 1px); transform: scaleY(-1); }

/* Doek: het vlak waarin een schilderij staat. .doek snijdt bij; .doek__podium heeft altijd de
   verhouding van het schilderij (16:9) en bedekt het doek zoals object-fit: cover, met --fx en
   --fy als object-position (0 = links/boven, 0.5 = midden, 1 = rechts/onder). Lagen die in
   procenten van het podium staan, blijven zo bij elke schermmaat op dezelfde plek in het schilderij. */
.doek { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.doek__podium {
  position: absolute; aspect-ratio: 16 / 9;
  width: max(100cqw, 100cqh * 16 / 9);
  left: calc((100cqw - max(100cqw, 100cqh * 16 / 9)) * var(--fx, 0.5));
  top: calc((100cqh - max(100cqh, 100cqw * 9 / 16)) * var(--fy, 0.5));
}
.doek__scherp, .doek__beeld, .doek__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; }
.doek__beeld img { object-fit: cover; }

/* Bewegende lagen: los geschilderde figuren (reiger, bootje, koeien, ganzen) en licht (zon, nevel),
   in procenten van het podium, dus altijd op hun plek in het schilderij. Een groep bevat de frames
   van één figuur; alleen het frame met .is-actief is zichtbaar. js/beweging.js verplaatst de groepen
   en wisselt de frames bij het scrollen; zonder JavaScript of met "minder beweging" blijft de beginstand. */
.laag-groep { position: absolute; pointer-events: none; }
.laag-groep > .laag { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; }
.laag-groep > .laag.is-actief { opacity: 1; }
.laag-groep--licht { mix-blend-mode: screen; }   /* zonlicht: licht op, nooit donkerder */
.laag-groep[data-groep="ripples-a"], .laag-groep[data-groep="ripples-b"], .laag-groep[data-groep="stars"] { transition: opacity 0.9s var(--ease); }
.laag-groep[data-groep="ripples-b"], .laag-groep[data-groep="stars"] { opacity: 0; }
.laag-groep[data-groep="ripples-b"] > .laag, .laag-groep[data-groep="stars"] > .laag { opacity: 1; }
/* Schemering: de avondlucht wordt donkerder naarmate je verder scrolt; de gloed boven de horizon blijft */
.doek__schemer {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(var(--sluier-donker), 0.8) 0%, rgba(var(--sluier-donker), 0.5) 32%, rgba(var(--sluier-donker), 0) 56%);
}
.js .laag-groep[data-groep="heron"], .js .laag-groep[data-groep="boat"], .js .laag-groep[data-groep="geese"], .js .laag-groep[data-groep="mist"] { will-change: transform; }

/* 5. SECTIES ---------------------------------------------------------- */

/* --- Ochtend: home ---
   Telefoon en staande tablet: het schilderij bovenaan met alleen de navigatie erover; daaronder
   loopt de nevel met een geschilderde rand over het doek en staat de tekst op de nevel.
   Groot scherm: het schilderij over de volle breedte, de tekst links op een lichte sluier. */
.hero { position: relative; isolation: isolate; background-color: var(--kleur-papier); }
.hero__doek, .hero__beeld { --fx: 0.74; position: relative; display: block; height: 62vh; height: clamp(380px, 62svh, 640px); }
.hero__sluier { display: none; }
.hero__inhoud {
  --grond: var(--kleur-papier); --rand-x: 120px;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: var(--ruimte-4) var(--marge) calc(var(--rand-hoogte) + var(--ruimte-5));
  background-color: var(--grond);
}
.hero__titel { font-size: var(--tekst-h1); line-height: 1.02; letter-spacing: -0.01em; }
.hero__naam { display: block; white-space: nowrap; }   /* "Atelier", dan op een nieuwe regel "Bartus Beer" (altijd bij elkaar) */
@media (max-width: 22em) { .hero__naam { white-space: normal; } }   /* bij heel grote tekstinstelling mag het toch afbreken */
.hero__tagline { margin-top: var(--ruimte-3); font-size: var(--tekst-h3); line-height: 1.4; color: var(--kleur-inkt); }
.hero__statement { display: flex; flex-direction: column; gap: var(--ruimte-2); margin-top: var(--ruimte-5); max-width: 40rem; }
.hero__statement p { color: var(--kleur-inkt-zacht); text-wrap: pretty; }
.hero__acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-3) var(--ruimte-5); margin-top: var(--ruimte-5); }
/* telefoon: eerst de knoppen (meteen te zien), dan de statement */
@media not ((min-width: 900px) and (min-aspect-ratio: 1/1)) {
  .hero__acties { order: 1; margin-top: var(--ruimte-4); }
  .hero__statement { order: 2; }
}

/* 404.html zet het schilderij nog als losse <picture class="hero__beeld"> neer, zonder podium */
.hero__beeld { overflow: hidden; }
.hero__beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 74% 50%; }

@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .hero {
    display: flex; flex-direction: column; justify-content: center;
    min-height: 88vh; min-height: 88svh;
    padding: calc(var(--nav-hoogte) + var(--kop-rand) + var(--ruimte-4)) var(--marge) calc(var(--rand-hoogte) + var(--ruimte-5));
  }
  /* --fy 0.75: bijsnijden gebeurt vooral in de lucht, zodat de reiger boven de rand blijft */
  .hero__doek, .hero__beeld { --fx: 0.5; --fy: 0.75; position: absolute; inset: 0; z-index: -2; height: auto; }
  .hero__beeld img { object-position: 50% 75%; }
  /* Sluier van links: nevel waar de tekst staat, het schilderij komt rechts vrij */
  .hero__sluier {
    display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, rgba(var(--sluier-licht), 0.88) 0%, rgba(var(--sluier-licht), 0.8) 34%, rgba(var(--sluier-licht), 0.62) 46%, rgba(var(--sluier-licht), 0.26) 56%, rgba(var(--sluier-licht), 0) 66%);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 64%); mask-image: linear-gradient(90deg, #000 40%, transparent 64%);
  }
  .hero__inhoud { padding: 0; background: none; }
  .hero__inhoud::before { content: none; }
  .hero__inhoud > * { max-width: min(40rem, 46vw); }
  /* op lage schermen (laptop) iets kleiner, zodat home compact blijft */
  .hero__titel { font-size: min(var(--tekst-h1), max(3rem, 10svh)); }
}

/* --- Portfolio --- */
.portfolio { --grond: var(--kleur-papier-licht); background-color: var(--grond); padding-top: var(--ruimte-6); padding-bottom: var(--ruimte-7); --rand-x: -340px; }
.portfolio::after { --rand-x: 410px; }
.sectiekop { display: flex; flex-direction: column; gap: var(--ruimte-3); margin-bottom: var(--ruimte-6); }
.sectiekop__titel { font-size: var(--tekst-h2); }
.sectiekop__intro { max-width: 40rem; }
.hint-touch { display: none; }
@media (hover: none) { .hint-hover { display: none; } .hint-touch { display: inline; } }

.js .works[aria-busy="true"] { min-height: 120vh; }
.works { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-6) var(--ruimte-5); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .works { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .works { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.work__figure { margin: 0; }
.work__tile { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.work__tile:focus-visible { outline-offset: 6px; }
/* De muur: elk doek hangt aan een eigen binnenmuur (zes muren wisselen elkaar af; CC0-scans van ambientCG,
   zie tools/paint/muren-foto.js). De muur (.p3d__muur) is een vlak in DEZELFDE 3D-scène als het doek, direct
   achter de 40 mm dikke spieraam: kantelt het doek, dan draaien muur en doek samen mee, alsof de camera
   van positie verandert. De slagschaduw ligt vast op de muur. Eigen muurfoto per werk: "muurfoto" in works.json. */
.work__wall {
  --muur: #d8d4cc;
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1 / 1; container-type: size; overflow: hidden; padding-bottom: 3%;
  background-color: var(--muur);
}
.p3d__muur {
  /* ruim groter dan de tegel, zodat er ook bij de sterkste kanteling geen rand zichtbaar wordt; de muurfoto
     beslaat 2,8 x de breedte van het doek rond het midden en herhaalt daarbuiten (valt in de hoeken niet op) */
  position: absolute; left: 50%; top: 50%; width: calc(var(--w) * 5); height: calc(var(--w) * 5);
  background: var(--muur) url("../assets/walls/muur-1.webp") center / calc(var(--w) * 2.8) calc(var(--w) * 2.8) repeat;
  transform: translate(-50%, -50%) translateZ(calc(var(--d) * -0.5 - 1px));
  pointer-events: none;
}
/* slagschaduw van het doek op de muur (licht van een spot erboven) */
.p3d__muur::before, .p3d__muur::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: var(--w); height: var(--h);
  transform: translate(-50%, -50%) translate(calc(var(--w) * 0.006), calc(var(--w) * 0.045));
  background: rgba(40, 32, 26, 0.5); filter: blur(calc(var(--w) * 0.04));
}
.p3d__muur::after { transform: translate(-50%, -50%) translate(0, calc(var(--w) * 0.012)); background: rgba(30, 24, 20, 0.55); filter: blur(calc(var(--w) * 0.008)); }
.p3d--op-muur .p3d__shadow { display: none; }   /* de oude, losse schaduw is niet meer nodig */
.work:nth-child(6n + 2) .p3d__muur { background-image: url("../assets/walls/muur-2.webp"); }
.work:nth-child(6n + 3) .p3d__muur { background-image: url("../assets/walls/muur-3.webp"); }
.work:nth-child(6n + 4) .p3d__muur { background-image: url("../assets/walls/muur-4.webp"); }
.work:nth-child(6n + 5) .p3d__muur { background-image: url("../assets/walls/muur-5.webp"); }
.work:nth-child(6n + 6) .p3d__muur { background-image: url("../assets/walls/muur-6.webp"); }
.work__wall.has-photo .p3d__muur { background-image: var(--muurfoto); }
.work__wall .p3d { --w: min(66cqw, 64cqh * var(--ratio)); position: relative; z-index: 1; }
.work__cta {
  position: absolute; left: clamp(1rem, 3cqw, 1.5rem); bottom: clamp(0.9rem, 3cqw, 1.4rem);
  padding: 0.15rem 0.55rem; background-color: rgba(var(--sluier-licht), 0.9);
  font-size: var(--tekst-label); font-weight: var(--gewicht-vet); color: var(--kleur-inkt);
  z-index: 2; opacity: 0; transition: opacity var(--duur) var(--ease); pointer-events: none;
}
.work__tile:hover .work__cta, .work__tile:focus-visible .work__cta { opacity: 1; }
.work__tile:focus-visible .p3d { --rx: -3; --ry: -12; }
@media (prefers-reduced-motion: reduce) and (hover: hover) { .work__tile:hover .p3d { --rx: -3; --ry: -12; } }
.work__caption { display: flex; flex-direction: column; gap: 2px; margin-top: var(--ruimte-3); }
.work__title { font-size: var(--tekst-basis); line-height: 1.35; transition: color 0.3s var(--ease); }
.work__tile:hover ~ .work__caption .work__title, .work__tile:focus-visible ~ .work__caption .work__title { color: var(--kleur-link); }
.work__meta { font-size: var(--tekst-label); color: var(--kleur-label); }
.work__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--ruimte-3); margin-top: var(--ruimte-1); }
.work__price-value { font-weight: var(--gewicht-vet); color: var(--kleur-inkt); }
.work__status { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--tekst-label); color: var(--kleur-label); }
.work__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--kleur-beschikbaar); }
.work__status--sold::before { background: var(--kleur-verkocht); }
#contact-title:focus { outline: none; }
.works__lijst { margin: 0 0 var(--ruimte-4); padding-left: 1.2em; color: var(--kleur-inkt-zacht); }
.works__message { grid-column: 1 / -1; padding: 2rem; border: var(--lijn-dun) dashed var(--kleur-lijn); color: var(--kleur-inkt-zacht); text-align: center; }
.works__message small { display: block; margin-top: 0.4rem; color: var(--kleur-label); }

/* --- Avond: contact ---
   Telefoon en staande tablet: het schilderij bovenaan; daaronder loopt de avondgrond met een
   geschilderde rand over het doek en staat de lichte tekst op die grond.
   Groot scherm: het schilderij over de volle breedte, de tekst rechts op een donkere sluier. */
.contact {
  position: relative; isolation: isolate; color: var(--kleur-op-diep); background-color: var(--kleur-avond);
  scroll-margin-top: calc(var(--rand-hoogte) * -1);   /* via "Contact": de rand van het portfolio schuift onder de navigatie */
}
.contact__doek { --fx: 0.36; position: relative; height: 58vh; height: max(360px, 58svh); }
.contact__sluier { display: none; }
.contact__grid {
  --grond: var(--kleur-avond); --rand-x: -200px;
  display: grid; grid-template-columns: minmax(0, 1fr);
  padding: var(--ruimte-4) var(--marge) calc(var(--rand-hoogte) + var(--ruimte-6));
  background-color: var(--grond);
}
.contact__tekst { display: flex; flex-direction: column; gap: var(--ruimte-4); max-width: 36rem; }
.contact .sectiekop__titel { color: var(--kleur-op-beeld); }
.contact__intro { color: var(--kleur-op-diep); max-width: 32rem; }
.contact__lijst { margin: var(--ruimte-2) 0 0; padding: 0; list-style: none; border-top: var(--lijn-dun) solid rgba(255, 255, 255, 0.55); }
.contact__lijst li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--ruimte-1) var(--ruimte-3); align-items: baseline; padding: var(--ruimte-2) 0; border-bottom: var(--lijn-dun) solid rgba(255, 255, 255, 0.22); }
.contact__lijst .u-label { color: var(--kleur-op-diep); }
.contact__lijst li { align-items: center; }
@media (max-width: 26em) { .contact__lijst li { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: var(--ruimte-3); } }   /* smalle telefoon: label boven de waarde, bij alle rijen gelijk */
.contact__waarde {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: clamp(1.0625rem, 4.4vw, 1.25rem); line-height: 1.3; overflow-wrap: anywhere; color: var(--kleur-op-beeld);   /* past het e-mailadres op één regel, ook op 360px */
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(247, 249, 251, 0.6);
  transition: color 0.3s var(--ease), text-underline-offset 0.35s var(--ease), text-decoration-thickness 0.3s var(--ease), text-decoration-color 0.3s var(--ease);
}
.contact__waarde--leeg { text-decoration: none; color: var(--kleur-op-diep-zacht); }
.contact__waarde:hover, .contact__waarde:focus-visible { text-underline-offset: 7px; text-decoration-thickness: 2px; text-decoration-color: var(--kleur-op-beeld); }
.contact :focus-visible { outline-color: var(--kleur-op-beeld); }
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .contact {
    display: flex; align-items: center; min-height: 100vh; min-height: 100svh;
    padding: calc(var(--rand-hoogte) + var(--ruimte-7)) var(--marge) calc(var(--rand-hoogte) + var(--ruimte-6));
  }
  .contact__doek { --fx: 0.5; position: absolute; inset: 0; z-index: -2; height: auto; }
  /* Sluier van rechts: avond waar de tekst staat, het schilderij blijft links vrij */
  .contact__sluier {
    display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    /* dicht onder de hele tekstkolom (vanaf 50%), zodat ook boven de gloed van de horizon alles 4,5:1 haalt */
    background: linear-gradient(270deg, rgba(var(--sluier-donker), 0.84) 0%, rgba(var(--sluier-donker), 0.78) 46%, rgba(var(--sluier-donker), 0.5) 54%, rgba(var(--sluier-donker), 0) 68%);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    -webkit-mask-image: linear-gradient(270deg, #000 56%, transparent 74%); mask-image: linear-gradient(270deg, #000 56%, transparent 74%);
  }
  .contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; background: none; }
  .contact__grid::before { content: none; }
  .contact__tekst { grid-column: 2; }
}

/* --- Nacht: footer --- */
.site-footer { --grond: var(--kleur-diep); background-color: var(--grond); color: var(--kleur-op-diep); padding-top: var(--ruimte-5); padding-bottom: var(--ruimte-5); --rand-x: -60px; }
.site-footer__rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ruimte-2) var(--ruimte-5); font-size: var(--tekst-label); color: var(--kleur-op-diep-zacht); }
.site-footer__rij a { display: inline-flex; align-items: center; min-height: 44px; color: var(--kleur-op-diep); }
.site-footer__rij a:hover { color: var(--kleur-op-beeld); }

/* 6. LIGHTBOX --------------------------------------------------------- */
.lightbox { width: min(100% - 2rem, 72rem); max-height: calc(100% - 2rem); padding: 0; border: 0; border-radius: 0; background: var(--kleur-papier); color: var(--kleur-inkt); }
.lightbox::backdrop { background: rgba(var(--sluier-donker), 0.62); }
.lightbox[open] { animation: lb-in 0.4s var(--ease); }
.lightbox.is-closing { animation: lb-out 0.3s var(--ease) forwards; }
@keyframes lb-in { from { opacity: 0; } }
@keyframes lb-out { to { opacity: 0; } }
.lightbox__media.is-swapping, .lightbox__info.is-swapping { animation: lb-swap 0.4s var(--ease); }
@keyframes lb-swap { from { opacity: 0; } }
.lightbox__inner { display: grid; gap: var(--ruimte-4); padding: clamp(1.25rem, 4vw, 2.5rem); padding-top: 3.75rem; }
.lightbox__close { position: absolute; top: 0.75rem; right: 0.75rem; }
.lightbox__close, .lightbox__nav button {
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
  border: var(--lijn-dun) solid var(--kleur-lijn); border-radius: 50%; background: none; color: var(--kleur-inkt);
  cursor: pointer; transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.2s var(--ease);
}
.lightbox__close:hover, .lightbox__nav button:hover { background: var(--kleur-inkt); color: var(--kleur-papier); border-color: var(--kleur-inkt); }
.lightbox__close svg, .lightbox__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; transition: transform 0.35s var(--ease); }
.lightbox__close:active, .lightbox__nav button:active { transform: scale(0.94); }
@media (prefers-reduced-motion: no-preference) {
  .lightbox__close:hover svg { transform: rotate(90deg); }
  .lightbox__nav button[data-lb="prev"]:hover svg { transform: translateX(-3px); }
  .lightbox__nav button[data-lb="next"]:hover svg { transform: translateX(3px); }
}
.lightbox__media { display: grid; place-items: center; min-width: 0; min-height: 0; }
.lightbox__img, .lightbox__placeholder { box-shadow: 0 18px 40px -24px rgba(var(--sluier-donker), 0.55); }   /* geen lijst: alleen een zachte schaduw */
.lightbox__img { width: auto; height: auto; max-width: 100%; max-height: min(68vh, 44rem); }
.lightbox__placeholder {
  display: block; width: min(100%, min(60vh, 40rem) * var(--ratio)); aspect-ratio: var(--ratio);
  background-color: #b6bfc1; background-image: url("../assets/img/linnen.png"); background-size: 256px; background-blend-mode: multiply;
}
.lightbox__title { margin-top: var(--ruimte-2); font-size: var(--tekst-h2); }
.lightbox__meta { margin: var(--ruimte-4) 0 0; border-top: var(--lijn-dun) solid var(--kleur-inkt); }
.lightbox__meta div { display: grid; grid-template-columns: 8rem 1fr; padding: 0.6rem 0; border-bottom: var(--lijn-dun) solid var(--kleur-lijn); }
.lightbox__meta div[hidden] { display: none; }
.lightbox__meta dt { align-self: center; }
.lightbox__meta dd { margin: 0; }
.lightbox__prijs dd { font-size: 1.25rem; font-weight: var(--gewicht-vet); }
.lightbox__info .knop { margin-top: var(--ruimte-4); }
.lightbox__mail { margin-top: var(--ruimte-2); font-size: var(--tekst-label); color: var(--kleur-label); }
.lightbox__mail .link { min-height: 44px; font-weight: var(--gewicht-normaal); overflow-wrap: anywhere; }
[data-lb-count][hidden] { display: none; }
.lightbox__nav { display: flex; gap: 0.6rem; margin-top: var(--ruimte-5); }
.lightbox__nav[hidden] { display: none; }
@media (min-width: 800px) {
  .lightbox__inner { grid-template-columns: minmax(0, 1.6fr) minmax(15rem, 1fr); align-items: center; gap: var(--ruimte-6); padding: 3.5rem; }
}

/* 7. BEWEGING --------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* de glans op het water ademt, het bootje deint */
  .js .laag-groep[data-groep="sun-path"] > .laag { animation: glans 5.5s ease-in-out infinite; }
  @keyframes glans { 0%, 100% { opacity: 0.82; transform: scaleX(1); } 50% { opacity: 1; transform: scaleX(1.06); } }
  .js .laag-groep[data-groep="boat"] > .laag { animation: deinen 3.8s ease-in-out infinite; }
  @keyframes deinen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(0.12em); } }
  .js .reveal { opacity: 0; transition: opacity 700ms var(--ease) var(--reveal-delay, 0ms); }
  .js .reveal.is-visible { opacity: 1; }
  /* Schilderijen stellen scherp, alsof je ogen wennen aan het licht:
     home zodra het beeld geladen is (is-loaded), contact zodra het in beeld komt (is-visible). */
  .js .doek__scherp { filter: blur(12px) saturate(0.85); transform: scale(1.05); transition: filter 1.8s var(--ease), transform 2.6s var(--ease); }
  .js .doek.is-loaded .doek__scherp, .js .doek.is-visible .doek__scherp { filter: none; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox[open], .lightbox.is-closing, .lightbox__media.is-swapping, .lightbox__info.is-swapping { animation: none; }
  .knop, .link, .nav__links a, .contact__waarde, .lightbox__close svg, .lightbox__nav svg,
  .site-header::before { transition-duration: 0.01ms; }
}