/* ==========================================================================
   FOTOGRAFIE-pagina — eigen opmaak bovenop de tokens uit site.css
   Vol beeld, weinig tekst, zwart. Het beeld doet het werk.
   ========================================================================== */

body.foto{ background:#000; }
body.foto::after{ opacity:calc(var(--grain) * .5); }   /* minder korrel over foto's */

/* ---------- kop van de pagina ---------- */
.f-top{ padding-block:clamp(120px,14vh,190px) clamp(40px,6vw,70px); }
.f-top h1{
  font-family:var(--font-display); font-weight:var(--display-weight);
  text-transform:uppercase; letter-spacing:var(--display-track);
  line-height:.92; margin:0; font-size:clamp(46px,11vw,150px); color:var(--ink);
}
.f-sub{ margin-top:22px; max-width:56ch; font-size:clamp(15px,1.4vw,18px);
  line-height:1.6; color:var(--ink-dim); }

/* ---------- index ---------- */
.f-index{ margin-top:clamp(44px,6vw,80px); border-top:1px solid var(--line); }
.f-ix{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:20px; align-items:baseline;
  padding:clamp(15px,2vw,22px) 0; border-bottom:1px solid var(--line);
  transition:padding-left .35s, color .3s; color:var(--ink);
}
.f-ix:hover{ padding-left:14px; color:var(--accent); }
.f-ix .n{ font-size:11px; letter-spacing:.2em; color:var(--ink-dim); }
.f-ix .t{ font-family:var(--font-display); font-size:clamp(20px,2.6vw,34px); letter-spacing:.01em; }
.f-ix .c{ font-size:13px; color:var(--ink-dim); text-align:right; }
.f-ix .y{ font-size:13px; color:var(--ink-dim); white-space:nowrap; min-width:8ch; text-align:right; }
@media(max-width:700px){
  .f-ix{ display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 12px; }
  .f-ix .t{ flex:1 1 auto; }
  .f-ix .n{ flex:0 0 auto; }
  .f-ix .c,.f-ix .y{ font-size:12px; text-align:left; min-width:0; }
  .f-ix .c{ margin-left:calc(2ch + 12px); }
}

/* ---------- een serie ---------- */
.serie{ padding:clamp(70px,11vw,150px) 0 0; scroll-margin-top:80px; }
.s-head{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px;
  align-items:end; padding-bottom:clamp(20px,3vw,34px); border-bottom:1px solid var(--line); }
.s-head h2{
  font-family:var(--font-display); font-weight:var(--display-weight);
  text-transform:uppercase; letter-spacing:var(--display-track); line-height:.95;
  margin:0; font-size:clamp(30px,6.5vw,86px); color:var(--ink);
}
.s-meta{ font-size:13px; color:var(--ink-dim); text-align:right; line-height:1.7; white-space:nowrap; }
.s-intro{ margin:clamp(20px,3vw,30px) 0 0; max-width:62ch;
  font-size:clamp(15px,1.35vw,17.5px); line-height:1.6; color:var(--ink-dim); }
@media(max-width:700px){
  .s-head{ grid-template-columns:1fr; align-items:start; }
  .s-meta{ text-align:left; white-space:normal; }
}

/* ---------- de beelden ---------- */
.shots{ margin-top:clamp(30px,4.5vw,60px); display:flex; flex-direction:column;
  gap:clamp(14px,2.4vw,34px); }
.shot-f{ margin:0 auto; position:relative; background:#0A0A0C; overflow:hidden; width:100%; }
/* nooit groter dan het origineel, en altijd in één keer in beeld (max 88% schermhoogte) */
.shot-f[style*="--w"]{
  width:min(100%, calc(var(--w) * 1px), calc(88vh * var(--w) / var(--h)));
  aspect-ratio:var(--w) / var(--h);
}
.shot-f img{
  width:100%; height:auto; display:block;
  opacity:0; transform:scale(1.02);
  transition:opacity 1s cubic-bezier(.2,.7,.3,1), transform 1.4s cubic-bezier(.2,.7,.3,1);
}
.shot-f img.on{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  .shot-f img{ opacity:1; transform:none; transition:none; }
}
/* klikbaar: volledig scherm */
.shot-f{ cursor:zoom-in; }

/* ---------- terug naar index ---------- */
.f-back{ display:inline-flex; align-items:center; gap:9px;
  margin-top:clamp(26px,3.5vw,40px); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-dim); transition:color .25s; }
.f-back:hover{ color:var(--ink); }
.f-back::before{ content:"\2191"; font-size:14px; }

/* ---------- onderaan ---------- */
.f-end{ padding-block:clamp(80px,12vw,160px) clamp(60px,8vw,110px); text-align:center;
  border-top:1px solid var(--line); margin-top:clamp(70px,10vw,130px); }
.f-end p{ color:var(--ink-dim); font-size:clamp(15px,1.4vw,18px); max-width:48ch; margin:0 auto 26px; }

/* ---------- lege staat ---------- */
.f-empty{ border:1px dashed var(--line); border-radius:var(--radius);
  padding:60px 26px; text-align:center; color:var(--ink-dim); font-size:14px; }