:root{--paper:#F3EADB;--ink:#1d1a18;--y:#F5C518;--r:#E2342B;--t:#1FA2B8;--p:#F06A8A;--o:#F28C28;--g:#1DB954}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 "Bricolage Grotesque",system-ui,sans-serif;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.row{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}

/* header */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px;background:var(--ink);color:#fff;border-bottom:4px solid var(--y)}
.logo{display:flex;align-items:center;gap:10px;font:400 24px/1 "Permanent Marker";text-decoration:none;white-space:nowrap}
.logo svg{width:34px;height:22px}
.logo span{color:var(--y)}
.top nav{display:flex;align-items:center;gap:22px;font-weight:600;font-size:16px}
.top nav a:not(.btn){text-decoration:none;opacity:.85}
.top nav a:not(.btn):hover{opacity:1;color:var(--y)}

/* buttons: street stickers */
.btn{display:inline-flex;align-items:center;justify-content:center;font:400 17px/1 "Archivo Black";letter-spacing:.3px;text-decoration:none;padding:15px 22px;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);color:var(--ink);background:#fff;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px) rotate(-1deg);box-shadow:8px 8px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.btn.sp{background:var(--g);color:#fff}
.btn.ap{background:var(--p);color:#fff}
.btn.yt{background:var(--r);color:#fff}
.btn.k{background:var(--y)}
.top .btn.k{border-color:var(--y);box-shadow:4px 4px 0 var(--y);background:var(--ink);color:var(--y)}
.btn.sm{font-size:14px;padding:10px 14px;box-shadow:4px 4px 0 var(--ink)}

/* tags */
.tag{display:inline-block;font:400 15px/1 "Archivo Black";text-transform:uppercase;letter-spacing:1px;padding:10px 14px;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);transform:rotate(-2deg)}
.tag.y{background:var(--y)}.tag.r{background:var(--r);color:#fff}.tag.t{background:var(--t);color:#fff}

/* hero */
.hero{position:relative;padding:70px 0 120px;overflow:hidden;background:
  radial-gradient(circle at 12% 18%,rgba(31,162,184,.10) 0 2px,transparent 3px) 0 0/26px 26px,var(--paper)}
.splat{position:absolute;border-radius:50%;filter:blur(1px);opacity:.9;pointer-events:none}
.s1{width:420px;height:420px;left:-140px;top:-120px;background:radial-gradient(circle,var(--y) 0 45%,transparent 46%),radial-gradient(circle at 80% 70%,var(--y) 0 12%,transparent 13%)}
.s2{width:300px;height:300px;right:-80px;bottom:-60px;background:radial-gradient(circle,var(--t) 0 40%,transparent 41%),radial-gradient(circle at 15% 20%,var(--t) 0 9%,transparent 10%)}
.s3{width:120px;height:120px;left:46%;top:40px;background:radial-gradient(circle,var(--p) 0 30%,transparent 31%),radial-gradient(circle at 80% 80%,var(--p) 0 10%,transparent 11%),radial-gradient(circle at 10% 70%,var(--p) 0 7%,transparent 8%)}
.s4{width:90px;height:90px;left:6%;bottom:60px;background:radial-gradient(circle,var(--r) 0 32%,transparent 33%),radial-gradient(circle at 85% 20%,var(--r) 0 9%,transparent 10%)}
.hgrid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font:400 clamp(46px,6.4vw,86px)/1.02 "Permanent Marker";margin:26px 0 22px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--r);text-decoration:underline;text-decoration-color:var(--y);text-decoration-thickness:10px;text-underline-offset:6px}
.lede{font-size:21px;font-weight:600;margin:0 0 10px;max-width:34em}
.lede2{margin:0;max-width:34em}
.hart{position:relative;transform:rotate(2.5deg)}
.hart img{border:5px solid var(--ink);box-shadow:16px 16px 0 var(--ink);background:#fff}
.tape{position:absolute;width:130px;height:34px;background:rgba(245,197,24,.85);border:2px solid rgba(29,26,24,.25);z-index:2}
.t1{top:-14px;left:28px;transform:rotate(-8deg)}.t2{bottom:-12px;right:24px;transform:rotate(-6deg);background:rgba(240,106,138,.85)}

/* latest */
.latest{position:relative;background:var(--ink);color:#fff;padding:120px 0 100px}
.drip{position:absolute;top:-1px;left:0;width:100%;height:90px}
.lgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.lart img{border:5px solid var(--y);box-shadow:14px 14px 0 var(--r);transform:rotate(-2deg)}
.latest h2{font:400 clamp(32px,4vw,50px)/1.1 "Permanent Marker";margin:22px 0 8px;color:var(--y)}
.latest .meta{opacity:.7;margin:0 0 18px}
.latest p{max-width:40em}
.latest .tag{border-color:#fff;box-shadow:5px 5px 0 #fff}
.latest .btn{border-color:#fff;box-shadow:6px 6px 0 #fff}
.embed{width:100%;border:0;border-radius:14px;margin-top:22px;background:#2a2624}

/* episodes */
.eps{padding:90px 0}
.sec{font:400 clamp(34px,4.4vw,56px)/1 "Permanent Marker";margin:0 0 44px}
.sec span{background:linear-gradient(transparent 58%,var(--y) 58% 88%,transparent 88%);padding:0 6px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:34px}
.card{background:#fff;border:4px solid var(--ink);box-shadow:10px 10px 0 var(--ink);transition:transform .15s}
.card:nth-child(3n+1){transform:rotate(-1deg)}.card:nth-child(3n+2){transform:rotate(.8deg)}
.card:hover{transform:rotate(0) translateY(-4px)}
.card img{border-bottom:4px solid var(--ink);aspect-ratio:1;object-fit:cover;width:100%}
.cb{padding:20px 20px 24px}
.lab{font:400 13px/1 "Archivo Black";text-transform:uppercase;letter-spacing:1px;background:var(--t);color:#fff;padding:6px 9px}
.card h3{font:800 22px/1.2 "Bricolage Grotesque";margin:14px 0 6px}
.card .meta{font-size:15px;opacity:.65;margin:0}
.card .row{margin-top:18px;gap:10px}

/* about */
.noe{padding:40px 0 100px}
.ngrid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.nart img{border:5px solid var(--ink);box-shadow:-14px 14px 0 var(--t);transform:rotate(-1.5deg)}
.noe h2{font:400 clamp(38px,4.6vw,60px)/1.05 "Permanent Marker";margin:22px 0 14px}
.hand{font:400 30px/1.2 "Permanent Marker";color:var(--r);transform:rotate(-2deg);margin:22px 0 26px}

/* soon */
.soon{padding:0 0 100px}
.soonbox{position:relative;background:var(--y);border:5px solid var(--ink);box-shadow:14px 14px 0 var(--ink);padding:48px 44px;text-align:center;background-image:radial-gradient(circle at 92% 18%,var(--r) 0 34px,transparent 35px),radial-gradient(circle at 6% 85%,var(--t) 0 26px,transparent 27px)}
.soonbox .tag{background:#fff}
.soonbox h2{font:400 clamp(32px,4vw,50px)/1.1 "Permanent Marker";margin:22px 0 10px}
.soonbox p{max-width:34em;margin:0 auto;font-weight:600}

/* footer */
.foot{background:var(--ink);color:#fff;padding:44px 0;border-top:6px solid var(--r)}
.fgrid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.flogo{font:400 26px/1 "Permanent Marker";margin:0}.flogo span{color:var(--y)}
.soc{display:flex;flex-wrap:wrap;gap:18px;font-weight:600}
.soc a{text-decoration:none;opacity:.85}.soc a:hover{color:var(--y);opacity:1}
.copy{margin:0;opacity:.6;font-size:15px}

@media (max-width:900px){
  .hgrid,.lgrid,.ngrid{grid-template-columns:1fr;gap:44px}
  .hero{padding:44px 0 100px}
  .hart{max-width:520px;margin:0 auto}
  .lart{max-width:420px}
  .top nav a:not(.btn){display:none}
}
@media (max-width:520px){
  body{font-size:17px}
  .wrap{padding:0 16px}
  .top{padding:10px 16px}
  .logo{font-size:19px}.logo span{display:none}
  .btn{width:100%}.btn.sm{width:auto}
  .top .btn{width:auto}
  .soonbox{padding:36px 22px}
  .hart img{box-shadow:10px 10px 0 var(--ink)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}