:root{--ink:#1b1210;--cream:#fff1d6;--orange:#f2762e;--red:#d63a2a;--gold:#ffc145;--plum:#4a1f3a}
*{box-sizing:border-box}
body{margin:0;font-family:"Trebuchet MS",Arial,sans-serif;color:var(--ink);background:var(--cream);
background-image:radial-gradient(rgba(27,18,16,.09) 1.2px,transparent 1.3px);background-size:7px 7px;line-height:1.5}
a{color:var(--red)}
.wrap{max-width:1100px;margin:0 auto;padding:0 18px}
h1,h2,h3,.display{font-family:Impact,"Arial Black",sans-serif;letter-spacing:.02em;text-transform:uppercase;margin:0}
nav{background:var(--ink);color:var(--cream);position:sticky;top:0;z-index:10}
nav .wrap{display:flex;align-items:center;gap:14px;height:56px}
nav img{width:38px;height:38px;border-radius:50%;border:2px solid var(--gold)}
nav a{color:var(--cream);text-decoration:none;font-weight:700}
nav .sp{flex:1}
.hero{position:relative;border-bottom:6px solid var(--ink);overflow:hidden;background:var(--orange)}
.hero img{display:block;width:100%;max-height:520px;object-fit:cover}
.hero .txt{position:absolute;left:0;right:0;bottom:0;padding:24px 18px 28px;background:linear-gradient(transparent,rgba(27,18,16,.85));color:#fff;text-align:center}
.hero h1{font-size:clamp(2.6rem,8vw,5.5rem);color:var(--gold);-webkit-text-stroke:2px var(--ink);text-shadow:5px 5px 0 var(--red)}
.hero p{font-size:clamp(1rem,2.4vw,1.35rem);margin:.3em 0 0;font-weight:700}
.ca{background:var(--gold);border-bottom:4px solid var(--ink);padding:14px 0;text-align:center;font-weight:700}
.ca code{background:#fff;border:2px dashed var(--ink);padding:4px 10px;border-radius:6px;word-break:break-all}
.btn{display:inline-block;background:var(--red);color:#fff;border:3px solid var(--ink);border-radius:8px;padding:8px 16px;font-weight:800;cursor:pointer;text-decoration:none;box-shadow:3px 3px 0 var(--ink);font-size:1rem}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
section{padding:46px 0}
section h2{font-size:clamp(2rem,5vw,3rem);color:var(--red);text-shadow:3px 3px 0 var(--gold);margin-bottom:18px}
.progress{background:#fff;border:3px solid var(--ink);border-radius:10px;padding:14px;margin-bottom:22px;box-shadow:4px 4px 0 var(--ink)}
.bar{height:22px;background:#f4dcc0;border:2px solid var(--ink);border-radius:12px;overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(45deg,var(--orange) 0 12px,var(--red) 12px 24px);transition:width .6s}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.card{background:#fff;border:3px solid var(--ink);border-radius:12px;padding:16px;box-shadow:5px 5px 0 var(--ink);display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.card .rd{font-family:Impact,sans-serif;color:var(--orange);font-size:1.1rem}
.card h3{font-size:1.5rem;margin:2px 0 6px}
.card p{margin:0 0 12px;flex:1}
.tag{align-self:flex-start;font-weight:800;padding:3px 10px;border-radius:20px;border:2px solid var(--ink);font-size:.85rem}
.free .tag{background:#9be37b}.open .tag{background:var(--gold)}
.locked{background:#e9dccb;color:#5a4a40}
.locked .tag{background:#5a4a40;color:#fff}
.cast{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.cast div{background:#fff;border:3px solid var(--ink);border-radius:12px;padding:14px}
.cast b{font-family:Impact,sans-serif;font-size:1.25rem;color:var(--plum);text-transform:uppercase}
.sheet{width:100%;border:4px solid var(--ink);border-radius:12px;margin-bottom:18px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.two img{width:100%;border:4px solid var(--ink);border-radius:12px;box-shadow:6px 6px 0 var(--red)}
@media(max-width:760px){.two{grid-template-columns:1fr}nav .hide-sm{display:none}}
footer{background:var(--ink);color:var(--cream);padding:28px 0;font-size:.92rem}
footer a{color:var(--gold)}
.reader{max-width:820px;margin:0 auto}
.reader img{display:block;width:100%;border:4px solid var(--ink);margin:0 0 14px;background:#fff}
.soon{text-align:center;background:#fff;border:4px dashed var(--ink);border-radius:14px;padding:40px 20px}
.soon img{max-width:240px;border-radius:50%;border:4px solid var(--ink);margin:0 auto 14px}
.pager{display:flex;justify-content:space-between;margin:20px 0;gap:10px}
.card.bonus{grid-column:1/-1;background:linear-gradient(135deg,var(--plum),#2a0f22);color:var(--cream);border-color:var(--gold);box-shadow:5px 5px 0 var(--gold),0 0 0 3px var(--ink)}
.card.bonus .rd{color:var(--gold)}.card.bonus h3{color:var(--gold);text-shadow:2px 2px 0 var(--red)}
.card.bonus.locked .tag{background:var(--gold);color:var(--ink)}

.madewith{display:inline-flex;align-items:center;gap:10px;background:var(--cream);color:var(--ink);border:3px solid var(--gold);border-radius:999px;padding:6px 16px 6px 14px;margin:0 0 14px;text-decoration:none;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;box-shadow:3px 3px 0 var(--gold)}
.madewith img{height:26px;width:auto;display:block}
.madewith:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--gold)}
