/* ============================================================
   THE FOUR DEUCES — Grand Art Deco, Anno 1924
   Noir & gold · velvet · foil shimmer · the wow entrance
   ============================================================ */

:root{
  --black:      #0a0806;
  --black-2:    #110d09;
  --ink:        #181208;
  --gold:       #c9a24b;
  --gold-bright:#f0d693;
  --gold-foil:  #f7ecc4;
  --gold-deep:  #8c6d2f;
  --gold-shadow:#5a4519;
  --cream:      #ece3cf;
  --muted:      #a3957a;
  --velvet:     #4a121b;
  --velvet-2:   #2c0a10;
  --maxw:       1120px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background: var(--black);
  color:var(--cream);
  font-family:'EB Garamond', Georgia, serif;
  font-size:19px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.locked{ overflow:hidden; height:100vh; }

img{ display:block; max-width:100%; }

/* ---- film grain + vignette over whole page ---- */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9000;
  background:
    radial-gradient(130% 100% at 50% 40%, transparent 58%, rgba(0,0,0,.55) 100%);
  mix-blend-mode:multiply;
}

/* ============================================================
   DECO UTILITIES
   ============================================================ */

/* gold-foil animated text */
.foil{
  background:linear-gradient(106deg,
    #8c6d2f 0%, #c9a24b 18%, #f7ecc4 36%, #e8c977 50%,
    #f7ecc4 62%, #c9a24b 80%, #8c6d2f 100%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:foilshift 9s ease-in-out infinite;
}
@keyframes foilshift{ 0%,100%{background-position:0% 0} 50%{background-position:100% 0} }

/* radiating sunburst */
.sunburst{
  position:absolute; border-radius:50%; pointer-events:none;
  background:repeating-conic-gradient(from 0deg,
    rgba(201,162,75,.20) 0deg 1.8deg, rgba(201,162,75,0) 1.8deg 8deg);
  -webkit-mask:radial-gradient(circle, #000 0 30%, rgba(0,0,0,.55) 50%, transparent 72%);
          mask:radial-gradient(circle, #000 0 30%, rgba(0,0,0,.55) 50%, transparent 72%);
  z-index:0;
}
.sunburst.slow{ animation:spin 240s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* thin rule with center lozenge + fan ends */
.rule{ display:flex; align-items:center; justify-content:center; gap:12px; }
.rule i{ height:1px; flex:1; max-width:160px;
  background:linear-gradient(90deg, transparent, var(--gold-deep), var(--gold), var(--gold-deep), transparent); }
.rule b{ width:8px; height:8px; transform:rotate(45deg); background:var(--gold);
  box-shadow:0 0 10px rgba(201,162,75,.6); }
.rule b.sm{ width:5px; height:5px; }

/* deco section ornament (stepped chevron diamond) */
.deco-mark{
  display:inline-block; color:var(--gold); font-size:1rem; letter-spacing:.3em;
}

/* running deco border strip (top & bottom of page) */
.deco-rule{
  height:8px;
  background:
    repeating-linear-gradient(90deg, var(--black) 0 6px, transparent 6px 7px),
    linear-gradient(90deg,var(--gold-shadow),var(--gold-bright) 50%,var(--gold-shadow));
  box-shadow:0 0 18px rgba(201,162,75,.4);
}

/* drop cap for prose */
.prose.lead p:first-of-type::first-letter{
  font-family:'Cinzel Decorative', serif; font-weight:900;
  float:left; font-size:4.4rem; line-height:.78; padding:.06em .14em 0 0;
  color:var(--gold-bright); text-shadow:0 0 22px rgba(201,162,75,.4);
}

/* scroll reveal */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.12s } .reveal.d2{ transition-delay:.24s }
.reveal.d3{ transition-delay:.36s } .reveal.d4{ transition-delay:.48s }

/* ============================================================
   THE WOW ENTRANCE — speakeasy door
   ============================================================ */
.entrance{
  position:fixed; inset:0; z-index:8000; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 50%, #1a0c0f 0%, #0a0607 70%);
  display:flex; align-items:center; justify-content:center;
  perspective:1700px;
  transition:opacity 1.1s ease 1s, visibility 0s linear 2.1s;
}
.entrance.opened{ opacity:0; visibility:hidden; }

/* velvet curtains behind the doors */
.curtain{
  position:absolute; top:0; bottom:0; width:54%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.45) 0 14px, rgba(255,255,255,.04) 14px 28px),
    linear-gradient(180deg, var(--velvet) 0%, var(--velvet-2) 100%);
  box-shadow:inset 0 0 120px rgba(0,0,0,.7);
  z-index:1; transition:transform 1.5s cubic-bezier(.7,0,.2,1) .15s;
}
.curtain.l{ left:0; transform-origin:left; }
.curtain.r{ right:0; transform-origin:right; }
.entrance.opened .curtain.l{ transform:translateX(-102%); }
.entrance.opened .curtain.r{ transform:translateX(102%); }

/* the two doors */
.door{
  position:absolute; top:0; bottom:0; width:50%;
  background:
    linear-gradient(180deg, #15110b, #0c0907);
  z-index:2;
  transition:transform 1.6s cubic-bezier(.65,0,.25,1);
  backface-visibility:hidden;
}
.door::before{ /* gold inlay frame */
  content:""; position:absolute; inset:26px;
  border:2px solid var(--gold-deep);
  box-shadow:inset 0 0 0 6px rgba(0,0,0,.6), inset 0 0 0 8px var(--gold-shadow), inset 0 0 60px rgba(201,162,75,.06);
}
.door::after{ /* vertical reeded gold lines */
  content:""; position:absolute; inset:44px;
  background:repeating-linear-gradient(90deg,
    transparent 0 22px, rgba(201,162,75,.12) 22px 23px);
  -webkit-mask:linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
          mask:linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.door.l{ left:0; transform-origin:left center; }
.door.r{ right:0; transform-origin:right center; }
.entrance.opened .door.l{ transform:rotateY(105deg); }
.entrance.opened .door.r{ transform:rotateY(-105deg); }

/* door sunburst fan at top of each door */
.door .fan{
  position:absolute; top:60px; left:50%; width:300px; height:150px; margin-left:-150px;
  background:repeating-conic-gradient(from 180deg at 50% 100%,
    var(--gold-deep) 0deg 1deg, transparent 1deg 9deg);
  -webkit-mask:radial-gradient(120px 120px at 50% 100%, #000 60%, transparent 70%);
          mask:radial-gradient(120px 120px at 50% 100%, #000 60%, transparent 70%);
  opacity:.5;
}

/* central brass plate / knocker (sits across the seam, fades on open) */
.entrance .seam{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:5; text-align:center; width:min(440px,86vw);
  transition:opacity .5s ease, transform .8s ease;
}
.entrance.opened .seam{ opacity:0; transform:translate(-50%,-50%) scale(.9); }

.peephole{
  width:108px; height:108px; margin:0 auto 26px; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #1c160d, #060403 70%);
  border:3px solid var(--gold-deep);
  box-shadow:0 0 0 7px #0a0806, 0 0 0 9px var(--gold-shadow), 0 10px 40px rgba(0,0,0,.7), inset 0 2px 8px rgba(0,0,0,.8);
  display:grid; place-items:center; position:relative; cursor:pointer;
}
.peephole::before{ /* brass grille */
  content:""; width:74px; height:74px; border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg, var(--gold) 0 3deg, transparent 3deg 9deg),
    radial-gradient(circle, #0a0806 30%, transparent 31%);
  opacity:.75;
}
.peephole .glow{
  position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 30px 4px rgba(240,214,147,.55);
  opacity:0; transition:opacity .4s; pointer-events:none;
}
.entrance.knocking .peephole .glow{ opacity:1; animation:flicker .5s 2; }
@keyframes flicker{ 0%,100%{opacity:1} 50%{opacity:.4} }

.entrance .est{ font-family:'Limelight',serif; letter-spacing:.4em; text-transform:uppercase;
  font-size:.72rem; color:var(--gold); text-indent:.4em; }
.entrance .ent-title{
  font-family:'Cinzel Decorative', serif; font-weight:900;
  font-size:clamp(1.8rem,5.4vw,2.9rem); line-height:1.04; margin:.5rem 0 .2rem; }
.entrance .ent-sub{ font-style:italic; color:var(--muted); margin-bottom:1.8rem; }

.knock-btn{
  font-family:'Cinzel', serif; letter-spacing:.22em; text-transform:uppercase;
  font-size:.8rem; font-weight:600; color:var(--black);
  background:linear-gradient(150deg,#f7ecc4,#d9b65e 45%,#a07e30);
  border:none; padding:1rem 2.4rem; cursor:pointer; text-indent:.22em;
  box-shadow:0 8px 28px rgba(201,162,75,.35), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .2s, box-shadow .2s, filter .2s;
}
.knock-btn:hover{ transform:translateY(-2px); filter:brightness(1.07);
  box-shadow:0 14px 36px rgba(201,162,75,.5), inset 0 1px 0 rgba(255,255,255,.7); }
.knock-hint{ display:block; margin-top:1rem; font-style:italic; font-size:.85rem; color:var(--muted); }

/* light burst flash on open */
.entrance .flash{
  position:absolute; left:50%; top:50%; width:10px; height:10px;
  transform:translate(-50%,-50%); border-radius:50%; z-index:4;
  background:radial-gradient(circle, #fff7e0, rgba(247,236,196,.5) 40%, transparent 70%);
  opacity:0;
}
.entrance.opened .flash{ animation:burst 1.4s ease-out .3s forwards; }
@keyframes burst{
  0%{ opacity:0; width:10px; height:10px; }
  18%{ opacity:.95; }
  100%{ opacity:0; width:1700px; height:1700px; }
}

/* ============================================================
   AMBIENT GOLD SPARKLE (canvas-free, DOM particles)
   ============================================================ */
.sparkle-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.spk{
  position:absolute; top:-10px; width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--gold-bright) 35%, transparent 70%);
  opacity:0; animation:fall linear infinite;
}
@keyframes fall{
  0%{ transform:translateY(-20px) scale(.5); opacity:0; }
  10%{ opacity:.9; }
  90%{ opacity:.7; }
  100%{ transform:translateY(105vh) scale(1); opacity:0; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100vh; display:flex; flex-direction:column;
  background:
    radial-gradient(ellipse 90% 60% at 50% 8%, rgba(201,162,75,.16), transparent 60%),
    linear-gradient(180deg, #0e0a07 0%, var(--black) 100%);
  overflow:hidden;
}
.hero .sunburst{ width:1500px; height:1500px; top:-560px; left:50%; margin-left:-750px; opacity:.85; }

.nav{
  position:relative; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--maxw); width:100%; margin-inline:auto; padding:1.4rem 2rem;
}
.nav-brand{ color:var(--gold); letter-spacing:.45em; font-size:1rem; text-shadow:0 0 14px rgba(201,162,75,.5); }
.nav ul{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:1rem 2rem; list-style:none; }
.nav a{
  font-family:'Cinzel', serif; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream); padding-bottom:4px; border-bottom:1px solid transparent; transition:.25s;
  white-space:nowrap;
}
.nav a:hover{ color:var(--gold-bright); border-color:var(--gold); }
.nav a.nav-dossier{ color:var(--gold-bright); border-color:rgba(201,162,75,.55); }
.nav a.nav-dossier:hover{ color:#fff; border-color:var(--gold-bright); }
/* Hamburger-knop (alleen zichtbaar op smalle schermen) */
.nav-toggle{ display:none; width:44px; height:38px; padding:8px 9px; cursor:pointer;
  background:rgba(10,8,6,.5); border:1px solid rgba(201,162,75,.45); border-radius:5px;
  flex-direction:column; justify-content:center; gap:5px; }
.nav-toggle span{ display:block; height:2px; width:100%; background:var(--gold-bright); border-radius:2px;
  transition:transform .25s, opacity .2s; }
.nav.open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2){ opacity:0; }
.nav.open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.hero-inner{
  position:relative; z-index:10; flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem 1.5rem 3rem;
}
.kicker{ font-family:'Limelight',serif; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); font-size:.78rem; text-indent:.3em; margin-bottom:1.1rem; }
.hero-title{
  font-family:'Cinzel Decorative', serif; font-weight:900;
  font-size:clamp(2.8rem, 9.5vw, 7rem); line-height:.98;
  text-shadow:0 2px 0 rgba(90,69,25,.6), 0 0 60px rgba(201,162,75,.3);
}
.hero-sub{ font-family:'Limelight', serif; letter-spacing:.34em; text-transform:uppercase;
  font-size:clamp(.78rem,2vw,1rem); color:var(--gold); margin:1.1rem 0 1.7rem; text-indent:.34em; }

.hero-feature{ display:flex; align-items:stretch; justify-content:center; gap:1.5rem; width:min(820px,94vw); }

/* ornate framed cover */
.hero-card{ position:relative; padding:14px; overflow:hidden;
  background:linear-gradient(145deg,var(--gold-bright),var(--gold-deep) 60%,var(--gold-shadow));
  box-shadow:0 30px 70px rgba(0,0,0,.75), 0 0 50px rgba(201,162,75,.18);
}
.hero-card::before{ content:""; position:absolute; inset:5px; border:1px solid rgba(0,0,0,.5); pointer-events:none; z-index:3; }
/* Gouden lichtstraal die traag over de affiche veegt. */
.hero-card::after{ content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(105deg, transparent 42%, rgba(255,248,220,.42) 50%, transparent 58%);
  background-size:250% 100%; background-position:150% 0;
  animation:sheen 6.5s ease-in-out infinite; }
@keyframes sheen{ 0%{ background-position:150% 0 } 55%,100%{ background-position:-60% 0 } }
.hero-card .corner{ position:absolute; width:20px; height:20px; border:2px solid var(--gold-foil); z-index:4; }
.hero-card .corner.tl{ top:4px; left:4px; border-right:0; border-bottom:0; }
.hero-card .corner.tr{ top:4px; right:4px; border-left:0; border-bottom:0; }
.hero-card .corner.bl{ bottom:4px; left:4px; border-right:0; border-top:0; }
.hero-card .corner.br{ bottom:4px; right:4px; border-left:0; border-top:0; }
.hero-card .cover-img{ display:block; width:min(320px,74vw); height:min(400px,92vw);
  object-fit:cover; border:2px solid var(--black); }

.hero-event{ position:relative; width:min(360px,90vw); display:flex; flex-direction:column; justify-content:center;
  border:1px solid rgba(201,162,75,.55); padding:2rem 1.7rem;
  background:linear-gradient(160deg, rgba(74,18,27,.74), rgba(10,8,6,.82));
  box-shadow:0 24px 60px rgba(0,0,0,.65), inset 0 0 0 5px rgba(10,8,6,.75), inset 0 0 0 6px rgba(201,162,75,.28); }
.hero-event::before{ content:""; position:absolute; inset:10px; border:1px solid rgba(240,214,147,.22); pointer-events:none; }
.event-kicker{ font-family:'Limelight',serif; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); font-size:.72rem; text-indent:.26em; margin-bottom:.7rem; }
.event-date{ font-family:'Cinzel Decorative',serif; font-weight:900; color:var(--gold-bright);
  font-size:clamp(2rem,5vw,3.3rem); line-height:1; margin-bottom:.9rem; text-shadow:0 0 30px rgba(201,162,75,.28); }
.hero-event h2{ font-family:'Cinzel',serif; color:var(--cream); font-size:1.25rem; line-height:1.2; margin-bottom:.8rem; }
.hero-event p:last-child{ color:var(--muted); font-size:.98rem; line-height:1.55; }

.hero-tagline{ font-style:italic; font-size:1.3rem; color:var(--cream); margin:1.7rem 0 1.4rem; max-width:540px; text-wrap:balance; }

.btn{
  display:inline-block; font-family:'Cinzel', serif; font-size:.82rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--black);
  background:linear-gradient(150deg,#f7ecc4,#d9b65e 45%,#a47f31); text-indent:.18em;
  padding:1rem 2.4rem; border:none; cursor:pointer;
  box-shadow:0 8px 26px rgba(201,162,75,.3), inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .2s, box-shadow .2s, filter .2s;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 14px 34px rgba(201,162,75,.45), inset 0 1px 0 rgba(255,255,255,.65); }
.btn-ghost{ color:var(--gold-bright); background:rgba(10,8,6,.55); border:1px solid rgba(201,162,75,.55); box-shadow:none; }
.btn-ghost:hover{ box-shadow:0 12px 28px rgba(0,0,0,.45); }
/* Accent-knop naar de geheime dossiers: fluweelrood met gouden rand. */
.btn-dossier{ position:relative; color:var(--gold-foil);
  background:linear-gradient(150deg,var(--velvet),var(--velvet-2));
  border:2px solid var(--gold); font-weight:600;
  box-shadow:0 8px 26px rgba(74,18,27,.5), 0 0 18px rgba(201,162,75,.35); }
.btn-dossier:hover{ transform:translateY(-2px) scale(1.03); border-color:var(--gold-bright);
  box-shadow:0 16px 38px rgba(0,0,0,.5), 0 0 34px rgba(201,162,75,.7); }

/* Theater-marquee: een rand van gloeilampjes rond de knop die
   afwisselend aan/uit knipperen (zoals de running lights op de site). */
.dossier-marquee{ position:relative; display:inline-block; padding:12px; border-radius:6px; }
.dossier-marquee::before, .dossier-marquee::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  background-image:
    radial-gradient(circle, var(--gold-foil) 0 2.3px, transparent 3px),
    radial-gradient(circle, var(--gold-foil) 0 2.3px, transparent 3px),
    radial-gradient(circle, var(--gold-foil) 0 2.3px, transparent 3px),
    radial-gradient(circle, var(--gold-foil) 0 2.3px, transparent 3px);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 20px 6px, 20px 6px, 6px 20px, 6px 20px;
  filter: drop-shadow(0 0 3px rgba(240,214,147,.85)); }
.dossier-marquee::before{ background-position: 0 0, 0 100%, 0 0, 100% 0; animation: bulbsA 1s steps(1) infinite; }
.dossier-marquee::after{ background-position: 10px 0, 10px 100%, 0 10px, 100% 10px; animation: bulbsB 1s steps(1) infinite; }
@keyframes bulbsA{ 0%,49.9%{opacity:1} 50%,100%{opacity:.08} }
@keyframes bulbsB{ 0%,49.9%{opacity:.08} 50%,100%{opacity:1} }

.hero-actions{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.9rem; }

.scroll-hint{ position:relative; z-index:10; text-align:center; color:var(--gold); font-size:1.4rem; padding-bottom:1.4rem; animation:bob 2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(9px)} }

/* ============================================================
   SECTIONS
   ============================================================ */
.section{ position:relative; max-width:var(--maxw); margin-inline:auto; padding:6rem 2rem; }
.section-dark{ max-width:none;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(201,162,75,.05), transparent 55%),
    var(--black-2);
  border-block:1px solid rgba(201,162,75,.16); }
