/* ==================================================================
   Galerij-stijl. Deze stylesheet bevat GEEN vaste maten of kleuren die
   de klant zou willen veranderen — alleen variabelen die theme.js zet.
   Dat is de reden dat de live editor kan werken zonder de pagina te
   herladen, en straks dat elke tenant zijn eigen uiterlijk krijgt.
   ================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
/* De ruimte voor de schuifbalk altijd vrijhouden. Masonry meet de
   breedte van het raster om zijn vakjes te plaatsen, dus een balk die
   tijdens het opbouwen verschijnt zou de plaatsing net verkeerd maken —
   en het scheelt bovendien een sprong bij het openen van de lightbox. */
html{ scrollbar-gutter:stable; }
body{
  background:var(--g-bg); color:var(--g-fg);
  font-family:var(--g-font-ui);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .3s, color .3s;
}
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:root{ --ease:cubic-bezier(.22,.61,.36,1); }

.wrap{ max-width:1680px; margin:0 auto; padding:0 var(--g-margin); }

/* ============================ WACHTWOORDSCHERM ============================ */
#gate{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:#0d0d0f;
  transition:opacity .7s var(--ease), visibility .7s; }
#gate.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
#gate .bg{ position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:.42; filter:blur(3px) saturate(.85); transform:scale(1.06); }
#gate .veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,8,10,.5),rgba(8,8,10,.78)); }
.gate-card{ position:relative; text-align:center; color:#fff; padding:32px; width:min(440px,90vw); }
.gate-card[hidden]{ display:none; }
.gate-brand{ font-size:11px; letter-spacing:.42em; text-transform:uppercase; opacity:.7; margin-bottom:38px; font-weight:500; }
.gate-brand img{ display:block; margin:0 auto; height:auto; width:auto;
  max-height:44px; max-width:min(260px,64vw); }
.gate-card h1{ font-family:var(--g-font-display); font-weight:400; margin:0 0 10px; line-height:1.15;
  font-size:calc(clamp(30px,5vw,44px) * var(--g-title-scale)); }
.gate-card .sub{ font-size:13.5px; opacity:.6; margin:0 0 34px; }
.gate-form{ display:flex; flex-direction:column; gap:10px; }
.gate-form input{ font:inherit; font-size:15px; text-align:center; letter-spacing:.06em; padding:15px 16px;
  border-radius:2px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.06); color:#fff;
  transition:border-color .25s, background .25s; }
