/* Articles (guides, blog posts, research, comparisons, problem pages). Loaded only on body.t-article.
   The page is one leaded window: a rail of sections on the left, a text column with a comfortable measure, and
   wide panes (figures, tables, steps, verdicts, pictures) that reach to the right edge of the page.
   Markup hooks come from page_layouts/article.py: .a-lead, .a-table, .a-ledger, .a-verdict, .a-band, .a-kind, .rd-next. */
body.t-article { --measure: 42rem; --wide: 60rem; --pad: clamp(18px, 2.4vw, 28px); --frame: 0 0 0 5px var(--paper), 0 0 0 7px var(--ink); }

/* ---------- the opening: picture, then a title plate split like a colophon ---------- */
body.t-article .band { height: clamp(230px, 42vh, 480px); }
body.t-article .page-head { width: min(1060px, 100%); }
body.t-article .page-head h1 { font-size: clamp(1.625rem, 1rem + 2.7vw, 3.25rem); line-height: 1; padding-bottom: clamp(18px, 2.2vw, 28px); }
body.t-article .page-head:has(.a-kind[data-title="m"]) h1 { font-size: clamp(1.5rem, .95rem + 2.1vw, 2.625rem); line-height: 1.02; }
body.t-article .page-head:has(.a-kind[data-title="l"]) h1 { font-size: clamp(1.3125rem, .9rem + 1.7vw, 2.125rem); line-height: 1.06; }
html[lang="ru"] body.t-article .page-head h1, html[lang="uk"] body.t-article .page-head h1, html[lang="de"] body.t-article .page-head h1, html[lang="pl"] body.t-article .page-head h1 { font-size: clamp(1.25rem, .85rem + 1.7vw, 2.25rem); line-height: 1.06; }
body.t-article .page-head .lede { padding-top: 18px; padding-bottom: 20px; border-top: var(--came) solid var(--ink); font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem); line-height: 1.45; max-width: none; font-weight: 500; }
body.t-article .byline { display: block; padding-top: 14px; padding-bottom: 14px; border-top: 1px solid var(--ink); background: var(--tint); line-height: 1.5; }
body.t-article .byline span { display: block; font: 500 var(--t-label)/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
@media (min-width: 860px) {
  body.t-article .page-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, 264px); }
  body.t-article .page-head > .crumbs, body.t-article .page-head > h1, body.t-article .page-head > .llm-row, body.t-article .page-head > .head-actions { grid-column: 1 / -1; }
  body.t-article .page-head .lede { grid-column: 1; }
  body.t-article .byline { grid-column: 2; display: flex; flex-direction: column; justify-content: flex-end; border-top: var(--came) solid var(--ink); border-left: var(--came) solid var(--ink); }
  body.t-article .byline b { display: block; font: 700 1rem/1.2 var(--f-head); text-transform: uppercase; letter-spacing: -.01em; margin: 2px 0 8px; }
}

/* ---------- the body: rail | text, wide panes reach right ---------- */
body.t-article .article { padding-top: clamp(36px, 5vw, 64px); }
body.t-article .article .wrap { grid-template-columns: minmax(0, 1fr); }
body.t-article .prose > * { max-width: var(--measure); }
body.t-article .prose li, body.t-article .prose > div p, body.t-article .prose > blockquote p, body.t-article .prose > aside p { max-width: none; }
body.t-article .prose > h2, body.t-article .prose > .a-band, body.t-article .prose > .faq-list, body.t-article .prose > .sources { max-width: none; }
body.t-article .prose > .a-wide, body.t-article .prose > .stat, body.t-article .prose > .steps, body.t-article .prose > .a-verdict, body.t-article .prose > .a-ledger,
body.t-article .prose > .cta-inline, body.t-article .prose > blockquote, body.t-article .prose > pre { max-width: var(--wide); }

