:root{
  --yellow:#ffdf00;
  --orange:#ff5a00;
  --red:#ff1f00;
  --pink:#ff007a;
  --blue:#00b7ff;
  --purple:#7b22ff;
  --green:#00f060;
  --black:#050505;
  --paper:#fff8d7;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--yellow) url("assets/yellow-grunge.jpg") repeat;
  color:var(--black);
  font-family:Arial, Helvetica, sans-serif;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:-3;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,0,122,.55), transparent 24%),
    radial-gradient(circle at 85% 15%, rgba(0,183,255,.45), transparent 26%),
    radial-gradient(circle at 50% 90%, rgba(255,90,0,.35), transparent 35%);
}
.grain{position:fixed;inset:0;pointer-events:none;z-index:10;opacity:.11;background-image:radial-gradient(#000 1px, transparent 1px);background-size:7px 7px;mix-blend-mode:multiply}.ink{position:fixed;z-index:-2;pointer-events:none;background:#000;filter:blur(1px);opacity:.88}.ink-one{width:64vw;height:34vh;left:-9vw;top:12vh;transform:rotate(-7deg);clip-path:polygon(0 12%,100% 0,88% 92%,8% 100%)}.ink-two{width:70vw;height:25vh;right:-12vw;top:52vh;transform:rotate(4deg);clip-path:polygon(7% 8%,100% 0,94% 72%,0 100%)}
.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:12px clamp(14px,4vw,70px);background:rgba(0,0,0,.94);border-bottom:6px solid var(--paper);box-shadow:0 8px 0 rgba(0,0,0,.25)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--yellow);font-family:Impact,"Arial Black",sans-serif;font-size:clamp(22px,3vw,38px);letter-spacing:.02em;text-shadow:3px 3px 0 var(--red)}
.brand img{width:58px;height:58px;border-radius:16px;border:4px solid var(--paper);object-fit:cover;box-shadow:5px 5px 0 var(--pink)}
.navlinks{display:flex;align-items:center;gap:18px}.navlinks a{color:var(--paper);font-weight:1000;text-decoration:none}.nav-pill{background:var(--blue);border:4px solid var(--paper);border-radius:999px;padding:10px 17px;color:#fff!important;text-shadow:2px 2px 0 #000;box-shadow:5px 5px 0 var(--pink)}
.screen-section{padding:clamp(48px,8vw,96px) clamp(16px,5vw,78px);position:relative}
.hero{min-height:calc(100vh - 88px);display:grid;grid-template-columns:.82fr 1.18fr;gap:42px;align-items:center;padding-top:72px}.hero-frame{position:relative;min-height:560px}.portrait-card{position:relative;width:min(520px,100%);height:560px;margin:auto;background:linear-gradient(145deg,#fff7b3,#ffcc00 38%,#ff5a00);border:10px solid #000;border-radius:54px;box-shadow:18px 18px 0 #000,24px 24px 0 var(--pink);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;transform:rotate(-3deg)}.portrait-card:before{content:"";position:absolute;inset:-8%;background:radial-gradient(circle,#000 2px,transparent 4px);background-size:22px 22px;opacity:.32}.portrait-card:after{content:"CEO OF MEMES";position:absolute;left:24px;top:24px;background:#000;color:var(--yellow);font-family:Impact,"Arial Black";font-size:34px;border:5px solid #fff;border-radius:20px;padding:10px 15px;transform:rotate(-5deg);text-shadow:2px 2px 0 var(--red)}.portrait-card img{position:relative;z-index:2;width:108%;max-width:none;filter:drop-shadow(12px 12px 0 rgba(0,0,0,.38))}.money-stack{position:absolute;width:160px;height:90px;background:#44d15d;border:5px solid #000;border-radius:12px;box-shadow:10px -10px 0 #44d15d,20px -20px 0 #44d15d,30px -30px 0 #44d15d,34px -34px 0 #000}.money-stack:before{content:"$";font-size:48px;font-weight:1000;position:absolute;left:55px;top:16px}.money-one{left:3%;bottom:10%;transform:rotate(11deg)}.money-two{right:2%;top:14%;transform:rotate(-14deg)}
.hero-copy{position:relative;background:#000;color:var(--paper);border:8px solid var(--paper);border-radius:48px;padding:clamp(28px,5vw,58px);box-shadow:15px 15px 0 var(--pink);overflow:hidden}.hero-copy:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,223,0,.12),transparent),radial-gradient(circle at 80% 20%,rgba(0,183,255,.24),transparent 28%);pointer-events:none}.hero-copy>*{position:relative}.small-line,.faded-line{font-family:Impact,"Arial Black";font-size:clamp(24px,3vw,42px);margin:0 0 8px;text-align:center;letter-spacing:.02em}.small-line{color:var(--yellow);text-shadow:3px 3px 0 var(--red)}.faded-line{color:#1b1b1b;text-shadow:1px 1px 0 #2e2e2e,0 0 10px rgba(255,223,0,.22)}
h1{font-family:Impact,"Arial Black",sans-serif;margin:20px 0 25px;text-transform:uppercase;text-align:center;line-height:.92}h1 span{display:block;font-size:clamp(42px,6vw,88px);color:var(--yellow);text-shadow:4px 4px 0 #000,7px 7px 0 var(--red)}h1 strong{display:inline-block;margin-top:12px;background:var(--yellow);color:#000;font-size:clamp(36px,5vw,74px);padding:6px 18px;border:5px solid var(--paper);box-shadow:9px 9px 0 var(--red);transform:rotate(-1deg)}
.cta-row{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}.btn{appearance:none;border:5px solid #000;border-radius:999px;padding:15px 25px;font-family:Impact,"Arial Black";font-size:clamp(20px,2.2vw,31px);color:#fff;text-decoration:none;text-shadow:2px 2px 0 #000;cursor:pointer;box-shadow:7px 7px 0 #000;transition:.15s transform,.15s box-shadow}.btn:hover{transform:translate(4px,4px);box-shadow:3px 3px 0 #000}.purple{background:linear-gradient(90deg,#ff00b8,#7b22ff)}.blue{background:linear-gradient(90deg,#00b7ff,#1475ff)}.yellow{background:linear-gradient(90deg,#ffdf00,#ff8a00);color:#fff}.contract-strip{margin:22px auto 0;max-width:650px;background:var(--paper);border:5px solid #000;border-radius:18px;color:#000;display:flex;align-items:center;gap:12px;padding:12px 16px;font-weight:1000;box-shadow:7px 7px 0 var(--blue)}.contract-strip span{background:#000;color:var(--yellow);border-radius:10px;padding:7px 10px}.contract-strip code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.banner-panel{padding-top:18px;padding-bottom:22px}.banner-panel img{display:block;width:min(1500px,100%);margin:auto;border:8px solid #000;border-radius:34px;box-shadow:16px 16px 0 var(--blue);background:#000}
.section-title{text-align:center;margin-bottom:42px}.section-title span{display:inline-block;font-family:Impact,"Arial Black";font-size:clamp(40px,5vw,76px);color:var(--red);text-shadow:4px 4px 0 var(--yellow),7px 7px 0 #000;letter-spacing:.02em}.section-title h2{font-family:Impact,"Arial Black";font-size:clamp(58px,8vw,135px);line-height:.85;margin:0;color:var(--yellow);text-shadow:5px 5px 0 var(--red),9px 9px 0 #000;letter-spacing:-.02em}.lore-board{position:relative;max-width:1200px;margin:auto;min-height:560px;background:#000;border:9px solid var(--paper);border-radius:45px;padding:48px clamp(24px,5vw,70px);box-shadow:18px 18px 0 var(--red);overflow:hidden}.lore-board:before{content:"";position:absolute;inset:18px;border:4px dashed rgba(255,223,0,.45);border-radius:32px}.lore-city{position:absolute;left:0;bottom:0;width:100%;height:180px;background:linear-gradient(to top,#000,transparent)}.lore-city:before{content:"";position:absolute;left:0;bottom:0;width:48%;height:180px;background:repeating-linear-gradient(90deg,#111 0 42px,#000 42px 66px);clip-path:polygon(0 44%,8% 20%,16% 50%,24% 10%,32% 38%,40% 16%,48% 55%,56% 30%,64% 48%,72% 18%,80% 58%,88% 35%,100% 60%,100% 100%,0 100%);opacity:.9}.lore-text{position:relative;z-index:2;width:min(720px,100%);margin:auto;text-align:center;color:var(--paper)}.lore-text p{font-size:clamp(18px,2vw,25px);font-weight:900;line-height:1.35}.lore-text b{color:var(--yellow)}.quote{display:inline-block;margin-top:12px;background:var(--yellow);color:#000;border:5px solid #fff;border-radius:18px;padding:13px 18px;font-family:Impact,"Arial Black";font-size:clamp(26px,3.3vw,46px);box-shadow:8px 8px 0 var(--red)}.lore-pup{position:absolute;right:3%;bottom:0;width:min(340px,32vw);filter:drop-shadow(10px 10px 0 var(--pink));transform:rotate(4deg)}
.multiverse{padding-top:70px}.card-grid{max-width:1380px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}.pup-card{margin:0;text-align:center;transition:.2s transform;transform:rotate(var(--r,0deg))}.pup-card:nth-child(4n+1){--r:-1.2deg}.pup-card:nth-child(4n+2){--r:.7deg}.pup-card:nth-child(4n+3){--r:1.1deg}.pup-card:nth-child(4n+4){--r:-.5deg}.pup-card:hover{transform:rotate(0) translateY(-9px) scale(1.025)}.pup-card img{width:100%;display:block;border:7px solid #000;border-radius:28px;box-shadow:10px 10px 0 #000;background:#000}.pup-card h3{font-family:Impact,"Arial Black";font-size:clamp(22px,2vw,34px);color:var(--red);margin:16px 0 0;text-shadow:2px 2px 0 var(--yellow),4px 4px 0 #000;letter-spacing:.02em}.hall{padding-top:54px}.chapters{max-width:1180px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:34px}.chapter{background:#000;color:var(--paper);border:8px solid var(--paper);border-radius:34px;padding:16px 16px 24px;box-shadow:12px 12px 0 var(--pink);text-align:center}.chapter img{width:100%;border:5px solid #000;border-radius:22px;display:block}.chapter h3{font-family:Impact,"Arial Black";font-size:38px;color:var(--yellow);text-shadow:3px 3px 0 var(--red);margin:18px 0 7px}.chapter p{font-size:17px;line-height:1.45;font-weight:800;margin:0}.final-board{margin:20px clamp(16px,5vw,78px) 90px;background:var(--paper);border:9px solid #000;border-radius:44px;box-shadow:16px 16px 0 var(--red);display:grid;grid-template-columns:300px 1fr;align-items:center;gap:32px;padding:22px clamp(20px,5vw,62px);position:relative;overflow:hidden}.final-board:before{content:"";position:absolute;inset:0;background:radial-gradient(#000 1.5px,transparent 2.5px);background-size:18px 18px;opacity:.14}.final-board>*{position:relative}.final-board img{width:100%;filter:drop-shadow(10px 10px 0 #000)}.final-board p{font-family:Impact,"Arial Black";font-size:clamp(26px,3vw,44px);margin:0;text-transform:uppercase}.final-board h2{font-family:Impact,"Arial Black";font-size:clamp(54px,8vw,118px);margin:5px 0 20px;line-height:.85;color:var(--red);text-shadow:4px 4px 0 var(--yellow),8px 8px 0 #000}.center{justify-content:flex-start}.reveal{opacity:0;transform:translateY(26px);transition:.7s ease}.reveal.on{opacity:1;transform:none}
@media(max-width:1050px){.hero{grid-template-columns:1fr}.hero-frame{min-height:auto}.portrait-card{height:500px}.card-grid{grid-template-columns:repeat(3,1fr)}.chapters{grid-template-columns:1fr}.lore-pup{position:relative;right:auto;display:block;margin:20px auto -70px;width:min(350px,80vw)}.final-board{grid-template-columns:1fr;text-align:center}.final-board img{max-width:300px;margin:auto}.center{justify-content:center}.navlinks a:not(.nav-pill){display:none}}
@media(max-width:720px){.topbar{padding:10px 12px}.brand span{font-size:20px}.brand img{width:48px;height:48px}.navlinks{gap:8px}.nav-pill{padding:8px 12px}.screen-section{padding-left:14px;padding-right:14px}.hero-copy{border-radius:32px;padding:24px 16px}.portrait-card{height:430px;border-radius:38px}.portrait-card:after{font-size:24px}.money-stack{display:none}.card-grid{grid-template-columns:repeat(2,1fr);gap:18px}.pup-card h3{font-size:21px}.btn{width:100%;text-align:center}.contract-strip{font-size:13px}.section-title h2{font-size:56px}.section-title span{font-size:38px}.lore-board{padding:30px 15px}.banner-panel img{border-radius:20px}.cta-row{gap:12px}}
@media(max-width:480px){.card-grid{grid-template-columns:1fr}.portrait-card{height:360px}.hero{padding-top:34px}.small-line,.faded-line{font-size:24px}h1 span{font-size:44px}.final-board{margin-bottom:50px}}
