/* Hallmark · shape: Index-First (swapped from Long Document: a reference site, the list is the reason to come) · genre: editorial · theme: Formwork (deal 1/3, seed prompt-056f·47c57a9e·2026-10-29·r0) · job: listen (a publication: read the newest, browse the sections) · draw: 31ec03
 * hero: Banner · nav: masthead · footer: mast · imagery: none (no photographs of Georgia in the library, none supplied) · signature: the three frames of a Georgian new build (black, white, green) cast as three plates · formwork: drawing pour
 * axes: light/display-condensed/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R3 V4 · weakest: R, the page has no pictures, so mass comes from the plates, the index and the ink band */
/* waive 37: Archivo has no Cyrillic, body set in IBM Plex Sans; outlier face dropped, figures use Plex tabular */
@import url("./tokens.css");
@import url("./base.css");

body { color: var(--color-ink-2); }
h1, h2, h3 { color: var(--color-ink); text-transform: uppercase; }
h1 { line-height: 1.02; }
.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:hover { color: var(--color-accent-deep); }

/* masthead */
.mast { border-bottom: var(--rule-bar) solid var(--color-ink); background: var(--color-paper); }
.mast-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-lg) var(--space-md); }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3vw + 1rem, 3.25rem); line-height: 1; text-transform: uppercase; color: var(--color-ink); text-decoration: none; }
.wordmark span { color: var(--color-accent); }
.wordmark:hover { color: var(--color-ink); }
.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-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.sections a { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); text-decoration: none; padding-block: var(--space-2xs); border-bottom: 2px solid transparent; transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.sections a:hover { border-color: var(--color-ink); color: var(--color-ink); }
.sections a[aria-current="page"] { border-color: var(--color-accent); }

/* buttons */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }
.btn { display: inline-block; border-radius: 0; padding: var(--space-sm) var(--space-xl); font: 600 var(--text-md)/1.4 var(--font-display); text-transform: uppercase; text-decoration: none; border: 2px solid var(--color-ink); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent-deep); box-shadow: 0 3px 0 var(--color-accent-deep);
  transition: translate var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.btn--primary:hover { background: var(--color-accent-deep); color: var(--color-accent-ink); }
.btn--primary:active { translate: 0 3px; box-shadow: 0 0 0 var(--color-accent-deep); }
.btn--secondary { background: var(--color-paper-2); color: var(--color-ink); box-shadow: inset 0 2px 3px color-mix(in oklab, var(--color-ink) 18%, transparent); transition: background-color var(--dur-micro) var(--ease-out); }
.btn--secondary:hover { background: var(--color-paper-3); color: var(--color-ink); }
.btn--secondary:active { translate: 0 1px; }

/* hero: banner */
.hero { padding-block: var(--space-3xl) var(--space-2xl); }
.hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-2xl); align-items: end; }
.hero h1 { max-width: 12ch; font-size: clamp(3rem, 6vw + 1rem, 7rem); line-height: 0.98; }
.hero-side { padding-bottom: var(--space-xs); }

/* signature: three frames */
.karkas { padding-block: var(--space-2xl) var(--section-gap-s); }
.split-head { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap-columns); align-items: end; padding-top: var(--space-lg); border-top: var(--rule-bar) solid var(--color-ink); margin-bottom: var(--space-2xl); }
.split-head .lead { justify-self: end; }
.plates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.plate { display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-xl); background: var(--color-plate); border: var(--rule-bar) solid var(--color-ink); box-shadow: var(--shadow-card); }
.plate h3 { font-size: var(--text-3xl); line-height: 1; padding-bottom: var(--space-md); border-bottom: var(--rule-bar) solid var(--color-ink); }
.plate--black h3 { color: var(--color-ink); }
.plate--green h3 { color: var(--color-ink); }
.plate dl { margin: 0; display: grid; gap: var(--space-md); }
.plate dl div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.plate dt { font-size: var(--text-sm); color: var(--color-muted); padding-top: 0.15em; }
.plate dd { margin: 0; color: var(--color-ink); }
.plate-link { margin-top: auto; font-weight: 600; color: var(--color-ink); }

