:root{
  --ink:#141414; --cream:#fff8e6; --lime:#a6e22e; --green:#2f9a3c; --tan:#eea561; --gold:#f4c542; --wood:#7a4a24; --pink:#ff9fb3;
  --line:3.5px; --shadow:6px 6px 0 var(--ink); --r:26px;
  --display:'Lilita One',system-ui,sans-serif; --body:'Nunito',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-weight:600;font-size:18px;line-height:1.55;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.02;margin:0 0 .4em;letter-spacing:.01em}
h2{font-size:clamp(34px,5vw,56px)}
h3{font-size:28px}
p{margin:0 0 1em}

.bg-dots{position:fixed;inset:-80px;z-index:-1;background-image:radial-gradient(rgba(20,20,20,.09) 2.5px,transparent 2.6px);background-size:34px 34px;animation:drift 40s linear infinite}
@keyframes drift{to{transform:translate(34px,34px)}}

.nav{position:sticky;top:12px;z-index:20;margin:12px auto 0;width:min(1200px,calc(100% - 24px));display:flex;align-items:center;gap:20px;padding:10px 14px 10px 10px;background:#fff;border:var(--line) solid var(--ink);border-radius:999px;box-shadow:4px 4px 0 var(--ink)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:24px}
.brand img{width:44px;height:44px;border-radius:50%;border:3px solid var(--ink)}
.nav nav{display:flex;gap:6px;margin-left:auto}
.nav nav a{text-decoration:none;font-weight:800;padding:8px 14px;border-radius:999px;transition:background .2s,transform .2s}
.nav nav a:hover{background:var(--lime);transform:translateY(-2px)}
.nav-icons,.foot-icons{display:flex;gap:8px}
.nav-icons[hidden],.foot-icons[hidden]{display:none}

.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--lime);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);color:var(--ink);cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.icon-btn svg{width:22px;height:22px}
.icon-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);background:var(--gold)}
.icon-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.icon-btn.small{width:36px;height:36px;border-radius:11px}
.icon-btn.small svg{width:18px;height:18px}

.chip{display:inline-block;font-weight:900;font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border:3px solid var(--ink);border-radius:999px;background:var(--gold);box-shadow:3px 3px 0 var(--ink);margin-bottom:18px}
.chip-dark{background:var(--ink);color:var(--lime)}

