:root{--teal:#0f8f86;--deep:#063f3c;--red:#e8242f;--gold:#ffb52e;--violet:#7b3fe4;--neon:#c6ff3d;--pink:#ff4fb8;--cream:#fff6e8;--ink:#14110f;--d:'Shrikhand',cursive;--b:'Space Grotesk',system-ui,sans-serif}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}body{font-family:var(--b);background:var(--cream);color:var(--ink);line-height:1.55;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}a{color:inherit}
.nav{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px 4vw;background:rgba(255,246,232,.82);backdrop-filter:blur(10px);border-bottom:3px solid var(--ink)}
.logo{font-family:var(--d);font-size:1.7rem;color:var(--red);text-decoration:none;text-shadow:2px 2px 0 var(--gold)}
.nav nav{display:flex;gap:22px;align-items:center}.nav nav a{text-decoration:none;font-weight:700;font-size:.92rem}.nav nav a:hover{color:var(--violet)}
.pill{background:var(--ink);color:var(--cream)!important;padding:8px 16px;border-radius:99px}
.kicker{text-transform:uppercase;letter-spacing:.18em;font-weight:700;font-size:.78rem;color:var(--violet);margin-bottom:10px}
.title{font-family:var(--d);font-weight:400;font-size:clamp(2.6rem,6vw,4.8rem);line-height:1;margin-bottom:28px}.title em{font-style:normal;color:var(--red);text-shadow:4px 4px 0 var(--gold)}
.btn{display:inline-block;padding:14px 26px;border-radius:99px;font-weight:700;text-decoration:none;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}.btn.red{background:var(--red);color:#fff}.btn.gold{background:var(--gold)}.btn.ghost{background:var(--cream)}
.hero{position:relative;min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;gap:5vw;align-items:center;padding:120px 6vw 70px;background:var(--teal);color:var(--cream);overflow:hidden}
.dots{position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.13) 2px,transparent 2.5px) 0 0/22px 22px;pointer-events:none}
.hero h1{font-family:var(--d);font-weight:400;font-size:clamp(3.2rem,9.5vw,8.5rem);line-height:.95;color:var(--gold);text-shadow:5px 5px 0 var(--red),10px 10px 0 var(--ink);margin-bottom:26px}
.hero h1 span{color:var(--neon)}.hero .kicker{color:var(--neon)}
.hero blockquote{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:34em;border-left:5px solid var(--red);padding-left:18px;margin-bottom:16px}
.by{opacity:.85;margin-bottom:28px}.cta{display:flex;gap:16px;flex-wrap:wrap}
.hero-art{position:relative}.hero-art img{border:6px solid var(--ink);border-radius:18px;box-shadow:14px 14px 0 var(--red),28px 28px 0 var(--violet);transform:rotate(2.5deg);animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:rotate(1deg) translateY(-12px)}}
.sticker{position:absolute;z-index:2;top:-22px;left:-26px;width:118px;height:118px;border-radius:50%;background:var(--neon);color:var(--ink);display:grid;place-items:center;text-align:center;font-weight:700;font-size:.78rem;line-height:1.15;border:3px solid var(--ink);transform:rotate(-14deg);animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(346deg)}}
.ticker{background:var(--ink);color:var(--gold);overflow:hidden;white-space:nowrap;padding:14px 0;font-weight:700;letter-spacing:.12em;border-block:3px solid var(--red)}.ticker div{display:inline-block;animation:tick 32s linear infinite}@keyframes tick{to{transform:translateX(-50%)}}
.sec{padding:110px 6vw}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}.filters button{font:700 .92rem var(--b);padding:10px 18px;border-radius:99px;border:3px solid var(--ink);background:#fff;cursor:pointer;transition:.2s}
.filters button:hover{background:var(--gold)}.filters button.on{background:var(--violet);color:#fff;box-shadow:4px 4px 0 var(--ink)}
.grid{columns:4 240px;column-gap:22px}
.tile{break-inside:avoid;margin-bottom:22px;background:#fff;border:3px solid var(--ink);border-radius:16px;overflow:hidden;transition:transform .25s,box-shadow .25s;animation:pop .45s both}
.tile:nth-child(4n+1):hover{box-shadow:8px 8px 0 var(--red)}.tile:nth-child(4n+2):hover{box-shadow:8px 8px 0 var(--teal)}.tile:nth-child(4n+3):hover{box-shadow:8px 8px 0 var(--violet)}.tile:nth-child(4n):hover{box-shadow:8px 8px 0 var(--gold)}
.tile:hover{transform:translate(-3px,-3px) rotate(-.6deg)}.tile.hide{display:none}
@keyframes pop{from{opacity:0;transform:scale(.94)}}
.tile-btn{all:unset;cursor:zoom-in;display:block;width:100%}.tile-btn:focus-visible{outline:4px solid var(--violet)}
.tile figcaption{padding:12px 14px}.tile b{display:block;font-size:1.02rem}.tile span{font-size:.84rem;opacity:.7}
.sweets{background:var(--violet);color:#fff;background-image:radial-gradient(circle at 15% 20%,rgba(198,255,61,.25),transparent 40%),radial-gradient(circle at 85% 80%,rgba(255,79,184,.35),transparent 45%)}
.sweets .title em{color:var(--neon);text-shadow:4px 4px 0 var(--pink)}.sweets .kicker{color:var(--neon)}
.sweets-head{max-width:760px;margin-bottom:46px}.sweets-head p:not(.kicker){margin-bottom:16px;font-size:1.06rem}.sweets-head .btn{margin-top:10px}
.nfts{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.nft{text-decoration:none;background:#1b0f33;border-radius:16px;overflow:hidden;border:3px solid var(--ink);transition:transform .25s}.nft:hover{transform:translateY(-6px) rotate(1deg)}
.nft span{display:block;padding:10px 12px;font-weight:700;font-size:.9rem;color:var(--neon)}
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:6vw;align-items:center}
.about-img img{border-radius:24px;border:5px solid var(--ink);box-shadow:-14px 14px 0 var(--teal);max-height:640px;object-fit:cover;width:100%}
.lead{font-size:clamp(1.1rem,1.6vw,1.35rem);margin-bottom:18px}.aka{margin-top:22px;font-weight:700;color:var(--teal)}
.shown{background:var(--ink);color:var(--cream)}.shown .title em{color:var(--gold);text-shadow:4px 4px 0 var(--red)}
.list{list-style:none;padding:0;max-width:980px}.list li{display:flex;gap:28px;align-items:center;padding:24px 0;border-bottom:2px dashed rgba(255,246,232,.25)}
.yr{font-family:var(--d);font-size:2rem;color:var(--neon);min-width:92px}.list b{display:block;font-size:1.15rem}.list small{opacity:.75;font-size:.95rem}.list a{text-decoration-color:var(--gold)}.list a:hover{color:var(--gold)}
.peek{margin-left:auto;font:700 .85rem var(--b);background:var(--gold);border:0;border-radius:99px;padding:8px 16px;cursor:zoom-in}
.shop{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center;background:var(--gold)}
.shop-img img{border-radius:20px;border:5px solid var(--ink);box-shadow:14px 14px 0 var(--red)}.shop .title em{color:var(--teal);text-shadow:4px 4px 0 #fff}.shop .kicker{color:var(--ink)}
.price{display:flex;justify-content:space-between;padding:18px 22px;margin-bottom:14px;background:var(--cream);border:3px solid var(--ink);border-radius:14px;text-decoration:none;font-weight:700;transition:.2s}
.price b{font-family:var(--d);font-weight:400;font-size:1.5rem;color:var(--red)}.price:hover{transform:translateX(6px);background:#fff}.shop .btn{margin-top:14px}
.follow{text-align:center}.socials{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1000px;margin:0 auto}
.s{padding:34px 16px;border-radius:20px;border:3px solid var(--ink);text-decoration:none;font-family:var(--d);font-size:1.6rem;box-shadow:6px 6px 0 var(--ink);transition:.2s}.s:hover{transform:translate(-3px,-3px) rotate(-1.5deg);box-shadow:9px 9px 0 var(--ink)}
.s small{display:block;font:500 .9rem var(--b);margin-top:6px}.ig{background:var(--pink)}.fb{background:var(--teal);color:#fff}.sh{background:var(--red);color:#fff}.os{background:var(--neon)}
footer{background:var(--deep);color:var(--cream);text-align:center;padding:50px 6vw;display:grid;gap:10px}footer a:not(.logo){color:var(--gold)}
dialog{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh}dialog::backdrop{background:rgba(10,8,20,.92)}
dialog[open]{display:grid;place-items:center}dialog figure{max-width:88vw;text-align:center;color:#fff}dialog img{max-height:80vh;max-width:88vw;margin:auto;border-radius:10px}
dialog figcaption{margin-top:12px}dialog figcaption span{display:block;opacity:.75}
.x,.nav-b{position:fixed;background:var(--gold);border:3px solid var(--ink);border-radius:50%;width:50px;height:50px;font-size:1.8rem;cursor:pointer;line-height:1}.x{top:18px;right:18px}.prev{left:18px;top:50%}.next{right:18px;top:50%}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s}.reveal.in{opacity:1;transform:none}
@media(max-width:900px){.nav nav a:not(.pill){display:none}.hero,.about,.shop{grid-template-columns:1fr}.hero{padding-top:100px}.hero-art{max-width:420px;margin:20px auto 0}.nfts{grid-template-columns:repeat(2,1fr)}.socials{grid-template-columns:1fr 1fr}.sec{padding:80px 6vw}.list li{flex-wrap:wrap;gap:8px 18px}.peek{margin-left:0}.sticker{left:-6px;width:96px;height:96px;font-size:.68rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
.hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}.hero h1{font-size:clamp(3rem,7.4vw,7.2rem)}.btn.ghost{color:var(--ink)}.hero-art img{max-height:78vh;width:auto;margin:auto}
@media(max-width:900px){.hero{grid-template-columns:1fr}.grid{columns:2;column-gap:12px}.tile{margin-bottom:12px;border-width:2px}.tile figcaption{padding:8px 10px}.tile span{font-size:.75rem}.hero h1{font-size:clamp(2.6rem,13vw,4.5rem)}}
.hero>*{min-width:0}
@media(max-width:900px){.hero h1{font-size:11.5vw;text-shadow:3px 3px 0 var(--red),6px 6px 0 var(--ink)}.hero-art{max-width:300px}.hero-art img{width:100%;max-height:none}}
