/* Общие стили статей блога Shpagin AI — подключается во всех файлах /blog/*.html */
:root{
  --cream:#F1F0EA;
  --cream-2:#E8E7DF;
  --ink:#0B0B0C;
  --muted:#6A6A66;
  --blue:#1D2BFF;
  --lime:#C8F135;
  --g-blue:linear-gradient(135deg,#0A14C8 0%,#1D2BFF 45%,#4A5CFF 100%);
  --r:24px;
  --max:820px;
}
*{box-sizing:border-box;min-width:0;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Archivo',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:var(--blue);text-decoration:none;}
img{display:block;max-width:100%;}
::selection{background:var(--lime);color:var(--ink);}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}

/* NAV */
.nav{position:sticky;top:0;z-index:80;background:rgba(241,240,234,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(11,11,12,.08);}
.nav-inner{max-width:1240px;margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:18px;}
.logo{font-weight:900;font-size:19px;letter-spacing:-0.04em;color:var(--ink);white-space:nowrap;}
.nav-right{display:flex;align-items:center;gap:10px;}
.nav-ghost{font-size:13px;font-weight:700;color:var(--ink);padding:10px 16px;border-radius:999px;transition:.18s;white-space:nowrap;}
.nav-ghost:hover{background:var(--ink);color:var(--cream);}
.nav-cta{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap;background:var(--lime);border:1.5px solid var(--ink);transition:transform .18s,background .18s;}
.nav-cta:hover{transform:translateY(-1px);background:#fff;}
@media(max-width:560px){
  .nav-inner{gap:10px;}
  .nav-ghost{padding:10px 12px;}
  .nav-ghost.cat{display:none;} /* «Все статьи» на телефоне дублируется крошкой под шапкой */
}
@media(max-width:340px){.nav-ghost.home{display:none;}}

/* ARTICLE HEAD */
.art-head{padding:56px 0 12px;}
.crumb{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:28px;transition:.15s;}
.crumb:hover{color:var(--blue);}
.art-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:20px;}
.art-tag{color:var(--blue);}
.art-date{color:var(--muted);letter-spacing:.06em;}
.art-dot{width:4px;height:4px;border-radius:50%;background:var(--muted);opacity:.5;}
h1{margin:0 0 20px;font-weight:900;letter-spacing:-0.04em;line-height:1.02;font-size:clamp(32px,6vw,58px);}
.lead{font-size:clamp(17px,2.4vw,21px);font-weight:600;line-height:1.5;color:var(--muted);letter-spacing:-0.01em;max-width:700px;}

/* COVER */
.art-cover{margin-top:34px;border-radius:var(--r);overflow:hidden;background:var(--g-blue);aspect-ratio:16/9;}
.art-cover img{width:100%;height:100%;object-fit:cover;}

/* ARTICLE BODY */
.art-body{padding:38px 0 26px;}
.art-body h2{margin:44px 0 16px;font-weight:900;letter-spacing:-0.03em;line-height:1.12;font-size:clamp(22px,3.2vw,30px);}
.art-body h3{margin:32px 0 12px;font-weight:800;letter-spacing:-0.02em;font-size:clamp(18px,2.4vw,22px);}
.art-body p{margin:0 0 16px;font-size:17px;line-height:1.75;font-weight:500;}
.art-body ul,.art-body ol{margin:0 0 18px;padding-left:24px;}
.art-body li{font-size:17px;line-height:1.7;font-weight:500;margin-bottom:8px;}
.art-body strong{font-weight:800;}
.art-body img{border-radius:var(--r);margin:26px 0;}
.art-body blockquote{
  margin:28px 0;padding:20px 26px;border-left:4px solid var(--lime);
  background:#fff;border-radius:0 var(--r) var(--r) 0;
  font-size:17px;line-height:1.65;font-weight:600;
}
.art-body blockquote p{margin:0;}
.art-body code{background:var(--cream-2);border-radius:6px;padding:2px 7px;font-size:15px;font-family:ui-monospace,'SF Mono',Menlo,monospace;}
.tip{margin:28px 0;padding:22px 26px;border-radius:var(--r);background:var(--ink);color:var(--cream);}
.tip .tip-tag{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);margin-bottom:8px;}
.tip p{margin:0;color:rgba(241,240,234,.85);font-size:15.5px;line-height:1.65;}

/* AUTHOR / CTA */
.art-cta{margin:52px 0 0;border-radius:var(--r);background:var(--g-blue);color:#fff;padding:38px 36px;position:relative;overflow:hidden;}
.art-cta::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 60% at 90% 10%,rgba(255,255,255,.16) 0%,transparent 60%);}
.art-cta .c-tag{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);margin-bottom:12px;position:relative;z-index:1;}
.art-cta h2{margin:0 0 10px;font-weight:900;letter-spacing:-0.035em;font-size:clamp(22px,3.6vw,32px);line-height:1.08;position:relative;z-index:1;}
.art-cta p{margin:0 0 22px;color:rgba(255,255,255,.85);font-size:15.5px;line-height:1.6;font-weight:500;max-width:520px;position:relative;z-index:1;}
.art-cta .c-btns{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1;}
.c-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font-weight:800;font-size:14.5px;transition:transform .18s,background .18s;}
.c-btn.lime{background:var(--lime);color:var(--ink);}
.c-btn.lime:hover{transform:translateY(-2px);background:#fff;}
.c-btn.ghost{border:1.5px solid rgba(255,255,255,.4);color:#fff;}
.c-btn.ghost:hover{background:rgba(255,255,255,.12);}
@media(max-width:560px){.art-cta{padding:28px 22px;}}

/* PROGRESS BAR — индикатор прочитанного */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:90;background:linear-gradient(90deg,var(--blue),var(--lime));transition:width .1s linear;}

/* NAV BETWEEN POSTS */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px;}
@media(max-width:560px){.post-nav{grid-template-columns:1fr;}}
.pn{display:flex;flex-direction:column;gap:8px;padding:20px 22px;border-radius:var(--r);background:#fff;border:1.5px solid rgba(11,11,12,.1);transition:transform .18s,border-color .18s;color:var(--ink);}
.pn:hover{border-color:var(--blue);transform:translateY(-3px);}
.pn-l{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.pn-t{font-size:15.5px;font-weight:800;letter-spacing:-0.02em;line-height:1.25;}
/* у «Следующей» справа только подпись-стрелка, сам заголовок — слева, как обычный текст */
.pn.next .pn-l{text-align:right;}
@media(max-width:560px){.pn.next .pn-l{text-align:left;}}

/* RELATED */
.related{margin-top:34px;}
.related h2{margin:0 0 14px;font-weight:900;letter-spacing:-0.03em;font-size:20px;}
.rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:560px){.rel-grid{grid-template-columns:1fr;}}

/* FOOTER */
footer{background:var(--ink);color:var(--cream);border-radius:32px 32px 0 0;margin-top:64px;padding:44px 0;text-align:center;}
footer p{color:rgba(241,240,234,.5);font-size:13px;font-weight:500;margin:0;}
footer a{color:rgba(241,240,234,.85);text-decoration:underline;}
footer a:hover{color:var(--lime);}
@media(max-width:640px){
  .wrap{padding:0 18px;}
  .nav-inner{padding:14px 18px;}
  .art-head{padding:40px 0 8px;}
}