/* =========================================================
   CRAZY KROEGENTOCHT — 10 JAAR ANNIVERSARY EDITION
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,600&family=Archivo+Black&display=swap');

:root{
  /* palette — pulled from the poster & confetti, not a template default */
  --ink:        #0b0704;
  --ink-2:      #150c08;
  --paper:      #f4ede1;
  --red:        #c31c1c;
  --red-deep:   #6e0f0f;
  --orange:     #ff6a1a;
  --amber:      #ffb400;
  --gold:       #f2c94c;

  --line: rgba(244,237,225,0.14);

  --font-display: 'Anton', 'Archivo Black', sans-serif;
  --font-body: 'Archivo', sans-serif;

  --gap: clamp(1rem, 3vw, 2.5rem);
  --pad: clamp(1.25rem, 5vw, 4.5rem);

  --ease: cubic-bezier(.22,.9,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; border:none; background:none; color:inherit; cursor:pointer; }
section{ position:relative; }

.wrap{ max-width:1360px; margin-inline:auto; padding-inline:var(--pad); }
.eyebrow{ font-weight:700; font-size:.8rem; letter-spacing:.14em; color:var(--amber); }

/* subtle grain overlay for texture instead of flat black */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:2; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* =========================================================
   ACHTERGRONDVIDEO — vast over de volledige pagina, achter alle tekst
   ========================================================= */
.site-video{
  position:fixed; inset:0; z-index:-2; overflow:hidden; background:var(--ink);
}
.site-video video{
  position:absolute; top:50%; left:50%;
  /* Schermbreedte/-hoogte als basis (16:9), niet de afmetingen van de ouder —
     zo blijft de video altijd volledig schermvullend, ongeacht browser/render-eigenaardigheden. */
  width:100vw; height:56.25vw;       /* 100vw * 9/16 */
  min-height:100vh; min-width:177.78vh; /* 100vh * 16/9 */
  transform:translate(-50%,-50%);
  object-fit:cover;
}
.site-video__scrim{
  position:fixed; inset:0; z-index:-1;
  /* 75% doorschijnend — de film moet duidelijk zichtbaar blijven achter de tekst */
  background:linear-gradient(180deg, rgba(11,7,4,.22) 0%, rgba(11,7,4,.18) 40%, rgba(11,7,4,.22) 100%);
}
@media (prefers-reduced-motion: reduce){
  .site-video video{ display:none; }
  .site-video{ background:var(--ink); }
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--pad);
  transition:background .35s var(--ease), padding .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(11,7,4,0.88);
  backdrop-filter:blur(10px);
  padding-block:.7rem;
  border-color:var(--line);
}
.nav__logo{
  font-family:var(--font-display);
  font-size:clamp(1.1rem,2vw,1.5rem);
  letter-spacing:.01em;
  display:flex; align-items:baseline; gap:.4rem;
}
.nav__logo b{ color:var(--red); }
.nav__logo span{ font-family:var(--font-body); font-weight:700; font-size:.55em; color:var(--amber); letter-spacing:.1em; }

.nav__links{ display:flex; gap:clamp(1rem,2vw,2rem); }
.nav__links a{
  font-size:.82rem; font-weight:700; letter-spacing:.08em;
  position:relative; padding-bottom:.2rem;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0%;
  background:var(--orange); transition:width .3s var(--ease);
}
.nav__links a:hover::after{ width:100%; }

