:root{
  --bg:#030303; --panel:#0a0a0a; --fg:#f4f4f2; --muted:#9b9b9b;
  --line:rgba(255,255,255,.22); --line2:rgba(255,255,255,.08);
  --max:1320px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#000;color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{max-width:100%}

/* Intro */
.intro-page{min-height:100vh;overflow:hidden;background:#000}
.intro-shell{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:36px 20px 46px;perspective:1400px}
.intro-glow{position:absolute;width:58vw;height:58vw;max-width:800px;max-height:800px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.09),rgba(255,255,255,.02) 34%,transparent 70%);filter:blur(28px);pointer-events:none}
.coin-stage{width:min(62vh,560px,78vw);aspect-ratio:1/1.11;display:grid;place-items:center;perspective:1000px;filter:drop-shadow(0 18px 32px rgba(255,255,255,.06))}
.coin{position:relative;width:100%;transform-style:preserve-3d;animation:coinSpin 7.5s cubic-bezier(.4,.08,.2,1) infinite;will-change:transform}
.coin img{display:block;width:100%;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none;backface-visibility:visible}
.enter-button{margin-top:28px;min-width:260px;height:62px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.7);letter-spacing:.42em;font-size:14px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));transition:.25s}
.enter-button:hover{background:#f1f1ee;color:#000;box-shadow:0 0 28px rgba(255,255,255,.16)}
.intro-foot{margin:28px 0 0;color:#9a9a9a;letter-spacing:.28em;font-size:11px;text-align:center}
.intro-foot i,.hero-est i,.hero-line i{display:inline-block;width:4px;height:4px;background:currentColor;border-radius:50%;vertical-align:middle;margin:0 12px}
@keyframes coinSpin{0%,8%{transform:rotateY(0deg)}45%{transform:rotateY(180deg) scale(.96)}55%{transform:rotateY(180deg) scale(.96)}92%,100%{transform:rotateY(360deg)}}
@media(prefers-reduced-motion:reduce){.coin{animation:none}html{scroll-behavior:auto}}

/* Header */
.topbar{position:fixed;z-index:50;top:0;left:0;right:0;height:84px;padding:0 max(28px,4vw);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,.55),transparent);backdrop-filter:blur(3px)}
.wordmark{display:flex;flex-direction:column;line-height:1}
.wordmark b{font-family:Impact,"Arial Narrow",sans-serif;letter-spacing:.16em;font-size:18px;font-weight:500}
.wordmark span{font-size:8px;letter-spacing:.42em;margin-top:7px}
.desktop-nav{display:flex;align-items:center;gap:38px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.30em;font-size:12px;font-weight:500}
.desktop-nav a{opacity:.82;transition:.2s}
.desktop-nav a:hover,.desktop-nav .active{opacity:1}
.book-nav{border:1px solid rgba(255,255,255,.55);padding:14px 22px;box-shadow:inset 0 0 22px rgba(255,255,255,.025)}
.menu-toggle{display:none;width:48px;height:48px;border:0;background:transparent;padding:10px;cursor:pointer}
.menu-toggle span{display:block;height:2px;background:#fff;margin:7px 0;transition:.2s}
.mobile-menu{display:none}

/* Hero */
.hero{position:relative;min-height:790px;padding:130px 28px 66px;display:flex;align-items:flex-end;justify-content:center;text-align:center;background-image:linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.12) 45%,#030303 96%),url("hero-bg.jpg");background-size:cover;background-position:center;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 0 28%,rgba(0,0,0,.36) 72%,rgba(0,0,0,.82) 100%)}
.hero-watermark{position:absolute;z-index:1;top:34px;width:min(590px,58vw);opacity:.22;filter:grayscale(1) contrast(1.1)}
.hero-watermark img{border-radius:50%;mix-blend-mode:screen}
.hero-copy{position:relative;z-index:2}
.hero h1{margin:0;font-family:Impact,"Arial Narrow",sans-serif;font-weight:400;font-size:clamp(78px,10vw,152px);letter-spacing:.015em;line-height:.82;text-shadow:0 10px 25px rgba(0,0,0,.72)}
.hero h2{margin:20px 0 0;font-size:clamp(18px,2vw,31px);font-weight:500;letter-spacing:.48em}
.hero-est{margin:25px 0 0;font-size:12px;letter-spacing:.33em}
.hero-line{margin:25px 0 0;font-size:10px;letter-spacing:.42em;color:#c4c4c4}

/* Cards */
.menu-cards{width:min(var(--max),calc(100% - 56px));margin:-6px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative;z-index:5}
.menu-card{position:relative;min-height:194px;border:1px solid rgba(255,255,255,.58);display:flex;align-items:center;padding:28px 30px;overflow:hidden;background:#090909;transition:transform .22s,border-color .22s}
.menu-card::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,4,4,.96) 0%,rgba(4,4,4,.82) 54%,rgba(4,4,4,.26) 100%);z-index:0}
.menu-card::after{content:"";position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28;z-index:-1}
.about-card::after{background-image:url("card-about.jpg");background-position:82% 48%}
.events-card::after{background-image:url("card-events.jpg")}
.djs-card::after{background-image:url("card-djs.jpg")}
.book-card::after{background-image:radial-gradient(circle at 80% 35%,rgba(255,255,255,.16),transparent 30%),linear-gradient(135deg,#151515,#050505)}
.menu-card:hover{transform:translateY(-5px);border-color:#fff}
.card-no{position:relative;z-index:2;color:#9a9a9a;font-family:Impact,"Arial Narrow",sans-serif;letter-spacing:.15em;font-size:16px;margin-right:24px;padding-right:24px;border-right:1px solid rgba(255,255,255,.25)}
.card-copy{position:relative;z-index:2;display:flex;flex-direction:column}
.card-copy b{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:30px;font-weight:500;letter-spacing:.24em;line-height:1.15}
.card-copy small{margin-top:16px;color:#bcbcbc;font-size:10px;letter-spacing:.20em}
.card-arrow{position:absolute;z-index:2;right:22px;font-size:32px;font-weight:200}

/* About */
.about-section{max-width:920px;margin:140px auto 125px;padding:0 30px;text-align:center}
.section-kicker{font-size:11px;letter-spacing:.44em;color:#aaa}
.about-section h3{font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(46px,7vw,86px);font-weight:400;line-height:.94;letter-spacing:.02em;margin:28px 0}
.about-section>p:not(.section-kicker){max-width:760px;margin:0 auto;color:#b7b7b7;font-size:17px;line-height:1.9}
.about-links{margin-top:36px;display:flex;justify-content:center;gap:30px;flex-wrap:wrap;font-size:11px;letter-spacing:.24em}
.about-links a{border-bottom:1px solid #555;padding-bottom:7px}

/* Footer */
.site-footer{border-top:1px solid var(--line2);padding:54px max(28px,5vw) 48px;text-align:center;color:#858585}
.socials{display:flex;justify-content:center;gap:38px;margin-bottom:28px}
.socials a{font-family:Impact,"Arial Narrow",sans-serif;letter-spacing:.17em;color:#eee;font-size:15px}
.site-footer p{font-size:9px;letter-spacing:.34em}
.legal{margin-top:30px;display:flex;justify-content:center;gap:25px;font-size:9px;letter-spacing:.21em}
.site-footer.compact{margin-top:80px}

/* DJs */
.djs-page{min-height:80vh;padding:150px 28px 60px;max-width:1180px;margin:auto}
.subhero{padding:68px 0 75px;border-bottom:1px solid var(--line)}
.subhero h1{font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(90px,15vw,190px);font-weight:400;margin:10px 0 0;line-height:.82}
.subhero>p:last-child{color:#999;font-size:10px;letter-spacing:.28em;margin-top:28px}
.dj-list{display:grid;gap:16px;margin-top:45px}
.dj-card{min-height:190px;border:1px solid rgba(255,255,255,.32);display:flex;align-items:center;padding:35px 38px;background:linear-gradient(100deg,#0c0c0c,#050505);position:relative;transition:.2s}
.dj-card:hover{border-color:#fff;transform:translateX(5px)}
.dj-number{color:#777;font-family:Impact,"Arial Narrow",sans-serif;margin-right:36px;padding-right:36px;border-right:1px solid #333}
.dj-card div{display:flex;flex-direction:column}
.dj-card b{font-family:Impact,"Arial Narrow",sans-serif;font-size:52px;font-weight:400;letter-spacing:.04em}
.dj-card small{color:#9c9c9c;letter-spacing:.16em;margin-top:10px}
.back-home{margin-top:50px;font-size:10px;letter-spacing:.25em}

/* Mobile */
@media(max-width:820px){
  .topbar{height:68px;padding:0 20px}
  .wordmark b{font-size:15px}.wordmark span{font-size:7px}
  .desktop-nav{display:none}
  .menu-toggle{display:block}
  .mobile-menu{position:fixed;z-index:45;top:68px;left:0;right:0;background:rgba(0,0,0,.97);border-bottom:1px solid #333;padding:22px 24px 28px;display:flex;flex-direction:column;gap:0;transform:translateY(-140%);transition:transform .28s}
  .mobile-menu.open{transform:translateY(0)}
  .mobile-menu a{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:24px;font-weight:500;letter-spacing:.28em;padding:18px 0;border-bottom:1px solid #191919}
  .hero{min-height:650px;padding:105px 20px 48px;background-position:center}
  .hero-watermark{top:52px;width:min(390px,76vw);opacity:.20}
  .hero h1{font-size:clamp(62px,16.3vw,96px);white-space:nowrap}
  .hero h2{font-size:16px;letter-spacing:.38em;margin-top:14px}
  .hero-est{font-size:9px;letter-spacing:.24em;margin-top:21px}
  .hero-line{font-size:8px;letter-spacing:.25em;line-height:1.8}
  .hero-line i{margin:0 6px}
  .menu-cards{width:calc(100% - 28px);grid-template-columns:1fr;gap:12px;margin:0 auto}
  .menu-card{min-height:150px;padding:25px 20px}
  .card-no{font-size:14px;margin-right:18px;padding-right:18px}
  .card-copy b{font-size:42px}
  .card-copy small{font-size:9px;letter-spacing:.16em;white-space:normal;line-height:1.5}
  .card-arrow{right:18px;font-size:30px}
  .about-section{margin:95px auto 85px;padding:0 24px}
  .about-section>p:not(.section-kicker){font-size:15px;line-height:1.75}
  .site-footer{padding:45px 22px 42px}
  .socials{gap:25px}
  .legal{gap:15px;flex-wrap:wrap}
  .djs-page{padding:110px 14px 45px}
  .subhero{padding:42px 10px 50px}
  .subhero h1{font-size:112px}
  .dj-card{min-height:145px;padding:25px 20px}
  .dj-number{margin-right:20px;padding-right:20px}
  .dj-card b{font-size:38px}
  .dj-card small{font-size:9px}
}
@media(max-width:430px){
  .intro-shell{padding-bottom:32px}
  .coin-stage{width:min(82vw,50vh);aspect-ratio:1/1.11}
  .enter-button{min-width:230px;height:58px}
  .intro-foot{font-size:8px;letter-spacing:.23em}
  .hero{min-height:610px}
  .hero h1{font-size:15.8vw}
  .hero h2{font-size:14px}
  .menu-card{min-height:142px}
  .card-copy b{font-size:38px}
  .card-arrow{font-size:27px}
}

/* V4 typography refinement */
.book-card .card-copy b{letter-spacing:.18em}
@media(max-width:1100px) and (min-width:821px){
  .card-copy b{font-size:25px;letter-spacing:.18em}
  .book-card .card-copy b{letter-spacing:.12em}
}
@media(max-width:820px){
  .card-copy b{font-size:30px;letter-spacing:.22em}
  .book-card .card-copy b{letter-spacing:.15em}
}
@media(max-width:430px){
  .card-copy b{font-size:27px;letter-spacing:.18em}
  .book-card .card-copy b{letter-spacing:.10em}
}