/* Hallmark · shape: Index-First (a reference site: the rate and the newest articles are why people come) · genre: editorial · theme: Specimen (deal 1/3, seed prompt-8d46·5de8a3f4·2026-10-29·r0) · job: listen (a publication: check the rate, read the newest, browse the sections) · draw: manual
 * hero: Split, head left, the rate plate right · nav: masthead · footer: mast · imagery: none (no photographs supplied, the rate carries the first screen) · signature: the official lari rate set in Didone at poster size on metric guides, refreshed every night from the National Bank
 * axes: light/high-contrast-serif/cool · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R3 V4 · weakest: R, no pictures; mass comes from the rate plate, the ruled tables and the ink band */
/* waive 37: Bodoni Moda has no Cyrillic, display set in Prata (a Didone with Cyrillic, one weight, no optical axis) */
/* waive 64: Geist Mono on rates only, figures that compare */
@import url("./tokens.css");
@import url("./base.css");

body { color: var(--color-ink-2); font-size: 1.0625rem; }
h1, h2, h3 { color: var(--color-ink); line-height: 1.04; }
h3 { line-height: 1.15; }
.skip { position: absolute; left: var(--space-md); top: -100px; z-index: var(--z-modal); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }
a { text-decoration-color: var(--color-accent); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
.num { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }

/* masthead */
.mast { background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-accent); }
.mast-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-lg) var(--space-sm); }
.wordmark { font-family: var(--font-display); font-size: clamp(1.75rem, 1.5vw + 1.25rem, 2.5rem); line-height: 1; color: var(--color-ink); text-decoration: none; letter-spacing: var(--tracking-display); }
.wordmark span { color: var(--color-muted); }
.mast-note { font-size: var(--text-sm); color: var(--color-muted); }
.sections { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); padding-block: var(--space-xs) var(--space-sm); }
.sections a { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); text-decoration: none; padding-block: var(--space-2xs); border-bottom: 1px solid transparent; transition: border-color var(--dur-short) var(--ease-out); }
.sections a:hover { border-color: var(--color-ink); }
.sections a[aria-current="page"] { border-color: var(--color-accent); }

/* buttons: the pair */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: 0; font: 500 var(--text-md)/1.3 var(--font-body); text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.btn--primary { background: var(--color-ink); color: var(--color-paper); }
.btn--primary:hover { background: var(--color-ink-2); }
.btn--primary:active { background: var(--color-ink); transform: translateY(1px); }
.btn--secondary { background: transparent; color: var(--color-ink); }
.btn--secondary:hover { background: var(--color-paper-2); }
.btn--secondary:active { background: var(--color-paper-3); }
.btn:disabled { background: var(--color-paper-3); color: var(--color-muted); border-color: var(--color-rule-2); cursor: progress; }

/* hero: split, the rate plate */
.hero { padding-block: var(--space-3xl) var(--space-2xl); border-bottom: 3px double var(--color-rule-2); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: end; }
.hero h1 { max-width: 11ch; font-size: clamp(2.75rem, 4.5vw + 1rem, 5.5rem); }
.hero .lead { margin-top: var(--space-lg); }
.rate { display: grid; gap: var(--space-md); min-width: 0; }
.rate-label { font-size: var(--text-sm); color: var(--color-muted); }
.rate-figure { position: relative; padding-block: var(--space-sm) var(--space-md); }
.rate-big { display: block; font-family: var(--font-display); font-size: clamp(4.5rem, 9vw + 1rem, 10rem); line-height: 1; letter-spacing: -0.02em; color: var(--color-ink); font-variant-numeric: lining-nums; }
.guide { display: block; border-top: var(--rule-hair) solid var(--color-guide); }
.rate-guides { position: absolute; inset: 0; pointer-events: none; }
.rate-guides span { position: absolute; left: 0; right: 0; border-top: var(--rule-hair) solid var(--color-guide); }
.rate-guides span::after { content: attr(data-n); position: absolute; right: 0; top: 2px; font-size: var(--text-xs); color: var(--color-accent); }
.rate-guides .g-top { top: 18%; } .rate-guides .g-base { top: 84%; }
.rate-unit { font-size: var(--text-lg); color: var(--color-ink); }
.rate-rows { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--rule-hair) solid var(--color-ink); }
.rate-rows div { padding: var(--space-sm) var(--space-sm) 0 0; display: grid; gap: var(--space-3xs); }
.rate-rows div + div { padding-left: var(--space-sm); border-left: var(--rule-hair) solid var(--color-rule); }
.rate-rows dt { font-size: var(--text-sm); color: var(--color-muted); }
.rate-rows dd { margin: 0; font-family: var(--font-outlier); font-size: var(--text-lg); color: var(--color-ink); }
.rate-more { font-size: var(--text-sm); }
.rate-more a { color: var(--color-ink); }

