@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Nunito:wght@600;800;900&family=Playpen+Sans:wght@800&family=Titan+One&display=swap');
:root { --ink:#111; --paper:#fffdf7; --purple:#7869c3; --blue:#2ebfc1; --violet:#7869c3; --coral:#f3656b; --aqua:#fcc04b; --gold:#fcc04b; }
* { box-sizing:border-box; }
html { background:var(--ink); }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Nunito",sans-serif; }

.landing-shell { height:100svh; min-height:640px; display:grid; grid-template-columns:minmax(620px,1.35fr) minmax(410px,1fr); overflow:hidden; background:var(--aqua); }
.announcement { position:relative; isolation:isolate; overflow:hidden; height:100%; min-width:0; padding:clamp(22px,3vh,34px) clamp(24px,3vw,48px) clamp(12px,1.8vh,18px); display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; background:radial-gradient(circle at 38% 30%,#a8e9ea 0 10%,#86dfe1 10.2% 22%,#64d4d6 22.2% 35%,#47c9cb 35.2% 50%,var(--blue) 50.2% 66%,#269fa1 66.2% 82%,#1e7f81 82.2% 100%); }
.announcement::before,.announcement::after { content:""; position:absolute; inset:63% 0 0; pointer-events:none; clip-path:polygon(0 100%,16% 81%,28% 85%,42% 57%,55% 63%,70% 32%,83% 38%,100% 4%,100% 100%); }
.announcement::before { z-index:0; background:var(--ink); }
.announcement::after { z-index:0; background:radial-gradient(circle at 100% 100%,#ffe7a2 0 4vmin,transparent 10vmin 100%),repeating-conic-gradient(from 0deg at 100% 100%,#fcc04b 0deg 6deg,#d89b17 6.1deg 12deg,#fcc04b 12.1deg),var(--aqua); transform:translateY(8px); }
.announcement > * { position:relative; z-index:1; }
.top-content { width:100%; display:grid; grid-template-columns:clamp(150px,14vw,210px) minmax(0,1fr); gap:clamp(18px,2.2vw,34px); align-items:start; }
.brand-mark { position:relative; z-index:2; width:100%; height:auto; margin:0; filter:none; transform:none; }
.speech-card { position:relative; width:100%; padding:clamp(18px,2.3vh,28px) clamp(22px,2.3vw,36px); background:var(--paper); border:8px solid var(--ink); border-radius:48px; }
.speech-card::before,.speech-card::after { content:""; position:absolute; z-index:3; background:var(--ink); clip-path:polygon(0 0,100% 50%,0 100%); pointer-events:none; }
.speech-card::before { top:37%; left:-40px; width:57px; height:18px; transform:rotate(7deg); }
.speech-card::after { top:47%; left:-25px; width:39px; height:15px; transform:rotate(-10deg); }
.eyebrow { display:inline-block; margin:0 0 7px; padding:4px 10px 3px; background:var(--coral); border:3px solid var(--ink); font:800 clamp(.68rem,.8vw,.82rem)/1.15 "Nunito",sans-serif; letter-spacing:.07em; text-transform:uppercase; }
h1 { position:relative; z-index:1; width:max-content; margin:0; color:var(--paper); font:400 clamp(3.7rem,6.8vw,7.25rem)/.76 "Titan One",sans-serif; letter-spacing:-.025em; text-transform:uppercase; -webkit-text-stroke:clamp(5px,.48vw,8px) var(--ink); paint-order:stroke fill; }
.coming-rays { position:absolute; z-index:3; inset:0; pointer-events:none; }
.coming-rays i { position:absolute; right:-38px; width:57px; height:18px; background:var(--ink); clip-path:polygon(100% 0,0 50%,100% 100%); }
.coming-rays i:first-child { top:18%; transform:rotate(-7deg); }
.coming-rays i:last-child { top:28%; right:-25px; width:40px; height:15px; transform:rotate(10deg); }
h1 > span:first-of-type { position:relative; display:inline-block; color:var(--coral); font-size:.78em; line-height:.82; text-decoration:none; }
.intro { max-width:610px; margin:clamp(12px,1.8vh,18px) 0 clamp(12px,1.8vh,18px); font-size:clamp(.88rem,1.05vw,1.08rem); line-height:1.4; }
.plan-section { width:100%; margin-top:auto; padding-bottom:18px; }
.plan-section h2 { width:max-content; max-width:100%; margin:0 0 0 clamp(8px,1vw,14px); color:var(--gold); font:400 clamp(2.4rem,3.75vw,3.85rem)/.9 "Titan One",sans-serif; letter-spacing:-.015em; text-transform:uppercase; white-space:nowrap; -webkit-text-stroke:5px var(--ink); paint-order:stroke fill; transform:translateY(7px) rotate(-5deg); transform-origin:left bottom; }
.plan-subheading { margin:2px 0 0 clamp(28px,3vw,46px); color:var(--ink); font:800 clamp(1rem,1.3vw,1.3rem)/1 "Playpen Sans",sans-serif; text-transform:uppercase; transform:rotate(-2deg); }
.content-bursts { width:100%; margin:10px 0 0; padding:clamp(12px,1.8vh,18px) clamp(8px,1vw,14px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3.2vh,34px) clamp(16px,1.7vw,26px); list-style:none; }
.content-bursts li { --bubble:var(--purple); --bubble-dark:#49305b; position:relative; isolation:isolate; width:100%; height:clamp(62px,7.6vh,78px); border-radius:8px; transform:rotate(-2deg) rotateY(8deg); }
.content-bursts button { width:100%; height:100%; padding:7px 12px 2px; color:var(--ink); background:var(--bubble); border:3px solid var(--ink); border-radius:8px; box-shadow:inset 0 2px 0 rgba(255,255,255,.38),0 9px 0 var(--bubble-dark),0 12px 0 var(--ink); cursor:pointer; font:800 clamp(.8rem,1.08vw,1.08rem)/1.05 "Playpen Sans",sans-serif; letter-spacing:.025em; text-align:center; text-transform:uppercase; transition:transform .08s ease,box-shadow .08s ease; -webkit-tap-highlight-color:transparent; }
.content-bursts button:hover,.content-bursts button:focus-visible { filter:brightness(1.05); outline:3px solid var(--paper); outline-offset:3px; }
.content-bursts button:active { transform:translateY(7px); box-shadow:inset 0 2px 0 rgba(255,255,255,.28),0 2px 0 var(--bubble-dark),0 5px 0 var(--ink); }
.content-bursts li:nth-child(1) { transform:rotate(-1deg); }
.content-bursts li:nth-child(1) { --bubble:var(--gold); --bubble-dark:#b77d16; }
.content-bursts li:nth-child(2) { transform:rotate(1deg); }
.content-bursts li:nth-child(2) { --bubble:var(--violet); --bubble-dark:#4f438f; }
.content-bursts li:nth-child(3) { transform:rotate(-1deg); }
.content-bursts li:nth-child(3) { --bubble:var(--coral); --bubble-dark:#a83f45; }
.content-bursts li:nth-child(4) { transform:rotate(1deg); }
.content-bursts li:nth-child(4) { --bubble:var(--purple); --bubble-dark:#4f438f; }
.content-bursts li:nth-child(5) { transform:rotate(-1deg); }
.content-bursts li:nth-child(5) { --bubble:var(--coral); --bubble-dark:#a83f45; }
.content-bursts li:nth-child(6) { transform:rotate(1deg); }
.content-bursts li:nth-child(6) { --bubble:var(--blue); --bubble-dark:#187f81; }
.signoff { margin:clamp(28px,4vh,44px) 0 2px 4px; font:800 clamp(1.3rem,1.65vw,1.7rem)/1 "Playpen Sans",sans-serif; text-transform:uppercase; transform:rotate(-2deg); }

.comic-stage { height:100%; min-width:0; padding:clamp(22px,3vh,34px) clamp(18px,1.8vw,28px); display:grid; align-items:start; justify-items:center; position:relative; isolation:isolate; overflow:hidden; background:var(--purple); border-left:8px solid var(--ink); }
.comic-stage::after { content:""; position:absolute; z-index:0; inset:0; opacity:.2; background-image:radial-gradient(circle,var(--ink) 0 2px,transparent 2.7px); background-size:15px 15px; mask-image:linear-gradient(135deg,transparent 7%,#000 46%,#000 100%); pointer-events:none; }
.comic-frame { position:relative; z-index:1; height:min(90.5svh,895px,calc(100svh - 74px)); max-width:calc(100% - 36px); padding:10px; aspect-ratio:1640/2360; background:var(--paper); border-radius:22px; box-shadow:24px 18px 0 var(--ink); transform:rotate(-1.25deg); }
.comic-frame::before { display:none; }
.comic-frame img { position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block; border-radius:13px; }
.issue-tag { position:absolute; z-index:3; top:12px; left:8px; padding:6px 14px 4px; background:var(--gold); border:4px solid var(--ink); box-shadow:4px 4px 0 var(--ink); font:800 clamp(.8rem,1vw,1rem)/1 "Playpen Sans",sans-serif; text-transform:uppercase; transform:rotate(-6deg); }

@media(max-height:720px) and (min-width:901px){ .top-content{grid-template-columns:128px minmax(0,1fr);gap:18px}.speech-card{padding:14px 24px;border-width:7px}.eyebrow{margin-bottom:4px}h1{font-size:clamp(3.2rem,5.6vw,5.7rem)}.intro{margin:7px 0 9px}.content-bursts{padding:8px;gap:18px 12px}.content-bursts li{height:57px}.signoff{margin-top:18px} }
@media(max-width:900px){ .landing-shell{height:auto;min-height:100svh;grid-template-columns:1fr;overflow-x:clip}.announcement{min-height:0;height:auto;padding:24px 24px 44px}.top-content{grid-template-columns:130px minmax(0,1fr);gap:18px}.speech-card{padding:25px 22px}.plan-section{margin-top:32px;padding-bottom:0}.content-bursts{width:100%;margin-top:10px;gap:18px 10px}.comic-stage{height:auto;min-height:auto;padding:38px 24px 52px;border-left:0;border-top:8px solid var(--ink)}.comic-frame{width:min(81vw,520px);height:auto}.issue-tag{top:14px;left:12px} }
@media(max-width:620px){ .top-content{grid-template-columns:1fr}.brand-mark{width:135px}.content-bursts{grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:2px}h1{max-width:100%;font-size:clamp(3.15rem,16vw,4.8rem)}.plan-section h2{font-size:clamp(2.3rem,11vw,2.75rem);-webkit-text-stroke:4px var(--ink)}.plan-subheading{font-size:1rem}.signoff{margin-left:4px} }
@media(prefers-reduced-motion:reduce){ *,*::before,*::after{scroll-behavior:auto!important;transition:none!important} }