:root{--bg:#0d0d0d;--bg2:#181818;--fg:#eee;--acc:#e3261b;--mut:#999}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1,h2,h3,.logo{font-family:Impact,"Arial Black","Helvetica Neue",sans-serif;text-transform:uppercase;letter-spacing:.04em}
a{color:var(--acc)}
.nav{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.2rem;background:rgba(13,13,13,.95);border-bottom:3px solid var(--acc)}
.logo{color:var(--fg);text-decoration:none;font-size:1.6rem}
.nav nav a{color:var(--fg);text-decoration:none;margin-left:1.2rem;font-weight:700;text-transform:uppercase;font-size:.9rem}
.nav nav a:hover{color:var(--acc)}
.burger{display:none;font-size:1.6rem;cursor:pointer}
.hero{min-height:85vh;display:flex;align-items:center;justify-content:center;text-align:center;
 background:radial-gradient(circle at 50% 40%,#3a0a07 0,#0d0d0d 70%),repeating-linear-gradient(45deg,#111 0 2px,#0d0d0d 2px 8px)}
.hero h1{font-size:clamp(4rem,16vw,11rem);line-height:.9;color:var(--fg);text-shadow:6px 6px 0 var(--acc)}
.tag{font-size:1.2rem;text-transform:uppercase;letter-spacing:.3em;color:var(--mut);margin:1rem 0}
.btns{margin-top:1.5rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;background:var(--acc);color:#fff;border:2px solid var(--acc);padding:.8rem 1.6rem;font-weight:800;text-transform:uppercase;text-decoration:none;cursor:pointer;font-size:1rem}
.btn.alt{background:transparent}
.btn:hover{filter:brightness(1.2)}
.wrap{padding:4.5rem max(1.2rem,calc((100% - 1000px)/2))}
.dark{background:var(--bg2)}
h2{font-size:2.6rem;margin-bottom:1.5rem;border-left:8px solid var(--acc);padding-left:.8rem}
h3{margin:1.2rem 0 .5rem}
.ph{color:#f5c542;font-style:italic}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem}
.photo img{max-width:100%}
.photo{border:3px dashed #444;display:flex;flex-direction:column;gap:.5rem;align-items:stretch;justify-content:flex-start;min-width:0;text-align:center;color:#f5c542;font-style:italic}
.lineup{list-style:none}.lineup li{padding:.4rem 0;border-bottom:1px solid #333}
.tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:1rem}
.track{background:var(--bg);padding:1rem;border-top:3px solid var(--acc)}.track h3{color:#f5c542;font-size:1rem;margin-top:0}
audio{width:100%}
.gigs{list-style:none}
.gigs li{display:grid;grid-template-columns:auto 9rem 1fr 1fr;gap:1rem;align-items:center;padding:.9rem 0;border-bottom:1px solid #333}
.label{background:#f5c542;color:#000;font-weight:800;font-size:.75rem;padding:.15rem .5rem}
.date{font-weight:800;color:var(--acc)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form label{display:flex;flex-direction:column;font-weight:700;font-size:.9rem;text-transform:uppercase;gap:.3rem}
.form .full{grid-column:1/-1}
input,select,textarea{background:#0d0d0d;color:var(--fg);border:2px solid #333;padding:.7rem;font:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc)}
.form.inline{grid-template-columns:1fr 1fr auto;align-items:end}
.hp{position:absolute;left:-9999px}
footer{text-align:center;padding:2rem;color:var(--mut);border-top:3px solid var(--acc)}
@media(max-width:760px){
 .burger{display:block}
 .nav nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);flex-direction:column;border-bottom:3px solid var(--acc)}
 .nav nav a{margin:0;padding:.9rem 1.2rem;border-top:1px solid #222}
 #menu:checked~nav{display:flex}
 .grid2,.form,.form.inline{grid-template-columns:1fr}
 .gigs li{grid-template-columns:auto 1fr;gap:.3rem 1rem}
}

/* logo: origineel zwart balkvlak met witte letters, op wit */
.logo{background:#fff;padding:4px 8px;display:block;line-height:0}
.logo img{height:40px;width:auto;display:block}
.hero h1{text-shadow:none;line-height:0}
.hero-logo-card{background:#fff;width:min(94vw,1200px);margin:0 auto;padding:clamp(12px,2.5vw,34px) clamp(14px,3vw,44px)}
.hero-logo{display:block;width:100%;height:auto}
.hero{padding:3rem 0 3.5rem}

/* info: nieuw boven, logo ertussen, oud onder */
.oudnieuw{margin:0;min-width:0;display:flex;flex-direction:column}
.on-foto{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.15)}
.on-cap{font-size:.8rem;text-transform:uppercase;letter-spacing:.15em;color:var(--mut);margin:.35rem 0 0}
.on-logo{background:#fff;padding:14px 18px;margin:1rem 0 0}
.on-logo img{width:100%;height:auto;display:block}
.on-tekst{background:#fff;color:#111;margin:0 0 1rem;padding:0 18px 12px;font-family:Impact,"Arial Black",sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:1.15rem;text-align:center}

/* ledenpagina's */
.lineup a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.lid-naam{font-size:clamp(2.4rem,7vw,4.5rem);margin:.5rem 0 0}
.lid-instr{text-transform:uppercase;letter-spacing:.1em;font-weight:800;margin:0 0 1.5rem}
.lid-foto{max-width:480px;aspect-ratio:4/3;justify-content:center;margin:0 0 1.5rem}

/* header: Ratrace-balk gecentreerd bovenaan, menu eronder */
.nav{flex-direction:column;justify-content:center;gap:.6rem;padding:.8rem 1.2rem .6rem}
.nav .logo{margin:0 auto}
.nav .logo img{height:64px}
.nav nav{display:flex;flex-wrap:wrap;justify-content:center}
.nav nav a{margin:0 .7rem}
@media(max-width:760px){
 .nav .logo img{height:48px}
 .nav nav{display:none}
 .burger{position:absolute;right:1.2rem;top:50%;transform:translateY(-50%)}
 .nav nav a{margin:0}
}
/* terugknop ledenpagina zwart-wit */
.lid .btn{background:#fff;color:#111;border-color:#fff}
.lid .btn:hover{background:#111;color:#fff;filter:none}

/* posters */
.posters{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin:1.5rem 0 2rem}
.posters figure{margin:0}
.posters img{width:100%;height:auto;display:block}
.posters figcaption{font-size:.8rem;text-transform:uppercase;letter-spacing:.15em;color:var(--mut);margin-top:.4rem}

/* ===== POSTER-STIJL (Grunge Tour 2027, optie F): zwart, Anton + Courier Prime, gescheurd papier, z/w foto's ===== */
@font-face{font-family:Anton;src:url(../fonts/Anton-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Courier Prime";src:url(../fonts/CourierPrime-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
:root{--bg:#0d0d0d;--bg2:#141414;--fg:#eee;--acc:#eee;--paper:#e9e4da;--mut:#aaa}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1,h2,h3,.an,.btn,.nav nav a,.date,.label{font-family:Anton,Impact,"Arial Black",sans-serif;text-transform:uppercase;letter-spacing:.02em;font-weight:400}
.tw{font-family:"Courier Prime","Courier New",monospace;font-weight:700;text-transform:none;letter-spacing:0}
a{color:var(--fg)}
.torn{clip-path:polygon(0 3%,4% 1%,8% 5%,12% 2%,17% 6%,22% 1%,27% 5%,33% 2%,38% 6%,44% 2%,50% 5%,56% 1%,62% 6%,68% 2%,74% 5%,80% 1%,86% 6%,92% 2%,96% 5%,100% 2%,100% 96%,95% 99%,90% 95%,84% 98%,78% 94%,72% 98%,66% 95%,60% 99%,54% 95%,48% 98%,42% 94%,36% 98%,30% 95%,24% 99%,18% 95%,12% 98%,6% 94%,0 97%)}
/* header */
.nav{background:rgba(13,13,13,.96);border-bottom:2px solid #2a2a2a}
.nav .logo{background:none;padding:0}
.nav nav a{font-size:1.05rem;letter-spacing:.06em;color:var(--fg)}
.nav nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
/* hero = poster */
.hero{min-height:auto;background:var(--bg);padding:2.5rem 0 3rem;overflow:hidden}
.hero-inner{width:100%}
.hero-tour{font-size:clamp(2.2rem,7vw,4.6rem);line-height:.95;text-align:left;width:min(92vw,1100px);margin:0 auto 1.2rem;color:var(--fg)}
.strip{position:relative;margin:0 -4vw;padding:clamp(2.2rem,6vw,4.5rem) 0 clamp(2.4rem,6vw,4.8rem);background:url(../img/paper.jpg) center/cover var(--paper);transform:rotate(-3deg);filter:drop-shadow(0 8px 14px rgba(0,0,0,.7));
 clip-path:polygon(0.0% 3.11%,1.6% 2.17%,2.8% 1.2%,3.5% 0.5%,4.2% 0.64%,5.8% 1.89%,6.7% 2.01%,8.0% 2.1%,9.5% 1.05%,11.0% 0.5%,12.4% 1.11%,14.5% 0.81%,15.4% 3.05%,17.4% 3.56%,19.6% 2.72%,21.4% 1.95%,22.0% 2.32%,23.6% 3.15%,25.3% 3.35%,26.6% 4.1%,28.0% 6.24%,30.2% 6.5%,31.4% 6.5%,32.9% 6.49%,34.0% 6.5%,36.1% 6.49%,37.3% 6.0%,38.6% 6.11%,40.8% 6.5%,41.8% 5.58%,43.4% 4.51%,44.3% 4.03%,45.8% 4.27%,46.6% 5.06%,48.2% 5.59%,50.2% 6.5%,51.7% 6.28%,53.1% 6.06%,55.2% 4.8%,56.7% 4.88%,58.3% 3.94%,59.5% 4.23%,61.1% 6.37%,62.4% 4.43%,64.2% 4.39%,65.6% 3.74%,66.8% 4.16%,68.6% 3.71%,69.4% 4.47%,71.4% 4.15%,72.9% 4.16%,74.5% 4.8%,75.4% 4.22%,77.3% 3.56%,79.1% 4.64%,80.4% 3.96%,81.6% 4.64%,82.7% 4.42%,83.6% 3.77%,85.7% 4.51%,87.3% 3.08%,89.2% 3.63%,90.1% 4.27%,91.9% 5.31%,93.2% 6.29%,94.1% 5.47%,96.1% 6.14%,98.0% 6.5%,99.2% 6.5%,99.8% 6.5%,100% 6.5%,100% 94.41%,100.0% 94.41%,99.3% 93.89%,97.9% 93.81%,96.2% 95.73%,95.0% 97.59%,94.3% 97.29%,92.8% 97.7%,91.4% 96.8%,90.0% 96.96%,89.1% 96.24%,87.7% 96.72%,86.2% 96.13%,85.3% 95.27%,84.6% 94.26%,83.4% 94.7%,82.8% 93%,81.4% 93%,80.8% 93.06%,78.6% 93.48%,76.4% 93.37%,75.1% 93.89%,73.6% 94.66%,72.4% 94.65%,71.1% 95.62%,70.5% 95.35%,68.3% 94.29%,66.3% 93.78%,65.3% 94.38%,63.3% 93.34%,61.7% 93%,60.7% 93%,60.0% 93%,58.6% 93.57%,57.5% 93%,56.9% 93%,55.9% 93.84%,54.9% 94.66%,53.7% 94.54%,53.0% 95.3%,50.9% 97.77%,49.9% 97.11%,48.5% 97.12%,46.4% 97.33%,44.5% 96.56%,42.4% 97.26%,40.5% 94.9%,39.1% 95.86%,38.5% 96.23%,37.4% 94.21%,36.0% 94.56%,34.0% 95.31%,32.8% 95.34%,30.6% 95.95%,29.0% 96.74%,26.9% 97.5%,26.2% 97.13%,24.9% 98.07%,23.0% 98.87%,22.0% 98.74%,20.2% 97.91%,18.8% 97.96%,17.4% 97.53%,16.1% 97.28%,14.6% 96.71%,13.9% 99%,12.5% 99%,11.8% 99%,11.0% 99%,9.4% 99%,8.0% 98.69%,6.7% 97.77%,5.3% 97.59%,4.5% 96.69%,3.0% 97.22%,2.0% 97.67%,0.0% 96.95%)}
.strip-tekst{position:absolute;left:max(6vw,calc(50% - 520px));top:clamp(1rem,3vw,2.2rem);color:#111;font-size:clamp(.95rem,2.3vw,1.6rem);margin:0}
.strip-logo{margin:0 auto;width:min(84vw,860px);line-height:0;transform:rotate(3deg)}
.hero-logo-card{background:none;padding:0}
.hero-slogan{font-size:clamp(2.6rem,8vw,5rem);line-height:1;text-align:center;margin:2rem 0 .3rem;color:var(--fg)}
.tag{font-family:Inter,system-ui,sans-serif;font-weight:800;letter-spacing:.12em;color:var(--mut)}
/* knoppen: wit/zwart zoals poster */
.btn{background:var(--fg);color:#0d0d0d;border:2px solid var(--fg);font-size:1.15rem;letter-spacing:.05em;padding:.6rem 1.5rem}
.btn.alt{background:transparent;color:var(--fg)}
.btn:hover{background:#fff;color:#000;filter:none}
.btn.alt:hover{background:var(--fg);color:#0d0d0d}
/* secties */
h2{font-size:clamp(2.4rem,6vw,3.6rem);border-left:none;padding-left:0;line-height:1}
.dark{background:var(--bg2)}
.wrap{border-top:1px solid #222}
/* foto's in witte polaroid-lijst, z/w, scheef */
.on-foto{border:clamp(6px,1.2vw,10px) solid var(--fg);box-shadow:0 6px 18px rgba(0,0,0,.7);filter:grayscale(1) contrast(1.3);transform:rotate(-1.5deg)}
.oudnieuw .on-foto:last-of-type{transform:rotate(1.5deg)}
.on-cap{font-family:"Courier Prime",monospace;font-weight:700;text-transform:none;letter-spacing:0;display:inline-block;align-self:flex-start;background:var(--fg);color:#111;padding:1px 8px;margin:.4rem 0 0 .6rem;font-size:.85rem}
.on-logo{position:relative;background:url(../img/paper.jpg) center/cover var(--paper);margin:1rem -.6rem;padding:2.2rem 1.4rem 1.6rem;transform:rotate(-3deg);clip-path:polygon(0 6%,6% 1%,14% 7%,22% 2%,32% 8%,42% 2%,52% 7%,62% 1%,72% 7%,82% 2%,92% 7%,100% 2%,100% 94%,92% 99%,82% 93%,72% 98%,62% 93%,52% 99%,42% 93%,32% 98%,22% 93%,12% 99%,0 95%)}
.on-logo p{position:absolute;top:.6rem;left:1rem;color:#111;font-size:.95rem;margin:0}
.on-logo img{transform:rotate(3deg)}
.lid-foto{border:10px solid var(--fg);box-shadow:0 6px 18px rgba(0,0,0,.7)}
.lid-foto img{filter:grayscale(1) contrast(1.2)}
.photo.lid-foto{border:3px dashed #555}
.posters img{border:8px solid var(--fg);box-shadow:0 6px 18px rgba(0,0,0,.7)}
/* lijsten, agenda, muziek */
.lineup li{border-bottom:2px solid #2a2a2a}
.track{border-top:3px solid var(--fg)}
.track h3{font-family:"Courier Prime",monospace}
.gigs li{border-bottom:2px solid #2a2a2a;font-size:1.05rem}
.date{color:var(--fg);font-size:1.2rem}
.label{background:var(--fg);color:#000}
input:focus,select:focus,textarea:focus{border-color:var(--fg)}
.form label{font-family:Anton,Impact,sans-serif;font-weight:400;letter-spacing:.05em;font-size:1rem}
/* footer: ledenregel zoals onderaan de poster */
footer{border-top:2px solid #2a2a2a;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.9rem}
footer p{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:1.4rem;color:var(--fg);margin-top:.3rem}
.lid .btn{background:var(--fg);color:#111;border-color:var(--fg)}
@media(max-width:760px){
 .hero{padding-top:1.6rem}
 .hero-tour{text-align:center}
 .strip-tekst{left:9vw;top:1.4rem}
 .gigs li{font-size:1rem}
}

.next-gig{margin:.6rem 0 1.2rem;font-size:clamp(1.7rem,5.5vw,3.2rem);line-height:1.1;letter-spacing:.03em;text-transform:uppercase}
.next-gig a{color:#ff8c1a;text-decoration:none}

.hero-foto{position:relative;width:min(92vw,1000px);margin:0 auto;background:#eee;padding:6px;box-shadow:0 8px 18px rgba(0,0,0,.7)}
.hero-foto img{display:block;width:100%;aspect-ratio:16/7;object-fit:cover;object-position:center 30%;filter:grayscale(1) contrast(1.1)}
.hero-foto.nu{transform:rotate(-1deg);margin-bottom:-2.2rem;z-index:0}
.hero-foto.toen{transform:rotate(1deg);margin-top:-.6rem;z-index:0}
.hero-foto.toen img{aspect-ratio:16/8;object-position:center 15%}
.strip{z-index:1}
.hero-foto figcaption{position:absolute;left:14px;bottom:12px;background:#eee;color:#111;font-size:.85rem;padding:.1rem .5rem}