main{max-width:1120px;margin:0 auto;padding:0 16px}

/* hero */
.hero{display:grid;gap:18px;padding:26px 0 34px}
.hero-art{position:relative;display:flex;flex-direction:column;align-items:center;gap:34px}
.hero-art .bubble{max-width:520px;order:-1;align-self:flex-start}
/* --k shrinks the lockup when he gets called something enormous,
   and the stroke has to shrink with it or the letters fill in solid */
.wordmark{
  --wm:clamp(46px,13vw,104px);
  --k:1;
  font:600 calc(var(--wm)*var(--k))/.95 var(--display);
  color:var(--orange);
  -webkit-text-stroke:calc(var(--wm)*var(--k)*.087) var(--ink);paint-order:stroke fill;
  letter-spacing:-.01em;overflow-wrap:anywhere;
}
.wordmark-name{display:inline-block}
.wordmark-cat{display:inline-block}
.wordmark-name.is-swap{opacity:.15}
.asspelled{font:400 14px/1.4 var(--mono);color:var(--grey);margin-top:10px}
.asspelled em{font-style:normal;color:var(--ink);background:var(--cheek);padding:1px 6px;border:2px solid var(--ink)}
.tagline{font:600 clamp(21px,4.4vw,30px)/1.25 var(--display);margin-top:16px}
.blurb{margin-top:12px;max-width:56ch}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.cta-note{font:400 14px/1.4 var(--mono);color:var(--grey);margin-top:12px}

@media (min-width:900px){
  .hero{grid-template-columns:1.05fr .95fr;align-items:center;gap:30px;padding:44px 0 54px}
  .hero-art{order:2}
  .hero-art .bubble{position:absolute;top:-10px;left:0;order:0;max-width:340px}
}

/* sections */
.sec{padding:34px 0;border-top:var(--stroke) dashed var(--ink)}
.sec-head{margin-bottom:20px}
.sec-title{
  font:600 clamp(30px,6.4vw,48px)/1 var(--display);
  color:var(--white);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;
}
.sec-sub{margin-top:12px;max-width:62ch;color:var(--ink)}

