/* LTAI comic-book page */
body.comic{background:#fffdf4;color:#111;
  background-image:radial-gradient(rgba(17,17,17,.07) 1.2px,transparent 1.4px);background-size:12px 12px}
.comic h1,.comic h2,.comic h3{font-family:'Bangers',Impact,'Arial Black',sans-serif;font-style:normal;letter-spacing:1.5px;color:#111;font-weight:400}
.comic .wrap{max-width:1180px}
.c-btn{display:inline-flex;align-items:center;gap:8px;font-family:'Bangers',Impact,'Arial Black',sans-serif;font-size:1.35rem;letter-spacing:1.2px;
  padding:10px 22px;border:3px solid #111;border-radius:6px;box-shadow:5px 5px 0 #111;transition:transform .12s,box-shadow .12s;text-decoration:none!important;color:#111}
.c-btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #111}
.c-btn svg{width:22px;height:22px;fill:currentColor}
.c-red{background:#E62117;color:#fff}
.c-yellow{background:#FFD60A}
.c-white{background:#fff}
.c-blue{background:#5BB8F5}

/* hero */
.c-hero{position:relative;background:#FFD60A;border-bottom:5px solid #111;overflow:hidden;padding:60px 0 70px}
.c-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(230,33,23,.45) 2px,transparent 2.4px);background-size:16px 16px;
  -webkit-mask-image:linear-gradient(115deg,transparent 35%,#000 100%);mask-image:linear-gradient(115deg,transparent 35%,#000 100%)}
.c-hero::after{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 78% 50%,rgba(255,255,255,.35) 0 6deg,transparent 6deg 18deg);pointer-events:none}
.c-hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .9fr;gap:30px;align-items:center}
.c-tag{display:inline-block;background:#111;color:#FFD60A;font-family:'Bangers',Impact,'Arial Black',sans-serif;font-size:1.1rem;letter-spacing:2px;padding:6px 14px;transform:rotate(-2deg);margin-bottom:16px}
.c-hero h1{font-size:clamp(3.2rem,9vw,7rem);line-height:.9;color:#fff;-webkit-text-stroke:3px #111;text-shadow:6px 6px 0 #111;margin-bottom:22px}
.c-hero h1 span{color:#E62117}
.bubble{position:relative;background:#fff;border:3px solid #111;border-radius:28px;padding:18px 22px;max-width:520px;font-size:1.08rem;box-shadow:5px 5px 0 #111;margin-bottom:26px}
.bubble::after{content:"";position:absolute;left:44px;bottom:-22px;width:30px;height:24px;background:#fff;border-right:3px solid #111;border-bottom:3px solid #111;transform:skewX(-35deg)}
.bubble strong{font-family:'Bangers',Impact,'Arial Black',sans-serif;font-weight:400;font-size:1.3rem;letter-spacing:1px;color:#E62117}
.c-actions{display:flex;gap:14px;flex-wrap:wrap}
.c-logo-burst{justify-self:center;position:relative;width:min(400px,80vw);aspect-ratio:1;display:grid;place-items:center;
  background:#5BB8F5;filter:drop-shadow(8px 8px 0 #111);
  clip-path:polygon(50% 0,60% 16%,79% 6%,79% 27%,100% 30%,87% 48%,100% 66%,79% 70%,80% 92%,60% 84%,50% 100%,40% 84%,20% 92%,21% 70%,0 66%,13% 48%,0 30%,21% 27%,21% 6%,40% 16%)}
.c-logo-burst img{width:62%;height:62%;animation:bob 3.5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(-2deg)}}
@media (prefers-reduced-motion:reduce){.c-logo-burst img{animation:none}}

/* section title blocks like a comic cover banner */
.c-section{padding:64px 0}
.c-title{display:inline-block;background:#111;color:#fff;font-family:'Bangers',Impact,'Arial Black',sans-serif;font-size:clamp(2rem,5vw,3.2rem);letter-spacing:2px;padding:6px 22px 2px;transform:rotate(-1.5deg);box-shadow:6px 6px 0 #E62117;margin-bottom:12px}
.c-title.blue{background:#1561c4;box-shadow:6px 6px 0 #111}
.c-title.red{background:#E62117;box-shadow:6px 6px 0 #111}
.c-lead{max-width:640px;font-size:1.08rem;color:#333;margin:10px 0 30px}

/* panels */
.panel{background:#fff;border:4px solid #111;box-shadow:8px 8px 0 #111;position:relative}
.caption{display:inline-block;background:#FFD60A;border:3px solid #111;font-family:'Bangers',Impact,'Arial Black',sans-serif;letter-spacing:1px;font-size:1.05rem;padding:4px 10px}
.feature-panel{display:grid;grid-template-columns:1.35fr 1fr;gap:0}
.feature-panel .video{border-radius:0;box-shadow:none;border-right:4px solid #111}
.feature-panel .txt{padding:28px}
.feature-panel h3{font-size:2.2rem;line-height:1;margin:14px 0 10px}
.feature-panel p{color:#333;margin-bottom:18px}
.new-burst{position:absolute;top:-28px;right:-20px;z-index:3;width:110px;height:110px;background:#E62117;color:#fff;display:grid;place-items:center;
  font-family:'Bangers',Impact,'Arial Black',sans-serif;font-size:1.6rem;letter-spacing:1px;transform:rotate(12deg);text-align:center;line-height:.9;
  clip-path:polygon(50% 0,61% 22%,85% 15%,78% 39%,100% 50%,78% 61%,85% 85%,61% 78%,50% 100%,39% 78%,15% 85%,22% 61%,0 50%,22% 39%,15% 15%,39% 22%)}

.episodes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ep{display:block;text-decoration:none!important;color:#111;transition:transform .15s}
.ep:nth-child(3n+1){transform:rotate(-1deg)}
.ep:nth-child(3n+2){transform:rotate(.8deg)}
.ep:nth-child(3n){transform:rotate(-.5deg)}
.ep:hover{transform:rotate(0) translateY(-4px)}
.ep .thumb{aspect-ratio:16/9;border-bottom:4px solid #111;overflow:hidden;background:#111}
.ep .thumb img{width:100%;height:100%;object-fit:cover}
.ep .body{padding:14px 16px 18px}
.ep h3{font-size:1.45rem;line-height:1.05;margin-top:10px}
.ep .when{font-size:.85rem;color:#555;margin-top:6px}

/* off camera strip */
.c-strip{background:#E62117;border-top:5px solid #111;border-bottom:5px solid #111;
  background-image:radial-gradient(rgba(0,0,0,.18) 1.6px,transparent 1.8px);background-size:13px 13px}
.c-strip .c-title{background:#fff;color:#111;box-shadow:6px 6px 0 #111}
.c-strip .c-lead{color:#fff}
.oc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.oc{display:flex;flex-direction:column;text-decoration:none!important;color:#111}
.oc .thumb{aspect-ratio:16/9;border-bottom:4px solid #111;overflow:hidden}
.oc .thumb img{width:100%;height:100%;object-fit:cover}
.oc .body{padding:16px 18px 20px}
.oc h3{font-size:1.5rem;line-height:1.05;margin:10px 0 8px}
.oc p{color:#333;font-size:.96rem}
.oc .more{font-family:'Bangers',Impact,'Arial Black',sans-serif;letter-spacing:1px;color:#E62117;font-size:1.15rem;margin-top:10px;display:block}

/* origin story */
.origin{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.origin .panel{padding:22px 22px 26px}
.origin .num{position:absolute;top:-16px;left:-12px;background:#111;color:#FFD60A;font-family:'Bangers',Impact,'Arial Black',sans-serif;font-size:1.3rem;width:44px;height:44px;display:grid;place-items:center;border-radius:50%}
.origin h3{font-size:1.7rem;margin:6px 0 8px}
.origin p{color:#333}
.origin .panel:nth-child(2){background:#e8f4fd}
.origin .panel:nth-child(3){background:#fff6c7}

/* subscribe */
.c-cta{background:#111;color:#fff;border-top:5px solid #111;text-align:center;padding:70px 20px;position:relative;overflow:hidden}
.c-cta::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,214,10,.08) 0 8deg,transparent 8deg 20deg)}
.c-cta>*{position:relative}
.c-cta h2{color:#FFD60A;font-size:clamp(2.6rem,7vw,4.6rem);line-height:.95;text-shadow:5px 5px 0 #E62117;margin-bottom:12px}
.c-cta p{color:#ddd;max-width:560px;margin:0 auto 26px;font-size:1.08rem}
.c-cta .c-actions{justify-content:center}
.c-cta .c-btn{box-shadow:5px 5px 0 #FFD60A}

@media (max-width:900px){
  .c-hero .wrap,.feature-panel{grid-template-columns:1fr}
  .c-logo-burst{width:240px;order:-1}
  .feature-panel .video{border-right:0;border-bottom:4px solid #111}
  .episodes,.origin{grid-template-columns:1fr}
  .new-burst{right:-6px;width:90px;height:90px;font-size:1.3rem}
}
@media (min-width:600px) and (max-width:900px){.episodes{grid-template-columns:1fr 1fr}}
.comic .c-title{color:#fff}
.comic .c-strip .c-title{color:#111}
.feature-panel .video{aspect-ratio:auto;min-height:280px;height:100%}
@media (max-width:560px){.c-hero h1{-webkit-text-stroke:2px #111;text-shadow:4px 4px 0 #111}}