/* =========================================================
   Experimental Details — Laura Ketting
   Gedeelde stijl voor alle pagina's (index, about, 404)
   ========================================================= */

:root{
  --bg:#f2f0ec;
  --fg:#201f1c;
  --muted:#6b665d;   /* iets donkerder dan voorheen: beter leesbaar (contrast) */
  --line:#d8d4cc;
  --max-w:1100px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img, video{
  display:block;
  width:100%;
  height:auto;
}

a{ color:inherit; }

/* toegankelijk: zichtbare focus voor toetsenbordgebruikers */
a:focus-visible{ outline:2px solid var(--fg); outline-offset:3px; }

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--fg); color:var(--bg);
  padding:8px 14px; z-index:10000; font-size:13px;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---------- navigatie ---------- */
.site-nav{
  max-width:var(--max-w);
  margin:0 auto;
  padding:24px 24px 0;
  display:flex;
  justify-content:center;
  gap:28px;
}
.site-nav a{
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--muted);
  padding:4px 0;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.site-nav a:hover{ color:var(--fg); border-bottom-color:var(--fg); }
.site-nav a[aria-current="page"]{ color:var(--fg); border-bottom-color:var(--fg); }

/* ---------- header ---------- */
header.site-header{
  max-width:var(--max-w);
  margin:0 auto;
  padding:48px 24px 48px;
  text-align:center;
}

header .logo-link{ display:block; max-width:220px; width:60%; margin:0 auto 32px; }
header .logo{ width:100%; height:auto; }

header h1{
  font-size:clamp(13px, 1.6vw, 17px);
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  margin:0 0 12px;
}

header .tagline{
  font-size:14px;
  color:var(--muted);
  margin:0 auto 14px;
  max-width:520px;
  line-height:1.5;
}

header .insta{
  display:inline-block;
  font-size:14px;
  letter-spacing:0.04em;
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
header .insta:hover{ border-bottom-color:var(--muted); }

/* ---------- projecten ---------- */
main{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 24px 96px;
}

.project{ margin-bottom:88px; }

.media-wrap{
  position:relative;
  overflow:hidden;
  background:#e3e0d9;
  aspect-ratio:16 / 10;          /* reserveert ruimte → geen verspringende pagina tijdens laden */
  transform:scale(1) translateY(0);
  transition:transform .3s ease-out, box-shadow .3s ease-out;
  will-change:transform;
}

@media (hover:hover){
.media-wrap:hover{
  transform:scale(1.02) translateY(-4px);
  box-shadow:0 18px 34px -18px rgba(32,31,28,0.35);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease;
}
}

.media-wrap video,
.media-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}

.download-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  padding:10px 16px;
  border:1px solid var(--fg);
  color:var(--fg);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background .2s ease, color .2s ease;
}
.download-btn:hover{ background:var(--fg); color:var(--bg); }

.caption{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:8px 24px;
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-top:16px;
}

.caption .title{
  font-size:15px;
  font-weight:500;
  letter-spacing:0.02em;
  margin:0;
}

.caption .meta{
  font-size:13px;
  color:var(--muted);
  letter-spacing:0.02em;
  text-align:right;
  margin:0;
}

.caption .desc{
  flex-basis:100%;
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
  max-width:640px;
  margin:0;
}

/* ---------- about ---------- */
.about{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 24px 96px;
}
.about-grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:56px;
  align-items:start;
}
.about-intro{
  font-size:clamp(20px, 2.4vw, 28px);
  font-weight:400;
  line-height:1.35;
  letter-spacing:-0.005em;
  margin:0 0 28px;
}
.about p{
  font-size:15px;
  line-height:1.65;
  margin:0 0 18px;
  max-width:600px;
}
.about .motto{
  font-size:15px;
  font-style:italic;
  color:var(--muted);
  border-left:1px solid var(--fg);
  padding-left:16px;
  margin:28px 0;
}
.about h2{
  font-size:12px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  margin:48px 0 14px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.about ul{
  list-style:none;
  padding:0;
  margin:0;
  font-size:14px;
  line-height:1.9;
}
.about ul span{ color:var(--muted); }
.about .contact-links a{
  text-decoration:none;
  border-bottom:1px solid var(--line);
  transition:border-color .2s ease;
}
.about .contact-links a:hover{ border-bottom-color:var(--fg); }
.about figure{ margin:0; position:sticky; top:32px; }
.about figcaption{ font-size:12px; color:var(--muted); margin-top:10px; }

/* ---------- footer ---------- */
footer{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 24px 64px;
  text-align:center;
  font-size:12px;
  color:var(--muted);
  letter-spacing:0.04em;
}
footer a{ text-decoration:none; }
footer a:hover{ text-decoration:underline; }

@media (max-width:760px){
  .about-grid{ grid-template-columns:1fr; gap:36px; }
  .about figure{ position:static; }
}

@media (max-width:600px){
  header.site-header{ padding:36px 20px 32px; }
  .project{ margin-bottom:56px; }
  .caption{ flex-direction:column; }
  .caption .meta{ text-align:left; }
}

/* minder beweging voor mensen die dat in hun systeem hebben ingesteld */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .media-wrap, .media-wrap:hover{ transition:none; transform:none; }
}

