/* ===== layout.css — topbar, header, menu, footer ===== */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:300}
.topbar{background:var(--ink);color:var(--bg);text-align:center;font-size:11px;letter-spacing:.25em;text-transform:uppercase;padding:10px 12px}
.topbar a{border-bottom:1px solid transparent;transition:border-color .3s}
.topbar a:hover{border-color:currentColor}
header.site{position:sticky;top:0;z-index:200;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px clamp(20px,4vw,56px);background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:padding .4s,border-color .4s}
header.site.scrolled{padding-top:10px;padding-bottom:10px;border-color:var(--line)}
.logo{display:block;line-height:0;color:var(--ink);flex:none}
.logo svg{height:44px;width:auto;display:block}
nav.main ul{list-style:none;display:flex;gap:clamp(18px,2.6vw,42px);margin:0;padding:0}
nav.main li{position:relative}
nav.main a.l{font-size:12px;letter-spacing:.22em;text-transform:uppercase;padding:10px 0;display:inline-block;position:relative}
nav.main a.l::after{content:"";position:absolute;left:0;bottom:4px;height:1px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
nav.main li:hover>a.l::after,nav.main a.l.active::after{transform:scaleX(1);transform-origin:left}
.sub{position:absolute;top:100%;left:-18px;min-width:200px;background:var(--bg);border:1px solid var(--line);padding:10px 0;opacity:0;visibility:hidden;transform:translateY(10px);transition:.35s}
nav.main li:hover .sub,nav.main li:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub a{display:block;padding:9px 20px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);transition:color .3s,padding .3s}
.sub a:hover{color:var(--ink);padding-left:26px}
.burger{display:none;background:none;border:0;width:44px;height:44px;position:relative;cursor:pointer;color:var(--ink)}
.burger span{position:absolute;left:10px;width:24px;height:1px;background:currentColor;transition:.4s var(--ease)}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:29px}
.menu-open .burger span:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){top:22px;transform:rotate(-45deg)}

/* mobiel menu (los van de header, zodat het altijd fullscreen is) */
.menu{position:fixed;inset:0;z-index:150;background:var(--bg);padding:120px var(--pad) 40px;overflow-y:auto;transform:translateX(100%);visibility:hidden;transition:transform .6s var(--ease),visibility 0s .6s}
.menu-open .menu{transform:none;visibility:visible;transition:transform .6s var(--ease)}
.menu ul{list-style:none;margin:0;padding:0}
.menu li{border-bottom:1px solid var(--line);opacity:0;transform:translateX(30px);transition:.6s var(--ease)}
.menu-open .menu li{opacity:1;transform:none}
.menu li:nth-child(1){transition-delay:.15s}.menu li:nth-child(2){transition-delay:.2s}.menu li:nth-child(3){transition-delay:.25s}.menu li:nth-child(4){transition-delay:.3s}.menu li:nth-child(5){transition-delay:.35s}.menu li:nth-child(6){transition-delay:.4s}.menu li:nth-child(7){transition-delay:.45s}.menu li:nth-child(8){transition-delay:.5s}
.menu a{display:block;font-family:var(--serif);font-size:clamp(26px,7vw,36px);letter-spacing:.08em;padding:14px 0}
.menu a.active{color:var(--accent)}
.menu-open{overflow:hidden}

footer.site{padding:80px var(--pad) 30px;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1.4fr;gap:40px;max-width:1300px;margin:auto}
footer h4{font-size:11px;letter-spacing:.4em;text-transform:uppercase;margin:0 0 20px;font-weight:500}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:8px}
footer a{color:var(--muted);transition:color .3s}
footer a:hover{color:var(--ink)}
footer .logo{color:var(--ink)}
.news{display:flex;border-bottom:1px solid var(--ink);margin-top:14px}
.news input{flex:1;background:none;border:0;color:inherit;font:inherit;font-size:16px;padding:12px 0;outline:none;min-width:0}
.news button{background:none;border:0;color:inherit;font-size:11px;letter-spacing:.3em;text-transform:uppercase;cursor:pointer;padding:0 6px}
.copy{max-width:1300px;margin:60px auto 0;padding-top:24px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}