/* the tape */
.tape-box{background:var(--white);border:var(--stroke) solid var(--ink);border-radius:20px 8px 24px 10px/10px 22px 8px 20px;box-shadow:var(--shadow);padding:16px}
.tape-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.tape-meta{font:400 13px/1.3 var(--mono);color:var(--grey)}
.script{display:grid;gap:8px}
.line-stage{font:400 15px/1.4 var(--mono);color:var(--grey);padding:4px 8px}
.line-btn{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;
  width:100%;text-align:left;cursor:pointer;
  background:var(--paper);border:4px solid var(--ink);
  border-radius:14px 6px 16px 7px/7px 15px 6px 14px;
  padding:10px 12px;font:inherit;
}
.line-jon .line-btn{background:#DCE6F7}
.line-cat .line-btn{background:var(--cheek)}
.line-btn:hover{background:var(--orange)}
.line-btn[data-on="yes"]{background:var(--orange);box-shadow:4px 4px 0 var(--ink)}
.line-who{font:600 15px/1.3 var(--display);white-space:nowrap}
.line-text{font-weight:700}
.tape-foot{margin-top:14px;font:400 14px/1.4 var(--mono);color:var(--grey)}

/* the fridge */
.sec-head-icon{display:flex;gap:16px;align-items:flex-start}
.sec-icon{width:64px;flex:none;margin-top:4px}
.kitchen{display:grid;gap:22px}
.kitchen-jon{grid-area:jon;display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:start}
.jon-img{width:88px}
/* he stands in his own scene, so the answer lands where you clicked */
.kitchen-cat{grid-area:cat;display:grid;gap:14px;justify-items:center}
.kitchen-cat .cat{max-width:340px}
.bubble-cat{background:var(--cheek);max-width:400px}
.bubble-cat::after{left:36px;top:-30px;bottom:auto;border:12px solid transparent;border-bottom:24px solid var(--ink)}
.bubble-jon{background:#DCE6F7;padding:12px 14px}
.bubble-jon::after{left:-30px;top:26px;bottom:auto;border:12px solid transparent;border-right:22px solid var(--ink)}
.bubble-jon .bubble-text{font-size:17px}

/* the shelf reads as the lit inside of the fridge, so the items are in it
   rather than parked next to a drawing of one */
.inside{
  background:linear-gradient(180deg,#EAF6FB 0%,var(--white) 42%);
  border:var(--stroke) solid var(--ink);
  border-radius:12px 26px 10px 24px/23px 10px 26px 11px;
  box-shadow:var(--shadow);
  padding:14px;position:relative;
}
.inside-tag{font:400 13px/1 var(--mono);color:var(--grey);margin-bottom:12px;text-align:center}
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.shelf-slot{position:relative;display:grid}
.shelf-btn{
  display:grid;gap:8px;justify-items:center;cursor:pointer;
  background:var(--white);border:4px solid var(--ink);
  border-radius:16px 7px 18px 8px/8px 17px 7px 16px;
  padding:12px 8px;font:inherit;box-shadow:5px 5px 0 var(--ink);height:100%;
}
.shelf-btn img{width:100%;max-width:110px}
.shelf-name{font:600 15px/1.2 var(--display);text-align:center}
.shelf-btn:hover{background:var(--cheek)}
.shelf-gone{
  display:none;position:absolute;inset:0;place-items:center;
  font:600 clamp(26px,5vw,38px)/1 var(--display);color:var(--red);
  -webkit-text-stroke:6px var(--ink);paint-order:stroke fill;
  transform:rotate(-9deg);pointer-events:none;
}
.shelf-slot[data-eaten="yes"] .shelf-btn{opacity:.13;pointer-events:none;box-shadow:none}
.shelf-slot[data-eaten="yes"] .shelf-gone{display:grid}
.fridge-foot{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:20px}
.tally{font:400 15px/1.3 var(--mono)}
.tally strong{font-size:19px}

.inside{grid-area:inside}

@media (min-width:760px){
  .kitchen{
    grid-template-columns:minmax(320px,.85fr) 1fr;
    grid-template-areas:"jon inside" "cat inside";
    align-items:start;gap:22px 26px;
  }
  .kitchen-jon{grid-template-columns:104px 1fr;gap:16px}
  .jon-img{width:104px}
  .inside{padding:18px;align-self:center}
  .shelf{gap:14px}
}

/* the wall of names */
.wall{display:flex;flex-wrap:wrap;gap:9px}
.wall-btn{
  cursor:pointer;font:inherit;background:var(--white);
  border:3px solid var(--ink);border-radius:12px 5px 13px 6px/6px 12px 5px 13px;
  padding:7px 11px;display:block;text-align:left;
}
.wall-btn:hover{background:var(--orange)}
.wall-btn[data-on="yes"]{background:var(--orange)}
.wall-name{display:block;font:600 17px/1.15 var(--display)}
.wall-ep{display:block;font:400 11px/1.3 var(--mono);color:var(--grey);max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wall-foot{margin-top:18px;font:400 14px/1.45 var(--mono);color:var(--grey)}

/* the videos */
.vhs{display:grid;gap:20px}
.vhs-item{background:var(--white);border:var(--stroke) solid var(--ink);border-radius:20px 8px 22px 9px/9px 21px 8px 20px;box-shadow:var(--shadow);padding:12px;display:grid;gap:12px}
.vhs-screen{position:relative;background:var(--ink);border:4px solid var(--ink);border-radius:10px;overflow:hidden;aspect-ratio:16/9}
.vhs-screen iframe{width:100%;height:100%;border:0;display:block}
.vhs-play{width:100%;height:100%;padding:0;border:0;background:var(--ink);cursor:pointer;display:block;position:relative}
.vhs-thumb{width:100%;height:100%;object-fit:cover;opacity:.82}
.vhs-tri{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:0;height:0;border:26px solid transparent;border-left:44px solid var(--orange);
  filter:drop-shadow(4px 4px 0 var(--ink));
}
.vhs-play:hover .vhs-thumb{opacity:1}
.vhs-title{font:600 20px/1.15 var(--display)}
.vhs-by{font:400 13px/1.3 var(--mono);color:var(--grey);margin-top:3px}
.vhs-note{margin-top:7px}
.vhs-out{display:inline-block;margin-top:8px;font:400 14px/1 var(--mono)}
@media (min-width:720px){.vhs{grid-template-columns:1fr 1fr}}

/* how to buy */
.buy-grid{display:grid;gap:22px}
.steps{display:grid;gap:14px}
.step{background:var(--white);border:4px solid var(--ink);border-radius:16px 7px 18px 8px/8px 17px 7px 16px;box-shadow:5px 5px 0 var(--ink);padding:14px 16px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px}
.step-n{grid-row:1/3;font:600 40px/1 var(--display);color:var(--orange);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill}
.step-t{font:600 20px/1.2 var(--display)}
.step-d{color:var(--ink)}
.label{background:var(--cheek);border:var(--stroke) solid var(--ink);border-radius:10px 24px 9px 22px/21px 9px 25px 10px;box-shadow:var(--shadow);padding:16px}
.label-head{font:600 24px/1 var(--display);margin-bottom:12px}
.label-img{width:100%;max-width:320px;margin:0 auto 12px}
.label-rows{display:grid;gap:6px;font-family:var(--mono);font-size:14px}
.label-row{display:flex;justify-content:space-between;gap:12px;border-bottom:2px dashed var(--ink);padding-bottom:5px}
.label-row dt{font-weight:700}
.label-row dd{text-align:right}
@media (min-width:820px){.buy-grid{grid-template-columns:1.15fr .85fr;align-items:start}}

/* footer */
.foot{border-top:var(--stroke) solid var(--ink);background:var(--orange);margin-top:30px;padding:30px 16px 40px;display:grid;gap:16px;justify-items:center;text-align:center}
.foot-straw{max-width:44ch;font:700 19px/1.35 var(--body)}
.foot-links{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.foot-links a{font:600 18px/1 var(--display);color:var(--ink);background:var(--white);border:4px solid var(--ink);border-radius:13px 6px 15px 7px/7px 14px 6px 13px;padding:8px 14px;text-decoration:none;box-shadow:4px 4px 0 var(--ink)}
.foot-links a:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.foot-canary{font:400 14px/1.3 var(--mono)}
.foot-fine{font:400 13px/1.45 var(--mono);max-width:52ch;color:#4A3B1A}

body.is-shook{animation:shook .42s steps(2) 2}
@keyframes shook{0%{transform:translate(0,0)}25%{transform:translate(-7px,3px)}50%{transform:translate(6px,-4px)}75%{transform:translate(-4px,-2px)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){body.is-shook{animation:none}}