/*
 * Laurum — стили сайта. Движок блога рисует разметку с классами blog-*, сайт задаёт её вид.
 * Дизайн — docs/design.md: солнечная премиальность; сливочные страницы для чтения и тёмные сцены со
 * светом в буквах заголовков, золото для всего тонкого и вино для акцента, классическая антиква
 * Old Standard TT и Ysabeau Office, лавровый венок, разделители с ромбом, бумажное зерно.
 * Блог — две колонки: навигация слева, широкая рабочая зона.
 * Движение — motion.js и плавная прокрутка; при «уменьшить движение» всё стоит на месте.
 */

/* Шрифты: файлы сайта, лицензия OFL — /assets/licenses/. */
@font-face { font-family: "Old Standard TT"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/old-standard-tt-cyrillic-400.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Old Standard TT"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/old-standard-tt-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Old Standard TT"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/old-standard-tt-cyrillic-700.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Old Standard TT"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/old-standard-tt-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Old Standard TT"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/old-standard-tt-cyrillic-400-italic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Old Standard TT"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/old-standard-tt-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Ysabeau Office"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/ysabeau-office-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Ysabeau Office"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/ysabeau-office-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Ysabeau Office"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("../fonts/ysabeau-office-cyrillic-italic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Ysabeau Office"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("../fonts/ysabeau-office-latin-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    --ink: #1c1916;
    --ink-2: #26221e;
    --ink-3: #332d27;
    --paper: #f3eee4;
    --plate: #e9e1d2;
    --plate-deep: #ddd2bf;
    --card: #faf7f1;
    --text: #27231f;
    --muted: #6b6358;
    --faint: #8f877b;
    --line: #ddd4c4;
    --line-strong: #c9bfad;
    --wine: #6e1423;
    --wine-deep: #4a0d18;
    --wine-soft: #f1e2de;
    --gold: #b8913f;
    --gold-light: #e9cf8f;
    --gold-pale: #f4e7c6;
    --gold-deep: #806226;
    --sage: #5d7262;
    --sage-soft: #e4ebe2;
    --on-dark: #f3eee4;
    --on-dark-muted: rgba(243, 238, 228, 0.7);
    --on-dark-faint: rgba(243, 238, 228, 0.45);
    --line-dark: rgba(243, 238, 228, 0.14);
    --serif: "Old Standard TT", "Times New Roman", serif;
    --sans: "Ysabeau Office", "Segoe UI", system-ui, sans-serif;
    --gutter: clamp(1rem, 3.2vw, 3rem);
    --width: 88rem;
    --start: 18rem;
    --radius: 14px;
    --radius-plate: 18px;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --header: 4.75rem;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .12 0 0 0 0 .08 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    color-scheme: light;
}

/* Свет сцен тянется за мышью плавно: --mx и --my — числа от -1 до 1, их переход задан у сцен.
   Свет в буквах плывёт по --lit-x и --lit-y. */
@property --mx { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --my { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --lit-x { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --lit-y { syntax: "<percentage>"; inherits: false; initial-value: 20%; }

/* Основа */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 1rem); }
/* Плавная прокрутка (site-scroll.js, Lenis): страница сохраняет свою высоту; окно не дёргается при открытом диалоге. */
html.lenis, html.lenis body { height: auto; }
html.has-modal { overflow-y: scroll; }
html.has-panel { overflow: hidden; }
/* Полосы прокрутки в цветах сайта: тонкий золотистый бегунок на сливочном, на тёмных панелях — тёмный */
html { scrollbar-color: #b9a27a var(--paper); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { border: 3px solid var(--paper); border-radius: 999px; background: #c3ae86; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }
::-webkit-scrollbar-corner { background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 1.0625rem/1.6 var(--sans); font-feature-settings: "lnum" 1; -webkit-font-smoothing: antialiased; }
/* Бумажное зерно: еле заметное, над фоном и под содержимым */
body::before { position: fixed; z-index: -1; inset: 0; background-image: var(--grain); content: ""; opacity: 0.2; pointer-events: none; }
h1, h2, h3, .band__text, .blog-tile__title, .blog-skill__title, .onward__title, .way__title { text-wrap: balance; }
p, li { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 400; }
em { font-style: italic; }
/* В заголовках акцентное слово выделено цветом, а не курсивом: курсив антиквы слишком витиеват */
h1 em, h2 em, h3 em { font-family: var(--serif); font-style: normal; }
blockquote em { font-family: var(--serif); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--gold-pale); color: var(--ink); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; z-index: 100; top: 0.5rem; left: 0.5rem; padding: 0.5rem 0.875rem; border-radius: 999px; background: var(--ink); color: var(--on-dark); font-size: 0.8125rem; transform: translateY(-200%); }
.skip:focus { transform: none; }
.main { min-height: 60vh; }
svg.icon { width: 1.125rem; height: 1.125rem; flex: none; }
i[data-lucide] { display: inline-block; width: 1.125rem; height: 1.125rem; flex: none; }

/* Знак — лавровый венок (View\Sign). Нарисованный линиями растёт по порядку, как матрица на axvii:
   круг, засечки по кругу, стебли, листья парами снизу вверх, ромб между верхушками. --pace ускоряет весь рисунок. */
.sign { display: block; width: 100%; height: auto; overflow: visible; }
/* Волосяная линия венка в сцене: толщина в единицах рисунка, своя у каждого места (--hair) */
.sign--dial :is(circle, path) { stroke-width: var(--hair, 0.1); }
[data-draw] :is(.sign__ring, .sign__tick, .sign__stem, .sign__leaf) { stroke-dasharray: 1; stroke-dashoffset: 0; }
[data-draw] .sign__diamond { transform-box: fill-box; transform-origin: center; }
[data-draw].is-drawing :is(.sign__ring, .sign__tick, .sign__stem, .sign__leaf) { stroke-dashoffset: 1; }
[data-draw].is-drawing .sign__diamond { opacity: 0; transform: scale(0.3) rotate(-45deg); }
[data-draw].is-drawn :is(.sign__ring, .sign__tick, .sign__stem, .sign__leaf) { stroke-dashoffset: 0; }
[data-draw].is-drawn .sign__ring { transition: stroke-dashoffset calc(var(--pace, 1) * 2.4s) cubic-bezier(0.65, 0, 0.35, 1); }
[data-draw].is-drawn .sign__tick { transition: stroke-dashoffset calc(var(--pace, 1) * 0.5s) var(--ease-out) calc(var(--pace, 1) * (0.5s + var(--i) * 0.024s)); }
[data-draw].is-drawn .sign__stem { transition: stroke-dashoffset calc(var(--pace, 1) * 1.8s) cubic-bezier(0.65, 0, 0.35, 1) calc(var(--pace, 1) * 0.9s); }
[data-draw].is-drawn .sign__leaf { transition: stroke-dashoffset calc(var(--pace, 1) * 0.9s) var(--ease-out) calc(var(--pace, 1) * (1.2s + var(--i) * 0.13s)), fill-opacity 1.4s var(--ease) calc(var(--pace, 1) * (1.6s + var(--i) * 0.13s)); }
[data-draw].is-drawn .sign__diamond { opacity: 1; transform: none; transition: opacity 1s var(--ease) calc(var(--pace, 1) * 3.4s), transform 1.4s var(--ease-out) calc(var(--pace, 1) * 3.4s); }
/* Венок линиями в загрузчике после рисунка заливается золотом листок за листком */
.sign--lines .sign__leaf { fill: currentColor; fill-opacity: 0; }
.sign--lines.is-drawn .sign__leaf { fill-opacity: 1; }

/* Свет в буквах (hitit): заголовок тёмной сцены залит тем же размытым светом, что плывёт за ним, —
   вино, золото и шалфей поверх сливочного. Свет медленно ходит туда и обратно (шва в конце круга нет)
   и вместе с пятнами сцены чуть тянется за мышью. */
.shine { --lit-base: #f6eddc; --lit-wine: #eaa39b; --lit-gold: #f0c66e; --lit-sage: #bcd0b6; background: radial-gradient(34% 85% at 16% 30%, var(--lit-wine), transparent 72%), radial-gradient(40% 95% at 60% 72%, var(--lit-gold), transparent 72%), radial-gradient(30% 80% at 94% 24%, var(--lit-sage), transparent 72%), var(--lit-base); background-size: 190% 190%; background-position: calc(var(--lit-x) + var(--mx) * 18%) calc(var(--lit-y) + var(--my) * 18%); color: transparent; -webkit-background-clip: text; background-clip: text; animation: lit 26s ease-in-out infinite alternate; }
.shine em { color: transparent; }
@keyframes lit { 0% { --lit-x: 0%; --lit-y: 20%; } 50% { --lit-x: 55%; --lit-y: 85%; } 100% { --lit-x: 100%; --lit-y: 35%; } }

/* Тёплые пятна света на тёмных сценах (hitit): размытые круги вина, золота и шалфея */
.glow { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
/* Пятна плывут сами (drift) и чуть тянутся за мышью (--mx, --my у сцены, motion.js) */
.glow > span { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.62; translate: calc(var(--mx) * var(--pull, 4vw)) calc(var(--my) * var(--pull, 4vw)); }
:is(.home-hero, .page-top, .home-rules, .site-footer, .band) { transition: --mx 2.8s var(--ease-out), --my 2.8s var(--ease-out); }
.glow > span:nth-child(1) { --pull: 4vw; top: -18%; left: 4%; width: 46vw; height: 46vw; background: radial-gradient(circle, #9b2638 0%, rgba(155, 38, 56, 0) 70%); animation: drift-a 52s ease-in-out infinite alternate; }
.glow > span:nth-child(2) { --pull: -3vw; top: -6%; left: 34%; width: 40vw; height: 40vw; background: radial-gradient(circle, #e7b65c 0%, rgba(231, 182, 92, 0) 68%); animation: drift-b 64s ease-in-out infinite alternate; }
.glow > span:nth-child(3) { --pull: 5vw; top: 10%; right: -8%; width: 40vw; height: 40vw; background: radial-gradient(circle, #5e7461 0%, rgba(94, 116, 97, 0) 70%); animation: drift-c 76s ease-in-out infinite alternate; }
@keyframes drift-a { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(14vw, 8vw, 0) scale(1.2); } 100% { transform: translate3d(4vw, 18vw, 0) scale(0.9); } }
@keyframes drift-b { 0% { transform: translate3d(0, 0, 0) scale(1.1); } 50% { transform: translate3d(-12vw, 12vw, 0) scale(0.85); } 100% { transform: translate3d(10vw, 4vw, 0) scale(1.2); } }
@keyframes drift-c { 0% { transform: translate3d(0, 0, 0) scale(0.9); } 50% { transform: translate3d(-16vw, -4vw, 0) scale(1.15); } 100% { transform: translate3d(-6vw, 14vw, 0) scale(1); } }

/* Мелкие элементы: подпись над заголовком, кнопки, ссылка с точкой, метки */
.overline { display: inline-flex; align-items: center; gap: 0.875rem; margin: 0; color: var(--gold-deep); font: 600 0.6875rem/1.4 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; }
.overline::before { flex: none; width: 2rem; height: 1px; background: currentColor; content: ""; opacity: 0.7; }
.overline--center::after { flex: none; width: 2rem; height: 1px; background: currentColor; content: ""; opacity: 0.7; }
.section-title { font: 300 clamp(2.25rem, 4.6vw, 4rem)/1.04 var(--serif); letter-spacing: -0.012em; }
.section-title em { color: var(--wine); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; min-height: 3.125rem; padding: 0 1.75rem; border: 1px solid var(--wine); border-radius: 999px; background: var(--wine); color: var(--on-dark); font: 500 0.875rem/1 var(--sans); letter-spacing: 0.02em; text-decoration: none; cursor: pointer; transition: background-color 300ms var(--ease), border-color 300ms var(--ease), color 300ms var(--ease), transform 300ms var(--ease); }
.button:hover { border-color: var(--wine-deep); background: var(--wine-deep); }
.button--gold { gap: 0.875rem; min-height: 3.5rem; padding: 0 0.4375rem 0 1.75rem; border-color: var(--gold-light); background: var(--gold-light); color: var(--ink); font-weight: 600; letter-spacing: 0.04em; }
.button--gold:hover { border-color: #f4e2b4; background: #f4e2b4; }
/* Стрелка в тёмном круге: при наведении круг поворачивается, стрелка улетает и возвращается */
.button__arrow { position: relative; display: grid; flex: none; place-items: center; width: 2.625rem; height: 2.625rem; overflow: hidden; border-radius: 50%; background: var(--ink); color: var(--gold-light); }
.button__arrow :is(svg, i) { width: 1rem; height: 1rem; transition: transform 500ms var(--ease-out); }
.button:hover .button__arrow :is(svg, i) { animation: arrow-through 600ms var(--ease-out); }
@keyframes arrow-through { 0% { transform: translateX(0); } 45% { transform: translateX(160%); } 46% { transform: translateX(-160%); } 100% { transform: translateX(0); } }
.button--dark { border-color: var(--ink); background: var(--ink); }
.button--dark:hover { border-color: var(--wine); background: var(--wine); }
/* Ссылка с точкой (childless): точка заливается, растёт, в неё влетает стрелка, подчёркивание уходит вправо */
.dot-link { display: inline-flex; align-items: center; gap: 0.75rem; color: inherit; font: 500 0.875rem/1.2 var(--sans); text-decoration: none; }
/* Место точки всегда 2 rem: точка растёт внутри него, и строка рядом не сдвигается ни на пиксель */
.dot-link__dot { position: relative; display: grid; flex: none; place-items: center; width: 2rem; height: 2rem; margin-right: -0.5rem; }
.dot-link__dot::before { position: absolute; inset: 0; border: 1px solid currentColor; border-radius: 50%; content: ""; transform: scale(0.25); transition: transform 460ms var(--ease-out), background-color 300ms var(--ease), border-color 300ms var(--ease); }
.dot-link__dot svg, .dot-link__dot i { position: relative; width: 0.875rem; height: 0.875rem; opacity: 0; transform: translateX(-60%); transition: transform 460ms var(--ease-out), opacity 220ms var(--ease); }
.dot-link__label { padding-bottom: 0.125rem; background: linear-gradient(var(--gold), var(--gold)) no-repeat right bottom / 100% 1px; transition: background-size 480ms var(--ease-out); }
:is(.dot-link:hover, .dot-link:focus-visible, .blog-tile__link:hover) .dot-link__dot { color: var(--on-dark); }
:is(.dot-link:hover, .dot-link:focus-visible, .blog-tile__link:hover) .dot-link__dot::before { border-color: var(--wine); background: var(--wine); transform: scale(1); }
:is(.dot-link:hover, .dot-link:focus-visible, .blog-tile__link:hover) :is(.dot-link__dot svg, .dot-link__dot i) { opacity: 1; transform: none; }
:is(.dot-link:hover, .dot-link:focus-visible, .blog-tile__link:hover) .dot-link__label { background-size: 0 1px; }
.dot-link--light { color: var(--on-dark); }
.dot-link--light .dot-link__label { background-image: linear-gradient(var(--gold-light), var(--gold-light)); }
.dot-link--light:is(:hover, :focus-visible) .dot-link__dot { color: var(--ink); }
.dot-link--light:is(:hover, :focus-visible) .dot-link__dot::before { border-color: var(--gold-light); background: var(--gold-light); }
.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; }
.pill { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 1.125rem; border-radius: 999px; background: var(--plate); color: var(--text); font-size: 0.875rem; text-decoration: none; transition: background-color 400ms var(--ease), color 400ms var(--ease); }
.pill:hover { background: var(--ink); color: var(--on-dark); }
.pill--facet { background: var(--wine-soft); color: var(--wine-deep); }

/* Разделитель: линия — золотой ромб — линия; линии расходятся от ромба, ромб заливается, когда входит в экран */
.divider { display: flex; align-items: center; gap: 1rem; width: 100%; color: var(--gold); }
.divider__line { flex: 1 1 auto; height: 1px; background: var(--line-strong); transform-origin: right; transition: transform 1.2s var(--ease-out); }
.divider__line + .divider__mark + .divider__line { transform-origin: left; }
.divider__mark { flex: none; width: 0.5625rem; height: 0.5625rem; border: 1px solid currentColor; transform: rotate(45deg); transition: background-color 600ms var(--ease) 500ms; }
.divider.is-in .divider__mark { background: currentColor; }
.has-motion .divider:not(.is-in) .divider__line { transform: scaleX(0); }
.divider--footer { color: var(--gold-light); }
.divider--footer .divider__line { background: var(--line-dark); }

/* Загрузчик: тёмное поле со светом, звезда проводится золотом, под ней имя с переливом, полоса и проценты.
   Стоит, только пока html[data-page-state="loading"]; если скрипт не пришёл, уходит сам через 12 секунд. */
.loader { display: none; }
html[data-page-state="loading"] .loader, html[data-page-state="ready"] .loader { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; overflow: hidden; background: var(--ink); color: var(--on-dark); }
html[data-page-state="loading"] .loader { animation: loader-away 600ms ease 12s forwards; }
html[data-page-state="loading"] body { overflow: hidden; animation: loader-scroll 1ms linear 12.6s forwards; }
html[data-page-state="ready"] .loader { opacity: 0; visibility: hidden; transition: opacity 800ms var(--ease), visibility 0s linear 800ms; }
html[data-page-state="ready"] .loader--quick { transition-duration: 300ms, 0s; transition-delay: 0s, 300ms; }
@keyframes loader-away { to { opacity: 0; visibility: hidden; } }
@keyframes loader-scroll { to { overflow: visible; } }
.loader__glow { position: absolute; inset: -20%; background: radial-gradient(circle at 35% 40%, rgba(164, 52, 58, 0.35), transparent 45%), radial-gradient(circle at 62% 38%, rgba(231, 182, 92, 0.28), transparent 42%), radial-gradient(circle at 70% 70%, rgba(94, 116, 97, 0.25), transparent 45%); filter: blur(30px); }
.loader__stage { position: relative; display: grid; justify-items: center; gap: 1.25rem; }
.loader__sign { width: 5.5rem; color: var(--gold-light); }
/* Венок растёт быстрее, чем в сценах: круг, стебли, листья снизу вверх с заливкой, ромб */
.loader__sign :is(.sign__ring, .sign__stem, .sign__leaf) { stroke-dashoffset: 1; animation: loader-draw 1.1s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.loader__sign .sign__stem { animation-duration: 0.9s; animation-delay: 0.3s; }
.loader__sign .sign__leaf { animation: loader-draw 0.5s var(--ease-out) calc(0.45s + var(--i) * 0.06s) forwards, loader-fill 0.7s var(--ease) calc(0.75s + var(--i) * 0.06s) forwards; }
.loader__sign .sign__diamond { opacity: 0; transform: scale(0.3) rotate(-45deg); animation: loader-diamond 0.9s var(--ease-out) 1.35s forwards; }
@keyframes loader-draw { to { stroke-dashoffset: 0; } }
@keyframes loader-fill { to { fill-opacity: 1; } }
@keyframes loader-diamond { to { opacity: 1; transform: none; } }
.loader__mark { --track: 0.32em; display: inline-block; margin-right: calc(-1 * var(--track)); color: var(--on-dark); font: 400 clamp(1.5rem, 4vw, 2rem)/1 var(--serif); letter-spacing: var(--track); text-transform: uppercase; }
.loader__bar { display: block; width: min(13rem, 60vw); height: 1px; overflow: hidden; background: var(--line-dark); }
.loader__bar > span { display: block; width: 100%; height: 100%; background: var(--gold-light); transform: scaleX(0); transform-origin: left; }
.loader__label { color: var(--on-dark-faint); font: 500 0.6875rem/1 var(--sans); letter-spacing: 0.22em; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
    .loader__sign :is(.sign__ring, .sign__stem, .sign__leaf, .sign__diamond) { animation: none; stroke-dashoffset: 0; fill-opacity: 1; opacity: 1; transform: none; }
    /* The way out without a script stays even when motion is reduced. */
    html[data-page-state="loading"] .loader { animation: loader-away 1ms linear 12s forwards !important; }
    html[data-page-state="loading"] body { animation: loader-scroll 1ms linear 12s forwards !important; }
}

/* Шапка: знак и имя, разделы, поиск. Каждая страница начинается тёмной сценой, и шапка лежит над ней прозрачной;
   когда страница ушла вниз, шапка становится сплошной тёмной. Рамок нет: текущий раздел отмечен золотой точкой. */
.site-header { position: fixed; z-index: 40; top: 0; right: 0; left: 0; border-bottom: 1px solid transparent; color: var(--on-dark); transition: background-color 600ms var(--ease), border-color 600ms var(--ease), backdrop-filter 600ms var(--ease); }
.site-header[data-scrolled] { border-bottom-color: var(--line-dark); background: rgba(28, 25, 22, 0.94); backdrop-filter: saturate(1.3) blur(14px); }
.site-header__bar { display: flex; align-items: center; gap: 2.5rem; max-width: var(--width); height: var(--header); margin: 0 auto; padding: 0 var(--gutter); }
/* Словесный знак (Sign::wordmark): имя заглавными с разрядкой, в просвете буквы A — маленький золотой ромб.
   --track — разрядка; ромб стоит по середине самой буквы, без хвоста разрядки за ней. */
.wordmark { display: inline-flex; align-items: center; color: var(--on-dark); text-decoration: none; }
.wordmark__name { --track: 0.3em; --diamond: 0.11em; font: 400 1.3125rem/1 var(--serif); letter-spacing: var(--track); text-transform: uppercase; transition: color 600ms var(--ease); }
.wordmark:hover .wordmark__name { color: var(--gold-light); }
.wordmark__a { position: relative; }
.wordmark__a::after { position: absolute; top: var(--diamond-top, 0.43em); left: calc(50% - var(--track) / 2); width: var(--diamond, 0.055em); height: var(--diamond, 0.055em); background: var(--gold-light); content: ""; transform: translate(-50%, -50%) rotate(45deg); transition: transform 900ms var(--ease-out); }
.wordmark:hover .wordmark__a::after { transform: translate(-50%, -50%) rotate(225deg); }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 2.25rem; list-style: none; }
.site-nav__link { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--on-dark-muted); font: 500 0.875rem/1 var(--sans); letter-spacing: 0.06em; text-decoration: none; transition: color 400ms var(--ease); }
.site-nav__link::after { position: absolute; bottom: 0.375rem; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-light); content: ""; opacity: 0; transform: translate(-50%, 4px); transition: opacity 400ms var(--ease), transform 500ms var(--ease-out); }
.site-nav__link:hover { color: var(--on-dark); }
.site-nav__link[aria-current] { color: var(--on-dark); }
.site-nav__link[aria-current]::after, .site-nav__link:hover::after { opacity: 1; transform: translate(-50%, 0); }
.site-header__search { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--on-dark); transition: background-color 400ms var(--ease), color 400ms var(--ease); }
.site-header__search:hover { background: rgba(243, 238, 228, 0.08); color: var(--gold-light); }

/* «Наверх»: круглая тёмная кнопка с золотой стрелкой; появляется, когда страница ушла на экран вниз */
.to-top { position: fixed; z-index: 35; right: var(--gutter); bottom: 1.25rem; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--ink); color: var(--gold-light); box-shadow: 0 0.75rem 2rem rgba(28, 25, 22, 0.25); text-decoration: none; transition: opacity 260ms var(--ease), transform 260ms var(--ease), background-color 240ms var(--ease); }
.to-top:hover { background: var(--wine); }
.to-top[data-shown="false"] { opacity: 0; transform: translateY(0.5rem); pointer-events: none; }

/* Плашка о Яндекс Метрике: маленькая, в одну строку, справа внизу рядом с кнопкой «Наверх» */
.metrika-note { position: fixed; z-index: 34; right: calc(var(--gutter) + 3.75rem); bottom: 1.25rem; display: flex; align-items: center; gap: 0.75rem; max-width: calc(100vw - 2 * var(--gutter) - 3.75rem); padding: 0.375rem 0.375rem 0.375rem 1rem; border: 1px solid var(--line-dark); border-radius: 999px; background: rgba(28, 25, 22, 0.94); color: var(--on-dark-muted); box-shadow: 0 0.75rem 2rem rgba(28, 25, 22, 0.22); font: 400 0.8125rem/1.3 var(--sans); opacity: 0; transform: translateY(0.5rem); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.metrika-note[hidden] { display: none; }
.metrika-note[data-state="shown"] { opacity: 1; transform: none; }
.metrika-note[data-state="leaving"] { opacity: 0; transform: translateY(0.5rem); }
.metrika-note__text { margin: 0; }
.metrika-note__ok { flex: none; padding: 0.375rem 0.875rem; border: 0; border-radius: 999px; background: var(--gold-light); color: var(--ink); font: 500 0.8125rem/1.2 var(--sans); cursor: pointer; transition: background-color 240ms var(--ease); }
.metrika-note__ok:hover { background: var(--gold-pale); }
.metrika-note__ok:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
/* На планшете и телефоне внизу по центру стоит кнопка панели («Темы», «Содержание»): плашка — над ней и над «Наверх». */
@media (max-width: 64rem) {
    .metrika-note { bottom: calc(5rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 40rem) {
    .metrika-note { left: var(--gutter); right: var(--gutter); justify-content: space-between; max-width: none; padding-left: 0.875rem; font-size: 0.75rem; }
    .metrika-note__ok { font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .metrika-note { transition: none; }
}

/* Подвал: тёмный, со светом в углу, большое имя с переливом */
.site-footer { position: relative; margin-top: clamp(4.5rem, 9vw, 8rem); overflow: hidden; background: var(--ink); color: var(--on-dark); }
.site-footer__glow { position: absolute; inset: -40% -10% auto auto; width: 70vw; height: 70vw; background: radial-gradient(circle at 60% 40%, rgba(164, 52, 58, 0.3), transparent 50%), radial-gradient(circle at 40% 55%, rgba(231, 182, 92, 0.18), transparent 50%); filter: blur(40px); pointer-events: none; translate: calc(var(--mx) * 5vw) calc(var(--my) * 5vw); }
.site-footer__inner { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2.5rem 3rem; max-width: var(--width); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) var(--gutter) 2rem; }
.site-footer .overline { color: var(--gold-light); }
.site-footer__about { display: grid; align-content: start; gap: 1rem; max-width: 36rem; }
.site-footer__text { color: var(--on-dark-muted); font-size: 0.9375rem; }
.site-footer__nav { display: grid; align-content: start; gap: 1rem; }
.site-footer__nav ul { display: grid; gap: 0.625rem; list-style: none; }
.site-footer__link { color: var(--on-dark); font-size: 0.9375rem; text-decoration: none; background: linear-gradient(var(--gold-light), var(--gold-light)) no-repeat left bottom / 0 1px; transition: background-size 400ms var(--ease-out), color 240ms var(--ease); }
.site-footer__link:hover { color: var(--gold-light); background-size: 100% 1px; }
.site-footer .divider { grid-column: 1 / -1; margin-top: 1rem; }
.site-footer__title { grid-column: 1 / -1; text-align: center; }
.site-footer__mark { --track: 0.22em; display: inline-block; margin-right: calc(-1 * var(--track)); color: var(--on-dark); font: 400 clamp(3.25rem, 12.4vw, 12rem)/1 var(--serif); letter-spacing: var(--track); text-transform: uppercase; }
.divider__wreath { flex: none; width: clamp(4rem, 6vw, 5.25rem); }
.site-footer__legal { grid-column: 1 / -1; color: var(--on-dark-faint); font-size: 0.75rem; text-align: center; }

/* Тёмная полоса с одним призывом (View\Band) */
.band { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem 3rem; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--width) - 2 * var(--gutter)); margin: clamp(4rem, 8vw, 7rem) auto 0; padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 4vw, 3.5rem); overflow: hidden; border-radius: var(--radius-plate); background: var(--ink); color: var(--on-dark); }
.band--picture { grid-template-columns: auto minmax(0, 1fr) auto; }
.band__glow { position: absolute; inset: auto -10% -60% auto; width: 60%; height: 160%; background: radial-gradient(circle at 60% 50%, rgba(231, 182, 92, 0.3), transparent 55%), radial-gradient(circle at 30% 60%, rgba(164, 52, 58, 0.35), transparent 55%); filter: blur(30px); pointer-events: none; }
.band > :not(.band__glow) { position: relative; }
.band--picture { padding-left: clamp(1rem, 1.6vw, 1.25rem); }
.band__frame { display: block; width: clamp(7rem, 11vw, 9.5rem); aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius); }
.band__picture { width: 100%; height: 100%; object-fit: cover; }
.band__copy { display: grid; gap: 0.75rem; }
.band .overline { color: var(--gold-light); }
.band__text { font: 300 clamp(1.625rem, 3vw, 2.5rem)/1.12 var(--serif); }
.band__link { white-space: nowrap; }
.blog-hub__main > .band, .post-page > .band { width: 100%; margin-top: clamp(3.5rem, 6vw, 5rem); }

/* Тёмная сцена в начале каждой страницы, как первый экран главной: свет, венок, крошки, заголовок со светом в буквах. */
.page-top { position: relative; overflow: hidden; background: radial-gradient(48% 70% at 0% 100%, rgba(128, 26, 44, 0.6), transparent 72%), radial-gradient(40% 60% at 100% 100%, rgba(110, 20, 35, 0.4), transparent 72%), var(--ink); color: var(--on-dark); }
/* Венок волосяной линией справа в глубине сцены: растёт по порядку, когда страница открылась */
.page-top__sign { --hair: 0.13; position: absolute; z-index: 0; top: 50%; right: clamp(-6rem, -4vw, -1.5rem); width: clamp(17rem, 32vw, 30rem); color: var(--gold-light); opacity: 0.3; transform: translateY(-46%); pointer-events: none; }
.page-top__inner { position: relative; z-index: 1; display: grid; gap: 1.5rem; max-width: var(--width); margin: 0 auto; padding: calc(var(--header) + clamp(1.5rem, 3vw, 2.5rem)) var(--gutter) clamp(3rem, 6vw, 4.75rem); }
.page-top .overline { color: var(--gold-light); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; color: var(--on-dark-faint); font-size: 0.8125rem; list-style: none; }
.crumbs li + li::before { margin-right: 0.75rem; color: var(--gold-light); content: "◆"; font-size: 0.4375rem; vertical-align: 0.25em; opacity: 0.7; }
.crumbs a { color: var(--on-dark-muted); text-decoration: none; transition: color 400ms var(--ease); }
.crumbs a:hover { color: var(--gold-light); }
.crumbs [aria-current] { display: inline-block; max-width: 36ch; overflow: hidden; vertical-align: bottom; text-overflow: ellipsis; white-space: nowrap; }
/* Заголовки в тёмной сцене: сливочные с золотым переливом, как на главной */
.page-top :is(.blog-head__title, .post__title, .skill-page__title, .blog-course__title, .missing__title) { max-width: 22ch; font: 400 clamp(2.5rem, 5vw, 4.5rem)/1.06 var(--serif); letter-spacing: -0.012em; }
.page-top :is(.blog-head__lead, .skill-page__lead, .blog-course__lead, .missing__text) { max-width: 44rem; color: var(--on-dark-muted); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.6; }
.page-top .blog-head__lead a { color: var(--gold-light); }

/* Рамка блога: навигация слева, широкая рабочая зона */
.blog-hub { padding-bottom: 0; }
.blog-hub__layout { display: grid; grid-template-columns: var(--start) minmax(0, 1fr); gap: clamp(2.5rem, 4vw, 4.5rem); max-width: var(--width); margin: clamp(2.75rem, 5vw, 4rem) auto 0; padding: 0 var(--gutter); }
.blog-hub__start { display: flex; flex-direction: column; gap: 2.5rem; min-width: 0; }
.blog-hub__main { min-width: 0; }
.blog-hub--single .blog-hub__layout { grid-template-columns: minmax(0, 1fr); }
.blog-hub--single .blog-hub__main { width: 100%; max-width: 54rem; margin-inline: auto; }
.blog-panel__head, .blog-panel-open, .blog-panel-shade { display: none; }
/* Левая колонка — только типографика: подписи с чертой, строки, тонкие линии; рамок и плашек нет */
.blog-hub__nav { display: grid; gap: 2.25rem; }
.side__heading { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.75rem; color: var(--gold-deep); font: 600 0.6875rem/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; }
.side__heading::before { width: 1.5rem; height: 1px; background: currentColor; content: ""; opacity: 0.6; }
.blog-search { position: relative; display: flex; align-items: center; }
.blog-search__icon { position: absolute; left: 0; display: grid; color: var(--gold); pointer-events: none; }
.blog-search input { width: 100%; height: 2.875rem; padding: 0 0 0 1.875rem; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; color: var(--text); font-size: 0.9375rem; transition: border-color 400ms var(--ease); }
.blog-search input::placeholder { color: var(--faint); }
.blog-search input:focus { border-bottom-color: var(--gold); outline: none; }
.blog-topics ul { display: grid; list-style: none; }
.blog-topic { position: relative; display: grid; grid-template-columns: 1.125rem minmax(0, 1fr) auto; align-items: center; gap: 0.875rem; min-height: 2.75rem; padding: 0.375rem 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.3; text-decoration: none; transition: color 400ms var(--ease); }
.blog-topic:hover { color: var(--wine); }
.blog-topic[aria-current] { color: var(--text); font-weight: 600; }
.blog-topic[aria-current]::before { position: absolute; top: 50%; left: 0.25rem; width: 0.5rem; height: 0.5rem; background: var(--gold); content: ""; transform: translateY(-50%) rotate(45deg); }
/* Значков у тем нет: у одних тем они есть, у других нет, и столбец рвался; их место держит ромб текущей темы */
.blog-topic__icon { visibility: hidden; }
.blog-topic__count { color: var(--faint); font-size: 0.75rem; font-variant-numeric: tabular-nums; }

/* Подобрать по граням (FacetPanel): группы строками, флажки тонкие */
.blog-facets__switch, .blog-facets__toggle { display: none; }
.blog-facets__form { display: grid; }
.blog-facets__title { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.75rem; color: var(--gold-deep); font: 600 0.6875rem/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; }
.blog-facets__title::before { width: 1.5rem; height: 1px; background: currentColor; content: ""; opacity: 0.6; }
.blog-facets__group { border-top: 1px solid var(--line); }
.blog-facets__group:last-of-type { border-bottom: 1px solid var(--line); }
.blog-facets__group > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 1rem; align-items: center; gap: 0.75rem; min-height: 3rem; padding: 0.625rem 0; color: var(--text); font: 400 1.0625rem/1.3 var(--serif); cursor: pointer; list-style: none; transition: color 400ms var(--ease); }
.blog-facets__group > summary::-webkit-details-marker, .blog-facets__more > summary::-webkit-details-marker { display: none; }
.blog-facets__group > summary:hover { color: var(--wine); }
.blog-facets__group > summary :is(svg, i) { grid-column: 3; width: 1rem; height: 1rem; color: var(--gold); transition: transform 500ms var(--ease-out); }
.blog-facets__group[open] > summary :is(svg, i) { transform: rotate(180deg); }
.blog-facets__picked { display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 0.375rem; border-radius: 999px; background: var(--wine); color: var(--on-dark); font: 600 0.6875rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.blog-facets__values { display: grid; margin: 0 0 0.625rem; list-style: none; }
.blog-facets__value { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; align-items: center; gap: 0.875rem; min-height: 2.5rem; padding: 0.3125rem 0; color: var(--muted); font-size: 0.875rem; line-height: 1.35; cursor: pointer; transition: color 400ms var(--ease); }
.blog-facets__value:hover { color: var(--wine); }
.blog-facets__value input { display: grid; place-items: center; width: 1rem; height: 1rem; margin: 0; border: 1px solid var(--line-strong); border-radius: 0.25rem; background: transparent; cursor: pointer; appearance: none; transition: background-color 300ms var(--ease), border-color 300ms var(--ease); }
.blog-facets__value input:checked { border-color: var(--wine); background: var(--wine); }
.blog-facets__value input:checked::after { width: 0.5rem; height: 0.28rem; margin-top: -0.125rem; border: solid var(--on-dark); border-width: 0 0 1.5px 1.5px; content: ""; transform: rotate(-45deg); }
.blog-facets__value input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.blog-facets__value:has(input:checked) { color: var(--text); }
.blog-facets__count { color: var(--faint); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.blog-facets__more > summary { display: flex; align-items: center; min-height: 2.5rem; padding-left: 1.875rem; color: var(--wine); font-size: 0.875rem; cursor: pointer; list-style: none; }
.blog-facets__more > summary:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.blog-facets__more[open] > summary { display: none; }
.blog-facets__more > .blog-facets__values { margin-top: 0; }
.blog-facets__apply { justify-self: start; min-height: 2.75rem; margin-top: 1rem; padding: 0 1.5rem; border: 0; border-radius: 999px; background: var(--ink); color: var(--on-dark); font-size: 0.875rem; cursor: pointer; }
.blog-facets__apply[hidden] { display: none; }

/* Подобрано: выбранное над лентой, у каждого крестик */
.blog-chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1rem; margin-bottom: 2.25rem; }
.blog-chosen__label { color: var(--gold-deep); font: 600 0.6875rem/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; }
.blog-chosen__list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; }
.blog-chosen__chip { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; padding: 0 0.875rem 0 1.125rem; border-radius: 999px; background: var(--wine-soft); color: var(--wine-deep); font-size: 0.875rem; text-decoration: none; transition: background-color 400ms var(--ease), color 400ms var(--ease); }
.blog-chosen__chip:hover { background: var(--wine); color: var(--on-dark); }
.blog-chosen__chip :is(svg, i) { width: 0.875rem; height: 0.875rem; }
.blog-chosen__clear { color: var(--muted); font-size: 0.875rem; text-underline-offset: 0.25em; }
.blog-chosen__clear:hover { color: var(--wine); }

/* Заголовок ленты в тёмной сцене и порядок: два слова, у выбранного — золотая черта */
.blog-head { display: grid; justify-items: start; gap: 1.25rem; }
.blog-head:has(~ .blog-feed .blog-empty) .blog-sort { display: none; }
.blog-sort { display: inline-flex; gap: 2rem; margin-top: 0.5rem; }
.blog-sort__option { position: relative; display: inline-flex; align-items: center; min-height: 2.5rem; color: var(--on-dark-faint); font: 500 0.875rem/1 var(--sans); letter-spacing: 0.06em; text-decoration: none; transition: color 400ms var(--ease); }
.blog-sort__option::after { position: absolute; right: 0; bottom: 0.25rem; left: 0; height: 1px; background: var(--gold-light); content: ""; transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease-out); }
.blog-sort__option:hover { color: var(--on-dark); }
.blog-sort__option[aria-current] { color: var(--on-dark); }
.blog-sort__option[aria-current]::after { transform: scaleX(1); }

/* Ровная сетка: три в ряд, на планшете две, на телефоне одна; реклама — строкой на всю ширину */
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.25rem, 3.4vw, 3.25rem) clamp(1.25rem, 2vw, 1.875rem); list-style: none; }
.blog-grid__item, .blog-grid__ad { min-width: 0; }
.blog-grid__ad { grid-column: 1 / -1; }
.blog-tile { height: 100%; }
.blog-tile__link { display: grid; grid-template-rows: auto 1fr; gap: 1.125rem; height: 100%; color: var(--text); text-decoration: none; }
.blog-tile__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--plate); isolation: isolate; }
.blog-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.blog-tile__caption { display: flex; flex-direction: column; gap: 0.625rem; }
.blog-tile__topic { color: var(--gold-deep); font: 600 0.6875rem/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; }
.blog-tile__title { display: -webkit-box; overflow: hidden; font: 400 clamp(1.375rem, 1.75vw, 1.6875rem)/1.18 var(--serif); letter-spacing: -0.005em; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; transition: color 300ms var(--ease); }
.blog-tile__link:hover .blog-tile__title { color: var(--wine); }
.blog-tile__text { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 0.9375rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.blog-tile__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2rem; margin-top: auto; padding-top: 0.375rem; }
.blog-tile__meta { display: flex; flex-wrap: wrap; gap: 0.125rem 0.625rem; color: var(--faint); font: 500 0.6875rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.blog-tile__meta > * + *::before { margin-right: 0.625rem; color: var(--gold); content: "◆"; font-size: 0.4375rem; vertical-align: 0.2em; }
.blog-tile__views { display: inline-flex; align-items: center; gap: 0.3rem; }
.blog-tile__views :is(svg, i) { width: 0.875rem; height: 0.875rem; }
.blog-tile__time { font-variant-numeric: tabular-nums; }
.blog-tile__more { color: var(--text); font-size: 0.8125rem; }
.blog-tile__progress { display: block; height: 2px; overflow: hidden; border-radius: 2px; background: var(--line); }
.blog-tile__progress > span { display: block; width: var(--progress, 0%); height: 100%; background: var(--sage); }
.blog-tile__play { position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: rgba(250, 247, 241, 0.92); color: var(--ink); transform: translate(-50%, -50%); transition: transform 400ms var(--ease-out); }
.blog-tile__play :is(svg, i) { margin-left: 0.15rem; fill: currentColor; }
.blog-tile__link:hover .blog-tile__play { transform: translate(-50%, -50%) scale(1.08); }
/* Метка поверх обложки: вид материала, длина ролика, число уроков */
.blog-badge { position: absolute; z-index: 1; top: 0.875rem; left: 0.875rem; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 1.875rem; padding: 0 0.75rem; border-radius: 999px; background: rgba(28, 25, 22, 0.68); backdrop-filter: blur(8px); color: var(--on-dark); font: 500 0.6875rem/1 var(--sans); letter-spacing: 0.06em; }
.blog-badge :is(svg, i) { width: 0.875rem; height: 0.875rem; color: var(--gold-light); }

/* Навык в ленте и в списке навыков: тёмная карточка — обложка с волнистым краем, первые уроки, «Начать» */
.blog-skill--card { display: grid; grid-template-rows: auto auto auto auto 1fr; height: 100%; overflow: hidden; border-radius: var(--radius); background: var(--ink); color: var(--on-dark); container-type: inline-size; }
.blog-skill__cover { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-2); color: var(--on-dark); text-decoration: none; }
.blog-skill--card .blog-skill__cover { aspect-ratio: 4 / 4.2; }
.blog-skill__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.blog-skill__cover:hover img { transform: scale(1.05); }
.blog-skill__over { position: absolute; inset: auto 0 0; display: grid; gap: 0.375rem; padding: 4rem 1.25rem 1.5rem; background: linear-gradient(180deg, transparent, rgba(28, 25, 22, 0.82)); }
.blog-skill__title { font: 400 clamp(1.375rem, 8cqw, 1.75rem)/1.12 var(--serif); }
.blog-skill__stats { color: var(--on-dark-muted); font-size: 0.75rem; letter-spacing: 0.04em; }
.blog-skill--card .blog-rows { padding: 0.75rem 1.25rem 0; counter-reset: lesson; }
.blog-skill--card .blog-row { border-top: 1px solid var(--line-dark); counter-increment: lesson; }
.blog-skill--card .blog-row:first-child { border-top: 0; }
.blog-skill--card .blog-row__link { grid-template-columns: 1.75rem minmax(0, 1fr); align-items: baseline; gap: 0.5rem; padding: 0.5rem 0; color: var(--on-dark); }
.blog-skill--card .blog-row__link::before { color: var(--gold-light); content: counter(lesson, decimal-leading-zero); font: 500 0.6875rem/1 var(--sans); letter-spacing: 0.06em; }
.blog-skill--card .blog-row__media, .blog-skill--card .blog-row__size, .blog-skill--card .blog-row__text { display: none; }
.blog-skill--card .blog-row__title { display: -webkit-box; overflow: hidden; font: 400 1rem/1.3 var(--serif); -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.blog-skill--card .is-read .blog-row__title { color: var(--on-dark-faint); }
.blog-skill--card .blog-skill__all { display: flex; align-items: center; justify-content: space-between; min-height: 2.5rem; padding: 0 1.25rem; color: var(--gold-light); font-size: 0.8125rem; text-decoration: none; }
.blog-skill--card .blog-skill__all:hover { color: var(--on-dark); }
.blog-skill--card .blog-skill__progress { padding: 0.25rem 1.25rem 0; color: var(--on-dark-muted); }
.blog-skill--card .blog-skill__meter { background: var(--line-dark); }
.blog-skill--card .blog-skill__way { align-self: end; padding: 1rem 1.25rem 1.25rem; }
.blog-skill--card .blog-skill__start { width: 100%; border-color: var(--gold-light); background: var(--gold-light); color: var(--ink); }
.blog-skill--card .blog-skill__start:hover { border-color: var(--on-dark); background: var(--on-dark); }
.blog-skill__way { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.blog-skill__start { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; min-height: 3rem; padding: 0 1.5rem; border: 0; border-radius: 999px; background: var(--ink); color: var(--on-dark); font: 600 0.875rem/1 var(--sans); letter-spacing: 0.03em; text-decoration: none; white-space: nowrap; transition: background-color 400ms var(--ease), color 400ms var(--ease); }
.blog-skill__start:hover { background: var(--wine); }
.blog-skill__start :is(svg, i) { width: 1rem; height: 1rem; color: var(--gold-light); }
.blog-skill__progress { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); font-size: 0.75rem; }
.blog-skill__progress[hidden] { display: none; }
.blog-skill__meter { flex: 1 1 auto; height: 2px; overflow: hidden; border-radius: 2px; background: var(--line); }
.blog-skill__meter > span { display: block; width: var(--progress, 0%); height: 100%; background: var(--sage); }

/* Строки уроков: на странице навыка и рядом с курсом */
.blog-rows { display: grid; list-style: none; }
.blog-row { border-top: 1px solid var(--line); }
.blog-row__link { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 0.875rem 0; color: var(--text); text-decoration: none; }
.blog-row__link:hover .blog-row__title { color: var(--wine); }
.blog-row__media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 0.625rem; background: var(--plate); }
.blog-row__media img { width: 100%; height: 100%; object-fit: cover; }
.blog-row__copy { display: grid; gap: 0.25rem; min-width: 0; }
.blog-row__title { font: 400 1.125rem/1.25 var(--serif); transition: color 240ms var(--ease); }
.blog-row__text { color: var(--muted); font-size: 0.8125rem; }
.blog-row__size { color: var(--faint); font-size: 0.75rem; white-space: nowrap; }
.blog-row__check { position: absolute; inset: 0; display: none; place-items: center; background: rgba(93, 114, 98, 0.78); color: var(--on-dark); }
.is-read .blog-row__check { display: grid; }
.is-read .blog-row__title { color: var(--muted); }
.blog-row__progress { display: block; height: 2px; margin: -0.25rem 0 0.75rem 4.5rem; overflow: hidden; border-radius: 2px; background: var(--line); }
.blog-row__progress[hidden] { display: none; }
.blog-row__progress > span { display: block; width: var(--progress, 0%); height: 100%; background: var(--sage); }
.blog-row--upcoming, .blog-upcoming { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 0; color: var(--faint); font-size: 0.875rem; }
.blog-upcoming__title { flex: 1 1 auto; }

/* Короткие видео сверху ленты */
.blog-shorts { margin-bottom: 2.75rem; }
.blog-shorts__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.blog-shorts__title { color: var(--gold-deep); font: 600 0.6875rem/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; }
.blog-shorts__all { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--text); font-size: 0.8125rem; text-decoration: none; }
.blog-shorts__all:hover { color: var(--wine); }
.blog-shorts__track { display: grid; grid-auto-columns: 10rem; grid-auto-flow: column; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; cursor: grab; }
.blog-shorts__track::-webkit-scrollbar { display: none; }
.blog-shorts__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.blog-shorts__track.is-dragging .blog-short { pointer-events: none; }
.blog-shorts__item { scroll-snap-align: start; }
.blog-short { position: relative; display: grid; gap: 0.625rem; color: var(--text); text-decoration: none; }
.blog-short__media { display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--radius); background: var(--plate); }
.blog-short__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.blog-short:hover .blog-short__media img { transform: scale(1.05); }
.blog-short:hover .blog-short__title { color: var(--wine); }
.blog-short__time { position: absolute; top: 0.625rem; left: 0.625rem; padding: 0.125rem 0.5rem; border-radius: 999px; background: rgba(28, 25, 22, 0.68); color: var(--on-dark); font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.blog-short__title { display: -webkit-box; overflow: hidden; font: 400 1rem/1.25 var(--serif); -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }

/* Страницы ленты: назад, номера, дальше; над ними линия с ромбом */
.blog-pages { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.25rem; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 2.25rem; border-top: 1px solid var(--line-strong); }
.blog-pages::before { position: absolute; top: 0; left: 50%; width: 0.625rem; height: 0.625rem; border: 1px solid var(--gold); background: var(--paper); content: ""; transform: translate(-50%, -50%) rotate(45deg); }
.blog-pages__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.375rem; list-style: none; }
.blog-pages__number { display: grid; place-items: center; min-width: 2.875rem; height: 2.875rem; padding: 0 0.5rem; border-radius: 999px; color: var(--muted); font: 400 1.125rem/1 var(--serif); font-variant-numeric: lining-nums; text-decoration: none; transition: background-color 240ms var(--ease), color 240ms var(--ease); }
a.blog-pages__number:hover { background: var(--plate); color: var(--text); }
.blog-pages__number[aria-current] { background: var(--wine); color: var(--on-dark); }
.blog-pages__gap { min-width: 1.5rem; color: var(--faint); text-align: center; }
.blog-pages__step { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.875rem; padding: 0 0.5rem; color: var(--text); font: 500 0.875rem/1 var(--sans); letter-spacing: 0.04em; text-decoration: none; transition: color 400ms var(--ease); }
a.blog-pages__step:hover { color: var(--wine); }
a.blog-pages__step--previous:hover :is(svg, i) { transform: translateX(-4px); }
a.blog-pages__step--next:hover :is(svg, i) { transform: translateX(4px); }
span.blog-pages__step { opacity: 0.35; }
.blog-pages__step :is(svg, i) { width: 1rem; height: 1rem; color: var(--gold); transition: transform 500ms var(--ease-out); }
.blog-feed { position: relative; }
.blog-empty { padding: 3rem 0; color: var(--muted); }
.blog-feed__about { max-width: 46rem; margin-top: 3rem; color: var(--faint); font-size: 0.8125rem; }
/* Текст под лентой — такие же светлые листы, как главы статьи; строка чтения та же */
.blog-about { display: grid; gap: clamp(0.75rem, 1.2vw, 1rem); margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.blog-about__part { padding: clamp(1.5rem, 4vw, 4rem); border-radius: var(--radius-plate); background: var(--card); }
.blog-about__part > * { max-width: 46rem; }
.blog-about__title { margin-bottom: 1rem; font: 300 clamp(1.875rem, 3vw, 2.5rem)/1.1 var(--serif); }
[data-blog-feed] { transition: opacity 260ms var(--ease); }
[data-blog-hub][data-loading] [data-blog-feed] { opacity: 0.45; }

/* Загрузка: мерцают места, пока не пришли картинки */
.blog-loading { background-color: var(--plate); }
.blog-loading::before { position: absolute; z-index: 0; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(250, 247, 241, 0.7) 50%, transparent 80%); content: ""; pointer-events: none; transform: translateX(-100%); animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* Реклама: место блока; без блока — пунктирная рамка только на локальной копии */
.ad { min-width: 0; }
.ad--draft { display: grid; place-items: center; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--faint); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; }
.ad--blog-list.ad--draft { min-height: 9rem; }
.ad--blog-header.ad--draft, .ad--blog-body-1.ad--draft, .ad--blog-body-2.ad--draft { min-height: 7rem; margin: 2rem 0; }
.ad--blog-header.ad--draft { margin: 0; }

/* Статья: шапка, обложка, текст шириной для чтения, главы с номерами */
.post-page { display: grid; gap: clamp(3.5rem, 7vw, 5.5rem); }
/* Колонка статьи — 54 rem по центру рабочей зоны: лист с полями держит строку чтения около 46 rem */
.blog-hub--post .post-page { width: 100%; max-width: 54rem; margin-inline: auto; }
.post { display: grid; gap: 2rem; }
/* An item of the article's grids is no wider than its column: a wide table scrolls in its own frame on a phone instead of widening the page. */
.post-page > *, .post > *, .post__doc > *, .post__chapter > *, .blog-prose > * { min-width: 0; }
.post__head { display: grid; gap: 1.25rem; max-width: 60rem; }
.post__kicker { flex-wrap: wrap; gap: 0.25rem 0.875rem; }
.post__kicker a { color: inherit; text-decoration: none; }
.post__kicker a:hover { text-decoration: underline; }
.post__kicker span { color: var(--on-dark-faint); }
.post__kicker a + span::before { margin-right: 0.875rem; color: var(--gold-light); content: "◆"; font-size: 0.4375rem; vertical-align: 0.2em; }
.post__title { font: 400 clamp(2.5rem, 5vw, 4.5rem)/1.06 var(--serif); letter-spacing: -0.012em; }
.post__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; color: var(--on-dark-faint); font-size: 0.875rem; }
.post__meta > * + *::before { margin-right: 1rem; color: var(--gold-light); content: "◆"; font-size: 0.4375rem; vertical-align: 0.2em; }
.post__cover { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-plate); background: var(--plate); }
.post__cover img { width: 100%; height: auto; }
.post__media { display: grid; gap: 0.875rem; }
.post__doc { display: grid; gap: clamp(0.75rem, 1.2vw, 1rem); }
/* Статья из листов (как в других блогах фабрики, замечание владельца 16.10.2026): вступление, каждая глава
   и конец статьи — отдельный светлый лист без рамки на бумаге страницы; картинки и вставки стоят внутри листа */
.post__intro, .post__chapter, .post__end { padding: clamp(1.5rem, 4vw, 4rem); border-radius: var(--radius-plate); background: var(--card); }
.post__intro { display: grid; gap: 1.25rem; }
.post__opening { padding-left: 1.5rem; border-left: 2px solid var(--gold); font: 400 clamp(1.3125rem, 2vw, 1.5625rem)/1.5 var(--serif); }
.post__chapter { display: grid; gap: 1.25rem; }
.post__chapter-head { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 1rem; align-items: baseline; }
/* Переход по содержанию: глава встаёт под шапкой целиком, с полем над заголовком */
.post__chapter-title, .blog-about__title, .skill-page__about h2, .blog-course__about h2, .blog-prose h2, .blog-prose h3 { scroll-margin-top: calc(var(--header) + 2rem); }
.post__number { color: var(--gold-deep); font: 400 1.875rem/1 var(--serif); font-variant-numeric: lining-nums; }
.post__chapter-title { font: 400 clamp(1.75rem, 2.8vw, 2.375rem)/1.12 var(--serif); letter-spacing: -0.008em; }
.post__end { display: grid; gap: 1.25rem; }
.post__author { color: var(--muted); font-size: 0.8125rem; }
.post__facets { display: grid; gap: 0.625rem; }
.post__facets-title { color: var(--gold-deep); font: 600 0.6875rem/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; }

/* Слева у статьи: карточка урока и содержание; едут за читателем */
.post-side { margin-left: -1rem; padding-left: 1rem; position: sticky; top: calc(var(--header) + 1.5rem); display: grid; gap: 2.25rem; max-height: calc(100vh - var(--header) - 3rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.post-contents ol { display: grid; list-style: none; }
.post-contents a { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.375rem; min-height: 2.75rem; padding: 0.5rem 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.875rem; line-height: 1.4; text-decoration: none; transition: color 400ms var(--ease); }
.post-contents b { color: var(--gold-deep); font: 400 0.9375rem/1.3 var(--serif); font-variant-numeric: lining-nums; transition: color 400ms var(--ease); }
.post-contents a:hover { color: var(--wine); }
.post-contents a[aria-current] { color: var(--text); font-weight: 600; }
.post-contents a[aria-current] b { color: var(--gold-deep); }
.post-contents a[aria-current]::before { position: absolute; top: 50%; left: -1rem; width: 0.4375rem; height: 0.4375rem; background: var(--gold); content: ""; transform: translateY(-50%) rotate(45deg); }
.lesson-card { display: grid; gap: 0.625rem; }
.lesson-card .side__heading { margin-bottom: 0; }
.lesson-card__skill { font: 400 1.25rem/1.25 var(--serif); text-decoration: none; transition: color 400ms var(--ease); }
.lesson-card__skill:hover { color: var(--wine); }
.lesson-card__way { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; font-size: 0.875rem; }
.lesson-card__way a { color: var(--muted); text-decoration: none; }
.lesson-card__way a:hover { color: var(--wine); }

/* После урока: следующий урок на тёмной полосе */
.onward { position: relative; display: grid; gap: 1.25rem; padding: clamp(1.5rem, 3vw, 2.25rem); overflow: hidden; border-radius: var(--radius-plate); background: var(--ink); color: var(--on-dark); }
.onward .overline { color: var(--gold-light); }
.onward .button { border-color: var(--gold-light); background: var(--gold-light); color: var(--ink); justify-self: start; }
.onward__next { display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; color: var(--on-dark); text-decoration: none; }
.onward__media { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--ink-2); }
.onward__media img { width: 100%; height: 100%; object-fit: cover; }
.onward__copy { display: grid; gap: 0.375rem; }
.onward__title { font: 400 1.5rem/1.2 var(--serif); }
.onward__text { color: var(--on-dark-muted); font-size: 0.875rem; }
.onward__next > span[aria-hidden] { color: var(--gold-light); font-size: 1.25rem; }
.onward__next:hover .onward__title { color: var(--gold-light); }
.onward__foot a { color: var(--on-dark-muted); font-size: 0.8125rem; text-decoration: none; }
.onward__foot a:hover { color: var(--gold-light); }
.related { display: grid; gap: 2rem; }
.related__title { font: 300 clamp(2rem, 3.4vw, 2.75rem)/1.08 var(--serif); }

/* Текст статьи и его вставки */
.blog-prose { display: grid; gap: 1.25rem; font-size: 1.0625rem; line-height: 1.75; }
.blog-prose > * { margin: 0; }
.blog-prose h2 { margin-top: 1rem; font: 400 clamp(1.625rem, 2.6vw, 2.125rem)/1.15 var(--serif); }
.blog-prose h3 { margin-top: 0.75rem; font: 400 1.4375rem/1.25 var(--serif); }
.blog-prose strong { font-weight: 500; }
.blog-prose a { color: var(--text); text-decoration-color: var(--gold); text-decoration-thickness: 1px; transition: color 300ms var(--ease); }
.blog-prose a:hover { color: var(--wine); }
.blog-prose ul, .blog-prose ol { display: grid; gap: 0.625rem; padding-left: 1.375rem; }
.blog-prose li::marker { color: var(--gold); }
.blog-prose blockquote, .blog-quote { position: relative; margin: 0.75rem 0; padding: 0.25rem 0 0.25rem 1.75rem; border-left: 1px solid var(--gold); font: 400 1.4375rem/1.5 var(--serif); }
.blog-quote p + p { margin-top: 0.75rem; }
.blog-rule { width: 100%; height: 1px; margin: 1rem 0; border: 0; background: var(--line-strong); }
.blog-table { width: 100%; overflow-x: auto; }
.blog-prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.blog-prose th, .blog-prose td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.blog-prose tr:last-child td { border-bottom: 0; }
.blog-prose th { background: var(--plate); color: var(--gold-deep); font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; }
.blog-figure { display: grid; gap: 0.75rem; margin: 1rem 0; }
.blog-figure img { width: 100%; border-radius: var(--radius); }
.blog-figure--tall { max-width: 26rem; justify-self: center; }
.blog-figure figcaption { color: var(--faint); font-size: 0.8125rem; }
.blog-media img { width: 100%; }
.blog-media--video { position: relative; display: block; overflow: hidden; border-radius: var(--radius-plate); background: var(--ink); color: var(--on-dark); text-decoration: none; container-type: inline-size; }
.blog-media--video img { aspect-ratio: 16 / 9; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.blog-media--video:hover img { transform: scale(1.03); }
.blog-media__shade { display: none; }
.blog-media__badge { position: absolute; top: 1rem; left: 1rem; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 1.875rem; padding: 0 0.75rem; border-radius: 999px; background: rgba(28, 25, 22, 0.68); backdrop-filter: blur(8px); color: var(--on-dark); font: 500 0.6875rem/1 var(--sans); letter-spacing: 0.06em; }
.blog-media__badge :is(svg, i) { width: 0.875rem; height: 0.875rem; color: var(--gold-light); }
.blog-media__play { position: absolute; top: calc(28.125cqw - 2.25rem); left: calc(50% - 2.25rem); display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: rgba(250, 247, 241, 0.92); color: var(--ink); transition: transform 400ms var(--ease-out); }
.blog-media__play :is(svg, i) { margin-left: 0.15rem; fill: currentColor; }
.blog-media--video:hover .blog-media__play { transform: scale(1.08); }
.blog-media__caption { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem 1.25rem; }
.blog-media__title { font: 400 1.25rem/1.25 var(--serif); }
.blog-media__time { flex: none; color: var(--on-dark-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.blog-insert { display: grid; gap: 1.125rem; margin: 1rem 0; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--radius-plate); background: var(--plate); }
.blog-insert--important, .blog-insert--summary { position: relative; overflow: hidden; background: var(--ink); color: var(--on-dark); }
.blog-insert--important .blog-insert__label, .blog-insert--summary .blog-insert__label { color: var(--gold-light); }
.blog-insert--important :is(li, p, span), .blog-insert--summary :is(li, p, span) { color: rgba(243, 238, 228, 0.9); }
.blog-insert--important li::marker, .blog-insert--summary li::marker { color: var(--gold-light); }
.blog-insert--important a, .blog-insert--summary a { color: var(--gold-light); }
.blog-insert--important strong, .blog-insert--summary strong { color: var(--on-dark); }
.blog-insert__head { display: grid; justify-items: start; gap: 0.375rem; }
.blog-insert__title { font: 400 1.5rem/1.2 var(--serif); }
.blog-insert__label { color: var(--gold-deep); font: 600 0.6875rem/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; }
.blog-steps { display: grid; gap: 1.125rem; list-style: none; }
.blog-steps__item { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.25rem 1rem; }
.blog-steps__number { grid-row: span 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--wine); color: var(--on-dark); font: 400 1.125rem/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.blog-steps__name { font: 400 1.3125rem/1.25 var(--serif); }
.blog-steps__note { color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }
.blog-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1.5rem; list-style: none; }
.blog-numbers__item { display: grid; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--gold); }
.blog-numbers__figure { color: var(--wine); font: 300 3rem/1 var(--serif); font-variant-numeric: lining-nums; }
.blog-numbers__caption { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.blog-numbers__note { color: var(--faint); font-size: 0.8125rem; }
/* The lists of inserts are laid out by their own grids, without the prose list's indent and markers. */
.blog-prose :is(.blog-steps, .blog-numbers, .blog-timeline, .blog-tiles, .blog-calc__steps, .blog-scheme__legend) { padding-left: 0; }
.blog-timeline { display: grid; gap: 1.375rem; list-style: none; }
.blog-timeline__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1rem; align-items: baseline; }
.blog-timeline__label { grid-column: 1; grid-row: 1; font: 400 1.3125rem/1.2 var(--serif); }
.blog-timeline__range { grid-column: 2; grid-row: 1; color: var(--gold-deep); font: 600 0.75rem/1.4 var(--sans); letter-spacing: 0.08em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.blog-timeline__bar { grid-column: 1 / -1; grid-row: 2; display: block; width: 100%; height: 0.5rem; }
.blog-timeline__track { fill: var(--card); }
.blog-timeline__fill { fill: var(--gold); }
.blog-timeline__note { grid-column: 1 / -1; grid-row: 3; color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }
.blog-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0.875rem; list-style: none; }
.blog-tiles__item { display: grid; align-content: start; gap: 0.5rem; padding: 1.125rem 1.25rem 1.25rem; border-radius: var(--radius); background: var(--card); }
.blog-tiles__figure { color: var(--gold-deep); font: 600 0.6875rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.blog-tiles__name { font: 400 1.3125rem/1.2 var(--serif); }
.blog-tiles__note { color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }
/* Расчёт и схема: шаги с числами и итог в кольце */
.blog-calc__steps { display: grid; gap: 1rem; list-style: none; }
.blog-calc__step { display: grid; gap: 0.375rem; }
.blog-calc__note { color: var(--muted); font-size: 0.9375rem; }
.blog-calc__count { margin-right: 0.5rem; color: var(--gold-deep); font: 400 1rem/1 var(--serif); }
.blog-calc__math { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; font: 400 1.25rem/1.4 var(--serif); font-variant-numeric: lining-nums; }
.blog-calc__part, .blog-calc__unit { display: inline-flex; align-items: baseline; gap: 0.375rem; }
.blog-calc__sign { color: var(--faint); }
.blog-calc__term--result b { color: var(--wine); }
.blog-calc__answer { display: flex; align-items: center; gap: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line-strong); }
.blog-calc__orb { position: relative; display: grid; flex: none; place-items: center; width: 4.5rem; height: 4.5rem; }
.blog-calc__ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--gold); stroke-width: 1.5; }
.blog-calc__value { color: var(--wine); font: 400 1.875rem/1 var(--serif); }
.blog-calc__caption { display: grid; gap: 0.25rem; color: var(--muted); font-size: 0.9375rem; }
.blog-scheme__drawing { overflow-x: auto; }
.blog-scheme__drawing svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.blog-scheme__legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 0.625rem; list-style: none; }
.blog-scheme__item { display: flex; align-items: baseline; gap: 0.625rem; }
.blog-scheme__value { color: var(--wine); font: 400 1.375rem/1 var(--serif); }
.blog-scheme__name { color: var(--muted); font-size: 0.875rem; }
.blog-link--external::after { margin-left: 0.15em; content: "↗"; font-size: 0.8em; }

/* Справочник: значения сеткой — знак или обложка и название */
.reference__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.875rem; list-style: none; }
.reference__item { display: grid; gap: 0.625rem; color: var(--text); text-decoration: none; }
.reference__picture { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--plate); transition: background-color 240ms var(--ease); }
.reference__picture img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.reference__mark { color: var(--wine); font: 300 2.5rem/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.reference__name { font: 400 1.0625rem/1.25 var(--serif); text-wrap: balance; transition: color 240ms var(--ease); }
.reference__item:hover .reference__picture { background: var(--plate-deep); }
.reference__item:hover .reference__picture img { transform: scale(1.05); }
.reference__item:hover .reference__name { color: var(--wine); }

/* Страница навыка: обложка, тема, название, текст, прогресс на тёмной полосе, части */
.skill-page, .blog-course { display: grid; gap: 1.5rem; max-width: 52rem; }
.skill-page__cover, .blog-course > .blog-media { margin: 0 0 0.5rem; overflow: hidden; border-radius: var(--radius-plate); background: var(--plate); }
.skill-page__cover img, .blog-course > .blog-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.skill-page__head, .blog-course__head { display: grid; justify-items: start; gap: 1rem; margin-bottom: 0.5rem; }
.skill-page__title, .blog-course__title { font: 400 clamp(2.5rem, 5vw, 4.5rem)/1.06 var(--serif); letter-spacing: -0.012em; }
.skill-page__stats, .blog-course__stats { color: var(--on-dark-faint); font: 600 0.6875rem/1.4 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; }
.skill-page__lead, .blog-course__lead { max-width: 44rem; color: var(--on-dark-muted); font-size: 1.125rem; line-height: 1.6; }
.blog-course__kicker { color: var(--gold-light); }
.blog-course__kicker::before { display: none; }
.blog-course__kicker :is(svg, i) { width: 1rem; height: 1rem; color: var(--gold-light); }
.page-top .pill { background: rgba(243, 238, 228, 0.08); color: var(--on-dark); }
.page-top .pill:hover { background: var(--gold-light); color: var(--ink); }
/* Навык и курс — из тех же листов, что статья */
.skill-page__about, .blog-course__about { padding: clamp(1.5rem, 4vw, 4rem); border-radius: var(--radius-plate); background: var(--card); }
.skill-page__part, .blog-course-side__list, .blog-course-side__save { display: grid; gap: 1rem; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius-plate); background: var(--card); }
.skill-page__part-title, .blog-course-side__heading { font: 400 clamp(1.625rem, 2.6vw, 2rem)/1.15 var(--serif); }
.skill-page__note, .blog-course-side__note { color: var(--muted); font-size: 0.875rem; }
.skill-page__progress, .blog-course-side__save { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.875rem 1.75rem; padding: clamp(1.5rem, 3vw, 2.25rem); overflow: hidden; border: 0; border-radius: var(--radius-plate); background: var(--ink); color: var(--on-dark); }
.skill-page__progress-title, .blog-course-side__title { grid-column: 1; color: var(--gold-light); font: 600 0.6875rem/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; }
.blog-course-side__text { grid-column: 1; color: var(--on-dark-muted); font-size: 0.875rem; }
:is(.skill-page__progress, .blog-course-side__save) .blog-skill__progress { grid-column: 1; color: var(--on-dark-muted); }
:is(.skill-page__progress, .blog-course-side__save) .blog-skill__meter { background: var(--line-dark); }
:is(.skill-page__progress, .blog-course-side__save) .blog-skill__meter > span { background: var(--gold-light); }
.skill-page__progress .skill-page__note { grid-column: 1; color: var(--on-dark-muted); }
.skill-page__progress .blog-skill__start { grid-column: 2; grid-row: 1 / span 3; border-color: var(--gold-light); background: var(--gold-light); color: var(--ink); }
.skill-page__progress .blog-skill__start:hover { border-color: var(--on-dark); background: var(--on-dark); }
.skill-page .blog-rows .blog-row:first-child { border-top: 0; }
.skill-page .blog-row__link { grid-template-columns: 4.25rem minmax(0, 1fr) auto; }
.skill-page .blog-row.is-next .blog-row__title { color: var(--wine); }
.blog-course-side { display: grid; gap: 1.25rem; }
.blog-row--step { border-top: 1px solid var(--line); }
.blog-row--step:first-child { border-top: 0; }
.blog-step { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: baseline; min-height: 2.75rem; padding: 0.625rem 0.25rem 0.625rem 0; color: var(--text); font-size: 0.9375rem; line-height: 1.4; text-decoration: none; }
ul.blog-steps .blog-step { grid-template-columns: minmax(0, 1fr) auto; }
.blog-step:hover .blog-step__title { color: var(--wine); }
.blog-step__number { color: var(--gold-deep); font: 400 1rem/1.4 var(--serif); font-variant-numeric: lining-nums; }
.blog-step__size { color: var(--faint); font-size: 0.75rem; white-space: nowrap; }
.blog-step__check { grid-column: 3; grid-row: 1; color: var(--sage); }
.blog-step__check[hidden] { display: none; }
.is-read .blog-step__title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.is-read .blog-step__size { display: none; }
.is-next .blog-step__title { color: var(--wine); font-weight: 500; }
.blog-steps--upcoming { display: grid; list-style: none; }

/* Круглые кнопки окон */
.blog-round { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: rgba(250, 247, 241, 0.94); color: var(--ink); cursor: pointer; transition: background-color 240ms var(--ease); }
.blog-round:hover { background: var(--gold-light); }
.blog-round:disabled { opacity: 0.4; cursor: default; }

/* Окно видео: экран ролика на тёмном фоне, как у коротких видео в соцсетях */
.blog-player { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; background: transparent; color: var(--on-dark); }
.blog-player::backdrop { background: #14110f; }
.blog-player__surface { position: relative; width: 100%; height: 100%; }
.blog-player__track { height: 100%; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; }
.blog-player__track::-webkit-scrollbar { display: none; }
.blog-player__controls { position: absolute; inset: 0; pointer-events: none; }
.blog-player__controls > * { pointer-events: auto; }
.blog-player__close { position: absolute; top: max(0.75rem, env(safe-area-inset-top)); right: 0.75rem; }
.blog-player__steps { position: absolute; top: 50%; right: 1.25rem; display: grid; gap: 0.625rem; translate: 0 -50%; }
.blog-slide { height: 100%; padding: 3.5rem 1rem 1rem; scroll-snap-align: start; scroll-snap-stop: always; }
.blog-slide__body { display: grid; grid-template-columns: auto auto; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "frame rail" "caption ."; justify-content: center; align-items: end; gap: 0.75rem 0.875rem; height: 100%; }
.blog-slide__frame { grid-area: frame; position: relative; justify-self: end; height: 100%; max-width: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 1rem; background: #000; }
.blog-slide--long .blog-slide__frame { align-self: center; width: min(calc(100vw - 13rem), 60rem); height: auto; max-height: 100%; aspect-ratio: 16 / 9; }
.blog-slide__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.blog-slide__frame.blog-loading { background-color: var(--ink-2); }
.blog-slide__frame.blog-loading::before { z-index: 2; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.08) 50%, transparent 80%); }
.blog-slide__poster { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; background: #000; color: var(--on-dark); cursor: pointer; }
.blog-slide__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.blog-slide__poster span { position: relative; display: grid; place-items: center; width: 3.75rem; height: 3.75rem; border-radius: 50%; background: rgba(250, 247, 241, 0.92); color: var(--ink); }
.blog-slide__poster svg { margin-left: 0.2rem; fill: currentColor; }
.blog-slide__caption { grid-area: caption; display: grid; gap: 0.375rem; width: 0; min-width: 100%; }
.blog-slide__author { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }
.blog-slide__avatar { display: grid; flex: none; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--gold-light); color: var(--ink); font: 400 0.9375rem/1 var(--serif); }
.blog-slide__length { color: var(--on-dark-faint); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.blog-slide__text { display: -webkit-box; overflow: hidden; color: var(--on-dark-muted); font-size: 0.8125rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.blog-slide__rail { grid-area: rail; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding-block-end: 0.25rem; }
.blog-slide__action { display: grid; justify-items: center; gap: 0.3125rem; padding: 0; border: 0; background: none; color: var(--on-dark-muted); font: 400 0.6875rem/1.2 var(--sans); text-decoration: none; cursor: pointer; }
.blog-slide__action svg { box-sizing: content-box; width: 1.25rem; height: 1.25rem; padding: 0.75rem; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: var(--on-dark); transition: background-color 240ms var(--ease), color 240ms var(--ease); }
.blog-slide__action:hover svg, .blog-slide__action[aria-expanded="true"] svg { background: var(--gold-light); color: var(--ink); }
.blog-slide__choice { position: relative; }
.blog-slide__menu { position: absolute; z-index: 3; right: 0; bottom: calc(100% + 0.5rem); display: grid; gap: 0.25rem; min-width: 10rem; padding: 0.5rem; border-radius: var(--radius); background: var(--card); color: var(--text); box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.35); }
.blog-slide__menu[hidden] { display: none; }
.blog-slide__menu-title { margin: 0 0.25rem 0.25rem; color: var(--faint); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; }
.blog-slide__menu button, .blog-video-platform { padding: 0.5rem 0.625rem; border: 0; border-radius: 0.5rem; background: none; color: var(--text); text-align: start; cursor: pointer; }
.blog-slide__menu button:hover, .blog-video-platform:hover { background: var(--gold-pale); }
.blog-notice { margin: 0; padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: rgba(233, 207, 143, 0.18); font-size: 0.8125rem; line-height: 1.45; }
.blog-notice[hidden] { display: none; }
.blog-notice__switch { padding: 0; border: 0; background: none; font: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }

/* Ролики под обложкой статьи и на странице навыка */
.blog-thumbs { display: grid; grid-auto-columns: 8.5rem; grid-auto-flow: column; gap: 0.875rem; overflow-x: auto; list-style: none; scrollbar-width: thin; }
.blog-thumb { position: relative; display: grid; gap: 0.5rem; color: var(--text); text-decoration: none; }
.blog-thumb__picture { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--plate); }
.blog-thumb__picture img { width: 100%; height: 100%; object-fit: cover; }
.blog-thumb__play { position: absolute; top: 0.5rem; left: 0.5rem; display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: rgba(250, 247, 241, 0.94); }
.blog-thumb__title { font-size: 0.8125rem; line-height: 1.35; }
.blog-thumb__time { color: var(--faint); font-size: 0.6875rem; }

/* Страница 404 */
.missing .page-top__inner { justify-items: start; padding-bottom: clamp(4rem, 8vw, 7rem); }

/* Главная: тёмное начало со светом и венком за заголовком. Широкая картинка стоит наполовину в тёмной сцене,
   наполовину на странице: сцена кончается ровно на середине картинки, ниже — та же бумага с зерном, что у
   «Шести дорог». Внизу сцены — винный свет, из которого вырастает вино страницы. Скруглений нет. */
.page--home { --stage-width: min(100vw - 2 * var(--gutter), var(--width) + 4rem); --stage-half: calc(var(--stage-width) * 9 / 32); }
.home-hero { position: relative; display: grid; justify-items: center; padding: calc(var(--header) + clamp(3.5rem, 8vw, 6.5rem)) var(--gutter) calc(var(--stage-half) + clamp(3.5rem, 7vw, 5.5rem)); overflow: hidden; background: radial-gradient(58% 42% at 4% 100%, rgba(128, 26, 44, 0.56), transparent 72%), radial-gradient(52% 38% at 98% 100%, rgba(110, 20, 35, 0.46), transparent 72%), var(--ink); color: var(--on-dark); text-align: center; }
.home-hero__copy { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1.75rem; max-width: 64rem; }
.home-hero .overline { color: var(--gold-light); }
.home-hero__title { font: 400 clamp(2.75rem, 6.2vw, 5.75rem)/1.04 var(--serif); letter-spacing: -0.015em; }
.home-hero__title em { display: block; }
.home-hero__lead { max-width: 40rem; color: var(--on-dark-muted); font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.6; }
.home-hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem 2.5rem; margin-top: 0.5rem; }
/* Венок волосяной линией вокруг заголовка, далеко за словами */
.home-hero__sign { --hair: 0.085; position: absolute; z-index: -1; top: 46%; left: 50%; width: min(48rem, 94vw); color: var(--gold-light); opacity: 0.2; transform: translate(-50%, -50%); pointer-events: none; }
.home-stage { position: relative; z-index: 1; margin-top: calc(-1 * var(--stage-half)); padding: 0 var(--gutter); }
.home-stage__media { --expand: 0; max-width: calc(var(--width) + 4rem); margin: 0 auto; overflow: hidden; clip-path: inset(0 calc((1 - var(--expand)) * 14%)); }
.home-stage__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transform: translate3d(calc(var(--px) * -1.2%), calc(var(--py) * -1.2%), 0) scale(calc(1.14 - 0.12 * var(--expand))); }
.home-section { max-width: var(--width); margin: clamp(5rem, 10vw, 9rem) auto 0; padding: 0 var(--gutter); }
.home-section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.home-section__head .overline { flex-basis: 100%; }
.home-section__head .section-title { flex: 1 1 28rem; max-width: 52rem; }
.home-section__head--center { justify-content: center; text-align: center; }
.home-section__head--center .overline { justify-content: center; }
/* Мысль из книги: крупная прямая антиква по центру под разделителем */
.home-quote { display: grid; justify-items: center; gap: clamp(2rem, 4vw, 3rem); max-width: 64rem; margin: clamp(5rem, 10vw, 8.5rem) auto 0; padding: 0 var(--gutter); }
.home-quote__figure { display: grid; justify-items: center; gap: 1.75rem; margin: 0; }
.home-quote__text { margin: 0; font: 400 clamp(1.75rem, 3.6vw, 3.125rem)/1.24 var(--serif); letter-spacing: -0.01em; text-align: center; }
/* Как устроено обучение: картинка с параллаксом и путь из ромбов (rice tray) */
.home-how { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; max-width: var(--width); margin: clamp(5rem, 10vw, 9rem) auto 0; padding: 0 var(--gutter); }
.home-how__media { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-plate); aspect-ratio: 4 / 5; }
.home-how__frame { position: absolute; inset: -8% 0; display: block; }
.home-how__frame img { width: 100%; height: 100%; object-fit: cover; }
.home-how__copy { display: grid; gap: 1.5rem; }
.path { position: relative; display: grid; gap: 0; margin-top: 1rem; list-style: none; }
.path::before { position: absolute; top: 0.75rem; bottom: 0.75rem; left: 0.4375rem; width: 1px; background: var(--line-strong); content: ""; }
.path__step { position: relative; display: grid; grid-template-columns: 2.5rem 3rem minmax(0, 1fr); gap: 0.25rem 0; padding: 1.125rem 0; }
.path__mark { grid-row: span 2; width: 0.875rem; height: 0.875rem; margin-top: 0.5rem; border: 1px solid var(--gold); background: var(--paper); transform: rotate(45deg); transition: background-color 600ms var(--ease) 300ms; }
.path__step.is-in .path__mark { background: var(--gold); }
.path__number { grid-row: span 2; color: var(--gold-deep); font: 400 1.625rem/1.2 var(--serif); }
.path__title { font: 400 1.625rem/1.2 var(--serif); }
.path__text { grid-column: 3; color: var(--muted); font-size: 0.9375rem; }
/* Шесть дорог — галерея-гармошка (waverun): высокие картинки в ряд, первая раскрыта; под мышью или фокусом
   раскрывается своя, соседние сужаются. Номер и название видны всегда, строка о дороге — у раскрытой.
   Картинки поднимаются снизу одна за другой, когда галерея входит в экран. */
.ways { display: flex; gap: clamp(0.5rem, 0.9vw, 0.875rem); height: clamp(28rem, 40vw, 36rem); list-style: none; }
.ways__item { flex: 1 1 0; min-width: 0; transition: flex-grow 1.1s var(--ease-out); }
.ways__item:first-child, .ways:is(:hover, :focus-within) .ways__item:is(:hover, :focus-within) { flex-grow: 3.4; }
.ways:is(:hover, :focus-within) .ways__item:first-child:not(:hover, :focus-within) { flex-grow: 1; }
.has-motion [data-ways]:not(.is-in) .ways__item { clip-path: inset(100% 0 0 0); }
.has-motion [data-ways] .ways__item { clip-path: inset(0); transition: flex-grow 1.1s var(--ease-out), clip-path 1.3s var(--ease-out) calc(var(--i) * 110ms); }
.way { position: relative; display: block; height: 100%; overflow: hidden; background: var(--ink); color: var(--on-dark); text-decoration: none; }
.way__media { position: absolute; inset: 0; display: block; overflow: hidden; }
.way__media img { width: 100%; height: 100%; object-fit: cover; }
.way__media::after { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28, 25, 22, 0.82), rgba(28, 25, 22, 0.1) 52%, rgba(28, 25, 22, 0) 70%), linear-gradient(to bottom, rgba(28, 25, 22, 0.35), rgba(28, 25, 22, 0) 22%); content: ""; }
.way__caption { position: absolute; right: 0; bottom: 0; left: 0; display: grid; gap: 0.5rem; padding: clamp(1rem, 1.6vw, 1.5rem); }
.way__number { position: absolute; top: clamp(1rem, 1.6vw, 1.5rem); left: clamp(1rem, 1.6vw, 1.5rem); color: var(--gold-light); font: 400 0.9375rem/1 var(--serif); letter-spacing: 0.08em; text-shadow: 0 0 1.5rem rgba(28, 25, 22, 0.6); }
.way__title { font: 400 clamp(1.125rem, 1.5vw, 1.625rem)/1.15 var(--serif); }
.way__text { max-width: 24rem; max-height: 0; overflow: hidden; color: var(--on-dark-muted); font-size: 0.9375rem; line-height: 1.45; opacity: 0; transition: opacity 500ms var(--ease), max-height 700ms var(--ease-out); }
.ways__item:first-child .way__text, .ways:is(:hover, :focus-within) .ways__item:is(:hover, :focus-within) .way__text { max-height: 4.5rem; opacity: 1; transition-delay: 350ms; }
.ways:is(:hover, :focus-within) .ways__item:first-child:not(:hover, :focus-within) .way__text { max-height: 0; opacity: 0; transition-delay: 0ms; }
/* Курсы строками */
.course-rows { list-style: none; }
.course-row { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto 2.75rem; align-items: center; gap: 1.25rem; padding: 1.5rem 1rem; border-top: 1px solid var(--line-strong); color: var(--text); text-decoration: none; transition: background-color 300ms var(--ease); }
.course-rows li:last-child .course-row { border-bottom: 1px solid var(--line-strong); }
.course-row:hover { background: var(--card); }
.course-row__number { color: var(--gold-deep); font: 400 1.875rem/1 var(--serif); }
.course-row__title { font: 400 clamp(1.5rem, 2.8vw, 2.25rem)/1.15 var(--serif); }
.course-row__meta { color: var(--muted); font-size: 0.8125rem; }
.course-row__arrow { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--plate); color: var(--gold-deep); transition: background-color 400ms var(--ease), color 400ms var(--ease); }
.course-row:hover .course-row__arrow { background: var(--wine); color: var(--on-dark); }
/* Три правила блога на тёмном: колонки разделены линиями с треугольниками */
.home-rules { position: relative; margin-top: clamp(5rem, 10vw, 9rem); padding: clamp(4rem, 8vw, 7rem) var(--gutter); overflow: hidden; background: var(--ink); color: var(--on-dark); }
.home-rules > :not(.glow) { position: relative; z-index: 1; max-width: var(--width); margin-inline: auto; }
.home-rules .overline { color: var(--gold-light); }
.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; }
.rule { position: relative; display: grid; align-content: start; gap: 1rem; padding: 0.5rem clamp(1.25rem, 3vw, 2.75rem) 0.5rem; text-align: center; }
.rule + .rule { border-left: 1px solid var(--line-dark); }
.rule + .rule::before { position: absolute; top: 50%; left: -0.3125rem; width: 0; height: 0; border-top: 0.3125rem solid transparent; border-bottom: 0.3125rem solid transparent; border-left: 0.3125rem solid var(--gold-light); content: ""; transform: translateY(-50%); }
.rule__number { color: var(--gold-light); font: 400 2.5rem/1 var(--serif); }
.rule__title { font: 400 clamp(1.625rem, 2.4vw, 2.125rem)/1.15 var(--serif); }
.rule__text { color: var(--on-dark-muted); font-size: 0.9375rem; }

/* Картинки под мышью (waverun): картинка чуть уходит за мышью внутри неподвижной рамки и приближается под ней;
   --px и --py ставит motion.js, а стили дают им плавно догнать мышь и вернуться, когда она ушла. */
@property --px { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --py { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --zoom { syntax: "<number>"; inherits: true; initial-value: 1.04; }
:is(.blog-tile__media, .way__media, .home-how__media, .home-stage__media, .post__cover, .skill-page__cover, .band__frame) { transition: --px 1.6s var(--ease-out), --py 1.6s var(--ease-out), --zoom 1.2s var(--ease-out); }
:is(.blog-tile__media, .way__media, .home-how__frame, .post__cover, .skill-page__cover, .band__frame) img { transform: translate3d(calc(var(--px) * -2.4%), calc(var(--py) * -2.4%), 0) scale(var(--zoom)); }
:is(.blog-tile__link, .way, .home-how__media, .band__frame):hover :is(.blog-tile__media, .way__media), .home-how__media:hover, .band__frame:hover, .post__cover:hover, .skill-page__cover:hover { --zoom: 1.1; }
/* Картинка или полоса вырастает из карточки поменьше, пока входит в экран (--grow, motion.js) */
[data-grow] { transform: scale(calc(0.88 + 0.12 * var(--grow, 1))); transform-origin: 50% 85%; }

/* Появление (motion.js): слова из размытия, блоки снизу, картинки жалюзи. Без скрипта всё видно сразу. */
.has-motion [data-reveal]:not([data-reveal="words"]):not([data-reveal="blinds"]):not(.is-in) { opacity: 0; transform: translateY(1.75rem); }
.has-motion [data-reveal="rise"]:not(.is-in) { filter: blur(16px); }
.has-motion [data-reveal]:not([data-reveal="words"]):not([data-reveal="blinds"]) { transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out), filter 1.1s var(--ease-out); transition-delay: var(--delay, 0ms); }
.word { display: inline-block; }
.has-motion [data-reveal="words"]:not(.is-in) .word { opacity: 0; filter: blur(14px); transform: translateY(0.55em); }
.has-motion [data-reveal="words"] .word { transition: opacity 1.2s var(--ease-out), filter 1.3s var(--ease-out), transform 1.3s var(--ease-out); transition-delay: calc(var(--delay, 0ms) + var(--w, 0) * 95ms); }
.blinds { position: absolute; z-index: 2; inset: 0; display: grid; grid-template-rows: repeat(6, 1fr); pointer-events: none; }
.blinds > span { background: var(--paper); transform-origin: top; transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--b) * 110ms); }
.is-in > .blinds > span { transform: scaleY(0); }
.has-motion .blog-grid > .blog-grid__item:not(.is-in) { opacity: 0; transform: translateY(2.5rem); }
.has-motion .blog-grid > .blog-grid__item { transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--delay, 0ms); }

/* Статья проявляется по мере чтения (blog-article.js): только прозрачность и сдвиг */
[data-arrive] { transition: opacity 640ms var(--ease), transform 640ms var(--ease); }
[data-arrive="waiting"] { opacity: 0; transform: translateY(14px); }
[data-arrive="in"] { opacity: 1; transform: translateY(0); }

/* Ноутбук: сетка в две колонки */
/* Practice: tasks to check oneself and tools (ArticlePractice, blog-practice.js). Without a script a task shows
   its answer under «Ответ»; live, it answers at once. No frames, as everywhere on the site (owner, 17.10.2026):
   answers are soft cards that lift on hover, the choice is gold, right is sage, wrong is wine, each with its mark,
   and the verdict is a plate of its own colour, so it never reads as part of the question. */
.blog-prose :is(.blog-practice, .blog-practice__options, .blog-practice__steps, .blog-practice__matches, .blog-practice__pairs, .blog-practice__bands, .blog-practice__key) { padding-left: 0; }
.blog-insert--practice, .blog-insert--tool { gap: 1.5rem; }
/* What the script hides stays hidden whatever the display of its kind. */
:is(.blog-insert--practice, .blog-insert--tool) [hidden] { display: none !important; }
/* Long answers and lists to choose from never widen the page: every part may shrink to the column. */
.blog-practice, .blog-practice__task, .blog-practice__set, .blog-practice__item, .blog-practice__question { min-width: 0; }
.blog-practice { display: grid; gap: 2.5rem; margin: 0; list-style: none; counter-reset: none; }
.blog-practice__task { position: relative; display: grid; gap: 1rem; }
.blog-practice__number { display: inline-grid; place-items: center; justify-self: start; min-width: 2.25rem; height: 2.25rem; padding: 0 0.5rem; border-radius: 999px; background: var(--ink); color: var(--gold-light); font: 400 0.875rem/1 var(--serif); letter-spacing: 0.04em; }
.blog-practice__set { display: grid; gap: 1rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.blog-practice__question { display: grid; gap: 0.375rem; padding: 0; font: 400 1.3125rem/1.3 var(--serif); }
.blog-practice__hint { color: var(--gold-deep); font: 600 0.6875rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.blog-practice__options, .blog-practice__steps, .blog-practice__matches { display: grid; gap: 0.625rem; margin: 0; list-style: none; }
.blog-practice__item { display: grid; gap: 0.375rem; margin: 0; }
.blog-practice__item::marker { content: none; }
.blog-practice__option, .blog-practice__step, .blog-practice__match { position: relative; display: flex; align-items: center; gap: 0.875rem; min-height: 3.25rem; padding: 0.75rem 1.125rem; border: 0; border-radius: var(--radius); background: var(--card); box-shadow: 0 1px 2px rgba(28, 25, 22, 0.06); line-height: 1.45; transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease); }
.blog-practice__option { cursor: pointer; }
.blog-practice__option:hover:not(:has(input:disabled)) { background: #fff; box-shadow: 0 0.5rem 1.5rem rgba(28, 25, 22, 0.09); transform: translateY(-1px); }
/* Round and square marks drawn by the site: a soft well, filled with wine when chosen. */
.blog-practice__option input { flex: none; display: grid; place-items: center; width: 1.375rem; height: 1.375rem; margin: 0; border-radius: 50%; background: rgba(28, 25, 22, 0.08); appearance: none; cursor: inherit; transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.blog-practice__option input[type="checkbox"] { border-radius: 0.375rem; }
.blog-practice__option input:checked { background: var(--wine); box-shadow: inset 0 0 0 0.3125rem var(--card); }
.blog-practice__option input[type="checkbox"]:checked { box-shadow: none; }
.blog-practice__option input[type="checkbox"]:checked::after { content: ""; width: 0.375rem; height: 0.6875rem; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-0.0625rem) rotate(45deg); }
.blog-practice__option:has(input:checked) { background: var(--gold-pale); box-shadow: none; }
.blog-practice__option:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.blog-practice__option:has(input:disabled) { cursor: default; }
.blog-practice__text { flex: 1 1 auto; min-width: 0; }
.blog-practice__note { margin: 0 0 0.375rem 3.375rem; color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }
/* After the check: the colour of the card and a mark on its right say right or wrong without reading. */
.blog-practice__item.is-right > :is(.blog-practice__option, .blog-practice__step, .blog-practice__match), .blog-practice__item.is-right.blog-practice__step, .blog-practice__item.is-right.blog-practice__match { background: var(--sage-soft); box-shadow: none; }
.blog-practice__item.is-wrong > .blog-practice__option, .blog-practice__item.is-wrong.blog-practice__step, .blog-practice__item.is-wrong.blog-practice__match { background: var(--wine-soft); box-shadow: none; }
.blog-practice__item.is-missed > .blog-practice__option { background: var(--sage-soft); box-shadow: inset 0 0 0 2px rgba(93, 114, 98, 0.35); }
.blog-practice__item:is(.is-right, .is-wrong) > .blog-practice__option::after, .blog-practice__item:is(.is-right, .is-wrong):is(.blog-practice__step, .blog-practice__match)::after { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-left: auto; border-radius: 50%; color: #fff; font: 600 0.8125rem/1 var(--sans); }
.blog-practice__item.is-right > .blog-practice__option::after, .blog-practice__item.is-right:is(.blog-practice__step, .blog-practice__match)::after { content: "✓"; background: var(--sage); }
.blog-practice__item.is-wrong > .blog-practice__option::after, .blog-practice__item.is-wrong:is(.blog-practice__step, .blog-practice__match)::after { content: "✕"; background: var(--wine); }
.blog-practice__item.is-right .blog-practice__note { color: var(--sage); }
.blog-practice__item.is-wrong .blog-practice__note { color: var(--wine-deep); }
.blog-practice__steps { counter-reset: practice-step; }
.blog-practice__step { counter-increment: practice-step; }
.blog-practice__step::before { content: counter(practice-step); flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--ink); color: var(--on-dark); font: 400 0.875rem/1 var(--serif); }
.blog-practice__moves { display: flex; flex: none; gap: 0.375rem; }
.blog-practice__move { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: rgba(28, 25, 22, 0.06); color: var(--ink); cursor: pointer; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); }
.blog-practice__move::before { content: ""; width: 0.5rem; height: 0.5rem; border-top: 1.5px solid currentColor; border-left: 1.5px solid currentColor; transform: translateY(0.125rem) rotate(45deg); }
.blog-practice__move--down::before { transform: translateY(-0.125rem) rotate(225deg); }
.blog-practice__move:hover:not(:disabled) { background: var(--ink); color: var(--gold-light); }
.blog-practice__move:disabled { opacity: 0.3; cursor: default; }
.blog-practice__step:is(.is-right, .is-wrong) .blog-practice__moves { display: none; }
.blog-practice__match { flex-wrap: wrap; }
.blog-practice__match .blog-practice__text { flex-basis: 12rem; font-weight: 600; }
.blog-practice__select { flex: 1 1 14rem; width: 100%; max-width: 100%; min-width: 0; text-overflow: ellipsis; min-height: 2.75rem; padding: 0 2.25rem 0 0.875rem; border: 0; border-radius: 999px; background: rgba(28, 25, 22, 0.06); color: var(--text); font: inherit; }
.blog-practice__select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.blog-practice__pairs { display: grid; gap: 0.375rem; margin: 0; list-style: none; color: var(--muted); }
.blog-practice__pairs li::before { content: "— "; color: var(--gold); }
.blog-practice__grades { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.blog-practice__grade { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.25rem; border: 0; border-radius: 999px; background: var(--card); box-shadow: 0 1px 2px rgba(28, 25, 22, 0.06); cursor: pointer; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); }
.blog-practice__grade input { position: absolute; opacity: 0; pointer-events: none; }
.blog-practice__grade:hover { background: #fff; }
.blog-practice__grade:has(input:checked) { background: var(--ink); color: var(--on-dark); box-shadow: none; }
.blog-practice__grade:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.blog-practice__check, .blog-practice__again, .blog-tool__start, .blog-tool__reset { justify-self: start; display: inline-flex; align-items: center; min-height: 2.875rem; padding: 0 1.5rem; border: 0; border-radius: 999px; background: var(--ink); color: var(--on-dark); font: 600 0.8125rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); }
.blog-practice__check:hover:not(:disabled), .blog-tool__start:hover { background: var(--wine); }
.blog-practice__check:disabled { opacity: 0.35; cursor: default; }
.blog-practice__again, .blog-tool__reset { background: rgba(28, 25, 22, 0.07); color: var(--ink); }
.blog-practice__again:hover, .blog-tool__reset:hover { background: var(--ink); color: var(--on-dark); }
/* The verdict: its own plate under the answers — a mark and a word, then why. */
.blog-practice__verdict { display: grid; gap: 0.625rem; padding: 1.125rem 1.25rem 1.25rem; border-radius: var(--radius); background: var(--card); }
.blog-practice__verdict:empty { display: none; }
.blog-practice__verdict:has(.blog-practice__said.is-right) { background: var(--sage-soft); }
.blog-practice__verdict:has(.blog-practice__said.is-wrong) { background: var(--wine-soft); }
.blog-practice__said { display: flex; align-items: center; gap: 0.625rem; font: 600 0.75rem/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.blog-practice__said::before { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; color: #fff; font: 600 0.875rem/1 var(--sans); letter-spacing: 0; }
.blog-practice__said.is-right { color: var(--sage); }
.blog-practice__said.is-right::before { content: "✓"; background: var(--sage); }
.blog-practice__said.is-wrong { color: var(--wine); }
.blog-practice__said.is-wrong::before { content: "✕"; background: var(--wine); }
.blog-practice__right-label { color: var(--gold-deep); font: 600 0.6875rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.blog-practice__verdict .blog-practice__key { padding-left: 1.25rem; }
.blog-practice__explain { color: var(--text); font: 400 1.0625rem/1.55 var(--serif); }
.blog-practice__answer { padding: 0.875rem 1.125rem; border-radius: var(--radius); background: var(--card); }
.blog-practice__answer summary { color: var(--gold-deep); font: 600 0.75rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.blog-practice__answer[open] summary { margin-bottom: 0.625rem; }
.blog-practice__right { display: grid; gap: 0.375rem; font-weight: 600; }
.blog-practice__key { display: grid; gap: 0.25rem; margin: 0; padding-left: 1.25rem; font-weight: 400; }
.blog-practice__result { display: grid; gap: 0.75rem; }
.blog-practice__result-head { color: var(--gold-deep); font: 600 0.6875rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.blog-practice__bands { display: grid; gap: 0.5rem; margin: 0; list-style: none; }
.blog-practice__band { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0.25rem 1rem; padding: 0.875rem 1.125rem; border: 0; border-radius: var(--radius); background: var(--card); transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.blog-practice__band-range { grid-row: span 2; color: var(--gold-deep); font: 400 1.125rem/1.3 var(--serif); }
.blog-practice__band-title { font-weight: 600; }
.blog-practice__band-text { color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }
.blog-practice__band.is-current { background: var(--gold-pale); box-shadow: 0 0.5rem 1.5rem rgba(28, 25, 22, 0.08); }
.blog-practice__summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--ink); color: var(--on-dark); }
.blog-practice__summary[hidden] { display: none; }
.blog-practice__score { font: 400 1.5rem/1.2 var(--serif); }
.blog-practice__summary .blog-practice__again { background: rgba(255, 255, 255, 0.1); color: var(--on-dark); }
.blog-practice__summary .blog-practice__again:hover { background: var(--gold-light); color: var(--ink); }

/* The plate of «Проверь себя» and of the breathing tool: dark like the scenes of the site, with the wine and gold
   light of the page heads, so a place to act stands out from the light sheets of reading (owner, 17.10.2026). */
.blog-insert--practice, .blog-tool--breathing { background: radial-gradient(70% 55% at 0% 100%, rgba(110, 20, 35, 0.55), transparent 70%), radial-gradient(55% 45% at 100% 0%, rgba(184, 145, 63, 0.22), transparent 70%), var(--ink); color: var(--on-dark); }
.blog-insert--practice { gap: 2rem; padding: clamp(1.5rem, 4vw, 2.75rem); }
.blog-insert--practice .blog-insert__label { color: var(--gold-light); }
.blog-insert--practice .blog-insert__title { color: var(--on-dark); }
.blog-insert--practice .blog-practice { gap: 0; }
.blog-insert--practice .blog-practice__task { gap: 1.125rem; padding: 2.25rem 0; border-top: 1px solid rgba(243, 238, 228, 0.12); }
.blog-insert--practice .blog-practice__task:first-child { padding-top: 0; border-top: 0; }
.blog-insert--practice .blog-practice__task:last-child { padding-bottom: 0; }
.blog-insert--practice .blog-practice__hint { display: flex; align-items: center; gap: 0.75rem; color: var(--gold-light); }
.blog-insert--practice .blog-practice__number { min-width: 0; height: auto; padding: 0.3125rem 0.625rem; background: rgba(233, 207, 143, 0.16); color: var(--gold-light); font: 600 0.6875rem/1 var(--sans); letter-spacing: 0.12em; }
.blog-insert--practice .blog-practice__question { gap: 0.625rem; color: var(--on-dark); }
.blog-insert--practice :is(.blog-practice__option, .blog-practice__step, .blog-practice__match, .blog-practice__grade, .blog-practice__band) { color: var(--text); }
.blog-insert--practice .blog-practice__note { color: rgba(243, 238, 228, 0.66); }
.blog-insert--practice .blog-practice__item.is-right .blog-practice__note { color: #b7cdb8; }
.blog-insert--practice .blog-practice__item.is-wrong .blog-practice__note { color: #eab3ae; }
.blog-insert--practice .blog-practice__verdict { color: var(--text); }
.blog-insert--practice .blog-practice__set { gap: 1.25rem; }
/* A count of ticked points is a note, not an answer: plain text on the plate. */
.blog-insert--practice .blog-practice__verdict:not(:has(.blog-practice__said)) { padding: 0; background: transparent; color: rgba(243, 238, 228, 0.72); font-size: 0.9375rem; }
.blog-insert--practice .blog-practice__check { background: var(--gold-light); color: var(--ink); }
.blog-insert--practice .blog-practice__check:hover:not(:disabled) { background: #f4e2b4; }
.blog-insert--practice .blog-practice__check:disabled { opacity: 0.4; }
.blog-insert--practice .blog-practice__pairs, .blog-insert--practice .blog-practice__result-head { color: rgba(243, 238, 228, 0.72); }
.blog-insert--practice .blog-practice__answer { background: rgba(255, 255, 255, 0.07); color: var(--on-dark); }
.blog-insert--practice .blog-practice__answer summary { color: var(--gold-light); }
.blog-insert--practice .blog-practice__summary { margin-top: 2rem; background: rgba(255, 255, 255, 0.07); }
.blog-insert--practice .blog-practice__summary .blog-practice__again { background: var(--gold-light); color: var(--ink); }
.blog-insert--practice .blog-practice__summary .blog-practice__again:hover { background: #f4e2b4; }

/* Tools. Fields are soft wells without frames; a timer folds its settings away under «Настроить». */
.blog-tool__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.25rem, 1fr)); gap: 0.875rem; }
.blog-tool__field { display: grid; gap: 0.375rem; }
.blog-tool__name { color: var(--muted); font-size: 0.8125rem; line-height: 1.35; }
.blog-tool__input { width: 100%; min-height: 2.875rem; padding: 0 0.875rem; border: 0; border-radius: var(--radius); background: var(--card); box-shadow: inset 0 1px 2px rgba(28, 25, 22, 0.08); color: var(--text); font: 400 1.125rem/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.blog-tool__input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.blog-tool__input:disabled { opacity: 0.6; }
.blog-tool__settings { display: grid; gap: 0.875rem; }
.blog-tool__toggle { display: inline-flex; align-items: center; gap: 0.5rem; justify-self: start; width: max-content; color: var(--gold-deep); font: 600 0.75rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; list-style: none; cursor: pointer; }
.blog-tool__toggle::-webkit-details-marker { display: none; }
.blog-tool__toggle::after { content: ""; width: 0.4375rem; height: 0.4375rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.125rem) rotate(45deg); transition: transform 0.25s var(--ease); }
.blog-tool__settings[open] .blog-tool__toggle::after { transform: translateY(0.125rem) rotate(225deg); }
.blog-tool__stage { display: grid; gap: 1.125rem; }
.blog-tool__result { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; margin: 0; }
.blog-tool__result div { display: grid; gap: 0.375rem; padding: 1rem 1.125rem; border-radius: var(--radius); background: var(--card); }
.blog-tool__result dt { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.blog-tool__result dd { margin: 0; color: var(--wine); font: 300 clamp(1.75rem, 3.4vw, 2.5rem)/1.05 var(--serif); font-variant-numeric: lining-nums; }
.blog-tool__result div:not(:first-child) dd { color: var(--ink); font-size: clamp(1.375rem, 2.6vw, 1.75rem); }
/* The two parts of the bar under the result: one's own money in ink, what the interest brought in gold. */
.blog-tool--compound-interest .blog-tool__result div:not(:first-child) dt::before { content: ""; display: inline-block; width: 0.625rem; height: 0.625rem; margin-right: 0.5rem; border-radius: 2px; background: var(--ink); vertical-align: 0.05em; }
.blog-tool--compound-interest .blog-tool__result div:nth-child(3) dt::before { background: var(--gold); }
.blog-tool__bar { display: block; width: 100%; height: 0.75rem; border-radius: 999px; overflow: hidden; }
.blog-tool__bar-own { fill: var(--ink); }
.blog-tool__bar-gain { fill: var(--gold); }
.blog-tool__note, .blog-tool__plan, .blog-tool__hint { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }

/* Breathing: a dark plate, words on the left, the circle on the right; the circle itself starts and stops. */
.blog-tool--breathing { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head breath" "plan breath" "hint breath" "settings breath"; align-content: center; align-items: center; gap: 0.875rem 3rem; }
.blog-tool--breathing .blog-insert__head { grid-area: head; }
.blog-tool--breathing .blog-insert__label { color: var(--gold-light); }
.blog-tool--breathing .blog-insert__title { color: var(--on-dark); }
.blog-tool--breathing .blog-tool__stage { display: contents; }
.blog-tool--breathing .blog-tool__plan { grid-area: plan; color: rgba(243, 238, 228, 0.82); }
.blog-tool--breathing .blog-tool__hint { grid-area: hint; color: var(--gold-light); }
.blog-tool--breathing .blog-tool__settings { grid-area: settings; }
.blog-tool--breathing .blog-tool__toggle { color: rgba(243, 238, 228, 0.7); }
.blog-tool--breathing .blog-tool__name { color: rgba(243, 238, 228, 0.66); }
.blog-tool--breathing .blog-tool__input { background: rgba(255, 255, 255, 0.08); box-shadow: none; color: var(--on-dark); }
.blog-tool--breathing .blog-tool__form { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); }
.blog-tool__breath { grid-area: breath; position: relative; display: grid; place-items: center; width: clamp(10rem, 22vw, 13rem); aspect-ratio: 1; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.blog-tool__breath:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }
.blog-tool__arc { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.blog-tool__arc circle { fill: none; stroke-width: 1.5; }
.blog-tool__arc-track { stroke: rgba(233, 207, 143, 0.18); }
.blog-tool__arc-run { stroke: var(--gold-light); stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; }
.blog-tool__circle { position: absolute; inset: 9%; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #fbf1d6, var(--gold-light) 55%, var(--gold) 100%); box-shadow: 0 0 3rem rgba(233, 207, 143, 0.35); transform: scale(0.62); transition: box-shadow 0.4s var(--ease); }
.blog-tool__breath:hover .blog-tool__circle { box-shadow: 0 0 4rem rgba(233, 207, 143, 0.55); }
.blog-tool__phase { position: relative; font: 400 1.375rem/1.2 var(--serif); text-align: center; }
.blog-tool__count { position: absolute; bottom: 30%; color: var(--wine-deep); font: 400 0.9375rem/1 var(--serif); font-variant-numeric: lining-nums; }

.blog-tool__clock { display: grid; justify-items: center; gap: 0.5rem; padding: 1.5rem 1rem; border-radius: var(--radius); background: var(--ink); color: var(--on-dark); }
.blog-tool__clock .blog-tool__phase { color: var(--gold-light); font-size: 1.125rem; }
.blog-tool__time { font: 300 clamp(3.25rem, 9vw, 5rem)/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.blog-tool__round { color: var(--on-dark-muted); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; }
.blog-tool__controls { display: flex; flex-wrap: wrap; gap: 0.625rem; }
@media (max-width: 40rem) {
    .blog-practice__question { font-size: 1.1875rem; }
    .blog-practice__option, .blog-practice__step, .blog-practice__match { padding: 0.75rem 0.875rem; }
    .blog-practice__note { margin-left: 3.125rem; }
    .blog-practice__band { grid-template-columns: 2.75rem minmax(0, 1fr); }
    .blog-tool__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blog-tool--breathing { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "breath" "plan" "hint" "settings"; justify-items: stretch; }
    .blog-tool__breath { justify-self: center; width: min(70vw, 14rem); }
    .blog-tool--breathing .blog-tool__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .blog-tool__circle { transform: none; }
}

@media (max-width: 80rem) {
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Планшет и телефон: левая колонка — выезжающая панель, её открывает капсула внизу экрана */
@media (max-width: 64rem) {
    .blog-hub__layout { grid-template-columns: minmax(0, 1fr); }
    .blog-hub__start { position: fixed; z-index: 60; top: 0; bottom: 0; left: 0; width: min(24rem, 90vw); gap: 1rem; padding: 0 1rem calc(2rem + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background: var(--paper); box-shadow: 1.5rem 0 3rem rgba(28, 25, 22, 0.18); visibility: hidden; transform: translateX(-104%); transition: transform 460ms var(--ease-out), visibility 0s linear 460ms; }
    .blog-hub__start:target, [data-panel-open] .blog-hub__start { visibility: visible; transform: none; transition: transform 460ms var(--ease-out), visibility 0s; }
    .blog-panel__head { position: sticky; z-index: 1; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 -1rem; padding: 0.875rem 1rem; border-bottom: 1px solid var(--line); background: var(--paper); }
    .blog-panel__title { color: var(--gold-deep); font: 600 0.75rem/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; }
    .blog-panel__close { display: grid; place-items: center; width: 2.875rem; height: 2.875rem; border: 1px solid var(--line); border-radius: 50%; color: var(--text); }
    .blog-panel-shade { position: fixed; z-index: 55; inset: 0; display: block; background: rgba(28, 25, 22, 0.48); opacity: 0; pointer-events: none; transition: opacity 400ms var(--ease); }
    .blog-hub:has(.blog-hub__start:target) .blog-panel-shade, [data-panel-open] .blog-panel-shade { opacity: 1; pointer-events: auto; }
    .blog-panel-open { position: fixed; z-index: 50; bottom: calc(1rem + env(safe-area-inset-bottom)); left: 50%; display: inline-flex; align-items: center; gap: 0.625rem; min-height: 3.125rem; padding: 0 1.5rem; border-radius: 999px; background: var(--ink); color: var(--on-dark); font: 500 0.875rem/1 var(--sans); text-decoration: none; box-shadow: 0 1rem 2.5rem rgba(28, 25, 22, 0.32); transform: translateX(-50%); transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
    .blog-panel-open :is(svg, i) { color: var(--gold-light); }
    .blog-hub:has(.blog-hub__start:target) .blog-panel-open, [data-panel-open] .blog-panel-open { opacity: 0; pointer-events: none; transform: translate(-50%, 1rem); }
    .post-side { position: static; max-height: none; margin-left: 0; padding-left: 0; overflow: visible; }
    .to-top { bottom: calc(1rem + env(safe-area-inset-bottom)); }
    .blog-hub { padding-bottom: 4rem; }
    .home-how { grid-template-columns: minmax(0, 1fr); }
    .home-how__media { aspect-ratio: 4 / 3; }
    .rules { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .rule + .rule { padding-top: 2.5rem; border-top: 1px solid var(--line-dark); border-left: 0; }
    .rule + .rule::before { top: -0.3125rem; left: 50%; border-top: 0.3125rem solid var(--gold-light); border-right: 0.3125rem solid transparent; border-bottom: 0; border-left: 0.3125rem solid transparent; transform: translateX(-50%); }
}

/* Телефон: всё в одну колонку */
@media (max-width: 40rem) {
    :root { --header: 4rem; }
    .site-header__bar { gap: 0.75rem; }
    .wordmark__name { font-size: 1.125rem; }
    .site-nav ul { padding: 0.25rem; }
    .site-nav__link { min-height: 2.25rem; padding: 0 0.875rem; }
    .site-nav li:first-child { display: none; }
    .site-header__search { width: 2.5rem; height: 2.5rem; }
    .blog-grid { grid-template-columns: minmax(0, 1fr); }
    .blog-pages { gap: 0.75rem; }
    .blog-pages__step { width: 2.875rem; padding: 0; justify-content: center; }
    .blog-pages__step span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .blog-pages__list { order: -1; flex-basis: 100%; }
    .blog-skill--card .blog-skill__cover { aspect-ratio: 4 / 3; }
    .band, .band--picture { grid-template-columns: minmax(0, 1fr); }
    .band__frame { display: none; }
    .band__link { justify-self: start; }
    .course-row { grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; padding-inline: 0.25rem; }
    .course-row__meta { grid-column: 2; }
    .course-row__arrow { grid-column: 3; grid-row: 1; }
    .site-footer__inner { grid-template-columns: minmax(0, 1fr); }
    .post__chapter-head { grid-template-columns: 2.5rem minmax(0, 1fr); }
    .post__opening { padding-left: 1.125rem; }
    .post__intro, .post__chapter, .post__end, .blog-about__part, .skill-page__about, .blog-course__about { padding: 1.5rem 1.25rem; }
    .blog-prose blockquote, .blog-quote { padding-left: 1.25rem; font-size: 1.3125rem; }
    .onward__next { grid-template-columns: 4.5rem minmax(0, 1fr); }
    .onward__next > span[aria-hidden] { display: none; }
    .skill-page__progress, .blog-course-side__save { grid-template-columns: minmax(0, 1fr); }
    .skill-page__progress .blog-skill__start { grid-column: 1; grid-row: auto; width: 100%; }
    .skill-page .blog-row__link { grid-template-columns: 3.5rem minmax(0, 1fr); }
    .skill-page .blog-row__size, .skill-page .blog-row__text { display: none; }
    .reference__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
    .reference__mark { font-size: 1.875rem; }
    .reference__name { font-size: 0.9375rem; }
    .page--home { --stage-half: calc(var(--stage-width) * 3 / 8); }
    .home-hero__sign { width: 150vw; opacity: 0.24; }
    .home-stage__media { clip-path: none; }
    .home-stage__media img { aspect-ratio: 4 / 3; transform: none; }
    .ways { height: auto; gap: 0.75rem; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .ways::-webkit-scrollbar { display: none; }
    .ways__item, .ways__item:first-child, .ways:is(:hover, :focus-within) .ways__item:is(:hover, :focus-within) { flex: 0 0 74%; height: 27rem; scroll-snap-align: center; }
    .way__text, .ways__item:first-child .way__text, .ways:is(:hover, :focus-within) .ways__item .way__text { max-height: none; opacity: 1; }
    .path__step { grid-template-columns: 2rem 2.5rem minmax(0, 1fr); }
    .path__title { font-size: 1.375rem; }
    .blog-slide { padding: 3.25rem 0.75rem 0.75rem; }
    .blog-slide__body { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "frame frame" "caption rail"; align-items: start; }
    .blog-slide__frame { justify-self: center; }
    .blog-slide--long .blog-slide__frame { width: 100%; }
    .blog-slide__caption { width: auto; min-width: 0; }
    .blog-slide__rail { flex-direction: row; gap: 0.75rem; padding: 0; }
    .blog-player__steps { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
    [data-arrive="waiting"] { opacity: 1; transform: none; }
    .shine, .blog-head__title { background-position: 25% 0; }
}