/* =========================================================
   PAST NOR PRESENT — styles.css
   Sections: 1 Reset/Vars  2 Type  3 Preloader  4 Nav
   5 Hero  6 Intro  7 Collections  8 Museum  9 Atlas
   10 About/Footer  11 Collection Detail  12 Lightbox
   13 Reveal/Utility  14 Responsive  15 Reduced Motion
   ========================================================= */

/* ---------- 1. RESET / VARS ----------
   Twee thema's, één stelsel. De vaste kleuren (ink/plaster/gold) zijn het palet;
   de --surface/--text/--line-tokens zijn wat de componenten gebruiken. Alleen die
   laatste kantelen mee. Tekst die OP een foto ligt blijft wit in beide thema's —
   die hoort bij het beeld, niet bij de pagina.
   De Museumzaal is in beide thema's de omgekeerde ruimte: plaster in het donker,
   verduisterd in het licht (licht is de vijand van prints).             */
:root{
  --ink:#0b0b0c;
  --ink2:#131315;
  --paper-dark:#161618;
  --gold-light:#c2a26b;   /* goud op donker */
  --gold-dark:#7f6638;    /* goud op plaster — c2a26b haalt daar 2.05:1; dit 4.62:1 (AA) */
  --plaster:#f0ece4;
  --plaster2:#e7e1d6;
  --ink-light:#17150f;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* --- thema: nacht (standaard) --- */
  color-scheme:dark;
  --surface:var(--ink);
  --surface-2:#1c1c1e;          /* beeldplaceholder achter foto's */
  --text:#e8e4dc;
  --muted:#8a857c;
  --muted-dim:#65615a;
  --gold:var(--gold-light);
  --line:#1e1e21;
  --line-2:#2c2c2f;             /* chips, knopranden */
  --panel:var(--ink2);          /* verhoogd tekstpaneel in de editorial rows */
  --scrim:rgba(11,11,12,.72);   /* nav bij scroll */
  --scrim-hair:rgba(255,255,255,.05);
  --fade:11,11,12;              /* vignet op foto's — BLIJFT donker in beide thema's:
                                   het draagt witte tekst op een willekeurig beeld */
  --scroll-thumb:#2a2a2d;

  /* de omgekeerde zaal */
  --museum-bg:var(--plaster);
  --museum-text:var(--ink-light);
  --museum-gold:var(--gold-dark);
  --museum-muted:#6b6559;
  --museum-desc:#4a463d;
  --museum-hint:#a39a86;
}

[data-theme="light"]{
  color-scheme:light;
  --surface:var(--plaster);
  --surface-2:var(--plaster2);
  --text:#1d1a14;
  --muted:#6b6559;
  --muted-dim:#6f695c;
  --gold:var(--gold-dark);
  --line:#d8d2c6;
  --line-2:#c9c2b3;
  --panel:var(--plaster2);
  --scrim:rgba(240,236,228,.78);
  --scrim-hair:rgba(11,11,12,.06);
  --scroll-thumb:#c9c2b3;

  --museum-bg:#141416;
  --museum-text:var(--plaster);
  --museum-gold:var(--gold-light);
  --museum-muted:#8a857c;
  --museum-desc:#b8b2a6;
  --museum-hint:#6b6559;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--text);font-family:var(--sans);font-weight:300;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0}
p{margin:0}
button{font-family:var(--sans);cursor:pointer;background:none;border:none;color:inherit}
::selection{background:var(--gold);color:var(--surface)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}
* {scrollbar-color:var(--scroll-thumb) var(--surface);scrollbar-width:thin}

/* ---------- 2. TYPE HELPERS ---------- */
.eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:500}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}

/* ---------- 3. PRELOADER ---------- */
#preloader{position:fixed;inset:0;background:var(--surface);z-index:9999;display:flex;align-items:center;justify-content:center;transition:transform 1s var(--ease);}
#preloader.lift{transform:translateY(-100%)}
#preloader.hidden{display:none}
.preloader-word{font-family:var(--serif);font-size:clamp(1.4rem,4vw,2.6rem);letter-spacing:.3em;color:var(--text);display:flex}
.preloader-word span{opacity:0;transform:translateY(10px);animation:letterIn .6s var(--ease) forwards}
.preloader-word span:nth-child(1){animation-delay:.02s}
.preloader-word span:nth-child(2){animation-delay:.06s}
.preloader-word span:nth-child(3){animation-delay:.10s}
.preloader-word span:nth-child(4){animation-delay:.14s}
.preloader-word span:nth-child(5){animation-delay:.18s}
.preloader-word span:nth-child(6){animation-delay:.22s}
.preloader-word span:nth-child(7){animation-delay:.26s}
.preloader-word span:nth-child(8){animation-delay:.30s}
.preloader-word span:nth-child(9){animation-delay:.34s}
.preloader-word span:nth-child(10){animation-delay:.38s}
.preloader-word span:nth-child(11){animation-delay:.42s}
.preloader-word span:nth-child(12){animation-delay:.46s}
.preloader-word span:nth-child(13){animation-delay:.50s}
.preloader-word span:nth-child(14){animation-delay:.54s}
.preloader-word span:nth-child(15){animation-delay:.58s}
.preloader-word span:nth-child(16){animation-delay:.62s}
@keyframes letterIn{to{opacity:1;transform:translateY(0)}}

