/* Fotografiesite, in de lijn van stephanvanfleteren.com: wit, rustig, vaste zijbalk, foto's in kolommen. */
@font-face{font-family:Garamond;font-weight:400;font-display:swap;src:url(/fonts/eb-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Garamond;font-weight:500;font-display:swap;src:url(/fonts/eb-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:400;font-display:swap;src:url(/fonts/figtree-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:500;font-display:swap;src:url(/fonts/figtree-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Literata;font-weight:400;font-display:swap;src:url(/fonts/literata-400.woff2) format("woff2")}
@font-face{font-family:Fraunces;font-weight:300 700;font-display:swap;src:url(/fonts/fraunces-var.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:400;font-display:swap;src:url(/fonts/dmsans-400.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:500;font-display:swap;src:url(/fonts/dmsans-500.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:200 800;font-display:swap;src:url(/fonts/manrope-var.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(/fonts/plexmono-400.woff2) format("woff2")}
@font-face{font-family:Instrument;font-weight:400 700;font-stretch:75% 100%;font-display:swap;src:url(/fonts/instrument-sans-var.woff2) format("woff2")}
:root{--kop:var(--serif);--kop-series:var(--serif);--ink:#121212;--mid:#8d8d8d;--line:#e6e6e6;--side:340px;--pad:40px;--gap:10px;--serif:Garamond,"Minion Pro",Georgia,serif;--sans:Figtree,"Proxima Nova",system-ui,sans-serif;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:#fff;color:var(--ink);font:400 16px/1.75 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 12px;z-index:50}.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---- zijbalk ---- */
.side{position:fixed;inset:0 auto 0 0;width:var(--side);padding:var(--pad);overflow-y:auto;display:flex;flex-direction:column;background:#fff;z-index:10;scrollbar-width:none}
.side::-webkit-scrollbar{display:none}
.naam{font:500 28px/1.15 var(--kop);text-transform:uppercase;letter-spacing:.01em;text-decoration:none;display:inline-block;margin-bottom:34px}
.nav ul{list-style:none;padding:0}
.nav a{display:inline-block;text-decoration:none;color:var(--mid);font-size:16px;line-height:28px;transition:color .25s var(--ease)}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink)}
.nav-info{margin-top:26px}
.nav-info a{text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.menu-knop{display:none}
.demo{margin-top:auto;padding-top:30px;font-size:12px;color:var(--mid);letter-spacing:.04em}
main{margin-left:var(--side);padding:var(--pad) var(--pad) var(--pad) 0;min-height:100vh}

/* ---- lightbox: wit, foto groot, dunne pijlen ---- */
.lb{position:fixed;inset:0;background:#fff;z-index:100;display:grid;grid-template-columns:72px 1fr 72px;align-items:center;opacity:0;transition:opacity .3s var(--ease)}
.lb.open{opacity:1}
.lb[hidden]{display:none}
.lb-fig{grid-column:2;height:100vh;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 0 18px}
.lb-fig img{max-width:100%;max-height:calc(100dvh - 110px);width:auto;height:auto;object-fit:contain;transition:opacity .25s var(--ease)}
.lb-fig img.wissel{opacity:0}
.lb-onder{margin-top:14px;display:flex;gap:16px;align-items:baseline;justify-content:center;max-width:min(90vw,900px);text-align:center}
.lb-cap{font-size:14px;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}.lb-cap:empty{display:none}
.lb-tel{font-size:13px;color:var(--mid);letter-spacing:.06em;flex:none}
.lb button{background:none;border:0;cursor:pointer;color:var(--ink);display:grid;place-items:center;width:56px;height:56px;justify-self:center;border-radius:50%;transition:opacity .2s}
.lb button:hover{opacity:.55}
.lb svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.2}
.lb-dicht{position:absolute;top:14px;right:14px}
.lb-vorige{grid-column:1;grid-row:1}.lb-volgende{grid-column:3;grid-row:1}

/* ---- tekstpagina's ---- */
.tekst{max-width:620px;padding-top:4px}
.tekst h1{font:400 34px/1.2 var(--kop);margin-bottom:26px}
.tekst p{margin-bottom:18px;max-width:58ch}
.tekst-foto{width:100%;max-width:520px;margin-bottom:30px}
.gegevens{list-style:none;padding:0;margin:8px 0 36px;border-top:1px solid var(--line)}
.gegevens li{display:flex;align-items:center;gap:18px;padding:4px 0;min-height:52px;border-bottom:1px solid var(--line)}
.gegevens span{width:96px;flex:none;color:var(--mid);font-size:14px;text-transform:uppercase;letter-spacing:.08em;padding-top:1px}
.gegevens a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere;background:linear-gradient(var(--line),var(--line)) 0 calc(100% - 10px)/100% 1px no-repeat}.gegevens a:hover{background-image:linear-gradient(var(--ink),var(--ink))}
.formulier{display:grid;gap:16px;max-width:480px}
.formulier label{display:grid;gap:6px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--mid)}
.formulier input,.formulier textarea{font:inherit;font-size:16px;color:var(--ink);text-transform:none;letter-spacing:0;border:1px solid #cfcfcf;border-radius:0;padding:12px;background:#fff;min-height:48px}
.formulier input:focus,.formulier textarea:focus{outline:none;border-color:var(--ink)}
.formulier button{justify-self:start;font:500 13px var(--sans);text-transform:uppercase;letter-spacing:.14em;background:var(--ink);color:#fff;border:0;padding:0 26px;min-height:48px;cursor:pointer;transition:opacity .2s}
.formulier button:hover{opacity:.8}

/* ---- tablet ---- */
@media(max-width:1199px){:root{--side:280px;--pad:32px}.naam{font-size:25px}}
/* ---- mobiel: balk bovenaan, menu klapt uit ---- */
@media(max-width:860px){
  :root{--pad:20px}
  .side{position:sticky;top:0;inset:auto;width:auto;height:auto;padding:14px var(--pad);flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;overflow:visible;border-bottom:1px solid transparent;transition:border-color .3s}
  .side.scrolled{border-color:var(--line)}
  .naam{font-size:21px;margin:0;padding:8px 0}
  .menu-knop{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;background:none;border:0;font:500 13px var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--ink);cursor:pointer}
  .menu-knop .dicht,.menu-open .menu-knop .open{display:none}.menu-open .menu-knop .dicht{display:inline}
  .nav{position:fixed;inset:72px 0 0;background:#fff;padding:18px var(--pad) 40px;overflow-y:auto;visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s .25s}
  .menu-open .nav{visibility:visible;opacity:1;transform:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
  .nav a{font:400 30px/1.25 var(--kop-series);color:var(--ink);padding:6px 0;min-height:44px}
  .nav a[aria-current=page]{font-style:italic}
  .nav-info a{font:500 14px/1 var(--sans);padding:14px 0;display:inline-flex;align-items:center}
  .side .demo{display:none}
  main{margin:0;padding:6px var(--pad) var(--pad)}
  .tekst h1{font-size:30px}
  .lb{grid-template-columns:1fr}
  .lb-fig{grid-column:1;padding:56px 0 64px}
  .lb-fig img{max-height:calc(100dvh - 150px)}
  .lb-vorige,.lb-volgende{position:absolute;bottom:10px}
  .lb-vorige{left:calc(50% - 76px)}.lb-volgende{right:calc(50% - 76px)}
  .lb-onder{display:contents}
  .lb-tel{position:absolute;bottom:28px;left:0;right:0;margin:0;text-align:center}
  .lb-cap{position:absolute;bottom:66px;left:20px;right:20px;text-align:center;font-size:13px}
  .lb-fig:has(.lb-cap:not(:empty)) img{max-height:calc(100dvh - 190px)}
}


.meta-leeg{color:var(--mid)}

/* ---- opening: geen foto, alleen naam en de series ---- */
.start main.start-in{margin-left:0;width:100%}
.start-in{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:56px 24px;gap:0}
.start-naam{font:400 clamp(27px,4.444vw,64px)/1.1 var(--serif);max-width:100%;overflow-wrap:anywhere;margin-bottom:clamp(28px,6vh,56px);color:var(--ink)}
.start-series ul{list-style:none;padding:0;display:grid;gap:0}
.start-series a{display:inline-flex;align-items:center;gap:10px;min-height:44px;max-width:100%;padding:0 4px;text-decoration:none;font:500 13px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.24em;color:var(--ink);transition:color .3s var(--ease)}
.start-series a .st-tel{font:500 11px/1 var(--sans);letter-spacing:.1em;color:var(--mid);text-transform:none;transition:color .3s var(--ease)}
.st-groot .start-series a{align-items:baseline;gap:12px}.st-groot .start-series a .st-tel{font-size:12px;letter-spacing:.12em;transform:translateY(-1.1em)}
.start-series ul:hover a{color:#b9b9b9}
.start-series ul a:hover,.start-series ul a:focus-visible{color:var(--ink)}
.start-series a .st-titel{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.start-series a:hover .st-titel{background-size:100% 1px}
.start-contact{margin-top:clamp(40px,8vh,72px);font:500 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.22em;color:var(--mid);text-decoration:none;padding:16px 8px;transition:color .25s}
.start-contact:hover{color:var(--ink)}
.start-in > *{animation:op .9s var(--ease) both}.start-series{animation-delay:.12s!important}.start-contact{animation-delay:.24s!important}
@keyframes op{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- serie: één grote foto + miniaturen ---- */
.viewer{display:flex;flex-direction:column;height:calc(100vh - 2*var(--pad));height:calc(100dvh - 2*var(--pad));min-height:460px}
.v-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.v-groot{display:flex;align-items:center;justify-content:center;width:100%;height:100%;cursor:zoom-in}
.v-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:opacity .35s var(--ease)}
.v-img.wissel{opacity:0}
.v-pijl{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:72px;display:grid;place-items:center;background:none;border:0;color:var(--ink);cursor:pointer;opacity:0;transition:opacity .25s}
.v-pijl svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.2}
.v-vorige{left:0}.v-volgende{right:0}
.v-stage:hover .v-pijl,.v-pijl:focus-visible{opacity:.75}.v-pijl:hover{opacity:1!important}
.v-onder{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 16px;margin:14px auto 10px;min-height:1.4em;max-width:900px;text-align:center}
.v-cap{font-size:14px;line-height:1.4;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.v-cap:empty{display:none}
.v-tel{font-size:12px;letter-spacing:.14em;color:var(--mid);flex:none}
.v-thumbs{list-style:none;padding:2px 0 4px;margin:0;display:flex;gap:8px;justify-content:flex-start;overflow-x:auto;scrollbar-width:thin;scroll-snap-type:x proximity;flex:none}
.v-thumbs li{flex:none;scroll-snap-align:center}
/* centreren zonder dat het begin van een lange rij onbereikbaar wordt */
.v-thumbs li:first-child{margin-left:auto}.v-thumbs li:last-child{margin-right:auto}
.v-thumb{display:block;height:68px;opacity:.38;transition:opacity .25s var(--ease);outline-offset:2px}
.v-thumb img{height:100%;width:auto}
.v-thumb:hover{opacity:.8}.v-thumb[aria-current]{opacity:1}
@media(hover:none){.v-pijl{opacity:.6}}
@media(max-width:860px){
  .viewer{height:auto;min-height:0}
  .v-stage{height:min(72vh,calc(100dvh - 210px));flex:none}
  .v-pijl{width:44px;height:60px}
  .v-thumbs{justify-content:flex-start;padding-bottom:8px}
  .v-thumb{height:60px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* ---- opmaak die Pelle zelf kiest in /beheer/opmaak ----
   Vangnet: een heel lang woord op een smal scherm mag afbreken in plaats van buiten beeld te vallen. */
.start-series li{max-width:100%}
.start-series a .st-titel{min-width:0;overflow-wrap:anywhere}
/*
   Lettertype, grootte, hoofdletters en zijn eigen naamtekst komen uit /opmaak.css (door PHP gemaakt uit zijn instellingen).
   Hier alleen de plek op de pagina. */
.start-contact{margin-top:clamp(28px,6vh,56px)}
.p-links .start-in{align-items:flex-start;text-align:left;padding-left:clamp(24px,8vw,128px);padding-right:clamp(24px,8vw,128px)}
.p-rechts .start-in{align-items:flex-end;text-align:right;padding-left:clamp(24px,8vw,128px);padding-right:clamp(24px,8vw,128px)}
.p-links .start-series a,.p-links .start-contact{padding-left:0}
.p-rechts .start-series a,.p-rechts .start-contact{padding-right:0}
.p-rechts .start-series a{flex-direction:row-reverse}
.h-boven .start-in{justify-content:flex-start;padding-top:clamp(56px,14vh,140px)}
.h-onder .start-in{justify-content:flex-end;padding-bottom:clamp(56px,14vh,140px)}
.voorbeeld-balk{position:fixed;left:0;right:0;top:0;z-index:200;background:var(--ink);color:#fff;text-align:center;font:500 13px/1.4 var(--sans);padding:10px 16px}
.voorbeeld-balk a{color:#fff}