/* Divine Rift — first-draft site styles. Bold inked comic look: dark night, fire orange, gold, deep blue. */
@font-face{font-family:"Bangers";src:url("../fonts/Bangers-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Oswald";src:url("../fonts/Oswald-VariableFont_wght.ttf") format("truetype");font-weight:200 700;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/Barlow-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/Barlow-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/Barlow-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}

:root{
  --ink:#07080d; --night:#0c1226; --night-2:#141c3a; --steel:#2a3558;
  --fire:#ff6a1a; --ember:#e2361c; --gold:#f6c445; --sky:#3d7bff;
  --paper:#f3ead8; --muted:#b9b3a6; --line:4px;
  --shadow:6px 6px 0 var(--ink);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--paper);font:400 18px/1.6 "Barlow",system-ui,sans-serif;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1.4px),radial-gradient(ellipse at 20% -10%,#22305f 0,transparent 55%),radial-gradient(ellipse at 90% 110%,#3a1408 0,transparent 50%);
  background-size:6px 6px,100% 100%,100% 100%;background-attachment:fixed}
img{max-width:100%;display:block}
a{color:var(--gold)}
a:hover{color:var(--fire)}
.wrap{width:min(1180px,92vw);margin:0 auto}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--gold);color:var(--ink);padding:6px 10px;z-index:99}

/* Header / nav */
.site-header{position:sticky;top:0;z-index:50;background:rgba(7,8,13,.94);border-bottom:var(--line) solid var(--fire);backdrop-filter:blur(4px)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.logo{font-family:"Bangers",Impact,sans-serif;font-size:34px;letter-spacing:2px;color:var(--gold);text-decoration:none;text-shadow:3px 3px 0 var(--ember),5px 5px 0 var(--ink);line-height:1}
.logo:hover{color:var(--paper)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap}
.nav a{font:600 15px/1 "Oswald",sans-serif;text-transform:uppercase;letter-spacing:1.5px;color:var(--paper);text-decoration:none;padding:10px 10px;display:block;border:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);background:var(--gold);border-color:var(--ink)}
.nav-toggle{display:none;background:var(--gold);color:var(--ink);border:3px solid var(--ink);font:700 15px "Oswald";padding:8px 12px;text-transform:uppercase;cursor:pointer}

/* Type */
h1,h2,h3{font-family:"Bangers",Impact,sans-serif;font-weight:400;letter-spacing:1.5px;line-height:1.02;margin:0 0 .4em}
h1{font-size:clamp(56px,9vw,120px);color:var(--gold);text-shadow:4px 4px 0 var(--ember),8px 8px 0 var(--ink)}
h2{font-size:clamp(36px,5vw,58px);color:var(--paper);text-shadow:3px 3px 0 var(--ember),6px 6px 0 var(--ink)}
h3{font-size:30px;color:var(--gold);text-shadow:2px 2px 0 var(--ink)}
.kicker{font:600 15px/1.2 "Oswald",sans-serif;text-transform:uppercase;letter-spacing:3px;color:var(--fire);margin:0 0 10px}
.lede{font-size:21px;max-width:60ch}
.muted{color:var(--muted)}
.tagline{font:500 clamp(20px,2.4vw,28px)/1.35 "Oswald",sans-serif;color:var(--paper);max-width:34ch;margin:0 0 26px}