body.t-article .prose > .a-lead { font-size: clamp(1.1875rem, 1.1rem + .45vw, 1.4375rem); line-height: 1.5; font-weight: 500; max-width: 44rem; }
body.t-article .prose > .a-lead + p { margin-top: 1.3em; }

/* a section starts with a line across the whole pane, a cobalt tab, and a heading that keeps the text measure */
body.t-article .prose > h2 { margin-top: 3em; padding-top: 30px; padding-right: max(0px, calc(100% - 46rem)); font-size: clamp(1.4375rem, 1.15rem + 1.3vw, 2.25rem); line-height: 1.04; }
body.t-article .prose > h2::before { width: 56px; height: 10px; }
body.t-article .prose > h2 + * { margin-top: 1em; }
body.t-article .prose > h3 { margin-top: 2.3em; font: 700 clamp(1rem, .96rem + .3vw, 1.1875rem)/1.2 var(--f-head); text-transform: uppercase; letter-spacing: -.01em; }
body.t-article .prose > h3 + * { margin-top: .8em; }

/* the picture between two halves of a long read */
body.t-article .a-band { height: clamp(150px, 20vw, 280px); margin-top: 3.4em; background: var(--night) center / cover no-repeat; border: var(--came) solid var(--ink); }
body.t-article .prose > .a-band + h2 { margin-top: 0; border-top: 0; padding-top: 34px; }
body.t-article .prose > .a-band + h2::before { top: 0; }

/* lists */
body.t-article .prose > ol:not([class]) { list-style: none; padding-left: 0; counter-reset: n; }
body.t-article .prose > ol:not([class]) > li { counter-increment: n; position: relative; padding-left: 3.1rem; min-height: 2.1rem; }
body.t-article .prose > ol:not([class]) > li + li { margin-top: .8em; }
body.t-article .prose > ol:not([class]) > li::before { content: counter(n); position: absolute; left: 0; top: -.08em; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border: var(--came) solid var(--ink); font: 700 .875rem/1 var(--f-head); font-variant-numeric: tabular-nums; }
body.t-article .a-ledger { list-style: none; padding: 0; border-top: var(--came) solid var(--ink); }
body.t-article .a-ledger > li { display: grid; grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr); gap: 4px 28px; align-items: baseline; margin: 0; padding: 15px 0; border-bottom: 1px solid var(--ink); }
body.t-article .a-ledger > li > strong { font: 700 .9375rem/1.3 var(--f-head); text-transform: uppercase; letter-spacing: -.01em; overflow-wrap: break-word; }

/* ---------- figures ---------- */
body.t-article .prose .stat { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; gap: 0; width: calc(100% - 14px); margin: 2.8em 7px; padding: 0; background: var(--paper); box-shadow: var(--frame); }
body.t-article .prose .stat b { display: flex; align-items: center; padding: clamp(20px, 3vw, 34px) clamp(20px, 3.2vw, 40px); border-right: var(--came) solid var(--ink); font-size: clamp(3.25rem, 2rem + 5vw, 6rem); line-height: .9; white-space: nowrap; }
body.t-article .prose .stat[data-len="m"] b { font-size: clamp(2.875rem, 1.8rem + 3.6vw, 4.5rem); }
body.t-article .prose .stat[data-len="l"] b { font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3rem); max-width: 9.5em; white-space: normal; line-height: 1; }
body.t-article .prose .stat span { align-self: center; max-width: 44ch; padding: 20px clamp(18px, 2.6vw, 30px); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.42; font-weight: 500; }
body.t-article .prose .stat small { grid-column: 1 / -1; padding: 10px clamp(18px, 2.6vw, 30px); border-top: var(--came) solid var(--ink); background: var(--tint); font: 500 var(--t-label)/1.5 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--sub); }