/* latest: index */
.latest { padding-block: var(--section-gap-s); }
.two-col { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.two-col > h2 { position: sticky; top: var(--space-xl); max-width: 12ch; }
.index { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.index-row { display: grid; gap: var(--space-xs); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.index-title { font-weight: 500; font-size: var(--text-xl); line-height: 1.3; color: var(--color-ink); text-decoration: none; max-width: 40ch; }
.index-title:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.index-row--lead { padding-block: var(--space-xl); }
.index-row--lead .index-title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-section); line-height: 1.08; max-width: 22ch; }
.index-text { max-width: 65ch; }
.index-meta { display: flex; flex-wrap: wrap; gap: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.index-meta a { color: var(--color-ink); }

/* the banks table, the one that matters: under the double rule */
.banks { padding-block: var(--section-gap-s); }
.banks-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-xl); }
.ledger { overflow-x: auto; border-top: 3px double var(--color-rule-2); }
.ledger table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: 1.45; }
.ledger th { text-align: left; font-weight: 500; color: var(--color-muted); padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); vertical-align: bottom; }
.ledger td { padding: var(--space-md) var(--space-md) var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: top; color: var(--color-ink-2); }
.ledger td:first-child { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink); white-space: nowrap; }
.ledger td:first-child a { color: var(--color-ink); text-decoration: none; }
.ledger td:first-child a:hover { text-decoration: underline; }
.ledger td.num, .ledger th.num { text-align: right; }
.ledger-note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); max-width: 75ch; }
.ledger-note a { color: var(--color-ink); }

/* sections: rows */
.razdely { padding-block: var(--section-gap-s) var(--section-gap); }
.rows { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) minmax(0, 1fr); gap: var(--space-xs) var(--gap-columns); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); align-items: baseline; }
.row-title { font-weight: 500; font-size: var(--text-lg); line-height: 1.3; color: var(--color-ink); text-decoration: none; }
.row-title:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.row-side { font-size: var(--text-sm); color: var(--color-muted); text-align: right; display: flex; flex-direction: column; gap: var(--space-2xs); }
.rows--cats .row-title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); line-height: 1.1; }
.rows--cats .row-side { font-family: var(--font-outlier); font-size: var(--text-lg); color: var(--color-ink); }

/* bands: paper step, and the one ink band */
.band { background: var(--color-paper-2); padding-block: var(--section-gap-s); border-block: var(--rule-hair) solid var(--color-rule); }
.stance { background: var(--color-ink); color: var(--color-paper); padding-block: var(--section-gap-s); }
.stance-line { font-family: var(--font-display); font-size: var(--text-display-s); line-height: 1.08; max-width: 20ch; color: var(--color-paper); text-wrap: balance; }
.stance-more { margin-top: var(--space-xl); max-width: 60ch; color: var(--color-paper-3); }
.stance a { color: var(--color-paper); text-decoration-color: var(--color-paper-3); }

/* list pages */
.page-head { padding-block: var(--space-3xl) var(--space-2xl); }
.page-head h1 { font-size: var(--text-display-s); max-width: 22ch; margin-block: var(--space-md); }
.listing { padding-bottom: var(--section-gap); }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.crumbs a { color: var(--color-ink); }
.crumbs a + a::before { content: "/"; margin-right: var(--space-xs); color: var(--color-muted); display: inline-block; }
.draft { display: inline-block; font-size: var(--text-sm); color: var(--color-accent); font-weight: 500; }

.cats { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xl); }
.cats a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-sm); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out); }
.cats a:hover { background: var(--color-paper-2); }
.cats a[aria-current="page"] { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }

/* article */
.art-head { padding-block: var(--space-3xl) var(--space-xl); }
.art-head h1 { font-size: var(--text-display-s); max-width: 22ch; margin-block: var(--space-md) var(--space-lg); }
.art-head .lead { max-width: 60ch; color: var(--color-ink); }
.byline { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); margin: var(--space-xl) 0 0; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-ink); font-size: var(--text-sm); }
.byline div { display: grid; gap: var(--space-3xs); }
.byline dt { color: var(--color-muted); }
.byline dd { margin: 0; color: var(--color-ink); font-weight: 500; }
.art-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--gap-columns); align-items: start; padding-bottom: var(--section-gap-s); }
.art-grid > :only-child { grid-column: 2; }
.toc { position: sticky; top: var(--space-xl); font-size: var(--text-sm); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-ink); }
.toc-h { font-weight: 500; color: var(--color-ink); margin-bottom: var(--space-sm); }
.toc ol { margin: 0; padding-left: var(--space-lg); display: grid; gap: var(--space-xs); }
.toc a { color: var(--color-ink-2); text-decoration: none; }
.toc a:hover { text-decoration: underline; color: var(--color-ink); }
.art-body { grid-column: 2; min-width: 0; }
.prose { font-size: 1.0625rem; line-height: 1.7; max-width: 68ch; }
.prose > * + * { margin-top: var(--space-md); }
.prose h2 { max-width: none; font-size: var(--text-2xl); line-height: 1.12; margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-ink); }
.prose h3 { font-size: var(--text-lg); margin-top: var(--space-xl); font-family: var(--font-body); font-weight: 500; }
.prose ul, .prose ol { padding-left: var(--space-lg); }
.prose li + li { margin-top: var(--space-xs); }
.prose strong { color: var(--color-ink); font-weight: 500; }
.prose a { color: var(--color-ink); }
.prose .note { margin-inline: 0; padding: var(--space-lg); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule-2); }
.prose .note p + p { margin-top: var(--space-xs); }
.table { overflow-x: auto; border-top: var(--rule-hair) solid var(--color-ink); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: 1.45; font-variant-numeric: tabular-nums; }
.prose th { text-align: left; font-weight: 500; color: var(--color-muted); padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); vertical-align: bottom; }
.prose td { padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
.prose #istochniki ~ ul, .prose #istochniki ~ ol { font-size: var(--text-sm); }
.disclaimer { margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); max-width: 68ch; }
.disclaimer a { color: var(--color-ink); }
.related { padding-block: var(--section-gap-s); }
.related h2 { margin-bottom: var(--space-xl); }
.about { padding-bottom: var(--section-gap); }

/* rate pages */
.kurs-today { padding-bottom: var(--section-gap-s); }
.kurs-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: start; }
.chart { margin-top: var(--space-xl); }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .c-line { fill: none; stroke: var(--color-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.chart .c-grid { stroke: var(--color-rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .c-last { fill: var(--color-accent); }
.chart text { font-family: var(--font-outlier); font-size: 12px; fill: var(--color-muted); }
.chart figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.conv { display: grid; gap: var(--space-md); padding: var(--space-xl); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule-2); }
.conv h2 { font-size: var(--text-2xl); max-width: none; }
.conv-out { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-ink); line-height: 1.1; min-height: 1.1em; }
.conv-bank { font-size: var(--text-md); color: var(--color-ink); min-height: 1.5em; }
.sub-h { font-size: var(--text-xl); margin-block: var(--space-xl) var(--space-sm); max-width: none; }
.conv-note { font-size: var(--text-sm); color: var(--color-muted); }
.kurs-table { padding-bottom: var(--section-gap); }
.kurs-table h2 { margin-bottom: var(--space-lg); }
.diff-up, .diff-down { font-family: var(--font-outlier); }
.diff-down { color: var(--color-muted); }

.chart-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); }
@media (max-width: 60rem) { .chart-pair { grid-template-columns: minmax(0, 1fr); } }
.figures-row { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.figures-row > div { padding: var(--space-md) var(--space-md) var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-2xs); align-content: start; }
.figures-row dt { font-size: var(--text-sm); color: var(--color-muted); }
.figures-row dd { margin: 0; }
.fig { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; color: var(--color-ink); }
.fig-note { display: block; font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-2xs); }

