/* ============================================================
   WHAT THE FUN — wthefun.com
   Palette extracted from the real Instagram logo:
   yellow #F8C010 · plum #883870
   ============================================================ */
:root{
  --night:#20101F; --night2:#321930;
  --plum:#883870; --plum-deep:#5E2450; --plum-hot:#A94E8F; --neon:#E7A9D4;
  --yellow:#F8C010; --yellow-deep:#CE9B06; --amber:#FFB84D;
  --cream:#FBF2DC; --paper:#FFFAF0; --ink:#33142E;
  --cobalt:#2456C4; --pitch:#3FA34D; --wa:#22C15E; --wa-deep:#178a43;
  --r-lg:28px; --r-md:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Baloo 2',ui-rounded,sans-serif;background:var(--cream);color:var(--ink);overflow-x:hidden}
body.night{background:var(--night);color:#fff}
h1,h2,h3,.display{font-family:'Titan One',ui-rounded,sans-serif;font-weight:400;letter-spacing:.5px}
img{max-width:100%}
a{text-decoration:none;color:inherit}

/* ===== buttons ===== */
.btn{display:inline-block;font-family:'Baloo 2',sans-serif;font-weight:800;border-radius:99px;padding:11px 22px;font-size:15px;transition:transform .15s,box-shadow .15s;cursor:pointer;border:none}
.btn:active{transform:scale(.97)}
.btn-yellow{background:var(--yellow);color:var(--ink);box-shadow:0 4px 0 var(--yellow-deep)}
.btn-yellow:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--yellow-deep)}
.btn-plum{background:var(--plum);color:#fff;box-shadow:0 4px 0 var(--plum-deep)}
.btn-plum:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--plum-deep)}
.btn-ghost{border:2px solid var(--neon);color:var(--neon)}
.btn-ghost:hover{background:rgba(231,169,212,.12)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 4px 0 var(--wa-deep)}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--wa-deep)}

/* ===== nav ===== */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:20px;padding:10px 26px;background:rgba(32,16,31,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(231,169,212,.15)}
nav.nav-day{background:rgba(251,242,220,.92);border-bottom:2px solid rgba(51,20,46,.1)}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo img{width:44px;height:44px;border-radius:12px;transform:rotate(-4deg);box-shadow:0 3px 0 rgba(0,0,0,.3);border:2px solid var(--yellow)}
nav.nav-day .logo img{border-color:var(--plum);box-shadow:0 3px 0 rgba(0,0,0,.2)}
.logo .wordmark{font-family:'Titan One';font-size:14px;line-height:1.05;color:var(--yellow)}
.logo .wordmark span{display:block;font-size:9.5px;color:var(--neon);letter-spacing:2px;font-family:'Baloo 2';font-weight:800}
nav.nav-day .logo .wordmark{color:var(--plum)}
nav.nav-day .logo .wordmark span{color:var(--plum-hot)}
nav .links{display:flex;gap:18px;margin-left:auto;font-weight:700;font-size:14px;align-items:center}
nav .links a{opacity:.9;transition:.2s}
nav .links a:hover{opacity:1;color:var(--yellow)}
nav.nav-day .links a:hover{color:var(--plum)}
nav .links a.active{color:var(--yellow)}
nav.nav-day .links a.active{color:var(--plum)}
nav .cta{margin-left:8px}
.nav-toggle{display:none}
.burger{display:none;margin-left:auto;font-size:26px;cursor:pointer;line-height:1;padding:4px 10px;border-radius:10px}
@media (max-width:960px){
  .burger{display:block}
  nav .links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:rgba(32,16,31,.97);padding:18px 26px;gap:16px;margin:0;border-bottom:2px solid var(--plum)}
  nav.nav-day .links{background:rgba(251,242,220,.98);border-bottom-color:var(--plum)}
  .nav-toggle:checked ~ .links{display:flex}
  nav .cta{display:none}
}