/* ---------- tables: a comparison grid that scrolls inside its own frame ---------- */
body.t-article .table-wrap { margin: 2em 0; background: var(--tint); }
body.t-article .table-wrap:focus-visible { outline-offset: 4px; }
body.t-article .prose table { font-size: .9688rem; }
body.t-article .prose th { padding: 12px 16px; vertical-align: bottom; }
body.t-article .prose td { padding: 14px 16px; }
body.t-article .prose td.n { font: 600 .9688rem/1.5 var(--f-mono); white-space: nowrap; }
body.t-article .a-table[data-cols="2"] td:first-child { width: 34%; }
body.t-article .a-table.a-wide table { min-width: 620px; }
body.t-article .a-table[data-cols="5"] table { min-width: 760px; }
body.t-article .a-table[data-cols="6"] table { min-width: 860px; }
body.t-article .a-table[data-cols="7"] table, body.t-article .a-table[data-cols="8"] table { min-width: 980px; }
/* the first column stays put while the rest scrolls */
body.t-article .a-table.a-wide th:first-child, body.t-article .a-table.a-wide td:first-child { position: sticky; left: 0; z-index: 1; box-shadow: inset -2px 0 0 var(--ink); }
body.t-article .a-table.a-wide td:first-child { background: var(--tint); }
body.t-article .a-table.a-wide th:first-child { background: var(--ink); box-shadow: inset -2px 0 0 var(--paper); }
body.t-article .a-table.a-wide th:nth-child(2), body.t-article .a-table.a-wide td:nth-child(2) { border-left: 0; }
/* our own column is a lit pane */
body.t-article .a-table th.us { background: var(--accent); color: var(--on-accent); }
body.t-article .a-table td.us { background: var(--paper); box-shadow: inset 2px 0 0 var(--ink), inset -2px 0 0 var(--ink); font-weight: 500; }
body.t-article .a-table tr.us td { background: var(--paper); border-top: var(--came) solid var(--ink); font-weight: 500; }
body.t-article .a-table.a-wide tr.us td:first-child { background: var(--accent); color: var(--on-accent); box-shadow: none; }
/* research: the numbers are the story */
body.t-article .prose td span.n { font: 600 .9688rem/1.5 var(--f-mono); white-space: nowrap; }
body.t-article:has(.a-kind[data-kind="research"]) .a-table.has-figures td span.n { display: block; font: 700 1.375rem/1.15 var(--f-head); letter-spacing: -.03em; color: var(--accent); }
body.t-article:has(.a-kind[data-kind="research"]) .a-table.has-figures td.n { font: 700 1.375rem/1.15 var(--f-head); letter-spacing: -.03em; color: var(--accent); vertical-align: middle; }
body.t-article:has(.a-kind[data-kind="research"]) .a-table.has-figures td { vertical-align: middle; }

/* ---------- verdict: two panes, theirs and ours ---------- */
body.t-article .a-verdict { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 2.2em 0; padding: 0; background: var(--tint); border: var(--came) solid var(--ink); }
body.t-article .a-verdict > p, body.t-article .a-verdict > .note { position: relative; margin: 0; padding: 26px var(--pad) 22px; border: 0; background: none; line-height: 1.55; }
body.t-article .a-verdict > * + * { border-left: var(--came) solid var(--ink); }
body.t-article .a-verdict > :nth-child(2) { background: var(--paper); }
body.t-article .a-verdict > :nth-child(2)::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 10px; background: var(--accent); }
body.t-article .a-verdict > p > strong:first-child, body.t-article .a-verdict > .note > p > strong:first-child { display: block; margin-bottom: 8px; font: 700 .9375rem/1.25 var(--f-head); text-transform: uppercase; letter-spacing: -.01em; }
body.t-article .a-verdict > .a-verdict-more { grid-column: 1 / -1; padding: 13px var(--pad); border-left: 0; border-top: var(--came) solid var(--ink); background: var(--paper); font-size: var(--t-small); }
body.t-article .a-verdict > .a-verdict-more::before { content: none; }

