@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#101d25;--lime:#d4ee65;--muted:#aebdbc;--paper:#f4f2db}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--paper);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}header{max-width:1440px;margin:auto;padding:30px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff20}.brand{position:relative;display:flex;flex-direction:column;font-family:'Barlow Condensed',Impact,sans-serif;font-size:24px;font-weight:900;line-height:.85;letter-spacing:-.5px}.brand span{color:var(--lime)}.brand i{position:absolute;left:92px;top:5px;font-style:normal;color:var(--lime);font-size:30px}.edition,.nav,.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px}.edition{color:var(--muted)}.nav{letter-spacing:.2px;font-size:14px}.nav span{color:var(--lime);margin-left:15px}.hero{max-width:1440px;margin:auto;padding:75px 5% 88px;display:grid;grid-template-columns:.83fr 1.17fr;gap:42px;align-items:center}.eyebrow{color:var(--lime);line-height:1.6}.eyebrow>span{display:inline-block;width:7px;height:7px;background:var(--lime);border-radius:100%;margin-right:8px}h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(76px,8.5vw,126px);font-weight:900;text-transform:uppercase;letter-spacing:-3px;line-height:.88;margin:24px 0 30px;transform:rotate(-3deg);text-shadow:4px 5px 0 #0005}h1 em{font-style:normal;color:var(--lime)}.lead{font-size:17px;line-height:1.7;color:#c1cccc;max-width:380px}.cta{display:inline-flex;align-items:center;gap:32px;margin-top:21px;padding:18px 23px;background:var(--lime);color:#152527;font-weight:800;font-size:15px;border:2px solid var(--lime);box-shadow:4px 4px 0 #061318;transition:transform .2s}.cta:hover{transform:translateY(-3px)}.small{font-size:12px;color:#91a4a6;margin-top:20px}.scene-wrap{position:relative}.scene{position:relative;aspect-ratio:1.08;overflow:hidden;border:2px solid #829f8a;border-radius:48% 48% 5px 5px;background:#294846;box-shadow:10px 12px 0 #081319}.scene img{width:100%;height:100%;object-fit:cover;animation:camera 16s ease-in-out infinite alternate}.vignette{position:absolute;inset:0;background:linear-gradient(transparent 65%,#091b26e8);pointer-events:none}.scene-label{position:absolute;top:8%;left:0;width:100%;text-align:center;font-size:10px;letter-spacing:1.8px;color:#e6edc4}.bubble{position:absolute;left:12%;top:18%;width:73%;padding:17px 24px;background:var(--paper);color:#1a2730;border:3px solid #15242a;border-radius:49% 44% 43% 14% / 25% 35% 32% 28%;box-shadow:4px 5px 0 #0004;transform:rotate(-3deg);transition:opacity .18s,transform .18s}.bubble:after{content:'';position:absolute;bottom:-18px;left:25%;border-top:20px solid var(--paper);border-right:20px solid transparent}.bubble>span{font-size:11px;font-weight:900;color:#597526;letter-spacing:1.5px}.bubble p{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(20px,2.15vw,30px);font-weight:800;line-height:1.05;margin:5px 0 4px}.bubble.switch{opacity:0;transform:translateY(8px) rotate(-3deg)}.cast{position:absolute;bottom:15%;width:100%;display:flex;justify-content:space-evenly}.cast span{font-family:'Barlow Condensed',Impact,sans-serif;font-size:19px;font-weight:800;letter-spacing:1px;background:#17282bbb;padding:3px 10px;color:var(--lime);transform:rotate(-4deg)}.scene-footer{position:absolute;bottom:16px;left:22px;right:18px;display:flex;align-items:center;justify-content:space-between}.scene-footer>span{font-size:9px;letter-spacing:1.4px}.scene-footer i{display:inline-block;background:var(--lime);width:5px;height:5px;border-radius:50%;margin-right:5px}button{cursor:pointer;font:inherit;color:var(--paper);background:#ffffff14;border:1px solid #ffffff55;width:36px;height:36px;border-radius:50%}button:hover{background:#ffffff30}.sticker{position:absolute;right:-19px;bottom:-33px;background:#ac91d0;color:#19242c;border:2px solid #111f24;outline:3px solid #ac91d0;transform:rotate(-9deg);padding:17px 20px;box-shadow:4px 5px 0 #0005;font-family:'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;font-size:23px;line-height:1}.sticker strong{font-size:20px}.ticker{overflow:hidden;white-space:nowrap;background:var(--lime);color:#16252a;padding:15px 0;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;font-size:30px;letter-spacing:1px;transform:rotate(-1deg);word-spacing:9px}.ticker span{-webkit-text-stroke:1px #16252a;color:transparent}.ticker b{margin:0 23px}.party{max-width:1440px;margin:auto;padding:83px 5%;display:grid;grid-template-columns:1.2fr 1fr;gap:90px}h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:42px;line-height:1.08;text-transform:uppercase;margin:18px 0}h2 em{font-style:normal;color:var(--lime)}.party p:not(.eyebrow){max-width:480px;line-height:1.7;color:#bac8c7;font-size:16px}.details{align-self:center}.details>div{padding:18px 0;border-bottom:1px solid #ffffff24;display:flex;flex-direction:column;gap:7px}.details span{font-size:10px;color:#9eb2b1;letter-spacing:2px}.details strong{font-size:19px}footer{border-top:1px solid #ffffff20;padding:28px 5%;display:flex;align-items:center;justify-content:space-between;gap:30px}footer p{font-size:12px;color:#94aaa9}footer>span{font-size:10px;letter-spacing:2px;color:#94aaa9}a:focus-visible,button:focus-visible{outline:3px solid #ad8af1;outline-offset:5px}.paused img{animation-play-state:paused}@keyframes camera{from{transform:scale(1)}to{transform:scale(1.075) translateY(-1%)}}@media(min-width:1500px){.hero{gap:70px}}@media(max-width:760px){header{padding:25px 6%}.edition{display:none}.hero{grid-template-columns:1fr;padding:42px 6% 70px;gap:34px}.intro{text-align:center}.eyebrow{font-size:10px}h1{font-size:89px;letter-spacing:-2px;margin:24px 0}.lead{margin:0 auto;font-size:16px;max-width:340px}.small{margin-bottom:0}.scene-wrap{max-width:540px;width:100%;margin:auto}.scene{aspect-ratio:1.05}.bubble p{font-size:27px}.sticker{right:0;font-size:22px}.party{grid-template-columns:1fr;padding:54px 6%;gap:20px}h2{font-size:36px}.ticker{font-size:26px}footer{flex-wrap:wrap}footer p{max-width:180px}footer>span{display:none}.scene-label{font-size:8px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.comic-type{position:absolute;inset:0;background:repeating-conic-gradient(from 15deg at 50% 65%,#284e49 0deg 15deg,#244440 15deg 30deg);display:flex;align-items:center;justify-content:center;flex-direction:column}.comic-type>span{position:absolute;top:11%;font-family:Impact,sans-serif;color:#a995c8;font-size:70px;transform:rotate(-12deg);opacity:.35}.comic-type>strong{position:absolute;top:36%;font-family:Impact,sans-serif;font-size:90px;line-height:.9;color:#bfd86833;transform:rotate(-8deg)}.crew-letters{position:absolute;top:52%;left:9%;right:9%;display:flex;align-items:center;justify-content:space-around;gap:10px}.crew-letters b{font-family:Impact,sans-serif;font-size:80px;line-height:1;background:#d5ed76;color:#203433;border:3px solid #102425;box-shadow:5px 6px 0 #091e20;padding:15px 17px;transform:rotate(-9deg);animation:bop 3s ease-in-out infinite}.crew-letters b:nth-child(2){background:#b397d0;transform:rotate(5deg);animation-delay:1s}.crew-letters b:nth-child(3){background:#ebac62;transform:rotate(-4deg);animation-delay:2s}.crew-letters small{display:block;text-align:center;font:700 11px sans-serif;letter-spacing:1px;margin-top:8px}.cast{display:none}.paused .crew-letters b{animation-play-state:paused}@keyframes bop{50%{translate:0 -12px;rotate:5deg}}@media(max-width:400px){.crew-letters b{font-size:55px;padding:12px 15px}}

