@font-face{font-family:Bangers;src:url(fonts/bangers.ttf);font-display:swap}
@font-face{font-family:Luckiest;src:url(fonts/luckiest-guy.ttf);font-display:swap}
@font-face{font-family:ComicNeue;src:url(fonts/comic-neue.ttf);font-display:swap}
:root{--ink:#111;--paper:#fffdf3;--cap:#fff6b3;--aurora:#3ee6a8;--sky:#1b3a6b;--gold:#ffc83d;--red:#e63946}
*{box-sizing:border-box}
body{margin:0;font-family:ComicNeue,"Comic Sans MS",sans-serif;font-size:1.08rem;line-height:1.5;color:var(--ink);background:var(--sky) radial-gradient(circle,rgba(255,255,255,.12) 1.5px,transparent 1.6px) 0 0/10px 10px}
.draft{position:sticky;top:0;z-index:9;background:var(--red);color:#fff;text-align:center;font-family:Bangers;letter-spacing:.08em;font-size:1.15rem;padding:.35rem;border-bottom:3px solid var(--ink)}
nav{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;padding:.6rem;background:var(--ink)}
nav a{font-family:Bangers;font-size:1.1rem;letter-spacing:.06em;color:var(--ink);background:var(--gold);padding:.2rem .7rem;border:2px solid #fff;text-decoration:none;transform:skew(-8deg)}
nav a:focus,nav a:hover{background:var(--aurora)}
main{max-width:1080px;margin:0 auto;padding:1rem .7rem 2rem;display:grid;gap:14px}
.panel{background:var(--paper);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:1.3rem 1.1rem;position:relative;overflow:hidden}
.panel.dots{background:var(--paper) radial-gradient(circle,rgba(230,57,70,.18) 2px,transparent 2.2px) 0 0/12px 12px}
.sfx{font-family:Luckiest,Bangers,sans-serif;font-size:clamp(2rem,7vw,3.4rem);line-height:1;margin:.2rem 0 1rem;color:var(--gold);-webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--ink);transform:rotate(-3deg);display:inline-block;letter-spacing:.03em}
.sfx.red{color:var(--red)}.sfx.green{color:var(--aurora)}
h3{font-family:Bangers;font-size:1.6rem;letter-spacing:.05em;margin:1rem 0 .4rem}
.caption{background:var(--cap);border:1.5px solid var(--ink);border-radius:0;padding:.55rem .8rem;font-family:ComicNeue,sans-serif;font-weight:700;font-style:italic;text-transform:uppercase;font-size:.95rem;letter-spacing:.02em;max-width:36rem;margin:.4rem 0 1rem}
.caption.tilt{transform:rotate(-1.5deg)}
.caption .who{display:block;font-family:Bangers;font-style:normal;font-size:.85rem;letter-spacing:.1em}
.balloon{position:relative;background:#fff;border:3px solid var(--ink);border-radius:50% / 40%;padding:1.1rem 1.6rem;font-weight:700;text-align:center;max-width:30rem;margin:.5rem auto 1.6rem}
.balloon:after{content:"";position:absolute;bottom:-22px;left:22%;border:12px solid transparent;border-top:22px solid var(--ink)}
.thought{position:relative;background:#fff;border:3px solid var(--ink);border-radius:40px;padding:1rem 1.4rem;font-style:italic;max-width:30rem}
.thought:before,.thought:after{content:"";position:absolute;background:#fff;border:3px solid var(--ink);border-radius:50%}
.thought:before{width:22px;height:22px;bottom:-26px;left:30px}.thought:after{width:12px;height:12px;bottom:-42px;left:20px}
.hero{background:linear-gradient(180deg,#0b1c3a 0%,#1b3a6b 45%,#2d7a6a 75%,#3ee6a8 100%);color:#fff;text-align:center;padding:2.2rem 1rem 0}
.hero h1{font-family:Luckiest,Bangers;font-size:clamp(2.4rem,10vw,5rem);line-height:.95;margin:.3rem 0;color:var(--gold);-webkit-text-stroke:3px var(--ink);text-shadow:6px 6px 0 var(--ink);transform:rotate(-2deg)}
.hero .tag{font-family:Bangers;font-size:1.4rem;letter-spacing:.06em}
.mtn{display:block;width:100%;height:90px;margin-top:1rem}
.burst{display:inline-block;background:var(--red);color:#fff;font-family:Bangers;font-size:1.3rem;letter-spacing:.06em;padding:.8rem 1.4rem;clip-path:polygon(50% 0,61% 22%,85% 8%,78% 34%,100% 40%,80% 56%,95% 82%,68% 74%,58% 100%,45% 78%,22% 95%,25% 68%,0 62%,20% 46%,5% 22%,32% 26%);margin:.5rem}
.grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:repeat(3,1fr)}}
figure{margin:0;border:4px solid var(--ink);background:#fff;box-shadow:4px 4px 0 var(--ink)}
figure img{display:block;width:100%;height:auto}
figcaption{background:var(--cap);border-top:2px solid var(--ink);padding:.4rem .6rem;font-weight:700;font-style:italic;text-transform:uppercase;font-size:.85rem}
.historian{display:grid;gap:1rem;align-items:center}
@media(min-width:760px){.historian{grid-template-columns:300px 1fr}}
.historian img{width:100%;border:4px solid var(--ink);box-shadow:6px 6px 0 var(--gold);background:#fff}
.btn{display:inline-block;font-family:Bangers;font-size:1.2rem;letter-spacing:.05em;background:var(--gold);color:var(--ink);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:.4rem 1rem;text-decoration:none}
.video{position:relative;aspect-ratio:16/9;border:4px solid var(--ink)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
form label{font-weight:700;display:block}
form input{font:inherit;padding:.5rem;border:3px solid var(--ink);width:100%;max-width:22rem}
form button{margin-top:.5rem;cursor:not-allowed}
.disclosure{font-weight:700;border-left:6px solid var(--red);padding-left:.6rem}
footer{text-align:center;color:#fff;padding:1.4rem;font-family:Bangers;letter-spacing:.06em;font-size:1.1rem;background:var(--ink)}
a{color:#0b4fa8}
.comicgrid{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);grid-auto-flow:dense;background:var(--ink);padding:10px;border:4px solid var(--ink)}
@media(min-width:760px){.comicgrid{grid-template-columns:repeat(4,1fr)}}
.cell{position:relative;display:block;background:#fff;border:3px solid #fff;overflow:hidden;aspect-ratio:1}
.cell:nth-child(5n+1){grid-column:span 2;aspect-ratio:2/1}
.cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.cell:hover img,.cell:focus img{transform:scale(1.05)}
.cell span{position:absolute;left:4px;top:4px;background:var(--cap);border:1.5px solid var(--ink);font-weight:700;font-style:italic;text-transform:uppercase;font-size:.7rem;padding:.15rem .35rem;color:var(--ink)}
dialog{border:5px solid var(--ink);box-shadow:8px 8px 0 var(--gold);padding:.6rem;max-width:94vw;background:var(--paper)}
dialog::backdrop{background:rgba(0,0,0,.8)}
dialog img{display:block;max-width:90vw;max-height:75vh;margin:.5rem auto}

/* Hero banner panel (Lu, Oct 28 2026) */
.hero{position:relative;overflow:hidden;padding-top:1.4rem}
.hero::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 38%,rgba(255,215,64,.18) 0 6deg,transparent 6deg 14deg);pointer-events:none;animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-panel{position:relative;max-width:1100px;margin:0 auto 1.2rem;border:6px solid var(--ink);background:var(--ink);box-shadow:10px 10px 0 var(--ink),0 0 0 3px var(--gold),0 0 40px rgba(62,230,168,.55);transform:rotate(-1.2deg);animation:slam .7s cubic-bezier(.2,1.6,.4,1) both}
.hero-panel img{display:block;width:100%;height:auto;filter:saturate(1.15) contrast(1.06)}
.hero-panel::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(0,0,0,.18) 1px,transparent 1.4px) 0 0/6px 6px;mix-blend-mode:multiply;pointer-events:none}
.pow{position:absolute;right:-10px;bottom:-18px;font-family:Bangers,Luckiest;font-size:clamp(1.6rem,5vw,3rem);color:#ffd740;-webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--ink);background:#e8302f;padding:.15em .55em;clip-path:polygon(0 20%,12% 0,30% 14%,48% 0,64% 16%,82% 2%,100% 22%,90% 50%,100% 78%,80% 100%,60% 86%,40% 100%,22% 84%,4% 100%,10% 60%);transform:rotate(8deg);z-index:2}
.hero h1,.hero .tag,.hero .burst{position:relative;z-index:1}
@keyframes slam{0%{transform:scale(1.25) rotate(-4deg);opacity:0}100%{transform:rotate(-1.2deg);opacity:1}}
@media (prefers-reduced-motion:reduce){.hero::before,.hero-panel{animation:none}}
@media (max-width:600px){.hero-panel{border-width:4px;box-shadow:6px 6px 0 var(--ink),0 0 0 2px var(--gold),0 0 24px rgba(62,230,168,.5)}.pow{right:-4px;bottom:-12px}}
.burst{clip-path:polygon(4% 18%,16% 6%,24% 20%,38% 0,48% 16%,62% 2%,70% 18%,86% 6%,90% 24%,100% 32%,94% 50%,100% 70%,88% 78%,84% 96%,68% 84%,56% 100%,44% 84%,30% 98%,22% 80%,6% 92%,8% 72%,0 56%,6% 40%,0 26%);padding:1.4rem 2.6rem;font-size:clamp(1.1rem,4.5vw,1.5rem);color:#ffd740;-webkit-text-stroke:1px #111;text-shadow:2px 2px 0 #111}