/* latest: index */
.latest { padding-block: var(--section-gap-s) var(--section-gap); }
.latest-grid { display: grid; grid-template-columns: 4fr 8fr; gap: var(--gap-columns); align-items: start; }
.latest h2 { position: sticky; top: var(--space-xl); max-width: none; overflow-wrap: normal; }
.index { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) 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: 600; 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; }
.index-row--lead .index-title { font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-section); line-height: 1.05; max-width: 22ch; }
.index-row--lead { padding-block: var(--space-xl); }
.index-text { max-width: 65ch; }
.index-meta { display: flex; gap: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.index-meta a { color: var(--color-ink); }

/* the path: steps on a band */
.band { background: var(--color-paper-2); padding-block: var(--section-gap-s); }
.put h2 { margin-bottom: var(--space-2xl); }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--rule-bar) solid var(--color-ink); }
.steps > li { counter-increment: step; display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg) var(--space-lg) 0 0; }
.steps > li + li { border-left: var(--rule-hair) solid var(--color-paper-3); padding-left: var(--space-lg); }
.steps > li::before { content: counter(step); font-family: var(--font-display); font-weight: 700; font-size: var(--text-display-s); line-height: 1; color: var(--color-ink); }
.steps h3 { font-size: var(--text-xl); }
.steps ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); font-size: var(--text-sm); }
.steps ul a { color: var(--color-ink); }

/* sections: rows */
.razdely { padding-block: var(--section-gap); }
.razdely-grid { display: grid; grid-template-columns: 4fr 8fr; gap: var(--gap-columns); align-items: start; }
.razdely h2 { max-width: none; overflow-wrap: normal; }
.rows { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) 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: 600; font-size: var(--text-lg); line-height: 1.3; color: var(--color-ink); text-decoration: none; }
.row-title:hover { text-decoration: underline; }
.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); text-transform: uppercase; font-size: var(--text-xl); font-weight: 600; }
.rows--cats .row-side { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink); }

/* stance: the ink band */
.stance { background: var(--color-ink); color: var(--color-plate-ink); padding-block: var(--section-gap-s); }
.stance-line { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: var(--text-display-s); line-height: 1.05; max-width: 22ch; color: var(--color-plate-ink); text-wrap: balance; }
.stance-more { margin-top: var(--space-xl); max-width: 60ch; color: var(--color-plate-ink); }
.stance a { color: var(--color-plate-ink); }
.stance a:hover { 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: 24ch; 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; text-decoration: none; }
.draft { display: inline-block; font-size: var(--text-sm); color: var(--color-accent-deep); font-weight: 600; }

/* 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-bar) 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: 600; }
.art-grid { display: grid; grid-template-columns: 3fr 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: 600; 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.1; 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); text-transform: none; font-family: var(--font-body); }
.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: 600; }
.prose a { color: var(--color-ink); text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.prose a:hover { color: var(--color-accent-deep); }
.prose .note { margin-inline: 0; padding: var(--space-lg) var(--space-lg); background: var(--color-plate); border: var(--rule-hair) solid var(--color-ink); box-shadow: 4px 4px 0 var(--color-ink); }
.prose .note p + p { margin-top: var(--space-xs); }
.table { overflow-x: auto; border-top: var(--rule-bar) 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: 600; color: var(--color-ink); padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-ink); 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); }

/* footer: mast */
.foot { border-top: var(--rule-bar) solid var(--color-ink); padding-block: var(--space-2xl) var(--space-xl); }
.foot-mark { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(3.5rem, 11vw, 10rem); line-height: 0.9; color: var(--color-ink); }
.foot-grid { display: grid; grid-template-columns: 6fr 3fr 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); }

