/* Stijl voor de losse case- en tekstpagina's. Dezelfde merkvariabelen en
   dezelfde regels als het projectvenster op de homepage, zodat een case er
   hetzelfde uitziet of je hem nu in het venster of op zijn eigen adres opent. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

:root{
  --bg:#FAF6F0;--surface:#FAF6F0;--text:#3B2F2A;--muted:#7a6e67;
  --accent:#0D0D0D;--accent-soft:#EBE2D6;--border:rgba(59,47,42,0.12);
  --btn-text:#FAF6F0
}

body{
  min-height:100%;background:var(--bg);color:var(--text);
  font-family:'Instrument Sans', sans-serif;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden
}

img,video{max-width:100%;display:block}
a{color:inherit}

/* Twee snelle tikken op dezelfde knop leest een mobiele browser als inzoomen.
   Zie dezelfde regel in index.html. */
button,.proj-nav{touch-action:manipulation}

/* ---- kop van de pagina ---- */
.pg-top{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px 20px;
  max-width:1100px;margin:0 auto;padding:24px 20px
}
@media(min-width:768px){.pg-top{padding:32px;flex-wrap:nowrap}}
.pg-logo{display:inline-flex;align-items:center;text-decoration:none;transition:opacity .3s}
.pg-logo:hover{opacity:.7}
.pg-logo-mark{
  display:block;width:130px;aspect-ratio:1114/164;background:currentColor;
  -webkit-mask:url(/assets/images/logos/LOGO_RF_26.svg) center/contain no-repeat;
  mask:url(/assets/images/logos/LOGO_RF_26.svg) center/contain no-repeat
}
.pg-top-links{display:flex;align-items:center;gap:18px;font-size:13px;font-weight:500}
.pg-top-links a{text-decoration:none;transition:opacity .2s}
.pg-top-links a:hover{opacity:.6}
/* Onzichtbaar op het scherm, maar wel gewoon in de broncode en dus leesbaar
   voor zoekmachines en schermlezers. */
.alleen-voorlezer{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pg-lang{
  border:1px solid var(--border);border-radius:9999px;padding:5px 10px;
  font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none
}

/* ---- kruimelpad ---- */
.pg-crumbs{
  max-width:1100px;margin:0 auto;padding:0 20px 8px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)
}
@media(min-width:768px){.pg-crumbs{padding:0 32px 8px}}
.pg-crumbs a{text-decoration:none}
.pg-crumbs a:hover{color:var(--text)}

/* ---- inhoud ---- */
.pg-wrap{max-width:1100px;margin:0 auto;padding:8px 20px 80px}
@media(min-width:768px){.pg-wrap{padding:8px 32px 120px}}

/* ---- lopende tekst op de bureaupagina ---- */
.pg-lead{font-size:clamp(1.05rem,2.2vw,1.35rem);line-height:1.6;max-width:62ch;margin-bottom:40px}
.pg-body h2{font-family:'Instrument Serif', serif;font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1.15;margin:48px 0 14px}
.pg-body h3{font-size:15px;font-weight:600;margin:28px 0 8px}
.pg-body p{font-size:15px;line-height:1.7;color:var(--muted);max-width:64ch;margin-bottom:14px}
.pg-body ul,.pg-body ol{margin:0 0 18px 20px;max-width:64ch}
.pg-body li{font-size:15px;line-height:1.7;color:var(--muted);margin-bottom:8px}
.pg-body strong{color:var(--text);font-weight:600}

/* ---- vraag en antwoord ---- */
.pg-qa{border-top:1px solid var(--border);padding:22px 0;max-width:70ch}
.pg-qa h3{font-family:'Instrument Serif', serif;font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:400;margin-bottom:8px}
.pg-qa p{font-size:15px;line-height:1.7;color:var(--muted)}

/* ---- oproep en voet ---- */
.pg-cta{
  display:inline-flex;align-items:center;gap:10px;border-radius:9999px;
  padding:14px 36px;font-size:13px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;background:var(--accent);color:var(--btn-text);
  text-decoration:none;transition:transform .3s,opacity .3s;margin-top:8px
}
.pg-cta:hover{transform:translateY(-2px);opacity:.9}
.pg-foot{
  max-width:1100px;margin:0 auto;padding:28px 20px 48px;
  border-top:1px solid var(--border);font-size:12px;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between
}
@media(min-width:768px){.pg-foot{padding:28px 32px 60px}}
.pg-foot a{text-decoration:none}
.pg-foot a:hover{color:var(--text)}

