:root{
  --ink:#17131A; --paper:#FFFEF8; --page:#E9E4F0;
  --muscle:#E23A4E; --muscle-dk:#A51F33;
  --fat:#FFC83D; --fat-lt:#FFE7A1;
  --teal:#1E9C97; --gut:#F8D3CD; --gut-dk:#EBAFA6;
  --display:"Bangers","Impact","Arial Black",sans-serif;
  --letter:"Kalam","Comic Sans MS","Chalkboard SE",cursive;
}
*{box-sizing:border-box}
body{
  background-color:var(--page);
  background-image:radial-gradient(rgba(23,19,26,.10) 1.2px,transparent 1.3px);
  background-size:9px 9px;
  color:var(--ink); font-family:var(--letter);
  padding:28px 16px 48px;
}
.wrap{max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.logo{font-family:var(--display);font-size:clamp(44px,8vw,76px);line-height:.9;letter-spacing:1px;margin:0;
  color:var(--paper);-webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--ink)}
.logo .f{color:var(--muscle)} .logo .b{color:var(--fat)} .logo .vs{font-size:.55em;color:var(--paper);vertical-align:middle}
.ep{font-family:var(--display);font-size:22px;letter-spacing:1.5px;margin:6px 0 0}
.ep small{display:block;font-family:var(--letter);font-size:14px;letter-spacing:0;opacity:.75}
button{font-family:var(--display);font-size:20px;letter-spacing:1.5px;background:var(--fat);color:var(--ink);
  border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:6px 18px;cursor:pointer}
button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
button:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

.page{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wide{grid-column:1/-1}
@media (max-width:640px){.page{grid-template-columns:1fr}}

.panel{position:relative;background:var(--paper);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);
  overflow:hidden;display:flex;flex-direction:column}
.panel.inside{background:var(--gut)}
.caption{align-self:flex-start;background:var(--fat-lt);border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);
  font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.6px;padding:6px 12px;max-width:80%}
.bubbles{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 14px 4px}
.bubble{position:relative;flex:1 1 42%;max-width:62%;background:#fff;border:3px solid var(--ink);border-radius:22px;
  padding:10px 14px 12px;font-size:clamp(15px,1.9vw,18px);line-height:1.25;font-weight:700;margin-bottom:16px}
