:root {
  --blue:#479EE0;
  --yellow:#FAED4F;
  --pink:#CF2C79;
  --bg:#050507;
  --panel:#0A0A0D;
  --panel-2:#0D0D11;
  --white:#F8F7F4;
  --muted:#B8B5BA;
  --line:rgba(255,255,255,.12);
  --max:1240px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--bg); }
body {
  margin:0;
  background:var(--bg);
  color:var(--white);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height:1.5;
  overflow-x:hidden;
}
img { display:block; width:100%; }
a { color:inherit; text-decoration:none; }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:12px; top:12px; padding:10px 14px; background:#fff; color:#000; z-index:999; }

.blue,.blue-text{color:var(--blue)}
.yellow,.yellow-text{color:var(--yellow)}
.pink,.pink-text{color:var(--pink)}

.site-header {
  position:fixed; z-index:100; top:0; left:0; right:0;
  min-height:86px;
  padding:12px max(26px, calc((100vw - var(--max))/2));
  display:flex; align-items:center; justify-content:space-between; gap:34px;
  background:rgba(5,5,7,.90);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.brand { width:96px; flex:0 0 auto; }
.brand img { width:96px; height:auto; }
.main-nav { display:flex; align-items:center; gap:28px; font-size:13px; font-weight:700; }
.main-nav > a:not(.nav-cta) { opacity:.88; }
.main-nav > a:not(.nav-cta):hover { color:var(--blue); opacity:1; }
.nav-cta {
  background:var(--pink);
  padding:14px 20px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:900;
}
.menu-toggle {
  display:none;
  color:#fff;
  background:transparent;
  border:1px solid var(--line);
  padding:9px 12px;
  font-size:12px;
}

.hero {
  min-height:100svh;
  padding:160px max(28px, 5vw) 86px;
  position:relative;
  display:flex;
  align-items:flex-end;
  isolation:isolate;
  overflow:hidden; /* voorkomt zichtbare naden onderaan de hero */
}
.hero-image {
  position:absolute;
  inset:-2px 0 -54px 0; /* laat de foto iets verder doorlopen dan de overlay */
  z-index:-3;
  background-color:#050507;
  background-image:url("assets/hero-v311e-all-six.png");
  background-repeat:no-repeat;
  background-position:right center;
  background-size:64% auto;
  transform:scale(1.035);
}
.hero-shade {
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg, rgba(5,5,7,.99) 0%, rgba(5,5,7,.93) 27%, rgba(5,5,7,.60) 43%, rgba(5,5,7,.18) 60%, rgba(5,5,7,.06) 82%),
    linear-gradient(180deg, rgba(5,5,7,0) 0%, rgba(5,5,7,0) 60%, rgba(5,5,7,.58) 82%, rgba(5,5,7,.96) 100%);
}
.hero::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:72px;
  z-index:-1;
  background:linear-gradient(180deg, rgba(5,5,7,0) 0%, rgba(5,5,7,.72) 55%, var(--bg) 100%);
  pointer-events:none;
}
.hero-content { max-width:760px; }
.eyebrow {
  margin:0 0 14px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.section-label {
  margin:0 0 18px;
  font-family:"Arial Black", Impact, sans-serif;
  font-size:clamp(24px, 1.8vw, 32px);
  font-weight:900;
  letter-spacing:.14em;
  line-height:1;
  text-transform:uppercase;
}
.hero h1,h2 {
  margin:0;
  font-family:"Arial Black", Impact, sans-serif;
  text-transform:uppercase;
  letter-spacing:-.055em;
  line-height:.90;
}
.hero h1 {
  font-size:clamp(72px, 10vw, 144px);
  display:flex;
  flex-direction:column;
}
.hero-tagline {
  margin:26px 0 8px;
  font-size:clamp(21px, 2vw, 31px);
  font-weight:800;
  letter-spacing:-.03em;
}
.hero-tagline strong { color:var(--yellow); }
.hero-copy { max-width:620px; color:#E9E5E9; font-size:18px; }

.actions { margin-top:28px; display:flex; flex-wrap:wrap; gap:12px; }
.btn {
  min-height:52px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  font-size:13px;
  font-weight:900;
  transition:.2s ease;
}
.btn:hover { transform:translateY(-2px); }
.btn-blue { background:var(--blue); color:#040507; }
.btn-pink { background:var(--pink); color:#fff; }
.btn-outline { border:1px solid rgba(255,255,255,.35); }
.btn-outline:hover { background:#fff; color:#050507; }

.show-section,
.video-section,
.band-section {
  width:min(var(--max), calc(100% - 56px));
  margin:0 auto;
  padding:118px 0;
  display:grid;
  gap:56px;
  align-items:center;
}
.show-section { grid-template-columns:.96fr 1.04fr; }
.video-section { grid-template-columns:.58fr 1.42fr; }
.band-section { grid-template-columns:1.05fr .95fr; border-top:1px solid var(--line); }

.section-copy h2,
.video-copy h2,
.band-copy h2,
.section-head h2,
.contact-copy h2 {
  font-size:clamp(46px, 5.7vw, 82px);
}
.accent-line { color:var(--pink); }
.section-copy p,
.video-copy p,
.band-copy p {
  color:var(--muted);
  max-width:610px;
  font-size:17px;
}
.section-copy .lead { color:var(--white); font-size:22px; }

.section-image,.band-image { margin:0; overflow:hidden; background:var(--panel); }
.section-image img { aspect-ratio:4/3; object-fit:cover; }
.band-image img { aspect-ratio:4/5; object-fit:cover; object-position:center 35%; }

.show-principles {
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  margin-top:26px;
  color:var(--white);
  font-family:"Arial Black", Impact, sans-serif;
  font-size:clamp(24px, 2.9vw, 40px);
  letter-spacing:-.03em;
  line-height:.96;
}
.show-principles span {
  display:inline-block;
}
.show-principles span:nth-child(1){color:var(--blue)}
.show-principles span:nth-child(2){color:var(--pink)}
.show-principles span:nth-child(3){color:var(--yellow)}
.show-principles span:nth-child(4){color:var(--blue)}
.show-principles span:nth-child(5){color:var(--pink)}

.video-frame {
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid rgba(71,158,224,.35);
  box-shadow:0 25px 70px rgba(71,158,224,.06);
}
.video-frame video {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
}

.statement-section {
  padding:92px max(28px, calc((100vw - var(--max))/2));
  background:#08080B;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.statement-inner { max-width:1050px; margin:auto; text-align:center; }
.statement-small {
  margin:0 0 20px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.2em;
  color:var(--yellow);
}
.statement-big {
  margin:0;
  font-family:"Arial Black", Impact, sans-serif;
  font-size:clamp(28px, 4.4vw, 62px);
  line-height:1.05;
  letter-spacing:-.04em;
}

.live-section {
  background:var(--panel);
  padding:130px max(28px, calc((100vw - var(--max))/2));
}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px;
  margin-bottom:52px;
}
.section-intro { max-width:430px; color:var(--muted); font-size:17px; }
.agenda { border-top:1px solid var(--line); }
.gig {
  padding:24px 0;
  display:grid;
  grid-template-columns:150px 1fr auto;
  gap:28px;
  align-items:center;
  border-bottom:1px solid var(--line);
}
.gig time { display:flex; align-items:center; gap:14px; }
.gig time strong {
  color:var(--yellow);
  font-family:"Arial Black", Impact, sans-serif;
  font-size:46px;
  line-height:1;
}
.gig time span { font-size:11px; letter-spacing:.10em; }
.gig h3 { margin:0; font-size:22px; }
.gig p { margin:3px 0 0; color:var(--muted); }
.tag,.small-link {
  padding:8px 10px;
  border:1px solid var(--line);
  font-size:11px;
  font-weight:900;
  letter-spacing:.09em;
}
.tag-live { color:var(--pink); border-color:rgba(207,44,121,.45); }
.small-link { color:var(--blue); border-color:rgba(71,158,224,.45); }
.section-action { margin-top:36px; }
.text-link { font-size:21px; font-weight:800; }
.text-link span { color:var(--pink); margin-left:8px; }

.bookable-inline {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:28px;
}
.bookable-inline span {
  padding:8px 11px;
  border:1px solid var(--line);
  color:#DCD8DE;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.photos-section {
  padding:135px max(28px, calc((100vw - var(--max))/2));
  background:var(--panel-2);
}
.photos-section .section-head { margin-bottom:46px; }
.gallery {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  grid-template-rows:330px 330px;
  gap:14px;
}
.gallery figure { margin:0; overflow:hidden; }
.gallery img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery figure:hover img { transform:scale(1.02); }
.gallery-main { grid-row:1 / span 2; }

.year-section {
  min-height:560px;
  display:grid;
  place-items:center;
  padding:90px 24px;
  background:#040406;
  text-align:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.year-content p,
.year-content span {
  display:block;
  margin:0;
  font-family:"Arial Black", Impact, sans-serif;
  letter-spacing:-.035em;
}
.year-content p { font-size:clamp(26px,4vw,54px); color:#fff; }
.year-content strong {
  display:block;
  margin:-4px 0 0;
  font-family:"Arial Black", Impact, sans-serif;
  font-size:clamp(110px,22vw,270px);
  line-height:.86;
  letter-spacing:-.07em;
  color:var(--pink);
}
.year-content span { font-size:clamp(26px,4.2vw,58px); color:var(--yellow); }

.contact-section {
  min-height:740px;
  padding:120px max(28px, calc((100vw - var(--max))/2));
  position:relative;
  display:flex;
  align-items:center;
  isolation:isolate;
}
.contact-image {
  position:absolute; inset:0; z-index:-2;
  background:url("assets/show-cassette-crowd.jpg") center 46%/cover no-repeat;
}
.contact-section::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(5,5,7,.98), rgba(5,5,7,.84) 55%, rgba(5,5,7,.23));
}
.contact-copy { max-width:760px; }
.contact-copy > p:not(.section-label,.contact-note) {
  color:#E7E3E8;
  max-width:610px;
  font-size:18px;
}
.contact-note { color:var(--muted); margin-top:26px; font-size:14px; }

footer {
  min-height:145px;
  padding:30px max(28px, calc((100vw - var(--max))/2));
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:30px;
  align-items:center;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
}
footer img { width:78px; }

.reveal {
  opacity:0;
  transform:translateY(18px);
  transition:opacity .75s ease, transform .75s ease;
}
.reveal.visible { opacity:1; transform:none; }

@media (max-width:900px) {
  .site-header { min-height:74px; padding:10px 18px; }
  .brand,.brand img { width:78px; }
  .menu-toggle { display:block; }
  .main-nav {
    position:absolute;
    top:74px; left:0; right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:18px;
    background:rgba(5,5,7,.98);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .main-nav.open { display:flex; }
  .main-nav a { padding:12px 0; }
  .nav-cta { text-align:center; margin-top:6px; }

  .hero { min-height:92svh; padding:125px 22px 62px; }
  .hero-image {
    inset:-2px 0 -42px 0;
    background-position:60% center;
    background-size:cover;
    transform:scale(1.03);
  }
  .hero-shade {
    background:
      linear-gradient(90deg, rgba(5,5,7,.95), rgba(5,5,7,.74) 55%, rgba(5,5,7,.26)),
      linear-gradient(180deg, rgba(5,5,7,0) 0%, rgba(5,5,7,0) 56%, rgba(5,5,7,.62) 82%, rgba(5,5,7,.96) 100%);
  }
  .hero::after { height:56px; }
  .hero h1 { font-size:clamp(62px,17vw,108px); }
  .hero-copy { max-width:92%; }

  .show-section,.video-section,.band-section {
    width:calc(100% - 44px);
    padding:92px 0;
    grid-template-columns:1fr;
    gap:34px;
  }
  .show-principles {
    gap:10px 16px;
    font-size:clamp(22px, 7vw, 32px);
  }
  .band-image { order:-1; }
  .live-section,.photos-section,.contact-section { padding:92px 22px; }
  .section-head { flex-direction:column; align-items:flex-start; }
  .gig { grid-template-columns:110px 1fr; gap:14px; }
  .tag,.small-link { grid-column:2; justify-self:start; }
  .gallery { grid-template-columns:1fr; grid-template-rows:58vh 38vh 38vh; }
  .gallery-main { grid-row:auto; }
  footer { grid-template-columns:1fr; gap:16px; }
}

@media (max-width:560px) {
  .hero h1 { font-size:clamp(55px,18vw,86px); }
  .hero-tagline { font-size:21px; }
  .actions .btn { width:100%; }
  .statement-section { padding:72px 22px; }
  .gig { grid-template-columns:88px 1fr; }
  .gig time strong { font-size:38px; }
  .gig h3 { font-size:19px; }
  .year-section { min-height:430px; }
}


@media (max-width:560px) {
  .section-label { font-size:16px; margin-bottom:14px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none !important; animation:none !important; }
  .reveal { opacity:1; transform:none; }
}


/* Versie 3.1: lokale Club Le Bon-video.
   De huidige bron is WhatsApp-gecomprimeerd; daarom wordt het videovlak
   op zeer brede schermen bewust niet onbeperkt groter getrokken. */
.video-section .video-frame {
  width:100%;
  max-width:960px;
  justify-self:end;
}
@media (max-width:900px) {
  .video-section .video-frame {
    max-width:none;
    justify-self:stretch;
  }
}


/* === Versie 3.5: SEO-structuur en rustige subpagina's === */
.quiet-link {
  display:inline-block;
  margin-top:18px;
  color:var(--blue);
  font-size:14px;
  font-weight:800;
}
.quiet-link:hover { color:var(--yellow); }
.block-link { margin-top:24px; }
.link-row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:28px;
}
.footer-seo-nav {
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:16px;
}
.footer-seo-nav a:hover { color:var(--blue); }

.subpage-main {
  min-height:70vh;
  padding-top:86px;
}
.subpage-hero {
  padding:130px max(28px, calc((100vw - var(--max))/2)) 80px;
  background:
    radial-gradient(circle at 82% 12%, rgba(207,44,121,.16), transparent 30%),
    radial-gradient(circle at 65% 0%, rgba(71,158,224,.10), transparent 28%),
    #07070A;
  border-bottom:1px solid var(--line);
}
.subpage-hero h1 {
  max-width:1040px;
  margin:0;
  font-family:"Arial Black", Impact, sans-serif;
  text-transform:uppercase;
  font-size:clamp(56px,8vw,116px);
  line-height:.90;
  letter-spacing:-.055em;
}
.subpage-hero > p:last-child {
  max-width:760px;
  margin:28px 0 0;
  color:#E7E3E8;
  font-size:20px;
}
.subpage-content {
  width:min(var(--max), calc(100% - 56px));
  margin:0 auto;
  padding:110px 0 140px;
}
.subpage-content h2 {
  font-size:clamp(32px,4vw,58px);
  margin-bottom:20px;
}
.subpage-content p {
  color:var(--muted);
  font-size:18px;
  max-width:740px;
}
.subpage-agenda { border-top:1px solid var(--line); }
.subpage-agenda .gig h2 {
  margin:0;
  font-family:inherit;
  text-transform:none;
  letter-spacing:0;
  line-height:1.2;
  font-size:23px;
}
.subpage-cta {
  margin-top:80px;
  padding:50px;
  background:var(--panel);
  border:1px solid var(--line);
}
.subpage-two-col {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
}
.booking-card {
  padding:42px;
  background:var(--panel);
  border:1px solid var(--line);
}
.booking-card .btn { margin:12px 8px 0 0; }
.clean-list {
  margin:24px 0 0;
  padding:0;
  list-style:none;
  color:#E8E5E9;
}
.clean-list li {
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.clean-list li::before {
  content:"→";
  color:var(--pink);
  margin-right:12px;
}
.subpage-photo {
  margin:0;
  overflow:hidden;
}
.subpage-photo img {
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}
.subpage-video {
  max-width:1050px;
  margin:0 auto 70px;
  aspect-ratio:16/9;
  border:1px solid rgba(71,158,224,.35);
  overflow:hidden;
  background:#000;
}
.subpage-video video {
  width:100%;
  height:100%;
  object-fit:cover;
}
.subpage-gallery {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.subpage-gallery img {
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}

@media (max-width:900px) {
  .footer-seo-nav { justify-content:flex-start; }
  .subpage-main { padding-top:74px; }
  .subpage-hero { padding:100px 22px 62px; }
  .subpage-content { width:calc(100% - 44px); padding:80px 0 100px; }
  .subpage-two-col { grid-template-columns:1fr; gap:42px; }
  .subpage-gallery { grid-template-columns:1fr; }
  .subpage-cta, .booking-card { padding:28px; }
}


/* === Versie 3.7: nieuwe beeldredactie en bandleden === */
.band-section-expanded {
  display:block;
}
.band-section-expanded .band-copy {
  max-width:900px;
}
.band-section-expanded .band-copy p {
  max-width:720px;
}
.member-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  margin-top:58px;
}
.member-card {
  position:relative;
  margin:0;
  background:#0B0B0F;
  border:1px solid var(--line);
  overflow:hidden;
}
.member-card img {
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  transition:transform .5s ease, filter .5s ease;
}
.member-card::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, transparent 52%, rgba(5,5,7,.22) 68%, rgba(5,5,7,.96) 100%);
}
.member-card > div {
  position:absolute;
  z-index:2;
  left:20px;
  right:20px;
  bottom:18px;
}
.member-card h3 {
  margin:0;
  font-family:"Arial Black", Impact, sans-serif;
  text-transform:uppercase;
  font-size:clamp(18px,2vw,27px);
  line-height:1;
  letter-spacing:-.025em;
}
.member-card p {
  margin:7px 0 0;
  color:var(--yellow);
  text-transform:uppercase;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
}
.member-card:hover img {
  transform:scale(1.025);
  filter:saturate(1.05);
}
.band-more {
  margin-top:34px;
  position:relative;
  z-index:4;
}
.band-more-link {
  margin-top:0;
  position:relative;
  z-index:5;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  border:1px solid rgba(71,158,224,.35);
  background:rgba(71,158,224,.06);
  font-size:17px;
}
.band-more-link:hover {
  color:var(--yellow);
  border-color:rgba(250,237,79,.55);
}
.member-grid-page {
  margin-top:55px;
  margin-bottom:80px;
}
.band-page-intro {
  max-width:800px;
}
.band-page-intro p {
  max-width:760px;
}
.photo-credit {
  margin:24px 0 0;
  color:var(--muted);
  font-size:13px !important;
}
.editorial-gallery img:nth-child(1),
.editorial-gallery img:nth-child(2) {
  aspect-ratio:16/10;
}
.contact-section::before {
  background:
    linear-gradient(90deg, rgba(5,5,7,.99), rgba(5,5,7,.90) 48%, rgba(5,5,7,.34)),
    linear-gradient(180deg, rgba(5,5,7,.12), rgba(5,5,7,.24));
}

@media (max-width:900px) {
  .member-grid {
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:10px;
    margin-top:40px;
  }
  .band-section-expanded {
    display:block;
  }
}
@media (max-width:560px) {
  .member-card > div { left:14px; right:14px; bottom:14px; }
  .member-card h3 { font-size:17px; }
}

/* === Versie 3.8: fotografiecredit === */
.footer-photo-credit {
  display:inline-block;
  margin-top:5px;
  font-size:12px;
  color:var(--muted);
}


/* === Versie 3.9: consistente kopaccenten en social presence === */
.social-links-inline {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}
.social-links-inline a {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 14px;
  border:1px solid rgba(255,255,255,.2);
  font-family:var(--display);
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.social-links-inline a:hover {
  color:var(--pink);
  border-color:var(--pink);
  transform:translateY(-1px);
}
.footer-social-nav {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:12px;
  font-weight:700;
}
.footer-social-nav a {
  color:#fff;
}
.footer-social-nav a:hover {
  color:var(--pink);
}
@media (max-width:900px) {
  .footer-social-nav { justify-content:flex-start; }
}

@media (min-width:901px) {
  footer { grid-template-columns:auto 1fr auto; }
  footer > img { grid-row:1 / span 2; }
  footer > p { grid-row:1 / span 2; }
  .footer-social-nav { grid-column:3; grid-row:1; }
  .footer-seo-nav { grid-column:3; grid-row:2; }
}

/* === Versie 3.11: nieuwe livefotografie === */
.show-principles span:nth-child(6){color:var(--yellow)}
.live-photo {
  margin:0 0 46px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:#08080B;
}
.live-photo img {
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center 46%;
}
.contact-image {
  background-image:url("assets/dvo-crowd-from-stage.jpg");
  background-position:center 48%;
}
@media (max-width:900px) {
  .live-photo { margin-bottom:34px; }
  .live-photo img { aspect-ratio:4/3; object-position:center center; }
  .contact-image { background-position:58% center; }
}