@media (max-width: 60rem) {
  .hero-grid, .split-head, .latest-grid, .razdely-grid, .art-grid, .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .split-head .lead { justify-self: start; }
  .plates { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps > li:nth-child(3) { border-left: 0; padding-left: 0; }
  .latest h2 { position: static; max-width: none; }
  .razdely h2 { 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); }
}
@media (max-width: 40rem) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps > li + li { border-left: 0; padding-left: 0; border-top: var(--rule-hair) solid var(--color-paper-3); margin-top: var(--space-lg); }
  .plate { padding: var(--space-lg); }
  .plate dl div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}

/* district cards */
.facts-row { padding-bottom: var(--space-2xl); }
.figures { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--rule-bar) solid var(--color-ink); }
.figures > div { padding: var(--space-lg) var(--space-lg) 0 0; display: grid; gap: var(--space-2xs); align-content: start; }
.figures > div + div { border-left: var(--rule-hair) solid var(--color-rule); padding-left: var(--space-lg); }
.figures dt { font-size: var(--text-sm); color: var(--color-muted); }
.figures dd { margin: 0; color: var(--color-ink); }
.fig { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-display-s); line-height: 1; font-variant-numeric: tabular-nums; }
.figures .fig-note { font-size: var(--text-sm); color: var(--color-muted); }
.compare { padding-block: var(--section-gap-s); }
.compare-grid { display: grid; grid-template-columns: 4fr 8fr; gap: var(--gap-columns); align-items: start; }
.compare h2 { max-width: none; overflow-wrap: normal; margin-bottom: var(--space-md); }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); border-top: var(--rule-bar) solid var(--color-ink); padding-top: var(--space-md); }
.bar { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 4.5rem; gap: var(--space-md); align-items: center; font-size: var(--text-sm); }
.bar-name { color: var(--color-ink); }
.bar-track { display: block; height: 14px; }
.bar-fill { display: block; height: 100%; width: var(--w); background: var(--color-paper-3); }
.bar--here .bar-name { font-weight: 600; }
.bar--here .bar-fill { background: var(--color-ink); }
.bar-val { text-align: right; color: var(--color-ink); }
.bar--here .bar-val { font-weight: 600; }
.budget-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.budget-table th, .rtable th { text-align: left; font-weight: 600; font-size: var(--text-sm); color: var(--color-ink); padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-ink); }
.budget-table td, .rtable td { padding: var(--space-md) var(--space-md) var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-paper-3); color: var(--color-ink); }
.budget h2 { margin-bottom: var(--space-xl); }
.budget-note { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); max-width: 70ch; }
.budget-note a { color: var(--color-ink); }
.rayon-more { padding-block: var(--section-gap-s); }
.rayon-more-grid { display: grid; grid-template-columns: 4fr 8fr; gap: var(--gap-columns); align-items: start; }
.rayon-more h2 { max-width: none; overflow-wrap: normal; }
.rows--facts { margin: 0; }
.rows--facts .row { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); }
.rows--facts dt { font-family: var(--font-display); text-transform: uppercase; font-weight: 600; }
.rows--facts dd { margin: 0; }
.rows--facts a { color: var(--color-ink); }
.sources-sec { padding-bottom: var(--section-gap); }
.sources-h { font-size: var(--text-xl); margin-bottom: var(--space-md); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-ink); max-width: none; }
.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); }
.sub-h { font-size: var(--text-2xl); margin-bottom: var(--space-lg); }
.sub-h--gap { margin-top: var(--space-3xl); }
.rtable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rtable a { color: var(--color-ink); font-weight: 600; }
.listing .lead { margin-bottom: var(--space-lg); }
@media (max-width: 60rem) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .compare-grid, .rayon-more-grid { grid-template-columns: minmax(0, 1fr); }
  .rows--facts .row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .figures { grid-template-columns: minmax(0, 1fr); }
  .figures > div + div { border-left: 0; padding-left: 0; }
  .bar { grid-template-columns: 6.5rem minmax(0, 1fr) 3.5rem; gap: var(--space-xs); }
}