/* ---------- steps, notes, quotes, in-article calls ---------- */
body.t-article .prose .steps { margin: 2em 0; }
body.t-article .prose .steps li { padding: 20px var(--pad) 20px 92px; background: var(--paper); line-height: 1.55; }
body.t-article .prose .steps li::before { width: 68px; font-size: 1.5rem; letter-spacing: -.03em; }
body.t-article .prose .steps li > strong:first-child { display: block; margin-bottom: 4px; font: 700 .9375rem/1.3 var(--f-head); text-transform: uppercase; letter-spacing: -.01em; }
body.t-article .prose > .note { padding: 20px var(--pad); }
body.t-article .prose > .note:not(.a-verdict) { position: relative; padding-left: calc(var(--pad) + 30px); }
body.t-article .prose > .note:not(.a-verdict)::before { content: ""; position: absolute; left: var(--pad); top: 27px; width: 12px; height: 12px; background: var(--accent); }
body.t-article .prose > blockquote { position: relative; margin: 2.6em 0; padding: 0 0 0 clamp(52px, 7vw, 88px); border: 0; font: 500 clamp(1.25rem, 1.05rem + 1vw, 1.875rem)/1.22 var(--f-head); letter-spacing: -.025em; text-wrap: balance; }
body.t-article .prose > blockquote::before { content: "\201C"; position: absolute; left: 0; top: -.08em; font: 900 clamp(4rem, 3rem + 4vw, 6.5rem)/1 var(--f-head); color: var(--accent); }
body.t-article .prose > blockquote p + p { margin-top: .7em; font: 400 1rem/1.5 var(--f-body); letter-spacing: 0; color: var(--sub); }
body.t-article .prose > .cta-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; width: calc(100% - 14px); margin: 2.8em 7px; background: var(--paper); border: var(--came) solid var(--ink); box-shadow: var(--frame); }
body.t-article .prose > .cta-inline > p { margin: 0; }
body.t-article .prose > .cta-inline > p:first-child { align-self: center; padding: 22px var(--pad); font: 700 clamp(1.0625rem, 1rem + .4vw, 1.3125rem)/1.25 var(--f-head); text-transform: uppercase; letter-spacing: -.015em; text-wrap: balance; }
body.t-article .prose > .cta-inline > p:last-child { display: flex; border-left: var(--came) solid var(--ink); }
body.t-article .prose > .cta-inline > p:only-child { border-left: 0; }
body.t-article .prose > .cta-inline .btn { flex: 1; min-height: 64px; min-width: 220px; border: 0; }

/* ---------- questions and sources close the read ---------- */
body.t-article .prose > .faq-list { max-width: var(--wide); margin-top: 1.4em; }
body.t-article .prose .faq-list summary { padding: 18px var(--pad); font-size: 1.0938rem; }
body.t-article .prose .faq-list details p { padding: 18px var(--pad) 22px; max-width: 46rem; }
body.t-article .prose > .sources { margin-top: 3.6em; padding-top: 18px; font-size: .875rem; line-height: 1.55; }
body.t-article .sources ol { margin: 0; padding: 0; list-style: none; counter-reset: s; columns: 2 24rem; column-gap: 40px; }
body.t-article .sources li { counter-increment: s; position: relative; break-inside: avoid; margin: 0; padding: 0 0 9px 2.4em; overflow-wrap: anywhere; }
body.t-article .sources li + li { margin-top: 0; }
body.t-article .sources li::before { content: counter(s); position: absolute; left: 0; top: .2em; font: 500 var(--t-label)/1.5 var(--f-mono); color: var(--ink); }
body.t-article .sources a { text-decoration-thickness: 1px; }

