/*
 * The article page in the redesign (2026-10-30), with article.php. Loaded
 * instead of single.css when the new chrome is on, after chrome.css (which
 * holds the tokens). Source: design/projects/article/proto/article.html and
 * the "Reading" section of design/DESIGN.md.
 *
 * style.css still loads for every page and sets bare h1-h6, p, a, ul and ol
 * per breakpoint; everything here is scoped to the article's own blocks, so
 * it wins on specificity and the old rules cannot leak in.
 */

.wg-v2.single-post {--arrow: var(--ch-arrow); --chev: var(--ch-chev);}
.ar-shell, .ar-more, .ct-bar {font-family: var(--sans); color: var(--graphite);}
.ar-shell *, .ar-more *, .ct-bar * {box-sizing: border-box;}
.ar-shell img, .ar-more img {display: block; max-width: 100%; height: auto;}

.ar-shell {display: flex; flex-direction: column; padding: 0 16px;}
/* On a phone the column wrappers dissolve: crumbs, title, cover, text. */
.ar-main, .ar-side {display: contents;}
.ar-head {order: 1;}
.ar-cover {order: 2;}
.ar-body {order: 3;}
.ar-aside {order: 4;}

/* ---------- first screen: title, byline, cover ---------- */
.ar-head {padding: 16px 0 0;}
.ar-head h1 {margin: 0; padding: 0; font-size: 32px; line-height: 1.08; font-weight: 700; letter-spacing: -.03em; color: var(--graphite); text-align: left; text-wrap: balance;}
.byline {display: flex; align-items: center; gap: 12px; margin: 18px 0 0;}
.byline img {flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover;}
.byline a {color: var(--graphite); font-weight: 600; font-size: 15.5px; text-decoration: none;}
.byline a:hover {color: var(--form-deep); text-decoration: underline; text-underline-offset: .18em;}
.byline p {margin: 0; font-size: 13.5px; line-height: 1.35; color: var(--graphite-2);}
/* Phone: 16:9, so the text starts on the first screen. */
.ar-cover {margin: 16px 0 0;}
.ar-cover img {width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: var(--field);}

/* ---------- contents: a closed panel on a phone, a list on the right on desktop ---------- */
.toc-m {margin: 0 0 24px; border: 1px solid var(--rule); border-radius: 10px; background: var(--field);}
.toc-m summary {display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 16px; font-weight: 600; cursor: pointer; list-style: none;}
.toc-m summary::-webkit-details-marker {display: none;}
.toc-m summary::after {content: ''; width: 18px; height: 18px; background: var(--form); -webkit-mask: var(--chev); mask: var(--chev); transition: transform .25s var(--ease);}
.toc-m[open] summary::after {transform: rotate(180deg);}
.ar-shell .toc-list {list-style: none; margin: 0; padding: 0 16px 12px; counter-reset: toc;}
.ar-shell .toc-list li {counter-increment: toc; margin: 0; padding: 0; background: none;}
.ar-shell .toc-list li::before {content: none;}
/* 44px rows (Designer's review): the number stays on the first line's baseline. */
.ar-shell .toc-list a {display: grid; grid-template-columns: 30px 1fr; align-items: baseline; align-content: center; gap: 6px; min-height: 44px; padding: 8px 0; color: var(--graphite); text-decoration: none; font-size: 15.5px; line-height: 1.35;}
.ar-shell .toc-list a::before {content: counter(toc, decimal-leading-zero); font: 500 12px/1.9 var(--mono); color: var(--form);}
.ar-shell .toc-list a:hover {color: var(--form-deep);}
.toc-d {display: none;}

/* ---------- the text ---------- */
.ar-body {padding: 20px 0 0; font-size: 18px; line-height: 1.65;}
.ar-text > * {margin: 0;}
.ar-text > * + * {margin-top: 1em;}
/* Measure about 68 characters: 34em (ch is wide in Geologica and gave 80). */
.ar-text > p, .ar-text > ol, .ar-text > ul {max-width: 34em;}
.ar-body p {margin-bottom: 0;}
.ar-body a {color: var(--form-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;}
.ar-body a:hover {color: var(--graphite);}
.ar-text img, .ar-text .wp-caption {max-width: 100%; height: auto;}
/* A leading section number in a heading ("3."), wrapped by reading.php. */
.ar-body .h-n {margin-right: .3em; font-family: var(--mono); font-weight: 500; font-size: .78em; color: var(--form); letter-spacing: -.02em;}
.ar-body h2 {margin: 44px 0 0; padding: 0; scroll-margin-top: 20px; font-size: 25px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--graphite); text-align: left; text-wrap: balance;}
.ar-body h3 {margin: 30px 0 0; padding: 0; scroll-margin-top: 20px; font-size: 20px; line-height: 1.3; font-weight: 650; letter-spacing: -.01em; color: var(--graphite); text-align: left;}
.ar-body h4 {margin: 24px 0 0; font-size: 18px; line-height: 1.35; font-weight: 650; text-align: left;}
.ar-body h2 + *, .ar-body h3 + * {margin-top: 12px;}
.ar-body strong, .ar-body b {font-weight: 600;}
/* Numbered lists: 01, 02... in mono, form green. Bulleted: an 8px ring - a
   printed mark; a filled circle stays reserved for the visitor's own. */
