/* MEOW DIVISION STYLES
   Want different colors? Change the hex codes in the first block (light mode)
   and the second/third blocks (dark mode). Everything else uses these names.
   --plum = main purple, --pink = buttons/accents, --mint = green, --sun = yellow,
   the "-soft" versions are the pale backgrounds. */
:root{
  --bg:#fbefe9; --dot:#ecd3cb; --paper:#fffaf6;
  --ink:#2a1f2d; --ink-soft:#6a5a6c;
  --plum:#8a4fa3; --plum-soft:#efe2f5;
  --pink:#e0668f; --pink-soft:#fbe0ea;
  --mint:#4f9e86; --mint-soft:#dcf0e8;
  --sun:#e9a43b; --sun-soft:#fbecd2;
  --shadow:#2a1f2d;
  --display:'Grandstander','Comic Sans MS','Chalkboard SE',cursive;
  --body:'Nunito','Avenir Next','Segoe UI',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1c1622; --dot:#2d2436; --paper:#251d2c;
  --ink:#f4e9f1; --ink-soft:#c2b2c4;
  --plum:#c79be0; --plum-soft:#352643;
  --pink:#f08fb0; --pink-soft:#41243a;
  --mint:#7cc9b0; --mint-soft:#1f3631;
  --sun:#f2bf6b; --sun-soft:#3d3020;
  --shadow:#0b080d; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#1c1622; --dot:#2d2436; --paper:#251d2c;
  --ink:#f4e9f1; --ink-soft:#c2b2c4;
  --plum:#c79be0; --plum-soft:#352643;
  --pink:#f08fb0; --pink-soft:#41243a;
  --mint:#7cc9b0; --mint-soft:#1f3631;
  --sun:#f2bf6b; --sun-soft:#3d3020;
  --shadow:#0b080d; color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--bg);background-image:radial-gradient(var(--dot) 1.2px,transparent 1.6px);background-size:16px 16px;color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6}
a{color:var(--plum)}
img{max-width:100%}
.wrap{max-width:960px;margin:0 auto;padding:0 16px}

/* nav */
.nav{padding:18px 0}
.nav .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:1.35rem;color:var(--ink);text-decoration:none}
.brand svg{width:40px;height:40px}
.links{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.links a{display:block;padding:6px 14px;border-radius:999px;font-family:var(--display);font-weight:700;color:var(--ink);text-decoration:none;border:2px solid transparent}
.links a:hover,.links a:focus-visible{border-color:var(--ink);outline:none}
.links a[aria-current="page"]{background:var(--ink);color:var(--bg)}

/* type */
.eyebrow{font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pink)}
h1,h2,h3{font-family:var(--display);line-height:1.1;text-wrap:balance}
h1{font-weight:800;font-size:clamp(2.4rem,8vw,4rem);margin:6px 0 12px}
h1 .hi{color:var(--plum)}
h2{font-weight:800;font-size:clamp(1.6rem,5vw,2.2rem);margin:0 0 6px}
h3{font-weight:700;font-size:1.25rem;margin:0}
.lede{font-size:1.12rem;color:var(--ink-soft);max-width:36em;margin:0}
.sub{color:var(--ink-soft);margin:0 0 22px;max-width:40em}