/* ---------- 4. NAV ---------- */
#site-nav{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;align-items:center;justify-content:space-between;padding:22px 5vw;transition:background .4s var(--ease),backdrop-filter .4s var(--ease),padding .4s var(--ease),box-shadow .4s;}
#site-nav.scrolled{background:var(--scrim);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:14px 5vw;box-shadow:0 1px 0 var(--scrim-hair)}
.nav-word{font-family:var(--serif);font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
/* Bovenaan de pagina hangt de nav zonder achtergrond boven de hero-foto. In het lichte
   thema is var(--text) #1d1a14 — bijna zwarte tekst op een foto. Zodra .scrolled erop
   staat is er wél een scrim en mag de themakleur weer gelden. Dezelfde regel als in de
   hero: tekst die OP een foto ligt is wit, in beide thema's. */
[data-theme="light"] #site-nav:not(.scrolled) .nav-word,
[data-theme="light"] #site-nav:not(.scrolled) .nav-links a,
[data-theme="light"] #site-nav:not(.scrolled) #nav-menu-btn,
[data-theme="light"] #site-nav:not(.scrolled) .theme-toggle{color:#fff;text-shadow:0 1px 10px rgba(11,11,12,.5)}
.nav-links{display:flex;gap:2.4rem}
.nav-links a{position:relative;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text);padding-bottom:4px}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
#nav-menu-btn{display:none;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text)}
#theme-toggle{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);padding:.45rem .8rem;border-radius:2px;margin-left:2.4rem;transition:color .25s var(--ease),border-color .25s var(--ease)}
#theme-toggle:hover{color:var(--gold);border-color:var(--gold)}
#mobile-menu #theme-toggle-m{margin:1rem 0 0;font-size:11px}

#mobile-menu{position:fixed;inset:0;background:var(--surface);z-index:900;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
#mobile-menu.open{opacity:1;pointer-events:auto}
#mobile-menu nav{display:flex;flex-direction:column;gap:2rem;text-align:center}
#mobile-menu nav a{font-family:var(--serif);font-size:2rem;color:var(--text)}
#mobile-menu-close{position:absolute;top:22px;right:5vw;font-size:2rem;color:var(--text);line-height:1}

/* ---------- 5. HERO ---------- */
#hero{position:relative;height:100svh;min-height:480px;overflow:hidden;background:var(--surface)}
#hero-slides{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.04);transition:opacity 1.6s var(--ease),transform 6s linear}
.hero-slide.active{opacity:1;transform:scale(1.0)}
.hero-vignette{position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--fade),.25) 0%,rgba(var(--fade),0) 30%,rgba(var(--fade),.35) 65%,rgba(var(--fade),.92) 100%);pointer-events:none}
.hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1.1rem;padding:0 5vw}
/* Contrast komt uit de letters, niet uit een vlak eronder: een scrim achter de tekst
   werd als donkere plek gezien. Daarom een strakke dubbele schaduw — een korte harde
   voor de randscheiding, een zachte wijde voor de algemene scheiding van de foto.
   Die volgt de vorm van de letter en is dus niet zichtbaar als vlak.
   Wit i.p.v. goud voor de eyebrow: goud (#c2a26b) haalt op vier van de vijf
   hero-foto's geen 4.5:1, zelfs niet met een zware scrim. Wit haalt dat wel.
   Volgt ook de themaregel: tekst op een foto is wit, in beide thema's. */
/* 12px i.p.v. de 11px van de generieke .eyebrow: deze staat als enige boven een foto
   en moet het zonder de rust van een egale achtergrond doen. Gewicht 600 is echt
   geladen (zie de fontlink in index.html) — vroeg de browser om een gewicht dat er
   niet was, dan maakte hij er synthetische vetdruk van, en dat wordt waziger i.p.v.
   scherper. */
