/* Runes — руническая тёмная тема, mobile-first */

:root{
  /* Брендбук runoscript.com — premium ritual / dark wood / antique gold.
     Источник правды: .claude/skills/brandbook. Цвет кодирует трек:
     зелёный = практика, золото/латунь = академика + хром. */
  --bg:        #251a0f;   /* основной фон — тёмный шоколад / дерево */
  --bg-2:      #322415;   /* сайдбар / карточки */
  --bg-3:      #3f2f1c;   /* ховеры, pre */
  --bg-active: #4a3820;   /* фон активного пункта меню */
  --line:      #523c22;   /* границы */
  --ink:       #efe6d3;   /* основной текст (пергамент) */
  --ink-dim:   #d9cbb6;   /* вводный / приглушённый */
  --ink-faint: #9c8a68;   /* совсем тихий */
  --gold:      #e7c46e;   /* золото — ссылки, h2/h3 */
  --gold-hi:   #ffe0a3;   /* H1, активный текст, hover */
  --gold-line: #caa86a;   /* тонкая линия активного пункта (академика) */
  --brass-bg:     #4a3420; /* латунь — фон бейджа / inline-code */
  --brass-border: #5a3e24;
  --brass-text:   #f1d38a;
  --rune:      #cf8a45;   /* охра — глиф логотипа / рунические знаки */
  --accent:        #4ba585; /* зелёный — CTA, активная палочка практики */
  --accent-hi:     #5cb491; /* hover кнопок */
  --accent-text:   #06281d; /* текст на зелёной кнопке */
  --accent-line:   #5e9783; /* линия цитаты-практики */
  --accent-eyebrow:#7fb29c;
  --accent-badge-bg:     #243d34;
  --accent-badge-border: #356b59;
  --accent-badge-text:   #8fc9b0;
  --sel:       #3b2f1c;
  --maxw:      46rem;
  --sbw:       19rem;     /* ширина сайдбара */
  --serif:     "Iowan Old Style","Palatino Linotype",Palatino,"Hoefler Text",Georgia,"Times New Roman",serif;
  --sans:      -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background-color:var(--bg); color:var(--ink);
  /* слабая бумажная фактура (~4%) + еле заметный тёплый виньет;
     без явных градиентов/глянца — см. брендбук §4 «материальность».
     Фактура запечена в статический тайл (_meta/tools/gen_paper_noise.py):
     живой feTurbulence + blend + attachment:fixed дорого растеризовались на
     первом кадре и били по LCP на слабом мобайле. Тайл декодится дёшево,
     не блокирует рендер текста; overlay сохраняет прежний вид. */
  background-image:
    url("/assets/paper-noise.png"),
    radial-gradient(135% 100% at 86% -14%, rgba(255,196,110,.10), rgba(37,26,15,0) 60%);
  background-repeat:repeat, no-repeat;
  background-blend-mode:overlay, normal;
  font-family:var(--serif); font-size:18px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--sel); color:var(--gold-hi)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:var(--gold);color:#000;padding:.5rem 1rem;z-index:100;border-radius:6px}

a{color:var(--gold); text-decoration:none}
a:hover{color:var(--gold-hi); text-decoration:underline; text-underline-offset:3px}
.broken-link{color:var(--ink-faint); border-bottom:1px dotted var(--ink-faint); cursor:help}

/* .brand-rune теперь инлайн-SVG каноничного глифа (stroke=currentColor наследует --rune);
   голый Unicode в serif давал закруглённые «руки». */
.brand-rune{color:var(--rune); display:inline-block; height:1em; width:auto; vertical-align:-.15em}

/* .brand-seal — бренд-печать (руна в золотом кольце); один знак на шапку/сайдбар/фавиконку.
   Цвета зашиты в SVG (не наследует currentColor) — печать стабильна, не «мигает» на hover. */
.brand-seal{flex:none; display:inline-block; height:1.55em; width:1.55em; vertical-align:-.42em}
.brand-word{font-family:var(--serif); letter-spacing:.02em}

