/* The Food Toon — opening comic. Silver-age action-comic splash. */

#comic{position:fixed;inset:0;z-index:9000;overflow-y:auto;overflow-x:hidden;
  background:#1b1636;
  background-image:
    radial-gradient(circle at 18% 12%,rgba(244,81,30,.5),transparent 48%),
    radial-gradient(circle at 84% 78%,rgba(19,163,181,.45),transparent 52%),
    linear-gradient(160deg,#241a3f 0%,#140f2b 60%,#2b0b1f 100%);
  font-family:"Haettenschweiler","Impact","Arial Narrow",system-ui,sans-serif;
}
#comic[hidden]{display:none}
#comic.closing{animation:comicOut .45s ease forwards}
@keyframes comicOut{to{opacity:0;transform:scale(1.04)}}

/* Ben-Day dots over the whole thing */
#comic::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background-image:radial-gradient(rgba(0,0,0,.26) 1px,transparent 1.4px);
  background-size:5px 5px;mix-blend-mode:multiply;opacity:.6}

.comicwrap{position:relative;z-index:2;max-width:1560px;margin:0 auto;
  padding:26px 28px 120px}

/* ------------------------------------------------------------ title block */
.comictitle{text-align:center;margin-bottom:26px}
.comictitle .issue{display:inline-block;background:#111;color:#ffd23f;
  border:3px solid #000;padding:5px 16px;font-size:14px;letter-spacing:.22em;
  transform:rotate(-1.4deg);margin-bottom:12px;
  font-family:"Arial Black",system-ui,sans-serif}
.comictitle h1{font-size:clamp(42px,8vw,96px);line-height:.86;margin:0;
  color:#ffd23f;letter-spacing:2px;text-transform:uppercase;
  -webkit-text-stroke:3px #000;paint-order:stroke fill;
  text-shadow:6px 6px 0 #f4511e,10px 10px 0 rgba(0,0,0,.55);
  transform:rotate(-1.2deg)}
.comictitle .sub{margin-top:14px;color:#fff;font-size:clamp(13px,1.6vw,18px);
  letter-spacing:.28em;text-transform:uppercase;
  font-family:"Arial Black",system-ui,sans-serif;
  text-shadow:2px 2px 0 #000}

/* ----------------------------------------------------------------- panels */
.panels{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.panel{position:relative;border:5px solid #000;background:#000;overflow:hidden;
  box-shadow:9px 9px 0 rgba(0,0,0,.5);
  opacity:0;transform:translateY(26px) scale(.96);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,1.2,.3,1)}
.panel.in{opacity:1;transform:none}
.panel img{width:100%;height:100%;object-fit:cover;display:block;
  filter:contrast(1.28) saturate(1.5) brightness(1.04)}
.panel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(0,0,0,.3) 1px,transparent 1.5px);
  background-size:4px 4px;mix-blend-mode:multiply;opacity:.55}

.p1{grid-column:span 4;aspect-ratio:16/9}
.p2{grid-column:span 2;aspect-ratio:3/4}
.p3{grid-column:span 3;aspect-ratio:4/3}
.p4{grid-column:span 3;aspect-ratio:4/3}
.p5{grid-column:span 6;aspect-ratio:21/9}
.p6{grid-column:span 3;aspect-ratio:4/3}
.p7{grid-column:span 3;aspect-ratio:4/3}

/* --------------------------------------------------------- caption boxes */
.cap{position:absolute;background:#ffd23f;color:#111;border:4px solid #000;
  padding:8px 14px;font-size:clamp(12px,1.25vw,17px);letter-spacing:.06em;
  text-transform:uppercase;line-height:1.15;max-width:72%;z-index:3;
  font-family:"Arial Black",system-ui,sans-serif;
  box-shadow:4px 4px 0 rgba(0,0,0,.45)}
/* Text lives along the BOTTOM of every panel. Faces sit in the upper two
   thirds of almost every photo, so nothing up there gets covered. */