.gate-form input::placeholder{ color:rgba(255,255,255,.45); letter-spacing:.02em; }
.gate-form input:focus{ outline:none; border-color:rgba(255,255,255,.75); background:rgba(255,255,255,.11); }
.gate-form button{ padding:15px; border-radius:2px; background:#fff; color:#111; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; font-weight:600; transition:opacity .2s; }
.gate-form button:hover{ opacity:.85; }
.gate-err{ min-height:18px; font-size:12.5px; color:#ff9d9d; margin-top:10px; }

/* ============================ KOPBALK ============================ */
header{ position:sticky; top:0; z-index:90; background:var(--g-veil);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s; }
header.stuck{ border-bottom-color:var(--g-line); }
.bar{ height:62px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{ font-size:12px; letter-spacing:.4em; font-weight:600; text-transform:uppercase; }
/* Een logo mag de balk niet uit elkaar duwen: hij houdt zijn verhouding en
   past zich aan de hoogte van de regel aan, net als de merknaam. */
.brand img{ display:block; height:auto; width:auto; max-height:30px; max-width:min(240px,42vw); }
/* Staat er een website ingesteld, dan is het merk de weg terug naar de
   fotograaf. Hij ziet eruit als het merk, niet als een link — pas bij
   aanwijzen laat hij merken dat er iets achter zit. */
.brandlink{ display:inline-block; color:inherit; text-decoration:none;
  transition:opacity .2s; }
.brandlink:hover{ opacity:.62; }
.bar-actions{ display:flex; align-items:center; gap:4px; }
.act{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:2px;
  font-size:12.5px; color:var(--g-muted); transition:color .2s, background .2s; white-space:nowrap; }
.act:hover{ color:var(--g-fg); background:var(--g-shade); }
.act svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; }
.act .count{ min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--g-accent);
  color:#fff; font-size:10.5px; font-weight:600; display:inline-grid; place-items:center; line-height:1; }
.act.primary{ color:var(--g-fg); border:1px solid var(--g-line); }
.act.primary:hover{ background:var(--g-accent); color:#fff; border-color:var(--g-accent); }
@media (max-width:640px){ .act .lbl{ display:none; } .act{ padding:9px 10px; } }

/* ============================ COVER ============================ */
.cover{ position:relative; overflow:hidden; background:#111; height:var(--g-cover-h); }
/* Nog geen cover en nog geen foto's: dan geen zwart vlak van 78% van het
   scherm, maar alleen de titel op de achtergrondkleur. */
.cover.leeg{ height:auto; background:none; padding:clamp(60px,9vw,130px) var(--g-margin) 0; }
.cover.leeg::after{ display:none; }
.cover.leeg .cover-txt{ position:static; transform:none; color:var(--g-fg); padding:0; }
.cover.leeg .cover-txt h1{ text-shadow:none; }
.cover .shot{ position:absolute; inset:0; }
.cover .shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cover .shot .ph{ filter:blur(22px); transform:scale(1.12); }
.cover .shot .full{ opacity:0; transition:opacity .75s var(--ease); }
.cover .shot .full.ready{ opacity:1; }
.cover .slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.6s var(--ease); }
.cover .slide.on{ opacity:1; }
.cover::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,calc(var(--g-overlay) * .9)) 0%,
    rgba(0,0,0,calc(var(--g-overlay) * .2)) 42%,
    rgba(0,0,0,calc(var(--g-overlay) * 1.6)) 100%); }
.cover-txt{ position:absolute; left:0; right:0; z-index:2; text-align:center; color:#fff; padding:0 24px; }
.cover[data-pos="bottom"] .cover-txt{ bottom:0; padding-bottom:calc(28px + 2vw); }
.cover[data-pos="center"] .cover-txt{ top:50%; transform:translateY(-50%); }
.cover-txt .eyebrow{ font-size:10.5px; letter-spacing:.34em; text-transform:uppercase; opacity:.82; margin-bottom:16px; }
.cover-txt h1{ font-family:var(--g-font-display); font-weight:400; margin:0; line-height:1.08;
  font-size:calc(clamp(34px,6.2vw,68px) * var(--g-title-scale)); text-shadow:0 2px 30px rgba(0,0,0,.28); }
.cover-txt .meta{ margin-top:14px; font-size:13px; opacity:.78; }

/* Variant: foto binnen een kader, tekst eronder op de achtergrondkleur */
.cover.framed{ height:auto; background:none; padding:clamp(24px,4vw,60px) var(--g-margin) 0; }
.cover.framed .shot{ position:relative; height:calc(var(--g-cover-h) * .82); }
.cover.framed::after{ display:none; }
.cover.framed .cover-txt{ position:static; transform:none; color:var(--g-fg);
  padding:clamp(22px,3vw,34px) 0 0; }
.cover.framed .cover-txt h1{ text-shadow:none; }

/* Variant: titel bóven de foto */
.cover.above{ height:auto; background:none; padding:clamp(46px,7vw,96px) var(--g-margin) 0;
  display:flex; flex-direction:column; }
.cover.above::after{ display:none; }
.cover.above .cover-txt{ position:static; transform:none; color:var(--g-fg); order:-1;
  padding:0 0 clamp(26px,3.5vw,42px); }
.cover.above .cover-txt h1{ text-shadow:none; }
.cover.above .shot{ position:relative; height:calc(var(--g-cover-h) * .78); }

/* Variant: geen cover, alleen een titelblok */
.cover.none{ height:auto; background:none; padding:clamp(60px,9vw,130px) var(--g-margin) 0; }
.cover.none::after{ display:none; }
.cover.none .shot, .cover.none .slide{ display:none; }
.cover.none .cover-txt{ position:static; transform:none; color:var(--g-fg); padding:0; }
.cover.none .cover-txt h1{ text-shadow:none; }

/* ============================ HOOFDSTUK-NAV ============================ */
.chapnav{ position:sticky; top:62px; z-index:80; background:var(--g-veil);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--g-line); }
.chapnav .inner{ display:flex; gap:30px; overflow-x:auto; scrollbar-width:none; height:52px;
  align-items:center; justify-content:center; }