.hero-content .eyebrow{color:#fff;font-weight:600;font-size:clamp(12px,.95vw,16px);letter-spacing:.2em;
  text-shadow:0 1px 2px rgba(11,11,12,.6)}
.hero-title{font-size:clamp(3.5rem,9vw,8rem);color:#fff;line-height:1;font-weight:300;letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(11,11,12,.45)}
/* "nor" blijft goud en krijgt iets meer: goud is de donkerste kleur in de titel en
   verliest als eerste tegen een lichte lucht. */
.hero-title em{font-style:italic;color:var(--gold-light);text-shadow:0 1px 2px rgba(11,11,12,.6)}
/* Vast wit, niet var(--text): die wordt in het lichte thema #1d1a14 en zette bijna
   zwarte tekst op de foto. */
.hero-sub{font-family:var(--sans);font-size:clamp(13px,.95vw,16px);letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:.9;
  text-shadow:0 1px 2px rgba(11,11,12,.6)}
.hero-scroll{position:absolute;bottom:2.4rem;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.scroll-line{width:1px;height:38px;background:linear-gradient(180deg,var(--gold),transparent);animation:scrollPulse 2.2s ease-in-out infinite}
.scroll-label{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
@keyframes scrollPulse{0%,100%{opacity:.3}50%{opacity:1}}
.hero-series-tag{position:absolute;bottom:2.2rem;right:5vw;z-index:2;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);opacity:.8;transition:opacity .5s}

/* ---------- 6. INTRO ---------- */
#intro{padding:min(22vh,10rem) 6vw;display:flex;justify-content:center;background:var(--surface)}
.intro-line{max-width:46rem;text-align:center;font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.2rem);font-weight:300;line-height:1.45;color:var(--text)}
.intro-line em{display:block;margin-top:1.4em;font-style:italic;color:var(--gold)}

/* ---------- 7. COLLECTIONS ---------- */
#collections{background:var(--surface);padding:4rem 0 6rem}
.section-intro{text-align:center;padding:0 5vw 4rem}
.section-intro h2{font-size:clamp(2rem,4vw,3rem);color:var(--text);margin-top:.6rem;font-weight:300}
#museum .section-intro h2,#atlas .section-intro h2{color:var(--text)}

.crow{position:relative;display:flex;align-items:center;gap:0;margin:0 auto 7rem;max-width:1500px;padding:0 5vw}
.crow.right{flex-direction:row-reverse}
.crow-img-wrap{flex:0 0 55%;max-width:55vw;position:relative;aspect-ratio:3/2;background:var(--surface-2);background-size:cover;background-position:center;overflow:hidden;display:block}
.crow-img-wrap img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease)}
.crow-img-wrap img.loaded{opacity:1}
.crow-text{flex:1;position:relative;z-index:2;background:var(--panel);padding:2.6rem 2.8rem;margin-left:-4.5rem}
.crow.right .crow-text{margin-left:0;margin-right:-4.5rem}
.crow-num{font-family:var(--serif);font-size:.9rem;color:var(--gold);letter-spacing:.1em}
.crow-text .eyebrow{display:block;margin-top:.6rem}
.crow-title{font-size:2.6rem;color:var(--text);margin-top:.7rem;font-weight:300;line-height:1.1}
.crow-desc{margin-top:1rem;font-size:.95rem;color:var(--muted);line-height:1.65;max-width:32rem}
.crow-mood{margin-top:.9rem;font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--text);opacity:.75}
.crow-link{display:inline-block;margin-top:1.3rem;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid transparent;transition:border-color .3s}
.crow-link:hover{border-color:var(--gold)}
.crow-count{margin-top:1.6rem;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

#collections-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.6rem;max-width:1500px;margin:0 auto;padding:0 5vw}
.ccard{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--surface-2);background-size:cover;background-position:center;cursor:pointer;display:block}
.ccard img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease),transform .6s var(--ease)}
.ccard img.loaded{opacity:1}
.ccard:hover img{transform:scale(1.05)}
.ccard-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.85) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:1.2rem}
.ccard-title{font-family:var(--serif);font-size:1.3rem;color:#fff}
.ccard-meta{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.4rem}

/* ---------- 8. MUSEUM ---------- */
#museum{background:var(--museum-bg);color:var(--museum-text);padding:5rem 0 6rem;
  background-image:radial-gradient(rgba(0,0,0,.025) 1px,transparent 1px);
  background-size:3px 3px;}