.nav__burger{ display:none; width:2.4rem; height:2.4rem; position:relative; z-index:210; }
.nav__burger span{
  display:block; position:absolute; left:.4rem; right:.4rem; height:2px; background:var(--paper);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav__burger span:nth-child(1){ top:.85rem; }
.nav__burger span:nth-child(2){ top:1.25rem; }
.nav__burger span:nth-child(3){ top:1.65rem; }
.nav__burger.open span:nth-child(1){ transform:translateY(.4rem) rotate(45deg); }
.nav__burger.open span:nth-child(2){ opacity:0; }
.nav__burger.open span:nth-child(3){ transform:translateY(-.4rem) rotate(-45deg); }

.mobile-menu{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:200; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; padding:0 8vw;
  transform:translateY(-100%); transition:transform .5s var(--ease), visibility 0s linear .5s;
  visibility:hidden; pointer-events:none;
}
.mobile-menu.open{ transform:translateY(0); visibility:visible; pointer-events:auto; transition:transform .5s var(--ease); }
.mobile-menu a{
  font-family:var(--font-display); font-size:clamp(2rem,10vw,3.2rem);
  padding:.35rem 0; border-bottom:1px solid var(--line); color:var(--paper);
}
.mobile-menu a:active{ color:var(--orange); }
.mobile-menu__foot{ margin-top:2rem; font-size:.85rem; color:var(--amber); font-weight:700; letter-spacing:.08em; }

@media (max-width:860px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; height:100vh; height:100svh; min-height:560px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:transparent;
}
.hero__overlay{
  position:absolute; inset:0; z-index:1;
  /* lichter gemaakt zodat de achtergrondfilm door de tekst heen zichtbaar blijft */
  background:
    linear-gradient(0deg, rgba(11,7,4,.55) 0%, rgba(11,7,4,.28) 32%, rgba(11,7,4,.08) 55%, rgba(11,7,4,.28) 100%),
    linear-gradient(100deg, rgba(11,7,4,.18), transparent 45%);
}
.hero__content{
  position:relative; z-index:2; padding:clamp(5.5rem,14vh,8rem) var(--pad) clamp(2.2rem,6vw,4rem);
  width:100%;
}
.hero__kicker{
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:800; font-size:.78rem; letter-spacing:.16em; color:var(--gold);
  margin-bottom:.9rem;
}
.hero__kicker .dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--red); box-shadow:0 0 10px 2px var(--red); animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

.hero__title{
  font-family:var(--font-display);
  font-size:clamp(2.7rem, 10.5vw, 7.6rem);
  line-height:.86;
  letter-spacing:-.01em;
  color:var(--paper);
  text-transform:uppercase;
  display:flex;
  flex-direction:column;
  overflow-wrap:break-word;
  max-width:100%;
}
@media (max-width:480px){
  .hero__title{ font-size:clamp(1.7rem, 9.4vw, 7.6rem); letter-spacing:-.02em; }
}
.hero__title-top{
  display:flex; align-items:baseline; gap:.2em;
}
.hero__title .num{
  color:var(--red); -webkit-text-stroke:2px var(--gold);
  display:inline-block; line-height:1;
}
.hero__title .word{ display:inline-block; line-height:1; }
.hero__title .accent{
  background:linear-gradient(92deg, var(--orange), var(--gold) 60%, var(--red));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:block;
}
.hero__datebar{
  display:flex; flex-wrap:wrap; align-items:baseline; row-gap:.6rem; column-gap:1.1rem;
  margin-top:clamp(1.6rem,4vw,2.4rem);
  font-family:var(--font-display);
  font-size:clamp(1.5rem,4.2vw,2.6rem);
  letter-spacing:.01em;
  text-transform:uppercase;
}
.hero__datebar-main{ color:var(--gold); }
.hero__datebar-sep{ color:rgba(244,237,225,.45); font-family:var(--font-body); }
.hero__datebar-time{
  font-family:var(--font-body); font-weight:800; font-size:clamp(.9rem,1.6vw,1.15rem); letter-spacing:.08em;
  color:var(--paper); border:1px solid rgba(244,237,225,.5); padding:.4rem .9rem; border-radius:100px;
}
.hero__tagline{ font-size:1rem; font-weight:600; color:rgba(244,237,225,.8); max-width:26ch; margin-top:1rem; }

/* =========================================================
   GRATIS INKOM — ouderwetse stempel, "stempelt" na 10 seconden
   ========================================================= */
.hero__stamp{
  position:absolute; z-index:5;
  top:clamp(5.5rem,13vh,7.5rem); right:clamp(1.25rem,5vw,4.5rem);
  width:clamp(7.5rem,13vw,10.5rem); aspect-ratio:1/1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15em;
  border:3px solid var(--red); border-radius:50%;
  box-shadow:0 0 0 4px rgba(195,28,28,.35) inset, 0 4px 22px rgba(0,0,0,.45);
  background:rgba(11,7,4,.42);
  backdrop-filter:blur(1px);
  color:var(--red);
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(.85rem,1.6vw,1.15rem); letter-spacing:.06em; line-height:1.15;
  text-align:center;
  transform:scale(2.6) rotate(-18deg);
  opacity:0;
  pointer-events:none;
  transition:transform .35s cubic-bezier(.2,1.6,.4,1), opacity .15s linear;
}
.hero__stamp::before{
  content:''; position:absolute; inset:7px; border:1px solid var(--red); border-radius:50%; opacity:.7;
}
.hero__stamp.is-stamped{
  transform:scale(1) rotate(-11deg);
  opacity:1;
}
@media (prefers-reduced-motion: reduce){
  .hero__stamp{ transition:opacity .4s linear; transform:rotate(-11deg); }
}