/* calculators */
.calc { padding-bottom: var(--section-gap-s); }
.calc-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-2xl); align-items: start; }
.calc-form { display: grid; gap: var(--space-xl); }
.calc-form fieldset { margin: 0; padding: var(--space-lg) 0 0; border: 0; border-top: var(--rule-bar) solid var(--color-ink); display: grid; gap: var(--space-md); min-width: 0; }
.calc-form legend { float: left; width: 100%; margin-bottom: var(--space-xs); font-weight: 600; font-size: var(--text-lg); color: var(--color-ink); }
.field { display: grid; gap: var(--space-2xs); }
.field > span { font-weight: 600; color: var(--color-ink); font-size: var(--text-sm); }
.field small { font-size: var(--text-sm); color: var(--color-muted); }
.field small a { color: var(--color-ink); }
.field input { width: 100%; max-width: 22rem; height: 48px; padding: 0 var(--space-md); border: 2px solid var(--color-ink); border-radius: 0; background: var(--color-plate); color: var(--color-ink); font-variant-numeric: tabular-nums; box-shadow: inset 0 2px 3px color-mix(in oklab, var(--color-ink) 12%, transparent); transition: border-color var(--dur-micro) var(--ease-out); }
.field input:hover { border-color: var(--color-ink-2); }
.field input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.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; }
.calc-out { position: sticky; top: var(--space-xl); padding: var(--space-xl); background: var(--color-plate); border: var(--rule-bar) solid var(--color-ink); box-shadow: var(--shadow-card); min-width: 0; }
.calc-out--wide { position: static; }
.calc-h { font-size: var(--text-2xl); margin-bottom: var(--space-lg); }
.out-rows { margin: 0; display: grid; }
.out-rows div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.out-rows dt { color: var(--color-ink-2); }
.out-rows dd { margin: 0; color: var(--color-ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.out-rows .out-total dd { font-family: var(--font-display); font-size: var(--text-xl); }
.calc-note { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.calc-note a { color: var(--color-ink); }
button.btn { cursor: pointer; }

/* 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-paper-3); }
.checklist .sources { padding-left: var(--space-lg); list-style: disc; }
@media (max-width: 60rem) {
  .calc-grid { grid-template-columns: minmax(0, 1fr); }
  .calc-out { position: static; }
}
@media print {
  .mast, .foot, .no-print, .disclaimer, .crumbs { display: none !important; }
  body { background: var(--color-plate); }
  .checklist li { break-inside: avoid; }
}
.rynok-sec { padding-block: var(--section-gap-s); }
.rynok-sec .rtable a { font-weight: 400; color: var(--color-ink-2); }
.rynok-sec strong { color: var(--color-ink); font-weight: 600; }

/* question form */
.vopros-grid { display: grid; grid-template-columns: 5fr 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-plate); border: var(--rule-bar) solid var(--color-ink); box-shadow: var(--shadow-card); }
.vopros-form .field input, .vopros-form select, .vopros-form textarea { width: 100%; max-width: none; }
.vopros-form select, .vopros-form textarea { padding: var(--space-sm) var(--space-md); border: 2px solid var(--color-ink); border-radius: 0; background: var(--color-plate); color: var(--color-ink); box-shadow: inset 0 2px 3px color-mix(in oklab, var(--color-ink) 12%, transparent); }
.vopros-form select { height: 48px; }
.vopros-form textarea { resize: vertical; min-height: 7rem; }
.vopros-form select:focus-visible, .vopros-form textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.vopros-form .btn { justify-self: start; }
.vopros-form .btn:disabled { background: var(--color-paper-3); color: var(--color-muted); border-color: var(--color-paper-3); box-shadow: none; cursor: progress; }
.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: 600; }
.form-status.is-err { color: var(--color-error); font-weight: 600; }
@media (max-width: 60rem) { .vopros-grid { grid-template-columns: minmax(0, 1fr); } .vopros-form { padding: var(--space-lg); } }