/* Gedeelde stijl voor index.php en werk.php.
   Uit index.php gehaald zodat de productpagina exact hetzelfde ontwerp gebruikt. */
:root{
  --bg:#0b0b0d; --bg2:#101013; --panel:#16161a; --panel2:#1d1d22; --line:rgba(255,255,255,.10);
  --text:#f2f0ec; --muted:#9c9a95; --gold:#c9a86a; --gold-l:#e6d3a3; --sheen:rgba(255,255,255,.5);
  --disp:"Instrument Serif", Georgia, serif; --body:"Inter", system-ui, sans-serif;
  --pad:clamp(1.25rem,5vw,6rem);
  /* stapelvolgorde — navigatie staat altijd bovenaan */
  --z-art:1; --z-header:1000; --z-menu:1100;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.lock{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--disp);font-weight:400;line-height:1.02;margin:0;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.wrap{max-width:1220px;margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{font-family:var(--body);font-weight:500;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.gold{color:var(--gold)}
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--body);font-weight:500;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;
  padding:1rem 2rem;border:1px solid var(--gold);color:#0b0b0d;background:var(--gold);border-radius:2px;cursor:pointer;transition:.35s}
.btn:hover{background:var(--gold-l);border-color:var(--gold-l)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

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

/* fijne filmkorrel over de hele pagina — geeft de zwarte 'galeriewand' textuur */
.grain{position:fixed;inset:0;z-index:6;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px}

/* ---------- header / nav (altijd bovenop) ---------- */
header{position:fixed;inset:0 0 auto 0;z-index:var(--z-header);padding:1.1rem 0;transition:background .35s,border-color .35s,padding .35s}
header.scrolled{background:rgba(11,11,13,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:.8rem 0}
.nav{display:flex;align-items:center;justify-content:space-between;gap:2rem}
/* Het beeldmerk in de kop en de voettekst. De hoogte stuurt alles: het logo
   houdt zijn eigen verhouding, dus breedte hoeft nergens genoemd te worden.
   Zakt de kop bij het scrollen in, dan krimpt het merk mee. */
.brand{display:flex;align-items:center;position:relative;z-index:calc(var(--z-menu) + 1);
  line-height:0}
.brand .merk{height:42px;width:auto;transition:height .35s ease}
header.scrolled .brand .merk{height:34px}
.foot .brand .merk{height:76px}
@media (max-width:900px){
  .brand .merk{height:36px}
  header.scrolled .brand .merk{height:32px}
}
.menu{display:flex;gap:1.8rem;align-items:center;list-style:none;margin:0;padding:0}
.menu a{font-size:.84rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:.25s}
.menu a:hover{color:var(--gold)}
.menu a.btn{color:#0b0b0d}

/* Taalschakelaar NL · EN — de actieve taal is geen link maar staat wél in goud,
   zodat je in één oogopslag ziet welke versie je leest. */
.taalwissel{margin-left:.2rem}
.talen{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;letter-spacing:.14em}
.talen > *{padding:.15rem 0}
.talen a{color:var(--muted)}
.talen a:hover{color:var(--gold)}
.talen .taal-actief{color:var(--gold);border-bottom:1px solid var(--gold)}
.talen > * + *::before{content:"·";color:var(--line);margin-right:.5rem;border:0}
.burger{display:none;background:none;border:0;cursor:pointer;padding:.4rem;z-index:calc(var(--z-menu) + 1)}
.burger span{display:block;width:26px;height:1.5px;background:var(--text);margin:6px 0;transition:.3s}
/* De backdrop moet ONDER de header (en dus onder het mobiele menu) blijven,
   anders legt zijn blur zich over het menu (wazig) en vangt hij de tikken op
   (niet klikbaar). De header maakt een eigen stacking-context op --z-header,
   dus het menu erin kan nooit boven een backdrop op --z-menu uitkomen. */
.backdrop{position:fixed;inset:0;background:rgba(6,6,8,.6);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.35s;z-index:calc(var(--z-header) - 1)}
.backdrop.show{opacity:1;pointer-events:auto}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;z-index:var(--z-art)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(80% 70% at 78% 40%,rgba(201,168,106,.10),transparent 60%),linear-gradient(180deg,var(--bg),#0e0e12)}
/* drijvende kleurwas — een echo van de kleurrijke schilderijen */
.hero .wash{position:absolute;inset:-10%;z-index:0;pointer-events:none;opacity:.55;filter:blur(38px);
  background:
    radial-gradient(38% 42% at 22% 32%,rgba(201,168,106,.20),transparent 62%),
    radial-gradient(34% 40% at 82% 60%,rgba(96,132,196,.14),transparent 62%),
    radial-gradient(30% 34% at 58% 18%,rgba(178,86,140,.12),transparent 60%);
  animation:drift 24s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-1.5%,1%,0) scale(1)}to{transform:translate3d(2.5%,-2%,0) scale(1.1)}}
.hero .spot{position:absolute;width:640px;height:640px;border-radius:50%;pointer-events:none;z-index:1;opacity:0;
  background:radial-gradient(closest-side,rgba(201,168,106,.16),transparent);transform:translate(-50%,-50%);transition:opacity .4s}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:7rem;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero h1{font-size:clamp(3.2rem,8.6vw,7.2rem);line-height:.92;letter-spacing:-.02em}
.hero h1 i{font-style:italic;
  background:linear-gradient(100deg,var(--gold) 0%,var(--gold-l) 40%,#fff 50%,var(--gold-l) 60%,var(--gold) 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold);
  animation:shimmer 7s ease-in-out infinite}
@keyframes shimmer{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.hero p.lede{font-size:clamp(1.02rem,2vw,1.2rem);color:#cfccc6;max-width:46ch;margin:1.6rem 0 0}
.hero .cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
.hero .sig{font-family:var(--disp);font-style:italic;font-size:1.15rem;color:var(--muted);margin-top:2.2rem}
/* uitgelicht werk met epoxy-glans + spiegeling */
.hero-art{position:relative}
/* Het volledige logo boven het uitgelichte werk. De breedte volgt de kolom, met
   een bovengrens zodat het op een breed scherm niet uit verhouding groeit. */
.hero-merk{width:100%;max-width:520px;height:auto;display:block;margin:0 auto 2rem;
  filter:drop-shadow(0 0 50px rgba(201,168,106,.22))}
.plate{position:relative;border-radius:4px;overflow:hidden;border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--sx,0px) var(--sy,40px) 90px rgba(0,0,0,.7),0 2px 0 rgba(255,255,255,.06) inset;
  transform:perspective(820px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(var(--tz,0px));
  transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s ease}
/* muis op het werk: de plaat komt naar voren en volgt de cursor direct mee */
.hero-art.kantelt .plate{--tz:28px;transition:transform .1s linear,box-shadow .1s linear}
.plate img{width:100%;aspect-ratio:1;object-fit:cover}
/* de plaat houdt altijd een zichtbaar vierkant — ook met een placeholder,
   zodat het "werk in beeld hangt" en kan kantelen, óók vóór de foto's staan */
.plate .imgwrap{aspect-ratio:1;width:100%}
.plate .imgwrap.failed{background:
  radial-gradient(130% 130% at 30% 0%,rgba(201,168,106,.18),transparent 55%),
  linear-gradient(135deg,#20202a,#0e0e12)}
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.75;
  background:
    radial-gradient(220px 220px at var(--mx,32%) var(--my,20%),rgba(255,255,255,.42),transparent 62%),
    linear-gradient(118deg,var(--sheen) 0%,rgba(255,255,255,.05) 24%,transparent 44%,transparent 72%,rgba(255,255,255,.18) 100%)}
.hero-art .refl{width:100%;aspect-ratio:1/.4;overflow:hidden;transform:scaleY(-1);opacity:.2;margin-top:3px;border-radius:4px;
  mask-image:linear-gradient(0deg,#000,transparent 80%)}
.hero-art .refl img{width:100%;aspect-ratio:1;object-fit:cover;object-position:top}
.hero-art .tag{position:absolute;left:1rem;bottom:1rem;z-index:2;background:rgba(11,11,13,.72);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:2px;padding:.5rem .8rem;font-size:.74rem;letter-spacing:.08em}
.hero-art .tag b{color:var(--gold);font-weight:500}

/* gemeenschappelijke beeld-fallback (als CDN-afbeelding niet laadt) */
.imgwrap{position:relative;background:
  radial-gradient(120% 120% at 20% 0%,rgba(201,168,106,.14),transparent 55%),
  linear-gradient(135deg,#1a1a20,#0e0e12)}
.imgwrap.failed img{display:none}
.imgwrap.failed::before{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:1.2rem;font-family:var(--disp);font-size:1.15rem;color:var(--muted)}
/* op serie-tegels staat de titel al als echte tekst in .body — geen dubbele ghost-tekst tonen */
.scard .imgwrap.failed::before{content:none}

/* ---------- marquee (kinetische outline-serif) ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--bg2);position:relative;z-index:2}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:12%;z-index:1;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--bg2),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--bg2),transparent)}
.mq-track{display:flex;align-items:center;gap:2.4rem;width:max-content;padding-block:1.25rem;white-space:nowrap;
  font-family:var(--disp);font-size:clamp(1.5rem,3.6vw,2.6rem);color:transparent;
  -webkit-text-stroke:1px rgba(241,240,236,.34);animation:mq 36s linear infinite}
.mq-track i{font-style:normal;color:var(--gold);-webkit-text-stroke:0;font-size:.7em;transform:translateY(-.08em)}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

section{position:relative;z-index:2;padding:clamp(4.5rem,9vw,7.5rem) 0}
.sec-head{max-width:680px;margin-bottom:3rem}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:clamp(2.4rem,6vw,4.2rem);margin:.7rem 0 1rem}
.sec-head h2 i{font-style:italic;color:var(--gold)}
.sec-head p{color:var(--muted);font-size:1.04rem}

/* ---------- series (visuele tegels → collectie) ---------- */
.series{background:var(--bg2)}
.slist{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.scard{position:relative;display:block;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--panel);
  min-height:230px;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--ty,0px),var(--tz,0px));
  transition:transform .45s cubic-bezier(.22,.61,.36,1),border-color .35s,box-shadow .45s}
.scard:hover{--ty:-3px;--tz:14px;border-color:rgba(201,168,106,.55);
  box-shadow:var(--sx,0px) calc(20px + var(--sy,0px)) 44px rgba(0,0,0,.5)}
.scard.kantelt{transition:transform .1s linear,box-shadow .1s linear}
.scard .imgwrap{position:absolute;inset:0}
.scard .imgwrap img{width:100%;height:100%;object-fit:cover;opacity:.5;transition:opacity .5s,transform .8s}
.scard:hover .imgwrap img{opacity:.72;transform:scale(1.05)}
.scard::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,11,13,.15),rgba(11,11,13,.86))}
.scard .body{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem}
.scard .k{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.scard h3{font-size:1.5rem;margin:.35rem 0 .2rem}
.scard p{color:var(--muted);font-size:.86rem;margin:0}
.scard .go{margin-top:.9rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text);
  display:inline-flex;align-items:center;gap:.4rem;opacity:.85}
.scard:hover .go{color:var(--gold)}

/* ---------- collectie / werk (filterbaar raster, shop-klaar) ---------- */
.gallery{background:linear-gradient(180deg,var(--bg),#0e0e12)}
.tabs{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.6rem}
.tabs button{font-family:var(--body);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;padding:.6rem 1.3rem;
  border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;transition:.25s;border-radius:2px}
.tabs button:hover{color:var(--text)}
.tabs button.active{border-color:var(--gold);color:var(--gold)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.card{position:relative;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--panel);
  display:flex;flex-direction:column;
  /* Zelfde 3D-taal als het uitgelichte werk in de hero, maar ingetogener —
     de kaarten zijn klein, dus een grote uitslag zou onrustig worden.
     Zonder muis blijven --rx/--ry op 0 en blijft het gedrag als vanouds. */
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--ty,0px),var(--tz,0px));
  transition:transform .45s cubic-bezier(.22,.61,.36,1),border-color .4s,box-shadow .45s}
.card.wide{grid-column:span 2}
.card:hover{--ty:-4px;--tz:16px;border-color:rgba(201,168,106,.5);
  box-shadow:var(--sx,0px) calc(26px + var(--sy,0px)) 50px rgba(0,0,0,.55)}
/* tijdens het bewegen plakt de kaart aan de cursor; bij weghalen veert hij terug */
.card.kantelt{transition:transform .1s linear,box-shadow .1s linear}
.card .art{position:relative;overflow:hidden;display:block}
.card .art .imgwrap{aspect-ratio:1}
.card.wide .art .imgwrap{aspect-ratio:16/9}
.card .art img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.card:hover .art img{transform:scale(1.04)}
/* epoxy-glans: lichtvlek die de cursor volgt + bewegende lichtstreep */
.card .art::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.5;transition:opacity .5s;
  background:
    radial-gradient(160px 160px at var(--mx,50%) var(--my,0%),rgba(255,255,255,.34),transparent 60%),
    linear-gradient(115deg,var(--sheen) 0%,rgba(255,255,255,.04) 22%,transparent 42%,transparent 70%,rgba(255,255,255,.14) 100%)}
.card:hover .art::after{opacity:.9}
.card .meta{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.15rem}
.card .meta .s{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.card .meta h3{font-size:1.35rem;margin:.15rem 0}
.card .meta .row{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-top:.3rem;flex-wrap:wrap}
.card .meta .pr{color:var(--gold);font-size:1rem;letter-spacing:.02em}
.card .meta .lnk{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);transition:.25s;padding-bottom:1px}
.card .meta .lnk:hover{color:var(--gold);border-color:var(--gold)}
.gallery .empty{text-align:center;color:var(--muted);padding:2rem 0;display:none}
.gallery .foot-note{text-align:center;color:var(--muted);font-size:.9rem;margin-top:2.6rem}
.gallery .foot-note a{color:var(--gold);border-bottom:1px solid var(--line)}
/* telling naast een filternaam */
.tabs .n{font-size:.68em;color:var(--muted);margin-left:.15rem}
.tabs button.active .n{color:var(--gold-l)}
/* 'toon meer' — de collectie rendert in stappen, anders staan er ~500 beelden in de DOM */
.meer-wrap{display:flex;justify-content:center;margin-top:2.6rem}
/* 'Of klik hier voor de volgende serie' — een zachte tweede keuze onder 'toon
   meer', bewust rustiger vormgegeven zodat het geen concurrent wordt. */
.volgende-wrap{display:flex;justify-content:center;margin-top:1rem}
.volgende-wrap[hidden]{display:none}
.volgende-serie{font-size:.86rem;color:var(--muted);border-bottom:1px solid var(--line);
  padding-bottom:2px;transition:color .25s,border-color .25s;text-align:center}
.volgende-serie:hover{color:var(--gold);border-color:var(--gold)}
.meer[hidden]{display:none}

/* ---------- welke serie bekijk je? ----------
   Vervangt de twee rijen filterknoppen. Toont de gekozen serie en, even
   belangrijk, de weg terug — dat was precies wat bezoekers misten. */
.serie-balk{display:flex;align-items:baseline;gap:1.4rem;flex-wrap:wrap;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1.4rem 0;margin:0 0 2.6rem}
.serie-balk[hidden]{display:none}
.serie-terug{flex:none;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  transition:color .25s}
.serie-terug:hover{color:var(--gold)}
.serie-terug span{margin-right:.35rem}
.serie-nu{flex:1 1 22rem;min-width:0}
.serie-nu h3{font-size:clamp(1.3rem,2.6vw,1.75rem);color:var(--text)}
.serie-nu p{color:var(--muted);font-size:.92rem;margin:.35rem 0 0}
.serie-nu p[hidden]{display:none}
.serie-tel{flex:none;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
/* doorbladeren onder het raster */
.serie-nav{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:2.6rem}
.serie-nav[hidden]{display:none}
.serie-nav .btn{padding:.8rem 1.5rem;font-size:.78rem}
@media (max-width:640px){
  .serie-balk{gap:.6rem}
  .serie-nav .btn{flex:1 1 100%;justify-content:center}
}

/* ---------- second hand ---------- */
.secondhand{background:var(--bg2)}
.schakel{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:-1.4rem 0 2.2rem;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.schakel input{width:auto;accent-color:var(--gold);cursor:pointer}
.card.is-verkocht .art img{filter:grayscale(.85) brightness(.62)}
.card.is-verkocht .meta h3,.card.is-verkocht .meta .pr{color:var(--muted)}
.badge-verkocht{position:absolute;top:.8rem;left:.8rem;z-index:2;background:rgba(11,11,13,.82);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:2px;padding:.32rem .7rem;font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}

/* ---------- technieken ---------- */
.tech-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.tech-grid.drie{grid-template-columns:repeat(3,1fr)}
/* de derde techniek (lijst) heeft minder tekst — vul de hoogte netjes */
.tech-grid.drie .tech{display:flex;flex-direction:column}
.tech-grid.drie .tech ul{margin-top:auto;padding-top:1.2rem}

/* het werkproces, onder de technieken */
.proces{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:1.6rem}
.proces article{border:1px solid var(--line);border-radius:3px;padding:2.2rem;background:var(--bg2)}
.proces h3{font-size:1.5rem;margin:0 0 .8rem}
.proces p{color:var(--muted);font-size:.95rem;margin:0}
/* Een witregel in het beheerpaneel wordt een nieuwe alinea. Deze blokken hadden
   margin:0, dus zonder deze regel zouden twee alinea's tegen elkaar plakken en
   zag je de witregel alsnog niet terug. */
.proces p + p,.zeker p + p,.tech p + p,.about p + p{margin-top:.95em}

/* zekerheid: waarde, certificaat, portfolio */
.zekerheid{background:var(--bg2)}
.zeker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.zeker{border:1px solid var(--line);border-radius:3px;padding:2.2rem;background:var(--panel);transition:.35s}
.zeker:hover{border-color:rgba(201,168,106,.5)}
.zeker h3{font-size:1.35rem;margin:0 0 .8rem;color:var(--gold)}
.zeker p{color:var(--muted);font-size:.94rem;margin:0}

/* exposities */
.expo{background:var(--bg)}
.expo-lijst{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.1rem 2.4rem}
.expo-lijst li{display:flex;gap:.8rem;align-items:baseline;padding:.7rem 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:.94rem}
.expo-lijst li::before{content:"◆";color:var(--gold);font-size:.55em;flex:none}
/* Tussenkopjes en losse alinea's binnen het exposities-blok. De lijst blijft
   in twee kolommen; tekst leest prettiger in één smalle kolom. */
.expo-inhoud>*{margin:0}
.expo-inhoud>*+*{margin-top:1.4rem}
.expo-inhoud>.expo-kop+*{margin-top:.9rem}
.expo-inhoud>.expo-kop{font-family:var(--disp);font-weight:400;font-size:clamp(1.35rem,2.4vw,1.7rem);color:var(--text);letter-spacing:.01em;line-height:1.25}
.expo-inhoud>*+.expo-kop{margin-top:2.8rem}
.expo-tekst{color:var(--muted);font-size:.94rem;line-height:1.75;max-width:68ch}
/* Tussenkopje bínnen een onderwerp — iets bescheidener dan de kop erboven,
   zodat de rangorde meteen af te lezen is. */
.expo-inhoud>.expo-subkop{font-family:var(--body);font-weight:500;font-size:.95rem;
  letter-spacing:.02em;color:var(--text)}
.expo-inhoud>*+.expo-subkop{margin-top:2rem}
.expo-inhoud>.expo-subkop+*{margin-top:.55rem}
/* Een extra witregel in het beheerpaneel geeft ook echt extra lucht. */
.expo-inhoud>.expo-ruimte{height:0;margin-top:1.7rem}
.reps .samen{color:var(--muted);font-size:.94rem;margin:1.6rem auto 0;max-width:52ch}
.tech{position:relative;border:1px solid var(--line);border-radius:3px;padding:2.4rem;background:var(--panel);overflow:hidden;transition:.35s}
.tech:hover{border-color:rgba(201,168,106,.5)}
.tech::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:.5s;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.07) 48%,transparent 62%)}
.tech:hover::before{opacity:1}
.tech .n{font-family:var(--disp);font-style:italic;font-size:1.1rem;color:var(--gold)}
.tech h3{font-size:2rem;margin:.5rem 0 .8rem}
.tech p{color:var(--muted);font-size:.98rem}
.tech ul{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.5rem}
.tech li{font-size:.9rem;color:var(--muted);display:flex;gap:.6rem}
.tech li::before{content:"—";color:var(--gold)}

/* ---------- over ---------- */
/* Het verhaal is lang; portret bovenaan uitlijnen en meescrollen. */
/* Kop, portret en tekst staan in die volgorde in de opbouw — dat is de volgorde
   die je op een telefoon wilt lezen. De ruimte tussen de kolommen mag royaal
   zijn, tussen de rijen juist niet: anders valt de tekst op een breed scherm los
   van zijn eigen kop. */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;
  column-gap:clamp(2rem,6vw,4.5rem);row-gap:1.4rem;align-items:start}
@media(min-width:821px){
  .about-grid .portrait   {grid-column:1;grid-row:1 / span 2}
  .about-grid .about-kop  {grid-column:2;grid-row:1}
  .about-grid .about-tekst{grid-column:2;grid-row:2}
}
@media(max-width:820px){ .about-grid{row-gap:1.9rem} }
.about .portrait{position:sticky;top:6rem}
@media(max-width:820px){.about .portrait{position:static}}
.about .portrait{position:relative;border-radius:3px;overflow:hidden;border:1px solid var(--line)}
.about .portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(.15)}
.about h2{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:1.2rem}
.about h2 i{font-style:italic;color:var(--gold)}
.about p{color:var(--muted);margin-bottom:1.1rem}
.about .quote{font-family:var(--disp);font-style:italic;font-size:1.35rem;color:var(--text);border-left:2px solid var(--gold);padding-left:1.2rem;margin:1.6rem 0}
.about .sig{font-family:var(--disp);font-style:italic;color:var(--gold);font-size:1.15rem}

/* ---------- proof: galerieën + pers ---------- */
.reps{border-block:1px solid var(--line);background:var(--bg2)}
.reps .wrap{padding-block:clamp(2.4rem,5vw,3.4rem);text-align:center}
.reps p.k{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:1.4rem}
.reps .logos{display:flex;flex-wrap:wrap;gap:1rem 2.6rem;justify-content:center}
.reps .logos a{font-family:var(--disp);font-size:1.35rem;color:var(--muted);transition:.25s}
.reps .logos a:hover{color:var(--gold)}
.press{background:var(--panel)}
.press-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,4rem);align-items:center}
.press h2{font-size:clamp(2rem,4.6vw,3rem);margin-bottom:1rem}
.press p{color:var(--muted);margin-bottom:1rem}
.press .badge{display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--gold);color:var(--gold);
  padding:.5rem 1.1rem;border-radius:100px;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.2rem}
