:root{--bg:#efe7de;--panel:#e6dccf;--ink:#241a15;--muted:#6a5a4f;--accent:#9a4f0c;--on-accent:#fff;--line:#cdbfae;
 --f:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1b1511;--panel:#261e18;--ink:#f1e8de;--muted:#b3a393;--accent:#e9a54a;--on-accent:#1b1511;--line:#3d322a;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#1b1511;--panel:#261e18;--ink:#f1e8de;--muted:#b3a393;--accent:#e9a54a;--on-accent:#1b1511;--line:#3d322a;color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--f)}
html[lang="nl"] [data-l="en"],html[lang="en"] [data-l="nl"]{display:none}
a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{max-width:62rem;margin:0 auto;padding:0 1.25rem}
header{display:flex;justify-content:space-between;align-items:center;gap:1rem 2rem;flex-wrap:wrap;padding:1.25rem 0;border-bottom:1px solid var(--line)}
.brand{font-weight:800;text-decoration:none;letter-spacing:-.01em}
nav{display:flex;gap:1.3rem;flex-wrap:wrap;font-weight:500;font-size:.98rem}
nav a{text-decoration:none;color:var(--muted)}
nav a:hover,nav a[aria-current="page"]{color:var(--ink);text-decoration:underline}
.tools{display:flex;gap:.5rem}
.tools button{font:500 .85rem var(--f);background:none;color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:.3rem .7rem;cursor:pointer}
.tools button:hover,.tools button[aria-pressed="true"]{border-color:var(--accent)}
.view{display:none;padding:clamp(2.5rem,7vw,5rem) 0 3rem}
.view.on{display:block}
h1{font:800 clamp(3.4rem,13vw,9.5rem)/.9 var(--f);letter-spacing:-.045em;margin:0}
h2{font:800 clamp(2rem,5vw,3rem)/1.05 var(--f);letter-spacing:-.03em;margin:0 0 2rem}
h3{font:700 1.25rem/1.2 var(--f);margin:0 0 .4rem}
.lead{font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.4;max-width:34rem;margin:2rem 0}
.row{display:flex;flex-wrap:wrap;gap:.75rem}
.btn{display:inline-block;font:700 1rem var(--f);text-decoration:none;padding:.75rem 1.3rem;border:1.5px solid var(--ink);border-radius:4px;background:var(--ink);color:var(--bg);cursor:pointer}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.alt{background:none;color:var(--ink)}
.btn.alt:hover{background:var(--accent);color:var(--on-accent)}
.prose{max-width:40rem}.prose p{margin:0 0 1.1rem}
.cols{display:grid;gap:2.5rem;grid-template-columns:1fr}
@media(min-width:760px){.cols{grid-template-columns:1.5fr 1fr;gap:4rem}}
.item{padding:1.5rem 0;border-top:1px solid var(--line)}
.item p{margin:0 0 .8rem;color:var(--muted);max-width:42rem}
.item .btn{margin-top:.4rem}
.ph{border:1.5px dashed var(--line);border-radius:4px;aspect-ratio:4/3;display:grid;place-items:center;text-align:center;padding:1rem;color:var(--muted)}
.list{list-style:none;margin:0;padding:0;columns:2 14rem}
.list li{padding:.35rem 0;border-bottom:1px solid var(--line);break-inside:avoid}
.members{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-top:1.5rem}
.members article{background:var(--panel);padding:1.4rem;border-radius:4px}
.members small{display:block;color:var(--accent);font-weight:700;margin-bottom:.6rem}
.members p{margin:0;font-size:.98rem}
.gig{display:grid;grid-template-columns:6rem 1fr;gap:1rem;padding:1rem 0;border-top:1px solid var(--line)}
.gig time{font-weight:800;font-size:1.3rem;line-height:1.2}
.gig small{display:block;color:var(--muted)}
.muted{color:var(--muted)}
form{display:grid;gap:1.1rem;max-width:34rem}
label{display:grid;gap:.35rem;font-weight:500}
input,textarea{font:400 1rem var(--f);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:.7rem .8rem;width:100%}
textarea{min-height:9rem;resize:vertical}
form .btn{justify-self:start}
footer{border-top:1px solid var(--line);padding:1.5rem 0 2.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem 2rem;color:var(--muted);font-size:.9rem}
.sx{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;cursor:help}
.hero{display:grid;gap:2.5rem;align-items:center}
@media(min-width:820px){.hero{grid-template-columns:1.25fr 1fr;gap:4rem}}
.hero h1{font-size:clamp(3.2rem,9vw,7rem)}
.hp,.pf{width:100%;display:block;border-radius:4px;object-fit:cover}
.hp{aspect-ratio:4/5;object-position:50% 25%;max-height:80vh}
.pf{aspect-ratio:4/5;object-position:50% 30%}
.grp{margin:0 0 .5rem;color:var(--muted);font-weight:500}
.members article{padding:0;overflow:hidden}
.members article>div{padding:1.1rem 1.3rem 1.4rem}
.members img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.gal{display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr);margin-top:3rem}
@media(min-width:700px){.gal{grid-template-columns:repeat(3,1fr)}}
.gal img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px;display:block}
.item .row{margin-top:.2rem}
.cols>img{align-self:start}
.sl{position:relative;overflow:hidden}.sl{isolation:isolate}.tr{display:flex;width:200%;transition:transform .45s ease}.tr img{flex:0 0 50%;width:50%;min-width:0}.sl.b .tr{transform:translateX(-50%)}
.sb{position:absolute;right:.6rem;bottom:.6rem;width:2.6rem;height:2.6rem;border-radius:50%;border:0;background:var(--bg);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.sb svg{transition:transform .45s ease}.sl.b .sb svg{transform:rotate(180deg)}.sb:hover{background:var(--accent);color:var(--on-accent)}
.soc{display:flex;gap:.6rem}.soc a{display:grid;place-items:center;width:2.4rem;height:2.4rem;border:1px solid var(--line);border-radius:4px;color:var(--ink)}.soc a:hover{border-color:var(--accent);color:var(--accent)}.soc svg{width:1.3rem;height:1.3rem}
@media(prefers-reduced-motion:reduce){.tr,.sb svg{transition:none}}

.thanks{max-width:34rem;min-height:14rem;display:grid;place-items:center;text-align:center;padding:2rem;background:var(--panel);border:1px solid var(--line);border-radius:4px}
.thanks strong{display:block;font:800 clamp(1.4rem,4vw,2rem)/1.2 var(--f);letter-spacing:-.02em;margin-bottom:.6rem}
.thanks small{display:block;color:var(--muted);font-size:1rem}
.thanks:focus{outline:none}

.tools button.ico{display:grid;place-items:center;padding:.3rem .5rem}