.ar-body ol, .ar-body ul {list-style: none; margin-left: 0; padding: 0;}
.ar-body ol {counter-reset: n;}
.ar-body ol > li {position: relative; counter-increment: n; padding: 0 0 0 36px; background: none;}
.ar-body ol > li::before {content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: .32em; font: 500 13px/1.4 var(--mono); color: var(--form);}
.ar-body ul > li {position: relative; padding: 0 0 0 26px; background: none;}
.ar-body ul > li::before {content: ''; position: absolute; left: 4px; top: .6em; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--form);}
.ar-body li + li {margin-top: .55em;}
.ar-body blockquote {margin-left: 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--form); font-style: normal; color: var(--graphite-2);}
/* The in-text test button: the system's primary button, as on the test. */
.ar-body p:has(> .startbut:only-child) {margin: 28px 0;}
.ar-body .startbut {display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; margin: 0; padding: 0 24px; border-radius: 8px; background: var(--form); color: #fff; font-weight: 600; font-size: 17px; line-height: 1.2; text-align: center; text-decoration: none; transition: background-color .2s var(--ease);}
.ar-body .startbut::after {content: ''; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--arrow); mask: var(--arrow);}
.ar-body .startbut:hover {background: var(--form-deep); color: #fff;}
/* Tables, in reading.php's scrolling region; the right edge fades while
   there is more to scroll (article.js). */
.ar-body .tbl {margin: 28px -16px; padding: 0 16px; overflow-x: auto;}
.ar-body .tbl.is-more {-webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);}
.ar-body table {display: table; width: 100%; min-width: 440px; margin: 0; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; text-align: left;}
.ar-body th, .ar-body td {padding: 10px 12px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--rule); word-break: normal;}
.ar-body thead th, .ar-body tr:first-child th {font-weight: 650; background: var(--field); border-bottom: 1.5px solid var(--form);}
.ar-body td:first-child {font-weight: 500;}
.ar-body .youtube, .ar-body iframe {display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 28px 0; border: 0; border-radius: 10px; background: var(--graphite);}

/* "Дополнительная информация": a ruled field, links as rows with an arrow. */
.ar-body .dop_info {margin-top: 36px; padding: 18px 18px 10px; border: 1px solid var(--rule); border-radius: 10px;}
.ar-body .dop_info_header {margin: 0; font-size: 16px; font-weight: 650;}
.ar-body .dop_info ul {margin: 6px 0 0;}
.ar-body .dop_info li {padding: 0;}
.ar-body .dop_info li::before {display: none;}
.ar-body .dop_info li + li {margin: 0; border-top: 1px solid var(--rule);}
.ar-body .dop_info a {display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; font-size: 16px; line-height: 1.4; color: var(--graphite); text-decoration: none;}
.ar-body .dop_info a::after {content: ''; width: 16px; height: 16px; margin-top: 3px; flex: none; background: var(--form); -webkit-mask: var(--arrow); mask: var(--arrow);}
.ar-body .dop_info a:hover {color: var(--form-deep);}

/* Rating: Lex Rating WP's own markup and voting, its stars repainted in the
   form ink. The plugin sets its colours inline on the element, so they are
   overridden with !important - only the variables, nothing it toggles. */
.ar-body .rating {margin: 36px 0 0; padding: 20px 0 0; border-top: 1px solid var(--rule);}
.ar-body .lex-rating-wp {--lex-rating-wp-star-size: 20px !important; --lex-rating-wp-color-filled: var(--form) !important; --lex-rating-wp-color-empty: var(--rule) !important;}
.ar-body .lex-rating-wp__value {font: 500 14px/1 var(--mono); color: var(--graphite-2);}

