/* Articles (/articles/…), on top of the shared «Бенто, графит» classes in
   style.css. A reading column for the text, charts and tables wider than it
   (.art-wide), so an article reads like a long read and still shows the data
   at full size. Gains --good, losses --bad, the S&P 500 blue (--spx). */

.art { --col: 720px; --wide: 1160px; padding-bottom: 8px; }
.art > * { max-width: var(--col); margin-left: auto; margin-right: auto; }
.art > .art-wide { max-width: var(--wide); }
.art .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* head */
.art-head { padding-top: 48px; }
.art-head h1 { max-width: 16ch; font-size: clamp(36px, 5.6vw, 64px); }
.art-head .lead { max-width: none; }
.art-head .lead b { color: var(--ink); font-weight: 650; }
.art-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; font-size: 13px; color: var(--muted); }

/* key numbers */
.art .bento { margin-top: 28px; }
.art .bento .card { display: flex; flex-direction: column; gap: 6px; }
.art-top { margin-top: 4px; }
.art-sub { margin: auto 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.art-sub b { color: var(--ink); font-weight: 650; }

/* contents */
.art-toc { margin-top: 36px; padding: 20px 24px; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
.art-toc .label { margin: 0 0 8px; }
.art-toc ol { margin: 0; padding-left: 20px; columns: 2 240px; column-gap: 32px; font-size: 15px; }
.art-toc li { margin: 0 0 6px; break-inside: avoid; }
.art-toc a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--border); }
.art-toc a:hover { color: var(--accent-ink); border-color: currentColor; }

/* text */
.art-sec { margin-top: 56px; color: var(--ink-2); font-size: 17px; line-height: 1.65; }
.art-sec h2 { color: var(--ink); scroll-margin-top: 80px; }
.art-sec h3 { color: var(--ink); font-size: 19px; margin: 0 0 8px; }
.art-sec p { margin: 0 0 16px; text-wrap: pretty; }
.art-sec b { color: var(--ink); font-weight: 650; }
.art-sec + .art-sec { margin-top: 40px; }
[id] { scroll-margin-top: 80px; }

/* the inflation switch, shown by articles.js (without JavaScript it would do nothing) */
.art-mode { margin-top: 4px; }
.art-wait { visibility: hidden; }

/* charts and tables after a text block */
.art > .chart, .art > .table-wrap, .art > .art-pair, .art > details { margin-top: 8px; }
.art .chart .legend { padding: 2px 10px 0; margin: 0 0 4px; }
.art .chart.has-full > .legend { padding-right: 44px; } /* room for the full-screen button */
.art-plot { min-height: 300px; }
.art-plot-brick { min-height: 420px; }
.art-plot-hold { min-height: 340px; }
.art-plot-dec { min-height: 300px; }
.art-plot.art-fail { min-height: 0; padding: 28px 12px; font-size: 14px; color: var(--muted); }
.art-gap { margin-top: 14px !important; }
.art-foot { margin: 10px auto 0; }
.art > p.art-foot { max-width: var(--wide); }
.art-details { margin-top: 14px; }
.art-details .table-wrap { box-shadow: none; border-radius: 0; border-top: 1px solid var(--border); }
.art-details .art-foot { padding: 0 20px 16px; }

/* tables */
.art-table th[scope="row"] { text-align: left; font-weight: 600; color: var(--ink); }
.art-table td, .art-table th { font-variant-numeric: tabular-nums; }
.art-table caption { caption-side: top; text-align: left; padding: 16px 18px 6px; font-weight: 650; color: var(--ink); }
.art-when { display: block; font-size: 11px; line-height: 1.4; font-weight: 500; color: var(--muted); }
.art-mark { color: var(--muted); margin-left: 1px; }
.art-bins td.art-years { text-align: left; white-space: normal; color: var(--ink-2); font-size: 13px; line-height: 1.5; min-width: 280px; }
.art-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .art-pair { grid-template-columns: minmax(0, 1fr); } }

/* swatches and marks of the article's own charts */
.sw-sq.art-up { background: var(--spx); }
.sw-sq.art-down { background: var(--bad); }
.sw-sq.art-med { background: var(--ink); height: 3px; border-radius: 2px; }
.brick { stroke: var(--surface); stroke-width: 1.5; }
.brick.up { fill: var(--spx); fill-opacity: 0.82; }
.brick.down { fill: var(--bad); fill-opacity: 0.82; }
.brick.on { fill-opacity: 1; stroke: var(--ink); stroke-width: 2; }
.brick-y { fill: #fff; font: 600 10px/1 var(--font); pointer-events: none; }
.brick-avg { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 4; }
.brick-avg-label { fill: var(--ink); font: 600 12px/1 var(--font); }
.brick-zero { stroke: var(--axis); stroke-width: 1; }
.hold-bar { fill: var(--spx); fill-opacity: 0.22; }
.hold-bar.on { fill-opacity: 0.36; }
.hold-end { stroke: var(--spx); stroke-width: 2.5; stroke-linecap: round; }
.hold-med { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.hold-lbl { fill: var(--ink-2); font: 600 11px/1 var(--mono); }
.hold-lbl.w { fill: var(--bad); }
.hold-zero { stroke: var(--ink); stroke-opacity: 0.45; stroke-width: 1.2; }

/* more to read */
.art-more-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.art-link { display: flex; flex-direction: column; gap: 8px; transition: box-shadow 0.15s ease; }
.art-link:hover { box-shadow: var(--shadow-lg); }
.art-link .card-title { color: var(--ink); }

/* the list of articles */
.art-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.art-card { display: flex; flex-direction: column; gap: 10px; padding: 26px; transition: box-shadow 0.15s ease; }
.art-card:hover { box-shadow: var(--shadow-lg); }
.art-card-title { font: 700 26px/1.1 var(--display); letter-spacing: -0.03em; color: var(--ink); }
.art-card-num { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.art-card-text { color: var(--ink-2); font-size: 15px; }
.art-more { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--accent-ink); }

@media (max-width: 560px) {
  .art-sec { font-size: 16px; }
  .art-toc { padding: 16px 18px; }
}
@media (prefers-reduced-motion: reduce) { .art-link, .art-card { transition: none; } }

/* card pictures on /articles/ (artkit.publish thumb: inline SVG, viewBox 0 0 240 96) */
.art-thumb { display: block; margin: -4px 0 6px; padding: 14px 14px 10px; border-radius: 16px; background: var(--surface-2); }
.art-thumb svg { display: block; width: 100%; height: 96px; }
.art-thumb .brick { stroke-width: 1; }