.chapnav .inner::-webkit-scrollbar{ display:none; }
.chapnav a{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
  color:var(--g-muted); white-space:nowrap; padding:4px 0; border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s; }
.chapnav a:hover{ color:var(--g-fg); }
.chapnav a.on{ color:var(--g-fg); border-bottom-color:var(--g-fg); }
@media (max-width:700px){ .chapnav .inner{ justify-content:flex-start; gap:22px; } }

/* ============================ SECTIES ============================ */
main{ padding-bottom:120px; }
section{ padding-top:var(--g-section-gap); scroll-margin-top:118px; }
/* Zonder scenes staat er niets tussen de cover en de foto's; dan
   hoeft er ook geen ruimte voor een kop vrijgehouden te worden. */
section.untitled{ padding-top:clamp(28px,4vw,56px); }
body.no-chapnav .chapnav{ display:none; }
.sec-head{ text-align:center; margin-bottom:clamp(22px,3vw,38px); }
.sec-head h2{ font-family:var(--g-font-display); font-weight:400; margin:0 0 8px;
  font-size:clamp(22px,3vw,30px); text-transform:var(--g-caps); letter-spacing:var(--g-caps-track); }
.sec-head .n{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--g-muted); }

/* ============================ RASTERS ============================ */
.grid{ display:flex; flex-wrap:wrap; gap:var(--g-gap); }
.grid.columns{ display:grid; grid-template-columns:repeat(var(--cols),1fr); }
/* Masonry rekent zijn plaatsing in JS uit, omdat brede foto's niet in
   een kolom passen. Vandaar één vlak met absoluut gezette vakjes. */
.grid.masonry{ display:block; position:relative; }
.grid.masonry .cell{ position:absolute; }

.cell{ position:relative; overflow:hidden; background:var(--g-shade); cursor:zoom-in; flex:0 0 auto; }
.grid.columns .cell{ width:auto; aspect-ratio:var(--ratio); }

/* Twee lagen: de vervaagde voorvertoning die er meteen staat, en de
   scherpe foto die eroverheen komt zodra hij binnen is. Beide absoluut,
   zodat het vakje zijn maat kent voordat er iets geladen is. */
.cell img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cell .ph{ filter:blur(14px); transform:scale(1.14); transition:opacity .55s var(--ease) .06s; }
.cell.loaded .ph{ opacity:0; }
.cell .full{ opacity:0; transition:transform .85s var(--ease), opacity .5s var(--ease); }
.cell .full.ready{ opacity:1; }
.cell.failed .ph{ filter:blur(14px) grayscale(1) brightness(.7); }
.cell.failed::before{ content:"Niet geladen"; position:absolute; inset:auto 0 50% 0; z-index:5;
  text-align:center; font-size:11px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); }

[data-hover="zoom"] .cell:hover .full{ transform:scale(1.028); }
[data-hover="fade"] .cell:hover .full{ opacity:.72; }
[data-hover="lift"] .cell{ transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
[data-hover="lift"] .cell:hover{ transform:translateY(-5px); box-shadow:0 16px 40px rgba(0,0,0,.16); }

.cell::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s;
  background:linear-gradient(180deg,rgba(0,0,0,.16) 0%,transparent 26%,transparent 62%,rgba(0,0,0,.3) 100%); }
.cell:hover::after, .cell.faved::after{ opacity:1; }

.fname{ position:absolute; left:10px; bottom:9px; z-index:3; font-size:10.5px; letter-spacing:.06em;
  color:rgba(255,255,255,.9); opacity:0; transform:translateY(4px);
  transition:opacity .28s, transform .28s; text-shadow:0 1px 6px rgba(0,0,0,.5); pointer-events:none; }