.bubble.solo{max-width:70%;flex-basis:auto;margin-inline:auto}
.bubble::after,.bubble::before{content:"";position:absolute;bottom:-18px;border-style:solid}
.bubble::before{left:30px;border-width:18px 10px 0 10px;border-color:var(--ink) transparent transparent transparent}
.bubble::after{left:33px;bottom:-12px;border-width:13px 7px 0 7px;border-color:#fff transparent transparent transparent}
.bubble.r::before{left:auto;right:30px}.bubble.r::after{left:auto;right:33px}
.who{display:inline-block;font-family:var(--display);font-weight:400;font-size:14px;letter-spacing:1.2px;
  padding:0 7px;margin-right:6px;border:2px solid var(--ink);transform:rotate(-3deg)}
.who.flex{background:var(--muscle);color:#fff}.who.blob{background:var(--fat)}.who.dan{background:#4B5BA6;color:#fff}
.bubble em{font-style:normal;font-family:var(--display);font-weight:400;letter-spacing:1px;font-size:1.15em}
.art{display:block;width:100%;height:auto;margin-top:auto}

.myth{background:var(--ink);color:var(--paper);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--muscle);
  padding:16px 20px;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:start}
.myth h2{font-family:var(--display);font-weight:400;font-size:28px;letter-spacing:1.5px;margin:0;color:var(--fat);grid-row:span 2}
.myth p{margin:0;font-size:17px;line-height:1.45;max-width:65ch}
.myth b{color:var(--fat)}
@media (max-width:520px){.myth{grid-template-columns:1fr}.myth h2{grid-row:auto}}
.foot{font-size:14px;opacity:.7;text-align:right}

/* ---------- motion ---------- */
.flex-idle,.blob-idle,.shake,.sfx,.spark{transform-box:fill-box;transform-origin:50% 100%}
.flex-idle{animation:bob 1.1s ease-in-out infinite}
.blob-idle{animation:jiggle 1.9s ease-in-out infinite}
.shake{animation:shake .18s linear infinite;transform-origin:50% 50%}
.sfx{animation:wobble .9s ease-in-out infinite;transform-origin:50% 50%}
.spark{animation:twinkle 1.2s ease-in-out infinite;transform-origin:50% 50%}
.spark:nth-of-type(2){animation-delay:.4s}.spark:nth-of-type(3){animation-delay:.8s}
@keyframes bob{50%{transform:translateY(-6px)}}
@keyframes jiggle{0%,100%{transform:scale(1,1)}30%{transform:scale(1.04,.96)}60%{transform:scale(.98,1.03)}}
@keyframes shake{0%{transform:translate(0,0)}25%{transform:translate(-1.5px,1px)}50%{transform:translate(1.5px,-1px)}75%{transform:translate(-1px,-1px)}}
@keyframes wobble{50%{transform:rotate(-6deg) scale(1.08)}}
@keyframes twinkle{50%{transform:scale(.4);opacity:.4}}

.play .panel{animation:pop .55s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(var(--i) * 1.8s)}
.play .bubble{animation:bub .45s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(var(--i) * 1.8s + .5s + var(--b,0) * .8s)}
.play .myth{animation:pop .55s cubic-bezier(.2,1.5,.4,1) both;animation-delay:7.6s}
@keyframes pop{from{opacity:0;transform:scale(.9) rotate(-1deg)}}
@keyframes bub{from{opacity:0;transform:scale(.3) translateY(20px)}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}

/* ---------- site chrome (header link, nav, home) ---------- */
a{color:inherit}
.logo a{text-decoration:none;color:inherit}
.ep-nav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.navbtn{font-family:var(--display);font-size:20px;letter-spacing:1.5px;text-decoration:none;background:var(--paper);
  border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:6px 16px;display:inline-block}
.navbtn.primary{background:var(--fat)}
.navbtn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.navbtn:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.navbtn.off{opacity:.45;pointer-events:none;box-shadow:none}
.tagline{font-size:18px;margin:6px 0 0;max-width:60ch}
.latest{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:var(--gut);border:4px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);text-decoration:none;overflow:hidden}
.latest .txt{padding:20px 22px;display:flex;flex-direction:column;gap:10px;justify-content:center;background:var(--paper);border-left:4px solid var(--ink)}
.latest .kicker{font-family:var(--display);letter-spacing:1.5px;font-size:16px;background:var(--muscle);color:#fff;align-self:flex-start;padding:2px 10px;border:2px solid var(--ink)}
.latest h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,5vw,46px);letter-spacing:1px;margin:0;line-height:1}
.latest p{margin:0;font-size:17px}
.latest svg{display:block;width:100%;height:auto}
@media (max-width:640px){.latest{grid-template-columns:1fr}.latest .txt{border-left:0;border-top:4px solid var(--ink)}}
.section-title{font-family:var(--display);font-weight:400;font-size:28px;letter-spacing:1.5px;margin:10px 0 0}
.archive{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.archive a{display:flex;flex-direction:column;gap:4px;background:var(--paper);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  padding:12px 14px;text-decoration:none;height:100%}
.archive a:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.archive .num{font-family:var(--display);font-size:34px;line-height:1;color:var(--muscle);-webkit-text-stroke:1px var(--ink)}
.archive .t{font-weight:700;font-size:17px}
.archive .d{font-size:13px;opacity:.7;font-variant-numeric:tabular-nums}
.copy{font-size:13px;opacity:.7;text-align:center;margin:10px 0 0}