.section-dark > *{ max-width:var(--maxw); margin-inline:auto; }

.section-head{ text-align:center; margin-bottom:1rem; }
.section-head .eyebrow{ font-family:'Limelight',serif; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); font-size:.72rem; text-indent:.34em; }
.section-head h2{ font-family:'Cinzel Decorative',serif; font-weight:700;
  font-size:clamp(1.8rem,4.4vw,3rem); color:var(--gold-bright); margin:.5rem 0 .9rem; line-height:1.05; }
.section-head .rule{ margin:0 auto; max-width:380px; }

.prose{ max-width:760px; margin-inline:auto; }
.prose.center{ text-align:center; }
.prose p{ margin-bottom:1.1rem; }
.prose strong{ color:var(--gold-bright); font-weight:600; }
.prose em{ color:var(--gold); }

/* ---- cards (Te Beleven) ---- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.6rem; margin-top:3.2rem; }
.card{ position:relative; background:linear-gradient(160deg,#1a130a,#0c0907);
  border:1px solid rgba(201,162,75,.32); padding:2.6rem 1.8rem 2.2rem; text-align:center;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  transition:transform .3s, border-color .3s, box-shadow .3s; overflow:hidden; }
.card::before{ content:""; position:absolute; inset:7px; border:1px solid rgba(201,162,75,.16); pointer-events:none; transition:border-color .3s; }
.card::after{ content:""; position:absolute; left:0; right:0; top:0; height:130px; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 0, rgba(201,162,75,.13), transparent 72%); }
.card:hover{ transform:translateY(-6px); border-color:var(--gold);
  box-shadow:0 26px 56px rgba(0,0,0,.65), 0 0 44px rgba(201,162,75,.22); }
.card:hover::before{ border-color:rgba(201,162,75,.42); }
.medallion{ position:relative; width:62px; height:62px; margin:0 auto 1.1rem; display:grid; place-items:center; }
.medallion .sb{ position:absolute; inset:0; border-radius:50%;
  background:repeating-conic-gradient(from 0deg, var(--gold-deep) 0 2deg, transparent 2deg 11deg); opacity:.55; }
.medallion .num{ position:relative; font-family:'Cinzel',serif; font-size:1.3rem; color:var(--gold-bright);
  width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--gold); border-radius:50%;
  background:var(--black); }
.card h3{ font-family:'Cinzel',serif; font-size:1.2rem; color:var(--gold-bright); margin-bottom:.6rem; letter-spacing:.03em; }
.card p{ color:var(--muted); font-size:.97rem; }

/* ---- house rules (enamel sign) ---- */
.rules{ position:relative; max-width:700px; margin:3.4rem auto 0;
  border:2px solid var(--gold-deep); padding:2.8rem 2.8rem 2.4rem; background:rgba(0,0,0,.4);
  box-shadow:inset 0 0 0 5px var(--black), inset 0 0 0 6px rgba(201,162,75,.4); }