.scene{aspect-ratio:1;border-radius:36px 36px 5px 5px}.scene-label{top:4%;font-size:9px}.bubble{top:9%;padding:12px 20px;--tail:50%}.bubble:after{left:var(--tail)}.bubble p{font-size:clamp(20px,2.1vw,28px)}.cast{display:flex;bottom:12%}.cast span{font-size:16px}.hero{padding-top:55px}.scene img{object-fit:cover}.scene-footer>span{font-size:9px}@media(max-width:760px){.hero{padding-top:34px}.bubble p{font-size:23px}.cast span{font-size:15px}.scene-label{font-size:8px}.bubble{width:76%;left:12%;padding:10px 16px}}
/* Refinements: a separate dialogue rail keeps every face unobscured. */
h1{font-size:clamp(62px,6.8vw,100px);line-height:.96;letter-spacing:-1.5px}.title-on{font-size:.52em;vertical-align:middle}.scene-wrap{padding-top:0}.bubble{position:relative;inset:auto;width:94%;margin:0 auto 24px;min-height:142px;transform:none;border-radius:26px 30px 25px 12px;padding:20px 24px;z-index:2;transition:none}.bubble-copy{display:grid;align-content:center;min-height:96px;transition:opacity .65s ease,transform .65s cubic-bezier(.22,.61,.36,1);opacity:1;transform:translateY(0)}.bubble-copy>span{font-size:12px;font-weight:900;color:#597526;letter-spacing:1.5px}.bubble p{font-size:clamp(22px,2.1vw,28px);line-height:1.15;margin:6px 0 0}.bubble-copy.leaving{opacity:0;transform:translateY(-6px)}.bubble-copy.entering{position:absolute;inset:20px 24px;opacity:0;transform:translateY(7px)}.bubble-copy.entering.visible{opacity:1;transform:translateY(0)}.bubble:after{transition:left .8s ease}.scene{border-radius:24px 24px 5px 5px}.ticker-track{display:flex;width:max-content;animation:marquee-right 26s linear infinite;will-change:transform}.ticker-group{flex-shrink:0;min-width:100vw;white-space:nowrap}.motion-paused .ticker-track{animation-play-state:paused}@keyframes marquee-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(max-width:760px){h1{font-size:clamp(56px,13vw,86px);line-height:.98;letter-spacing:-1px}.hero{gap:30px;padding-bottom:66px}.bubble{width:100%;min-height:144px;margin-bottom:22px;padding:18px 20px}.bubble-copy{min-height:102px}.bubble-copy.entering{inset:18px 20px}.bubble p{font-size:24px;line-height:1.18}.scene-label{font-size:8px;letter-spacing:1px}.cast span{font-size:14px}.scene-footer{left:12px;right:12px}.scene-footer>span{font-size:8px;letter-spacing:1px}.sticker{bottom:-28px;padding:12px 15px}.sticker strong{font-size:18px}.party{padding-top:42px}.details strong{line-height:1.5}}
@media(max-width:360px){.bubble{min-height:166px}.bubble-copy{min-height:124px}.bubble p{font-size:22px}.scene-label{letter-spacing:.5px}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none;transform:translateX(0)}.bubble-copy{transition:none}}
body{overflow-x:clip}.hero>*{min-width:0}.ticker{max-width:100%}
.bubble #pause{position:absolute;right:10px;top:9px;z-index:3;width:32px;height:32px;color:#1a2730;border-color:#1a273050;background:#1a273010}.bubble #pause:hover{background:#1a273025}.bubble-copy>span{padding-right:25px}
/* Compact speech bubbles in the sky, without covering faces. */
.bubble{position:absolute;top:4%;left:10%;width:80%;margin:0;min-height:0;padding:12px 20px;transform:rotate(-3deg);border-radius:49% 44% 43% 14% / 25% 35% 32% 28%}.bubble-copy{min-height:76px}.bubble-copy.entering{inset:12px 20px}.bubble p{font-size:clamp(18px,2vw,27px);line-height:1.1}.bubble:after{bottom:-13px;border-top-width:15px;border-right-width:16px}.scene #pause{position:absolute;left:14px;bottom:13px;z-index:4;background:#13292ce6}.bubble-copy>span{padding-right:0}.cast{bottom:13%}
@media(max-width:760px){.bubble{top:3%;left:8%;width:84%;padding:8px 14px;border-width:2px}.bubble-copy{min-height:62px}.bubble-copy.entering{inset:8px 14px}.bubble-copy>span{font-size:10px;letter-spacing:1px}.bubble p{font-size:clamp(16px,4.4vw,23px);line-height:1.1;margin-top:3px}.bubble:after{bottom:-10px;border-top-width:12px;border-right-width:13px}}
@media(max-width:360px){.bubble{min-height:0;padding:7px 12px}.bubble-copy{min-height:61px}.bubble-copy.entering{inset:7px 12px}.bubble p{font-size:16px}}
/* Keep the comic silhouette rounded without cutting into the text area. */
.bubble{border-radius:24px 30px 26px 22px;box-shadow:3px 4px 0 #0004}
.bubble:after{width:14px;height:14px;bottom:-8px;border:0;border-right:2px solid #15242a;border-bottom:2px solid #15242a;background:var(--paper);transform:skewY(-18deg) rotate(45deg);border-radius:0 0 3px 0;z-index:-1}
.bubble-copy{position:relative;z-index:1}
@media(max-width:760px){.bubble{border-radius:20px 25px 22px 18px}.bubble:after{width:11px;height:11px;bottom:-7px}}

/* Equal repeated groups create a gap-free marquee at wide viewports. */
.ticker-group{min-width:0;display:flex;align-items:center;gap:12px;padding-right:24px}.ticker-track{animation-duration:55s}