.cell:hover .fname{ opacity:1; transform:none; }
.no-fname .fname{ display:none; }

.heart{ position:absolute; top:8px; right:8px; z-index:4; width:34px; height:34px; display:grid;
  place-items:center; border-radius:50%; opacity:0; transform:scale(.85);
  transition:opacity .25s, transform .25s, background .2s; }
.cell:hover .heart, .heart.on{ opacity:1; transform:none; }
.heart:hover{ background:rgba(0,0,0,.22); }
.heart svg{ width:20px; height:20px; fill:none; stroke:#fff; stroke-width:1.7;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.5)); transition:fill .25s; }
.heart.on svg{ fill:#fff; }
.heart.pop svg{ animation:pop .42s var(--ease); }
@keyframes pop{ 0%{transform:scale(1)} 35%{transform:scale(1.42)} 100%{transform:scale(1)} }
@media (hover:none){ .heart{ opacity:1; transform:none; } .fname{ display:none; } }

/* ============================ LIGHTBOX ============================ */
#lb{ position:fixed; inset:0; z-index:150; background:var(--g-lb-bg); color:var(--g-lb-fg);
  display:none; opacity:0; transition:opacity .3s var(--ease); }
#lb.open{ display:block; } #lb.show{ opacity:1; }
#lb .stage{ position:absolute; inset:64px 0 76px; display:grid; place-items:center; padding:0 clamp(8px,5vw,88px); }
/* De vorm van de foto is bekend, dus het kader houdt zijn verhouding al
   vóórdat het bestand binnen is — het blijft alleen leeg. Geen vervaagde
   versie eronder: hier hoort de foto op een effen vlak te staan, en tot
   die er is vertelt de balk bovenin hoe lang het nog duurt. */
.lb-shot{ position:relative; height:100%; max-width:100%; aspect-ratio:var(--ar,3/2); }
.lb-shot img{ position:absolute; inset:0; width:100%; height:100%; }
/* Schaduw op de foto zelf, niet op het kader — dan fadet hij mee in en
   staat er tijdens het laden geen zwevende rechthoek. */
.lb-shot .full{ object-fit:contain; opacity:0; transition:opacity .4s var(--ease);
  box-shadow:0 24px 80px rgba(0,0,0,.35); }
.lb-shot .full.ready{ opacity:1; }

/* Echte voortgang: gevoed door de bytes die binnenkomen, niet door een
   animatie die maar wat doet. */
.lbbar{ position:absolute; top:0; left:0; right:0; height:2px; z-index:5;
  background:rgba(128,128,128,.2); }
.lbbar i{ display:block; height:100%; width:0; background:currentColor;
  transition:width .15s linear, opacity .5s .3s; }
.lbbar i.done{ opacity:0; }
#lb .top{ position:absolute; top:0; left:0; right:0; height:64px; display:flex; align-items:center;
  justify-content:space-between; padding:0 clamp(12px,3vw,26px); }
#lb .file{ font-size:12px; letter-spacing:.08em; opacity:.62; }
.no-fname #lb .file{ visibility:hidden; }
#lb .tools{ display:flex; align-items:center; gap:2px; }
.lbtn{ width:42px; height:42px; display:grid; place-items:center; border-radius:2px; opacity:.72;
  transition:opacity .2s, background .2s; }
.lbtn:hover{ opacity:1; background:rgba(128,128,128,.18); }
.lbtn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; }
.lbtn.faved svg{ fill:currentColor; }
#lb .nav{ position:absolute; top:50%; transform:translateY(-50%); width:56px; height:76px;
  display:grid; place-items:center; opacity:.45; transition:opacity .2s; }
#lb .nav:hover{ opacity:1; }
#lb .nav.prev{ left:6px; } #lb .nav.next{ right:6px; }
#lb .nav svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.3; }
#lb .foot{ position:absolute; bottom:0; left:0; right:0; height:76px; display:flex;
  align-items:center; justify-content:center; }