/* =========================================================
   "10 JAAR CRAZY" — flashende neontekst, rechts, verschijnt na 5s
   (staat los van de stempel zodat beide elkaar nooit overlappen)
   ========================================================= */
.hero__flash{
  position:absolute; z-index:4;
  top:clamp(15rem,34vh,20rem); right:clamp(1.25rem,5vw,4.5rem);
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(1.3rem,3vw,2.3rem); line-height:1.15; text-align:right;
  color:var(--amber);
  text-shadow:0 0 10px rgba(255,183,77,.85), 0 0 26px rgba(255,138,61,.5);
  background:rgba(11,7,4,.5);
  border-radius:.6rem;
  padding:.5rem 1rem;
  backdrop-filter:blur(1px);
  opacity:0;
  pointer-events:none;
}
.hero__flash.is-on{
  animation:heroFlashIn 1.5s steps(1,end) forwards;
}
@keyframes heroFlashIn{
  0%{opacity:0;}
  8%{opacity:1;}
  16%{opacity:.15;}
  26%{opacity:1;}
  34%{opacity:.2;}
  50%{opacity:1;}
  62%{opacity:.25;}
  76%{opacity:1;}
  100%{opacity:1;}
}
@media (max-width:700px){
  .hero__flash{ top:clamp(11rem,30vh,14rem); font-size:clamp(1.05rem,4.2vw,1.5rem); }
}
@media (prefers-reduced-motion: reduce){
  .hero__flash.is-on{ animation:none; opacity:1; }
}

.hero__scroll{
  position:absolute; right:var(--pad); bottom:1.6rem; z-index:2;
  writing-mode:vertical-rl; font-size:.72rem; letter-spacing:.18em; font-weight:700; color:rgba(244,237,225,.6);
  display:flex; align-items:center; gap:.6rem;
}
.hero__scroll::after{ content:''; width:1px; height:34px; background:linear-gradient(var(--orange),transparent); }
@media (max-width:700px){ .hero__scroll{ display:none; } }

/* =========================================================
   STATEMENT / INTRO
   ========================================================= */
.statement{ padding:clamp(4.5rem,10vw,8rem) var(--pad); background:transparent; position:relative; }
.statement__grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:end; }
.statement__title{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(2.4rem,7vw,5.4rem); line-height:.94;
}
.statement__title em{ font-style:normal; color:var(--red); }
.statement__body p{ font-size:clamp(1rem,1.6vw,1.2rem); color:rgba(244,237,225,.82); max-width:42ch; }
.statement__body p + p{ margin-top:1rem; }
@media (max-width:820px){ .statement__grid{ grid-template-columns:1fr; } }

/* =========================================================
   POSTER
   ========================================================= */
.poster{
  padding:clamp(3rem,8vw,6rem) var(--pad) clamp(5rem,10vw,8rem);
  background:radial-gradient(60% 60% at 80% 10%, rgba(195,28,28,.2), transparent 60%);
  overflow:hidden;
}
.poster__grid{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2.5rem,6vw,5rem); align-items:center;
}
.poster__art{ position:relative; perspective:1400px; }
.poster__frame{
  position:relative; transform:rotate(-4deg);
  transition:transform .6s var(--ease);
  will-change:transform;
}
.poster__frame:hover{ transform:rotate(-1.5deg) scale(1.015); }
.poster__frame img{
  width:100%; border-radius:6px;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(255,196,0,.15);
}
.poster__glow{
  position:absolute; inset:-18%; z-index:-1; filter:blur(60px); opacity:.55;
  background:conic-gradient(from 120deg, var(--red), var(--orange), var(--gold), var(--red));
}
.poster__badge{
  position:absolute; width:clamp(90px,13vw,150px); right:-6%; top:-8%;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.6));
  animation:spin-slow 22s linear infinite;
}
@keyframes spin-slow{ from{ transform:rotate(0);} to{ transform:rotate(360deg);} }