.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-size:22px;text-decoration:none;padding:14px 28px;border:var(--line) solid var(--ink);border-radius:18px;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s;cursor:pointer}
.btn:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.btn:active{transform:translate(5px,5px);box-shadow:1px 1px 0 var(--ink)}
.btn-primary{background:var(--green);color:#fff}
.btn-ghost{background:#fff}
.btn[hidden]{display:none}

.card{background:#fff;border:var(--line) solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow)}

section{width:min(1200px,calc(100% - 32px));margin:0 auto;padding:72px 0}
.section-head{text-align:center;margin-bottom:40px}

.hero{display:grid;grid-template-columns:1fr;gap:40px;justify-items:center;text-align:center;padding-top:56px}
.hero-copy{max-width:900px;display:flex;flex-direction:column;align-items:center}
.hero h1{font-size:clamp(46px,7.4vw,100px)}
.hero h1 em{font-style:normal;color:var(--green)}
.lede{font-size:20px;max-width:36em}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:28px 0 26px}
.hero-art{position:relative;width:100%}
.hero-frame{border:var(--line) solid var(--ink);border-radius:36px;overflow:hidden;box-shadow:10px 10px 0 var(--ink);background:var(--lime);transform:rotate(-.8deg);transition:transform .4s}
.hero-frame:hover{transform:rotate(0) scale(1.005)}
.hero-frame img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}
.sticker{position:absolute;display:grid;place-items:center;border:var(--line) solid var(--ink);border-radius:50%;background:var(--pink);box-shadow:4px 4px 0 var(--ink)}
.sticker.s1{width:92px;height:92px;left:-22px;top:-30px;animation:bob 3.2s ease-in-out infinite}
.sticker svg{width:60px;height:60px}
@keyframes bob{50%{transform:translateY(-10px) rotate(-8deg)}}

.ca{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px 8px 8px;background:#fff;border:3px solid var(--ink);border-radius:16px;box-shadow:3px 3px 0 var(--ink);position:relative;max-width:100%}
.ca-label{font-family:var(--display);font-size:18px;background:var(--ink);color:var(--lime);border-radius:10px;padding:4px 10px}
.ca-value{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;word-break:break-all;min-width:120px}
.ca.ca-empty .ca-value{min-width:220px;height:20px;border-bottom:3px dashed rgba(20,20,20,.25)}
.copied{position:absolute;right:-6px;top:-30px;background:var(--ink);color:var(--lime);font-weight:900;font-size:13px;padding:3px 10px;border-radius:999px;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;pointer-events:none}
.ca.is-copied .copied{opacity:1;transform:none}

.marquee{background:var(--ink);color:var(--lime);border-block:var(--line) solid var(--ink);overflow:hidden;transform:rotate(-1.5deg);margin:24px -20px}
.marquee-track{display:flex;gap:28px;white-space:nowrap;padding:16px 0;font-family:var(--display);font-size:28px;width:max-content;animation:scroll 30s linear infinite}
.marquee-track{align-items:center}
.marquee-track .dot{width:14px;height:14px;border-radius:50%;background:var(--gold);flex:none}
@keyframes scroll{to{transform:translateX(-50%)}}

.pull{font-family:var(--display);font-size:clamp(26px,3.4vw,36px);line-height:1.1;margin:.4em 0 0}
.motion-card{padding:48px clamp(24px,5vw,72px);background:var(--lime);font-size:20px;max-width:900px;margin:0 auto;transform:rotate(-.6deg)}

.docket{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.item{padding:18px 18px 26px;transition:transform .2s,box-shadow .2s}
.item:hover{transform:translate(-4px,-4px) rotate(-.5deg);box-shadow:10px 10px 0 var(--ink)}
.item-art{border:3px solid var(--ink);border-radius:18px;overflow:hidden;margin-bottom:18px;background:var(--lime)}
.item-art img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.item h3{padding:0 6px}.item p{padding:0 6px;margin:0}
.item:nth-child(2){background:#fff3cf}
.item:nth-child(3){background:#e9f9d0}

.cast{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.char{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:center;padding:24px}
.char img{width:180px;height:180px;object-fit:cover;border-radius:50%;border:var(--line) solid var(--ink);background:var(--lime)}
.role{display:inline-block;font-weight:900;text-transform:uppercase;font-size:13px;letter-spacing:.08em;background:var(--gold);border:2.5px solid var(--ink);border-radius:999px;padding:2px 10px;margin-bottom:10px}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{padding:28px 22px;position:relative}
.step:nth-child(odd){transform:rotate(-1deg)}.step:nth-child(even){transform:rotate(1deg)}
.num{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--green);color:#fff;font-family:var(--display);font-size:28px;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);margin-bottom:16px}
.step:last-child .num{background:var(--gold);color:var(--ink)}
.step p{margin:0}

.join-card{display:grid;grid-template-columns:120px 1fr auto;gap:28px;align-items:center;padding:32px 40px;background:var(--ink);color:#fff}
.join-card img{width:120px;height:120px;border-radius:50%;border:4px solid var(--lime)}
.join-card h2{color:var(--lime);font-size:clamp(30px,4vw,44px)}
.join-card p{margin:0}
.join-card .btn{box-shadow:6px 6px 0 var(--lime)}

.footer{width:min(1200px,calc(100% - 32px));margin:40px auto 32px;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:#fff;border:var(--line) solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow)}
.foot-brand{display:flex;align-items:center;gap:12px}
.foot-brand img{width:56px;height:56px;border-radius:50%;border:3px solid var(--ink)}
.foot-brand strong{display:block;font-family:var(--display);font-weight:400;font-size:24px;line-height:1}
.foot-brand span{font-weight:900;color:var(--green)}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1.2)}
.reveal.in{opacity:1;transform:none}
.step.reveal.in:nth-child(odd){transform:rotate(-1deg)}.step.reveal.in:nth-child(even){transform:rotate(1deg)}
.motion-card.reveal.in{transform:rotate(-.6deg)}
.hero-copy,.hero-art{animation:pop .7s cubic-bezier(.2,.8,.2,1.2) both}.hero-art{animation-delay:.15s}
@keyframes pop{from{opacity:0;transform:translateY(18px)}}

@media (max-width:980px){
  .hero{padding-top:36px}
  .docket{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .cast{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .nav nav{display:none}
  .nav-icons{margin-left:auto}
  .join-card{grid-template-columns:1fr;text-align:center;justify-items:center}
}
@media (max-width:560px){
  body{font-size:17px}
  section{padding:52px 0}
  .steps{grid-template-columns:1fr}
  .char{grid-template-columns:1fr;justify-items:center;text-align:center}
  .char img{width:150px;height:150px}
  .brand span{font-size:20px}
  .sticker.s1{width:64px;height:64px;left:-6px;top:-24px}
  .hero-frame img{aspect-ratio:4/3;object-position:45% 50%}
  .sticker svg{width:46px;height:46px}
  .footer{flex-direction:column;align-items:flex-start}
  .ca.ca-empty .ca-value{min-width:160px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}