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

:root{
  --bg:        #15110d;   /* почти чёрный, тёплый */
  --bg-2:      #1c1712;   /* сайдбар / карточки */
  --bg-3:      #241d16;   /* ховеры, code */
  --line:      #3a2f23;   /* границы */
  --ink:       #e9e0cf;   /* основной текст (пергамент) */
  --ink-dim:   #b6a98f;   /* приглушённый */
  --ink-faint: #8a7d65;   /* совсем тихий */
  --gold:      #c9a85c;   /* бронза/золото — акцент */
  --gold-hi:   #e4c987;
  --rune:      #d98b4a;   /* руническая «кровь» / охра */
  --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:var(--bg); color:var(--ink);
  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{color:var(--rune); font-weight:700}

/* ── 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(21,17,13,.92); backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar__brand{flex:1; font-family:var(--serif); font-size:1.15rem; color:var(--ink); letter-spacing:.02em}
.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; font-size:1.35rem; color:var(--ink); margin:.2rem .2rem 1rem; letter-spacing:.02em}
.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}

.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}
.nav-group a[aria-current="page"]{
  color:var(--gold-hi); background:var(--bg-3); border-left-color:var(--rune);
}

/* листалка рун — выделенный первый пункт, быстрый доступ */
.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:linear-gradient(180deg,#241a0f,#1b140d);
}
.nav-featured a:hover{background:linear-gradient(180deg,#2c2012,#211910); color:#fff}
.nav-featured .brand-rune{font-size:1.15em}

/* ── 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}
.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}
.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:3px solid var(--rune);
  background:var(--bg-2); border-radius:0 8px 8px 0; color:var(--ink-dim);
}
.doc blockquote p{margin:.4rem 0}

/* code */
.doc code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.86em;
  background:var(--bg-3); padding:.1em .4em; border-radius:5px; color:var(--gold-hi);
}
.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 */
.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}
.btn{display:inline-block; padding:.7rem 1.3rem; margin:.3rem; border-radius:10px;
  background:var(--gold); color:#1a1206; font-family:var(--sans); font-weight:700; letter-spacing:.02em}
.btn:hover{background:var(--gold-hi); text-decoration:none; color:#1a1206}
.btn--ghost{background:transparent; color:var(--gold); border:1px solid var(--gold)}
.btn--ghost:hover{background:var(--bg-3); color:var(--gold-hi)}

/* «Как заниматься» — простой нумерованный гайд для новичка */
.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-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}

.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:block}
  .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}
  .content{padding-top:1.2rem}
  .pager{flex-direction:column}
  .pager a{max-width:none}
}