/* Dorpel r5 (Moreno, Batch 2 review). Loaded after r4.css. */

/* ---- 1 · voor/na: one component everywhere. Buttons wipe; the line drags (mouse + touch) and takes arrow keys. ---- */
.vn{margin:0}
.vn-stage{--x:50%;position:relative;aspect-ratio:16/9;overflow:hidden;background:#d9cfc0;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.card .vn-stage{aspect-ratio:16/10}
.card.big .vn-stage{aspect-ratio:4/3}
.vn-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.vn-na{clip-path:inset(0 0 0 var(--x))}
.vn-line{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:var(--brass);outline:none}
.vn-line::before{content:"";position:absolute;top:0;bottom:0;left:-16px;right:-16px}   /* a finger-wide grab zone */
.vn-line i{position:absolute;top:50%;left:50%;width:calc(36*var(--u));height:calc(36*var(--u));min-width:30px;min-height:30px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(246,243,238,.94);border:1px solid var(--brass);box-shadow:0 1px 6px rgba(35,31,27,.18)}
.vn-line i::before,.vn-line i::after{content:"";position:absolute;top:32%;bottom:32%;width:1px;background:var(--brass-deep)}
.vn-line i::before{left:40%}.vn-line i::after{right:40%}
.vn-line:focus-visible i{outline:2px solid var(--brass-deep);outline-offset:3px}
.vn-tag{position:absolute;bottom:calc(18*var(--u));font:500 max(calc(11*var(--u)),9.7px)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:0 0 calc(12*var(--u)) rgba(30,24,20,.7);pointer-events:none;transition:opacity .3s ease}
.vn-tag.l{left:calc(20*var(--u))}.vn-tag.r{right:calc(20*var(--u))}
.vn[data-at="na"] .vn-tag.l,.vn[data-at="voor"] .vn-tag.r{opacity:0}
.vn-ctl{display:flex;align-items:center;flex-wrap:wrap;gap:0;margin-top:calc(14*var(--u))}
.vn-ctl button{font:500 max(calc(13*var(--u)),12px)/1 var(--sans);letter-spacing:.06em;height:max(calc(36*var(--u)),32px);padding:0 calc(18*var(--u));border:1px solid rgba(35,31,27,.32);background:transparent;color:var(--ink);cursor:pointer;transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.vn-ctl button + button{margin-left:-1px}
.vn-ctl button:hover{border-color:var(--ink)}
.vn-ctl button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--plaster)}
.vn-ctl .small{margin-left:calc(16*var(--u))}
.card .meta{display:block;text-decoration:none;color:inherit}
.card .meta:hover h3{color:var(--brass-deep)}

/* ---- 2 · one header everywhere: the approved hero header's geometry (64/36 hu, 24 hu logo box, 14 hu links), sticky, never resizing ---- */
:root{--hu:clamp(.8px,min(calc(100vw / 1440),calc(100vh / 900)),1.5px)}
.site-head,.site-head.stuck{padding:calc(36*var(--hu)) calc(64*var(--hu))}
.site-head{position:sticky;top:0;transition:box-shadow .3s ease}
.site-head.stuck{box-shadow:0 1px 0 rgba(35,31,27,.12)}
.site-head nav{gap:calc(40*var(--hu));align-items:center}
.site-head nav a{font:400 calc(14*var(--hu))/1 var(--sans)}
.site-head .mark.logo{height:calc(24*var(--hu))}
.site-head .mark.logo svg{height:calc(28*var(--hu));margin-top:calc(-2*var(--hu))}
/* Home: the plaster bar takes over in place as soon as the page moves (same logo, same links, same spot) */
.home-bar,.home-bar.on{transform:none;padding:calc(36*var(--hu)) calc(64*var(--hu));box-shadow:0 1px 0 rgba(35,31,27,.12)}
.home-bar{position:fixed;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s}
.home-bar.on{opacity:1;visibility:visible;transition:opacity .25s ease}
@media (prefers-reduced-motion: reduce){.home-bar,.home-bar.on{transition:none}}