/* ---------- on this page: a rail on wide screens, a strip under the bar on small ones ---------- */
@media (min-width: 1200px) {
  body.t-article .article .wrap { grid-template-columns: 224px minmax(0, 1fr); gap: 0 56px; }
  body.t-article .article .wrap > .prose { grid-column: 2; }
  body.t-article .toc { grid-column: 1; justify-self: stretch; max-width: none; top: calc(var(--bar) + 30px); max-height: calc(100vh - var(--bar) - 60px); overflow-y: auto; font-size: .875rem; }
  body.t-article .toc ol { counter-reset: t; }
  body.t-article .toc a { counter-increment: t; display: grid; grid-template-columns: 1.7em minmax(0, 1fr); padding: 9px 12px; color: var(--ink); }
  body.t-article .toc a::before { content: counter(t); font: 500 var(--t-label)/1.7 var(--f-mono); color: var(--sub); }
  body.t-article .toc a[aria-current="true"]::before { color: var(--paper); }
}
@media (max-width: 1199px) {
  body.t-article .article { padding-top: 26px; }
  body.t-article .article .wrap:has(> .toc) { grid-template-rows: 46px auto; }
  body.t-article .article .wrap:has(> .toc) > .prose { grid-row: 2; grid-column: 1; padding-top: clamp(28px, 5vw, 44px); }
  body.t-article .toc { display: flex; grid-column: 1; grid-row: 1 / span 2; align-self: start; position: sticky; top: calc(var(--bar) + env(safe-area-inset-top, 0px)); z-index: 5; height: 46px;
    margin: 0 calc(-1 * var(--gutter)); background: var(--paper); border-top: var(--came) solid var(--ink); border-bottom: var(--came) solid var(--ink); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  body.t-article .toc::-webkit-scrollbar { display: none; }
  body.t-article .toc-h { flex: none; position: sticky; left: 0; z-index: 1; display: flex; align-items: center; margin: 0; padding: 0 14px; background: var(--ink); color: var(--paper); white-space: nowrap; }
  body.t-article .toc ol { display: flex; flex: none; list-style: none; margin: 0; padding: 0; counter-reset: t; }
  body.t-article .toc li { display: flex; }
  body.t-article .toc a { counter-increment: t; display: flex; align-items: center; gap: 8px; padding: 0 14px; white-space: nowrap; border-right: 1px solid var(--ink); font-size: .875rem; font-weight: 500; color: var(--ink); text-decoration: none; }
  body.t-article .toc a::before { content: counter(t); font: 500 var(--t-label)/1 var(--f-mono); color: var(--sub); }
  body.t-article .toc a[aria-current="true"] { background: var(--accent); color: var(--on-accent); }
  body.t-article .toc a[aria-current="true"]::before { color: var(--on-accent); }
  body.t-article .prose [id] { scroll-margin-top: calc(var(--bar) + 46px + 22px); }
}
@media (max-width: 700px) { body.t-article .toc-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; } }