#lb .idx{ font-size:11.5px; letter-spacing:.2em; opacity:.5; }
@media (max-width:700px){ #lb .stage{ inset:56px 0 70px; padding:0 6px; } #lb .nav{ width:44px; } }

/* ============================ ZIJPANEEL ============================ */
#panel{ position:fixed; top:0; right:0; bottom:0; width:min(430px,100vw); z-index:160;
  background:var(--g-bg); border-left:1px solid var(--g-line); transform:translateX(100%);
  transition:transform .45s var(--ease); display:flex; flex-direction:column;
  box-shadow:-20px 0 60px rgba(0,0,0,.07); }
#panel.open{ transform:none; }
#scrim{ position:fixed; inset:0; z-index:155; background:rgba(12,12,14,.32); opacity:0;
  visibility:hidden; transition:opacity .4s, visibility .4s; }
#scrim.on{ opacity:1; visibility:visible; }
.p-head{ padding:22px 24px 0; display:flex; justify-content:space-between; align-items:flex-start; }
.p-head h3{ font-family:var(--g-font-display); font-weight:400; font-size:21px; margin:0; }
.p-head p{ margin:5px 0 0; font-size:12.5px; color:var(--g-muted); }
.p-close{ width:34px; height:34px; display:grid; place-items:center; color:var(--g-muted); margin:-6px -8px 0 0; }
.p-close:hover{ color:var(--g-fg); }
.p-close svg{ width:17px; height:17px; stroke:currentColor; stroke-width:1.6; fill:none; }
.tabs{ display:flex; gap:24px; padding:20px 24px 0; border-bottom:1px solid var(--g-line); }
.tab{ padding-bottom:12px; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--g-muted); border-bottom:1px solid transparent; margin-bottom:-1px;
  transition:color .2s, border-color .2s; }
.tab:hover{ color:var(--g-fg); }
.tab.on{ color:var(--g-fg); border-bottom-color:var(--g-fg); }
.tab .b{ font-size:10.5px; color:var(--g-muted); margin-left:5px; }
.p-body{ flex:1; overflow-y:auto; padding:20px 24px 24px; }
.p-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.p-thumb{ position:relative; aspect-ratio:1; overflow:hidden; background:var(--g-shade); }
.p-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.p-thumb .ph{ filter:blur(10px); transform:scale(1.15); }
.p-thumb .full{ opacity:0; transition:opacity .4s; }
.p-thumb .full.ready{ opacity:1; }
.p-thumb button{ position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; display:grid; place-items:center; opacity:0; transition:opacity .2s; }
.p-thumb:hover button{ opacity:1; }
.p-thumb button svg{ width:11px; height:11px; stroke:currentColor; stroke-width:2; fill:none; }
.p-empty{ text-align:center; padding:56px 20px; color:var(--g-muted); }
.p-empty svg{ width:30px; height:30px; stroke:currentColor; stroke-width:1.2; fill:none; opacity:.4; margin-bottom:14px; }
.p-empty p{ font-size:13px; line-height:1.65; margin:0; }
.p-foot{ border-top:1px solid var(--g-line); padding:16px 24px; display:flex; flex-direction:column; gap:8px; }

.btn{ display:flex; align-items:center; justify-content:center; gap:9px; padding:13px 18px;
  border-radius:2px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  transition:opacity .2s, background .2s, color .2s; }
.btn svg{ width:15px; height:15px; stroke:currentColor; stroke-width:1.7; fill:none; }
.btn-solid{ background:var(--g-accent); color:#fff; }
.btn-solid:hover{ opacity:.84; }
.btn-ghost{ border:1px solid var(--g-line); color:var(--g-muted); }
.btn-ghost:hover{ color:var(--g-fg); border-color:var(--g-fg); }

/* ============================ DOWNLOAD-VENSTER ============================ */
#dl{ position:fixed; inset:0; z-index:170; display:none; place-items:center; padding:20px;
  background:rgba(12,12,14,.42); opacity:0; transition:opacity .3s; }