/* ── Topbar (мобильный) ───────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:.75rem;
  padding:.55rem .9rem; padding-top:calc(.55rem + env(safe-area-inset-top));
  background:rgba(37,26,15,.92); backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar__brand{flex:1; display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--serif); font-size:1.15rem; color:var(--ink); letter-spacing:.02em}
.topbar__brand .brand-rune{height:1.05em; vertical-align:0}
.topbar__brand:hover{text-decoration:none; color:var(--gold-hi)}
.topbar__menu,.topbar__search{
  background:none; border:1px solid var(--line); color:var(--gold);
  font-size:1.2rem; line-height:1; width:2.3rem; height:2.3rem; border-radius:8px;
  cursor:pointer;
}
.topbar__menu:active,.topbar__search:active{background:var(--bg-3)}

/* ── Sidebar ──────────────────────────────────────────────────────── */
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sbw); z-index:40;
  background:var(--bg-2); border-right:1px solid var(--line);
  overflow-y:auto; overscroll-behavior:contain;
  padding:1.1rem 1rem 2rem; transform:translateX(-100%);
  transition:transform .22s ease;
  -webkit-overflow-scrolling:touch;
}
.sidebar.open{transform:none}
.sidebar__brand{display:none; align-items:center; gap:.55rem; font-size:1.35rem; color:var(--ink); margin:.2rem .2rem 1rem; letter-spacing:.02em}
.sidebar__brand .brand-rune{height:1.05em; vertical-align:0}
.sidebar__brand:hover{text-decoration:none}
.sidebar__foot{margin-top:1.6rem; padding-top:1rem; border-top:1px solid var(--line);
  color:var(--ink-faint); font-size:.78rem; line-height:1.5; font-style:italic}
.sidebar__legal{margin-top:.6rem; font-style:normal}
.sidebar__legal a{color:var(--ink-faint)}
.sidebar__legal a:hover{color:var(--gold)}
.sidebar__contact{margin-top:.35rem; font-style:normal}
.sidebar__contact a{color:var(--ink-faint)}
.sidebar__contact a:hover{color:var(--gold)}

.overlay{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:35}

.nav-group{margin:0 0 1.1rem}
.nav-group__title{
  font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--gold); margin:0 0 .45rem .15rem;
}
.nav-group--kb .nav-group__title{color:var(--ink-faint)}
.nav-divider{font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold); margin:1.4rem 0 .7rem; padding-top:1rem;
  border-top:1px solid var(--line)}
.nav-divider span{display:block; font-weight:400; font-size:.92em; letter-spacing:0;
  text-transform:none; color:var(--ink-faint); margin-top:.15rem}
.nav-group ul{list-style:none; margin:0; padding:0}
.nav-group li{margin:0}
.nav-group a{
  display:block; color:var(--ink-dim); font-size:.92rem; line-height:1.35;
  padding:.32rem .5rem; border-radius:7px; border-left:2px solid transparent;
}
.nav-group a:hover{background:var(--bg-3); color:var(--ink); text-decoration:none}
/* активный пункт: цвет палочки кодирует трек (брендбук §2).
   по умолчанию практический трек → зелёная; KB-группа → золотая. */
.nav-group a[aria-current="page"]{
  color:var(--gold-hi); background:var(--bg-active); border-left-color:var(--accent);
}
.nav-group--kb a[aria-current="page"]{ border-left-color:var(--gold-line); }

/* листалка рун — выделенный первый пункт, быстрый доступ */
.nav-featured{margin:0 0 1.1rem}
.nav-featured a{
  display:flex; align-items:center; gap:.5rem; font-family:var(--serif);
  font-size:1rem; color:var(--gold-hi); text-decoration:none;
  padding:.5rem .7rem; border:1px solid var(--gold); border-radius:9px;
  background:var(--bg-3);
}
.nav-featured a:hover{background:var(--bg-active); color:var(--gold-hi)}
.nav-featured .brand-rune{font-size:1.15em}
/* Лёгкие ссылки под флагманами (FAQ, хаб книг) — текст, не карточки: не размывают фокус */
.nav-quicklinks{display:flex; flex-wrap:wrap; gap:.25rem .9rem; margin:-.5rem 0 1.1rem; padding:0 .2rem}
.nav-quicklinks a{font-family:var(--sans); font-size:.82rem; color:var(--gold);
  text-decoration:none; opacity:.82}