.slovar-search { max-width: 28rem; margin-bottom: var(--space-lg); }
.slovar-note { display: block; font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-3xs); }

/* forms */
.field { display: grid; gap: var(--space-2xs); }
.field > span { font-weight: 500; color: var(--color-ink); font-size: var(--text-sm); }
.field small { font-size: var(--text-sm); color: var(--color-muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-ink); border-radius: 0; background: var(--color-paper); color: var(--color-ink); font-variant-numeric: tabular-nums; transition: border-color var(--dur-micro) var(--ease-out); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-ink-2); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; }
.field textarea { resize: vertical; min-height: 7rem; }
.choice { display: flex; gap: var(--space-sm); align-items: center; color: var(--color-ink); cursor: pointer; }
.choice input, .checklist input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--color-ink); flex-shrink: 0; margin: 0; }
.conv-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); }

/* question form */
.vopros-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.vopros h2 { max-width: 14ch; margin-bottom: var(--space-md); }
.vopros-form { display: grid; gap: var(--space-md); padding: var(--space-xl); background: var(--color-paper); border: var(--rule-hair) solid var(--color-ink); }
.vopros-form .btn { justify-self: start; }
.consent { align-items: flex-start; font-size: var(--text-sm); }
.consent a { color: var(--color-ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: var(--text-sm); min-height: 1.5em; color: var(--color-ink); }
.form-status.is-ok { color: var(--color-success); font-weight: 500; }
.form-status.is-err { color: var(--color-error); font-weight: 500; }

/* checklists */
.checklist ul { list-style: none; padding-left: 0; }
.checklist li label { display: flex; gap: var(--space-sm); align-items: flex-start; cursor: pointer; }
.checklist li label input { margin-top: 0.3em; }
.checklist li + li { margin-top: var(--space-sm); }
.checklist input:checked + span { color: var(--color-muted); text-decoration: line-through; text-decoration-color: var(--color-rule-2); }
.checklist .sources { padding-left: var(--space-lg); list-style: disc; }
.sources { margin: 0; padding-left: var(--space-lg); display: grid; gap: var(--space-xs); font-size: var(--text-sm); }
.sources a { color: var(--color-ink-2); }

/* footer: mast */
.foot { border-top: var(--rule-hair) solid var(--color-ink); padding-block: var(--space-2xl) var(--space-xl); }
.foot-mark { font-family: var(--font-display); font-size: clamp(3.5rem, 12vw, 11rem); line-height: 0.95; letter-spacing: -0.02em; color: var(--color-ink); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--gap-columns); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.foot-about { max-width: 48ch; }
.foot-about a, .foot-col a { color: var(--color-ink); }
.foot-col { display: grid; gap: var(--space-xs); align-content: start; font-size: var(--text-sm); }
.foot-copy { margin-top: var(--space-2xl); font-size: var(--text-sm); color: var(--color-muted); max-width: 72ch; }

@media (max-width: 60rem) {
  .hero-grid, .two-col, .banks-head, .art-grid, .foot-grid, .kurs-grid, .vopros-grid { grid-template-columns: minmax(0, 1fr); }
  .two-col > h2 { position: static; max-width: none; }
  .toc { position: static; }
  .art-body, .art-grid > :only-child { grid-column: 1; }
  .row { grid-template-columns: minmax(0, 1fr); }
  .row-side { text-align: left; flex-direction: row; gap: var(--space-md); }
  .mast-top { flex-direction: column; gap: var(--space-2xs); }
  .vopros-form, .conv { padding: var(--space-lg); }
}
@media (max-width: 40rem) {
  .rate-rows { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rate-rows div:nth-child(3) { border-left: 0; padding-left: 0; }
  .conv-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .ledger--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ledger--stack tr { display: grid; gap: var(--space-xs); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .ledger--stack td { display: grid; gap: var(--space-3xs); padding: 0; border: 0; }
  .ledger--stack td[data-l]::before { content: attr(data-l); font-size: var(--text-xs); color: var(--color-muted); }
  .ledger--stack td:first-child { font-size: var(--text-xl); white-space: normal; }
}
@media print {
  .mast, .foot, .no-print, .disclaimer, .crumbs, .vopros { display: none !important; }
  .checklist li { break-inside: avoid; }
}