/* V4 targeted refinement: keep the cinematic foundation and mobile composition. */
.site-header{width:min(820px,calc(100% - 48px))}
.mobile-menu{display:block}
.mobile-menu nav{width:min(355px,calc(100vw - 32px));padding:14px;max-height:calc(100svh - 110px);overflow-y:auto;background:#fbfaf7f7}
.mobile-menu nav a{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:44px;padding:10px 16px}
.mobile-menu nav a span{font-size:13px;color:var(--muted)}
.mobile-menu nav a[aria-current="page"]{background:var(--soft-violet);color:var(--violet)}
.menu-lines,.menu-lines:after{display:block;width:17px;height:1.5px;background:currentColor;position:relative;transition:transform .2s}
.menu-lines{transform:translateY(-3px)}
.menu-lines:after{content:"";position:absolute;top:6px}
.mobile-menu[open] .menu-lines{transform:rotate(45deg)}
.mobile-menu[open] .menu-lines:after{transform:rotate(-90deg);top:0}
.mobile-menu[open] nav{animation:menu-reveal .2s ease both;transform-origin:top right}
.menu-preferences{border-top:1px solid var(--line);margin-top:10px;padding-top:8px}
.menu-preferences .motion-toggle{width:100%;border:0;border-radius:12px;justify-content:flex-start;gap:14px;padding:10px 16px;background:transparent;font-size:12px;height:auto}
.menu-preferences .motion-label{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
.menu-preferences .motion-icon{width:18px}
@keyframes menu-reveal{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.home-story .contact{padding-top:100px}
/* V7: an opaque incoming surface prevents white seams between scene dissolves. */
.motion-ready .chapter{background:var(--paper)}
.story-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;margin-top:32px}
.story-links .text-link{font-size:12px}
#overzicht .story-card{background:transparent;box-shadow:none;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
#overzicht .card-index{color:var(--violet)}
@media(min-width:901px){
 /* Keep the phone left of the reading surface when this scene fills the viewport. */
 .motion-ready #overzicht .chapter-film img,.motion-ready #overzicht .chapter-film video{object-position:right center}
 .opening-film{display:none}
 .motion-ready .intro{height:310svh}
 #onrust{grid-template-columns:minmax(0,1.7fr) minmax(310px,1fr);gap:clamp(24px,4vw,64px)}
 #onrust .chapter-film{grid-column:1;aspect-ratio:1.35}
 #onrust .card-stack{grid-column:2;margin:0}
 #onrust .story-card{padding:clamp(28px,3vw,42px)}
 #onrust .story-card h2{font-size:clamp(28px,2.5vw,40px)}
 #twijfel .chapter-film{aspect-ratio:1.35}
 #twijfel .chapter-film img,#twijfel .chapter-film video{object-fit:cover;object-position:28% center}
 #twijfel .story-card{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none}
 #twijfel .story-card h2{font-size:clamp(30px,3vw,46px)}
 .motion-ready .story{height:1020svh}
}
@media(max-width:900px){
 .site-header{width:calc(100% - 28px)}
 .main-nav .nav-contact{font-size:12px;padding-inline:14px}
 .chapter-nav{max-width:100%;overflow-x:auto;scrollbar-width:none}
 .chapter-nav::-webkit-scrollbar{display:none}
 .chapter-nav a{font-size:10px;gap:4px;padding-inline:9px}
 .chapter-nav a span{display:none}
 .motion-ready .story{height:970svh}
 .home-story .contact{padding-top:65px}
}
@media(max-width:360px){
 .main-nav .nav-contact{font-size:10px;padding-inline:11px}
 .chapter-nav a{font-size:9px;padding-inline:7px}
}
@media(prefers-reduced-motion:reduce){.mobile-menu[open] nav{animation:none}.menu-lines,.menu-lines:after{transition:none}}