.nav-quicklinks a:hover{color:var(--gold-hi); opacity:1; text-decoration:underline}
.nav-quicklinks a[aria-current="page"]{color:#fff; opacity:1}

/* ── Search ───────────────────────────────────────────────────────── */
.search{position:relative; margin:0 0 1.2rem}
.search input{
  width:100%; padding:.55rem .7rem; font-family:var(--sans); font-size:.9rem;
  background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:9px;
}
.search input:focus{outline:none; border-color:var(--gold)}
.search__results{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:50;
  background:var(--bg-3); border:1px solid var(--line); border-radius:10px;
  max-height:60vh; overflow-y:auto; box-shadow:0 14px 40px rgba(0,0,0,.5);
}
.search__results a{
  display:block; padding:.55rem .7rem; border-bottom:1px solid var(--line); color:var(--ink);
}
.search__results a:last-child{border-bottom:none}
.search__results a:hover{background:var(--bg-2); text-decoration:none}
.sr-title{display:block; font-size:.92rem; color:var(--gold-hi)}
.sr-sec{display:block; font-family:var(--sans); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint)}
.sr-snip{display:block; font-size:.8rem; color:var(--ink-dim); margin-top:.15rem}
.sr-empty{padding:.7rem; color:var(--ink-faint); font-size:.85rem}
mark{background:var(--sel); color:var(--gold-hi); padding:0 .1em; border-radius:2px}

/* ── Content ──────────────────────────────────────────────────────── */
.content{padding:1.5rem 1.1rem 4rem}
.doc, .hero, .home-sec{max-width:var(--maxw); margin-inline:auto}

.doc__section{
  font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); margin-bottom:.4rem;
}
.doc__section a{color:var(--gold)}
.doc__section span{color:var(--ink-faint); margin:0 .2em}