/* ===== hero variants ===== */
.hero{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:150px 24px 90px;overflow:hidden;background-size:cover;background-position:center}
.hero-tall{min-height:100svh;padding-bottom:140px}
.hero .kicker{font-weight:800;letter-spacing:4px;font-size:13px;color:var(--neon);text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.6);animation:rise .7s .1s both}
.hero h1{font-size:clamp(42px,8vw,100px);line-height:.98;margin:16px 0 10px;animation:rise .7s .25s both}
.hero h1 .w{display:inline-block;color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.35),0 0 34px rgba(169,78,143,.9)}
.hero h1 .fun{display:inline-block;color:var(--yellow);transform:rotate(-3deg);text-shadow:0 6px 0 rgba(0,0,0,.35),0 0 44px rgba(248,192,16,.55)}
.hero p.sub{font-size:clamp(16px,2.2vw,20px);font-weight:600;color:#F6E7F1;max-width:600px;text-shadow:0 1px 10px rgba(0,0,0,.7);animation:rise .7s .4s both}
.hero .ctas{display:flex;gap:16px;margin-top:28px;flex-wrap:wrap;justify-content:center;animation:rise .7s .55s both}
.hero .loc{margin-top:24px;font-size:13.5px;font-weight:700;color:#DFC3D6;text-shadow:0 1px 8px rgba(0,0,0,.7);animation:rise .7s .7s both}
.hero .loc b{color:var(--yellow)}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.hero-day{background:radial-gradient(circle at 15% 25%,rgba(248,192,16,.28),transparent 35%),radial-gradient(circle at 85% 20%,rgba(169,78,143,.18),transparent 40%),var(--cream)}
.hero-day .kicker{color:var(--plum-hot);text-shadow:none}
.hero-day h1{color:var(--plum)}
.hero-day h1 .y{color:var(--yellow-deep);display:inline-block;transform:rotate(-2deg);text-shadow:0 4px 0 rgba(136,56,112,.18)}
.hero-day p.sub{color:#6d5266;text-shadow:none}
.hero-day .loc{color:#6d5266;text-shadow:none}
.hero-day .loc b{color:var(--plum)}

.doodle{position:absolute;font-size:40px;filter:drop-shadow(0 0 14px rgba(231,169,212,.6));animation:floaty 5s ease-in-out infinite;pointer-events:none}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-16px) rotate(6deg)}}
.wob{animation:wob 2.6s ease-in-out infinite}
@keyframes wob{0%,100%{transform:rotate(-3deg) scale(1)}50%{transform:rotate(2deg) scale(1.04)}}

/* ===== marquee ===== */
.marquee{background:var(--yellow);color:var(--ink);overflow:hidden;padding:12px 0;transform:rotate(-1.2deg);margin-top:-14px;position:relative;z-index:5;box-shadow:0 6px 24px rgba(0,0,0,.3)}
.marquee .track{display:flex;gap:38px;white-space:nowrap;font-family:'Titan One';font-size:19px;animation:scrolls 22s linear infinite;width:max-content}
@keyframes scrolls{to{transform:translateX(-50%)}}
.marquee span{display:flex;align-items:center;gap:38px}

/* ===== sections ===== */
.section{max-width:1160px;margin:0 auto;padding:84px 26px}
.section-tight{padding:56px 26px}
.day-bg{background:var(--cream);color:var(--ink)}
.paper-bg{background:var(--paper);color:var(--ink)}
.plum-bg{background:var(--plum);color:#fff}
.eyebrow{display:inline-block;background:var(--plum);color:#fff;font-weight:800;font-size:12.5px;letter-spacing:2.5px;padding:6px 16px;border-radius:99px;text-transform:uppercase}
.eyebrow-yellow{background:var(--yellow);color:var(--ink)}
.h2{font-size:clamp(32px,5vw,52px);color:var(--plum);margin:16px 0 8px}
.h2 .y{color:var(--yellow-deep);text-shadow:0 3px 0 rgba(136,56,112,.15)}
.plum-bg .h2{color:#fff}
.plum-bg .h2 .y{color:var(--yellow);text-shadow:none}
body.night .h2{color:#fff}
body.night .h2 .y{color:var(--yellow);text-shadow:none}
.lead{font-size:18px;font-weight:600;color:#6d5266;max-width:660px}
.plum-bg .lead, body.night .lead{color:#EBD5E4}

/* ===== photo cards / zones ===== */
.zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:44px}
.zone{border-radius:var(--r-lg);padding:26px;min-height:290px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s;border:3px solid var(--ink);box-shadow:8px 8px 0 rgba(51,20,46,.16);color:#fff;background-size:cover;background-position:center}
.zone:hover{transform:translate(-3px,-3px);box-shadow:12px 12px 0 rgba(51,20,46,.22)}
.zone::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(32,16,31,.06) 30%,rgba(32,16,31,.84) 82%);z-index:0}
.zone>*{position:relative;z-index:1}
.zone h3{font-size:25px;margin-bottom:5px;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.zone p{font-weight:600;font-size:14.5px;opacity:.95;text-shadow:0 1px 5px rgba(0,0,0,.6)}
.zone .tag{position:absolute;top:20px;right:20px;background:var(--yellow);color:var(--ink);font-size:11.5px;font-weight:800;letter-spacing:1px;padding:4px 11px;border-radius:99px;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.zone .go{margin-top:12px;font-weight:800;font-size:14px;color:var(--yellow)}

.photo-frame{position:relative}
.photo-frame img{display:block;width:100%;border-radius:var(--r-lg);border:4px solid var(--ink);box-shadow:12px 12px 0 rgba(248,192,16,.7)}
.photo-frame.shadow-plum img{box-shadow:-12px 12px 0 rgba(136,56,112,.35)}
.photo-frame .cap{position:absolute;bottom:16px;left:16px;background:rgba(32,16,31,.85);color:#fff;font-weight:700;font-size:12.5px;padding:6px 14px;border-radius:99px}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.split.rev{grid-template-columns:.95fr 1.05fr}

/* ===== gallery ===== */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:36px}
.gallery a, .gallery div{border-radius:var(--r-md);overflow:hidden;border:3px solid var(--ink);box-shadow:6px 6px 0 rgba(51,20,46,.14);aspect-ratio:4/5;position:relative;display:block}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.gallery a:hover img{transform:scale(1.05)}

/* ===== feature cards ===== */
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:36px}
.feat{background:#fff;border:3px solid var(--ink);border-radius:var(--r-md);padding:24px;box-shadow:6px 6px 0 rgba(51,20,46,.14)}
.feat .ic{font-size:36px}
.feat h3{font-size:19px;color:var(--plum);margin:10px 0 4px}
.feat p{font-weight:600;font-size:14px;color:#6d5266}
body.night .feat{background:var(--night2);border-color:rgba(231,169,212,.35);box-shadow:6px 6px 0 rgba(0,0,0,.35)}
body.night .feat h3{color:var(--neon)}
body.night .feat p{color:#DFC3D6}

/* ===== steps ===== */
.steps{display:flex;flex-direction:column;gap:18px;margin-top:26px}
.step{display:flex;gap:16px;align-items:flex-start}
.step .num{background:var(--yellow);border:3px solid var(--ink);color:var(--ink);font-family:'Titan One';width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;box-shadow:3px 3px 0 rgba(51,20,46,.2)}
.step h4{font-size:18px;font-weight:800}
.step p{font-weight:600;color:#6d5266;font-size:14.5px}

/* ===== router / routes ===== */
.router{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:0 auto}
.route{border:3px solid var(--ink);border-radius:var(--r-lg);padding:26px 28px;background:#fff;box-shadow:8px 8px 0 rgba(51,20,46,.14);transition:transform .2s;display:block}
.route:hover{transform:translate(-3px,-3px)}
.route h3{font-size:22px;color:var(--plum);margin-bottom:6px}
.route p{font-weight:600;color:#6d5266;font-size:14.5px;margin-bottom:14px}
.route .cta{font-weight:800;color:var(--ink)}
.route.alt{background:var(--night);color:#fff}
.route.alt h3{color:var(--neon)}
.route.alt p{color:#DFC3D6}
.route.alt .cta{color:var(--yellow)}

/* ===== packages ===== */
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:40px;align-items:stretch}
.pack{background:#fff;border:3px solid var(--ink);border-radius:var(--r-lg);padding:28px 26px;display:flex;flex-direction:column;box-shadow:8px 8px 0 rgba(51,20,46,.14);position:relative;transition:transform .2s}
.pack:hover{transform:translateY(-6px)}
.pack .pop{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--yellow);border:2.5px solid var(--ink);color:var(--ink);font-size:11.5px;font-weight:800;letter-spacing:1px;padding:4px 14px;border-radius:99px;white-space:nowrap}
.pack h3{font-size:23px;color:var(--plum)}
.pack .for{font-weight:700;font-size:13px;color:#96809f;margin:2px 0 12px}
.pack .price-pill{display:inline-block;background:var(--cream);border:2px dashed var(--plum);color:var(--plum);font-weight:800;font-size:13px;padding:6px 14px;border-radius:99px;margin-bottom:16px}
.pack ul{list-style:none;margin-bottom:20px;flex:1}
.pack li{font-weight:600;font-size:14px;padding:5px 0 5px 26px;position:relative}
.pack li::before{content:"✔";position:absolute;left:0;color:var(--yellow-deep);font-weight:900}
.pack .btn{text-align:center}
.pack.vip{background:var(--night);color:#fff;border-color:var(--night);box-shadow:8px 8px 0 rgba(136,56,112,.4)}
.pack.vip h3{color:var(--yellow)}
.pack.vip .for{color:#CBB3C5}
.pack.vip .price-pill{background:rgba(255,255,255,.08);border-color:var(--neon);color:var(--neon)}
.pack.vip li::before{color:var(--neon)}
.pack.vip .dome-photo{height:110px;border-radius:14px;margin-bottom:16px;background:url('/assets/img/dome_bar.jpg') center/cover;border:3px solid rgba(255,255,255,.5)}

/* ===== event cards ===== */
.ev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:36px}
.ev{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.35);border-radius:var(--r-md);padding:24px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ev .date{display:inline-block;background:var(--yellow);color:var(--ink);font-weight:800;font-size:12.5px;padding:4px 12px;border-radius:99px;letter-spacing:1px}
.ev h3{font-size:22px;margin:12px 0 6px}
.ev p{font-weight:600;font-size:14.5px;opacity:.92}
.ev .price{font-family:'Titan One';font-size:20px;color:var(--yellow);margin-top:10px}
.ev .price small{font-size:13px;font-family:'Baloo 2';font-weight:700;color:#fff}

/* ===== FAQ ===== */
.faq h2{color:var(--plum);font-size:clamp(28px,4vw,42px);margin-bottom:24px}
details{background:#fff;border:2.5px solid var(--ink);border-radius:var(--r-md);margin-bottom:12px;overflow:hidden;box-shadow:4px 4px 0 rgba(51,20,46,.12)}
summary{padding:16px 22px;font-weight:800;font-size:15.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
summary::after{content:"+";font-family:'Titan One';color:var(--plum);font-size:20px;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details .a{padding:0 22px 18px;font-weight:600;color:#6d5266;font-size:14.5px}

/* ===== extras / freebie ===== */
.ex-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:30px}
.ex{background:#fff;border:2.5px dashed var(--plum);border-radius:var(--r-md);padding:20px;text-align:center}
.ex .ic{font-size:34px}
.ex h4{font-weight:800;font-size:15.5px;margin:8px 0 4px;color:var(--plum)}
.ex p{font-weight:600;font-size:13px;color:#6d5266}
.freebie{margin-top:26px;background:var(--yellow);border:3px solid var(--ink);border-radius:var(--r-md);padding:20px 26px;display:flex;gap:18px;align-items:center;box-shadow:6px 6px 0 rgba(51,20,46,.15);color:var(--ink)}
.freebie .ic{font-size:40px}
.freebie h4{font-size:17px;font-weight:800}
.freebie p{font-weight:600;font-size:14px}

/* ===== final CTA ===== */
.final{color:#fff;text-align:center;padding:100px 24px;position:relative;overflow:hidden;background-size:cover;background-position:center}
.final h2{font-size:clamp(34px,5.5vw,58px)}
.final h2 .y{color:var(--yellow)}
.final p{font-weight:600;color:#EBD5E4;margin:12px 0 28px}
.final .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ===== footer ===== */
footer{background:var(--night);color:#DFC3D6;padding:70px 26px 40px;text-align:center;position:relative;overflow:hidden}
footer .big{font-family:'Titan One';font-size:clamp(40px,8vw,100px);color:transparent;-webkit-text-stroke:2px rgba(169,78,143,.55);line-height:1;user-select:none}
footer .row{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin:26px 0 12px;font-weight:700;font-size:14px}
footer .row a:hover{color:var(--yellow)}
footer .fine{font-size:12.5px;opacity:.65;max-width:720px;margin:0 auto}

/* ===== sticky CTA ===== */
.sticky-cta{position:fixed;bottom:22px;right:22px;z-index:60;animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 4px 0 var(--yellow-deep),0 0 0 0 rgba(248,192,16,.5)}50%{box-shadow:0 4px 0 var(--yellow-deep),0 0 0 16px rgba(248,192,16,0)}}
.sticky-cta.wa{animation:pulsewa 2.4s infinite}
@keyframes pulsewa{0%,100%{box-shadow:0 4px 0 var(--wa-deep),0 0 0 0 rgba(34,193,94,.5)}50%{box-shadow:0 4px 0 var(--wa-deep),0 0 0 16px rgba(34,193,94,0)}}

@media (max-width:820px){
  .split,.split.rev,.router{grid-template-columns:1fr}
  .section{padding:64px 22px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}