.press .art{border:1px solid var(--line);border-radius:3px;overflow:hidden}
.press .art .imgwrap{aspect-ratio:4/3}
.press .art img{width:100%;height:100%;object-fit:cover;opacity:.9}

/* ---------- contact ---------- */
.contact{background:linear-gradient(180deg,#0e0e12,var(--bg))}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,4rem)}
.contact-info h2{font-size:clamp(2.2rem,5.5vw,3.6rem);margin-bottom:1.2rem}
.contact-info h2 i{font-style:italic;color:var(--gold)}
.contact-info p{color:var(--muted);margin-bottom:1rem}
.contact-info dl{margin:1.6rem 0 0}
.contact-info dt{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:1.1rem}
.contact-info dd{margin:.2rem 0 0;font-size:1.05rem}
/* Sociale kanalen — pictogrammen in plaats van tekst, want met zes kanalen
   wordt een rij namen te lang. De SVG's erven de kleur, dus ze kleuren mee. */
.socials{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem}
.socials a{display:inline-flex;align-items:center;justify-content:center;
  width:2.4rem;height:2.4rem;border:1px solid var(--line);border-radius:50%;
  color:var(--muted);transition:color .25s,border-color .25s,transform .25s,background .25s}
.socials a:hover{color:var(--gold);border-color:rgba(201,168,106,.55);
  background:rgba(201,168,106,.07);transform:translateY(-2px)}
.socials svg{display:block}
/* in de footer iets kleiner en zonder rand, zodat het rustig blijft */
.socials-voet{margin-top:1.1rem;gap:.35rem}
.socials-voet a{width:2rem;height:2rem;border-color:transparent}
.socials-voet svg{width:17px;height:17px}
.socials-voet a:hover{border-color:rgba(201,168,106,.4)}
form{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:clamp(1.6rem,4vw,2.6rem)}
.field{margin-bottom:1.1rem}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
label{font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.5rem}
input,textarea,select{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);padding:.9rem 1rem;border-radius:2px;font-family:var(--body);font-size:.98rem;transition:.25s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,106,.14)}
textarea{min-height:110px;resize:vertical}
.err input,.err select,.err textarea{border-color:#c9614f}
.err small{color:#e0937f;font-size:.78rem;margin-top:.35rem;display:block}
.banner{padding:1.1rem 1.3rem;border-radius:2px;background:rgba(201,168,106,.1);border:1px solid rgba(201,168,106,.5);color:var(--gold-l);margin-bottom:1.3rem}
.banner b{color:var(--gold)}
.banner-fout{background:rgba(201,97,79,.12);border-color:rgba(201,97,79,.5);color:#e0937f}
.banner-fout b{color:#f0b4a1}

/* Controlevraag tegen spam: iets smaller dan de rest, het is geen echt
   invulveld maar een drempel. De vraag is een hele zin, dus niet in gesperde
   kapitalen zoals de overige labels — dat leest te moeizaam. */
.controle label{text-transform:none;letter-spacing:.01em;font-size:.9rem;color:var(--text);font-weight:400}
.controle input{max-width:16rem}
.field .hint{display:block;margin-top:.4rem;font-size:.76rem;color:var(--muted)}
/* Honeypot: onzichtbaar voor bezoekers en schermlezers, wél zichtbaar voor
   bots — die vullen het in en verraden zichzelf. Bewust géén display:none,
   want een deel van de bots slaat verborgen velden juist over. */
.veld-weg{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

footer{background:#08080a;border-top:1px solid var(--line);padding:3.4rem 0 2rem;position:relative;z-index:2}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1.6rem;align-items:flex-start}
.foot-links{display:flex;gap:1.5rem;flex-wrap:wrap}.foot-links a{color:var(--muted);font-size:.9rem}.foot-links a:hover{color:var(--gold)}
.foot dl{margin:0}.foot dt{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:.9rem}
.foot dd{margin:.2rem 0 0}
.copy{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;font-size:.78rem;color:var(--muted)}

.reveal{opacity:0;transform:translateY(26px);transition:.9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* Bij het aanklikken van een menu-item niet onder de vaste header eindigen:
   houd ruimte vrij boven elke sectie waar het menu naartoe scrollt. */
section[id],[id^="top"]{scroll-margin-top:5.5rem}

@media(max-width:980px){
  .hero .wrap{grid-template-columns:1fr;gap:2.4rem}
  .hero-art{max-width:440px}
  .tech-grid,.press-grid{grid-template-columns:1fr}
  .tech-grid.drie,.zeker-grid,.proces,.expo-lijst{grid-template-columns:1fr}
  .slist,.grid{grid-template-columns:1fr 1fr}
  .card.wide{grid-column:span 2}
}
@media(max-width:820px){
  .about-grid,.contact-grid,.grid2{grid-template-columns:1fr}
  /* Mobiel menu: schuift in van rechts, items netjes bovenaan onder het logo,
     ruime tikzones, scheidingslijnen en scrollbaar als het niet past. */
  /* Volledige hoogte gegarandeerd (100dvh = mobielvriendelijk, houdt rekening
     met de adresbalk). Expliciete zijden i.p.v. de inset-shorthand voor maximale
     compatibiliteit. Geen opacity-truc meer: items zijn altijd zichtbaar zodra
     het menu open is. */
  .menu{position:fixed;top:0;right:0;bottom:0;left:auto;height:100dvh;
    width:min(86vw,360px);background:var(--bg2);
    flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0;
    transform:translateX(100%);transition:transform .4s cubic-bezier(.3,.8,.3,1);
    border-left:1px solid var(--line);padding:5.5rem 1.6rem 2rem;z-index:var(--z-menu);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .menu.open{transform:none}
  .menu li{width:100%}
  .menu a{display:block;font-size:1.12rem;padding:.9rem .2rem;letter-spacing:.06em;color:var(--text);
    border-bottom:1px solid rgba(255,255,255,.07)}
  .menu a:hover{color:var(--gold)}
  .menu a.btn{margin-top:1.4rem;width:100%;justify-content:center;color:#0b0b0d;border-bottom:0}
  .burger{display:block}
  .hero .spot{display:none}
}
@media(max-width:560px){.slist,.grid{grid-template-columns:1fr}.card.wide{grid-column:auto}.card.wide .art .imgwrap{aspect-ratio:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto;transition:none!important}.reveal{opacity:1;transform:none}}

/* ===========================================================================
   TOEVOEGINGEN — cinematische intro, versterkte glans, techniekfilter, canvas
   =========================================================================== */

/* ---- Cinematische openingsintro ---- */
body.intro-actief{overflow:hidden}
.intro{position:fixed;inset:0;z-index:5000;background:#000;display:flex;align-items:center;justify-content:center;
  cursor:pointer;overflow:hidden;transition:opacity 1s ease}
.intro.weg{opacity:0;pointer-events:none}
/* de lichtstraal: een verticale bundel die opent en vervaagt */
.intro-straal{position:absolute;top:50%;left:50%;width:2px;height:0;
  transform:translate(-50%,-50%);border-radius:50%;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.9),rgba(201,168,106,.7),transparent);
  filter:blur(2px);opacity:0}
.intro.speelt .intro-straal{animation:straal 2.6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes straal{
  0%{height:0;opacity:0;width:2px}
  18%{height:78vh;opacity:1;width:2px}
  46%{height:78vh;opacity:.9;width:120vw;filter:blur(30px)}
  100%{height:78vh;opacity:0;width:160vw;filter:blur(60px)}
}
/* bewegende epoxy-glans over het zwarte vlak */
.intro-gloss{position:absolute;inset:-20%;opacity:0;mix-blend-mode:screen;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.14) 48%,rgba(201,168,106,.22) 52%,transparent 62%);
  background-size:280% 280%}
.intro.speelt .intro-gloss{animation:introGloss 3s ease-in-out .3s forwards}
@keyframes introGloss{0%{opacity:0;background-position:0% 0%}30%{opacity:1}100%{opacity:0;background-position:200% 200%}}
.intro-woord{position:relative;text-align:center;z-index:2}
/* Het logo. Het komt rustig op en blíjft daarna staan tot de intro wegvalt —
   'forwards' houdt de eindstand vast. Geen flits, geen blur: het logo heeft
   zijn eigen gloed en die moet je kunnen zien. */
.intro-merk{width:min(88vw,760px);height:auto;opacity:0;
  filter:drop-shadow(0 0 70px rgba(201,168,106,.30))}
.intro.speelt .intro-merk{animation:introMerk 1.5s cubic-bezier(.2,.7,.2,1) .8s forwards}
@keyframes introMerk{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
/* rustige variant bij 'verminder beweging': geen beweging, wél zichtbaar */
.intro.rustig .intro-straal,.intro.rustig .intro-gloss{display:none}
.intro.rustig .intro-merk{opacity:1;transform:none;animation:none}

/* ---- Hero: tagline + citaat ---- */
.hero-tagline{font-family:var(--disp);font-style:italic;font-size:clamp(1.25rem,3vw,1.9rem);
  color:var(--gold-l);margin:1rem 0 0;letter-spacing:.01em}
.hero-citaat{font-size:.92rem;color:var(--muted);max-width:44ch;margin:1.4rem 0 0;font-style:italic;
  padding-left:1rem;border-left:2px solid rgba(201,168,106,.4)}

/* ---- Versterkte, continu bewegende Liquid Gloss-glans op het uitgelichte werk ---- */
.plate::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.10) 47%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.10) 53%,transparent 60%);
  background-size:250% 250%;animation:glansSweep 7s ease-in-out infinite}
@keyframes glansSweep{0%{background-position:120% 0}55%{background-position:-20% 0}100%{background-position:-20% 0}}
/* collectiekaarten: subtiele glans-sweep bij hover (geen constante animatie → snel) */
.card .art::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
  opacity:0;transition:opacity .4s;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.22) 50%,transparent 58%);
  background-size:250% 250%}