#museum .eyebrow{color:var(--museum-gold)}
#museum .section-intro h2{color:var(--museum-text)}
.room{margin-bottom:5rem}
.room-label{max-width:640px;margin:0 auto 2rem;padding:0 5vw;text-align:center}
.room-num{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--museum-gold);letter-spacing:.08em}
.room-title{font-size:2.1rem;font-weight:400;margin-top:.4rem;color:var(--museum-text)}
.room-meta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--museum-muted);margin-top:.5rem}
.room-desc{margin-top:.8rem;font-size:.92rem;color:var(--museum-desc);line-height:1.6}
.room-drag-hint{text-align:right;max-width:1500px;margin:0 auto .6rem;padding:0 5vw;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--museum-hint)}

/* scroll-padding hoort bij de padding: zonder dit lijnt scroll-snap het eerste frame
   uit op de rand van de scrollport en scrolt de 5vw links meteen weg — het frame
   plakt dan tegen de schermrand. */
.wall{display:flex;align-items:center;gap:2.2rem;overflow-x:auto;padding:1rem 5vw 2rem;scroll-snap-type:x proximity;scroll-padding-inline:5vw;-webkit-overflow-scrolling:touch}
.frame{flex:0 0 auto;scroll-snap-align:start;cursor:pointer;display:flex;flex-direction:column;align-items:center}
.frame.offset-up{margin-top:-14px}
.frame.offset-down{margin-top:14px}
.frame-wood{background:#2b241c;padding:10px;box-shadow:0 18px 40px -18px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.15)}
.frame-mat{background:#fbf9f4;padding:14px}
/* NOOIT croppen. Een vaste height met een max-width dwong liggende foto's in een
   staand kader: op 390px werd 1600x1067 getoond als 304x388 — bijna de halve breedte
   weggesneden door object-fit:cover. Met max-height én max-width en auto-afmetingen
   schaalt de browser proportioneel tot hij binnen beide past. Frames krijgen daardoor
   verschillende hoogtes; .wall lijnt ze uit op de middenlijn, zoals een echte hang. */
.frame-mat img{height:auto;width:auto;max-height:46vh;max-width:60vw;display:block;background:#ddd;opacity:0;transition:opacity .5s var(--ease)}
.frame-mat img.loaded{opacity:1}
.frame-plate{margin-top:.7rem;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#6b6046;text-align:center;max-width:14rem}

/* ---------- 9. ATLAS ---------- */
#atlas{background:var(--surface);padding:5rem 0 6rem}
#atlas-filters{max-width:1500px;margin:0 auto;padding:0 5vw 2rem;display:flex;flex-direction:column;gap:1rem}
.chip-group{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);padding:.5rem .9rem;border-radius:2px;transition:all .25s var(--ease)}
.chip:hover{color:var(--text);border-color:var(--gold)}
.chip.active{color:var(--surface);background:var(--gold);border-color:var(--gold)}
.atlas-count{font-size:11px;letter-spacing:.1em;color:var(--muted);margin-top:.3rem}

#atlas-grid{column-count:4;column-gap:14px;max-width:1500px;margin:0 auto;padding:0 5vw}
.agrid-item{break-inside:avoid;margin-bottom:14px;position:relative;overflow:hidden;background:var(--surface-2);background-size:cover;background-position:center;cursor:pointer;opacity:1;transition:opacity .15s linear,transform .35s var(--ease)}
.agrid-item.hide{display:none}
.agrid-item img{width:100%;height:auto;display:block;opacity:0;transition:opacity .6s var(--ease)}
.agrid-item img.loaded{opacity:1}
.agrid-item:hover{transform:translateY(-4px)}
/* Rustpunt: zonder actief filter ligt er een sluier over het hele raster; je muis haalt
   hem weg van één foto tegelijk. Een overlay in plaats van opacity of filter, want
   .agrid-item.style.opacity wordt al door de filterlogica gestuurd en filter op 655
   items is duur. Alleen op apparaten met een echte muis: op touch is er geen hover om
   de sluier mee weg te halen. */
@media (hover:hover) and (pointer:fine){
  #atlas-grid.dimmed .agrid-item::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:rgba(var(--fade),.5);transition:opacity .4s var(--ease)}
  #atlas-grid.dimmed .agrid-item:hover::after{opacity:0}
}
.agrid-cap{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);color:#fff;padding:.8rem .7rem .6rem;font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.agrid-item:hover .agrid-cap{opacity:1;transform:translateY(0)}

/* ---------- 10. ABOUT / FOOTER ---------- */
#about{background:var(--surface);padding:6rem 5vw 0;border-top:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;max-width:1200px;margin:0 auto;padding-bottom:4rem}
.cormorant-statement{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.3;color:var(--text);font-weight:300}
.about-bio p{font-size:.95rem;color:var(--muted);line-height:1.7}
.about-links{margin-top:1.4rem;display:flex;gap:1.6rem}
.gold-link{color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:1px;font-size:.9rem}
.footer-bar{border-top:1px solid var(--line);padding:1.6rem 0 2rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;max-width:1200px;margin:0 auto;font-size:11px;letter-spacing:.06em;color:var(--muted)}
.footer-tiny{color:var(--muted-dim)}

/* ---------- 11. COLLECTION DETAIL ---------- */
#view-collection{background:var(--surface);min-height:100vh}
.back-link{position:fixed;top:84px;left:5vw;z-index:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text);background:rgba(var(--fade),.55);backdrop-filter:blur(8px);padding:.6rem 1rem;border-radius:2px}
.cd-hero{position:relative;height:82vh;min-height:420px;overflow:hidden}
.cd-hero-img{position:absolute;inset:0;background-size:cover;background-position:center;background-color:var(--surface-2)}
.cd-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--fade),.35) 0%,rgba(var(--fade),.15) 40%,rgba(var(--fade),.9) 100%)}
.cd-hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:0 5vw 3.5rem;max-width:900px}
.cd-title{font-size:clamp(2.6rem,6vw,4.6rem);color:#fff;font-weight:300;margin-top:.5rem}
.cd-meta{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.8rem}
/* collectie-hero ligt op het donkere vignet: houd daar de lichte tinten aan */
.cd-hero-content .eyebrow{color:var(--gold-light)}
.cd-hero-content .cd-meta{color:#a8a49c}
.cd-mood{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--text);margin-top:.6rem;opacity:.85}
.cd-body{max-width:1500px;margin:0 auto;padding:4rem 5vw 2rem}
.cd-description{max-width:46rem;font-size:1rem;color:var(--muted);line-height:1.75;margin-bottom:3rem}
.cd-gallery{display:flex;flex-direction:column;gap:8px}
.cd-row{display:flex;gap:8px}
.cd-row img{height:100%;width:100%;object-fit:cover;cursor:pointer;background:var(--surface-2);opacity:0;transition:opacity .6s var(--ease)}
.cd-row img.loaded{opacity:1}
.cd-row-item{position:relative}
.cd-info-dot{position:absolute;top:.6rem;right:.6rem;width:20px;height:20px;border-radius:50%;background:rgba(11,11,12,.6);color:var(--gold-light);font-family:var(--serif);font-style:italic;font-size:.8rem;display:flex;align-items:center;justify-content:center;pointer-events:none}
.cd-nav{max-width:1500px;margin:0 auto;padding:5rem 5vw 6rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem;border-top:1px solid var(--line)}
.cd-nav a{padding:1rem 0}
.cd-next{text-align:right}
.cd-nav-label{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.cd-nav-title{display:block;font-family:var(--serif);font-size:1.8rem;color:var(--text);margin-top:.4rem}

/* ---------- 12. LIGHTBOX ---------- */
#lightbox{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center}
#lightbox.open{display:flex}
.lb-backdrop{position:absolute;inset:0;background:rgba(10,10,11,.97);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lb-stage{position:relative;z-index:2;max-width:88vw;max-height:84vh;opacity:0;transform:scale(.96);transition:opacity .25s var(--ease),transform .25s var(--ease)}
#lightbox.open .lb-stage{opacity:1;transform:scale(1)}
.lb-img{max-width:88vw;max-height:84vh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-close{position:absolute;top:20px;right:24px;z-index:3;font-size:2rem;color:var(--text);line-height:1}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);z-index:3;font-size:2.4rem;color:var(--text);padding:.6rem 1rem;opacity:.7;transition:opacity .2s}
.lb-prev:hover,.lb-next:hover{opacity:1}
.lb-prev{left:12px}
.lb-next{right:12px}
.lb-counter{position:absolute;top:24px;left:24px;z-index:3;font-size:11px;letter-spacing:.12em;color:var(--muted)}
.lb-caption{position:absolute;left:28px;bottom:26px;z-index:3;max-width:34rem;transition:opacity .4s ease}
.lb-caption.hidden{opacity:0;pointer-events:none}
.lb-cap-title{font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--text)}
.lb-cap-text{font-size:14px;color:var(--muted);margin-top:.4rem;line-height:1.5}
.lb-cap-meta{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#65615a;margin-top:.6rem}
.lb-cap-sale{margin-top:.7rem}
.lb-buy{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:1px}

/* ---------- 12b. LIGHTBOX INFO PANEL ("nerd box") ---------- */
.lb-info{position:absolute;top:18px;right:70px;z-index:3;width:34px;height:34px;border:1px solid rgba(255,255,255,.4);border-radius:50%;color:var(--text);font-family:var(--serif);font-style:italic;font-size:.95rem;display:flex;align-items:center;justify-content:center;transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)}
.lb-info:hover,.lb-info.active{border-color:var(--gold);color:var(--gold)}
.lb-panel{position:fixed;top:0;right:0;bottom:0;width:340px;max-width:88vw;background:rgba(11,11,12,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-left:1px solid rgba(255,255,255,.07);z-index:2100;transform:translateX(100%);transition:transform .45s cubic-bezier(.22,1,.36,1);overflow-y:auto;padding:5rem 2.2rem 3rem}
.lb-panel.open{transform:translateX(0)}
.lb-panel-close{position:absolute;top:20px;right:20px;font-size:1.6rem;color:var(--muted);line-height:1}
.lb-panel-close:hover{color:var(--text)}
#lightbox.panel-open .lb-stage{margin-right:340px;transition:opacity .25s var(--ease),transform .25s var(--ease),margin-right .45s cubic-bezier(.22,1,.36,1)}
.lb-panel-content{display:flex;flex-direction:column;gap:1.7rem;transition:opacity .2s ease}
.lb-panel-content.crossfade-out{opacity:0}
.lb-panel-block{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.lb-panel-block.in{opacity:1;transform:translateY(0)}
.lb-panel-block:nth-of-type(1){transition-delay:0ms}
.lb-panel-block:nth-of-type(2){transition-delay:60ms}
.lb-panel-block:nth-of-type(3){transition-delay:120ms}
.lb-panel-block:nth-of-type(4){transition-delay:180ms}
.lb-panel-content.no-stagger .lb-panel-block{transition-delay:0ms}
.lb-panel-title{font-family:var(--serif);font-style:italic;font-size:1.4rem;color:var(--text)}
.lb-panel-caption{font-size:13px;color:var(--muted);margin-top:.5rem;line-height:1.6}
.lb-panel-rule-line{display:block;width:100%;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.lb-exif-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.2rem}
.lb-exif-label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lb-exif-value{font-size:14px;font-weight:300;color:var(--text);margin-top:.3rem}
.lb-map-wrap{margin-top:.1rem}
.lb-map{width:100%;height:auto;display:block;overflow:hidden;border-radius:2px}
.lb-map-zoom{transform:scale(1);transition:transform .9s var(--ease)}
.lb-map-zoom.zoomed{transform:scale(2.2)}
.lb-map-dot{fill:var(--gold)}
.lb-map-ping{fill:none;stroke:var(--gold);stroke-width:2;opacity:.8;animation:lbPing 2.2s ease-out infinite}
@keyframes lbPing{0%{r:4;opacity:.8}100%{r:16;opacity:0}}
.lb-map-place{margin-top:.85rem;font-size:11px;letter-spacing:.06em;color:var(--text)}
.lb-map-approx{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:.2rem}
.lb-map-coords{font-size:11px;color:var(--muted);margin-top:.4rem;letter-spacing:.04em}

/* ---------- 12c. COLLECTION DETAIL — MUSEUM WALL / SEQUEL RIBBON ---------- */
.cd-continuation{font-size:12px;letter-spacing:.05em;color:var(--muted);margin-top:.5rem}
.cd-continuation a{color:var(--gold);border-bottom:1px solid rgba(194,162,107,.4);padding-bottom:1px;transition:border-color .3s}
.cd-continuation a:hover{border-color:var(--gold)}
.cd-wall-section{margin-bottom:4rem}
.cd-wall-eyebrow{margin-bottom:1.6rem}
.cd-wall{padding:1rem 0 2rem}
.cd-wall .frame-mat{background:#f7f4ee}
.cd-wall .frame-wood{box-shadow:0 28px 60px -18px rgba(0,0,0,.75),0 6px 16px rgba(0,0,0,.4)}
.cd-wall .frame-plate{color:var(--muted)}
.cd-sequel{max-width:1500px;margin:0 auto 2rem;padding:0 5vw}
.cd-sequel-link{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:260px;padding:3rem 3.5rem;border-radius:2px;overflow:hidden;background-size:cover;background-position:center;background-color:#1c1c1e;isolation:isolate}
.cd-sequel-link::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(11,11,12,.92),rgba(11,11,12,.55));z-index:0}
.cd-sequel-link>*{position:relative;z-index:1}
.cd-sequel-title{font-size:2rem;color:#fff;margin-top:.6rem;font-weight:300;transition:transform .4s var(--ease)}
.cd-sequel-link:hover .cd-sequel-title{transform:translateX(8px)}

/* ---------- 10b. ABOUT EXTRAS ---------- */
.about-intro{text-align:center;padding-top:1rem}
.about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;max-width:900px;margin:4rem auto 0;padding:2.6rem 5vw 0;border-top:1px solid rgba(194,162,107,.25);text-align:center}
.astat-num{display:block;font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);color:var(--gold);font-weight:300;line-height:1.1}
.astat-label{display:block;margin-top:.4rem;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
@media (max-width:700px){.about-stats{grid-template-columns:repeat(2,1fr);gap:1.6rem}}

/* ---------- 13. UTILITY ---------- */
[hidden]{display:none !important}

/* ---------- 13b. FAVORITES (hart, nav-teller) ---------- */
.nav-wall{color:var(--gold)}
.nav-wall span{font-variant-numeric:tabular-nums}
.lb-fav{position:absolute;top:18px;right:116px;z-index:3;width:34px;height:34px;border:1px solid rgba(255,255,255,.4);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:border-color .25s var(--ease)}
.lb-fav svg{width:15px;height:15px;fill:none;stroke:var(--text);stroke-width:1.5;transition:fill .35s var(--ease),stroke .35s var(--ease),transform .35s var(--ease)}
.lb-fav:hover{border-color:var(--gold)}
.lb-fav:hover svg{stroke:var(--gold)}
.lb-fav[aria-pressed="true"]{border-color:var(--gold)}
.lb-fav[aria-pressed="true"] svg{fill:var(--gold);stroke:var(--gold)}
.lb-fav.pulse svg{transform:scale(1.18)}
@media (prefers-reduced-motion:reduce){.lb-fav.pulse svg{transform:none}}

/* ---------- 13c. FAVORITES WALL ---------- */
#view-wall{background:var(--surface);min-height:100vh;padding-top:7rem}
.fw-head{text-align:center;padding:2rem 5vw 1rem}
.fw-title{font-size:clamp(2rem,4vw,3rem);color:var(--text);font-weight:300;margin-top:.6rem}
.fw-meta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.9rem}
.fw-borrowed{font-family:var(--serif);font-style:italic;color:var(--muted);margin-top:1rem}
.fw-adopt{color:var(--gold);border-bottom:1px solid var(--gold);font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-left:.6rem}
.fw-wall{flex-wrap:wrap;justify-content:center;overflow-x:visible;row-gap:3.6rem;padding:3rem 5vw 4rem}
.fw-wall .frame-mat img{max-height:34vh;max-width:44vw}
.fw-frame-actions{display:flex;gap:1.2rem;align-items:center;margin-top:.5rem}
.fw-buy{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:1px}
.fw-unhang{font-size:1.1rem;line-height:1;color:var(--muted);transition:color .25s var(--ease)}
.fw-unhang:hover{color:var(--text)}
.fw-empty{text-align:center;padding:6rem 5vw 8rem}
.fw-empty-line{font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--text);font-weight:300}
.fw-empty-sub{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:1.2rem}
.fw-actions{text-align:center;padding:0 5vw 6rem}
.fw-share{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);padding:.7rem 1.3rem;border-radius:2px;transition:color .25s var(--ease),border-color .25s var(--ease)}
.fw-share:hover{color:var(--gold);border-color:var(--gold)}
@media (max-width:900px){
  .fw-wall .frame-mat img{max-height:28vh;max-width:76vw}
}