.poster__copy .eyebrow{ margin-bottom:1rem; display:block; }
.poster__copy h3{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(2rem,5vw,3.4rem); line-height:1; margin-bottom:1.2rem;
}
.poster__copy p{ color:rgba(244,237,225,.78); max-width:44ch; margin-bottom:.8rem; }
.poster__facts{ display:flex; gap:2.2rem; margin-top:1.8rem; flex-wrap:wrap; }
.poster__facts div strong{ display:block; font-family:var(--font-display); font-size:1.7rem; color:var(--gold); }
.poster__facts div span{ font-size:.72rem; letter-spacing:.1em; font-weight:700; color:rgba(244,237,225,.6); }

@media (max-width:900px){
  .poster__grid{ grid-template-columns:1fr; }
  .poster__frame{ max-width:340px; margin-inline:auto; }
}

/* =========================================================
   SECTION HEADS (shared)
   ========================================================= */
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
  margin-bottom:clamp(2rem,5vw,3.5rem); flex-wrap:wrap;
}
.section-head h2{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(2.3rem,6vw,4.6rem); line-height:.92;
}
.section-head p{ max-width:34ch; color:rgba(244,237,225,.65); font-size:.98rem; }

/* =========================================================
   DJ LINEUP
   ========================================================= */
.djs{ padding:clamp(4rem,9vw,7rem) 0; background:transparent; }
.djs .wrap{ padding-inline:var(--pad); }
.djs__scroller{
  display:flex; gap:clamp(1rem,2vw,1.6rem); overflow-x:auto; padding:.4rem var(--pad) 1.8rem;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.djs__scroller::-webkit-scrollbar{ height:6px; }
.djs__scroller::-webkit-scrollbar-thumb{ background:var(--red-deep); border-radius:4px; }
.dj-card{
  position:relative; flex:0 0 auto; width:clamp(210px,26vw,300px); aspect-ratio:3/4;
  border-radius:10px; overflow:hidden; scroll-snap-align:start;
  background:linear-gradient(160deg,#2b0f0a,#150a06);
  border:1px solid var(--line);
}
.dj-card__ph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(244,237,225,.28); font-size:.75rem; font-weight:700; letter-spacing:.08em; text-align:center; padding:1.2rem;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px);
}
.dj-card__info{
  position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1.1rem 1.2rem;
  background:linear-gradient(0deg, rgba(0,0,0,.92), transparent);
}
.dj-card__info h3{ font-family:var(--font-display); font-size:1.5rem; text-transform:uppercase; }
.dj-card__info span{ font-size:.75rem; color:var(--amber); font-weight:700; letter-spacing:.06em; }
.dj-card__num{
  position:absolute; top:.9rem; left:.9rem; font-family:var(--font-display); font-size:1rem; color:rgba(244,237,225,.5);
}

/* =========================================================
   CAFÉS
   ========================================================= */
