/* mamatov.biz/zhurnal/ — лендинг журнала, читалка и служебные страницы. Поверх дизайн-системы сайта (assets/css/style.css). Без курсивов. */
:root{ --zh-dark:#11161D; --zh-dark-2:#1B222C; --zh-line-d:#262E3A; }
body.zh{ background:#fff; }
.zh .logo__mark{ font-size:15px; }
.zh .nav a[aria-current]{ color:var(--ink); background:var(--surface); }

/* ---------- первый экран ---------- */
.zh-hero{ position:relative; overflow:hidden; background:var(--zh-dark); color:#fff; padding-block:clamp(36px,5vw,76px) clamp(40px,5vw,72px); }
.zh-hero::before{ content:''; position:absolute; right:-160px; top:-200px; width:720px; height:720px; border-radius:50%; background:radial-gradient(circle,rgba(180,242,60,.22),rgba(180,242,60,0) 66%); pointer-events:none; }
.zh-hero__in{ position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(24px,5vw,72px); align-items:center; }
.zh-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#9AA5B4; }
.zh-eyebrow::before{ content:''; width:22px; height:3px; border-radius:2px; background:var(--accent); }
.zh-hero h1{ margin-top:20px; font-family:'Unbounded','Inter',sans-serif; font-weight:800; text-transform:uppercase; font-size:clamp(28px,4.6vw,54px); line-height:1.1; letter-spacing:-.02em; }
.zh-hero h1 span{ color:var(--accent); }
.zh-hero .lead{ margin-top:22px; max-width:560px; font-size:clamp(16px,1.5vw,18.5px); line-height:1.62; color:#B5BFCC; }
.zh-hero__btns{ margin-top:30px; display:flex; flex-wrap:wrap; gap:12px; }
.btn--line{ background:transparent; color:#fff; border-color:#3A4452; }
.btn--line:hover{ border-color:#fff; background:rgba(255,255,255,.06); }
.zh-facts{ margin-top:30px; display:flex; flex-wrap:wrap; gap:8px 10px; }
.zh-facts li{ font-size:13.5px; font-weight:600; color:#C9D1DB; padding:7px 14px; border:1px solid var(--zh-line-d); border-radius:999px; background:rgba(255,255,255,.03); }
.zh-cover{ position:relative; justify-self:center; width:min(100%,380px); }
.zh-cover::before{ content:''; position:absolute; inset:8% -8% -6% 10%; border-radius:200px 200px 24px 24px; background:linear-gradient(170deg,#1B222C,#161C24); }
.zh-cover img{ position:relative; width:100%; height:auto; border-radius:6px; transform:rotate(3deg); box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07); }

/* ---------- общие блоки ---------- */
.zh-sec{ padding-block:clamp(56px,7vw,96px); }
.zh-sec--tint{ background:var(--surface); }
.zh-sec--dark{ background:var(--zh-dark); color:#EEF1F5; }
.zh-head{ max-width:760px; margin-bottom:clamp(28px,4vw,44px); }
.zh-head h2{ margin-top:16px; font-size:clamp(28px,3.8vw,44px); }
.zh-head p{ margin-top:16px; font-size:clamp(16px,1.4vw,18px); color:var(--ink-2); line-height:1.6; }
.zh-sec--dark .zh-head p{ color:#A9B3C0; }
.zh-sec--dark .eyebrow{ color:#9AA5B4; }

.zh-cards{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.zc{ background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:24px 22px 22px; transition:border-color .18s, box-shadow .18s, transform .18s; }
.zc:hover{ border-color:var(--line-2); box-shadow:var(--shadow); transform:translateY(-3px); }
.zc small{ display:block; font-size:11.5px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-dk); }
.zc h3{ margin-top:10px; font-size:19px; letter-spacing:-.02em; }
.zc p{ margin-top:10px; font-size:14.8px; line-height:1.58; color:var(--ink-2); }
.zc--cta{ background:var(--graphite); border-color:var(--graphite); color:#fff; }
.zc--cta p{ color:#A9B3C0; }
.zc--cta a{ color:var(--accent); border-bottom:1px solid rgba(180,242,60,.4); }

/* ---------- листалка ---------- */
.zh-car{ position:relative; }
.zh-track{ --gut:max(var(--pad),calc((100vw - var(--maxw))/2 + var(--pad))); display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px var(--gut) 22px; scroll-padding-inline:var(--gut); scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.zh-track:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; border-radius:6px; }
.zh-slide{ flex:0 0 min(420px,78vw); scroll-snap-align:start; margin:0; }
.zh-page{ position:relative; aspect-ratio:900/1274; background:#fff; border-radius:6px; box-shadow:0 14px 40px rgba(13,17,23,.16),0 0 0 1px rgba(13,17,23,.06); overflow:hidden; cursor:zoom-in; }
.zh-page img{ display:block; width:100%; height:100%; object-fit:cover; }
.zh-slide figcaption{ margin-top:12px; font-size:13.5px; line-height:1.45; color:var(--ink-2); max-width:420px; }
.zh-slide figcaption b{ color:var(--ink); font-weight:700; }
.zh-links a{ position:absolute; display:block; border-radius:3px; outline-offset:1px; }
.zh-links a:hover, .zh-links a:focus-visible{ background:rgba(180,242,60,.38); outline:2px solid var(--accent-dk); }
.zh-lock{ position:relative; aspect-ratio:900/1274; border-radius:6px; overflow:hidden; background:var(--zh-dark) center/cover no-repeat; display:flex; align-items:center; justify-content:center; padding:26px; text-align:center; color:#fff; box-shadow:0 14px 40px rgba(13,17,23,.16); }
.zh-lock::before{ content:''; position:absolute; inset:-10px; background:inherit; filter:blur(7px) saturate(.8); transform:scale(1.06); }
.zh-lock::after{ content:''; position:absolute; inset:0; background:rgba(17,22,29,.78); }
.zh-lock__in{ position:relative; z-index:1; }
.zh-lock svg{ width:46px; height:46px; color:var(--accent); }
.zh-lock h3{ margin-top:14px; font-family:'Unbounded','Inter',sans-serif; font-weight:800; text-transform:uppercase; font-size:21px; letter-spacing:-.01em; }
.zh-lock p{ margin-top:12px; font-size:14.5px; line-height:1.55; color:#C3CBD5; }
.zh-lock .btn{ margin-top:20px; }
.zh-car__nav{ display:flex; gap:10px; justify-content:center; margin-top:4px; }
.zh-car__btn{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2); background:var(--bg); cursor:pointer; display:grid; place-items:center; transition:background .15s,border-color .15s; }
.zh-car__btn:hover{ background:var(--accent); border-color:var(--accent); }
.zh-car__btn svg{ width:18px; height:18px; }
.zh-note{ margin-top:22px; text-align:center; font-size:15px; color:var(--ink-2); }
.zh-toc{ margin-top:34px; columns:2; column-gap:40px; max-width:760px; margin-inline:auto; padding:0 var(--pad); }
.zh-toc li{ break-inside:avoid; display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line-2); font-size:15px; }
.zh-toc li span{ color:var(--ink-3); font-variant-numeric:tabular-nums; }

/* увеличенная страница */
.zh-lb{ position:fixed; inset:0; z-index:200; background:rgba(8,11,15,.92); overflow:auto; -webkit-overflow-scrolling:touch; padding:56px 12px 28px; }
.zh-lb[hidden]{ display:none; }
.zh-lb img{ display:block; margin:0 auto; width:min(1000px,100%); height:auto; border-radius:4px; background:#fff; }
.zh-lb__x{ position:fixed; right:16px; top:12px; z-index:2; width:44px; height:44px; border-radius:50%; border:1px solid #3A4452; background:#11161D; color:#fff; font-size:22px; line-height:1; cursor:pointer; }
html.zh-lb-open, html.zh-lb-open body{ overflow:hidden; }

/* ---------- форма подписки ---------- */
.zh-sub{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px); gap:clamp(28px,5vw,72px); align-items:center; }
.zh-sub h2{ margin-top:16px; font-family:'Unbounded','Inter',sans-serif; font-weight:800; text-transform:uppercase; font-size:clamp(26px,3.4vw,40px); line-height:1.1; letter-spacing:-.015em; color:#fff; }
.zh-sub .lead{ margin-top:18px; font-size:16.5px; line-height:1.62; color:#A9B3C0; max-width:520px; }
.zh-sub ul{ margin-top:22px; display:grid; gap:10px; }
.zh-sub li{ position:relative; padding-left:30px; font-size:15.5px; color:#D5DCE5; }
.zh-sub li::before{ content:''; position:absolute; left:0; top:6px; width:16px; height:16px; border-radius:50%; background:var(--accent); }
.zh-sub li::after{ content:''; position:absolute; left:5px; top:9px; width:4px; height:8px; border:solid #11161D; border-width:0 2px 2px 0; transform:rotate(45deg); }
.zf{ position:relative; background:#0E1319; border:1px solid var(--zh-line-d); border-radius:26px; padding:30px 28px 24px; box-shadow:0 30px 80px rgba(0,0,0,.4); color:#F1F4F7; }
.zf__tabs{ display:flex; gap:6px; padding:5px; border-radius:999px; background:rgba(255,255,255,.06); margin-bottom:20px; }
.zf__tabs button{ flex:1; height:40px; border:0; border-radius:999px; background:transparent; color:#A4AEBB; font:inherit; font-size:14.5px; font-weight:650; cursor:pointer; }
.zf__tabs button[aria-selected="true"]{ background:var(--accent); color:#11161D; }
.zf__tabs[hidden]{ display:none; }
.zf__f{ display:flex; flex-direction:column; gap:6px; }
.zf__f span{ font-size:13px; font-weight:600; color:#A4AEBB; }
.zf input[type=email]{ width:100%; height:52px; padding:0 16px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:#F1F4F7; font:inherit; font-size:16px; outline:none; }
.zf input[type=email]::placeholder{ color:#6E7886; }
.zf input[type=email]:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(180,242,60,.14); }
.zf__hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.zf__check{ position:relative; display:flex; gap:12px; align-items:flex-start; margin-top:14px; font-size:13.5px; line-height:1.45; color:#A4AEBB; cursor:pointer; }
.zf__check input{ position:absolute; opacity:0; width:22px; height:22px; margin:0; cursor:pointer; }
.zf__ic{ flex:none; width:22px; height:22px; border-radius:7px; border:1.5px solid rgba(255,255,255,.26); background:rgba(255,255,255,.05); position:relative; transition:all .15s; }
.zf__check input:checked + .zf__ic{ background:var(--accent); border-color:var(--accent); }
.zf__check input:checked + .zf__ic::after{ content:''; position:absolute; left:7px; top:3px; width:5px; height:10px; border:solid #0B0E12; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
.zf__check input:focus-visible + .zf__ic{ box-shadow:0 0 0 4px rgba(180,242,60,.25); }
.zf__check.is-bad .zf__ic{ border-color:#FF6B4A; box-shadow:0 0 0 4px rgba(255,107,74,.14); }
.zf__check a, .zf__note a, .zf__login a{ color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(180,242,60,.4); }
.zf__err{ margin:14px 0 0; padding:12px 14px; border-radius:12px; background:rgba(255,107,74,.12); border:1px solid rgba(255,107,74,.4); color:#FFD2C7; font-size:14px; line-height:1.45; }
.zf__err[hidden]{ display:none; }
.zf__submit{ margin-top:18px; width:100%; height:54px; border:0; border-radius:999px; background:var(--accent); color:#11161D; font:inherit; font-size:16px; font-weight:750; cursor:pointer; transition:transform .15s, box-shadow .15s; }
.zf__submit:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(180,242,60,.35); }
.zf__submit[disabled]{ opacity:.6; cursor:default; transform:none; box-shadow:none; }
.zf__note{ margin-top:14px; font-size:13px; line-height:1.5; color:#7E8896; }
.zf__login{ margin-top:16px; text-align:center; font-size:14px; color:#A4AEBB; }
.zf__login button{ background:none; border:0; padding:0; font:inherit; color:var(--accent); cursor:pointer; border-bottom:1px solid rgba(180,242,60,.4); }
.zf__panel[hidden], .zf__ok[hidden], .zf__loginbox[hidden]{ display:none; }
.zf__loginbox{ margin-top:16px; padding-top:18px; border-top:1px solid var(--zh-line-d); }
.zf__loginbox .zf__submit{ height:48px; font-size:15px; }
.zf__ok{ text-align:center; padding:6px 0 4px; }
.zf__ok svg{ width:54px; height:54px; padding:13px; border-radius:50%; background:var(--accent); color:#11161D; }
.zf__ok h3{ margin-top:16px; font-family:'Unbounded','Inter',sans-serif; text-transform:uppercase; font-size:20px; letter-spacing:-.01em; }
.zf__ok p{ margin-top:10px; font-size:15px; line-height:1.55; color:#A4AEBB; }
.zf__ok .btns{ margin-top:20px; display:grid; gap:10px; }
.zf__ok .btn{ width:100%; }

/* ---------- прочие блоки ---------- */
.zh-aud{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.zh-trust{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:40px; align-items:start; }
.zh-trust p{ font-size:16.5px; line-height:1.65; color:var(--ink-2); }
.zh-trust a{ color:var(--ink); border-bottom:2px solid var(--accent); }
.zh-ed{ display:flex; gap:22px; align-items:center; padding:28px; border-radius:24px; background:var(--surface); border:1px solid var(--line); max-width:860px; }
.zh-ed .logo__mark{ width:64px; height:64px; border-radius:18px; font-size:24px; flex:none; }
.zh-ed p{ color:var(--ink-2); line-height:1.6; }
.zh-ed a{ color:var(--ink); border-bottom:2px solid var(--accent); }
.zh-final{ text-align:center; }
.zh-final h2{ font-size:clamp(26px,3.4vw,40px); max-width:720px; margin-inline:auto; }
.zh-final .btn{ margin-top:26px; }

/* ---------- читалка ---------- */
body.rd{ background:#0C1015; color:#EEF1F5; }
.rd-bar{ position:sticky; top:0; z-index:50; background:rgba(12,16,21,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--zh-line-d); }
.rd-bar__in{ display:flex; align-items:center; gap:14px; min-height:60px; padding-block:8px; }
.rd-logo{ font-family:'Unbounded','Inter',sans-serif; font-weight:800; font-size:15px; letter-spacing:-.01em; display:flex; align-items:center; gap:8px; white-space:nowrap; }
.rd-logo b{ background:var(--accent); color:#11161D; border-radius:6px; padding:3px 7px; font-weight:800; }
.rd-logo small{ font-family:'Inter',sans-serif; font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#8C95A3; }
.rd-cur{ margin-inline:auto; font-size:14px; color:#A4AEBB; font-variant-numeric:tabular-nums; }
.rd-bar .btn{ padding:10px 16px; font-size:14px; }
.rd-main{ padding:22px 12px 40px; max-width:960px; margin-inline:auto; }
.rp{ margin:0 auto 18px; max-width:900px; scroll-margin-top:76px; }
.rp__box{ position:relative; background:#161C24; border-radius:4px; overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.45); }
.rp__box::before{ content:attr(data-label); position:absolute; inset:0; display:grid; place-items:center; color:#56606E; font-size:15px; }
.rp__box img{ position:relative; z-index:1; display:block; width:100%; height:auto; }
.rp .zh-links a{ position:absolute; z-index:2; }
.rd-hint{ text-align:center; font-size:13.5px; color:#8C95A3; margin:6px 0 18px; }
.rd-end{ max-width:900px; margin:30px auto 0; padding:28px; border-radius:24px; background:#141A22; border:1px solid var(--zh-line-d); }
.rd-end h2{ font-family:'Unbounded','Inter',sans-serif; text-transform:uppercase; font-size:22px; letter-spacing:-.01em; }
.rd-end p{ margin-top:10px; color:#A4AEBB; line-height:1.6; }
.rd-end .btns{ margin-top:18px; display:flex; flex-wrap:wrap; gap:10px; }
.rd-gate{ max-width:560px; margin:12vh auto; padding:32px 28px; text-align:center; border-radius:26px; background:#141A22; border:1px solid var(--zh-line-d); }
.rd-gate h1{ font-family:'Unbounded','Inter',sans-serif; text-transform:uppercase; font-size:24px; letter-spacing:-.01em; }
.rd-gate p{ margin-top:12px; color:#A4AEBB; line-height:1.6; }
.rd-gate .btn{ margin-top:22px; }
.rd-toc{ position:fixed; right:0; top:0; bottom:0; z-index:80; width:min(380px,100%); background:#10151B; border-left:1px solid var(--zh-line-d); transform:translateX(100%); transition:transform .25s ease; overflow:auto; padding:70px 22px 30px; }
.rd-toc.is-open{ transform:none; }
.rd-toc h2{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#8C95A3; margin-bottom:12px; }
.rd-toc a{ display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--zh-line-d); font-size:15px; color:#E3E8EE; }
.rd-toc a:hover{ color:var(--accent); }
.rd-toc a span{ color:#8C95A3; font-variant-numeric:tabular-nums; }
.rd-toc__x{ position:absolute; right:16px; top:12px; width:44px; height:44px; border-radius:50%; border:1px solid #3A4452; background:#11161D; color:#fff; font-size:22px; cursor:pointer; }

/* ---------- страницы-состояния ---------- */
.zs{ min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--surface); }
.zs__box{ width:100%; max-width:520px; background:#fff; border:1px solid var(--line); border-radius:26px; padding:36px 30px 30px; box-shadow:var(--shadow); text-align:center; }
.zs__box h1{ font-size:clamp(24px,5vw,30px); }
.zs__box p{ margin-top:14px; color:var(--ink-2); line-height:1.6; }
.zs__box .btn{ margin-top:22px; }
.zs__box .btn+.btn{ margin-left:8px; }
.zs__small{ margin-top:22px !important; font-size:13.5px; }
.zs__small button{ background:none; border:0; padding:0; font:inherit; color:var(--ink-2); text-decoration:underline; cursor:pointer; }
.zs__ok{ color:#3C6300 !important; font-weight:650; }
.zs__bad{ color:#B3341A !important; font-weight:650; }

/* ---------- админка ---------- */
.ad{ max-width:1000px; margin:0 auto; padding:30px 20px 60px; }
.ad h1{ font-size:28px; margin-bottom:18px; }
.ad__key{ display:flex; gap:10px; margin-bottom:24px; }
.ad__key input{ flex:1; height:46px; padding:0 14px; border:1px solid var(--line-2); border-radius:12px; font:inherit; }
.ad__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:22px; }
.ad__c{ border:1px solid var(--line); border-radius:16px; padding:16px; background:#fff; }
.ad__c b{ display:block; font-size:30px; letter-spacing:-.03em; }
.ad__c span{ font-size:13px; color:var(--ink-2); }
.ad table{ width:100%; border-collapse:collapse; margin-bottom:22px; font-size:14px; }
.ad th, .ad td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); }
.ad h2{ font-size:18px; margin:18px 0 8px; }

@media (max-width:1100px){ .zh-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px){
  .zh-hero__in, .zh-sub, .zh-trust{ grid-template-columns:1fr; }
  .zh-cover{ order:-1; width:min(62%,300px); }
  .zh-aud{ grid-template-columns:1fr; }
  .zh-toc{ columns:1; }
  .ad__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .zh-cards{ grid-template-columns:1fr; }
  .zf{ padding:24px 18px 20px; border-radius:22px; }
  .zh-ed{ flex-direction:column; align-items:flex-start; }
  .rd-logo small{ display:none; }
  .rd-bar .btn--txt{ display:none; }
  .zs__box .btn+.btn{ margin:10px 0 0; }
}
@media (prefers-reduced-motion:reduce){ .zc, .zf__submit, .rd-toc{ transition:none; } }