/* Panels — comic boxes */
.panel{background:var(--night-2);border:var(--line) solid var(--ink);box-shadow:var(--shadow);outline:2px solid var(--steel);outline-offset:-10px;padding:34px;position:relative}
.panel.fire{background:linear-gradient(135deg,#2a0f08,#14080a 60%);outline-color:#5c2412}
.caption{display:inline-block;background:var(--gold);color:var(--ink);font:700 14px/1 "Oswald";text-transform:uppercase;letter-spacing:2px;padding:7px 11px;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(-1.5deg);margin-bottom:16px}
section{padding:64px 0}
.page-head{padding:56px 0 18px}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}

/* Buttons */
.btn{display:inline-block;font:700 17px/1 "Oswald",sans-serif;text-transform:uppercase;letter-spacing:2px;text-decoration:none;padding:15px 22px;border:var(--line) solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:var(--fire);color:var(--ink);transition:transform .08s,box-shadow .08s;cursor:pointer}
.btn:hover{color:var(--ink);transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.btn.alt{background:var(--paper)}
.btn.gold{background:var(--gold)}
.btn[aria-disabled="true"]{opacity:.85;cursor:not-allowed}
.btns{display:flex;gap:16px;flex-wrap:wrap}
.placeholder{display:inline-block;font:600 14px/1.3 "Oswald";letter-spacing:1px;color:var(--gold);border:2px dashed var(--gold);padding:6px 10px;background:rgba(246,196,69,.07)}

/* Hero */
.hero{position:relative;overflow:hidden;border-bottom:var(--line) solid var(--ink);min-height:640px;display:flex;align-items:center;
  background:radial-gradient(ellipse at 75% 60%,rgba(255,106,26,.55),transparent 45%),radial-gradient(ellipse at 85% 20%,rgba(61,123,255,.35),transparent 40%),linear-gradient(180deg,#0a1028,#120a14)}
.hero::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 72% 55%,rgba(255,180,60,.08) 0 4deg,transparent 4deg 12deg);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.35) 1.2px,transparent 1.6px);background-size:7px 7px;pointer-events:none;mix-blend-mode:multiply}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:20px}
.hero-art{position:relative;justify-self:end;width:100%;max-width:560px}
.hero-art img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 30%;border:var(--line) solid var(--ink);box-shadow:10px 10px 0 var(--ink),0 0 0 8px var(--gold);filter:contrast(1.12) saturate(1.2);transform:rotate(1.5deg)}
.hero-art .tag{position:absolute;left:-18px;bottom:26px;transform:rotate(-4deg)}
.subtitle{font:700 clamp(18px,2vw,24px)/1.2 "Oswald";text-transform:uppercase;letter-spacing:4px;color:var(--paper);margin:-6px 0 16px}

/* Video */
.video-frame{position:relative;aspect-ratio:16/9;border:var(--line) solid var(--ink);box-shadow:var(--shadow);background:#000;overflow:hidden}
.video-frame img{width:100%;height:100%;object-fit:cover;filter:brightness(.6)}
.video-frame .play{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px}
.play-btn{width:96px;height:96px;border-radius:50%;background:var(--ember);border:var(--line) solid var(--ink);box-shadow:5px 5px 0 var(--ink);display:grid;place-items:center;margin:0 auto 14px}
.play-btn::after{content:"";border-left:30px solid var(--paper);border-top:18px solid transparent;border-bottom:18px solid transparent;margin-left:8px}

/* Characters */
.char-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.char-card{display:block;text-decoration:none;color:var(--paper);background:var(--night-2);border:var(--line) solid var(--ink);box-shadow:var(--shadow);transition:transform .12s}
.char-card:hover{transform:translate(-3px,-3px) rotate(-.6deg);box-shadow:9px 9px 0 var(--ink),0 0 0 3px var(--fire);color:var(--paper)}
.char-card img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;border-bottom:var(--line) solid var(--ink);filter:contrast(1.08) saturate(1.15)}
.char-card .meta{padding:14px 16px 18px}
.char-card h3{margin:0 0 4px;font-size:32px}
.char-card p{margin:0;font:500 14px/1.35 "Oswald";text-transform:uppercase;letter-spacing:1.5px;color:var(--muted)}
.char-card.star{grid-column:span 2;grid-row:span 2;display:grid;grid-template-rows:1fr auto}
.char-card.star img{aspect-ratio:auto;height:100%;min-height:420px}
.char-card.star h3{font-size:52px}
.star-badge{display:inline-block;background:var(--ember);color:var(--paper);font:700 12px/1 "Oswald";letter-spacing:2px;text-transform:uppercase;padding:5px 8px;border:2px solid var(--ink);margin-bottom:8px}