/* layout */
main{display:grid;gap:64px;padding:24px 0 72px}
.hero{display:grid;gap:28px;align-items:center;padding-top:16px}
@media (min-width:760px){.hero{grid-template-columns:1.4fr 1fr}}
.hero-cat{justify-self:center;width:min(280px,70vw);cursor:pointer;transition:transform .2s}
.hero-cat:hover{transform:rotate(-4deg) scale(1.03)}
.hero-cat.boop{animation:boop .35s}
@keyframes boop{50%{transform:scale(.92) rotate(3deg)}}
.mrrp{font-family:var(--display);text-align:center;color:var(--ink-soft);font-size:.9rem;min-height:1.6em;margin-top:4px}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* stickers */
.btn{display:inline-block;font-family:var(--display);font-weight:800;font-size:1.05rem;padding:10px 20px;border:2.5px solid var(--ink);border-radius:14px 10px 16px 9px/10px 16px 9px 14px;box-shadow:4px 4px 0 var(--shadow);color:var(--ink);background:var(--paper);text-decoration:none;transition:transform .15s,box-shadow .15s}
.btn.primary{background:var(--pink);color:#fff}
:root[data-theme="dark"] .btn.primary{color:#1c1622}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.primary{color:#1c1622}}
.btn:hover,.btn:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--shadow);outline:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.card{display:grid;gap:8px;align-content:start;background:var(--paper);border:2.5px solid var(--ink);border-radius:18px 12px 20px 10px/12px 20px 10px 18px;box-shadow:4px 4px 0 var(--shadow);padding:22px;color:var(--ink);text-decoration:none}
a.card{transition:transform .15s,box-shadow .15s}
a.card:hover,a.card:focus-visible{transform:translate(-2px,-2px) rotate(-.4deg);box-shadow:6px 6px 0 var(--shadow);outline:none}
.card p{margin:0;color:var(--ink-soft);font-size:.97rem}
.tag{justify-self:start;font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:999px;background:var(--mint-soft);color:var(--mint)}
.tag.pink{background:var(--pink-soft);color:var(--pink)}
.tag.plum{background:var(--plum-soft);color:var(--plum)}
.tag.sun{background:var(--sun-soft);color:var(--sun)}
.soon{border:2.5px dashed var(--ink-soft);border-radius:18px;padding:22px;color:var(--ink-soft);display:grid;align-content:center;gap:4px}
.soon strong{font-family:var(--display);color:var(--ink)}
.go{font-family:var(--display);font-weight:700;color:var(--plum);margin-top:4px}

/* vibe list */
.vibes{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.vibes li{font-family:var(--display);font-weight:700;padding:8px 16px;border:2.5px solid var(--ink);border-radius:999px;background:var(--paper);box-shadow:3px 3px 0 var(--shadow)}
.vibes li:nth-child(4n+1){transform:rotate(-2deg)}
.vibes li:nth-child(4n+3){transform:rotate(1.5deg)}

/* 3am corner */
.corner{background:var(--ink);color:var(--bg);border-radius:24px 16px 26px 14px/16px 26px 14px 24px;padding:clamp(22px,5vw,40px);display:grid;gap:14px}
.corner .eyebrow{color:var(--sun)}
.corner blockquote{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,4vw,1.8rem);line-height:1.25}
.corner .btn{justify-self:start;background:var(--sun);color:#2a1f2d;border-color:var(--bg);box-shadow:4px 4px 0 var(--pink)}
.corner small{color:color-mix(in srgb,var(--bg) 70%,transparent)}

/* members */
.member{text-align:center;justify-items:center}
.avatar{width:84px;height:84px;border-radius:50%;border:2.5px solid var(--ink);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:2rem;color:var(--ink)}
.member .role{font-family:var(--display);font-weight:700;color:var(--pink);font-size:.9rem}

/* steps */
.steps{counter-reset:s;display:grid;gap:16px;padding:0;margin:0;list-style:none}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.steps li::before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--plum);color:var(--bg);font-family:var(--display);font-weight:800;font-size:1.2rem}
.steps strong{font-family:var(--display)}

footer{border-top:2.5px dashed var(--dot);padding:28px 0 40px;color:var(--ink-soft);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center}
.theme{font:inherit;font-family:var(--display);font-weight:700;background:none;border:2px solid var(--ink-soft);color:var(--ink-soft);border-radius:999px;padding:4px 12px;cursor:pointer}
.theme:hover{color:var(--ink);border-color:var(--ink)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ================= GREMLIN MODE ================= */
html,body{overflow-x:clip}
body{position:relative}
.blobs{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.blobs i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:drift 22s ease-in-out infinite alternate}
.blobs i:nth-child(1){width:420px;height:420px;background:var(--pink-soft);top:-120px;left:-100px}
.blobs i:nth-child(2){width:380px;height:380px;background:var(--plum-soft);top:30%;right:-140px;animation-duration:28s}
.blobs i:nth-child(3){width:340px;height:340px;background:var(--mint-soft);bottom:-120px;left:20%;animation-duration:25s}
@keyframes drift{to{transform:translate(60px,40px) scale(1.15)}}

/* floating doodles */
.doodles{position:fixed;inset:0;z-index:-1;pointer-events:none}
.doodles span{position:absolute;font-size:22px;opacity:.5;animation:float 9s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-18px) rotate(12deg)}}

/* ticker */
.ticker{background:var(--ink);color:var(--bg);border-block:3px solid var(--ink);transform:rotate(-1.2deg);margin:4px -20px 0;overflow:hidden;white-space:nowrap;font-family:var(--display);font-weight:800;letter-spacing:.04em;box-shadow:0 5px 0 var(--pink)}
.ticker div{display:inline-block;padding:9px 0;animation:tick 38s linear infinite}
.ticker b{color:var(--sun);margin:0 14px}
@keyframes tick{to{transform:translateX(-50%)}}