/* ---------- CoreTypes ---------- */
.ct-field {padding: 22px 20px 20px; border: 1.5px solid var(--form); border-radius: 12px; background: var(--field);}
.ct-field p {margin: 8px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--graphite-2);}
.ct-field .ct-h {margin: 0; font-size: 21px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--graphite);}
.ct-field .ct-facts {margin-top: 6px; font-size: 14px; color: var(--form-deep); font-weight: 500;}
.ct-btn {display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 20px; margin-top: 16px; width: 100%; border-radius: 8px; background: var(--form); color: #fff !important; font-weight: 600; font-size: 16px; text-decoration: none !important;}
.ct-btn:hover {background: var(--form-deep);}
.ct-btn .ch-ico {width: 18px; height: 18px;}
/* One offer per screen: the card fades while an in-text test button shows. */
.ct-side {display: none; transition: opacity .3s var(--ease), visibility .3s;}
.ct-side.is-quiet {opacity: 0; visibility: hidden;}

/* Phone bar: fixed to the bottom; hidden, it is out of the Tab order too. */
.ct-bar {position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) 16px; background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--rule); box-shadow: 0 -6px 20px rgba(0,0,0,.07); transform: translateY(110%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s .35s;}
.ct-bar.is-on {transform: none; visibility: visible; transition: transform .35s var(--ease);}
.ct-bar-t {flex: 1; min-width: 0; margin: 0; font-size: 14.5px; line-height: 1.3; font-weight: 600;}
.ct-bar-t span {display: block; margin-top: 2px; white-space: nowrap; font-size: 12px; font-weight: 500; color: var(--form-deep);}
@media (max-width: 359px) {.ct-bar-t span {display: none;}}
.ct-bar .ct-btn {width: auto; min-height: 44px; margin: 0; padding: 0 14px; font-size: 15px; white-space: nowrap;}
.wg-v2.single-post .ch-ft {padding-bottom: 76px;}

/* ---------- Read next (the card itself is css/card.css) ---------- */
.ar-more {padding: 0 16px;}
.related {margin: 48px 0; padding: 32px 0 0; border-top: 1px solid var(--rule);}
.related > h2 {margin: 0; padding: 0; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--graphite); text-align: left;}
.cards {display: grid; gap: 18px; margin: 18px 0 0;}
.related .art-card .cat {display: none;}

@media (max-width: 1279px) {
	.art-card.d-only {display: none;}
}

@media (min-width: 1280px) {
	.wg-v2.single-post .breadcrumbs {margin-bottom: 0;}
	.ar-shell {width: min(1280px, 100% - 48px); margin: 0 auto; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 88px; align-items: start;}
	.ar-main {display: block; grid-column: 1;}
	.ar-side {display: block; grid-column: 2; align-self: stretch;}
	.ar-head {padding-top: 22px; max-width: 760px;}
	.ar-head h1 {font-size: 48px; line-height: 1.05;}
	.byline {margin-top: 24px;}
	.byline img {width: 48px; height: 48px;}
	.ar-cover {margin: 28px 0 0;}
	.ar-cover img {aspect-ratio: 3 / 2; box-shadow: 0 0 0 1px var(--rule);}
	.ar-aside {position: sticky; top: 28px; display: grid; gap: 28px; margin-top: 36px;}
	.ar-body {padding-top: 32px; font-size: 19px; line-height: 1.7; max-width: 720px;}
	.ar-body h2 {font-size: 30px; margin-top: 52px;}
	.ar-body h3 {font-size: 22px;}
	.ar-body .startbut {width: auto;}
	.ar-body .tbl {margin: 32px 0; padding: 0;}
	.toc-m {display: none;}
	.toc-d {display: block;}
	.toc-d .toc-h {margin: 0; font-size: 15px; font-weight: 650; color: var(--form-deep);}
	.toc-d .toc-list {padding: 8px 0 0; border-left: 1.5px solid var(--rule); margin-top: 10px;}
	.toc-d .toc-list a {position: relative; padding: 10px 0 10px 14px; margin-left: -1.5px; border-left: 1.5px solid transparent; font-size: 15px; grid-template-columns: 26px 1fr;}
	.toc-d .toc-list a.is-now {border-left-color: var(--form); color: var(--form-deep); font-weight: 600;}
	.ct-side {display: block;}
	.ct-bar {display: none;}
	.wg-v2.single-post .ch-ft {padding-bottom: 0;}
	.ar-more {width: min(1280px, 100% - 48px); margin: 0 auto; padding: 0;}
	.related > h2 {font-size: 26px;}
	.cards {grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 22px;}
}

@media (prefers-reduced-motion: reduce) {
	.ar-shell *, .ct-bar, .ct-side, .toc-m summary::after {transition: none !important; animation: none !important;}
}