.doc :is(h1,h2,h3,h4){font-family:var(--serif); line-height:1.25; color:var(--ink)}
.doc h1{font-size:1.95rem; margin:.2rem 0 1.1rem; letter-spacing:.01em; color:var(--gold-hi)}
.doc h2{font-size:1.45rem; margin:2.1rem 0 .8rem; padding-bottom:.3rem; border-bottom:1px solid var(--line); color:var(--gold-hi)}
.doc h3{font-size:1.18rem; margin:1.6rem 0 .6rem; color:var(--gold)}
.doc h4{font-size:1.02rem; margin:1.3rem 0 .5rem; color:var(--ink)}
.doc p{margin:.85rem 0; line-height:1.85}
.doc ul,.doc ol{margin:.7rem 0; padding-left:1.4rem}
.doc li{margin:.3rem 0}
.doc li::marker{color:var(--gold)}
.doc strong{color:#f1e9d8}
.doc hr{border:none; border-top:1px solid var(--line); margin:2rem 0}

/* blockquote */
.doc blockquote{
  margin:1.1rem 0; padding:.6rem 1rem; border-left:2px solid var(--gold-line);
  background:var(--bg-2); border-radius:0 5px 5px 0; color:#c9b896; font-style:italic;
}
.doc blockquote p{margin:.4rem 0}
/* трек страницы (брендбук §2): на практической — зелёная линия и зеленцой фон */
.doc--practice blockquote{ border-left-color:var(--accent-line); background:#22281f }

/* code */
.doc code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.86em;
  background:var(--brass-bg); border:1px solid var(--brass-border);
  padding:.05em .4em; border-radius:3px; color:var(--brass-text);
  /* при переносе длинного тега (practice-instruction) каждый фрагмент —
     цельная плашка, а не «разрезанная» коробка */
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
/* практические теги слоёв (practice-instruction, mechanism-evidence) — зелёные;
   остальные теги/код остаются латунными (брендбук §5) */
.doc code.tag-green{
  background:var(--accent-badge-bg); border-color:var(--accent-badge-border);
  color:var(--accent-badge-text);
}
.doc pre{
  background:var(--bg-2); border:1px solid var(--line); border-radius:10px;
  padding:1rem; overflow-x:auto; margin:1.1rem 0;
}
.doc pre code{background:none; padding:0; color:var(--ink); font-size:.85rem; line-height:1.55}

/* tables */
.doc table{border-collapse:collapse; width:100%; margin:1.2rem 0; font-size:.92rem; display:block; overflow-x:auto}
.doc th,.doc td{border:1px solid var(--line); padding:.5rem .7rem; text-align:left; vertical-align:top}
.doc th{background:var(--bg-3); color:var(--gold-hi); font-family:var(--sans); font-size:.82rem;
  letter-spacing:.03em; text-transform:uppercase}
.doc tr:nth-child(even) td{background:rgba(255,255,255,.012)}

/* task lists */
.doc ul:has(>.task-list-item){padding-left:.3rem; list-style:none}
.doc .task-list-item{list-style:none; margin:.4rem 0}
.doc .task-list-item input[type="checkbox"]{
  width:1.05em; height:1.05em; margin-right:.55em; vertical-align:-.15em;
  accent-color:var(--gold); cursor:default;
}
.doc .task-list-item input[type="checkbox"]:not(:checked){opacity:.7}
.doc .task-list-item input[type="checkbox"]:not([disabled]){cursor:pointer}
.checklist-progress{font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); margin:.7rem 0 .3rem}
.checklist-progress[data-done="1"]{color:var(--gold-hi)}
.checklist-progress[data-done="1"]::after{content:" ✓"}

/* images */
picture{display:contents}   /* <picture>-обёртка прозрачна для лэйаута: правила .art img / .embed img работают как раньше */
.doc img, figure.embed img{max-width:100%; height:auto; border-radius:10px; display:block}
figure.embed{margin:1.3rem 0; text-align:center}
figure.embed img{margin-inline:auto; border:1px solid var(--line); background:#fbf7ee}
.doc em{color:var(--ink-dim)}
/* инлайн-глиф руны (в ячейке таблицы и рядом с текстом) — светлая «плитка» */
/* у SVG руны уже своя скруглённая плитка — никакого доп. фона/рамки/паддинга */
.rune-inline{height:1.9em; width:auto; vertical-align:middle}
.doc td .rune-inline{height:3.2em; display:block; margin:0 auto}
/* колонка с глифом в таблице рун — по центру, не сжимать */
.doc td:has(.rune-inline){text-align:center; min-width:3.4em}
/* подпись-италик сразу под картинкой */
figure.embed + p em, figure.embed + p{font-size:.85rem; color:var(--ink-faint)}

/* ── Pager (prev/next) ────────────────────────────────────────────── */
.pager{display:flex; gap:1rem; justify-content:space-between; margin-top:3rem;
  padding-top:1.4rem; border-top:1px solid var(--line)}
.pager a{flex:1; max-width:48%; padding:.7rem .9rem; border:1px solid var(--line);
  border-radius:10px; background:var(--bg-2); color:var(--ink-dim)}
.pager a:hover{border-color:var(--gold); text-decoration:none; background:var(--bg-3)}
.pager__next{text-align:right}
.pager span{display:block; font-family:var(--sans); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold)}
.pager b{display:block; color:var(--ink); font-size:.95rem; margin-top:.2rem; font-weight:600}

/* ── Home ─────────────────────────────────────────────────────────── */
.hero{text-align:center; padding:1.5rem 0 1rem}
.hero__runes{display:block; width:100%; max-width:34rem; height:auto; margin:0 auto 1.2rem;
  opacity:.85}
.hero__title{font-size:3rem; margin:.2rem 0 .3rem; letter-spacing:.02em; color:var(--gold-hi)}
.hero__sub{font-size:1.15rem; color:var(--ink-dim); margin:0 0 1.4rem; font-style:italic}
.hero__contract{text-align:left; font-size:.95rem; color:var(--ink-dim);
  background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:1rem 1.2rem; margin:1.4rem 0}
.hero__contract b{color:var(--gold-hi)}
.hero__cta{margin:1.6rem 0 .5rem}
.hero__cta-note{max-width:34rem; margin:.2rem auto 0; font-size:.88rem; color:var(--ink-faint); line-height:1.5}
/* Промо-строка героя — латунь/золото (хром, не зелёный CTA), тактично. Маркер-ромб ✦ слева. */
.hero__promo{max-width:34rem; margin:1rem auto 0; padding:.5rem .9rem; font-size:.9rem;
  color:var(--brass-text); background:var(--brass-bg); border:1px solid var(--brass-border);
  border-radius:8px; line-height:1.5}
.hero__promo::before{content:"✦"; color:var(--gold-line); margin-right:.45em; opacity:.85}
/* CTA = действие = зелёный (брендбук §4). Плотная, не e-commerce.
   text-wrap:balance — на узком экране строки балансируются и стрелка «→»
   не отрывается сиротой на отдельную строку. */
.btn{display:inline-block; padding:.62rem 1.25rem; margin:.3rem; border-radius:8px;
  background:var(--accent); color:var(--accent-text); font-family:var(--sans);
  font-weight:700; letter-spacing:.015em; line-height:1.3; text-wrap:balance}
.btn:hover{background:var(--accent-hi); text-decoration:none; color:var(--accent-text)}
.btn--ghost{background:transparent; color:var(--accent); border:1px solid var(--accent)}
.btn--ghost:hover{background:var(--bg-3); color:var(--accent-hi)}

/* лендинг-hero на главной: триада-хедлайн + лид + большие CTA */
.hero--lp{padding:1rem 0 .5rem}
.hero--lp .hero__runes{max-width:30rem; margin-bottom:1.3rem}
.hero__brand{font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin:0 0 .55rem}
.hero__title--lp{font-size:2.7rem; line-height:1.12; margin:.1rem 0 .65rem; color:var(--ink); letter-spacing:0}
.hero__accent{color:var(--gold-hi)}
.hero__lede{max-width:38rem; margin:0 auto 1.6rem; font-size:1.08rem; color:var(--ink-dim); line-height:1.6}
.hero__lede i{color:var(--ink)}

/* большие точки входа в разделы */
.entries-sec{margin-top:1.8rem}
.entry-grid{display:grid; grid-template-columns:1fr; gap:.9rem; margin-top:1rem}
@media(min-width:34rem){.entry-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:62rem){.entry-grid{grid-template-columns:repeat(3,1fr)}}
.entry{display:flex; flex-direction:column; align-items:flex-start; gap:.4rem;
  padding:1.25rem 1.35rem 1.35rem; background:var(--bg-2); border:1px solid var(--line);
  border-radius:16px; color:var(--ink); text-decoration:none;
  transition:border-color .15s ease, transform .15s ease, background .15s ease}
.entry:hover{border-color:var(--gold); background:var(--bg-3); transform:translateY(-3px); text-decoration:none}
.entry__top{display:flex; align-items:center; justify-content:space-between; width:100%; margin-bottom:.45rem}
.entry__glyph{display:flex; height:2.3rem}
.entry__glyph .brand-rune{height:2.3rem; width:auto; color:var(--rune)}
.entry:hover .entry__glyph .brand-rune{color:var(--gold-hi)}
.entry__badge{font-family:var(--sans); font-size:.6rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold); border:1px solid var(--line);
  border-radius:999px; padding:.22rem .6rem; white-space:nowrap}
