/* articles.css — страница /articles/ (Статьи/Writeups). Самодостаточна: только токены (../brand/tokens.css).
   НЕ зависит от landing.css (та уезжает в корень при деплое → путь из /articles/ разошёлся бы dev/prod).
   Светлая/тёмная — автоматически из tokens.css (:root + prefers-color-scheme + data-theme). */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--c-bg); color:var(--c-fg);
  font-family:var(--font-sans); font-size:var(--fs-md); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a{color:inherit}
.skip{position:absolute; left:-9999px; top:0; background:var(--c-accent); color:#fff; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm)}
.skip:focus{left:var(--sp-3); top:var(--sp-3); z-index:10}

/* ===== шапка (компактная: бренд+eyebrow · тема · язык) ===== */
.site-header{position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--c-bg) 86%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--c-line)}
.site-header-inner{max-width:var(--container); margin:0 auto; padding:var(--sp-3) var(--gutter);
  display:flex; align-items:center; gap:var(--sp-3)}
.hbrand{display:inline-flex; align-items:center; gap:var(--sp-3); text-decoration:none;
  color:var(--c-fg); font-weight:var(--fw-bold); font-size:var(--fs-lg); letter-spacing:var(--ls-tight); white-space:nowrap}
.hbrand .logo-svg{width:34px; height:34px; flex:none; display:block; filter:drop-shadow(0 0 8px rgba(79,140,255,.38))}
.hbrand-stack{display:flex; flex-direction:column; align-items:flex-start; gap:2px; line-height:1.05}
.hbrand-sub{font-family:var(--font-mono); font-size:10px; font-weight:var(--fw-reg);
  letter-spacing:.2px; color:var(--c-muted-strong)}
.hzone-right{margin-left:auto; display:flex; align-items:center; gap:var(--sp-2)}
.mit{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--c-muted);
  border:1px solid var(--c-line); border-radius:var(--r-pill); padding:2px var(--sp-2)}
.theme-toggle{display:none; width:34px; height:34px; align-items:center; justify-content:center; cursor:pointer;
  background:transparent; color:var(--c-muted); border:1px solid var(--c-line); border-radius:var(--r-md)}
.js .theme-toggle{display:inline-flex}
.theme-toggle:hover{color:var(--c-fg); border-color:var(--c-accent)}
.langs{display:inline-flex; gap:2px; font-family:var(--font-mono); font-size:var(--fs-xs)}
.langs .lang{text-decoration:none; color:var(--c-muted); padding:4px var(--sp-2); border-radius:var(--r-sm)}
.langs .lang[aria-current="page"]{color:var(--c-fg); background:var(--c-surface)}
.langs .lang:hover{color:var(--c-fg)}

/* ===== контент ===== */
.wrap{max-width:var(--container); margin:0 auto; padding:var(--sp-8) var(--gutter)}
.page-head{max-width:66ch; margin-bottom:var(--sp-8)}
.eyebrow{display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--font-mono);
  font-size:var(--fs-xs); color:var(--c-accent-2); text-transform:uppercase; letter-spacing:.8px}
.page-head h1{font-size:clamp(28px, 5vw, 44px); line-height:1.1; letter-spacing:var(--ls-tight); margin:var(--sp-3) 0 var(--sp-3)}
.page-head .lead{color:var(--c-muted); font-size:var(--fs-lg); margin:0}

.art-list{list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-4);
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr))}
.art-item{position:relative; background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:var(--r-lg); padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2)}
.art-item--soon{opacity:.92}
.art-tag{align-self:flex-start; font-family:var(--font-mono); font-size:var(--fs-xs);
  color:var(--c-accent-2); border:1px solid var(--c-line-strong); border-radius:var(--r-pill);
  padding:2px var(--sp-2); text-transform:uppercase; letter-spacing:.6px}
.art-item h2{font-size:var(--fs-lg); line-height:1.25; margin:var(--sp-1) 0 0; letter-spacing:var(--ls-tight)}
.art-item p{color:var(--c-muted); margin:0}

/* ===== карточка-ссылка (реальная статья) ===== */
a.art-item{text-decoration:none; color:inherit; transition:border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease)}
a.art-item:hover{border-color:var(--c-accent); transform:translateY(-2px)}
a.art-item .art-go{margin-top:auto; padding-top:var(--sp-2); font-family:var(--font-mono);
  font-size:var(--fs-xs); color:var(--c-accent-2)}
.art-tag--live{color:var(--c-accent); border-color:var(--c-accent)}

/* ===== длинный текст статьи (prose) ===== */
.article{max-width:70ch; margin:0 auto}
.breadcrumb{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--c-muted); margin-bottom:var(--sp-5)}
.breadcrumb a{color:var(--c-accent-2); text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.article h1{font-size:clamp(26px, 4.5vw, 40px); line-height:1.15; letter-spacing:var(--ls-tight); margin:0 0 var(--sp-3)}
.article .meta{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--c-muted); margin-bottom:var(--sp-6);
  display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center}
.article .meta .chip{border:1px solid var(--c-line); border-radius:var(--r-pill); padding:2px var(--sp-2)}
.article p{font-size:var(--fs-md); line-height:1.7; margin:0 0 var(--sp-4); color:var(--c-fg)}
.article p.lead{font-size:var(--fs-lg); color:var(--c-muted)}
.article a{color:var(--c-accent); text-decoration:underline; text-underline-offset:2px}
.article a:hover{color:var(--c-accent-2)}
.article .cta-row{margin:var(--sp-6) 0 0}
.gh-btn{display:inline-flex; align-items:center; gap:var(--sp-2); text-decoration:none !important;
  font-weight:var(--fw-bold); color:#fff !important; background:var(--c-accent);
  padding:var(--sp-3) var(--sp-5); border-radius:var(--r-md); transition:filter var(--dur-fast) var(--ease)}
.gh-btn:hover{filter:brightness(1.08)}

/* ===== подвал ===== */
.art-footer{border-top:1px solid var(--c-line); margin-top:var(--sp-8)}
.art-footer-inner{max-width:var(--container); margin:0 auto; padding:var(--sp-6) var(--gutter);
  display:flex; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; align-items:center;
  font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--c-muted)}
.art-footer-inner a{color:var(--c-muted); text-decoration:underline; text-underline-offset:2px}
.art-footer-inner a:hover{color:var(--c-fg)}
.art-back{text-decoration:none !important; color:var(--c-accent-2) !important}

@media (max-width:480px){
  .wrap{padding:var(--sp-6) var(--gutter)}
  .hbrand{font-size:var(--fs-md)}
  .mit{display:none}
}