:root{--ink:#17120d;--paper:#e9d8b2;--cream:#f4ead1;--yellow:#f0b91b;--red:#c62e21;--blue:#174f5f;--line:3px solid var(--ink)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Roboto Slab',serif;overflow-x:hidden}.noise{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E")}.wrap{width:min(1180px,calc(100% - 44px));margin:auto}.topbar{height:76px;padding:0 3vw;display:flex;align-items:center;justify-content:space-between;background:var(--cream);border-bottom:var(--line);position:relative;z-index:10}.logo{font-family:Oswald,sans-serif;text-decoration:none;color:var(--ink);line-height:.82;transform:rotate(-2deg);display:inline-flex;flex-direction:column;font-size:16px}.logo b{font-size:25px;color:var(--red)}nav{display:flex;gap:34px}nav a{color:var(--ink);font:600 14px Oswald,sans-serif;letter-spacing:.08em;text-decoration:none}nav a:hover{color:var(--red)}button{font:700 12px Oswald,sans-serif;letter-spacing:.08em}.sound-btn{background:var(--yellow);border:2px solid;padding:10px 13px;box-shadow:3px 3px 0 var(--ink);cursor:pointer}.hero{height:min(820px,calc(100vh - 76px));min-height:620px;position:relative;overflow:hidden;border-bottom:var(--line);background:#34281e}.hero>img{width:100%;height:100%;object-fit:cover;object-position:center}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,10,7,.86) 0,rgba(14,10,7,.58) 35%,transparent 70%),linear-gradient(0deg,rgba(0,0,0,.35),transparent 45%)}.issue{position:absolute;right:4vw;top:30px;background:var(--yellow);border:2px solid;padding:9px 14px;font:700 13px Oswald;transform:rotate(2deg);box-shadow:5px 5px 0 var(--ink)}.hero-copy{position:absolute;left:7vw;top:50%;transform:translateY(-47%);color:var(--cream);max-width:640px}.kicker,.chapter{font:600 14px Oswald;letter-spacing:.22em;color:var(--yellow)}h1,h2,h3{font-family:Oswald,sans-serif;margin:0}.hero h1{font-size:clamp(82px,11vw,168px);line-height:.72;letter-spacing:-.065em;text-shadow:6px 6px 0 #000}.hero h1 em{color:var(--yellow);font-style:normal;-webkit-text-stroke:2px var(--ink)}.hero-copy>p:last-of-type{max-width:500px;font-size:17px;line-height:1.65;margin:35px 0}.cta{display:inline-flex;gap:30px;align-items:center;background:var(--red);color:white;text-decoration:none;border:2px solid var(--cream);padding:16px 19px;font:700 14px Oswald;box-shadow:6px 6px 0 var(--yellow);transition:.2s}.cta:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--yellow)}.burst{position:absolute;right:6vw;bottom:6vh;background:var(--yellow);width:160px;height:160px;display:grid;place-content:center;text-align:center;font:700 24px Oswald;clip-path:polygon(50% 0,61% 15%,78% 5%,81% 24%,100% 25%,87% 42%,100% 55%,82% 62%,86% 82%,66% 78%,57% 100%,45% 82%,26% 94%,24% 72%,3% 71%,17% 53%,0 39%,22% 32%,17% 11%,39% 20%);transform:rotate(9deg)}.burst small{display:block;font-size:9px}.marquee{overflow:hidden;background:var(--red);color:#fff;border-bottom:var(--line);padding:12px 0;font:700 15px Oswald;letter-spacing:.12em;white-space:nowrap}.marquee div{width:max-content;animation:scroll 22s linear infinite}@keyframes scroll{to{transform:translateX(-50%)}}
.heroes{padding:110px 0}.section-head{max-width:700px;margin-bottom:50px}.section-head span{font:700 12px Oswald;letter-spacing:.22em;color:var(--red)}.section-head h2{font-size:clamp(46px,6vw,82px);line-height:.95;letter-spacing:-.035em;margin:9px 0}.section-head p{font-size:14px}.hero-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px}.profile{background:var(--cream);border:var(--line);box-shadow:8px 8px 0 var(--ink);display:grid;grid-template-columns:45% 55%;min-height:470px;overflow:hidden}.profile:nth-child(2){transform:translateY(35px)}.portrait{position:relative;overflow:hidden;border-right:var(--line)}.portrait img{height:100%;width:190%;object-fit:cover;filter:saturate(.65) contrast(1.1)}.kola .portrait img{object-position:15% center}.slavko .portrait img{object-position:88% center;transform:translateX(-47%)}.tag,.caption{position:absolute;background:var(--yellow);border:2px solid var(--ink);padding:7px 10px;font:700 11px Oswald;letter-spacing:.08em}.tag{bottom:18px;left:12px;transform:rotate(-3deg)}.profile-copy{padding:30px;position:relative}.num{position:absolute;right:20px;top:10px;font:700 70px Oswald;color:rgba(23,18,13,.09)}.profile h3{font-size:62px}.profile p{font-size:13px;line-height:1.6;min-height:82px}.profile dl{border-top:2px solid;border-bottom:2px solid}.profile dl div{padding:12px 0}.profile dl div+div{border-top:1px dashed}.profile dt{font:700 10px Oswald;color:var(--red);letter-spacing:.12em}.profile dd{margin:4px 0 0;font-size:12px}.meter{height:22px;margin-top:25px;border:2px solid;position:relative;background:#d8c8a5}.meter b{display:block;height:100%;background:var(--red)}.meter span{position:absolute;inset:0;display:grid;place-items:center;color:white;text-shadow:1px 1px #000;font:700 9px Oswald;letter-spacing:.1em}
.comic{padding:100px 0}.section-head.light{margin-bottom:38px}.panels{display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:430px 520px;gap:18px}.panel{position:relative;border:4px solid var(--ink);overflow:hidden;background:#caa568;box-shadow:6px 6px 0 rgba(23,18,13,.9)}.panel img{width:100%;height:100%;object-fit:cover;filter:saturate(.78) contrast(1.08)}.p1 img{object-position:center}.p3{grid-column:1/-1}.p3 img{object-position:center 43%}.p4{display:none}.caption{top:13px;left:13px}.bubble{position:absolute;background:var(--cream);border:3px solid;border-radius:50%;padding:20px 25px;max-width:240px;font-weight:800;font-size:16px;text-align:center;box-shadow:4px 4px 0 rgba(0,0,0,.4)}.bubble:after{content:"";position:absolute;width:20px;height:25px;background:var(--cream);border-right:3px solid;border-bottom:3px solid;transform:rotate(40deg)}.bubble.left{left:7%;top:26%}.bubble.left:after{left:18px;bottom:-12px}.bubble.right{right:7%;top:24%}.bubble.right:after{right:20px;bottom:-12px}.sfx{position:absolute;bottom:8%;right:5%;font:700 68px Oswald;color:var(--yellow);-webkit-text-stroke:3px var(--ink);transform:rotate(-8deg)}.tool-art{height:65%;display:grid;place-items:center;background:repeating-radial-gradient(circle at 50%,#d6bd82 0 8px,#b99758 9px 12px)}.tool-art span{font-size:120px;filter:grayscale(1);transform:rotate(-18deg)}.tool-art b{position:absolute;font:700 190px Oswald;color:var(--red);right:10%;top:5%;transform:rotate(12deg)}.p2 p{padding:6px 24px;font-size:13px;line-height:1.5}.p2 .bubble{font-size:13px;max-width:180px}.p3 .bubble{top:20%;max-width:260px}.quote-btn{position:absolute;right:20px;bottom:20px;background:var(--red);color:white;border:2px solid var(--cream);padding:13px 16px;box-shadow:4px 4px 0 var(--ink);cursor:pointer}
.progress-section{background:var(--blue);color:var(--cream);border-top:var(--line);padding:100px 0}.progress-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.progress-grid h2{font-size:45px;margin:12px 0}.big-progress{font:700 170px/1 Oswald;color:var(--yellow);text-shadow:7px 7px 0 var(--ink)}.big-progress i{font-size:70px;font-style:normal}.work-btn{background:var(--yellow);border:3px solid var(--ink);padding:16px 20px;box-shadow:6px 6px 0 var(--ink);cursor:pointer}.progress-grid p{font-size:11px;opacity:.7}.checklist{background:var(--cream);color:var(--ink);border:4px solid var(--ink);padding:35px;box-shadow:10px 10px 0 var(--yellow);transform:rotate(1deg)}.checklist h3{font-size:25px;border-bottom:3px solid;padding-bottom:14px;margin-bottom:14px}.checklist label{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed;font-size:13px}.checklist input{appearance:none;width:22px;height:22px;border:2px solid;background:#fff}.checklist input:checked:after{content:'✓';display:block;font:bold 21px Oswald;color:var(--red);transform:translate(3px,-5px)}.warning{margin-top:22px;background:var(--yellow);border:2px solid;padding:13px;font-size:11px;font-weight:800}.shake{animation:shake .35s}@keyframes shake{25%{transform:translateX(-5px) rotate(-1deg)}50%{transform:translateX(5px) rotate(1deg)}75%{transform:translateX(-3px)}}footer{background:var(--ink);color:var(--cream);padding:35px 0}footer .wrap{display:flex;justify-content:space-between;align-items:center}footer .logo{color:var(--cream)}footer p{font-size:11px;opacity:.6}footer a{color:var(--yellow);font:700 12px Oswald}
@media(max-width:800px){.topbar nav{display:none}.hero{min-height:680px}.hero-shade{background:linear-gradient(0deg,rgba(14,10,7,.9),rgba(14,10,7,.08) 80%)}.hero-copy{left:22px;right:22px;top:auto;bottom:45px;transform:none}.hero h1{font-size:84px}.hero-copy>p:last-of-type{margin:24px 0}.burst{width:115px;height:115px;right:15px;top:60px;bottom:auto;font-size:17px}.issue{left:18px;right:auto}.hero-cards{grid-template-columns:1fr}.profile:nth-child(2){transform:none}.panels{grid-template-columns:1fr;grid-template-rows:auto}.panel.p1{aspect-ratio:16/9}.panel.p2{aspect-ratio:4/3}.panel.p3{grid-column:auto;aspect-ratio:3/2}.panel img{object-position:center}.progress-grid{grid-template-columns:1fr;gap:45px}.big-progress{font-size:130px}.portrait img{min-height:440px}.heroes,.comic{padding:75px 0}}
@media(max-width:560px){.wrap{width:min(100% - 26px,1180px)}.sound-btn{font-size:10px}.hero h1{font-size:65px}.hero-copy>p:last-of-type{font-size:14px}.profile{grid-template-columns:1fr}.portrait{height:auto;aspect-ratio:1003/1568;border-right:0;border-bottom:var(--line)}.portrait img{display:block;width:100%;height:100%;min-height:0;object-fit:contain}.profile p{min-height:0}.bubble{font-size:12px;max-width:170px}.p3 .bubble{max-width:190px}.quote-btn{font-size:9px}.progress-grid h2{font-size:34px}footer .wrap{align-items:flex-start;gap:25px;flex-wrap:wrap}footer p{order:3;width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marquee div{animation:none}}

/* Individual graphic-novel portraits */
.portrait img{width:100%;object-position:center;transform:none;filter:saturate(.82) contrast(1.06)}
.kola .portrait img,.slavko .portrait img{width:100%;object-position:center center;transform:none}

/* Mobile cover: keep copy away from the characters */
@media(max-width:800px){
  .hero{height:auto;min-height:0;display:grid;overflow:visible;background:var(--ink)}
  .hero>img{height:62vh;min-height:470px;max-height:610px;object-position:center top;grid-row:1}
  .hero-shade{height:62vh;min-height:470px;max-height:610px;background:linear-gradient(0deg,rgba(14,10,7,.35),transparent 45%);pointer-events:none}
  .hero-copy{position:relative;inset:auto;transform:none;max-width:none;padding:34px 22px 42px;background:var(--ink);grid-row:2}
  .hero h1{font-size:clamp(62px,20vw,88px);line-height:.76}
  .hero-copy>p:last-of-type{max-width:560px}
  .issue,.burst{z-index:2}
}

/* Desktop also keeps every character unobstructed */
@media(min-width:801px){
  .hero{height:auto;min-height:0;display:grid;overflow:visible;background:var(--ink)}
  .hero>img{grid-row:1;width:100%;height:min(720px,calc(100vh - 76px));min-height:600px;object-fit:cover;object-position:center center}
  .hero-shade{display:none}
  .hero-copy{position:relative;inset:auto;transform:none;grid-row:2;max-width:none;padding:42px 7vw 48px;background:var(--ink);display:grid;grid-template-columns:minmax(420px,.9fr) 1.1fr;column-gap:70px;align-items:center}
  .hero-copy .kicker{grid-column:1/-1}
  .hero h1{grid-column:1;font-size:clamp(82px,9vw,138px)}
  .hero-copy>p:last-of-type{grid-column:2;grid-row:2;margin:0 0 82px;max-width:560px}
  .hero-copy .cta{grid-column:2;grid-row:2;align-self:end;justify-self:start}
  .issue{top:28px}.burst{bottom:auto;top:min(52vw,650px);transform:translateY(-115%) rotate(9deg)}
  .panels{grid-template-rows:auto}
  .panel,.panel.p1,.panel.p2,.panel.p3{display:flex;flex-direction:column;height:auto;min-height:0;overflow:hidden;background:var(--cream)}
  .panel img{position:relative;order:1;width:100%;height:auto;object-fit:contain;object-position:center}
  .panel.p1 img{aspect-ratio:16/9}.panel.p3 img{aspect-ratio:3/2}
  .panel .caption{position:static;order:2;align-self:flex-start;margin:16px 18px 0;transform:none}
  .panel .bubble,.panel .bubble.left,.panel .bubble.right,.panel.p3 .bubble{position:static;order:3;max-width:none;width:auto;margin:14px 18px;padding:14px 18px;border-radius:0;text-align:left;box-shadow:3px 3px 0 var(--ink);transform:none}
  .panel .bubble:after{display:none}
  .panel .sfx{position:static;order:4;align-self:flex-end;margin:-14px 22px 10px;font-size:52px}
  .panel .quote-btn{position:static;order:4;align-self:flex-start;margin:2px 18px 20px}
  .panel.p2 .tool-art{order:1;height:auto;min-height:360px}.panel.p2 p{order:4;margin:0;padding:2px 20px 22px}
}
@media(max-width:560px){
  .hero>img,.hero-shade{height:500px;min-height:500px;max-height:500px}
  .hero>img{object-position:center top}
  .hero .burst{top:370px;right:10px;bottom:auto}
  .hero .issue{top:420px;left:12px;right:auto}
}

/* Mobile comic panels: all copy lives outside character photography */
@media(max-width:800px){
  .panels{display:grid;grid-template-columns:1fr;grid-template-rows:auto;gap:24px}
  .panel,.panel.p1,.panel.p2,.panel.p3{display:flex;flex-direction:column;aspect-ratio:auto;height:auto;min-height:0;overflow:hidden;background:var(--cream)}
  .panel img{display:block;position:relative;order:1;width:100%;height:auto;object-fit:contain;object-position:center}
  .panel.p1 img{aspect-ratio:16/9}
  .panel.p3 img{aspect-ratio:3/2}
  .panel .caption{position:static;order:2;align-self:flex-start;margin:14px 14px 0;transform:none}
  .panel .bubble,.panel .bubble.left,.panel .bubble.right,.panel.p3 .bubble{position:static;order:3;max-width:none;width:auto;margin:12px 14px;padding:13px 15px;border-radius:0;text-align:left;box-shadow:3px 3px 0 var(--ink);transform:none}
  .panel .bubble:after{display:none}
  .panel .sfx{position:static;order:4;align-self:flex-end;margin:-8px 18px 10px;font-size:46px;transform:rotate(-5deg)}
  .panel .quote-btn{position:static;order:4;align-self:flex-start;margin:2px 14px 18px}
  .panel.p2 .tool-art{order:1;height:240px;min-height:240px}
  .panel.p2 p{order:4;margin:0;padding:2px 16px 20px}
}

.panel.p4{grid-column:1/-1;width:100%}
.panel.p4 img{width:100%;aspect-ratio:3/2;object-fit:contain}
.panel .stamp{order:5;align-self:stretch;margin:0;padding:13px 16px;background:var(--ink);color:var(--yellow);font:700 17px Oswald,sans-serif;letter-spacing:.12em;text-align:center}

.sequel{width:min(900px,calc(100% - 44px));padding:110px 0}.sequel-panel{border:4px solid var(--ink);background:var(--cream);box-shadow:9px 9px 0 var(--ink);overflow:hidden}.sequel-panel>picture{display:block;background:var(--ink)}.sequel-panel>picture img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center}.sequel-meta{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;padding:22px;border-top:4px solid var(--ink)}.sequel-meta span{background:var(--yellow);border:2px solid var(--ink);padding:10px 13px;font:700 12px Oswald,sans-serif;letter-spacing:.08em}.sequel-meta b{font-size:15px;line-height:1.65}.cat-note{padding:16px 22px;background:var(--red);color:#fff;font-size:12px;letter-spacing:.03em}.cat-note strong{font-family:Oswald,sans-serif;letter-spacing:.12em;color:var(--yellow)}
@media(max-width:700px){.sequel{width:min(100% - 26px,900px);padding:75px 0}.sequel .section-head{margin-bottom:30px}.sequel-meta{grid-template-columns:1fr;gap:13px;padding:15px}.sequel-meta span{justify-self:start}.sequel-meta b{font-size:13px}.cat-note{line-height:1.6}.sequel-panel>picture img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center}}