/* sticker title */
.sticker-title{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.sticker-title span{display:inline-block;padding:2px 14px 6px;border:3px solid var(--ink);border-radius:14px 10px 16px 9px/10px 16px 9px 14px;box-shadow:5px 5px 0 var(--shadow);background:var(--paper);transition:transform .2s}
.sticker-title span:nth-child(1){transform:rotate(-3deg)}
.sticker-title span:nth-child(2){transform:rotate(2deg);background:var(--sun)}
.sticker-title span:nth-child(3){transform:rotate(-1.5deg);background:var(--pink);color:#fff}
.sticker-title span:nth-child(4){transform:rotate(2.5deg);background:var(--plum);color:#fff}
.sticker-title span:hover{transform:rotate(0) scale(1.06)}
:root[data-theme="dark"] .sticker-title span:nth-child(n+2){color:#1c1622}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sticker-title span:nth-child(n+2){color:#1c1622}}

/* hero art */
.hero-art{position:relative;justify-self:center;padding:30px 10px 0}
.bubble{position:absolute;top:0;right:-6px;background:var(--paper);border:3px solid var(--ink);border-radius:18px;padding:6px 14px;font-family:var(--display);font-weight:800;box-shadow:3px 3px 0 var(--shadow);transform:rotate(6deg);z-index:2;max-width:200px;text-align:center}
.bubble::after{content:"";position:absolute;bottom:-12px;left:24px;width:16px;height:16px;background:var(--paper);border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg)}
.hero-cat{animation:bob 3.5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(-2deg)}}
.badge{position:absolute;font-family:var(--display);font-weight:800;font-size:.85rem;padding:5px 11px;border:2.5px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--shadow);z-index:2;white-space:nowrap}
.badge.b1{left:-18px;top:46%;background:var(--mint);color:#fff;transform:rotate(-12deg)}
.badge.b2{right:-14px;bottom:18%;background:var(--sun);color:#2a1f2d;transform:rotate(10deg)}
.badge.b3{left:10%;bottom:-6px;background:var(--plum-soft);color:var(--plum);transform:rotate(-4deg)}

/* gremlin clock */
.clock{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:8px 16px;background:var(--paper);border:2.5px dashed var(--ink);border-radius:999px;font-family:var(--display);font-weight:700;font-size:.95rem}
.clock .dot{width:11px;height:11px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 var(--mint);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px transparent}}

/* cards: tape + tilt */
.grid>.card,.grid>.soon{position:relative}
.grid>.card:nth-child(odd){transform:rotate(-.8deg)}
.grid>.card:nth-child(even){transform:rotate(.7deg)}
.grid>.card::before{content:"";position:absolute;top:-13px;left:50%;width:84px;height:24px;margin-left:-42px;background:var(--sun);opacity:.75;transform:rotate(-4deg);border-radius:3px}
.grid>.card:nth-child(3n+2)::before{background:var(--pink);transform:rotate(3deg)}
.grid>.card:nth-child(3n)::before{background:var(--mint);transform:rotate(-2deg)}
a.card:hover,a.card:focus-visible{transform:translate(-3px,-4px) rotate(0)!important}
.card .emoji{font-size:2.2rem;line-height:1}

/* section bands */
.band{position:relative;padding:44px clamp(18px,4vw,40px);border:3px solid var(--ink);border-radius:28px 20px 30px 18px/20px 30px 18px 28px;box-shadow:7px 7px 0 var(--shadow)}
.band.pink{background:var(--pink-soft)}
.band.mint{background:var(--mint-soft)}
.band.plum{background:var(--plum-soft)}
.band .corner-cat{position:absolute;top:-38px;right:28px;width:70px}
.vibes li{cursor:default;transition:transform .2s}
.vibes li:hover{transform:rotate(0) scale(1.08)!important;background:var(--sun)}
.corner{position:relative;background:linear-gradient(160deg,#2a1f45,#1a1430 60%,#3a1f3d);color:#f4e9f1;overflow:hidden;box-shadow:7px 7px 0 var(--pink);border:3px solid var(--ink)}
.corner .stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#fff 1px,transparent 1.5px),radial-gradient(#f2bf6b 1px,transparent 1.5px);background-size:70px 70px,110px 110px;background-position:0 0,30px 40px;opacity:.5;animation:twinkle 4s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.9}}
.corner .moon{position:absolute;top:22px;right:26px;font-size:46px}
.corner>*{position:relative}
.corner small{color:#c2b2c4}

/* click confetti */
.pop{position:fixed;pointer-events:none;font-size:22px;z-index:99;animation:pop 1s ease-out forwards}
@keyframes pop{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}

/* cat rain easter egg */
.rain{position:fixed;top:-60px;font-size:34px;z-index:98;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(115vh) rotate(540deg)}}

/* peeking footer cat */
footer{position:relative;margin-top:40px}
.peek{position:absolute;top:-52px;right:12%;width:90px;transition:transform .3s}
.peek:hover{transform:translateY(-10px)}
.hint{font-size:.8rem;opacity:.7}

@media (max-width:600px){.badge.b1{left:-4px}.badge.b2{right:-4px}.bubble{right:0}}
main{padding-top:40px}
.badge.b2{bottom:4%;right:-24px}