.cap.tl,.cap.tr,.cap.bl{top:auto;bottom:auto;left:10px;right:auto}
.panel{display:flex;flex-direction:column;justify-content:flex-end}
.panel img{position:absolute;inset:0}
.ptext{position:relative;z-index:6;display:flex;flex-direction:column;
  align-items:flex-start;gap:8px;padding:34px 12px 12px;width:100%;
  background:linear-gradient(transparent,rgba(12,6,10,.78) 58%)}
.ptext .cap,.ptext .bub{position:static;max-width:100%}
.ptext .bub.right{align-self:flex-end}

/* ------------------------------------------------------- speech balloons */
.bub{position:absolute;background:#fff;color:#111;border:4px solid #000;
  border-radius:24px;padding:12px 18px;z-index:4;max-width:74%;
  font-size:clamp(14px,1.5vw,22px);line-height:1.12;text-transform:uppercase;
  font-family:"Arial Black",system-ui,sans-serif;
  box-shadow:4px 4px 0 rgba(0,0,0,.4)}
.bub::after{content:"";position:absolute;width:0;height:0;
  border:15px solid transparent}
.bub.d-bl{bottom:-26px;left:30px;border-top-color:#000}
.bub.d-br{bottom:-26px;right:30px;border-top-color:#000}
.bub b{color:#f4511e}
.bub.top,.bub.mid,.bub.bot{position:static}
.bub.shout{background:#f4511e;color:#fff;border-radius:6px;
  transform:rotate(-2deg);font-size:clamp(16px,2vw,28px)}

/* ----------------------------------------------------- sound effect words */
.sfx{position:absolute;z-index:5;color:#ffd23f;line-height:.84;
  font-size:clamp(34px,6.5vw,104px);letter-spacing:1px;text-transform:uppercase;
  -webkit-text-stroke:4px #000;paint-order:stroke fill;
  text-shadow:6px 6px 0 #f4511e,11px 11px 0 rgba(0,0,0,.5);
  transform:rotate(-7deg)}
.sfx.c{left:4%;top:68%;transform:rotate(-7deg)}
.sfx.r{right:5%;top:12%}
.sfx.small{font-size:clamp(22px,3.4vw,52px)}

/* -------------------------------------------------------------- final CTA */
.comiccta{margin-top:28px;text-align:center}
.comiccta .line{color:#fff;font-size:clamp(15px,1.9vw,24px);letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:16px;
  font-family:"Arial Black",system-ui,sans-serif;text-shadow:2px 2px 0 #000}
.comicbtn{display:inline-flex;align-items:center;gap:12px;background:#f4511e;
  color:#fff;border:5px solid #000;border-radius:999px;
  padding:19px 44px;font-size:clamp(19px,2.4vw,30px);letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;
  font-family:"Arial Black",system-ui,sans-serif;
  box-shadow:7px 7px 0 rgba(0,0,0,.55);transition:transform .14s}
.comicbtn:hover{background:#ff8a3d;transform:translate(-2px,-2px);
  box-shadow:10px 10px 0 rgba(0,0,0,.55)}
.comicbtn:active{transform:translate(3px,3px);box-shadow:3px 3px 0 rgba(0,0,0,.55)}

.comicskip{position:fixed;top:18px;right:20px;z-index:12;background:#f4511e;
  color:#fff;border:4px solid #000;border-radius:999px;padding:14px 30px;
  font-size:17px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  font-family:"Arial Black",system-ui,sans-serif;
  box-shadow:5px 5px 0 rgba(0,0,0,.55)}
.comicskip:hover{background:#ff8a3d;transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 rgba(0,0,0,.55)}
.comicskip:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(0,0,0,.55)}

/* ------------------------------------------------------------- phone ---- */
@media (max-width:860px){
  .comicwrap{padding:18px 13px 100px}
  .panels{grid-template-columns:repeat(2,1fr);gap:11px}
  .p1,.p5{grid-column:span 2;aspect-ratio:16/10}
  .p2,.p3,.p4,.p6,.p7{grid-column:span 2;aspect-ratio:4/3}
  .cap{max-width:84%;padding:7px 11px}
  .bub{max-width:82%;padding:10px 14px}
  .panel{border-width:4px;box-shadow:6px 6px 0 rgba(0,0,0,.5)}
  .comicskip{top:10px;right:10px;padding:11px 20px;font-size:14px;border-width:3px}
}