*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(70% 50% at 70% 0%,rgba(255,140,50,.09),transparent 60%),radial-gradient(60% 40% at 20% 100%,rgba(255,170,60,.05),transparent 60%)}
a{color:var(--gold);text-decoration:none}a:hover{color:var(--gold-hi)}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.num{font-variant-numeric:tabular-nums}
.gold{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.04em;-webkit-text-stroke:.5px #2a1500;background:linear-gradient(180deg,#fff0b8 0%,#ffd254 40%,#f8b700 58%,#a8600a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.8)) drop-shadow(0 0 18px rgba(240,194,90,.2))}
.ico svg{width:100%;height:100%;display:block}
.orn{display:flex;align-items:center;gap:16px;justify-content:center;color:var(--gold-line)}
.orn:before,.orn:after{content:"";flex:1;max-width:260px;height:2px;background:linear-gradient(90deg,transparent,var(--gold-line) 60%,var(--gold))}
.orn:after{background:linear-gradient(90deg,var(--gold),var(--gold-line) 40%,transparent)}
.orn svg{width:120px;height:22px;flex:none}
/* buttons: panel family */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 24px;font-family:var(--disp);font-weight:700;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;color:#ffd100;background:linear-gradient(180deg,#a83a1c,#6a1400 55%,#4a0c00);border:1px solid #f8b700;border-radius:var(--r-inset);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 -3px 0 rgba(0,0,0,.5) inset,0 0 0 1px #2a0800,0 6px 14px rgba(0,0,0,.7);text-shadow:0 1px 0 #000;cursor:pointer;transition:filter .15s,transform .1s}
.btn:hover{filter:brightness(1.25);color:#ffd100}
.btn:active{box-shadow:0 3px 0 rgba(0,0,0,.6) inset,0 0 0 1px #2a0800;transform:translateY(1px)}
.btn.ghost{background:linear-gradient(180deg,#2b2623,#120d0b);color:#ebdec2;border-color:#7a5416}
.btn.sm{height:38px;padding:0 16px;font-size:12px}
/* shell */
.app{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);min-height:100dvh}
.side{position:sticky;top:0;height:100vh;height:100dvh;z-index:5;width:272px}
.app[data-collapsed="1"] .side{width:96px}
.app[data-collapsed="1"] .side .lbl{display:none}
/* язычок сворачивания: стоит у кромки панели, панель (z-index:5) накрывает его левую
   половину — снаружи торчат 14px, поэтому стрелка сдвинута в видимую часть */
.collapse{position:fixed;left:calc(var(--side) - 14px);bottom:18px;width:28px;height:44px;padding:0 0 0 14px;border:1px solid var(--gold-line);background:linear-gradient(180deg,#5c4626,#2a1e10);color:var(--gold-hi);cursor:pointer;display:grid;place-items:center;box-shadow:0 0 0 1px #000,0 4px 10px rgba(0,0,0,.7),0 0 12px rgba(248,183,0,.25) inset;z-index:4;border-radius:0 4px 4px 0;transition:filter .15s}
.collapse:hover{filter:brightness(1.3)}
.app[data-collapsed="1"] .collapse{left:82px}
.collapse svg{width:14px;height:14px;transition:transform .2s}
.app[data-collapsed="1"] .collapse svg{transform:rotate(180deg)}
/* C · rail: железная панель фиксированной ширины (272px, свёрнутая 96px), герб + FOREVER, пластины-руны с рисованными иконками,
   листки .notice у разделов с подпунктами, кнопка-свиток .toggle (листок — всплывающее окно справа), внизу Telegram и язык (.langwrap + .langpop) */
.rail{padding:0 0 16px;align-items:stretch;background:url(/kit/tex/wood.webp) center/900px;box-shadow:0 0 0 1px #0a0704 inset,-2px 0 0 #c98f1a inset,0 0 40px rgba(0,0,0,.6) inset,14px 0 40px rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:center;gap:6px}
/* .side уже sticky — это и есть позиционирование для слоя затемнения; relative тут ломало прилипание панели */
.rail:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.42));pointer-events:none}
.rail>*{position:relative}
.app[data-collapsed="0"] .rail{align-items:stretch}
/* блок герба — ровно --top, как .topbar: нижние кромки совпадают */
.rail .brand{position:relative;display:flex;align-items:center;justify-content:center;flex:none;height:72px;box-sizing:border-box;border-radius:var(--r-inset);overflow:hidden;margin:14px 12px 4px;padding:0 12px;color:var(--ink);background:url(/kit/tex/iron.webp) center/420px;border:1px solid #0a0704;box-shadow:0 0 0 1px rgba(201,143,26,.55) inset,0 0 0 3px #0a0704 inset,0 0 24px rgba(0,0,0,.6) inset,0 6px 14px rgba(0,0,0,.7)}
.rail .brand:before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(0,0,0,.45)}
.rail .search{margin:4px 12px 6px;flex:none;width:auto}/* Знамя вплотную к первому разделу: gap панели гасится отрицательным полем. */
/* знамя нарисовано 1:1 под шапку: ни масштаба, ни css-фильтров, иначе мылится */
.rail .brand .mark{position:relative;width:224px;height:auto;flex:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.9)) drop-shadow(0 0 10px rgba(255,200,90,.25))}
.rail .brand .crest{position:relative;display:none;width:44px;height:44px;flex:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.8))}
.app[data-collapsed="1"] .rail .brand .crest{display:block}
/* Свёрнутая панель: табличка лого — квадрат в размер плиток разделов, герб как их иконки. */
.app[data-collapsed="1"] .rail .brand{width:56px;height:56px;padding:0;margin:14px auto 4px;justify-content:center}
.app[data-collapsed="1"] .rail .brand .crest{width:40px;height:40px}
.rail nav{display:flex;flex-direction:column;gap:4px;align-items:stretch;padding:0 12px;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.rail nav::-webkit-scrollbar{display:none}
/* список переполняет панель — прокручивается, края уходят в прозрачность; маску ставит kit.js
   только там, где есть что прокручивать (data-fade=top|bottom|both) */
.rail nav[data-fade="bottom"]{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 44px),transparent)}
.rail nav[data-fade="top"]{-webkit-mask-image:linear-gradient(180deg,transparent,#000 44px);mask-image:linear-gradient(180deg,transparent,#000 44px)}
.rail nav[data-fade="both"]{-webkit-mask-image:linear-gradient(180deg,transparent,#000 44px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(180deg,transparent,#000 44px,#000 calc(100% - 44px),transparent)}
.rail nav .rune-wrap:last-child{margin-bottom:6px}
.app[data-collapsed="1"] .rail nav{padding:0;align-items:center}
.rune-wrap{position:relative;display:block}
.rune{position:relative;display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:6px 10px 6px 7px;color:var(--ink);cursor:pointer;background:linear-gradient(180deg,rgba(35,24,15,.75),rgba(12,8,5,.82));border:1px solid rgba(201,143,26,.28);border-radius:var(--r-inset);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 2px 6px rgba(0,0,0,.5);transition:border-color .2s,box-shadow .2s,background .2s}
.rune:hover{border-color:rgba(255,210,84,.6);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 2px 6px rgba(0,0,0,.5),0 0 16px rgba(236,194,106,.2)}
.rune.on{background:linear-gradient(180deg,#ffd254,#f8b700 60%,#c98a10);color:#1a1005;border-color:#6b4a00;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 6px 14px rgba(0,0,0,.5)}
.app[data-collapsed="1"] .rune{padding:6px;width:60px;margin:0 auto;justify-content:center}
.rune .slot{display:grid;place-items:center;flex:none;width:42px;height:42px;padding:0;overflow:hidden;background:#0d0a08;border:1px solid #c98f1a;border-radius:var(--r-inset);box-shadow:0 0 0 1px #0a0603,0 2px 4px rgba(0,0,0,.8);transition:border-color .2s,box-shadow .2s}
.rune .slot img{width:100%;height:100%;display:block;object-fit:cover}
.rune:hover .slot{border-color:#ffd254}
.rune.on .slot{border-color:#3a2a08;box-shadow:0 0 0 1px #0a0603,0 2px 4px rgba(0,0,0,.6)}
.rune.on .slot img{filter:brightness(1.08)}
.rune .lbl b{display:block;font-family:var(--disp);font-weight:700;font-size:13.5px;letter-spacing:.02em;color:#f2e4c6;text-shadow:0 1px 0 #000;white-space:nowrap}
.rune .lbl em{display:block;font-style:normal;font-size:11.5px;color:#cdb792;text-shadow:0 1px 0 #000;white-space:nowrap}
.rune.on .lbl b{color:#1a1005;text-shadow:none}
.rune.on .lbl em{color:#4a3208;text-shadow:none}
/* переключатель листка: латунная кнопка-«свиток» 30×30 справа на пластине; закрыт — тёмная латунь, открыт — золотая заливка и свечение */
.rune .toggle{margin-left:auto;width:26px;height:26px;flex:none;display:grid;place-items:center;color:var(--gold);background:none;border:0;cursor:pointer;transition:transform .25s,color .2s}
.rune .toggle svg{width:16px;height:16px}
.rune .toggle:hover{color:#ffe9a8}
.rune[aria-expanded="true"] .toggle{transform:rotate(90deg)}
.rune.on .toggle{color:#1a1005}
.rune .tip{position:absolute;left:68px;top:50%;transform:translateY(-50%);white-space:nowrap;padding:6px 10px;background:rgba(8,6,5,.95);border:1px solid #6b5a3e;box-shadow:0 0 0 1px #000 inset;font-family:var(--caps);font-size:14px;color:#ffd100;opacity:0;pointer-events:none;transition:opacity .15s;z-index:7}
.rune:hover .tip{opacity:1}
.app[data-collapsed="0"] .rune .tip{display:none}
.app[data-collapsed="1"] .rune[aria-expanded="true"] .tip{display:none}
/* листок раздела: пергамент на латунных кнопках — всплывающее окно справа от пластины (одинаково в обоих режимах панели),
   высоту панели не меняет; первая строка .ov — «Обзор раздела»; закрывается кликом вне и Esc (kit.js) */
.notice{position:relative;margin:2px 0 6px 22px;padding:14px 12px 10px 14px;background:url(/kit/tex/parch.webp) center/640px;color:var(--parch-ink);box-shadow:0 0 0 1px #6b5230,0 0 22px rgba(90,60,20,.5) inset,0 8px 18px rgba(0,0,0,.7)}
/* в развёрнутой панели листок раздела — аккордеон: тёмные строки под рядом, без пергамента */
.app[data-collapsed="0"] .rune-wrap .notice{position:static;left:auto;top:auto;width:auto;min-width:0;margin:2px 0 4px;padding:4px 0;background:none;box-shadow:none;border-left:0;color:var(--ink2)}
.app[data-collapsed="1"] .rune-wrap .notice.cur{display:none}
@keyframes yw-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.app[data-collapsed="0"] .rune-wrap .notice:before,.app[data-collapsed="0"] .rune-wrap .notice:after{display:none}
/* Рамка есть у всех пунктов — прозрачная; у выбранного меняется только цвет. Иначе выбранный
   был на 2px выше остальных и при переходах всё ниже него прыгало (владелец 03.10). */
.app[data-collapsed="0"] .rune-wrap .notice a{color:#cdb792;font-family:var(--caps);font-size:13px;padding:6px 10px;border:1px solid transparent;gap:8px;border-radius:var(--r-inset)}
.app[data-collapsed="0"] .rune-wrap .notice a:before{content:"";width:6px;height:6px;border-radius:50%;background:#6b4a22;flex:none}
.app[data-collapsed="0"] .rune-wrap .notice a:hover{color:#fff;background:rgba(248,183,0,.08)}
.app[data-collapsed="0"] .rune-wrap .notice a.on{color:#ffd254;background:rgba(248,183,0,.1);border-color:rgba(201,143,26,.4);font-weight:400}
.app[data-collapsed="0"] .rune-wrap .notice a.on:before{background:var(--dot-on)}
.app[data-collapsed="0"] .rune-wrap .notice a.soon{color:#8a7458}
.app[data-collapsed="0"] .rune-wrap .notice a small{color:#8a7458}
.notice[hidden]{display:none}
.rune-wrap .notice{position:absolute;left:calc(100% + 10px);top:-2px;width:236px;margin:0;z-index:9}
.notice{border-radius:var(--r-inset)}
.notice a{display:flex;align-items:center;gap:8px;padding:5px 4px;font-family:var(--caps);font-size:14px;color:#3a2410;border-bottom:1px solid rgba(90,60,20,.18)}
.notice a:last-child{border-bottom:0}
.notice a:hover{color:#7a1e12}
.notice a.on{color:#7a1e12;font-weight:600}
.notice a.on:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--dot-on);box-shadow:0 1px 2px rgba(0,0,0,.5)}
/* «Обзор раздела» выделен только во всплывающем листке свёрнутой панели; в развёрнутой он —
   такой же пункт, как остальные (владелец 03.10: «все пункты — один компонент»). */
.app[data-collapsed="1"] .notice a.ov{font-weight:600;color:#3a2410;border-bottom:2px solid rgba(90,60,20,.35);margin-bottom:2px}
.app[data-collapsed="1"] .notice a.ov.on{color:#7a1e12}
.notice a.soon{color:#8a7458}
.notice a small{margin-left:auto;font-family:var(--body);font-size:11px;color:#8a7458}
/* низ: Telegram и язык в один ряд (44px); в свёрнутой панели — квадраты 48px столбиком, листок языков выезжает вправо */
.rail .bottom{margin-top:auto;flex:none;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding:0 12px}
/* низ панели — ряд квадратных кнопок-иконок; место под новые есть */
.rail .bottom .btn{width:44px;height:44px;padding:0;flex:0 0 44px}
.langwrap{position:relative}
.rail .btn.lang{position:relative}
.rail .btn.lang .code{font-family:var(--disp);font-size:13px;letter-spacing:.08em}
.langpop{position:absolute;left:0;bottom:calc(100% + 10px);min-width:170px;z-index:9;margin:0;padding:12px 12px 8px 14px}
.langpop a{font-size:15px}
.app[data-collapsed="1"] .rail .bottom{flex-direction:column;align-items:center}
.app[data-collapsed="1"] .rail .bottom .btn{width:48px;height:48px;flex:0 0 auto}
.app[data-collapsed="1"] .rail .btn.lang .code{display:none}
.app[data-collapsed="1"] .langpop{left:56px;top:auto;bottom:-4px;width:auto}
/* main */
.main{min-width:0;display:flex;flex-direction:column}
/* страница забирает остаток высоты — футер прижат к низу даже при коротком контенте */
.main>.page{flex:1 0 auto}
/* строка заголовка раздела над контентом (шапки нет): заголовок золотом, линейка, подпись */
.page-head{display:flex;align-items:center;gap:18px;padding:26px 28px 0}
.page-head h1{margin:0;flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:12px;font-family:var(--disp);font-size:clamp(22px,2vw,28px);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.page-head .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--gold-line),transparent)}
.topbar h1{margin:0;flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:9px;font-family:var(--disp);font-size:clamp(24px,2.2vw,30px);font-weight:700;color:var(--gold-hi);text-shadow:0 2px 0 #000;letter-spacing:.06em;text-transform:uppercase}
/* подписи шапки — свой префикс pt-: общий .sec (центрированная секция) ловил раздел */
.page-head h1 .pt-sec,.topbar h1 .pt-sec{flex:none;white-space:nowrap}
.page-head h1 .pt-sep,.topbar h1 .pt-sep{flex:none;color:var(--gold);opacity:.8}
.page-head h1 .pt-sub{font-family:var(--body);font-size:15px;font-weight:500;letter-spacing:.01em;text-transform:none;color:var(--ink2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;padding-bottom:5px}
/* капитель Cinzel без нижних выносов сидит выше центра строки: подпись и точку поднимаем к её оптическому центру */
.page-head h1 .pt-sep{padding-bottom:5px}
.topbar h1 .pt-sub{min-width:0;font-size:15px;font-weight:600;letter-spacing:.01em;text-transform:none;color:var(--ink2);text-shadow:0 1px 0 #000;line-height:1.2;max-height:2.4em;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.search{flex:0 0 250px;display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:1px solid #3a2a18;background:rgba(10,7,4,.85);color:var(--muted);width:250px;border-radius:var(--r-inset);box-shadow:0 2px 6px rgba(0,0,0,.6) inset}
.search input{background:transparent;border:0;color:var(--ink);font:inherit;font-size:15px;width:100%;outline:none}
/* hero */
.hero{position:relative;min-height:560px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);overflow:hidden;border-bottom:3px solid #0a0704;box-shadow:0 3px 0 var(--gold-line)}
.hero .art{position:absolute;inset:0;background:url(/kit/art/hero-forge.webp) center/cover no-repeat}
.hero .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,13,11,.96) 0%,rgba(18,13,11,.82) 30%,rgba(18,13,11,.25) 62%,rgba(18,13,11,.05) 100%),linear-gradient(180deg,rgba(18,13,11,.5),transparent 25%,transparent 75%,rgba(18,13,11,.9))}
.hero .copy{position:relative;padding:64px 48px 56px;display:flex;flex-direction:column;gap:20px;justify-content:center}
.hero h2{margin:0;font-family:var(--disp);font-weight:800;font-size:clamp(28px,2.7vw,44px);line-height:1.05;letter-spacing:.02em;text-transform:uppercase;max-width:16ch}
.hero .sub{margin:0;font-family:var(--caps);font-size:14px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.hero p.lead{margin:0;font-size:18.5px;color:#e6d7b8;max-width:52ch;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px}
/* band */
/* band: компактная лента отсчёта, прилипает под шапкой (--top); на главной стоит перед хиро */
.band{position:relative;z-index:3;background:linear-gradient(180deg,#10535f,#0b3a45);border-top:2px solid var(--gold-line);border-bottom:2px solid var(--gold-line);box-shadow:0 0 0 1px #062028 inset,0 -1px 0 #ffe9a866 inset,0 12px 30px rgba(0,0,0,.55)}
.band .in{position:relative;padding:10px 28px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.band .msg{display:flex;align-items:center;gap:16px;font-family:var(--disp);font-weight:700;font-size:17px;color:#fff6dc;text-shadow:0 2px 0 rgba(0,0,0,.6)}
.band .msg small{display:block;font-family:var(--body);font-weight:500;font-size:13.5px;color:#bfe4ec}
.band .cd{margin-left:auto;display:flex;gap:20px}
.band .cd div{display:flex;flex-direction:column;align-items:center;gap:2px}
.band .cd b{font-family:var(--disp);font-weight:700;font-size:30px;line-height:1;color:#fff6dc;text-shadow:0 2px 0 rgba(0,0,0,.6)}
.band .cd span{font-family:var(--disp);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#bfe4ec}
/* content */
.wrap{padding:52px 28px 0;display:flex;flex-direction:column;gap:52px}
.sec{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.sec h2{margin:0;font-size:32px}
.sec p{margin:0;color:var(--ink2);max-width:60ch}
.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.tool{position:relative;display:flex;flex-direction:column;color:var(--ink);background:url(/kit/tex/leather.webp) left top/100% 100%;border:1px solid #0a0704;box-shadow:0 0 0 2px #c98f1a inset,0 0 0 4px #0a0704 inset,0 18px 40px rgba(0,0,0,.6);overflow:hidden;transition:transform .25s,box-shadow .25s}
.tool:hover{transform:translateY(-4px);box-shadow:0 0 0 2px #f8b700 inset,0 0 0 4px #0a0704 inset,0 26px 50px rgba(0,0,0,.7),0 0 30px rgba(248,183,0,.18)}
.tool .pic{margin:6px;height:190px;background:#000 center/cover no-repeat;border:1px solid #0a0704;box-shadow:0 0 0 1px rgba(248,183,0,.35);position:relative}
.tool .pic:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(22,15,10,.92))}
.tool .pic .lbl{position:absolute;left:14px;bottom:12px;font-family:var(--disp);font-weight:700;font-size:22px;color:#fff1c2;text-shadow:0 2px 0 #000,0 0 14px rgba(0,0,0,.8);z-index:1}
.tool .body{padding:12px 20px 20px;display:flex;flex-direction:column;gap:8px}
.tool p{margin:0;font-size:15px;color:#e0cfa9;text-shadow:0 1px 0 rgba(0,0,0,.6)}
.tool .tag{font-family:var(--caps);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi)}
.tool.wide{grid-column:span 2;flex-direction:row}
.tool.wide .pic{flex:0 0 46%;height:auto}
.tool.wide .body{justify-content:center;gap:12px}
.tool.wide h3{margin:0;font-size:26px}
.classes{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:12px}
.cl{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:13px;color:var(--ink)}
.cl .em{width:96px;height:96px;border-radius:50%;background:#000 center/cover;border:2px solid #c98f1a;box-shadow:0 0 0 2px #0a0704,0 0 0 4px rgba(248,183,0,.25),0 10px 22px rgba(0,0,0,.8);transition:transform .2s,box-shadow .2s}
.cl:hover .em{transform:scale(1.06);box-shadow:0 0 0 2px #0a0704,0 0 0 4px rgba(248,183,0,.6),0 10px 26px rgba(0,0,0,.8),0 0 26px rgba(248,183,0,.35)}
.cl b{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.03em;text-shadow:0 1px 0 #000}
.cl em{font-style:normal;color:var(--muted);font-size:12px}
.news{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:22px}
.parch{--surf-ink:var(--parch-ink);--surf-soft:#5a3a16;--surf-head:#43290f;background:url(/kit/tex/parch.webp) center/100% 100%;color:var(--surf-ink);border:1px solid #6b5230;box-shadow:0 0 0 3px #b89a63 inset,0 0 0 4px #6b5230 inset,0 0 44px rgba(90,60,20,.45) inset,0 18px 40px rgba(0,0,0,.6);padding:26px 30px}
.parch>h3{margin:0 0 10px;font-family:var(--disp);font-weight:700;font-size:22px;color:#3a2410;text-align:center;letter-spacing:.06em;text-transform:uppercase}
.nlist{display:grid;gap:18px;padding:0 28px}
.ncard{position:relative;background:url(/kit/tex/parch.webp) center/100% 100%;color:var(--parch-ink);border:1px solid #6b5230;box-shadow:0 0 0 3px #b89a63 inset,0 0 0 4px #6b5230 inset,0 0 40px rgba(90,60,20,.4) inset,0 14px 30px rgba(0,0,0,.55);padding:22px 26px 20px}
.ncard .m{display:flex;align-items:center;gap:10px;font-family:var(--caps);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#6d5a3d}
.ncard .m .seal{width:9px;height:9px;flex:none;border-radius:50%;background:radial-gradient(circle at 35% 35%,#c4452a,#7d1c0c 70%);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.ncard .m .badge{margin-left:auto;padding:2px 9px;border:1px solid #8a6a32;color:#4a3416;font-size:11px;letter-spacing:.1em}
.ncard .rule{height:2px;margin:10px 0 12px;background:linear-gradient(90deg,var(--gold-line),rgba(201,143,26,.18) 65%,transparent)}
.ncard h3{margin:0;font-family:var(--read-head);font-weight:700;font-size:23px;line-height:1.25;color:#3a2410;text-align:left;text-transform:none;letter-spacing:.01em}
.ncard h3 a{color:inherit}
.ncard h3 a:hover{color:#7d1c0c}
.ncard p{margin:0;font-size:16px;line-height:1.55;color:#3f2d19}
.ncard.withcover{display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px;align-items:start}
/* префикс nc-: .side — это боковая панель (sticky, 272px, 100dvh), .body и .foot тоже заняты */
.ncard .nc-body{min-width:0;display:flex;flex-direction:column}
.ncard .nc-body .m{margin-bottom:8px}
/* лид — три строки, дальше многоточие: карточки держат общую высоту */
.ncard .nc-body p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
/* кликабельны только заголовок и обложка — карточка целиком ссылкой не становится */
.ncard .cov{display:block;border:1px solid #6b5230;box-shadow:0 0 0 2px #b89a63 inset,0 6px 16px rgba(0,0,0,.5);overflow:hidden}
.ncard .cov img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:filter .15s}
.ncard .cov:hover img{filter:brightness(1.08)}
.art-cover{margin:0 0 18px;border:1px solid #6b5230;box-shadow:0 0 0 3px #b89a63 inset,0 10px 26px rgba(0,0,0,.55)}
/* Обложка 16:9, но не выше 440px (владелец, 03.10): на широком экране она занимала весь
   первый экран. Пока экран узкий — картинка целиком; дальше растёт только ширина, а лишнее
   срезается сверху и снизу. Что оставить — настройка статьи `cover_focus` (object-position
   в атрибуте style), по умолчанию центр. */
.art-cover img{display:block;width:100%;aspect-ratio:16/9;max-height:440px;object-fit:cover;object-position:center}
@media (max-width:820px){.nlist{padding:0 16px}.ncard.withcover{grid-template-columns:1fr}}
@media (max-width:700px){.ncard{padding:18px 16px}.ncard h3{font-size:20px}.ncard p{font-size:15px}}
.nrow{display:grid;grid-template-columns:140px minmax(0,1fr);gap:14px;padding:12px 0;border-top:1px solid rgba(90,60,20,.35)}
.nrow .m{font-size:13px;color:#6d5a3d}.nrow .m b{display:block;color:#4a3416}
.nrow .h{font-size:17px;line-height:1.35;color:#2b1c10}
.badge{display:inline-block;font-family:var(--disp);font-size:10px;letter-spacing:.14em;text-transform:uppercase;border:1px solid #8a6b3a;padding:2px 6px;margin-top:4px;color:#5a4222}
/* Тип новости. Подложка всегда пергамент, поэтому чернила тёмные — иначе повторится
   история с невидимым текстом (docs/design/materials.md). Цвет различает смысл:
   официально — зелень сукна, сообщество — нейтральная латунь, слух — тревожная охра. */
.badge.official{border-color:#3f6b46;color:#2b4a30;background:rgba(63,107,70,.09)}
.badge.community{border-color:#7a6238;color:#4a3a1e;background:rgba(122,98,56,.08)}
.badge.rumor{border-color:#9a6a2a;color:#6a4413;background:rgba(154,106,42,.12)}
.ncard .m .badge.official,.ncard .m .badge.community,.ncard .m .badge.rumor{margin-left:auto}
/* Значок в шапке статьи поверх обложки: фон там тёмный, поэтому чернила светлые.
   Это то же правило поверхностей, что спасло сноску: цвет текста задаётся вместе
   с подложкой, а не наследуется. */
.art-head .badge{margin-top:0;align-self:flex-start}
.badge.on-dark{background:rgba(0,0,0,.42);backdrop-filter:blur(2px)}
.badge.on-dark.official{border-color:#7fc08c;color:#c9f0d2}
.badge.on-dark.community{border-color:#d8bd86;color:#f0e2c4}
.badge.on-dark.rumor{border-color:#e0a95e;color:#f7dcae}
.sidecol{display:flex;flex-direction:column;gap:16px}
.frame{position:relative;background:url(/kit/tex/wood.webp) left top/900px;border:1px solid #0a0704;box-shadow:0 0 0 2px #c98f1a inset,0 0 0 4px #0a0704 inset,0 0 50px rgba(0,0,0,.6) inset,0 18px 40px rgba(0,0,0,.6);padding:22px 24px}
.frame h3{margin:0 0 10px;font-size:19px;text-align:center}
.frame .row{display:flex;justify-content:space-between;font-size:15px;color:#e0cfa9;padding:6px 0;border-top:1px solid rgba(248,183,0,.2);text-shadow:0 1px 0 #000}
.frame .row b{color:var(--gold-hi);font-family:var(--disp)}
footer{margin-top:52px;padding:24px 28px;background:url(/kit/tex/wood.webp) left top/900px;border-top:2px solid var(--gold-line);text-align:center;font-size:13.5px;color:#d9c8a6;text-shadow:0 1px 0 #000;position:relative}
footer:before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5);pointer-events:none}
footer span{position:relative}
footer p{position:relative;margin:0 auto;max-width:900px}
footer .f-about{font-size:14px;color:#e4d7bb}
footer .f-fine{margin-top:8px;font-size:12px;line-height:1.5;color:#a08c6c}
@media (max-width:1180px){.hero{grid-template-columns:1fr}.tools{grid-template-columns:repeat(2,minmax(0,1fr))}.classes{grid-template-columns:repeat(3,minmax(0,1fr))}.news{grid-template-columns:1fr}.band .cd{margin-left:0}}
@media (max-width:820px){.band{position:static}.app{grid-template-columns:1fr}.collapse{display:none!important}.rune .tip{display:none}.tools{grid-template-columns:1fr}.tool.wide{grid-column:auto;flex-direction:column}.tool.wide .pic{height:190px}.wrap{padding:36px 16px 0;gap:36px}.band .cd b{font-size:30px}.hero .copy{padding:40px 20px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== 9-slice leather & parchment ===== */
/* кожа без старой 9-slice рамки (владелец 03.10): новая фактура целиком, кромка как у окон */
/* ── Материалы. Подложек три: пергамент, железо, кожа; всё прочее — тёмный фон (.yw-inset).
   Оковка у всех одна: тёмная кромка 1px, светлая линия 1px, тёмная полоса 2px, виньетка внутрь,
   тень наружу, скругление --r-inset. Материал задаёт фактуру и цвет линии (--frame-line):
   золото у кожи и железа, бурая у пергамента. Заклёпки по углам — только у железа (.yw-studs). */
.yw-frame,.leather,.parch,.yw-leather,.yw-parch,.yw-iron{border:1px solid #0a0603;border-radius:var(--r-inset);box-shadow:0 0 0 1px var(--frame-line,#c98f1a) inset,0 0 0 3px #0a0603 inset,0 0 50px var(--frame-vig,rgba(0,0,0,.5)) inset,0 18px 40px rgba(0,0,0,.65)}
.leather,.yw-leather{--frame-line:#c98f1a;background:url(/kit/tex/leather.webp) center/640px;padding:30px}
.parch,.yw-parch{--frame-line:#6b5230;--frame-vig:rgba(90,60,20,.35);background:url(/kit/tex/parch.webp) center/100% 100%;padding:26px 30px}
.yw-iron{--frame-line:#c98f1a;--frame-vig:rgba(0,0,0,.6);position:relative;background:url(/kit/tex/iron.webp) center/420px}
/* Заклёпки рисуются одним псевдоэлементом, разметки не требуют: тень, шляпка, блик × 4 угла. */
.yw-iron:after,.yw-studs:after,.tc-trees:after,.plq:after{content:"";position:absolute;inset:5px;z-index:1;pointer-events:none;
  background:radial-gradient(circle 1.4px at 2.8px 2.5px,#fff1c4,transparent) left top/8px 8px no-repeat,radial-gradient(circle closest-side,#d6ad5c,#a3782d 55%,#5c3f14 82%,rgba(0,0,0,.7) 92%,transparent) left top/8px 8px no-repeat,
    radial-gradient(circle 1.4px at 2.8px 2.5px,#fff1c4,transparent) right top/8px 8px no-repeat,radial-gradient(circle closest-side,#d6ad5c,#a3782d 55%,#5c3f14 82%,rgba(0,0,0,.7) 92%,transparent) right top/8px 8px no-repeat,
    radial-gradient(circle 1.4px at 2.8px 2.5px,#fff1c4,transparent) left bottom/8px 8px no-repeat,radial-gradient(circle closest-side,#d6ad5c,#a3782d 55%,#5c3f14 82%,rgba(0,0,0,.7) 92%,transparent) left bottom/8px 8px no-repeat,
    radial-gradient(circle 1.4px at 2.8px 2.5px,#fff1c4,transparent) right bottom/8px 8px no-repeat,radial-gradient(circle closest-side,#d6ad5c,#a3782d 55%,#5c3f14 82%,rgba(0,0,0,.7) 92%,transparent) right bottom/8px 8px no-repeat}
/* Стойка инструментов Мастерской: железные пластины, готовые — с латунным ободом,
   будущие — с пустым гнездом и сургучной меткой «скоро». */
.ws-rack{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:18px;padding:0 24px;margin:18px 0 40px}
.ws-tool{min-height:212px;display:flex;flex-direction:column;gap:10px;padding:16px 16px 18px;color:var(--ink2);text-decoration:none;transition:box-shadow .2s}
.ws-tool:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.7));pointer-events:none}
.ws-tool>*{position:relative}
.ws-tool .slot{border-radius:var(--r-inset);display:grid;place-items:center;width:58px;height:58px;background:#0d0a08;border:2px solid #4a3d2a;box-shadow:0 0 0 1px #000,0 2px 0 rgba(255,255,255,.06) inset,0 4px 10px rgba(0,0,0,.8)}
.ws-tool .slot img{width:44px;height:44px;display:block}
.ws-tool h3{margin:0;font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-hi);text-shadow:0 2px 0 #000}
.ws-tool p{margin:0;font-size:14px;line-height:1.45;color:var(--ink2);text-shadow:0 1px 0 #000}
.ws-tool.wip{--frame-line:#4a3d2a}
.ws-tool.on:hover{--frame-line:#ffd254;box-shadow:0 0 0 1px var(--frame-line) inset,0 0 0 3px #0a0603 inset,0 0 50px var(--frame-vig) inset,0 0 18px rgba(248,183,0,.22),0 18px 40px rgba(0,0,0,.65)}
/* будущий инструмент: гнездо пустое, всё приглушено, кликать некуда */
.ws-tool.wip{cursor:default}
.ws-tool.wip h3{color:#a08c6c;text-shadow:0 1px 0 #000}
.ws-tool.wip .slot{background:#0a0806;border-color:#3a322a;box-shadow:0 0 0 1px #000,0 6px 14px rgba(0,0,0,.7) inset}
.ws-tool .wax{display:inline-flex;align-items:center;gap:7px;margin-top:auto;font-family:var(--caps);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8a7458}
.ws-tool .wax:before{content:"";width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#b8412c,#6d1f12 60%,#3a0f08);box-shadow:0 1px 2px rgba(0,0,0,.8)}
@media (max-width:820px){.ws-rack{padding:0 14px;grid-template-columns:1fr}}
/* Лента баннеров: переключение скрытыми радиокнопками, без скриптов и без
   якорей (якорь прокручивал бы всю страницу). Слайдов — до четырёх. */
.slider{position:relative;overflow:hidden}
.slider>input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.hero.slide{flex:0 0 100%;min-width:0}
.slider>input:nth-of-type(1):checked~.track{transform:translateX(0)}
.slider>input:nth-of-type(2):checked~.track{transform:translateX(-100%)}
.slider>input:nth-of-type(3):checked~.track{transform:translateX(-200%)}
.slider>input:nth-of-type(4):checked~.track{transform:translateX(-300%)}
.dots{position:absolute;left:0;right:0;bottom:12px;z-index:3;display:flex;justify-content:center;gap:9px}
.dots label{width:10px;height:10px;border-radius:50%;background:rgba(10,7,4,.75);border:1px solid var(--gold-line);box-shadow:0 1px 3px rgba(0,0,0,.8);cursor:pointer;transition:background .2s,transform .2s}
.dots label:hover{background:var(--gold);transform:scale(1.15)}
.slider>input:nth-of-type(1):checked~.dots label:nth-child(1),
.slider>input:nth-of-type(2):checked~.dots label:nth-child(2),
.slider>input:nth-of-type(3):checked~.dots label:nth-child(3),
.slider>input:nth-of-type(4):checked~.dots label:nth-child(4){background:var(--gold-hi);border-color:var(--gold-hi)}
.slider>input:focus-visible~.dots label{outline:2px solid var(--gold-hi);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.track{transition:none}}
/* Приветственная сцена главной: арт есть, но она ниже лендинговой обложки —
   первый экран делится с живым содержимым. */
.hero.welcome{min-height:340px}
.hero.welcome .copy{padding:36px 44px 32px;gap:14px;justify-content:flex-end}
.hero.welcome h2{font-size:clamp(24px,2.3vw,34px);max-width:20ch}
.hero.welcome .lead{max-width:44ch}
@media (max-width:1180px){.hero.welcome{min-height:300px}}
/* Узкая полоса вместо обложки: главная — разводящая, первый экран отдаём живому. */
.home-lead{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:22px 28px;background:url(/kit/tex/wood.webp) left top/900px;border-bottom:2px solid #0a0704;
  box-shadow:0 -1px 0 rgba(0,0,0,.8) inset,0 1px 0 rgba(255,210,84,.3),0 10px 26px rgba(0,0,0,.5)}
.home-lead .txt{min-width:0}
.home-lead .kick{font-family:var(--caps);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.home-lead h1{margin:0;font-family:var(--disp);font-weight:800;font-size:clamp(22px,2.2vw,30px);line-height:1.1;
  letter-spacing:.02em;text-transform:uppercase;color:var(--gold-hi);text-shadow:0 2px 0 #000}
@media (max-width:820px){.home-lead{padding:16px}.home-lead .btn{width:100%}}
/* ===== pages ===== */
.page{display:flex;flex-direction:column}
[hidden]{display:none!important}
.sec-inline{display:flex;align-items:center;gap:18px;padding:0 28px;margin-top:40px}
/* лид раздела: заголовок уже в шапке, тут только подпись и линейка */
.sec-lead{display:flex;align-items:center;gap:18px;padding:0 28px;margin-top:30px}
.sec-lead .note{font-size:15px;color:var(--ink2)}
.sec-lead .rule{flex:1;height:2px;background:linear-gradient(90deg,var(--gold-line),transparent)}
.sec-inline h2{margin:0;font-size:26px}
.sec-inline .rule{flex-grow:1;height:2px;background:linear-gradient(90deg,var(--gold-line),transparent)}
.sec-inline .note{font-size:14px;color:var(--muted)}
.pad{padding:28px}
/* ===== info panel (wood) ===== */
/* Инфопанель `<aside class="info-panel">` (YwInfoPanel): деревянные доски, золотой заголовок, текст с тенью —
   для пояснений, справок, «как работает», кодов и ссылок; строка кода — `.info-panel .code`, кнопки — `.btn-iron` */
.info-panel{--surf-ink:#e0cfa9;--surf-soft:#b9a583;--surf-head:#ffd254;padding:26px 24px;display:flex;flex-direction:column;gap:14px;font-size:15px;color:var(--surf-ink);background:url(/kit/tex/wood.webp) left top/900px;box-shadow:0 0 50px rgba(0,0,0,.6) inset;border:2px solid #0a0704}
.info-panel h3{margin:0;font-size:20px}
.info-panel p{margin:0;text-shadow:0 1px 0 #000}
.info-panel .code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;background:rgba(0,0,0,.55);border:1px solid #6b5a3e;padding:10px 12px;color:var(--gold-hi);word-break:break-all}
.info-panel .foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* ===== iron buttons (info panel, talent calculator toolbar) ===== */
.btn-iron{height:40px;padding:0 16px;font-family:var(--caps);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#e8d6b0;background:linear-gradient(180deg,#2b2623,#120d0b);border:1px solid #6b5a3e;cursor:pointer;box-shadow:0 0 0 1px #000 inset,0 2px 6px rgba(0,0,0,.6)}
.btn-iron:hover{color:#fff;border-color:var(--gold)}
/* ===== dungeons ===== */
.dun{display:grid;grid-template-columns:320px minmax(0,1fr);gap:26px;align-items:start;padding:0 28px}
input[type=range]{width:100%;accent-color:var(--gold-hi)}
.lvl{font-family:var(--disp);font-size:56px;font-weight:700;color:var(--gold-hi);line-height:1;text-shadow:0 0 18px rgba(248,183,0,.5)}
.dlist{display:flex;flex-direction:column;gap:8px}
.drow{display:grid;grid-template-columns:120px minmax(0,1fr) 170px 120px;gap:14px;align-items:center;padding:12px 16px;background:rgba(0,0,0,.45);border:1px solid #3d2a14;transition:border-color .25s,background .25s}
.drow .lv{font-family:var(--disp);font-size:22px;color:var(--gold-hi)}
.drow .nm{font-size:17px;color:#f3eee2}
.drow .zn{font-size:14px;color:var(--muted)}
.drow .st{font-family:var(--caps);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:right}
.drow.fit{border-color:var(--gold);background:linear-gradient(90deg,rgba(248,183,0,.16),rgba(0,0,0,.45) 50%);box-shadow:0 0 18px rgba(248,183,0,.15)}
.drow.fit .st{color:var(--gold-hi)}
.drow.done{opacity:.55}
/* ===== classes page ===== */
.classgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding:0 28px}
.classcard{display:flex;gap:18px;align-items:center;padding:18px 20px;color:var(--ink)}
.classcard .em{width:96px;height:96px;flex:none;border-radius:50%;background:#000 center/cover;border:2px solid #c98f1a;box-shadow:0 0 0 2px #0a0704,0 0 0 4px rgba(248,183,0,.25),0 10px 22px rgba(0,0,0,.8)}
.classcard h3{margin:0 0 6px;font-size:22px}
.classcard .combo{display:flex;flex-wrap:wrap;gap:6px}
.classcard .combo span{font-family:var(--caps);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border:1px solid #6b5a3e;color:var(--gold-hi);background:rgba(0,0,0,.4)}
.classcard .combo span.new{border-color:var(--gold);box-shadow:0 0 10px rgba(248,183,0,.25)}
.classcard .links{margin-top:8px;font-family:var(--caps);font-size:12px;letter-spacing:.12em;text-transform:uppercase;display:flex;gap:14px}
.classcard .links .soon{color:var(--muted)}
.wip{margin:0 28px;padding:24px 28px;max-width:760px;color:#e0cfa9}
.wip h3{margin:0 0 10px;font-size:24px}.wip ul{margin:0;padding-left:20px;font-size:16px;line-height:1.6;text-shadow:0 1px 0 #000}
.burger{display:none}
@media (max-width:1180px){.dun{grid-template-columns:1fr}.classgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.drow{grid-template-columns:70px minmax(0,1fr);row-gap:4px}.drow .zn,.drow .st{grid-column:2;text-align:left}.classgrid{grid-template-columns:minmax(0,1fr);padding:0 16px}.dun,.sec-inline,.sec-lead{padding:0 16px}.wip{margin:0 16px}.leather{padding:16px}}

/* ===== section pages ===== */
.sheet{margin:22px 28px 40px;padding:26px 30px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 28px}
.chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 6px;border:1px solid #6b5a3e;background:rgba(0,0,0,.45);color:var(--ink);font-family:var(--caps);font-size:14px;cursor:pointer}
.chip .em{width:28px;height:28px;border-radius:50%;background:#000 center/cover;border:1px solid #c98f1a}
.chip.on{border-color:var(--gold);box-shadow:0 0 12px rgba(248,183,0,.3);color:var(--gold-hi)}
.ptable{width:100%;border-collapse:collapse;font-size:16px}
.ptable th{font-family:var(--caps);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6d5a3d;text-align:left;padding:8px 6px;border-bottom:2px solid #b89a63}
.ptable td{padding:9px 6px;border-bottom:1px solid rgba(90,60,20,.25);color:#2b1c10}
.ptable td.num{font-family:var(--disp);font-weight:700;color:#7a1e12}
.chapters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px}
.chapters a{display:flex;align-items:baseline;gap:10px;padding:10px 4px;border-bottom:1px solid rgba(90,60,20,.25);color:#2b1c10;font-size:17px}
.chapters a b{font-family:var(--caps);font-weight:400}
.chapters a small{margin-left:auto;font-size:12px;color:#8a7458;font-family:var(--caps);letter-spacing:.08em;text-transform:uppercase}
.chapters a:hover{color:#7a1e12}
.rowlist{display:flex;flex-direction:column;gap:8px}
@media (max-width:820px){.sheet{margin:16px 16px 32px;padding:18px 16px}.chapters{grid-template-columns:1fr}.chips{margin:0 16px}.rune-wrap .notice{position:fixed;left:16px;right:16px;width:auto;top:auto;bottom:16px}}
/* ===== kit additions (not in site/index.html) ===== */
/* .plaque — железная табличка «подпись · значение» */
.plaque{display:flex;justify-content:space-between;gap:16px;padding:12px;background:rgba(0,0,0,.4);border:1px solid rgba(255,210,84,.25);font-size:14px;color:var(--ink2)}
.plaque b{font-family:var(--disp);color:var(--gold-hi)}

/* ===== talent calculator ===== */
/* Калькулятор талантов на кожаном верстаке (.leather.bench.calc > .tc): панель статов, три ветки
   в ряд (.tc-tree), у каждой сетка 4×7 слотов (.tc-cells) на фоне ветки (--tc-bg; при 404 остаётся
   кожа под градиентом), стрелки требований — svg.tc-arrows с viewBox 218×392 в тех же единицах,
   что --cell/--gap (44/14; мобильные 40/12.727 — масштаб пропорциональный, стрелки не расходятся).
   Подсказка .tc-tip — игровая: почти чёрная полупрозрачная, тонкий золото-коричневый обод, без радиуса. */
.bench.calc{position:relative;display:block}
/* Лента классов: крупные эмблемы в ряд, выбранная — в латунном ободе.
   Прежние «чипы» с текстом рядом с деревом читались как форма, а не как выбор героя. */
.tc-rail{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;margin:18px 0 0;padding:0 28px}
.tc-rail a{display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;padding:8px 4px 7px;text-decoration:none;border:1px solid transparent;border-radius:var(--r-inset);transition:border-color .2s,background .2s}
.tc-rail .em{width:52px;height:52px;border-radius:50%;background:#0d0a08 center/cover;border:2px solid #4a3d2a;box-shadow:0 0 0 1px #000,0 4px 10px rgba(0,0,0,.7);transition:border-color .2s,box-shadow .2s}
.tc-rail span{font-family:var(--caps);font-size:11.5px;letter-spacing:.04em;line-height:1.1;text-align:center;color:var(--muted);text-shadow:0 1px 0 #000}
.tc-rail a:hover .em{border-color:#8a6a34}
.tc-rail a:hover span{color:var(--ink2)}
.tc-rail a.on{background:rgba(0,0,0,.35);border-color:#3d3228}
.tc-rail a.on .em{border-color:var(--gold);box-shadow:0 0 0 1px #000,0 0 14px rgba(248,183,0,.35)}
.tc-rail a.on span{color:var(--gold-hi)}
/* Наследие: сетка 4×4 без стрелок, места крупнее — их всего девять на дерево. */
/* Деревья Наследия — друг под другом (а не тремя колонками, как у талантов).
   Оба класса в селекторе: правило `.tc-trees` объявлено ниже и иначе побеждает. */
.tc-trees.lg-trees{grid-template-columns:1fr}
/* Разделитель между деревьями тоже разворачивается: сверху, а не слева. */
.lg-trees .tc-tree + .tc-tree{border-left:0;border-top:1px solid rgba(10,7,4,.9);box-shadow:0 -1px 0 rgba(201,143,26,.18)}
.lg-tree{--cell:52px;--gap:16px}
/* Оба класса: `.tc-tree` объявлен ниже и иначе возвращает колонку flex'ом. */
.tc-tree.lg-tree{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:stretch}
/* Слева — лицо ветки: круглый арт, название, вложенные очки. Справа — сетка.
   Без этого блока сетка 4×4 болталась по центру широкой плиты. */
.lg-side{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px 16px;border-right:1px solid rgba(10,7,4,.9);box-shadow:1px 0 0 rgba(201,143,26,.14)}
.lg-side .em{width:104px;height:104px;border-radius:50%;background:#0d0a08 center/cover;border:2px solid #c98f1a;box-shadow:0 0 0 2px #0a0704,0 0 0 4px rgba(248,183,0,.25),0 10px 22px rgba(0,0,0,.8)}
.lg-side .nm{font-family:var(--caps);font-size:17px;letter-spacing:.06em;text-align:center;color:#f3eee2;text-shadow:0 1px 0 #000}
.lg-side .pts{font-family:var(--disp);font-size:22px;font-weight:700;color:var(--gold-hi);text-shadow:0 1px 0 #000}
/* Тот же арт фоном. Маска должна дать прочитать иконки, но не съесть картинку:
   было .76–.90 поверх и без того тёмного арта — выходил чёрный прямоугольник. */
.lg-tree .tc-grid{padding:18px 14px 20px;background:linear-gradient(180deg,rgba(10,7,4,.42),rgba(10,7,4,.72)),var(--tc-bg,none) center/cover no-repeat}
.lg-tree .tc-cells{grid-template-columns:repeat(4,var(--cell));grid-template-rows:repeat(4,var(--cell))}
.lg-tree .tc-slot{width:var(--cell);height:var(--cell);flex:none}
.lg-tree .tc-slot img{inset:3px;width:calc(100% - 6px);height:calc(100% - 6px)}
.lg-tree .tc-slot.locked{border-style:dashed;background:#0a0806}
.tc-help .src{margin-top:8px;font-size:11.5px;color:#8a7458}
@media (max-width:820px){.lg-tree{--cell:44px;--gap:12px}.tc-tree.lg-tree{grid-template-columns:1fr}.lg-side{flex-direction:row;justify-content:flex-start;gap:14px;padding:12px 14px;border-right:0;border-bottom:1px solid rgba(10,7,4,.9);box-shadow:0 1px 0 rgba(201,143,26,.14)}.lg-side .em{width:56px;height:56px}.lg-side .nm{flex:1 1 auto;text-align:left}}
/* Справка в свитке: мелкая, под кнопками. */
/* Обмен билдами в свитке: ссылка-кнопка на код Wowhead и поле вставки. */
.tc-share{display:flex;flex-direction:column;gap:8px}
.tc-share .warn{padding:7px 9px;font-size:12px;line-height:1.35;color:#f0c98a;background:rgba(120,60,10,.35);border:1px solid #7a5416;text-shadow:0 1px 0 #000}
.tc-share .lnk{padding:0;background:none;border:0;font-family:var(--caps);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-line);cursor:pointer;text-align:left;text-decoration:underline;text-underline-offset:3px}
.tc-share .lnk:hover{color:var(--gold-hi)}
.tc-share .imp{width:100%;box-sizing:border-box;height:32px;padding:0 9px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--ink);background:rgba(0,0,0,.5);border:1px solid #4a3418;outline:none}
.tc-share .imp:focus{border-color:var(--gold-line)}
.tc-share .imp::placeholder{color:#7a6a52;font-family:var(--body)}
.tc-share .err{font-size:12px;line-height:1.35;color:#e0917a;text-shadow:0 1px 0 #000}
.tc-help{margin-top:2px;padding-top:12px;border-top:1px solid rgba(248,183,0,.18)}
.tc-help .h{font-family:var(--caps);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.tc-help p{margin:0 0 6px;font-size:12.5px;line-height:1.45;color:#b9a988;text-shadow:0 1px 0 #000}
.tc-help p:last-child{margin-bottom:0}
@media (max-width:820px){.tc-rail{padding:0 16px;gap:8px}.tc-rail a{width:64px}.tc-rail .em{width:44px;height:44px}}
.chips a.chip{color:var(--ink)}
.chips a.chip:hover{color:var(--gold-hi);border-color:var(--gold)}
.tc{display:grid;grid-template-columns:minmax(0,1fr) 252px;gap:16px;align-items:start;padding:12px 14px 16px;color:#e0cfa9}
.tc-bar{grid-column:2;grid-row:1;position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--top) + 14px);display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:16px 14px;background:linear-gradient(180deg,rgba(28,20,12,.92),rgba(10,7,4,.92));border:1px solid #0a0704;box-shadow:0 0 0 2px #6b5a3e inset,0 0 0 3px #0a0704 inset,0 10px 26px rgba(0,0,0,.55)}.tc-bar .who{display:flex;align-items:center;gap:10px}.tc-bar .stats{display:flex;gap:10px}.tc-bar .stats .tc-stat{flex:1 1 0;padding-left:12px}
.tc-bar .em{width:44px;height:44px;border-radius:50%;background:#000 center/cover;border:1px solid #c98f1a;box-shadow:0 0 0 1px #0a0704;flex:none}
.tc-bar h3{margin:0;font-size:18px;line-height:1.15}
.tc-bar .sub{font-family:var(--caps);font-size:11px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.tc-stat{display:flex;flex-direction:column;line-height:1.05;padding-left:18px;border-left:1px solid rgba(248,183,0,.2)}.tc-bar .stats .tc-stat:first-child{border-left:0;padding-left:0}
.tc-stat span{font-family:var(--caps);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tc-stat b{font-family:var(--disp);font-size:24px;font-weight:700;color:var(--gold-hi);text-shadow:0 0 14px rgba(248,183,0,.45)}
.tc-bar .grow{flex:1 1 auto}
.tc-bar .btn{width:100%;height:38px;padding:0 14px;font-size:12px}.tc-bar .tc-code{max-width:none;width:100%;box-sizing:border-box;text-align:center}
.tc-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--gold-hi);background:rgba(0,0,0,.5);border:1px solid #6b5a3e;padding:5px 8px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-trees{position:relative;border-radius:var(--r-inset);grid-column:1;grid-row:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;justify-items:stretch;background:url(/kit/tex/iron.webp) top center/380px;border:1px solid #0a0704;box-shadow:0 0 0 2px #6b5a3e inset,0 0 0 3px #0a0704 inset,0 0 40px rgba(0,0,0,.75) inset,0 12px 30px rgba(0,0,0,.55)}
.tc-tree{--cell:44px;--gap:14px;width:100%;max-width:none;display:flex;flex-direction:column;background:rgba(10,7,4,.35);border:0;box-shadow:none}.tc-tree + .tc-tree{border-left:1px solid rgba(10,7,4,.9);box-shadow:-1px 0 0 rgba(201,143,26,.18)}
.tc-head{display:flex;align-items:center;gap:10px;padding:8px 10px;background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,.35));border-bottom:1px solid #4a3418}
.tc-head img{width:28px;height:28px;display:block;border:1px solid #6b5a3e;box-shadow:0 0 0 1px #000;background:#111;flex:none}
.tc-head .nm{font-family:var(--caps);font-size:15px;letter-spacing:.06em;color:#f3eee2;text-shadow:0 1px 0 #000;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-head .pts{font-family:var(--disp);font-size:18px;font-weight:700;color:var(--gold-hi);text-shadow:0 1px 0 #000}
.tc-head .tr{width:26px;height:26px;padding:0;border:1px solid #6b5a3e;background:linear-gradient(180deg,#2b2623,#120d0b);color:#a08c6c;cursor:pointer;font-size:15px;line-height:1;box-shadow:0 0 0 1px #000 inset}
.tc-head .tr:hover{color:var(--gold-hi);border-color:var(--gold)}
.tc-grid{position:relative;padding:16px 14px 18px;display:flex;justify-content:center;background:linear-gradient(180deg,rgba(10,7,4,.35),rgba(10,7,4,.82)),var(--tc-bg,none) center/cover no-repeat}
.tc-cells{position:relative;display:grid;grid-template-columns:repeat(4,var(--cell));grid-template-rows:repeat(7,var(--cell));gap:var(--gap)}
.tc-arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible;display:block}
.tc-slot{position:relative;z-index:2;width:var(--cell);height:var(--cell);padding:0;border:1px solid #5a5147;background:#0a0704;cursor:pointer;box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(255,255,255,.08),inset 0 0 0 2px rgba(0,0,0,.6);transition:border-color .15s,box-shadow .15s}
.tc-slot img{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);display:block;object-fit:cover;background:#111}
.tc-slot.can{border-color:#c98f1a}
.tc-slot.on{border-color:#c98f1a;box-shadow:0 0 0 1px #000,0 0 8px rgba(248,183,0,.25),inset 0 0 0 1px rgba(255,220,120,.25),inset 0 0 0 2px rgba(0,0,0,.6)}
.tc-slot.max{border-color:var(--gold-hi);box-shadow:0 0 0 1px #000,0 0 12px rgba(255,210,84,.45),inset 0 0 0 1px rgba(255,235,170,.4),inset 0 0 0 2px rgba(0,0,0,.6)}
.tc-slot.locked{border-color:#4a4540}
.tc-slot.locked img{filter:grayscale(1) brightness(.45)}
.tc-slot:hover{border-color:var(--gold-hi);box-shadow:0 0 0 1px #000,0 0 10px rgba(248,183,0,.4),inset 0 0 0 1px rgba(255,235,170,.35),inset 0 0 0 2px rgba(0,0,0,.6)}
.tc-slot:focus-visible{outline-offset:2px}
.tc-rk{position:absolute;right:-5px;bottom:-5px;z-index:3;min-width:18px;height:16px;padding:0 3px;font-family:var(--disp);font-size:10.5px;font-weight:700;line-height:14px;text-align:center;color:#8f8677;background:#0a0704;border:1px solid #5a5147;box-shadow:0 0 0 1px #000}
.tc-slot.on .tc-rk{color:#5cd65c;border-color:#3b6b2b}
.tc-slot.max .tc-rk{color:var(--gold-hi);border-color:#c98f1a}
.tc-hint{margin:0;font-size:13px;color:var(--muted);text-align:center;text-shadow:0 1px 0 #000}
.tc-tip{position:fixed;z-index:50;width:300px;max-width:calc(100vw - 16px);padding:8px 10px 10px;background:rgba(6,4,3,.94);border:1px solid #7a5416;box-shadow:0 0 0 1px #000,0 8px 24px rgba(0,0,0,.8);color:#f3eee2;font-size:13.5px;line-height:1.35;pointer-events:none}
.tc-tip .nm{display:block;font-family:var(--caps);font-size:16px;color:var(--gold-hi);text-shadow:0 1px 0 #000}
.tc-tip .rk{color:#cdbfa3;font-size:12.5px}
.tc-tip .req{color:#ff4a3c}
/* Пассивная / применение и откат — как в клиенте: строкой под рангом, приглушённо. */
.tc-tip .kind{color:#9a8f7c;font-size:12px}
.tc-tip p{margin:6px 0 0;color:#efe0b5}
.tc-tip .nx{margin-top:8px;font-family:var(--caps);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tc-tip .nx+p{margin-top:2px}
@media (max-width:1180px){.tc{grid-template-columns:1fr}.tc-bar{grid-column:1;grid-row:2;flex-direction:row;flex-wrap:wrap;align-items:center}.tc-bar .stats{flex:1 1 auto}.tc-bar .btn{width:auto;flex:0 0 auto}.tc-bar .tc-code{width:auto;flex:1 1 160px}.tc-trees{grid-column:1;grid-row:1}}@media (max-width:820px){.tc{padding:6px 2px 12px;gap:12px}.tc-trees{grid-template-columns:1fr}.tc-tree + .tc-tree{border-left:0;border-top:1px solid rgba(10,7,4,.9);box-shadow:0 -1px 0 rgba(201,143,26,.18)}.tc-tree{--cell:40px;--gap:12.727px;max-width:none}.tc-grid{padding:12px 8px 14px}.tc-bar{padding:8px 10px;gap:10px 16px}.tc-stat{padding-left:12px}.tc-stat b{font-size:20px}.tc-code{max-width:100%}.tc-tip{left:8px!important;right:8px;width:auto;top:auto!important;bottom:8px!important}.tc-classes{margin:14px 16px 0}}

/* Плашка про куки: доска с золотым ободом снизу экрана; прячется атрибутом hidden. */
.cookiebar{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 18px;background:linear-gradient(180deg,#221711,#170f0a);border:1px solid #6b4a22;border-top-color:#f8b700;border-radius:6px;box-shadow:0 10px 28px rgba(0,0,0,.65),0 1px 0 rgba(255,255,255,.06) inset}
.cookiebar[hidden]{display:none}
.cookiebar p{margin:0;max-width:72ch;color:#e8dcc6;font-size:14px;line-height:1.5;text-shadow:0 1px 0 #000}
.cookiebar a{color:#ffd254;text-decoration:underline}
.cookiebar-btns{display:flex;gap:10px;flex-shrink:0}
.cookiebar .btn{height:40px;padding:0 18px;font-size:12.5px}
.cookiebar .btn.sec{background:linear-gradient(180deg,#3a2b20,#241a12);border-color:#7a5a2c;color:#e8dcc6}
.cookiebar .cb-short{display:none}
@media (max-width:640px){.cookiebar{left:8px;right:8px;bottom:8px;padding:10px 12px;gap:10px}.cookiebar p{font-size:13px;line-height:1.4}.cookiebar .cb-long{display:none}.cookiebar .cb-short{display:inline}.cookiebar-btns{width:100%}.cookiebar .btn{flex:1;height:34px;padding:0 10px;font-size:11.5px}}

/* Листалка ленты: латунные пластины с номерами, текущая — подсвечена. */
.pager{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin:26px 0 8px}
.pager .btn{height:38px;padding:0 16px;font-size:12px}
.pager .pnum{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;font-family:var(--disp);font-size:14px;color:#e8dcc6;background:linear-gradient(180deg,#2a1f17,#1b130d);border:1px solid #6b4a22;border-radius:var(--r-inset);text-shadow:0 1px 0 #000}
.pager .pnum:hover{border-color:#f8b700;color:#ffd254}
.pager .pnum.on{color:#1a1005;background:linear-gradient(180deg,#ffd254,#c98a10);border-color:#f8b700;font-weight:700}
.pager .pnum.arr{font-family:var(--body);font-size:17px;line-height:1;padding:0 12px}
.pager .gap{color:#8a7a63;padding:0 2px}

/* Страница статьи: всё на одном листе пергамента — иллюстрация, заголовок, текст. */
/* Иллюстрация заподлицо: съедает поля листа и упирается во внутреннюю кромку рамки. */
.parch.sheet>.art-cover,.parch.sheet>.art-hero{margin:-26px -30px 22px;border-radius:var(--r-inset) var(--r-inset) 0 0;border:0;box-shadow:0 8px 18px rgba(60,40,10,.35)}
/* Заголовок поверх обложки: затемнение снизу, чтобы текст читался на любой картинке. */
.art-hero{position:relative}
.art-hero>.art-cover{margin:0;box-shadow:none}
.art-head.over{position:absolute;left:0;right:0;bottom:0;margin:0;padding:64px 30px 20px;text-align:left;background:linear-gradient(180deg,rgba(16,10,6,0),rgba(16,10,6,.45) 42%,rgba(16,10,6,.88))}
.art-head.over .art-title{color:#ffe7b0;text-shadow:0 2px 12px rgba(0,0,0,.9),0 1px 0 rgba(0,0,0,.8)}
.art-head.over .art-date{margin-top:8px;color:#e0c893;text-shadow:0 1px 8px rgba(0,0,0,.9)}
.parch .art-cover{margin:0 0 20px;border:0;box-shadow:none}
.art-head{margin:0 0 18px;text-align:center}
.art-title{margin:0;font-family:var(--read-head);font-weight:800;font-size:30px;line-height:1.22;color:#2a1a08;letter-spacing:.02em}
.art-date{display:inline-block;margin-top:10px;font-family:var(--caps);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#6d5a3d}
.art-head .rule{display:block;height:2px;max-width:220px;margin:14px auto 0;background:linear-gradient(90deg,transparent,#b89a63,transparent)}
@media (max-width:820px){.parch.sheet>.art-cover,.parch.sheet>.art-hero{margin:-18px -16px 16px}.art-head.over{padding:44px 16px 14px}}
@media (max-width:700px){.art-title{font-size:23px}}

/* ГЛАВНОЕ: значок «i» справа в строке даты, листок выпадает от кнопки (владелец 03.10).
   Практические выводы живут в отдельном поле документа `takeaways` — разделом «На
   практике» они стояли в 76% из 299 статей и делали ленту однообразной (02.10).
   До 03.10 это была плашка «Быстрая выжимка» после даты и окно на весь экран; теперь —
   тот же листок, что у выбора языка: пергамент от кнопки, механизм `data-pop` в kit.js. */
.art-dateline{position:relative;margin-top:10px;min-height:28px}
.art-dateline .art-date{margin-top:0;line-height:28px}
.art-head.over .art-dateline .art-date{margin-top:0}
.brief-wrap{position:absolute;right:0;top:50%;transform:translateY(-50%)}
.art-brief{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;
  font-family:Georgia,serif;font-style:italic;font-weight:700;font-size:16px;line-height:1;
  color:#f0dcae;background:linear-gradient(180deg,#53381a,#3a2510);border:1px solid #7a5a2c;border-radius:50%;
  cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,220,150,.18)}
.art-brief:hover,.art-brief[aria-expanded="true"]{color:#fff0c8;border-color:#a37c3c}
.brief-pop{position:absolute;right:0;top:calc(100% + 10px);z-index:20;margin:0;
  width:min(380px,calc(100vw - 32px));text-align:left;padding:16px 16px 12px 18px}
.brief-pop h2{margin:0 0 8px;font-family:var(--caps);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#6d4a1e;border:0;padding:0;text-align:left;background:none;text-shadow:none}
.brief-sum{margin:0 0 10px;font-size:15.5px;line-height:1.5;color:var(--parch-ink)}
.brief-sum:last-child{margin-bottom:0}
.brief-pop ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.brief-pop li{font-size:15.5px;line-height:1.45;color:var(--parch-ink)}

/* «РЕКОМЕНДУЕМ»: связанные статьи списком в конце (решение владельца 02.10 — близкие
   статьи связываем, а не склеиваем). Намеренно без обложек: это сноска в конце чтения,
   а не вторая лента, и ряд картинок перетянул бы внимание с самой статьи. */
.art-rel{margin:22px 0 0;padding-top:14px;border-top:2px solid rgba(140,105,55,.4)}
.art-rel ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.art-rel li{font-size:16px;line-height:1.45}
.art-rel a{color:#7a4a12;text-decoration:underline;text-decoration-color:rgba(122,74,18,.4)}
.art-rel a:hover{color:#a3651c;text-decoration-color:currentColor}

/* ОБНОВЛЕНИЯ статьи: что долетело по теме ПОСЛЕ её выхода (решение владельца 02.10).
   Стоит сразу под лидом, а не сноской в конце, и причина не косметическая: «люди
   прочитали, а потом оказывается там уже по-другому». Поэтому заметно, но не криком —
   сургучная полоса слева, как пометка редакции на полях, а не баннер. */
.art-upd{margin:0 0 16px;padding:10px 14px;border-left:3px solid #8c3b2a;
  background:rgba(140,59,42,.07);border-radius:0 8px 8px 0}
.art-upd h2{margin:0 0 6px;font-family:var(--caps);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#8c3b2a;border:0;padding:0;text-align:left;background:none}
.art-upd ul{margin:0;padding-left:16px}
.art-upd li{font-size:15.5px;line-height:1.5;color:#3a2410}
.art-upd li+li{margin-top:5px}

/* Предмет из нашей базы: `[имя](item:<id>)` в тексте статьи.
   Страницы карточки и тултипа пока нет, поэтому это НЕ ссылка — чтобы читатель не
   получил 404. Отличаем цветом качества (как в клиенте), чтобы разметка была видна
   и полезна уже сейчас; когда карточка появится, тот же класс станет ссылкой. */
.item{color:var(--c-gold,#c8a04a);border-bottom:1px dotted currentColor;cursor:default}

/* Микрозаголовки внутри листа: золотой градиент на пергаменте не читается — пишем чернилами.
   Золото остаётся языком камня и дерева, на бумаге его нет. */
/* ПРАВИЛО ПОВЕРХНОСТЕЙ. Краску заголовка даёт поверхность, на которой он лежит
   (`--surf-head`), а не то, внутри чего он оказался в разметке. Поэтому золотой градиент
   `.gold` гасится только на светлых листах, а на тёмной доске внутри листа он остаётся
   золотым — иначе текст сливается с деревом (ловилось трижды: ссылки, подзаголовки, врезки). */
.parch h2.gold,.parch h3.gold{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-stroke:0;filter:none;text-shadow:none;color:var(--surf-head)}
.parch h2.gold{margin:24px 0 10px;padding-bottom:6px;font-size:21px;text-align:left;border-bottom:2px solid rgba(140,105,55,.4)}
.parch h3.gold{margin:18px 0 8px;font-size:17.5px;text-align:left;color:var(--surf-soft);letter-spacing:.05em}
/* Тёмная доска внутри листа живёт по своим краскам: заголовок золотом, текст светлый. */
.parch .info-panel h3,.parch .info-panel h3.gold{color:var(--surf-head);text-align:left;text-shadow:0 1px 0 #000;border:0;padding:0;margin:0}
.parch .info-panel,.parch .info-panel p,.parch .info-panel li{color:var(--surf-ink)}
.parch .info-panel a{color:#ffd254;text-decoration:underline}

/* Подвал статьи: единственная кнопка — по центру, с воздухом от листа. */
.art-foot{display:flex;justify-content:center;margin:26px 28px 44px}
.art-foot .btn svg{width:18px;height:18px}
@media (max-width:820px){.art-foot{margin:20px 16px 36px}}

/* Сноска с первоисточниками в конце статьи: мельче основного текста, отделена чертой. */
.art-src{margin:28px 0 0;padding-top:16px;border-top:2px solid rgba(140,105,55,.45)}
.art-src h2.gold{margin:0 0 12px;padding:0;border:0;font-size:14px;letter-spacing:.16em;color:#5f4a2a}
/* Список без маркеров и по левому краю: это сноска, а не абзац текста. */
.art-src ul{margin:0;padding:0;list-style:none;color:#4a3416}
.art-src li{padding:5px 0}
/* Ссылка должна читаться ссылкой: своя краска и подчёркивание, а не цвет текста. */
.art-src a{color:#8a3f0b;font-weight:600;font-size:14.5px;line-height:1.45;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(138,63,11,.45)}
.art-src a:hover{color:#b35510;text-decoration-color:currentColor}
/* Ссылки в тексте статьи — цветом первоисточников, без подчёркивания (владелец 05.10): общий золотой цвет ссылок сайта
   рассчитан на тёмный фон и на пергаменте не читался. Блоки источников и «Рекомендуем» — отдельные
   элементы листа, правило их не задевает; ссылки на предметы (.item) — своим стилем. */
.parch.sheet>:is(p,ul,ol,blockquote,table) a:not(.item){color:#8a3f0b;font-weight:600;text-decoration:none}
.parch.sheet>:is(p,ul,ol,blockquote,table) a:not(.item):hover{color:#b35510}
/* Сайт и дата — отдельной строкой под ссылкой, чтобы не мешались в заголовке. */
.art-src .site{color:#6d5a3d;font-size:12.5px;font-family:var(--caps);letter-spacing:.04em;white-space:nowrap}

/* Мобильная панель: Telegram и язык остаются доступными. Раньше весь нижний блок панели
   прятали вместе с язычком сворачивания — на телефоне переключить язык было нечем. */
@media (max-width:820px){
  .rail .bottom{display:flex;flex-direction:row;justify-content:center;gap:8px;width:100%;margin:6px 0 0;padding:0}
  .rail .bottom .btn{height:42px;min-width:56px}
  .rail .btn.lang .code{display:inline!important}
  /* Список языков открывается вверх и по центру экрана, а не уезжает за край панели. */
  .langpop{left:50%;right:auto;transform:translateX(-50%);bottom:calc(100% + 10px);min-width:200px;max-height:60vh;overflow:auto}
  .app[data-collapsed="1"] .langpop{left:50%;top:auto;bottom:calc(100% + 10px)}
}

/* ===== окно в духе клиента (YwWindow): тёмное стекло, золотая кромка, заклёпки ===== */
.dash{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;padding:0 24px}
.win{position:relative;border-radius:var(--r-inset);background:linear-gradient(180deg,rgba(28,19,12,.92),rgba(14,10,7,.94));border:1px solid #0a0603;box-shadow:0 0 0 1px #c98f1a inset,0 0 0 3px #0a0603 inset,0 14px 30px rgba(0,0,0,.6);display:flex;flex-direction:column;min-width:0;--surf-ink:#eadcc0;--surf-soft:#9a8667;--surf-head:#ffd254;color:var(--surf-ink);transition:box-shadow .3s}
.win:hover{box-shadow:0 0 0 1px #ffd254 inset,0 0 0 3px #0a0603 inset,0 18px 36px rgba(0,0,0,.65)}
.win>header{display:flex;align-items:center;gap:12px;padding:12px 18px 10px;border-bottom:1px solid rgba(201,143,26,.3)}
.win>header img{width:32px;height:32px;object-fit:cover;border-radius:var(--r-inset);border:1px solid #c98f1a;box-shadow:0 0 0 1px #0a0603,0 2px 4px rgba(0,0,0,.8)}
.win>header h2{margin:0;font-size:15px}
.win>header .go{margin-left:auto;font-family:var(--caps);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi)}
.win>.body{padding:14px 18px 18px;display:flex;flex-direction:column;gap:12px;flex:1}
.win.parch{border:1px solid #0a0603;background:url(/kit/tex/parch.webp) center/100% 100%;--surf-ink:#2a1c10;--surf-soft:#6a4d26;--surf-head:#43290f;box-shadow:0 0 0 1px #6b5230 inset,0 0 0 3px #0a0603 inset,0 0 44px rgba(90,60,20,.35) inset,0 14px 30px rgba(0,0,0,.6);padding:0}
.win.parch>header{border-color:rgba(90,60,20,.3)}
.win.parch>header h2.gold{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-stroke:0;filter:none;color:var(--surf-head)}
.win.parch>header .go{color:#7a3a1c}
.win.leather{background:url(/kit/tex/leather.webp) center/640px}
.win.leather:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.55));pointer-events:none}
.win.leather>*{position:relative}
/* Отступы окна — у шапки и тела; поля материала (.parch/.leather) окну не нужны, иначе шапки окон из разных материалов стоят на разной высоте. */
.win.parch,.win.leather{padding:0}
/* Заголовок статьи на пергаменте (.parch h2.gold: крупный, с чертой снизу) в шапку окна не попадает. */
.win.parch>header h2.gold{margin:0;padding:0;border:0;font-size:15px;text-align:left}
.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}.c12{grid-column:span 12}
/* бирки и плитки */
.plq{position:relative;border-radius:var(--r-inset);min-width:98px;padding:8px 12px 7px;background:url(/kit/tex/iron.webp) center/420px;border:1px solid #0a0603;box-shadow:0 0 0 1px rgba(201,143,26,.4) inset,0 6px 14px rgba(0,0,0,.6);text-align:center}
.plq:before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(0,0,0,.35)}
.plq>*{position:relative}
.plq .l{display:block;font-family:var(--caps);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.plq .v{display:block;font-family:var(--disp);font-weight:800;font-size:24px;line-height:1.1;color:#f6e9cc}
.plq.live .v{color:var(--gold-hi);text-shadow:0 0 14px rgba(255,160,60,.5)}
.plaques{display:flex;gap:10px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.stat{padding:10px 8px;text-align:center;border:1px solid rgba(201,143,26,.3);background:rgba(0,0,0,.35)}
.stat b{display:block;font-family:var(--disp);font-size:22px;font-weight:800;color:var(--gold-hi);line-height:1}
.stat span{font-family:var(--caps);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* полоса горна на главной: арт справа, текст и бирки слева */
.hero-strip{position:relative;margin:22px 24px 18px;min-height:230px;border:1px solid #0a0603;box-shadow:0 0 0 1px #c98f1a inset,0 0 0 3px #0a0603 inset,0 18px 40px rgba(0,0,0,.6);overflow:hidden;display:grid;align-items:center;padding:26px 30px}
.hero-strip .art{position:absolute;inset:0;background:#000 center/cover no-repeat;background-position:70% 50%;z-index:0}
.hero-strip:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(15,11,9,.96) 28%,rgba(15,11,9,.6) 55%,rgba(15,11,9,.15))}
.hero-strip .fire{position:absolute;right:6%;top:30%;width:30%;height:60%;z-index:1;border-radius:50%;background:radial-gradient(ellipse,rgba(255,140,50,.28),transparent 65%);mix-blend-mode:screen;animation:yw-flick 2.6s ease-in-out infinite;pointer-events:none}
@keyframes yw-flick{0%,100%{opacity:.5}30%{opacity:.95}60%{opacity:.7}}
.hero-strip>.copy{position:relative;z-index:2;display:flex;flex-direction:column;gap:8px;padding:0}
.hero-strip .k{font-family:var(--caps);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.hero-strip h1,.hero-strip h2{margin:0;font-size:34px}
.hero-strip p{margin:0 0 6px;color:#dcc9a4;max-width:52ch}
/* вход блоков по скроллу (kit.js ставит .in; без JS всё видно) */
.rise{transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s}
.rise.pre{transform:translateY(12px);opacity:.001}
@media (max-width:1180px){.c4,.c5,.c6,.c7,.c8{grid-column:span 6}}
@media (max-width:820px){.dash{padding:0 14px;gap:14px}.c4,.c5,.c6,.c7,.c8{grid-column:span 12}.hero-strip{margin:14px;padding:18px}.page-head{padding:18px 16px 0}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.rise.pre{opacity:1;transform:none}.hero-strip .fire{animation:none}}
/* ряд эмблем классов внутри окна (верстак на главной) */
.win .ems{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px}
.win .ems a{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:#cdb794;text-align:center;line-height:1.1}
.win .ems img{width:48px;height:48px;border-radius:50%;box-shadow:0 0 0 2px #0a0603,0 0 0 3px rgba(201,143,26,.4);transition:transform .2s,box-shadow .2s}
.win .ems a:hover img{transform:scale(1.08);box-shadow:0 0 0 2px #0a0603,0 0 0 3px #f8b700,0 0 16px rgba(255,170,60,.5)}
.win .rows{display:flex;flex-direction:column}
.win .rows div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid rgba(201,143,26,.22);font-size:15px;color:var(--surf-ink)}
.win .rows div:first-child{border-top:0}
.win .rows b{font-family:var(--disp);color:var(--gold-hi)}
/* Разводящая «Гайды»: ряд кнопок инструментов в окне «Под рукой» */
.gd-tools{display:flex;flex-wrap:wrap;gap:12px}
.win .rows div>a:hover{color:var(--gold-hi)!important}
.win .note{margin:0;font-size:13px;color:var(--surf-soft)}
/* планировщик внутри окна: без своей рамки и отступов страницы */
.win .dun{padding:0}
@media (max-width:820px){.win .ems{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* планировщик в окне дашборда: компактнее, чем на странице атласа */
.win .dun{display:grid;grid-template-columns:230px minmax(0,1fr);gap:14px;padding:0}
.win .dun .frame{padding:14px 16px}
.win .dun .lvl{font-size:40px}
.win .drow{grid-template-columns:62px minmax(0,1fr) auto;gap:10px;padding:8px 12px;font-size:14px}
.win .drow .lv{font-size:17px}
.win .drow .nm{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win .drow .zn{display:none}
.win .drow .st{font-size:10px;white-space:nowrap}
.win .ems a{font-size:10px;white-space:normal}
@media (max-width:1180px){.win .dun{grid-template-columns:1fr}}
/* лента баннеров на главной-дашборде: ниже прежней (горн «остаётся, но меньше»), в рамке окна */
.slider.compact{margin:22px 24px 0;border:1px solid #0a0603;box-shadow:0 0 0 1px #c98f1a inset,0 0 0 3px #0a0603 inset,0 18px 40px rgba(0,0,0,.6)}
.slider.compact .hero{min-height:300px;border-bottom:0;box-shadow:none}
.slider.compact .hero .copy{padding:34px 40px 44px;gap:12px}
.slider.compact .hero h2{font-size:clamp(24px,2.2vw,34px)}
.slider.compact .hero p.lead{font-size:16px}
/* Компактная лента — карточка с той же оковкой и скруглением, что окна дашборда. */
.slider.compact{border-radius:var(--r-inset)}
.slider.compact .hero h2{max-width:none;font-size:clamp(22px,1.9vw,30px);line-height:1.12}
.slider.compact .hero p.lead{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.slider.compact+.dash{margin-top:18px}
/* Линию под шапкой окна рисует сама шапка — первая строка списка свою не дублирует. */
.win>.body>.nrow:first-child{border-top:0;padding-top:4px}
/* Разводящая «Гайды»: темы справа на всю высоту, слева гайды и инструменты. */
.dash .tall{grid-row:span 2}
.win.headless>header{display:none}
.win>header .go{flex:none;white-space:nowrap}
/* Строка окна с подписью: название, под ним мелко где и размер; справа срок. */
.win .rows span small{display:block;margin-top:2px;font-size:12.5px;color:var(--surf-soft)}
.win.parch .rows b{color:var(--surf-head)}
/* ряд бирок под лентой: отсчёт, бета, билд, рейды */
.plaques-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:14px 24px 4px}
.plaques-row .plq{min-width:120px}
@media (max-width:820px){.slider.compact{margin:14px}.plaques-row{padding:12px 14px 0}}

/* Текст талантов под верстаком (серверный HTML для поиска), свёрнут */
.tc-text{margin:18px 0 0;padding:12px 16px;color:#e8dcc6}
.tc-text>summary{cursor:pointer;font-family:var(--caps);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#cdbfa3}
.tc-text h3{font-family:var(--caps);color:#f8b700;font-size:15px;margin:16px 0 8px}
.tc-text dl{display:grid;grid-template-columns:minmax(160px,240px) 1fr;gap:6px 16px;margin:0;font-size:14px}
.tc-text dt{color:#f3eee2}.tc-text dt .rk{color:#a08c6c}
.tc-text dd{margin:0;color:#cdbfa3}
@media (max-width:640px){.tc-text dl{grid-template-columns:1fr}.tc-text dd{margin-bottom:6px}}

/* ── Врезная панель — общий стиль тёмных окон внутри кожи/дерева: списки, деревья, детали,
   справки. Параметры — токены --inset-* и --r-inset в tokens.css. Класс ставится разметкой
   (`yw-inset`, глубже — `yw-inset deep`); свои стили компонента рамку и фон НЕ задают. */
.yw-inset{background:var(--inset-bg);border:1px solid var(--inset-line);border-radius:var(--r-inset);box-shadow:0 0 0 1px var(--inset-edge);overflow:hidden}
.yw-inset.deep{background:var(--inset-bg-deep)}
/* Поле ввода в той же системе: то же скругление и линия */
.yw-field{border:1px solid var(--inset-line);border-radius:var(--r-inset);background:linear-gradient(180deg,#1b130d,#2a1f17);color:var(--ink)}
.yw-field:focus{outline:none;border-color:var(--gold)}

/* ── Второй уровень панели: группа внутри раздела (Справочник → Классы → Маг). Строка группы —
   как обычный подпункт, справа стрелка; её подпункты — со сдвигом и линией слева, чтобы была
   видна вложенность. Высоты строк те же, рамка прозрачная у всех (без прыжков). */
.app[data-collapsed="0"] .rune-wrap .sub-row{display:flex;align-items:stretch}
.app[data-collapsed="0"] .rune-wrap .sub-row{border:1px solid transparent;border-radius:var(--r-inset)}
.app[data-collapsed="0"] .rune-wrap .sub-row>a{flex:1;min-width:0;border:0;background:none}
.app[data-collapsed="0"] .rune-wrap .sub-row:hover{background:rgba(248,183,0,.08)}
.app[data-collapsed="0"] .rune-wrap .sub-row:hover>a{color:#fff}
/* у ссылки внутри строки своей подсветки нет — иначе часть до стрелки была темнее остальной строки */
.app[data-collapsed="0"] .rune-wrap .sub-row>a:hover{background:none}
.app[data-collapsed="0"] .rune-wrap .sub-row.on{background:rgba(248,183,0,.1);border-color:rgba(201,143,26,.4)}
.app[data-collapsed="0"] .rune-wrap .sub-row.on>a{color:#ffd254}
.app[data-collapsed="0"] .rune-wrap .sub-row.on>a:before{background:var(--dot-on)}
.sub-toggle{flex:0 0 30px;display:grid;place-items:center;color:var(--ink2);cursor:pointer;border-radius:var(--r-inset)}
.sub-toggle svg{width:14px;height:14px;transform:rotate(0deg);transition:transform .2s}
.sub-toggle[aria-expanded="true"] svg{transform:rotate(90deg);color:var(--gold-hi)}
.sub-toggle:hover{color:var(--gold-hi)}
.app[data-collapsed="0"] .rune-wrap .notice2{margin:2px 0 4px 14px;padding:2px 0 2px 8px;border-left:1px solid rgba(201,143,26,.35)}
.app[data-collapsed="0"] .rune-wrap .notice2 a{font-size:12.5px;padding:5px 10px}
/* свёрнутая панель: листок всплывающий, второй уровень в нём просто списком со сдвигом */
.app[data-collapsed="1"] .sub-toggle{display:none}
.app[data-collapsed="1"] .notice2{display:block!important;margin-left:14px}

/* ── Шапка страницы YwPageHead: фиксированная высота и кегль, путь отдельной строкой ── */
.phead{box-sizing:border-box;height:88px;padding:26px 28px 0;display:flex;flex-direction:column;gap:6px;flex:none}
.phead .ph-row{display:flex;align-items:center;gap:18px;height:36px;min-width:0}
.phead .ph-title{margin:0;flex:0 1 auto;min-width:0;font-family:var(--disp);font-size:28px;line-height:36px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phead .ph-rule{flex:1;height:1px;background:linear-gradient(90deg,var(--gold-line),transparent)}
.phead .ph-crumbs{margin-top:-8px;display:flex;align-items:center;gap:8px;height:20px;min-width:0;font-family:var(--body);font-size:13px;line-height:20px;color:var(--muted);white-space:nowrap;overflow:hidden}
.phead .ph-crumbs a{color:var(--muted);text-decoration:none;flex:none}
.phead .ph-crumbs a:hover{color:var(--gold-hi)}
.phead .ph-sep{flex:none;color:var(--muted);opacity:.7}
.phead .ph-last{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
/* Отступ от шапки до контента — один на все страницы: раньше у каждой страницы был свой
   (лента 36px, статья 22px), и контент начинался на разной высоте. */
.phead+.page>:first-child,.phead+*>.page>:first-child{margin-top:8px!important}
.phead.bare{height:70px}
@media (max-width:820px){.phead{height:76px;padding:18px 16px 0}.phead.bare{height:62px}.phead .ph-title{font-size:22px}}


/* Экран без мобильной версии (YwDesktopOnly): на телефоне — железная табличка вместо экрана. */
.yw-mob-only{display:none;flex-direction:column;gap:8px;margin:8px 16px 28px;padding:24px 22px;text-align:center}
.yw-mob-only:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.65));pointer-events:none}
.yw-mob-only>*{position:relative}
.yw-mob-only h3{margin:0;font-family:var(--disp);font-size:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-hi);text-shadow:0 2px 0 #000}
.yw-mob-only p{margin:0;font-size:15px;line-height:1.5;color:var(--ink2);text-shadow:0 1px 0 #000}
@media (max-width:820px){.yw-desk-only>.yw-desk{display:none}.yw-desk-only>.yw-mob-only{display:flex}}
/* Телефон: карточки классов и таблица профессий — после их базовых правил, иначе база перебивает. */
@media (max-width:820px){.classcard{gap:12px;padding:14px}.classcard .em{width:64px;height:64px}.ptable{font-size:14px}.ptable th{font-size:10px;letter-spacing:.02em}.ptable th,.ptable td{padding:8px 4px}}

/* ===== Телефон: верхняя полоса и выезжающее меню (04.10). На компьютере полосы нет. ===== */
.mbar,.mscrim{display:none}
@media (max-width:820px){
  /* Две строки сетки: полоса — по своей высоте, страница — всё остальное. Без этого на коротких
     страницах браузер растягивал и строку полосы, и заголовок уезжал к середине экрана. */
  .app{grid-template-rows:auto 1fr}
  .mbar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:60;height:60px;padding:0 12px 0 14px;background:url(/kit/tex/wood.webp) center/900px;box-shadow:0 -2px 0 #c98f1a inset,0 0 30px rgba(0,0,0,.55) inset,0 6px 18px rgba(0,0,0,.6)}
  .mbar-brand{display:flex;align-items:center;height:100%}
  .mbar-brand img{display:block;width:172px;height:auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,.8))}
  .mbar-menu{width:46px;height:40px;padding:0;display:grid;place-items:center}
  .mbar-menu svg{width:22px;height:22px}
  .mbar-menu .i-close,.app[data-menu="1"] .mbar-menu .i-open{display:none}
  .app[data-menu="1"] .mbar-menu .i-close{display:block}
  .side,.app[data-collapsed="1"] .side{position:fixed;top:60px;left:0;bottom:0;height:auto;width:min(300px,86vw);z-index:55;transform:translateX(-102%);visibility:hidden;transition:transform .26s cubic-bezier(.25,.8,.25,1),visibility 0s linear .26s}
  .app[data-menu="1"] .side{transform:none;visibility:visible;transition:transform .26s cubic-bezier(.25,.8,.25,1)}
  .mscrim{display:block;position:fixed;top:60px;left:0;right:0;bottom:0;z-index:50;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .26s}
  .app[data-menu="1"] .mscrim{opacity:1;pointer-events:auto}
  html.yw-menu{overflow:hidden}
  /* Лого уже в полосе — в меню табличку не повторяем. */
  .rail .brand{display:none}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){.side,.app[data-menu="1"] .side,.mscrim{transition:none}}