#dl.open{ display:grid; } #dl.show{ opacity:1; }
.dl-card{ background:var(--g-bg); width:min(440px,100%); padding:30px; transform:translateY(10px);
  transition:transform .35s var(--ease); }
#dl.show .dl-card{ transform:none; }
.dl-card h3{ font-family:var(--g-font-display); font-weight:400; font-size:22px; margin:0 0 6px; }
.dl-card > p{ margin:0 0 24px; font-size:13px; color:var(--g-muted); }
.opt{ display:flex; gap:13px; align-items:flex-start; padding:15px 16px; margin-bottom:8px;
  border:1px solid var(--g-line); cursor:pointer; text-align:left; width:100%;
  transition:border-color .2s, background .2s; }
.opt:hover{ border-color:var(--g-muted); }
.opt.on{ border-color:var(--g-accent); background:var(--g-shade); }
.dot{ flex:0 0 auto; width:16px; height:16px; border-radius:50%; margin-top:2px;
  border:1px solid var(--g-muted); position:relative; }
.opt.on .dot{ border-color:var(--g-accent); }
.opt.on .dot::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--g-accent); }
.opt .t{ font-size:13.5px; font-weight:500; margin-bottom:3px; display:block; }
.opt .d{ font-size:12px; color:var(--g-muted); line-height:1.5; display:block; }
.dl-actions{ display:flex; gap:8px; margin-top:22px; }
.dl-actions .btn{ flex:1; }
.lblrow{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--g-muted);
  margin:0 0 9px; }
.btn:disabled{ opacity:.35; cursor:not-allowed; }

/* Inpakken van een ZIP: een determinate balk, want we weten hoeveel
   bestanden er zijn en hoeveel er al verwerkt zijn. */
.prog{ height:3px; background:var(--g-line); overflow:hidden; margin:20px 0 9px; }
.prog i{ display:block; height:100%; background:var(--g-accent); transition:width .18s linear; }
.prog i.ok{ background:#3f9d5c; }
.progtxt{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--g-muted);
  font-variant-numeric:tabular-nums; }

/* ============================ TOAST ============================ */
#toast{ position:fixed; left:50%; bottom:30px; transform:translate(-50%,20px); z-index:190;
  background:#16161a; color:#fff; padding:13px 22px; font-size:13px; opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s var(--ease); max-width:90vw; text-align:center; }
#toast.on{ opacity:1; transform:translate(-50%,0); }

/* ============================ VOET ============================
   Jouw regel links, op één lijn met het logo bovenaan — daarom staat de
   inhoud in .wrap, met dezelfde marge. Je kanalen rechts; heb je er geen,
   dan staat de tekst alleen en blijft de rij weg. */
footer{ border-top:1px solid var(--g-line); padding:38px 0 54px;
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--g-muted); }
.foot-in{ display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap; }
.foot-txt{ letter-spacing:.2em; }
.foot-soc{ display:flex; align-items:center; gap:2px; margin-right:-9px; }
.foot-soc a{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  color:var(--g-muted); transition:color .2s, background .2s; }
.foot-soc a:hover{ color:var(--g-fg); background:var(--g-shade); }
.foot-soc svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:560px){
  .foot-in{ flex-direction:column; align-items:flex-start; gap:14px; }
  .foot-soc{ margin-left:-9px; margin-right:0; }
}

/* In de editor-voorvertoning geen wachtwoordscherm en geen mockup-melding */
body.preview #gate{ display:none; }

/* Dichte deur: galerij bestaat niet of staat nog in concept. Zelfde
   toon als het wachtwoordscherm, zonder formulier. */
#closed{ position:fixed; inset:0; z-index:210; display:grid; place-items:center;
  background:#0d0d0f; color:#fff; text-align:center; padding:24px; }
#closed[hidden]{ display:none; }
#closed .gate-brand{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; opacity:.6; }
#closed h1{ font-family:ui-serif,Georgia,serif; font-weight:400; margin:14px 0 10px;
  font-size:clamp(26px,5vw,40px); }
#closed .sub{ font-size:13.5px; line-height:1.7; opacity:.65; max-width:400px; margin:0 auto; }