:root{--paper:#ffef37;--paper2:#fff8d8;--ink:#111;--hot:#f21d45;--blue:#1687ff;--acid:#8dff2f;--panel-gap:12px;--hero-angle:-1deg;--title-angle:1deg;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink)}body{font-family:Impact,Haettenschweiler,"Arial Narrow Bold",Arial,sans-serif;overflow-x:hidden}button,a{font:inherit}.page{position:relative;isolation:isolate;min-height:100vh;padding:clamp(18px,4vw,54px);overflow:hidden;background:radial-gradient(circle,var(--ink) 0 1.3px,transparent 1.6px) 0 0/9px 9px,var(--paper)}.page::before{content:"";position:absolute;z-index:-1;inset:2%;background:var(--paper2);border:clamp(7px,1vw,13px) solid var(--ink);box-shadow:14px 17px 0 var(--hot);transform:rotate(-.25deg)}
.speed-lines{position:absolute;z-index:-1;inset:-30%;background:repeating-conic-gradient(from 12deg at 53% 47%,transparent 0 4deg,color-mix(in srgb,var(--ink) 22%,transparent) 4.2deg 4.8deg);animation:throb 2.5s steps(2) infinite}.comic-grid{position:relative;max-width:1180px;min-height:780px;margin:auto;display:grid;grid-template-columns:38% 1fr 25%;grid-template-rows:auto 1fr auto;grid-template-areas:"title hero react" "title hero contract" "narrate hero social";gap:var(--panel-gap);padding:clamp(13px,3vw,34px)}.panel{position:relative;border:clamp(5px,.7vw,9px) solid var(--ink);background:var(--paper2);box-shadow:7px 8px 0 var(--ink);overflow:hidden}.title-panel{grid-area:title;padding:clamp(18px,3vw,38px);transform:rotate(var(--title-angle));background:linear-gradient(145deg,var(--hot),var(--hot) 52%,var(--paper) 52%)}.title-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,#fff 0 1.5px,transparent 1.7px) 0 0/8px 8px;opacity:.3}.issue{position:relative;display:inline-block;padding:5px 10px;background:var(--ink);color:var(--paper2);font:900 11px Arial,sans-serif;letter-spacing:.13em;transform:rotate(-3deg)}.title-panel p{position:relative;margin:18px 0 4px;font:900 clamp(10px,1.5vw,16px)/1.15 Arial,sans-serif;letter-spacing:.1em}.title-panel h1{position:relative;margin:8px 0;font-size:clamp(59px,9vw,118px);line-height:.72;letter-spacing:-.06em;text-transform:uppercase;color:var(--paper2);-webkit-text-stroke:clamp(2px,.35vw,5px) var(--ink);text-shadow:6px 6px 0 var(--blue),11px 11px 0 var(--ink);overflow-wrap:anywhere}.ticker-burst{position:absolute;right:5%;bottom:5%;display:grid;place-items:center;width:clamp(105px,13vw,165px);aspect-ratio:1;background:var(--acid);color:var(--ink);border:5px solid var(--ink);clip-path:polygon(50% 0,59% 28%,76% 6%,75% 35%,100% 26%,82% 48%,100% 63%,71% 62%,77% 93%,56% 71%,44% 100%,39% 72%,13% 93%,27% 64%,0 62%,22% 47%,0 29%,29% 35%,24% 6%,43% 29%);font-size:clamp(20px,3vw,37px);transform:rotate(9deg);filter:drop-shadow(6px 6px 0 var(--ink))}
.hero-panel{grid-area:hero;margin:0;display:grid;place-items:center;min-height:690px;transform:rotate(var(--hero-angle));background:radial-gradient(circle,var(--ink) 0 1.5px,transparent 1.8px) 0 0/8px 8px,var(--blue)}.hero-panel img{grid-area:1/1;width:100%;height:100%;object-fit:cover}.hero-panel #banner-image{opacity:.5;filter:contrast(1.25) saturate(1.4)}.hero-panel #hero-image{position:relative;z-index:2;width:93%;height:93%;object-fit:contain;filter:drop-shadow(10px 12px 0 var(--ink))}.hero-panel.banner-only #banner-image{opacity:1}.hero-panel figcaption{position:absolute;z-index:6;left:0;right:10%;bottom:3%;padding:9px 15px;background:var(--paper2);border-block:5px solid var(--ink);font-size:clamp(15px,2.2vw,26px);font-style:italic;letter-spacing:.05em;transform:rotate(-2deg)}.media-fallback{display:grid;place-items:center;text-align:center}.media-fallback b{font-size:clamp(160px,26vw,320px);line-height:.7;color:var(--paper);-webkit-text-stroke:6px var(--ink);text-shadow:12px 13px 0 var(--hot)}.media-fallback span{padding:8px 15px;background:var(--ink);color:#fff;font-size:clamp(18px,3vw,32px);transform:rotate(-5deg)}
.reaction-panel{grid-area:react;min-height:210px;background:var(--acid);overflow:visible}.reaction-face{position:absolute;right:-8%;bottom:-16%;width:66%;aspect-ratio:1;border:5px solid var(--ink);border-radius:50%;background:var(--paper2);display:grid;place-items:center}.reaction-face i{position:absolute;top:25%;width:17%;aspect-ratio:1;border:5px solid var(--ink);border-radius:50%;background:var(--blue)}.reaction-face i:first-child{left:22%}.reaction-face i:nth-child(2){right:22%}.reaction-face b{margin-top:30%;font-size:70px}.speech{position:absolute;z-index:3;left:5%;top:6%;width:72%;padding:12px 13px;border:5px solid var(--ink);border-radius:50%;background:#fff;text-align:center;font:900 clamp(12px,1.8vw,19px)/1.05 Arial,sans-serif;transform:rotate(-5deg)}.speech::after{content:"";position:absolute;right:12%;bottom:-25px;border:20px solid transparent;border-top-color:var(--ink);transform:rotate(-15deg)}
.contract-panel{grid-area:contract;padding:12px;background:var(--hot);transform:rotate(1.5deg)}.contract-panel>span{display:inline-block;padding:3px 7px;background:var(--ink);color:#fff;font:900 9px Arial,sans-serif;letter-spacing:.15em}.contract-panel button{width:100%;border:0;background:transparent;color:var(--ink);cursor:pointer;text-align:left}.contract-panel button strong,.contract-panel button small,.contract-panel button em{display:block}.contract-panel strong{font-size:clamp(24px,4vw,46px);line-height:.85;text-shadow:3px 3px 0 var(--paper)}.contract-panel small{margin-top:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:10px Consolas,monospace}.contract-panel em{font:900 9px Arial,sans-serif;letter-spacing:.12em}.contract-panel:hover{background:var(--acid)}.social-panel{grid-area:social;display:flex;flex-direction:column;justify-content:center;gap:9px;padding:12px;background:var(--blue);transform:rotate(-1deg)}.social-panel a{display:flex;align-items:center;gap:8px;padding:7px;background:#fff;border:4px solid var(--ink);color:var(--ink);text-decoration:none;box-shadow:4px 4px 0 var(--ink);font:900 10px Arial,sans-serif}.social-panel a:hover{background:var(--paper)}.social-panel b{font-size:22px}.narration{grid-area:narrate;align-self:end;padding:12px;background:var(--paper);font:900 clamp(12px,1.7vw,18px)/1.15 Arial,sans-serif;letter-spacing:.05em;transform:rotate(-2deg)}
.impact{position:absolute;z-index:8;color:var(--paper2);-webkit-text-stroke:4px var(--ink);text-shadow:7px 7px 0 var(--hot),11px 11px 0 var(--ink);font-size:clamp(55px,10vw,130px);font-style:italic;pointer-events:none}.impact-a{left:-1%;top:42%;transform:rotate(-16deg)}.impact-b{right:-1%;bottom:7%;transform:rotate(13deg);color:var(--acid)}.ticker-ribbon{position:relative;z-index:9;max-width:1080px;margin:5px auto 0;overflow:hidden;border:6px solid var(--ink);background:var(--ink);color:var(--paper);white-space:nowrap;transform:rotate(-1deg);font-size:clamp(16px,2.5vw,28px);letter-spacing:.09em}.ticker-ribbon span{display:inline-block;min-width:max-content;animation:crawl 11s linear infinite}
.layout-splash .comic-grid{grid-template-columns:29% 1fr;grid-template-areas:"title hero" "react hero" "contract hero" "social narrate"}.layout-splash .hero-panel{grid-row:1/4}.layout-strip .comic-grid{grid-template-columns:1fr 34%;grid-template-areas:"hero title" "hero react" "contract social" "narrate narrate"}.layout-strip .hero-panel{min-height:610px}.layout-zine .comic-grid{grid-template-columns:34% 1fr 20%;grid-template-areas:"title hero react" "contract hero react" "social hero narrate";--panel-gap:7px}.frame-oval .hero-panel{clip-path:polygon(4% 0,96% 0,100% 6%,100% 94%,96% 100%,4% 100%,0 94%,0 6%)}.frame-slash .hero-panel{clip-path:polygon(8% 0,100% 0,92% 100%,0 100%)}
@keyframes crawl{to{transform:translateX(-50%)}}@keyframes throb{50%{transform:scale(1.02)}}
@media(max-width:760px){.page{padding:12px 5px}.page::before{inset:4px;box-shadow:5px 7px 0 var(--hot)}.comic-grid,.layout-splash .comic-grid,.layout-strip .comic-grid,.layout-zine .comic-grid{display:flex;flex-direction:column;min-height:0;padding:14px}.title-panel{min-height:400px}.title-panel h1{font-size:78px}.hero-panel,.layout-strip .hero-panel{min-height:520px;order:2}.title-panel{order:1}.reaction-panel{order:3;min-height:210px}.contract-panel{order:4}.social-panel{order:5}.narration{order:6}.impact{font-size:56px;-webkit-text-stroke:2px var(--ink);text-shadow:3px 3px 0 var(--hot),6px 6px 0 var(--ink)}.impact-a{top:46%}.impact-b{bottom:2%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important}}