.rules-title{ text-align:center; font-family:'Limelight',serif; letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:1.6rem; font-size:1.15rem; color:var(--gold-bright); }
.rules ul{ list-style:none; }
.rules li{ padding:.8rem 0 .8rem 2rem; position:relative; border-bottom:1px dashed rgba(201,162,75,.22); }
.rules li:last-child{ border-bottom:none; }
.rules li::before{ content:'\2666'; position:absolute; left:.3rem; color:var(--gold); }

/* ---- news figure ---- */
.news{ margin:3.8rem auto 0; max-width:640px; text-align:center; }
.news .frame{ position:relative; padding:10px; background:linear-gradient(145deg,var(--gold-bright),var(--gold-deep));
  box-shadow:0 22px 50px rgba(0,0,0,.6); }
.news .frame img{ width:100%; height:auto; border:6px solid #f3ecd8; }
.news figcaption{ margin-top:1.1rem; font-style:italic; color:var(--muted); font-size:.96rem; }

/* ---- guests (calling cards) ---- */
.guests{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; margin-top:3.2rem; }
.guest{ position:relative; background:linear-gradient(160deg,#16110b,#0d0a07);
  border:1px solid rgba(201,162,75,.22); border-left:3px solid var(--gold);
  padding:1.7rem 4.6rem 1.7rem 1.8rem; box-shadow:0 10px 26px rgba(0,0,0,.4);
  transition:transform .3s, background .3s, box-shadow .3s; }
.guest::before{ content:attr(data-mono); position:absolute; top:1.3rem; right:1.3rem;
  width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--gold); background:radial-gradient(circle at 38% 34%, #221a10, #0b0806);
  color:var(--gold-bright); font-family:'Cinzel',serif; font-size:.92rem; letter-spacing:.02em;
  box-shadow:inset 0 0 0 3px rgba(10,8,6,.85), 0 0 14px rgba(201,162,75,.16); transition:box-shadow .3s; }
.guest:hover{ transform:translateX(5px); background:linear-gradient(160deg,#1c160d,#100c08);
  box-shadow:-6px 0 0 -3px var(--gold-bright), 0 14px 34px rgba(0,0,0,.5); }
.guest:hover::before{ box-shadow:inset 0 0 0 3px rgba(10,8,6,.85), 0 0 22px rgba(201,162,75,.45); }
.guest h3{ font-family:'Cinzel',serif; font-size:1.12rem; color:var(--gold-bright); margin-bottom:.5rem; }
.guest p{ color:var(--muted); font-size:.95rem; }

/* ============================================================
   OUDEJAARSFEEST — showpiece poster band
   ============================================================ */
.invite-band{ position:relative; max-width:none; text-align:center;
  padding:7rem 2rem; overflow:hidden;
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, rgba(74,18,27,.5), transparent 70%),
    linear-gradient(180deg,#0c0807,#120b0a 50%,#0c0807); }
.invite-band .sunburst{ width:1300px; height:1300px; top:50%; left:50%; transform:translate(-50%,-50%); opacity:.9; }
.invite-poster{ position:relative; z-index:2; max-width:760px; margin-inline:auto;
  border:2px solid var(--gold); padding:3.4rem 2.6rem;
  background:linear-gradient(180deg, rgba(10,8,6,.7), rgba(10,8,6,.55));
  box-shadow:0 0 60px rgba(201,162,75,.22), inset 0 0 0 6px var(--black), inset 0 0 0 7px rgba(201,162,75,.5); }
.invite-kicker{ font-family:'Limelight',serif; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); font-size:.82rem; text-indent:.28em; margin-bottom:1rem; }
.invite-title{ font-family:'Cinzel Decorative',serif; font-weight:900;
  font-size:clamp(2.2rem,6vw,4rem); line-height:1.02; margin-bottom:1.4rem;
  text-shadow:0 0 40px rgba(201,162,75,.35); }
.invite-text{ font-size:1.18rem; color:var(--cream); margin-inline:auto; max-width:600px; }
.invite-date{ margin-top:1.8rem; font-family:'Cinzel',serif; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); font-size:.92rem; }
.invite-band .btn{ margin-top:2rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ position:relative; text-align:center; padding:4.5rem 2rem 5rem;
  background:linear-gradient(180deg, var(--black), #0d0a07); border-top:1px solid rgba(201,162,75,.22); overflow:hidden; }
.footer .sunburst{ width:900px; height:900px; bottom:-560px; left:50%; margin-left:-450px; opacity:.5; }
.footer-logo{ position:relative; width:96px; margin:0 auto 1.3rem;
  padding:6px; background:linear-gradient(145deg,var(--gold-bright),var(--gold-deep)); }
.footer-logo img{ width:84px; height:84px; object-fit:cover; }
.footer-title{ position:relative; font-family:'Cinzel Decorative',serif; font-weight:700; font-size:1.9rem; color:var(--gold-bright); }
.footer-sub{ position:relative; color:var(--gold); letter-spacing:.1em; font-size:.9rem; margin-top:.5rem; }
.footer-fine{ position:relative; color:var(--muted); font-style:italic; margin-top:1.8rem; max-width:520px; margin-inline:auto; }
.footer-dossier-link{ position:relative; display:inline-block; margin-top:1.3rem;
  font-family:'Cinzel',serif; letter-spacing:.18em; text-transform:uppercase; font-size:.68rem;
  color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(201,162,75,.35); padding-bottom:2px; }
.footer-dossier-link:hover{ color:var(--gold-bright); border-color:var(--gold); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:680px){
  body{ font-size:18px; }
  .nav{ flex-wrap:wrap; gap:.6rem; padding:1rem 1.2rem; }
  .nav-toggle{ display:flex; }
  .nav ul{ display:none; width:100%; order:3; flex-direction:column; gap:0; margin-top:.5rem;
    border-top:1px solid rgba(201,162,75,.22); }
  .nav.open ul{ display:flex; }
  .nav ul li{ width:100%; }
  .nav ul a{ display:block; text-align:center; padding:1rem 0; white-space:normal;
    border-bottom:1px solid rgba(201,162,75,.12); border-radius:0; }
  .nav a.nav-dossier{ border-bottom-color:rgba(201,162,75,.12); }
  .hero-inner{ padding:1.5rem 1rem 2.6rem; }
  .hero-feature{ flex-direction:column; align-items:center; width:100%; }
  .hero-event{ padding:1.7rem 1.3rem; }
  .section{ padding:4.4rem 1.3rem; }
  .rules{ padding:2rem 1.4rem; }
  .invite-poster{ padding:2.4rem 1.4rem; }
  .door::before{ inset:14px; } .door::after{ inset:26px; }
}
/* ============================================================
   SFEER-OVERLAY — vignette + filmkorrel over de hele pagina
   ============================================================ */
.atmosphere{ position:fixed; inset:0; z-index:60; pointer-events:none; }
.atmosphere::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(125% 115% at 50% 42%, transparent 55%, rgba(0,0,0,.5) 100%); }
.atmosphere::after{ content:""; position:absolute; inset:-150px; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .9s steps(4) infinite; }
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-38px,18px)} 50%{transform:translate(28px,-28px)}
  75%{transform:translate(-18px,28px)} 100%{transform:translate(0,0)} }

@media (prefers-reduced-motion:reduce){
  /* .foil, de affiche-glans en de dossier-lampjes mogen bewust blijven bewegen (sfeer). */
  .sunburst.slow,.spk,.scroll-hint{ animation:none !important; }
  .reveal{ transition:none; opacity:1; transform:none; }
  .atmosphere::after{ animation:none; }
}