:root{
  --ink:#111; --paper:#f1ecd8; --pink:#ff2e88; --acid:#d7ff1f; --cyan:#22e0ff; --red:#e8251f;
  --mono:"Courier New",Courier,monospace;
  --heavy:Impact,"Arial Black","Franklin Gothic Heavy",sans-serif;
}
*{box-sizing:border-box}
html{background:var(--ink)}
body{
  margin:0; color:var(--ink); font-family:var(--mono); font-size:17px; line-height:1.5;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg,#1a1a1a 0 12px,#141414 12px 24px);
  overflow-x:hidden;
}
a{color:inherit}
.marquee{background:var(--acid);border-block:3px solid var(--ink);overflow:hidden;white-space:nowrap;font-weight:bold;letter-spacing:.08em}
.marquee span{display:inline-block;padding:6px 0;animation:run 26s linear infinite}
@keyframes run{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}

nav.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;max-width:900px;margin:0 auto;padding:14px 16px 0}
nav.top .logo{font-family:var(--heavy);font-size:26px;color:var(--paper);text-decoration:none;letter-spacing:.03em;text-shadow:3px 3px 0 var(--pink)}
nav.top .logo span{color:var(--acid)}
nav.top .links{display:flex;flex-wrap:wrap;gap:6px}
nav.top .links a{color:var(--paper);text-decoration:none;font-weight:bold;padding:4px 10px;border:2px solid var(--paper);background:#000}
nav.top .links a:hover,nav.top .links a[aria-current]{background:var(--pink);border-color:var(--pink);color:#fff}

.wrap{max-width:900px;margin:0 auto;padding:18px 16px 60px}
.hero{position:relative;text-align:center;margin:22px 0 36px}
.ransom{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:10px .4em;font-family:var(--heavy);font-size:clamp(30px,9vw,88px);line-height:1;text-transform:uppercase}
.ransom .w{display:inline-flex;gap:4px;white-space:nowrap}
.ransom b{display:inline-block;padding:2px 8px;font-weight:normal;box-shadow:3px 3px 0 #000}
.ransom b:nth-child(6n+1){background:var(--paper);transform:rotate(-4deg)}
.ransom b:nth-child(6n+2){background:var(--pink);color:#fff;transform:rotate(3deg);font-family:var(--mono);font-weight:bold}
.ransom b:nth-child(6n+3){background:#000;color:var(--acid);transform:rotate(-2deg);border:2px dashed var(--acid)}
.ransom b:nth-child(6n+4){background:var(--cyan);transform:rotate(5deg);font-family:Georgia,serif;font-style:italic}
.ransom b:nth-child(6n+5){background:var(--acid);transform:rotate(-6deg)}
.ransom b:nth-child(6n){background:var(--red);color:var(--paper);transform:rotate(2deg)}
.ransom .gap{background:none!important;box-shadow:none;width:.3em;border:0!important}
.hero .issue{display:inline-block;margin-top:18px;background:var(--paper);padding:4px 12px;transform:rotate(-1deg);border:2px solid #000;font-weight:bold}
.sticker{position:absolute;right:1%;top:-14px;background:var(--pink);color:#fff;font-family:var(--heavy);padding:14px 10px;border-radius:50%;transform:rotate(14deg);font-size:15px;text-align:center;line-height:1.1;box-shadow:4px 4px 0 #000;animation:wob 3s ease-in-out infinite}
@keyframes wob{50%{transform:rotate(4deg) scale(1.06)}}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;margin-top:26px}
.card{background:var(--paper);padding:20px 22px;border:3px solid #000;box-shadow:8px 8px 0 var(--pink);position:relative}
.grid .card:nth-child(2n){transform:rotate(.8deg);box-shadow:8px 8px 0 var(--cyan)}
.grid .card:nth-child(3n){transform:rotate(-1deg);box-shadow:8px 8px 0 var(--acid)}
.card::before{content:"";position:absolute;top:-14px;left:40%;width:90px;height:26px;background:rgba(255,255,230,.55);transform:rotate(-3deg);border:1px solid rgba(0,0,0,.08)}
.wide{grid-column:1/-1}
h1,h2{font-family:var(--heavy);font-weight:normal;text-transform:uppercase;letter-spacing:.02em;line-height:1.1}
h1{font-size:44px;margin:4px 0 10px}
h2{font-size:30px;margin:0 0 12px}
h2 a{text-decoration:none}
h2 mark{background:#000;color:var(--acid);padding:0 6px}
h3{font-family:var(--heavy);font-weight:normal;font-size:22px;text-transform:uppercase;margin:18px 0 8px}
.kicker{font-weight:bold;color:var(--red);text-transform:uppercase;font-size:14px}
.note{font-size:14px;opacity:.75}
.intro{color:var(--paper);max-width:680px;margin:0 auto 26px;text-align:center}
.intro a{color:var(--acid)}

.btn{display:inline-block;margin:10px 8px 0 0;font-family:var(--heavy);font-size:19px;background:var(--red);color:var(--paper);padding:9px 16px;border:3px solid #000;box-shadow:5px 5px 0 #000;cursor:pointer;user-select:none;text-decoration:none;transition:transform .08s}
.btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 #000}
.btn.ghost{background:var(--paper);color:var(--ink)}
.fsize{font-size:13px;opacity:.7;white-space:nowrap}
.stamp{display:inline-block;border:3px solid var(--red);color:var(--red);padding:0 8px;font-weight:bold;transform:rotate(-8deg);font-family:var(--heavy);font-size:20px;margin-top:8px}

.issue-card{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:start}
.issue-card.big{grid-template-columns:240px 1fr}
.issue-card .cover{width:100%;height:auto;display:block;border:2px solid #000;box-shadow:4px 4px 0 #000;transition:transform .15s}
.issue-card .cover-link:hover .cover{transform:rotate(-2deg) scale(1.03)}
.issue-card h2{font-size:28px;margin:4px 0 8px}
.issue-card p{margin:0 0 6px}
.lead .card{box-shadow:10px 10px 0 var(--acid)}
.archive{display:grid;gap:30px}
.archive .card:nth-child(odd){transform:rotate(-.5deg)}
.archive .card:nth-child(even){transform:rotate(.5deg);box-shadow:8px 8px 0 var(--cyan)}
.soon{border-style:dashed}
.soon-cover{aspect-ratio:300/420;background:repeating-linear-gradient(-45deg,#000 0 14px,#222 14px 28px);color:#ffd400;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--heavy);border:2px solid #000}
.soon-cover span{font-size:clamp(30px,6vw,48px);line-height:1}
.soon-cover em{font-style:normal;font-size:13px;background:#ffd400;color:#000;padding:2px 6px;margin-top:6px;white-space:nowrap}

.news{padding:10px 0;border-bottom:2px dotted #0005}
.news:last-of-type{border-bottom:0}
.news time{font-size:13px;font-weight:bold;color:var(--red)}
.news h3{margin:2px 0 4px;font-size:20px}
.news p{margin:0}
.newslist{margin-top:10px}
.more{display:inline-block;margin-top:10px;font-weight:bold}

ol.chart{padding-left:0;list-style:none;margin:0;counter-reset:c}
ol.chart li{counter-increment:c;display:flex;gap:12px;align-items:baseline;border-bottom:2px dotted #0005;padding:6px 0}
ol.chart li::before{content:counter(c,decimal-leading-zero);font-family:var(--heavy);font-size:26px;color:var(--red);min-width:40px}
ol.chart small{display:block;opacity:.7}
.arrow{margin-left:auto;font-weight:bold}

.crumbs{color:var(--paper);margin:10px 0 18px;font-weight:bold}
.crumbs a{color:var(--acid)}
.issue-head{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:28px;align-items:start}
.cover-wrap .cover{width:100%;height:auto;display:block;border:3px solid #000;box-shadow:10px 10px 0 var(--pink);transform:rotate(-2deg)}
ol.toc{margin:0;padding-left:26px}
ol.toc li{padding:2px 0}
.read p{max-width:68ch}
.read .q,.card .q{font-weight:bold;margin-bottom:0}
hr.dash{border:0;border-top:3px dashed #000;margin:20px 0}
ul.zl{list-style:none;padding:0;margin:0}
ul.zl li{position:relative;padding:4px 0 4px 26px}
ul.zl li::before{content:"✖";position:absolute;left:0;color:var(--red);font-weight:bold}
blockquote{margin:0 0 14px;font-family:Georgia,serif;font-size:17px}
cite{display:block;font-family:var(--mono);font-style:normal;font-weight:bold;color:var(--red);font-size:14px;margin-top:4px}
.pager{display:flex;justify-content:space-between;gap:10px;margin-top:34px;flex-wrap:wrap}
.pager a,.pager span{color:var(--paper);font-weight:bold;background:#000;border:2px solid var(--paper);padding:6px 12px;text-decoration:none}
.pager a:hover{background:var(--pink)}

/* иллюстрации из ComfyUI: ч/б «ксерокс» на бумаге */
figure{margin:0}
.ill{margin:4px 0 16px;border:3px solid #000;background:#fff;box-shadow:5px 5px 0 #000;transform:rotate(-.6deg)}
.ill img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.banner{margin:0 0 30px;border:4px solid #000;background:var(--paper);box-shadow:10px 10px 0 var(--pink);transform:rotate(.4deg);overflow:hidden}
.banner img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.nfimg{max-width:360px;margin:0 auto 10px;border:3px solid var(--paper);background:#fff}
.nfimg img{display:block;width:100%;height:auto}
img.cover{background:#fff}
ol.toc a{text-decoration:none;border-bottom:2px dotted}
ol.toc a:hover{background:var(--acid)}

/* онлайн-версия номера */
.zine{margin-top:40px;display:grid;gap:34px;max-width:760px;margin-left:auto;margin-right:auto;counter-reset:zp}
.zpage{position:relative;background:var(--paper);border:3px solid #000;padding:26px 28px 30px;box-shadow:8px 8px 0 var(--pink);scroll-margin-top:16px;counter-increment:zp}
.zpage:nth-child(3n+2){box-shadow:8px 8px 0 var(--cyan);transform:rotate(.4deg)}
.zpage:nth-child(3n){box-shadow:8px 8px 0 var(--acid);transform:rotate(-.4deg)}
.zpage::after{content:counter(zp);position:absolute;right:-12px;bottom:-14px;background:var(--acid);border:2px solid #000;font-family:var(--heavy);padding:2px 9px;transform:rotate(-6deg)}
.zpage h2{display:inline-block;background:#000;color:var(--paper);padding:4px 10px;margin:0 0 16px;font-size:clamp(22px,4.5vw,32px)}
.zpage p{max-width:66ch}
.sign{font-weight:bold;color:var(--red)}
.znews{border-left:6px solid var(--red);padding:2px 0 2px 14px;margin-bottom:14px}
.znews h3{margin:0 0 4px;font-size:19px}
.znews p{margin:0}
.zad{background:var(--acid);border:3px dashed #000;padding:14px 16px;font-weight:bold}
.stk{display:grid;grid-template-columns:1fr 1fr;border:2px dashed #000}
.stk div{min-height:120px;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;font-family:var(--heavy);font-size:clamp(17px,3.4vw,24px);text-transform:uppercase;border:1px dashed #000;line-height:1.15}
.zend{text-align:center;color:var(--paper)}
.zend a:not(.btn){color:var(--acid)}

#slogan{min-height:3em;font-size:20px;font-weight:bold;margin:10px 0 0}
.counter{display:inline-flex;gap:2px;margin-left:8px}
.counter i{font-style:normal;background:#000;color:var(--acid);padding:2px 6px;font-weight:bold;border:1px solid #444}
.construction{margin:46px auto 0;max-width:620px;text-align:center;color:var(--acid);border:4px solid;padding:16px;background:repeating-linear-gradient(-45deg,#000 0 18px,#222 18px 36px)}
.construction strong{display:block;font-family:var(--heavy);font-size:24px;font-weight:normal;color:#ffd400}
hr.tear{border:0;height:18px;margin:44px 0;background:linear-gradient(135deg,transparent 33%,var(--paper) 33% 66%,transparent 66%) 0 0/18px 18px}
.nf{text-align:center;color:var(--paper);padding:40px 0}
.nf h1{font-size:clamp(90px,24vw,190px);color:var(--pink);text-shadow:6px 6px 0 var(--cyan);transform:rotate(-3deg);margin:0}
footer{margin:10px auto 30px;text-align:center;color:#bbb;font-size:14px;padding:0 16px}
footer a{color:var(--pink)}

@media (max-width:640px){
  body{font-size:16px}
  .sticker{position:static;display:inline-block;margin-top:14px}
  .grid .card,.archive .card{transform:none!important}
  .issue-card{grid-template-columns:110px 1fr}
  .issue-card.big{grid-template-columns:1fr}
  .issue-card.big .cover-link{display:block;max-width:220px;margin:0 auto}
  .issue-head{grid-template-columns:1fr}
  .cover-wrap{max-width:260px;margin:0 auto}
  h1{font-size:34px}
  .zpage{padding:20px 16px 26px;transform:none!important}
  .stk div{min-height:90px}
}
@media (prefers-reduced-motion:reduce){
  .marquee span,.sticker{animation:none}
}