.entry__t{font-family:var(--serif); font-size:1.3rem; color:var(--gold-hi); line-height:1.2}
.entry__d{font-size:.92rem; color:var(--ink-dim); line-height:1.5}

/* Гальдрастав-лендинг: hero-CTA наверху (гидратируется app.js под состояние входа) */
.gd-cta{margin:1.3rem 0 2rem; padding:1.4rem 1.5rem 1.2rem; text-align:center;
  background:var(--bg-2); border:1px solid var(--accent-badge-border); border-radius:14px}
.gd-cta__btn{font-size:1.05rem; padding:.85rem 1.8rem; margin:.2rem}
.gd-cta__sub{margin:.75rem 0 0; font-size:.9rem; color:var(--ink-dim)}

/* «Как заниматься» — простой нумерованный гайд для новичка */
.howto{max-width:var(--maxw); margin:1.5rem auto; background:var(--bg-2);
  border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:12px; padding:1.1rem 1.3rem}
.howto h2{font-size:1.15rem; color:var(--gold-hi); margin:.1rem 0 .7rem}
.howto ol{margin:0; padding-left:1.3rem}
.howto li{margin:.5rem 0; color:var(--ink-dim)}
.howto li b{color:var(--ink)}

/* интро на главной — что такое руны / зачем / как мы используем */
.home-intro{margin:2rem auto 2.4rem}
.home-intro__lead{color:var(--ink-dim); font-size:1.05rem; margin:-.3rem 0 1.3rem}
.intro-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1.1rem}
.intro-cell{background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:1.05rem 1.2rem}
.intro-cell h3{font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold); margin:0 0 .55rem}
.intro-cell p{margin:0; font-size:.95rem; color:var(--ink-dim); line-height:1.6}
.intro-cell b{color:var(--ink)}

/* «Ещё на сайте» — сворачиваемый блок справочных секций (тело/база/рецензии) */
.home-more{max-width:var(--maxw); margin:2.6rem auto 0; border-top:1px solid var(--line)}
.home-more>summary{list-style:none; cursor:pointer; display:flex; align-items:center;
  font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold); padding:1.1rem .15rem}
.home-more>summary::-webkit-details-marker{display:none}
.home-more>summary::after{content:"+"; margin-left:auto; font-size:1.35rem; line-height:1; color:var(--ink-faint)}
.home-more[open]>summary{color:var(--gold-hi)}
.home-more[open]>summary::after{content:"–"}
.home-more>summary:hover{color:var(--gold-hi)}
.home-more .home-sec{margin:1.6rem auto 2.4rem}

.home-sec{margin:2.8rem auto}
.home-sec h2{font-size:1.4rem; color:var(--gold-hi); border-bottom:1px solid var(--line);
  padding-bottom:.4rem; margin-bottom:1rem}