.cafes{ padding:clamp(4rem,9vw,7rem) var(--pad); background:transparent; }
.cafes__grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(2rem,5vw,3.5rem) clamp(1.2rem,4vw,2.5rem);
  margin-top:clamp(2.2rem,5vw,3.5rem);
  justify-items:center;
}
.cafe-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:1rem;
  max-width:14rem;
}
.cafe-card__logo{
  width:clamp(6.5rem,13vw,9rem); aspect-ratio:1/1; border-radius:50%;
  background:rgba(244,237,225,.05); border:1px solid rgba(244,237,225,.2);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  font-size:.68rem; letter-spacing:.08em; color:rgba(244,237,225,.4); padding:.6rem;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.cafe-card__logo img{ width:100%; height:100%; object-fit:contain; }
.cafe-card:hover .cafe-card__logo{ border-color:var(--gold); transform:translateY(-3px); }
.cafe-card__name{
  font-family:var(--font-display); font-size:clamp(1.05rem,2vw,1.35rem);
  text-transform:uppercase; letter-spacing:.02em; color:var(--paper);
}
@media (max-width:820px){
  .cafes__grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:480px){
  .cafes__grid{ grid-template-columns:1fr; }
}

/* =========================================================
   PROGRAMMA
   ========================================================= */
.programma{ padding:clamp(4rem,9vw,7rem) var(--pad); background:transparent; }
.programma__filters{ display:flex; gap:.6rem; margin-bottom:2rem; flex-wrap:wrap; }
.filter-btn{
  padding:.55rem 1.2rem; border-radius:100px; border:1px solid var(--line);
  font-size:.78rem; font-weight:700; letter-spacing:.06em; color:rgba(244,237,225,.7);
  transition:all .25s var(--ease);
}
.filter-btn.active, .filter-btn:hover{ background:var(--red); border-color:var(--red); color:var(--paper); }
.programma__grid{ display:grid; gap:.7rem; }
.prog-item{
  display:grid; grid-template-columns:5.5rem 1fr auto; gap:1rem; align-items:center;
  background:rgba(244,237,225,.03); border:1px solid var(--line); border-radius:10px;
  padding:1rem 1.2rem;
}
.prog-item__time{ font-family:var(--font-display); font-size:1.4rem; color:var(--gold); }
.prog-item__dj{ font-weight:800; font-size:1.05rem; }
.prog-item__cafe{ font-size:.82rem; color:rgba(244,237,225,.55); }
.prog-item__now{
  font-size:.65rem; font-weight:800; letter-spacing:.08em; color:var(--ink);
  background:var(--amber); padding:.3rem .6rem; border-radius:100px; white-space:nowrap;
}
@media (max-width:640px){
  .prog-item{ grid-template-columns:4rem 1fr; }
  .prog-item__now{ grid-column:2; justify-self:start; }
}

/* =========================================================
   RADIO CHRISTINA
   ========================================================= */
.radio{
  padding:clamp(4.5rem,10vw,7.5rem) var(--pad);
  background:transparent;
  position:relative; overflow:hidden;
}
.radio__grid{ display:grid; grid-template-columns:1fr auto; gap:clamp(2rem,6vw,4rem); align-items:center; }
.radio .eyebrow{ display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1rem; }
.radio__onair{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.68rem; font-weight:800; letter-spacing:.1em;
  color:var(--red); border:1px solid var(--red); padding:.25rem .6rem; border-radius:4px;
}
.radio__onair i{ width:.4rem; height:.4rem; border-radius:50%; background:var(--red); animation:pulse 1.4s infinite; }
.radio h2{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(2.2rem,6vw,4rem); line-height:.95; margin-bottom:1.1rem; }
.radio p{ color:rgba(244,237,225,.75); max-width:40ch; margin-bottom:1.8rem; }
.btn{
  display:inline-flex; align-items:center; gap:.7rem; padding:1rem 1.7rem; border-radius:100px;
  font-weight:800; font-size:.85rem; letter-spacing:.05em;
  background:var(--red); color:var(--paper); transition:transform .25s var(--ease), background .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); background:var(--orange); }
.btn--ghost{ background:transparent; border:1px solid rgba(244,237,225,.35); }
.btn--ghost:hover{ background:rgba(244,237,225,.08); }
.radio__bars{
  display:flex; align-items:flex-end; gap:5px; height:150px; width:min(46vw,220px);
}
.radio__bars span{
  flex:1; background:linear-gradient(0deg,var(--red),var(--orange),var(--gold));
  border-radius:3px 3px 0 0; animation:bar 1.1s ease-in-out infinite;
}
@keyframes bar{ 0%,100%{ transform:scaleY(.25); } 50%{ transform:scaleY(1); } }
.radio__bars span:nth-child(odd){ animation-duration:.9s; }
.radio__bars span:nth-child(3n){ animation-duration:1.3s; animation-delay:.15s; }
.radio__bars span:nth-child(5n){ animation-delay:.3s; }

/* =========================================================
   CBAVC
   ========================================================= */
.cbavc{ padding:clamp(4.5rem,10vw,7.5rem) var(--pad); background:transparent; }
.cbavc__panel{
  border:1px solid var(--line); border-radius:16px; padding:clamp(2rem,6vw,4rem);
  background:linear-gradient(135deg, rgba(195,28,28,.10), rgba(255,180,0,.05));
  display:grid; grid-template-columns:1fr auto; gap:2.5rem; align-items:center;
}
.cbavc h2{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(2.2rem,5.5vw,3.6rem); margin-bottom:1rem; }
.cbavc p{ color:rgba(244,237,225,.78); max-width:46ch; }
@media (max-width:760px){ .cbavc__panel{ grid-template-columns:1fr; } }