/* Character profile */
.profile{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.profile-portrait img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 30%;border:var(--line) solid var(--ink);box-shadow:10px 10px 0 var(--ink),0 0 0 6px var(--fire)}
.facts{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:8px}
.facts li{font:600 13px/1 "Oswald";text-transform:uppercase;letter-spacing:1.5px;background:var(--steel);border:2px solid var(--ink);padding:7px 10px}
blockquote{margin:26px 0;padding:18px 22px;background:var(--paper);color:var(--ink);border:var(--line) solid var(--ink);box-shadow:5px 5px 0 var(--ember);font:500 20px/1.4 "Oswald";position:relative;border-radius:18px}
blockquote cite{display:block;margin-top:8px;font:400 14px "Barlow";font-style:normal;color:#5a4a3a}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gallery button{padding:0;border:var(--line) solid var(--ink);box-shadow:4px 4px 0 var(--ink);background:#000;cursor:zoom-in}
.gallery img{width:100%;aspect-ratio:16/9;object-fit:cover}
.gallery button:hover{box-shadow:4px 4px 0 var(--fire)}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;place-items:center;z-index:100;padding:4vw}
.lightbox.open{display:grid}
.lightbox img{max-height:86vh;border:var(--line) solid var(--gold)}
.lightbox button{position:absolute;top:16px;right:16px}
.pager{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px}

/* World */
.world-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.world-grid .panel h3{font-size:34px}
.world-grid ul{padding-left:20px;margin:0}

/* Forms */
.signup{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.signup input,.contact-form input,.contact-form textarea{font:400 18px "Barlow";padding:14px 16px;border:var(--line) solid var(--ink);background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.signup input{flex:1 1 260px}
.form-note{margin-top:12px;font-size:15px;color:var(--muted)}
.form-status{margin-top:12px;font:600 16px "Oswald";color:var(--gold);min-height:1.2em}
.contact-form{display:grid;gap:16px;max-width:640px}
.contact-form label{font:600 15px "Oswald";text-transform:uppercase;letter-spacing:1.5px}
.contact-form textarea{min-height:150px}

/* Book */
.cover-ph{aspect-ratio:2/3;border:var(--line) solid var(--ink);box-shadow:10px 10px 0 var(--ink);background:linear-gradient(160deg,#1b2550,#0a0d1c 55%,#3a140a);display:grid;place-items:center;text-align:center;padding:24px;max-width:380px}
.cover-ph .t{font-family:"Bangers";font-size:64px;color:var(--gold);text-shadow:3px 3px 0 var(--ember),6px 6px 0 var(--ink);line-height:1}
.excerpt{font:italic 400 20px/1.6 "Barlow";border-left:6px solid var(--fire);padding-left:20px;margin:24px 0}
.toc{columns:2;gap:30px;font:500 16px/1.9 "Oswald";letter-spacing:.5px}

/* Footer */
.site-footer{border-top:var(--line) solid var(--fire);background:var(--ink);padding:36px 0;margin-top:40px;font-size:15px;color:var(--muted)}
.site-footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.site-footer a{color:var(--paper)}

/* Responsive */
@media (max-width:960px){
  .hero .wrap,.grid-2,.profile{grid-template-columns:1fr}
  .hero{min-height:auto;padding:40px 0 60px}
  .hero-art{justify-self:center;max-width:440px}
  .char-grid{grid-template-columns:repeat(2,1fr)}
  .world-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav-toggle{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--ink);border-bottom:var(--line) solid var(--fire);display:none}
  .nav.open{display:block}
  .nav ul{flex-direction:column;padding:8px 4vw 14px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .panel{padding:22px}
  .toc{columns:1}
}
@media (max-width:520px){
  .char-grid{grid-template-columns:1fr}
  .char-card.star{grid-column:auto;grid-row:auto}
  .char-card.star img{min-height:0;aspect-ratio:4/5}
  body{font-size:17px}
}
.btn.big{font-size:22px;padding:19px 30px;box-shadow:6px 6px 0 var(--ink),0 0 0 3px var(--ember)}

/* ===== v2 additions: comic-art panels ===== */
.hero.art{background:#05060b;min-height:680px}
.hero.art .hero-bg{position:absolute;inset:0;z-index:0}
.hero.art .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:70% 40%;filter:saturate(1.25) contrast(1.1)}
.hero.art .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,11,.97) 0%,rgba(5,6,11,.85) 38%,rgba(5,6,11,.15) 70%,rgba(5,6,11,.35) 100%),linear-gradient(0deg,rgba(5,6,11,.9),transparent 30%)}
.hero.art .wrap{grid-template-columns:1fr}
.hero.art .hero-copy{max-width:620px}
.art-frame{border:var(--line) solid var(--ink);box-shadow:var(--shadow);background:#000;overflow:hidden;position:relative}
.art-frame img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(1.1)}
.art-frame.tilt{transform:rotate(-1deg)}
.art-frame figcaption,.scene figcaption{position:absolute;left:12px;bottom:12px;background:var(--gold);color:var(--ink);font:700 13px/1.2 "Oswald";text-transform:uppercase;letter-spacing:1.5px;padding:6px 10px;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);max-width:80%}
figure{margin:0}
.banner{position:relative;border:var(--line) solid var(--ink);box-shadow:10px 10px 0 var(--ink);overflow:hidden}
.banner img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:50% 35%}
.banner .banner-copy{position:absolute;inset:auto 0 0 0;padding:40px 34px 28px;background:linear-gradient(0deg,rgba(5,6,11,.96),rgba(5,6,11,.6) 70%,transparent)}
.banner .banner-copy h2{margin-bottom:.2em}
.scene-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.scene-strip.three{grid-template-columns:repeat(3,1fr)}
.scene{position:relative;border:var(--line) solid var(--ink);box-shadow:5px 5px 0 var(--ink);overflow:hidden;background:#000}
.scene img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .3s}
.scene:hover img{transform:scale(1.04)}
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.art-card{display:block;text-decoration:none;color:var(--paper);background:var(--night-2);border:var(--line) solid var(--ink);box-shadow:var(--shadow);transition:transform .12s}
.art-card:hover{transform:translate(-3px,-3px) rotate(.5deg);box-shadow:9px 9px 0 var(--ink),0 0 0 3px var(--fire);color:var(--paper)}
.art-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:var(--line) solid var(--ink)}
.art-card .meta{padding:12px 16px 16px}
.art-card h3{margin:0 0 4px;font-size:28px}
.art-card p{margin:0;font:500 14px/1.35 "Oswald";text-transform:uppercase;letter-spacing:1.5px;color:var(--muted)}
.profile-wide{margin-bottom:34px}
.profile-wide img{width:100%;aspect-ratio:16/9;object-fit:cover;border:var(--line) solid var(--ink);box-shadow:10px 10px 0 var(--ink),0 0 0 6px var(--fire)}
.profile-body{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:start}
.buy-art{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:30px}
.world-grid .panel .art-frame{margin:-8px 0 20px}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
@media (max-width:960px){.scene-strip,.scene-strip.three,.art-grid{grid-template-columns:repeat(2,1fr)}.profile-body{grid-template-columns:1fr}.banner img{aspect-ratio:16/9}}
@media (max-width:520px){.scene-strip,.scene-strip.three,.art-grid,.buy-art{grid-template-columns:1fr}.banner .banner-copy{position:static;background:var(--ink)}}

/* ===== v2 final: bold comic-book pass (heavier inks, saturated color, halftone, bursts) ===== */
:root{--line:5px;--shadow:8px 8px 0 var(--ink);--magenta:#ff2e88;--cyan:#19d3ff}
body{background-color:#0b1030}
h1{-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}
h2{-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill}
.halftone{position:relative}
.halftone::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(0,0,0,.28) 1.2px,transparent 1.7px);background-size:6px 6px;mix-blend-mode:multiply}
.hero.johnny{min-height:min(760px,92vh);padding:34px 0 46px;background:#05060b}
.hero.johnny .hero-bg{position:absolute;inset:0;z-index:0}
.hero.johnny .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;filter:saturate(1.35) contrast(1.15)}
.hero.johnny .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,11,.96) 0%,rgba(5,6,11,.82) 45%,rgba(5,6,11,.45) 100%),linear-gradient(0deg,rgba(5,6,11,.92),transparent 35%)}
.hero.johnny .wrap{grid-template-columns:1.15fr .85fr;gap:36px}
.hero-copy .kicker{color:var(--gold)}
.hero-copy h1{font-size:clamp(58px,9vw,128px);margin-bottom:.12em}
.hero-buy{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:6px 0 18px}
.btn.mega{font-size:clamp(24px,3vw,34px);padding:22px 38px;background:var(--gold);box-shadow:8px 8px 0 var(--ink),0 0 0 4px var(--ember);transform:rotate(-1.5deg)}
.btn.mega:hover{transform:rotate(-1.5deg) translate(3px,3px);box-shadow:5px 5px 0 var(--ink),0 0 0 4px var(--ember)}
.burst{display:inline-grid;place-items:center;width:132px;height:132px;background:var(--magenta);color:var(--paper);font:400 22px/1 "Bangers";letter-spacing:1px;text-align:center;padding:18px;text-shadow:2px 2px 0 var(--ink);
  clip-path:polygon(50% 0,61% 18%,82% 8%,79% 30%,100% 34%,85% 50%,100% 66%,79% 70%,82% 92%,61% 82%,50% 100%,39% 82%,18% 92%,21% 70%,0 66%,15% 50%,0 34%,21% 30%,18% 8%,39% 18%);transform:rotate(8deg)}
.burst small{display:block;font:600 11px/1.2 "Oswald";letter-spacing:.5px;text-shadow:none;margin-top:4px}
.johnny-card{position:relative;justify-self:end;width:100%;max-width:470px}
.johnny-card img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;border:var(--line) solid var(--ink);box-shadow:12px 12px 0 var(--ink),0 0 0 8px var(--gold);transform:rotate(2deg);filter:contrast(1.1) saturate(1.2)}
.johnny-card .caption{position:absolute;left:-16px;bottom:30px;font-size:16px;transform:rotate(-4deg)}
.speech{position:relative;display:inline-block;background:var(--paper);color:var(--ink);font:600 18px/1.35 "Oswald";border:4px solid var(--ink);border-radius:22px;padding:12px 18px;box-shadow:5px 5px 0 var(--ink);max-width:36ch;margin:6px 0 18px}
.speech::after{content:"";position:absolute;left:34px;bottom:-22px;border:12px solid transparent;border-top:14px solid var(--ink)}
.price-tag{font:700 15px/1.2 "Oswald";text-transform:uppercase;letter-spacing:1.5px}
.panel{outline-width:3px}
.char-card,.art-card,.scene,.art-frame,.banner{border-width:var(--line)}
.scene figcaption small,.art-frame figcaption small{display:block;font-weight:500;text-transform:none;letter-spacing:.3px}
.format-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.format-grid .panel{display:flex;flex-direction:column;gap:6px}
.format-grid .panel .btn{margin-top:auto;text-align:center}
.format-grid .price{font:400 46px/1 "Bangers";color:var(--gold);text-shadow:3px 3px 0 var(--ember),5px 5px 0 var(--ink);margin:8px 0}
.no-art{aspect-ratio:16/9;border:var(--line) solid var(--ink);box-shadow:10px 10px 0 var(--ink),0 0 0 6px var(--fire);display:grid;place-items:center;text-align:center;
  background:repeating-linear-gradient(45deg,#141c3a 0 14px,#0c1226 14px 28px);margin-bottom:34px}
.no-art .t{font:400 clamp(48px,8vw,96px)/1 "Bangers";color:#2a3558;-webkit-text-stroke:2px var(--ink)}
.art-card .no-art{margin:0;box-shadow:none;border:0;border-bottom:var(--line) solid var(--ink)}
.art-card .no-art .t{font-size:56px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) rotate(-1deg);z-index:120;background:var(--gold);color:var(--ink);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);font:700 16px/1.3 "Oswald";text-transform:uppercase;letter-spacing:1px;padding:12px 18px;max-width:92vw;display:none}
.toast.show{display:block}
.team-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
@media (max-width:960px){
  .hero.johnny .wrap{grid-template-columns:1fr}
  .hero.johnny{min-height:auto}
  .johnny-card{justify-self:center;max-width:380px}
  .format-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .gallery img{aspect-ratio:4/3}
  .team-strip{grid-template-columns:1fr}
}
@media (max-width:520px){
  .hero.johnny{padding:20px 0 36px}
  .hero-copy h1{font-size:58px}
  .btn.mega{width:100%;text-align:center}
  .burst{width:110px;height:110px;font-size:19px}
  .johnny-card .caption{left:4px}
  .site-header .wrap{min-height:56px}
  .logo{font-size:28px}
}

/* Home hero: Team Keep Safe animation under the Buy button */
.hero-video{max-width:520px;margin:4px 0 20px;transform:rotate(-1deg);box-shadow:8px 8px 0 var(--ink),0 0 0 5px var(--gold)}
.hero-video video,.hero-video img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
@media (max-width:960px){.hero-video{max-width:100%}}

/* Home hero: The Teams strip (three animated clips) under the Buy button */
.hero-teams{max-width:640px;margin:2px 0 18px}
.hero-teams .caption{margin-bottom:10px;font-size:12px;padding:5px 9px}
.hero-teams-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hero-teams .hero-video{max-width:none;margin:0;box-shadow:5px 5px 0 var(--ink),0 0 0 3px var(--gold)}
.hero-teams .hero-video:nth-child(2){transform:rotate(1deg)}
.hero-teams .hero-video figcaption{left:6px;bottom:6px;font-size:10px;letter-spacing:1px;padding:3px 6px;border-width:2px;box-shadow:2px 2px 0 var(--ink)}
@media (max-width:960px){.hero-teams{max-width:100%}}
@media (max-width:520px){.hero-teams-row{gap:10px}.hero-teams .hero-video figcaption{position:static;max-width:none;font-size:9px;padding:3px 2px;border:0;border-top:2px solid var(--ink);box-shadow:none;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
/* Animated art in frames and character banners */
.art-frame video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.profile-wide video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;border:var(--line) solid var(--ink);box-shadow:10px 10px 0 var(--ink),0 0 0 6px var(--fire)}

/* Scene animations and animated hero (video versions of the img rules) */
video{max-width:100%;display:block}
.scene video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;transition:transform .3s}
.scene:hover video{transform:scale(1.04)}
.gallery video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;pointer-events:none}
@media (max-width:760px){.gallery video{aspect-ratio:4/3}}
.hero.johnny .hero-bg video{width:100%;height:100%;object-fit:cover;object-position:50% 35%;filter:saturate(1.35) contrast(1.15)}
.hero.art .hero-bg video{width:100%;height:100%;object-fit:cover;object-position:70% 40%;filter:saturate(1.25) contrast(1.1)}
.johnny-card video{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:45% 50%;background:#000;border:var(--line) solid var(--ink);box-shadow:12px 12px 0 var(--ink),0 0 0 8px var(--gold);transform:rotate(2deg);filter:contrast(1.1) saturate(1.2)}
.lightbox video{max-height:86vh;max-width:100%;border:var(--line) solid var(--gold);background:#000}