/* ---------- 14. RESPONSIVE ---------- */
@media (max-width:1200px){
  #atlas-grid{column-count:3}
}
@media (max-width:900px){
  .nav-links{display:none}
  #nav-menu-btn{display:block}
  .crow,.crow.right{flex-direction:column}
  .crow-img-wrap{max-width:100%;flex-basis:auto;width:100%;aspect-ratio:4/3}
  .crow-text{margin:0;padding:1.8rem 6vw 0}
  .crow.right .crow-text{margin:0}
  #collections-grid{padding:0 6vw}
  .about-grid{grid-template-columns:1fr;gap:2.4rem}
  #atlas-grid{column-count:2}
  .cd-nav{grid-template-columns:1fr}
  .cd-next{text-align:left}
}
@media (max-width:900px){
  .hero-series-tag{bottom:5.4rem;right:auto;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap}
}
@media (max-width:560px){
  #atlas-grid{column-count:1}
  .frame-mat img{max-width:78vw}
  .lb-caption{left:14px;right:14px;bottom:14px;max-width:none}
}
@media (max-width:900px){
  .lb-info{right:64px}
  .lb-fav{right:110px}
  .lb-panel{top:auto;right:0;left:0;bottom:0;width:100%;max-width:100%;max-height:70vh;border-left:none;border-top:1px solid rgba(255,255,255,.08);border-radius:18px 18px 0 0;transform:translateY(100%);transition:transform .45s cubic-bezier(.22,1,.36,1);padding:1.8rem 1.4rem 2.4rem}
  .lb-panel.open{transform:translateY(0)}
  #lightbox.panel-open .lb-stage{margin-right:0}
  .cd-sequel-link{padding:2.2rem 1.8rem;min-height:200px}
}