.home-sec__hint{font-size:.85rem; font-weight:400; color:var(--ink-faint); letter-spacing:0}
.home-sec__lead{color:var(--ink-dim); margin-top:-.3rem}
.home-kb{list-style:none; padding:0}
.home-kb li{margin:.5rem 0; color:var(--ink-dim)}
.home-kb b{color:var(--ink); font-family:var(--sans); font-size:.85rem}
/* рейтинг рецензии на хабе — отдельной строкой под названием, золотом */
.home-kb .rev-rating{display:inline-block; color:var(--gold-hi); margin:.15rem 0}

.mcards{display:grid; grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); gap:.8rem}
.mcard{display:flex; align-items:center; gap:.85rem; padding:.85rem 1rem;
  background:var(--bg-2); border:1px solid var(--line); border-radius:12px; color:var(--ink)}
.mcard:hover{border-color:var(--gold); background:var(--bg-3); text-decoration:none; transform:translateY(-1px)}
.mcard__n{flex:none; width:2.1rem; height:2.1rem; border-radius:50%; display:flex;
  align-items:center; justify-content:center; background:var(--bg-3); border:1px solid var(--gold);
  color:var(--gold-hi); font-family:var(--sans); font-weight:700}
.mcard:hover .mcard__n{background:var(--gold); color:#1a1206}
.mcard__t{font-size:.95rem; line-height:1.25}

/* ── Desktop ──────────────────────────────────────────────────────── */
@media (min-width:861px){
  .topbar{display:none}
  .overlay{display:none !important}
  .sidebar{transform:none; border-right:1px solid var(--line)}
  .sidebar__brand{display:flex}
  .content{margin-left:var(--sbw); padding:3rem 3rem 5rem}
  body{font-size:18px}
}
@media (max-width:860px){
  body{font-size:17px}
  .hero__title{font-size:2.3rem}
  .hero__title--lp{font-size:2.05rem}
  .hero--lp{padding-bottom:0}
  .hero--lp .hero__runes{margin-bottom:1rem}
  .hero--lp .hero__cta{margin:1.4rem 0 .2rem}
  .hero--lp .hero__cta .btn{display:block; width:100%; margin:.5rem 0; box-sizing:border-box}
  .content{padding-top:1.2rem}
  .pager{flex-direction:column}
  .pager a{max-width:none}
}

/* ── Auth-виджет (Войти / профиль) — гидратируется app.js через /api/me ───── */
.auth{margin:.2rem .2rem 1rem; font-family:var(--sans); font-size:.92rem}
.auth__login{display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.5rem .7rem; border:1px solid var(--line); border-radius:.5rem;
  background:var(--bg-3); color:var(--ink); letter-spacing:.01em;
  transition:border-color .15s, color .15s}
.auth__login:hover{text-decoration:none; border-color:var(--gold); color:var(--gold-hi)}
.auth__g{flex:none; width:1rem; height:1rem}
.auth__user{display:flex; align-items:center; gap:.55rem}
.auth__avatar{flex:none; width:1.9rem; height:1.9rem; border-radius:50%;
  background:var(--sel); color:var(--gold-hi); display:grid; place-items:center;
  font-weight:700; font-size:.85rem; font-family:var(--sans); text-decoration:none;
  cursor:pointer; transition:background .15s, color .15s}
.auth__avatar:hover{background:var(--gold); color:var(--bg); text-decoration:none}
.auth__who{min-width:0; line-height:1.25}
.auth__name{display:block; color:var(--ink); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
.auth__logout{display:block; margin:0; padding:0; border:0; background:none;
  color:var(--ink-faint); font:inherit; font-size:.8rem; cursor:pointer}
.auth__logout:hover{color:var(--rune); text-decoration:underline}

/* ── локале-свитчер (i18n: en ↔ ru) ──────────────────────────────────────── */
.topbar__lang{
  display:inline-flex; align-items:center; height:2.3rem; padding:0 .65rem;
  border:1px solid var(--line); border-radius:8px; color:var(--gold);
  font-size:.82rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
}
.topbar__lang:hover{background:var(--bg-3); color:var(--gold-hi); text-decoration:none}
.sidebar__lang{margin:.2rem 1rem .55rem}
.sidebar__lang a{
  display:inline-flex; align-items:center; padding:.3rem .7rem;
  border:1px solid var(--line); border-radius:8px; color:var(--gold);
  font-size:.8rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
}
.sidebar__lang a:hover{background:var(--bg-3); color:var(--gold-hi); text-decoration:none}