/* ---------- what next: three doors out, built from the links in the article ---------- */
body.t-article .rd-next { padding: 0 0 clamp(56px, 7vw, 96px); }
body.t-article .rd-next-h { padding-top: 26px; border-top: var(--came) solid var(--ink); position: relative; font-size: clamp(1.4375rem, 1.15rem + 1.3vw, 2.25rem); }
body.t-article .rd-next-h::before { content: ""; position: absolute; left: 0; top: -2px; width: 56px; height: 10px; background: var(--accent); }
body.t-article .rd-next-h a { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; color: var(--ink); }
body.t-article .rd-next-h .icon { width: .8em; height: .8em; stroke-width: 3; transition: transform 160ms var(--ease); }
body.t-article .rd-next-h a:hover .icon { transform: translateX(6px); }
body.t-article .rd-cards { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 30px 7px 0; padding: 0; background: var(--paper); border: var(--came) solid var(--ink); box-shadow: var(--frame); }
body.t-article .rd-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; }
body.t-article .rd-card { display: flex; min-width: 0; }
body.t-article .rd-card + .rd-card { border-left: var(--came) solid var(--ink); }
body.t-article .rd-card > a { flex: 1; display: grid; grid-template-rows: auto 1fr auto; min-width: 0; color: var(--ink); text-decoration: none; transition: background-color 120ms var(--ease); }
body.t-article .rd-pic { display: block; aspect-ratio: 16 / 7; background: var(--night) center / cover no-repeat; border-bottom: var(--came) solid var(--ink); }
body.t-article .rd-body { display: grid; align-content: start; gap: 10px; padding: 20px 22px 6px; }
body.t-article .rd-title { font: 700 clamp(1rem, .94rem + .3vw, 1.125rem)/1.2 var(--f-head); text-transform: uppercase; letter-spacing: -.015em; text-wrap: balance; overflow-wrap: break-word; }
body.t-article .rd-desc { font-size: .9375rem; line-height: 1.5; color: var(--sub); }
body.t-article .rd-go { display: flex; justify-content: flex-end; padding: 8px 18px 16px; }
body.t-article .rd-go .icon { transition: transform 160ms var(--ease); }
body.t-article .rd-card > a:hover { background: var(--tint); color: var(--ink); }
body.t-article .rd-card > a:hover .rd-go .icon { transform: translateX(5px); }
body.t-article .rd-card > a:focus-visible { outline-offset: -5px; }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  body.t-article .a-ledger > li { grid-template-columns: minmax(0, 1fr); }
  body.t-article .a-verdict { grid-template-columns: minmax(0, 1fr); }
  body.t-article .a-verdict > * + * { border-left: 0; border-top: var(--came) solid var(--ink); }
  body.t-article .prose .stat { grid-template-columns: minmax(0, 1fr); }
  body.t-article .prose .stat b { border-right: 0; border-bottom: var(--came) solid var(--ink); white-space: normal; }
  body.t-article .prose .stat[data-len="l"] b { max-width: none; }
  body.t-article .prose > .cta-inline { grid-template-columns: minmax(0, 1fr); }
  body.t-article .prose > .cta-inline > p:last-child { border-left: 0; border-top: var(--came) solid var(--ink); }
  body.t-article .prose .steps li { padding-left: 64px; }
  body.t-article .prose .steps li::before { width: 46px; font-size: 1.125rem; }
  body.t-article .rd-cards, body.t-article .rd-cards-2 { grid-template-columns: minmax(0, 1fr); }
  body.t-article .rd-card + .rd-card { border-left: 0; border-top: var(--came) solid var(--ink); }
  body.t-article .rd-pic { aspect-ratio: 16 / 6; }
  body.t-article .a-table.a-wide td:first-child, body.t-article .a-table.a-wide th:first-child { max-width: 9.5rem; }
  body.t-article .prose > .note:not(.a-verdict) { padding-left: calc(var(--pad) + 24px); }
}
@media (prefers-reduced-motion: reduce) { body.t-article .rd-go .icon, body.t-article .rd-next-h .icon { transition: none; } }

/* ---------- from the visual check ---------- */
/* the row for the section being read: paper text on ink (was ink on ink) */
body.t-article .toc a[aria-current="true"] { color: var(--paper); }
/* only a one-paragraph quote is set big; a long quoted answer (lists, several paragraphs) reads as body text with a cobalt rule */
body.t-article .prose > blockquote:not(:has(> p:only-child)) { padding: 4px 0 4px 22px; border-left: 6px solid var(--accent); font: 400 1.0625rem/1.6 var(--f-body); letter-spacing: 0; text-wrap: pretty; max-width: 68ch; }
body.t-article .prose > blockquote:not(:has(> p:only-child))::before { display: none; }
body.t-article .prose > blockquote:not(:has(> p:only-child)) p + p { font: inherit; color: inherit; }
body.t-article .prose > blockquote:not(:has(> p:only-child)) :is(ol, ul, li, h3, p) { font: inherit; letter-spacing: 0; text-transform: none; max-width: 100%; overflow-wrap: break-word; }