/* Touch devices: grid stays clean (info lives behind the "i" and in the lightbox) */
@media (hover:none){
  .agrid-cap{display:none}
  .ccard-overlay{opacity:1}
  .lb-caption.hidden{opacity:1;pointer-events:auto}
}

/* ---------- 15. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{transition:none;opacity:1;transform:none}
  .hero-slide{transition:opacity .3s linear;transform:none !important}
  .scroll-line{animation:none}
  #preloader{transition:none}
  .preloader-word span{animation:none;opacity:1;transform:none}
  .crow-img-wrap img,.ccard img,.agrid-item img,.cd-row img{transition:opacity .2s linear}
  .lb-panel,#lightbox.panel-open .lb-stage,.lb-panel-block,.lb-map-zoom{transition:none !important}
  .lb-panel-block{opacity:1 !important;transform:none !important}
  .lb-map-ping{display:none}
  .cd-sequel-title{transition:none}
}

/* ---------- 16. STATISCHE STUBS (/c/<slug>/, /print/<pid>/) ----------
   Gegenereerd door tools/build_seo.py. Dit zijn echte pagina's voor crawlers en
   taalmodellen die geen JavaScript draaien — geen wachtkamer die doorstuurt.
   Ze erven het thema van hierboven, dus dark/light werkt er vanzelf in mee. */