/* ---------- custom "A" cursor ---------- */
/* Alleen op apparaten met een echte muis (pointer:fine) */
@media (pointer:fine){
  body{ cursor:none; }
  a, button, .media-wrap{ cursor:none; }

  #cursor{
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
    pointer-events:none;
    font-family:'Inter', Arial, sans-serif;
    font-weight:800;
    font-size:22px;
    line-height:1;
    color:#0a0a08;
    -webkit-text-stroke:3px #ffffff;
    paint-order:stroke fill;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,0.35));
    transform:translate(-50%,-50%);
    opacity:0;
    transition:opacity .2s ease;
  }
  #cursor.visible{ opacity:1; }
}
@media (pointer:coarse){ #cursor{ display:none; } }

/* ---------- more work: grid ---------- */
.more-work{ padding-top:24px; }
.section-title{
  font-size:12px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  text-align:center;
  margin:0 0 20px;
}
.filters{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin:0 0 40px;
}
.filter{
  font:inherit;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  background:transparent;
  border:1px solid var(--line);
  padding:8px 14px;
  border-radius:999px;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
@media (hover:hover){ .filter:hover{ color:var(--fg); border-color:var(--fg); } }
.filter.is-active{ background:var(--fg); border-color:var(--fg); color:var(--bg); }
.filter:focus-visible, .tile-btn:focus-visible{ outline:2px solid var(--fg); outline-offset:3px; }

.grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:40px 24px;
}
.tile[hidden]{ display:none; }
.tile-btn{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:#e3e0d9;
  aspect-ratio:1 / 1;
  overflow:hidden;
  transition:transform .3s ease-out, box-shadow .3s ease-out;
}
@media (hover:hover){
.tile-btn:hover{
  transform:scale(1.02) translateY(-4px);
  box-shadow:0 18px 34px -18px rgba(32,31,28,0.35);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease;
}
}
.tile-btn img{ width:100%; height:100%; object-fit:cover; }
.tile-title{
  font-size:14px;
  font-weight:500;
  letter-spacing:0.02em;
  margin:12px 0 2px;
}
.tile-cats{ font-size:12px; color:var(--muted); margin:0; }

@media (max-width:760px){
  .grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 14px; }
  .tile-title{ font-size:13px; }
  .tile-cats{ font-size:11px; }
}

/* ---------- lightbox ---------- */
.lightbox{
  border:0;
  padding:0;
  margin:0;
  width:100vw;
  height:100vh;
  max-width:100vw;
  max-height:100vh;
  background:var(--bg);
  color:var(--fg);
}
.lightbox::backdrop{ background:rgba(32,31,28,0.6); }
.lb-inner{
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  gap:48px;
  align-items:center;
  padding:64px 88px;
  overflow:auto;
}
.lb-media{ margin:0; height:100%; display:flex; align-items:center; justify-content:center; min-height:0; }
.lb-media img{ max-width:100%; max-height:calc(100vh - 128px); width:auto; height:auto; object-fit:contain; }
.lb-text h2{ font-size:20px; font-weight:500; margin:0 0 6px; }
.lb-cats{ font-size:12px; color:var(--muted); letter-spacing:0.04em; margin:0 0 20px; }
#lb-desc p{ font-size:14px; line-height:1.65; margin:0 0 14px; }
#lb-desc .tile-sub{ font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.lb-close, .lb-nav{
  position:absolute;
  z-index:2;
  font:inherit;
  font-size:22px;
  line-height:1;
  background:transparent;
  border:0;
  color:var(--fg);
  padding:12px;
}
.lb-close{ top:12px; right:16px; font-size:30px; }
.lb-prev{ left:16px; top:50%; transform:translateY(-50%); }
.lb-next{ right:16px; top:50%; transform:translateY(-50%); }

@media (max-width:760px){
  .lb-inner{ grid-template-columns:1fr; gap:20px; padding:56px 20px 72px; align-items:start; align-content:start; }
  .lb-media{ height:auto; }
  .lb-media img{ max-height:60vh; }
  .lb-prev, .lb-next{ top:auto; bottom:12px; transform:none; background:var(--bg); }
}
@media (pointer:fine){ .filter, .tile-btn, .lb-close, .lb-nav{ cursor:none; } }

/* ---------- cookiebanner ---------- */
.cookie-banner{
  position:fixed;
  left:max(16px, env(safe-area-inset-left, 0px));
  right:max(16px, env(safe-area-inset-right, 0px));
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  z-index:9000;
  max-width:520px;
  margin:0 auto;
  background:var(--bg);
  color:var(--fg);
  border:1px solid var(--fg);
  padding:16px 18px;
  box-shadow:0 18px 34px -18px rgba(32,31,28,0.35);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner p{ margin:0; font-size:13px; line-height:1.5; }
.cookie-actions{ display:flex; gap:8px; justify-content:flex-end; }
.cookie-btn{
  font:inherit;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:9px 16px;
  border:1px solid var(--fg);
  background:transparent;
  color:var(--fg);
}
.cookie-accept{ background:var(--fg); color:var(--bg); }
.cookie-btn:hover{ opacity:.8; }
.cookie-btn:focus-visible{ outline:2px solid var(--fg); outline-offset:3px; }
@media (pointer:fine){ .cookie-btn{ cursor:none; } }

.site-nav a{ white-space:nowrap; }
@media (max-width:480px){
  .site-nav{ gap:16px; flex-wrap:wrap; }
  .site-nav a{ font-size:11px; letter-spacing:0.1em; }
}

@media (max-width:360px){
  .site-nav{ gap:12px; }
  .site-nav a{ font-size:10px; letter-spacing:0.08em; }
}
/* tikken voelt direct op telefoons */
a, button{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }