:root{--night:#0b1026;--ink:#05070f;--gold:#f6b81c;--red:#d62828;--sky:#9fd8ff}
*{box-sizing:border-box;margin:0}html,body{min-height:100%}
body{font-family:Nunito,system-ui,sans-serif;color:#fff;background:radial-gradient(ellipse at 70% 0%,#26306a 0%,var(--night) 55%,var(--ink) 100%);min-height:100vh;display:flex;flex-direction:column}
h1,h2,.bang,button{font-family:Bangers,Impact,sans-serif;letter-spacing:1.5px}
main{flex:1;display:grid;grid-template-columns:6fr 5fr;gap:48px;align-items:center;max-width:1200px;margin:0 auto;padding:40px 40px 24px}
.art img{width:100%;display:block;border:5px solid #fff;box-shadow:12px 12px 0 var(--gold),12px 12px 0 7px var(--ink)}
.tag{display:inline-block;background:var(--gold);color:var(--ink);font-weight:900;font-size:14px;padding:6px 12px;border:3px solid var(--ink);transform:rotate(-2deg)}
h1{font-size:64px;line-height:1;color:var(--gold);text-shadow:4px 4px 0 var(--red),7px 7px 0 #000;margin:14px 0 6px}
.chap{font-family:Bangers;font-size:26px;color:var(--sky);letter-spacing:1px}
.prem{font-size:18px;font-weight:900;margin:6px 0 18px}.tease{font-size:17px;line-height:1.55;color:#d8dcf0;margin-bottom:22px}
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:24px}
.count div{background:var(--ink);border:3px solid var(--gold);text-align:center;padding:10px 4px;box-shadow:4px 4px 0 var(--red)}
.count b{display:block;font-family:Bangers;font-size:44px;color:var(--gold);line-height:1}.count span{font-size:12px;font-weight:900;letter-spacing:2px;color:#aab}
form{display:flex;gap:8px}input{flex:1;min-width:0;padding:14px;font-size:16px;border:3px solid var(--ink);border-radius:0}
button{font-size:22px;padding:10px 22px;background:var(--red);color:#fff;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--gold);cursor:pointer}
.note{font-size:13px;color:#99a;margin-top:8px}.msg{color:var(--gold);font-weight:900;margin-top:8px;min-height:1em}
footer{text-align:center;padding:18px;font-size:14px;color:#99a;border-top:3px solid var(--gold);background:var(--ink)}footer b{font-family:Bangers;color:var(--gold);font-size:20px;letter-spacing:1px}
@media(max-width:800px){main{grid-template-columns:1fr;gap:26px;padding:22px 18px}h1{font-size:44px}.count b{font-size:34px}.chap{font-size:22px}form{flex-direction:column}}
/* cinematic poster hero */
main.hero{position:relative;display:block;max-width:none;margin:0;padding:0;min-height:100vh;overflow:hidden}
.hero .bg{position:absolute;inset:0;background:url(img/poster.jpg) center 30%/cover no-repeat}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,15,.55) 0%,rgba(5,7,15,0) 18%,rgba(5,7,15,0) 42%,rgba(5,7,15,.85) 68%,rgba(5,7,15,.98) 100%)}
.hero .top{position:absolute;top:22px;left:40px;z-index:2}
.hero .content{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:end;max-width:1200px;margin:0 auto;padding:0 40px 30px}
.logo{font-size:96px;margin:0;color:var(--gold);text-shadow:4px 4px 0 var(--red),8px 8px 0 #000;line-height:.95}
.tagline{font-family:Bangers;font-size:34px;letter-spacing:1.5px;color:#fff;text-shadow:3px 3px 0 #000;margin:4px 0 6px}
.hero .chap{text-shadow:2px 2px 0 #000}.hero .prem{margin:2px 0 10px;text-shadow:2px 2px 0 #000}.hero .tease{margin:0;max-width:560px;text-shadow:1px 1px 2px #000}
.hero .count{margin-bottom:14px}
@media(max-width:800px){
 main.hero{min-height:0}.hero .bg{position:relative;inset:auto;width:100%;aspect-ratio:16/9;background-position:center;background-size:cover}
 .hero .shade{inset:auto;top:0;left:0;right:0;aspect-ratio:16/9;background:linear-gradient(180deg,rgba(5,7,15,0) 60%,var(--night) 100%)}
 .hero .top{top:12px;left:14px}.hero .tag{font-size:12px}
 .hero .content{position:relative;grid-template-columns:1fr;gap:20px;padding:0 18px 24px;margin-top:-30px}
 .logo{font-size:58px}.tagline{font-size:28px}}