.stub{max-width:1200px;margin:0 auto;padding:7rem 5vw 4rem}
.stub-hero{width:100%;height:52vh;min-height:300px;object-fit:cover;background:var(--surface-2)}
.stub-head{max-width:46rem;margin:3rem auto 4rem;text-align:center}
.stub-title{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:300;margin-top:.5rem;color:var(--text)}
.stub-desc{margin-top:1.2rem;font-size:1.05rem;line-height:1.7;color:var(--text)}
.stub-meta{margin-top:1rem;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.stub-mood{margin-top:.6rem;font-family:var(--serif);font-style:italic;color:var(--muted)}
.stub-cta{display:inline-block;margin-top:1.6rem;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:2px}
.stub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2.4rem}
.stub-item{margin:0}
.stub-item img{width:100%;height:auto;background:var(--surface-2)}
.stub-item figcaption{margin-top:.7rem;display:flex;flex-direction:column;gap:.25rem;font-size:13px;color:var(--muted);line-height:1.5}
.stub-item figcaption strong{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.1rem;color:var(--text)}
.stub-place{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dim)}
.stub-footer{border-top:1px solid var(--line);padding:2rem 5vw;text-align:center;font-size:11px;letter-spacing:.06em;color:var(--muted)}
@media (max-width:900px){
  .stub{padding:6rem 5vw 3rem}
  .stub-grid{grid-template-columns:1fr;gap:2rem}
}

/* ---------- 17. DATA-FOUT (data.js onleesbaar) ----------
   Laatste vangnet. Laadt data.js niet, dan toont app.js dit in plaats van een
   blanco pagina. Hoort zelden te verschijnen: deploy.sh weigert sinds de
   poortwachter een kapotte data.js, dus dit dekt vooral lokaal werk. */
.data-error{max-width:40rem;margin:0 auto;padding:9rem 5vw 6rem;text-align:center}
.data-error h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.8rem,4vw,2.6rem);margin-top:.8rem;color:var(--text)}
.data-error p{margin-top:1.2rem;line-height:1.7;color:var(--muted)}