/* =========================================================
   AFTERMOVIE
   ========================================================= */
.aftermovie{ padding:clamp(4.5rem,10vw,7.5rem) var(--pad); background:transparent; }
.aftermovie__frame{
  display:block; position:relative; border-radius:16px; overflow:hidden; aspect-ratio:16/9; cursor:pointer;
  background:#000;
}
.aftermovie__frame img{ width:100%; height:100%; object-fit:cover; opacity:.7; transition:opacity .3s, transform .6s var(--ease); }
.aftermovie__frame:hover img{ opacity:.5; transform:scale(1.03); }
.aftermovie__frame::after{
  content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.75), transparent 55%);
}
.aftermovie__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:clamp(72px,10vw,110px); height:clamp(72px,10vw,110px); border-radius:50%;
  background:var(--red); display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 0 rgba(195,28,28,.6); animation:ring 2.2s infinite;
}
@keyframes ring{ 0%{ box-shadow:0 0 0 0 rgba(195,28,28,.5);} 70%{ box-shadow:0 0 0 26px rgba(195,28,28,0);} 100%{ box-shadow:0 0 0 0 rgba(195,28,28,0);} }
.aftermovie__play svg{ width:34%; height:34%; fill:var(--paper); margin-left:8%; }
.aftermovie__label{
  position:absolute; left:1.6rem; bottom:1.6rem; z-index:2; font-family:var(--font-display);
  font-size:clamp(1.4rem,4vw,2.4rem); text-transform:uppercase;
}
.aftermovie iframe{ width:100%; height:100%; border:0; display:block; }

/* =========================================================
   PHOTO WALL
   ========================================================= */
.photos{ padding:clamp(4.5rem,10vw,7.5rem) var(--pad); background:transparent; }
.photos__wall{
  display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:120px; gap:.7rem;
}
.photos__wall > div{
  border-radius:8px; overflow:hidden; position:relative;
  background:linear-gradient(160deg,#241009,#0f0704);
}
.photos__wall > div img{ width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.08); transition:opacity .7s var(--ease), transform .9s var(--ease); }
.photos__wall > div.in img{ opacity:1; transform:scale(1); }
.photos__wall .ph1{ grid-column:span 3; grid-row:span 3; }
.photos__wall .ph2{ grid-column:span 3; grid-row:span 2; }
.photos__wall .ph3{ grid-column:span 2; grid-row:span 2; }
.photos__wall .ph4{ grid-column:span 2; grid-row:span 2; }
.photos__wall .ph5{ grid-column:span 2; grid-row:span 3; }
.photos__wall .ph-ph{ display:flex; align-items:center; justify-content:center; font-size:.68rem; letter-spacing:.06em; color:rgba(244,237,225,.3); text-align:center; padding:.6rem; }
@media (max-width:760px){
  .photos__wall{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .photos__wall .ph1,.photos__wall .ph2,.photos__wall .ph3,.photos__wall .ph4,.photos__wall .ph5{ grid-column:span 1; grid-row:span 2; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ padding:clamp(3rem,7vw,5rem) var(--pad) 2rem; background:rgba(11,7,4,.55); border-top:1px solid var(--line); }
.footer__top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2.5rem; margin-bottom:2.5rem; }
.footer__logo{ font-family:var(--font-display); font-size:2rem; text-transform:uppercase; }
.footer__logo b{ color:var(--red); }
.footer__cols{ display:flex; gap:clamp(2rem,5vw,4.5rem); flex-wrap:wrap; }
.footer__col h4{ font-size:.72rem; letter-spacing:.1em; font-weight:800; color:var(--amber); margin-bottom:.8rem; }
.footer__col a, .footer__col span{ display:block; font-size:.9rem; color:rgba(244,237,225,.7); margin-bottom:.5rem; }
.footer__bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.78rem; color:rgba(244,237,225,.4); border-top:1px solid var(--line); padding-top:1.4rem; }

/* generic reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }