@font-face {
    font-family: "PT Mono";
    src: url("../../fonts/PTMono-Regular.3b9b5e51ff62.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "PT Mono";
    src: url("../../fonts/PTMono-Bold.b61fefbd4992.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.article-page {
    --article-ink: #24252a;
    --article-muted: #657078;
    --article-teal: #08c2cf;
    --article-teal-dark: #087e86;
    --article-yellow: #f8ca73;
    --article-line: #dce5e1;
    min-width: 0;
    padding: 38px 0 92px;
    color: var(--article-ink);
    background: #f4f7f4;
    font-family: Montserrat, "Montserrat-Alternates", sans-serif;
}

.article-page__container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.article-breadcrumbs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; color: #84908a; font-size: 12px; font-weight: 700; }
.article-breadcrumbs a { color: var(--article-teal-dark); }
.article-breadcrumbs a:hover { text-decoration: underline; }
.article-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; padding: 0 2px 26px; }
.article-heading__copy { min-width: 0; max-width: 940px; }
.article-heading h1 { max-width: 900px; margin: 0; font-size: clamp(32px, 4.1vw, 50px); line-height: 1.06; letter-spacing: -.04em; overflow-wrap: break-word; text-wrap: balance; }
.article-heading__summary { max-width: 780px; margin: 14px 0 0; color: var(--article-muted); font-size: 17px; line-height: 1.55; }
.article-byline { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; color: #708079; font-size: 11px; font-weight: 700; }
.article-byline span + span::before { content: ""; width: 4px; height: 4px; display: inline-block; margin: 0 11px 2px 0; background: #a7b4ae; border-radius: 50%; }
.article-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.article-tags span { padding: 6px 9px; color: #466058; background: #e9efeb; border-radius: 8px; font-size: 9px; font-weight: 800; }
.article-heading .article-share { width: auto; height: auto; min-height: 44px; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 0 16px 0 13px; color: var(--article-ink); background: #fff; border: 1px solid #ced9d3; border-radius: 999px; box-shadow: 0 10px 25px rgba(30, 57, 49, .08); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .12s ease; }
.article-heading .article-share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.article-heading .article-share:active { transform: scale(.96); }
.article-heading .article-share::after { content: none; }
.article-heading .article-share:hover,
.article-heading .article-share:focus-visible { color: #fff; background: var(--article-teal-dark); border-color: var(--article-teal-dark); outline: none; }

.article-action { min-height: 48px; display: inline-flex; align-items: center; gap: 10px; padding: 12px 15px; color: var(--article-ink); background: #f4f7f4; border: 1px solid #d7dfdb; border-radius: 12px; font: inherit; font-size: 11px; font-weight: 820; text-align: left; cursor: pointer; }
.article-action:hover,
.article-action:focus-visible { background: #e9f8f9; border-color: rgba(8,194,207,.54); outline: none; }
.article-action--tasks { color: #fff; background: var(--article-teal); border-color: var(--article-teal); }
.article-action--tasks:hover,
.article-action--tasks:focus-visible { color: #fff; background: var(--article-teal-dark); border-color: var(--article-teal-dark); }
.article-action.is-complete { color: #087e56; background: #e1f5eb; border-color: #b2ddc7; }
.article-action.is-complete:hover,
.article-action.is-complete:focus-visible { color: #066b49; background: #ccebdc; border-color: #8fcfaf; }
.article-action--locked { color: #59655f; background: #f5f6f5; }
.article-action__icon { min-width: 25px; color: currentColor; font-family: "PT Mono", monospace; font-size: 15px; font-weight: 900; text-align: center; }
.article-action__checkbox { width: 24px; height: 24px; display: inline-grid; flex: 0 0 24px; place-items: center; color: currentColor; }
.article-action__checkbox svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.article-action__checkbox path { opacity: 0; transform: scale(.72); transform-origin: center; transition: opacity .16s ease, transform .16s ease; }
.article-action__checkbox.is-checked path { opacity: 1; transform: scale(1); }
.article-action__count { min-width: 44px; height: 28px; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; padding: 0 7px; color: #fff; background: rgba(0, 0, 0, .12); border: 1px solid rgba(255, 255, 255, .52); border-radius: 8px; font: 700 12px/1 "PT Mono", monospace; letter-spacing: -.03em; }
.article-action--tasks.is-complete .article-action__count { color: #087e56; background: rgba(8, 126, 86, .08); border-color: rgba(8, 126, 86, .34); }
.article-action__lock { width: 21px; height: 21px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.article-reading-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: 26px; }
.article-reading-surface { min-width: 0; padding: clamp(30px, 5vw, 64px); background: #fff; border: 1px solid var(--article-line); border-radius: 26px; box-shadow: 0 20px 60px rgba(23, 47, 42, .08); }
.article-reading-surface.article-content { color: #263832; font-size: 17px; line-height: 1.78; }
.article-reading-surface :target,
.article-reading-surface [id] { scroll-margin-top: 24px; }

/* Колонка тянется на всю высоту статьи, чтобы оглавление в ней могло «прилипать». */
.article-sidebar { align-self: stretch; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.article-expertise { padding: 24px; background: #24252a; border-radius: 22px; color: #fff; box-shadow: 0 18px 42px rgba(6,17,37,.16); }
.article-action--video { color: #fff; background: #ff0000; border-color: #ff0000; line-height: 1.5; }
.article-action--video:hover,
.article-action--video:focus-visible { color: #fff; background: #cc0000; border-color: #cc0000; }
.article-action__youtube { width: 26px; height: 26px; flex: 0 0 26px; }
.article-course-promo { min-width: 0; padding: 24px; color: var(--article-ink); background: linear-gradient(145deg, #fff8e8, #f8ecd0); border: 1px solid #ebd9b2; border-radius: 22px; }
.article-course-promo__eyebrow { margin: 0 0 12px; color: #765820; font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.article-course-promo h2 { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: -.025em; overflow-wrap: anywhere; }
.article-course-promo__description { margin: 12px 0 0; color: #665b48; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.article-course-promo__cta { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding: 12px 16px; color: #fff; background: #24252a; border-radius: 12px; font-size: 12px; font-weight: 800; }
.article-course-promo__cta:hover,
.article-course-promo__cta:focus-visible { color: #fff; background: #087e86; outline: 2px solid #087e86; outline-offset: 3px; }
.article-expertise h2 { margin: 0 0 8px; color: var(--article-yellow); font-size: 10px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.article-author { display: grid; gap: 5px; padding: 0 0 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.article-author strong { font-size: 17px; line-height: 1.35; }
.article-author a { color: #fff; font-size: 17px; font-weight: 800; line-height: 1.35; text-decoration: underline; text-decoration-color: rgba(255,255,255,.42); text-underline-offset: 3px; }
.article-author span { color: #c2ccc7; font-size: 11px; line-height: 1.5; }
.article-expertise__actions { display: grid; gap: 10px; margin-top: 16px; }
.article-expertise__actions form { margin: 0; }
.article-expertise__actions form,
.article-expertise__actions .article-action { width: 100%; }

.article-literature { margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--article-line); }
.article-literature h2 { margin: 0 0 18px; color: #173b2e; font-size: clamp(23px, 3vw, 30px); line-height: 1.25; }
.article-literature ol { display: grid; gap: 10px; margin: 0; padding-left: 24px; }
.article-literature li { padding-left: 4px; color: #50635b; font-size: 14px; line-height: 1.55; }
.article-literature a { color: var(--article-teal-dark); overflow-wrap: anywhere; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-literature a:hover,
.article-literature a:focus-visible { color: #055c62; outline: none; }

.article-toc { margin: 0 0 34px; overflow: hidden; border: 1px solid #d8e4de; border-radius: 16px; background: #f7faf8; }
.article-toc summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; color: #173b2e; cursor: pointer; list-style: none; }
.article-toc summary::-webkit-details-marker { display: none; }
.article-toc summary::after { content: "+"; margin-left: auto; color: var(--article-teal-dark); font: 800 20px/1 "PT Mono", monospace; }
.article-toc[open] summary::after { content: "−"; }
.article-toc summary span { font-size: 14px; font-weight: 850; }
.article-toc nav { padding: 0 16px 15px; border-top: 1px solid #e1e9e5; }
.article-toc ol { display: grid; gap: 1px; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: toc-section; }
.article-toc li { counter-increment: toc-section; }
.article-toc li a { min-height: 40px; display: flex; align-items: center; gap: 9px; padding: 7px 5px; color: #31594a; font-size: 13px; font-weight: 700; line-height: 1.35; text-decoration: none; }
.article-toc li a::before { content: counter(toc-section); color: #789087; font: 700 10px/1 "PT Mono", monospace; }
.article-toc li a:hover,
.article-toc li a:focus-visible { color: var(--article-teal-dark); text-decoration: underline; text-underline-offset: 3px; outline: none; }
.article-toc__level-3 { padding-left: 25px; }

/* Оглавление в правой колонке: закреплено и подсвечивает раздел, который сейчас на экране. */
.article-toc-rail { position: sticky; top: 24px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; min-height: 0; padding: 18px 8px 12px 18px; background: #fff; border: 1px solid var(--article-line); border-radius: 22px; box-shadow: 0 14px 36px rgba(23, 47, 42, .06); }
.article-toc-rail__title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 10px 10px 0; color: #173b2e; font-size: 13px; font-weight: 850; }
.article-toc-rail__progress { color: var(--article-teal-dark); font: 700 11px/1 "PT Mono", monospace; font-variant-numeric: tabular-nums; }
.article-toc-rail ol { min-height: 0; margin: 0; padding: 0 6px 0 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; scrollbar-width: thin; }
.article-toc-rail a { position: relative; display: block; padding: 7px 8px 7px 14px; color: #5d6f67; border-radius: 8px; font-size: 12px; font-weight: 650; line-height: 1.4; text-decoration: none; transition: color .16s ease, background-color .16s ease; }
.article-toc-rail a::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; background: #e2ebe6; border-radius: 3px; transition: background-color .16s ease, transform .2s ease; }
.article-toc-rail a:hover,
.article-toc-rail a:focus-visible { color: var(--article-teal-dark); background: #f1f8f7; outline: none; }
.article-toc-rail a.is-active { color: #12372c; font-weight: 800; }
.article-toc-rail a.is-active::before { background: var(--article-teal); transform: scaleY(1.25); }
.article-toc-rail__level-3 a { padding-left: 26px; font-size: 11.5px; }
.article-toc-rail__level-3 a::before { left: 12px; }

/* Полоса прогресса чтения под верхним краем окна. */
.article-progress { position: fixed; inset: 0 0 auto; z-index: 60; height: 3px; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.article-progress.is-visible { opacity: 1; }
.article-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--article-teal, #08c2cf), #3fd69b); transform: scaleX(var(--article-progress, 0)); transform-origin: left center; }

@media (min-width: 931px) {
    .article-toc { display: none; }
    .article-reading-surface > .article-toc + * { margin-top: 0; }
}

.article-lesson-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.article-lesson-navigation > a { min-width: 0; display: grid; gap: 5px; padding: 18px 20px; color: inherit; background: #fff; border: 1px solid var(--article-line); border-radius: 16px; }
.article-lesson-navigation > a:hover,
.article-lesson-navigation > a:focus-visible { background: #edfafb; border-color: rgba(8,194,207,.48); outline: none; }
.article-lesson-navigation span { color: var(--article-teal-dark); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.article-lesson-navigation strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.article-lesson-navigation .is-next { text-align: right; }

@media (max-width: 930px) {
    .article-reading-layout { grid-template-columns: 1fr; }
    .article-toc-rail { display: none; }
}

@media (max-width: 660px) {
    .article-page { padding: 18px 0 54px; }
    .article-page__container { width: min(100% - 20px, 1180px); }
    .article-breadcrumbs { gap: 6px; margin-bottom: 13px; font-size: 10px; line-height: 1.45; }
    .article-heading { gap: 10px; padding: 0 0 20px; }
    .article-heading h1 { font-size: clamp(26px, 7.4vw, 34px); line-height: 1.1; letter-spacing: -.035em; }
    .article-heading__summary { margin-top: 12px; font-size: 15px; line-height: 1.5; }
    .article-byline { gap: 6px 10px; margin-top: 12px; }
    .article-byline span + span::before { display: none; }
    .article-tags { margin-top: 10px; }
    .article-heading .article-share { width: 44px; height: 44px; padding: 0; justify-content: center; }
    .article-heading .article-share span { display: none; }
    .article-reading-layout { gap: 16px; }
    .article-reading-surface { padding: 22px 16px; border-radius: 18px; }
    .article-reading-surface.article-content { font-size: 16px; line-height: 1.72; }
    .article-expertise { padding: 20px; border-radius: 18px; }
    .article-action { width: 100%; }
    .article-page button,
    .article-page [role="button"],
    .article-page summary,
    .article-page .article-lesson-navigation > a { min-height: 44px; }
    .article-toc { margin-bottom: 26px; border-radius: 14px; }
    .article-toc summary { min-height: 44px; padding: 10px 13px; }
    .article-toc nav { padding: 0 12px 11px; }
    .article-toc li a { min-height: 44px; }
    .article-toc__level-3 { padding-left: 17px; }
    .article-lesson-navigation { grid-template-columns: 1fr; }
    .article-lesson-navigation .is-next { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .article-heading .article-share,
    .article-toc-rail a,
    .article-toc-rail a::before,
    .article-progress { transition: none; }
}