.card .art:hover::before{opacity:.7;animation:glansSweep 1.6s ease forwards}

/* ---- Twee uitvoeringen: Liquid Gloss® vs Certified Art Giclée™ canvas ---- */
.uitvoeringen{padding:clamp(3rem,7vw,5rem) 0}
.uitv-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2rem);margin-top:2.4rem}
.uitv{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:clamp(1.6rem,3.5vw,2.6rem);overflow:hidden;transition:.35s}
.uitv:hover{border-color:rgba(201,168,106,.5);transform:translateY(-3px)}
.uitv::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.4;
  background:linear-gradient(120deg,transparent 45%,rgba(255,255,255,.12) 50%,transparent 55%);background-size:250% 250%;
  animation:glansSweep 9s ease-in-out infinite}
.uitv-beeld{margin:-.4rem 0 1.4rem;border-radius:4px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10}
.uitv-beeld img{width:100%;height:100%;object-fit:cover}
.uitv .k{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.uitv h3{font-size:clamp(1.4rem,3vw,2rem);margin:.5rem 0 .8rem}
.uitv p{color:var(--muted);margin:0 0 1.4rem;font-size:.95rem}
.uitv .go{display:inline-flex;align-items:center;gap:.4rem;color:var(--gold);font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid transparent;transition:.25s;cursor:pointer}
.uitv .go:hover{border-color:var(--gold)}
@media(max-width:720px){.uitv-grid{grid-template-columns:1fr}}

/* ---- Techniekfilter boven de collectie ---- */

/* techniek-badge op de kaart */
.card .meta .tech-badge{display:inline-block;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(201,168,106,.4);border-radius:99px;padding:.1rem .5rem;margin-left:.4rem}

@media (prefers-reduced-motion:reduce){.plate::before,.uitv::after{animation:none}}

/* Herinneringsbalk voor de ingelogde beheerder zolang de site in onderhoud staat. */
.onderhoud-balk{position:sticky;top:0;z-index:200;background:#c9614f;color:#fff;
  text-align:center;padding:.55rem 1rem;font-size:.82rem;letter-spacing:.02em}
.onderhoud-balk a{color:#fff;text-decoration:underline;margin-left:.4rem}

/* ---------------------------------------------------------------------------
   Aankondiging (expo, beurs, nieuwe serie) — een sectie op de homepage,
   beheerd via /admin
   --------------------------------------------------------------------------- */
.aank{padding:clamp(2.5rem,6vw,4.5rem) 0 0}
.aank-doos{position:relative;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;
  background:linear-gradient(160deg,#1b1b21,#0e0e12);border:1px solid var(--line);
  border-radius:4px;box-shadow:0 24px 70px rgba(0,0,0,.45)}
/* Een dun gouden randje links: het onderscheidt de aankondiging van de rest
   zonder dat er een kleurvlak of uitroepteken aan te pas komt. */
.aank-doos::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;z-index:1;
  background:linear-gradient(180deg,var(--gold),transparent)}
.aank-beeld{position:relative;overflow:hidden;min-height:15rem}
.aank-beeld img{width:100%;height:100%;object-fit:cover}
.aank-beeld::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 40%,rgba(11,11,13,.55))}
.aank-tekst{padding:clamp(1.6rem,4vw,2.6rem)}
.aank-k{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:0 0 .9rem}
.aank-doos h2{font-size:clamp(1.7rem,3.4vw,2.3rem);line-height:1.08;margin:0 0 1rem}
.aank-tekst p{color:var(--muted);margin:0 0 .8rem;font-size:.95rem}
.aank-knop{margin-top:1rem;padding:.85rem 1.6rem;font-size:.82rem}
/* Zonder beeld één kolom, en op smalle schermen sowieso. */
.aank-doos.aank-kaal{grid-template-columns:1fr}
@media (max-width:720px){
  .aank-doos{grid-template-columns:1fr}
  .aank-beeld{min-height:11rem;max-height:32vh}
}


/* Juridische verwijzingen onderaan (retourneren, privacy, voorwaarden). */
.voet-juridisch{display:inline-flex;flex-wrap:wrap;gap:.1rem;align-items:center}
.voet-juridisch a{color:var(--muted);transition:color .25s}
.voet-juridisch a:hover{color:var(--gold)}
.voet-juridisch i{color:var(--line);font-style:normal;margin:0 .5rem}

/* Aanklikbare contactgegevens (e-mail en telefoon). Subtiel onderstreept zodat
   het als link herkenbaar is zonder de rustige footer te verstoren. */
.contact-link{border-bottom:1px solid rgba(255,255,255,.18);transition:color .25s,border-color .25s}
.contact-link:hover{color:var(--gold);border-color:var(--gold)}

/* Ontwerpcredit onderaan — bewust ingetogen, het is een vermelding geen link
   waar de aandacht naartoe moet. */
.credit a{border-bottom:1px solid rgba(255,255,255,.16);transition:color .25s,border-color .25s}
.credit a:hover{color:var(--gold);border-color:var(--gold)}