/* ---- volgende cases ---- */
.pg-more{max-width:1100px;margin:0 auto;padding:0 20px 60px}
@media(min-width:768px){.pg-more{padding:0 32px 80px}}
.pg-more h2{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.pg-more-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(min-width:768px){.pg-more-grid{grid-template-columns:repeat(4,1fr)}}
.pg-more-card{
  display:block;text-decoration:none;border-radius:12px;overflow:hidden;
  position:relative;aspect-ratio:4/3;background:var(--accent-soft)
}
.pg-more-card img{width:100%;height:100%;object-fit:cover}
.pg-more-card span{
  position:absolute;left:14px;bottom:12px;color:#fff;font-size:14px;
  font-family:'Instrument Serif', serif;text-shadow:0 2px 10px rgba(0,0,0,.5)
}
.pg-more-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent 55%)
}
.pg-more-card span{z-index:1}

/* ---- doorbladeren, zelfde vorm als in het scherm op de homepage ---- */
/* Daar staan deze knoppen verborgen tot de laag opengaat; hier is de pagina
   zelf het project, dus mogen ze meteen zichtbaar zijn. */
.proj-nav{
  position:fixed;width:48px;height:48px;border-radius:9999px;
  background:rgba(59,47,42,.1);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;color:var(--text);line-height:1;z-index:310;
  text-decoration:none;transition:background .2s
}
.proj-nav:hover{background:rgba(59,47,42,.2)}
.proj-nav{transition:opacity .3s ease, background .2s}
.proj-nav.rust{opacity:0;pointer-events:none}
.proj-nav-prev{left:12px;top:50%;transform:translateY(-50%)}
.proj-nav-next{right:12px;top:50%;transform:translateY(-50%)}
@media(max-width:899px){
  .proj-nav{top:auto;bottom:16dvh;transform:none}
  .proj-nav-prev{left:24px}
  .proj-nav-next{right:24px}
}

/* >>> overgenomen uit index.html, niet met de hand aanpassen */
.proj-ttl{font-family:'Instrument Serif', serif;font-style:italic;font-size:clamp(2.2rem,6vw,5rem);line-height:.92;color:var(--text);margin-bottom:8px}
.proj-type{font-family:'Instrument Sans', sans-serif;font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:36px}
@media(min-width:768px){.proj-type{margin-bottom:44px}}
.proj-credit-row{display:flex;align-items:baseline;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border);gap:24px}
.proj-credit-row dt{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);flex-shrink:0}
.proj-credit-row dd{font-size:15px;color:var(--text);font-weight:400;text-align:right;margin:0}
.proj-block{margin-bottom:48px}
.proj-block-label{font-family:'Instrument Sans', sans-serif;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.proj-vid video{width:100%;height:100%;display:block;background:#000;border-radius:inherit}
.proj-vid-wrap{display:grid;grid-template-columns:1fr;gap:24px;margin-bottom:36px}
@media(min-width:900px){.proj-vid-wrap{grid-template-columns:minmax(0, 1.65fr) 1fr;gap:32px;align-items:start}}
.proj-vid-wrap .proj-vid{margin-bottom:0}
.proj-key-credits{display:flex;flex-direction:column;margin:0;padding:0}
.proj-key-credits .proj-credit-row:first-child{padding-top:0}
.proj-stills{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:48px}
@media(min-width:768px){.proj-stills{gap:18px;margin-bottom:64px}}
@media(max-width:520px){.proj-stills{grid-template-columns:1fr}}
.proj-still{aspect-ratio:16/9;background:var(--accent-soft);border-radius:12px;overflow:hidden;position:relative;padding:0}
@media(min-width:768px){.proj-still{border-radius:16px}}
.proj-still img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;transition:transform .5s cubic-bezier(.32,.72,0,1)}
.proj-vid{width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#1a1208;margin-bottom:36px;display:flex;align-items:center;justify-content:center}
@media(min-width:768px){.proj-vid{border-radius:16px;margin-bottom:40px}}
.proj-sec{border-bottom:1px solid var(--border);padding:20px 0}
@media(min-width:768px){.proj-sec{padding:24px 0}}
.proj-sec-lbl{font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.proj-sec-body{font-size:14px;color:var(--muted);line-height:1.6;white-space:pre-line}
@media(min-width:768px){.proj-sec-body{font-size:15px}}
.site-grain{position:fixed;inset:-60px;z-index:2147483647;pointer-events:none;opacity:.72;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='1.6' intercept='-0.15'/></feComponentTransfer></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");background-size:190px 190px;will-change:transform;animation:siteGrain .5s steps(4) infinite}
@media(prefers-reduced-motion:reduce){.site-grain{animation:none}}
@keyframes siteGrain{0%{transform:translate3d(0,0,0)}33%{transform:translate3d(-45px,32px,0)}66%{transform:translate3d(34px,-42px,0)}100%{transform:translate3d(0,0,0)}}
/* <<< einde overgenomen deel */