:root{
  --bg:#120a10; --bg2:#1c101a; --pink:#ff2e93; --soft:#ffb6dc; --ink:#fff5fa; --acid:#e8ff3a; --line:#ff2e93;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);font-family:'Space Grotesk',sans-serif;line-height:1.55;
  background-image:radial-gradient(rgba(255,46,147,.12) 1.2px,transparent 1.2px);background-size:18px 18px;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.marker{font-family:'Permanent Marker',cursive}

/* tape strip */
.tape{background:var(--acid);color:#120a10;font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;overflow:hidden;white-space:nowrap;border-bottom:3px solid #120a10}
.tape span{display:inline-block;padding:6px 0;animation:slide 28s linear infinite}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* header */
header{position:sticky;top:0;z-index:20;background:rgba(18,10,16,.94);backdrop-filter:blur(6px);border-bottom:3px solid var(--pink)}
.bar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;max-width:1100px;margin:0 auto}
.logo{font-family:'Permanent Marker';font-size:1.7rem;transform:rotate(-2deg);color:var(--ink)}
.logo b{color:var(--pink);text-shadow:2px 2px 0 #000}
nav ul{display:flex;gap:6px;list-style:none;flex-wrap:wrap}
nav a{display:block;padding:7px 13px;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;border:2px solid transparent;border-radius:4px;transition:.15s}
nav a:hover,nav a.on{border-color:var(--pink);background:var(--pink);color:#120a10;transform:rotate(-2deg)}
.burger{display:none;background:none;border:2px solid var(--pink);color:var(--pink);font-size:1.4rem;padding:2px 10px;cursor:pointer;border-radius:4px}

/* hero */
.hero{padding:70px 0 60px;position:relative}
.hero h1{font-family:'Permanent Marker';font-size:clamp(2.8rem,9vw,6rem);line-height:1;transform:rotate(-1.5deg)}
.hero h1 em{font-style:normal;color:var(--pink);text-shadow:4px 4px 0 #000;-webkit-text-stroke:1px #000}
.hero p{max-width:560px;margin:22px 0 28px;font-size:1.1rem;color:var(--soft)}
.sticker{display:inline-block;background:var(--acid);color:#120a10;font-weight:700;padding:4px 12px;transform:rotate(3deg);border:2px solid #120a10;box-shadow:3px 3px 0 #000;margin-bottom:18px;font-size:.85rem;text-transform:uppercase}
.btn{display:inline-block;background:var(--pink);color:#120a10;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:13px 24px;border:3px solid #000;box-shadow:5px 5px 0 #000;transition:.12s;margin-right:10px;margin-bottom:10px}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #000}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--pink);box-shadow:5px 5px 0 var(--pink)}
.bulb{position:absolute;right:2%;top:40px;font-size:9rem;opacity:.9;transform:rotate(12deg);filter:drop-shadow(5px 5px 0 #000)}

/* sections */
section{padding:50px 0}
.title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:26px;flex-wrap:wrap}
.title h2{font-family:'Permanent Marker';font-size:2.1rem;transform:rotate(-1deg)}
.title h2::after{content:"";display:block;height:6px;background:var(--pink);width:70%;margin-top:4px;transform:skewX(-20deg)}
.title a{color:var(--pink);font-weight:700;text-transform:uppercase;font-size:.85rem}
.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

.card{background:var(--bg2);border:3px solid #000;box-shadow:6px 6px 0 var(--pink);padding:0;transition:.15s;display:flex;flex-direction:column}
.card:hover{transform:translate(-3px,-3px) rotate(-.6deg);box-shadow:9px 9px 0 var(--pink)}
.thumb{aspect-ratio:16/10;background:repeating-linear-gradient(45deg,#2a1624,#2a1624 10px,#33192b 10px,#33192b 20px);display:grid;place-items:center;font-size:2.6rem;border-bottom:3px solid #000}
.card .in{padding:16px 18px 20px}
.tag{display:inline-block;background:var(--pink);color:#120a10;font-weight:700;font-size:.7rem;padding:2px 9px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.card h3{font-size:1.15rem;margin-bottom:6px}
.card p{color:var(--soft);font-size:.92rem}
.date{font-size:.78rem;color:#b88aa3;margin-top:10px}

/* instagram */
.insta{background:var(--bg2);border-top:3px dashed var(--pink);border-bottom:3px dashed var(--pink)}
.ig{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.ig div{aspect-ratio:1;background:linear-gradient(135deg,#ff2e93,#7a1450);display:grid;place-items:center;font-size:2rem;border:3px solid #000;transition:.15s}
.ig div:nth-child(2n){background:linear-gradient(135deg,#33192b,#ff2e93)}
.ig div:hover{transform:rotate(-3deg) scale(1.05)}

/* events */
.event{display:flex;gap:18px;align-items:center;background:var(--bg2);border:3px solid #000;box-shadow:5px 5px 0 var(--pink);padding:14px 18px;margin-bottom:16px}
.dt{min-width:64px;text-align:center;background:var(--pink);color:#120a10;padding:6px 4px;border:2px solid #000;transform:rotate(-3deg)}
.dt b{display:block;font-size:1.6rem;line-height:1;font-family:'Permanent Marker'}
.dt small{text-transform:uppercase;font-weight:700;font-size:.7rem}
.event h3{font-size:1.05rem}.event p{color:var(--soft);font-size:.9rem}

/* vaultx */
.vault{background:var(--pink);color:#120a10;border:4px solid #000;box-shadow:8px 8px 0 #000;padding:32px;display:grid;gap:18px;grid-template-columns:1fr auto;align-items:center;transform:rotate(-.6deg)}
.vault h2{font-family:'Permanent Marker';font-size:2rem}
.vault .btn{background:#120a10;color:var(--ink);box-shadow:5px 5px 0 var(--acid);margin:0}
.vault small{display:block;margin-top:8px;font-weight:700;opacity:.8}

footer{border-top:3px solid var(--pink);padding:34px 0;margin-top:40px;color:#b88aa3;font-size:.85rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

@media(max-width:820px){
  .burger{display:block}
  nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:3px solid var(--pink);flex-direction:column;padding:12px 20px}
  nav ul.open{display:flex}
  .bulb{font-size:5rem;opacity:.5}
  .vault{grid-template-columns:1fr}
}