@font-face {
  font-family: "e-Ukraine Head";
  src: url("../fonts/e-ukraine-head-400.5e08805aa5ac.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fixel Text";
  src: url("../fonts/fixel-text-300.27a99d720ae4.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fixel Text";
  src: url("../fonts/fixel-text-400.b76c3ff21201.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Onest Brand";
  src: url("../fonts/onest-brand-800.2ca7be735ecf.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "e-Ukraine Fallback Segoe";
  src: local("Segoe UI");
  size-adjust: 123.54%;
  ascent-override: 81.26%;
  descent-override: 15.81%;
  line-gap-override: 0%;
  font-weight: 400;
}
@font-face {
  font-family: "e-Ukraine Fallback Arial";
  src: local("Arial");
  size-adjust: 122.96%;
  ascent-override: 81.65%;
  descent-override: 15.88%;
  line-gap-override: 0%;
  font-weight: 400;
}
@font-face {
  font-family: "Fixel Fallback Segoe";
  src: local("Segoe UI");
  size-adjust: 103.20%;
  ascent-override: 87.21%;
  descent-override: 18.41%;
  line-gap-override: 28.10%;
  font-weight: 300 400;
}
@font-face {
  font-family: "Fixel Fallback Arial";
  src: local("Arial");
  size-adjust: 102.48%;
  ascent-override: 87.82%;
  descent-override: 18.54%;
  line-gap-override: 28.30%;
  font-weight: 300 400;
}
@font-face {
  font-family: "Onest Fallback Segoe";
  src: local("Segoe UI Bold");
  size-adjust: 104.00%;
  ascent-override: 93.27%;
  descent-override: 29.33%;
  line-gap-override: 0%;
  font-weight: 800;
}
@font-face {
  font-family: "Onest Fallback Arial";
  src: local("Arial Bold");
  size-adjust: 102.13%;
  ascent-override: 94.98%;
  descent-override: 29.87%;
  line-gap-override: 0%;
  font-weight: 800;
}
:root {
  color-scheme: light dark;
  --ink: #101A22;
  --ink: oklch(21.2% 0.022 243.1);
  --paper: #F6F3EC;
  --paper: oklch(96.5% 0.010 87.5);
  --paper-2: #EAE4D8;
  --paper-2: oklch(92.0% 0.017 84.6);
  --paper-bright: #FFFFFF;
  --slate: #4A5A66;
  --slate: oklch(45.9% 0.028 240.6);
  --oxide: #B4472A;
  --oxide: oklch(54.0% 0.148 35.8);
  --oxide-strong: #8F3520;
  --oxide-strong: oklch(45.4% 0.127 34.5);
  --bg: var(--paper);
  --surface: var(--paper-bright);
  --surface-sunk: var(--paper-2);
  --text: var(--ink);
  --text-muted: var(--slate);
  --accent: var(--oxide);
  --accent-text: var(--oxide-strong);
  --on-accent: #FFFFFF;
  --rule: color-mix(in oklab, var(--ink) 12%, transparent);
  --rule-strong: color-mix(in oklab, var(--ink) 26%, transparent);
  --edge: color-mix(in oklab, var(--ink) 52%, transparent);
  --focus: var(--oxide-strong);
  --ok: #2F6B52;
  --ok: oklch(48.0% 0.075 163.8);
  --warn: #825B10;
  --warn: oklch(50.0% 0.098 78.0);
  --danger: #932C21;
  --danger: oklch(45.0% 0.140 30.0);
  --font-display: "e-Ukraine Head", "e-Ukraine Fallback Segoe",
                  "e-Ukraine Fallback Arial", system-ui, -apple-system,
                  "Segoe UI", sans-serif;
  --font-text: "Fixel Text", "Fixel Fallback Segoe", "Fixel Fallback Arial",
               system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "e-Ukraine Head", "e-Ukraine Fallback Segoe",
              "e-Ukraine Fallback Arial", system-ui, sans-serif;
  --font-brand: "Onest Brand", "Onest Fallback Segoe", "Onest Fallback Arial",
                system-ui, -apple-system, "Segoe UI", sans-serif;
  --h1-size: 3.5rem;   --h1-lh: 3.75rem;
  --h2-size: 2.375rem; --h2-lh: 2.5rem;
  --h3-size: 1.75rem;  --h3-lh: 2rem;
  --h4-size: 1.5rem;   --h4-lh: 1.75rem;
  --h5-size: 1.25rem;  --h5-lh: 1.5rem;
  --h6-size: 1.125rem; --h6-lh: 1.75rem;
  --h7-size: 1rem;     --h7-lh: 1.5rem;
  --weight-heading: 400;
  --text-size: 1rem;
  --text-lh: 1.5;
  --weight-text: 300;
  --note-size: 0.8125rem;
  --note-lh: 1.125rem;
  --weight-note: 400;
  --link-size: 0.75rem;
  --link-lh: 1rem;
  --weight-link: 400;
  --step--2: var(--link-size);
  --step--1: var(--note-size);
  --step-0:  var(--text-size);
  --step-1:  var(--h4-size);
  --step-2:  var(--h3-size);
  --step-3:  var(--h2-size);
  --step-4:  var(--h1-size);
  --lh-body: var(--text-lh);
  --measure: 50ch;
  --measure-lede: 46ch;
  --measure-eyebrow: 42ch;
  --measure-desk: 60ch;
  --measure-title: 16ch;
  --baseline: 2rem;
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: clamp(4rem, 9vw, 7rem);
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --content-max: 74rem;
  --photo-veil: 82%;
  --prose-max: var(--measure);
  --thumb-max: 12rem;
  --column-2xs: 22rem;
  --column-xs:  26rem;
  --column-s:   28rem;
  --column-m:   32rem;
  --column-l:   34rem;
  --column-xl:  38rem;
  --radius-none: 0;
  --radius-s: 2px;
  --radius-m: 3px;
  --border-hair: 1px;
  --border-rule: 2px;
  --shadow-raised: 0 1px 0 color-mix(in oklab, var(--ink) 10%, transparent);
  --shadow-lifted: 0 2px 8px color-mix(in oklab, var(--ink) 12%, transparent);
  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --tap-min: 44px;
  --tap-min-floor: 24px;
  --masthead-h: calc(var(--tap-min) + 2 * var(--space-2xs));
}
@media (max-width: 47.999rem) {
  :root {
    --h1-size: clamp(1.75rem, 1.75rem + (100vw - 20rem) * 0.109, 2.375rem);
    --h1-lh:   clamp(2rem,    2rem    + (100vw - 20rem) * 0.087, 2.5rem);
    --h2-size: 1.75rem;  --h2-lh: 2rem;
    --h3-size: 1.5rem;   --h3-lh: 1.75rem;
    --h4-size: 1.25rem;  --h4-lh: 1.5rem;
    --h5-size: 1.125rem; --h5-lh: 1.75rem;
    --h6-size: 1rem;     --h6-lh: 1.5rem;
  }
}
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0D1218;
    --bg: oklch(18.0% 0.015 253.2);
    --surface: #151C24;
    --surface: oklch(22.3% 0.019 252.0);
    --surface-sunk: #101720;
    --text: #E6E9EC;
    --text: oklch(93.3% 0.005 247.9);
    --text-muted: #9AA7B2;
    --text-muted: oklch(72.2% 0.022 243.5);
    --accent: #E2764F;
    --accent: oklch(68.2% 0.145 40.2);
    --accent-text: var(--accent);
    --on-accent: #1A0E08;
    --rule: color-mix(in oklab, #E6E9EC 16%, transparent);
    --rule-strong: color-mix(in oklab, #E6E9EC 30%, transparent);
    --edge: color-mix(in oklab, #E6E9EC 44%, transparent);
    --focus: #E2764F;
    --ok: #6FCB9F;
    --warn: #E0B25C;
    --danger: #E88175;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0D1218;
  --bg: oklch(18.0% 0.015 253.2);
  --surface: #151C24;
  --surface: oklch(22.3% 0.019 252.0);
  --surface-sunk: #101720;
  --text: #E6E9EC;
  --text: oklch(93.3% 0.005 247.9);
  --text-muted: #9AA7B2;
  --text-muted: oklch(72.2% 0.022 243.5);
  --accent: #E2764F;
  --accent: oklch(68.2% 0.145 40.2);
  --accent-text: var(--accent);
  --on-accent: #1A0E08;
  --rule: color-mix(in oklab, #E6E9EC 16%, transparent);
  --rule-strong: color-mix(in oklab, #E6E9EC 30%, transparent);
  --edge: color-mix(in oklab, #E6E9EC 44%, transparent);
  --focus: #E2764F;
  --ok: #6FCB9F;
  --warn: #E0B25C;
  --danger: #E88175;
}
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  *::backdrop {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--text-size);
  line-height: var(--text-lh);
  font-weight: var(--weight-text);
  text-align: start;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
[hidden] { display: none !important; }
img, picture, video, svg {
  max-inline-size: 100%;
  block-size: auto;
  display: block;
}
input, button, textarea, select { font: inherit; color: inherit; }
a {
  color: var(--accent-text);
  text-underline-offset: 0.2em;
  text-decoration-thickness: from-font;
}
a:hover { text-decoration-thickness: 2px; }
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: var(--border-rule) solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}
.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--space-s);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-2xs) var(--space-s);
  text-decoration: none;
}
.skip-link:focus { inset-block-start: var(--space-2xs); }
.visually-hidden {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}
.nowrap { white-space: nowrap; }
a[href^="tel:"] { white-space: nowrap; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  text-wrap: balance;
}
h1, h2, h3 { letter-spacing: -0.018em; }
h1, h2, h3 { overflow-wrap: break-word; }
h1 { font-size: var(--h1-size); line-height: var(--h1-lh); }
h2 { font-size: var(--h2-size); line-height: var(--h2-lh); }
h3 { font-size: var(--h3-size); line-height: var(--h3-lh); }
h4 { font-size: var(--h4-size); line-height: var(--h4-lh); }
h5 { font-size: var(--h5-size); line-height: var(--h5-lh); }
h6 { font-size: var(--h6-size); line-height: var(--h6-lh); }
strong, b { font-weight: var(--weight-note); }
.card__meta,
.byline,
.photo__note,
.colophon,
.field .hint,
.field .error,
.price-row__unit,
.sources__term,
.sources__norm,
.sources__checked,
.peaks__how,
.tax-date__weekday,
.stat__l {
  font-size: var(--note-size);
  line-height: var(--note-lh);
  font-weight: var(--weight-note);
}
.colophon a,
.crumbs,
.toc a,
.sources__link {
  font-size: var(--link-size);
  line-height: var(--link-lh);
  font-weight: var(--weight-link);
}
.linkline {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
}
p, li { text-wrap: pretty; }
:where(.wrap, .section, .facts-block, .card, .scope) > :where(p, ul, ol),
:where(.card__meta, .byline),
:where(.facts--wide) dd {
  max-inline-size: var(--measure);
}
.prose { max-inline-size: var(--prose-max); overflow-wrap: anywhere; }
.prose > * + * { margin-block-start: var(--space-s); }
.prose h2 { margin-block-start: var(--space-l); }
.prose h3 { margin-block-start: var(--space-m); }
.prose a:not(.btn) { color: var(--accent-text); text-underline-offset: 0.22em; }
.prose ul { padding-inline-start: 1.15rem; }
.prose li + li { margin-block-start: var(--space-3xs); }
.lede {
  font-size: var(--h4-size);
  line-height: var(--text-lh);
  color: var(--text-muted);
  max-inline-size: var(--measure-lede);
}
.eyebrow {
  font-size: var(--note-size);
  line-height: var(--note-lh);
  font-weight: var(--weight-note);
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.tel {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.prose .cta { margin-block-start: var(--space-l); }
@media (max-width: 46rem) {
  .prose .cta .btn { display: flex; }
}
.copyable {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
  border-block-end: var(--border-hair) dashed var(--rule);
}
.copyable:hover { border-block-end-color: var(--accent); }
.num, td.num, .price {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: 0.01em;
}
.price--total { font-size: var(--h3-size); line-height: var(--h3-lh); }
.price--line  { font-size: var(--h4-size); line-height: var(--h4-lh); }
.price__unit  { font-size: var(--text-size); line-height: var(--text-lh); }
.code-input {
  font-size: var(--h3-size); line-height: var(--h3-lh);
  letter-spacing: 0.2em; text-align: center;
}
.secret-key { font-size: var(--h4-size); line-height: var(--h4-lh); letter-spacing: 0.08em; }
.wrap {
  inline-size: 100%;
  max-inline-size: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.stack > * + * { margin-block-start: var(--flow, var(--space-s)); }
.section { padding-block: var(--space-xl); }
.section--tight { padding-block: var(--space-l); }
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-s);
  align-items: center;
}
.grid-auto {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.grid-auto > .card { align-self: start; }
.scenarios {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-m);
}
.scenario { display: grid; gap: var(--space-s); align-content: start; }
.scenario > * { margin-block: 0; }
.scenario__title { font-size: var(--h5-size); line-height: var(--h5-lh); }
.scenario__lines { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.scenario__lines > .price-row {
  display: grid;
  grid-column: span 2;
  grid-template-columns: subgrid;
  align-items: baseline;
}
.scenario__lines .price { text-align: end; }
.scenario__note { align-self: center; }
@media (min-width: 40rem) {
  .scenarios {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-m);
  }
  .scenario {
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: var(--space-s);
  }
  .scenarios > .scenario:last-child:nth-child(odd) { grid-column: span 2; }
}
.calc-fields { align-items: start; gap: var(--space-s); }
.field-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: var(--space-m);
  row-gap: var(--space-3xs);
}
.field-row > .field { grid-row: span 3; grid-template-rows: subgrid; }
[data-calc-restored]:not([hidden]) + .field-row { margin-block-start: var(--space-s); }
.field-row .stepper { inline-size: 100%; }
.field-row .stepper input[type="number"] { flex: 1; inline-size: auto; }
.field-row .field select { min-block-size: calc(var(--tap-min) + 2 * var(--border-hair)); }
.field-row > .field > input:not([type="checkbox"]):not([type="radio"]) {
  min-block-size: calc(var(--tap-min) + 2 * var(--border-hair));
}
@media (max-width: 34rem) {
  .field-row {
    grid-auto-flow: row;
    grid-template-rows: none;
    row-gap: var(--space-s);
  }
  .field-row > .field { grid-row: auto; grid-template-rows: none; }
}
@media (max-width: 60rem) {
  .field-row:has(> .field:nth-child(3)) {
    grid-auto-flow: row;
    grid-template-rows: none;
    row-gap: var(--space-s);
  }
  .field-row:has(> .field:nth-child(3)) > .field {
    grid-row: auto;
    grid-template-rows: none;
  }
}
@media (max-width: 34rem) {
  .calc-actions { display: grid; }
  .calc-actions > .btn { inline-size: 100%; }
  .calc-actions > span { display: grid; }
  .calc-actions > span > .btn { inline-size: 100%; }
  .calc-actions > span > .copied:not(:empty) {
    justify-self: start;
    margin-block-start: var(--space-2xs);
    margin-inline-start: 0;
  }
}
.rule { border: 0; block-size: var(--border-hair); background: var(--rule); margin: 0; }
.rule--strong { block-size: var(--border-rule); background: var(--text); opacity: 0.85; }
h1 + .rule--strong { margin-block: var(--space-xs) var(--space-m); }
:where(h2, h3, h4, h5, h6) + :is(p, ul, ol, dl, table, figure, section) {
  margin-block-start: var(--space-s);
}
:is(.card--link, .closing, .cluster, .dialog__head) > :where(h2, h3, h4, h5, h6) + * {
  margin-block-start: 0;
}
.masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  background: var(--bg);
  border-block-end: var(--border-hair) solid var(--rule);
}
html { scroll-padding-block-start: calc(var(--masthead-h) + var(--space-s)); }
.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2xs) var(--space-s);
  min-block-size: var(--masthead-h);
  padding-block: var(--space-2xs);
}
.masthead__side {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  flex: none;
}
.masthead__cabinet {
  font-size: var(--step--1);
  line-height: var(--note-lh);
  color: var(--text-muted);
  text-decoration: none;
  padding-inline: var(--space-2xs);
  min-block-size: var(--tap-min);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.masthead__cabinet:hover { color: var(--text); }
.masthead__cta { flex: none; }
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--text);
  line-height: 1;
  flex: none;
  min-block-size: var(--tap-min);
}
.brand__word {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: var(--step-1);
  letter-spacing: 0.02em;
  line-height: 1;
}
.brand__contour {
  font-family: var(--font-text);
  font-size: var(--link-size);
  line-height: var(--link-lh);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: var(--weight-note);
  color: var(--text-muted);
  margin-inline-start: var(--space-2xs);
  white-space: nowrap;
}
.nav { min-inline-size: 0; }
.nav ul {
  display: flex;
  gap: var(--space-2xs);
  list-style: none;
  margin: 0 0 0 calc(-1 * var(--space-3xs));
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nav ul::-webkit-scrollbar { display: none; }
.nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--text-size);
  line-height: var(--text-lh);
  white-space: nowrap;
  min-block-size: var(--tap-min);
  min-inline-size: var(--tap-min);
  padding-inline: var(--space-3xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
.masthead__cta { padding-inline: var(--space-s); }
@media (max-width: 74rem) {
  .nav__tool { display: none; }
}
@media (max-width: 60rem) {
  :root {
    --masthead-h: calc(2 * var(--tap-min) + var(--space-3xs)
                       + 2 * var(--space-2xs));
  }
  .masthead__inner {
    display: grid;
    grid-template-columns: minmax(min-content, 1fr) minmax(0, auto);
    grid-template-areas: "brand nav" "side cta";
    row-gap: var(--space-3xs);
    column-gap: var(--space-2xs);
  }
  .brand { flex: initial; min-inline-size: 0; }
  .masthead__inner > .brand { grid-area: brand; }
  .masthead__inner > .masthead__side {
    grid-area: side;
    margin-inline-start: 0;
  }
  .masthead__inner > .nav { grid-area: nav; align-self: center; }
  .masthead__inner > .masthead__cta {
    grid-area: cta;
    padding-inline: var(--space-s);
  }
}
@media (max-width: 46rem) {
  .nav__wide { display: none; }
  :root { --masthead-h: calc(var(--tap-min) + 2 * var(--space-2xs)); }
  .masthead__inner {
    display: flex;
    column-gap: var(--space-3xs);
  }
  .masthead__inner > .nav { margin-inline-start: var(--space-2xs); }
  .masthead__inner > .masthead__side {
    margin-inline-start: auto;
    gap: var(--space-3xs);
  }
  .masthead__inner > .masthead__cta { display: none; }
  .nav ul { gap: var(--space-3xs); }
  .nav a { padding-inline: 0; }
}
.masthead__narrow { display: none; }
@media (max-width: 60rem) {
  .masthead__narrow { display: inline-flex; }
}
.burger { display: none; }
@media (max-width: 46rem) {
  .masthead__inner > .nav,
  .masthead__inner > .masthead__cta,
  .masthead__side > .masthead__cabinet { display: none; }
  .burger { display: block; flex: none; }
  .burger__toggle {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--tap-min);
    min-block-size: var(--tap-min);
    color: var(--text);
  }
  .burger__toggle::-webkit-details-marker { display: none; }
  .burger__toggle::marker { content: ""; }
  .burger__ico { inline-size: 1.5em; block-size: 1.5em; }
  .burger__ico--close,
  .burger[open] .burger__ico--open { display: none; }
  .burger[open] .burger__ico--close { display: block; }
  .burger__panel {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    background: var(--bg);
    border-block-end: var(--border-hair) solid var(--rule);
    padding: var(--space-2xs) var(--gutter) var(--space-m);
    max-block-size: calc(100svh - var(--masthead-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .burger__list { list-style: none; margin: 0; padding: 0; }
  .burger__list .nav__wide,
  .burger__list .nav__tool { display: list-item; }
  .burger__list a {
    display: flex;
    align-items: center;
    min-block-size: var(--tap-min);
    font-size: var(--text-size);
    line-height: var(--text-lh);
    color: var(--text);
    text-decoration: none;
    border-block-end: var(--border-hair) solid var(--rule);
  }
  .burger__list a[aria-current="page"] { color: var(--accent-text); }
  .burger__action { margin-block: var(--space-s) 0; }
  .burger__action .btn { display: flex; }
}
.colophon__tabs { display: none; }
@media (max-width: 46rem) {
  .colophon--tabbed .colophon__tabs {
    display: flex;
    border-block-end: var(--border-hair) solid var(--rule);
    margin-block-end: var(--space-s);
  }
  .colophon__tabs button {
    flex: 1 1 auto;
    min-block-size: var(--tap-min);
    padding: 0 var(--space-3xs);
    background: none;
    border: 0;
    border-block-end: var(--border-rule) solid transparent;
    font: inherit;
    font-size: var(--step--1);
    line-height: var(--note-lh);
    color: var(--text-muted);
    cursor: pointer;
  }
  .colophon__tabs button[aria-expanded="true"] {
    color: var(--text);
    border-block-end-color: var(--accent);
  }
  .colophon--tabbed .colophon__grid { display: block; }
  .colophon--tabbed .colophon__grid > dl { display: none; }
  .colophon--tabbed .colophon__grid > dl.is-open { display: block; }
  .colophon--tabbed .colophon__grid > dl > dt { display: none; }
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-block-size: var(--tap-min);
  padding: var(--space-2xs) var(--space-m);
  border: var(--border-hair) solid transparent;
  border-radius: var(--radius-m);
  font-weight: var(--weight-note);
  font-size: var(--text-size);
  line-height: var(--text-lh);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-instant) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-text); }
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--edge);
}
.btn--ghost:hover { background: var(--surface-sunk); }
.btn--compact {
  padding: var(--space-3xs) var(--space-xs);
  font-size: var(--note-size);
  line-height: var(--note-lh);
}
.card {
  background: var(--surface);
  border: var(--border-hair) solid var(--rule);
  padding: var(--space-m);
}
.card--tone { background: var(--surface-sunk); }
.card__title { font-family: var(--font-display); }
.card__meta { color: var(--text-muted); }
.stamp {
  display: inline-block;
  font-size: var(--link-size);
  line-height: var(--link-lh);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--weight-note);
  color: var(--accent-text);
  border: var(--border-hair) solid var(--accent-text);
  padding: 0.3em 0.6em;
  rotate: -1.5deg;
}
.table-scroll { overflow-x: auto; }
@media (min-width: 64rem) {
  .prose > .table-scroll {
    inline-size: max-content;
    max-inline-size: calc(min(var(--content-max), 100vw) - var(--gutter) * 2);
  }
}
@media (max-width: 30rem) {
  .table-scroll table { font-size: var(--step--1);
  line-height: var(--note-lh); }
  .table-scroll th,
  .table-scroll td {
    padding-inline: var(--space-3xs);
    overflow-wrap: anywhere;
  }
}
table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--step-0);
  line-height: var(--text-lh);
}
caption {
  text-align: start;
  font-size: var(--h7-size);
  line-height: var(--h7-lh);
  font-family: var(--font-display);
  letter-spacing: 0;
  color: var(--text-muted);
  font-weight: var(--weight-heading);
  padding-block-end: var(--space-2xs);
}
th, td {
  text-align: start;
  padding: var(--space-2xs) var(--space-xs);
  border-block-end: var(--border-hair) solid var(--rule);
}
th { color: var(--text-muted); font-weight: var(--weight-note); letter-spacing: 0.03em; }
tbody tr:hover { background: var(--surface-sunk); }
td:last-child, th:last-child { text-align: end; }
.prose td:last-child, .prose th:last-child { text-align: start; }
.table--text td:last-child, .table--text th:last-child { text-align: start; }
.toc {
  list-style: none;
  margin: var(--space-s) 0 0;
  padding: 0;
}
.toc a {
  display: block;
  padding-block: var(--space-2xs);
  min-block-size: 2rem;
}
.toc--sub {
  margin-block: 0;
  padding-inline-start: var(--space-m);
  border-inline-start: var(--border-hair) solid var(--rule);
}
.field { display: grid; gap: var(--space-3xs); }
.field--spaced { margin-block-end: var(--space-s); }
.field label {
  font-size: var(--note-size);
  line-height: var(--note-lh);
  font-weight: var(--weight-note);
}
.field .hint { color: var(--text-muted); }
.field input:not([type="radio"]):not([type="checkbox"]),
.field textarea,
.field select {
  inline-size: 100%;
  min-block-size: var(--tap-min);
  padding: var(--space-2xs) var(--space-xs);
  background: var(--surface);
  border: var(--border-hair) solid var(--edge);
  border-radius: var(--radius-s);
}
.field textarea { min-block-size: 6rem; padding-block: var(--space-2xs); }
.field:has(input[aria-invalid="true"]) input,
.field:has(textarea[aria-invalid="true"]) textarea { border-color: var(--danger); }
.error { color: var(--danger); }
.colophon {
  margin-block-start: var(--space-2xl);
  border-block-start: var(--border-rule) solid var(--text);
  padding-block: var(--space-l) var(--space-xl);
  color: var(--text-muted);
}
.colophon a { color: inherit; }
.colophon__grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}
.colophon dt {
  font-size: var(--note-size);
  line-height: var(--note-lh);
  font-weight: var(--weight-note);
  color: var(--text);
  margin-block-end: var(--space-3xs);
}
.colophon dd { margin: 0; }
.colophon dd a {
  display: flex;
  align-items: center;
  min-block-size: 1.5rem;
}
.colophon dd + dd { margin-block-start: var(--space-3xs); }
@media (max-width: 60rem) {
  .colophon dd a { min-block-size: var(--tap-min); }
}
@media (pointer: coarse) {
  .colophon dd a { min-block-size: var(--tap-min); }
}
.ico {
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
  vertical-align: -0.25em;
}
.iconline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
}
.contacts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-s);
  align-items: center;
  margin-block: var(--space-m) 0;
}
.contacts__ico {
  inline-size: 1.375rem;
  block-size: 1.375rem;
  color: var(--text-muted);
}
.contacts a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
}
.copied {
  display: inline-block;
  margin-inline-start: var(--space-2xs);
  padding-inline: var(--space-3xs);
  border: var(--border-hair) solid var(--rule-strong);
  border-radius: var(--radius-s);
  font-size: var(--note-size);
  line-height: var(--note-lh);
  font-weight: var(--weight-note);
  color: var(--text-muted);
  white-space: nowrap;
}
.copied:empty { display: block; border: none; padding: 0; margin: 0; }
.attribution {
  margin-block-start: var(--space-xl);
  max-inline-size: var(--measure);
  font-size: var(--note-size);
  line-height: var(--note-lh);
  font-weight: var(--weight-note);
  color: var(--text-muted);
}
.attribution a { display: inline-block; padding-block: var(--space-2xs); }
.notice {
  margin-block: var(--space-m);
  padding: var(--space-xs) var(--space-s);
  border-inline-start: var(--border-rule) solid var(--ok);
  background: var(--surface);
}
.notice--error { border-inline-start-color: var(--danger); }
.notice--warn { border-inline-start-color: var(--warn); }
.notice--info { border-inline-start-color: var(--rule-strong); }
.mark {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}
.price-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-s); padding-block: var(--space-2xs);
  border-block-end: var(--border-hair) solid var(--rule);
}
.price-row__unit { color: var(--text-muted); }
.badge {
  display: inline-block; font-size: var(--link-size);
  line-height: var(--link-lh); font-weight: var(--weight-note);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.25em 0.5em; border: var(--border-hair) solid var(--rule-strong);
  color: var(--text-muted);
}
.badge--derived { border-color: var(--warn); color: var(--warn); }
.badge--shift { border-color: var(--accent-text); color: var(--accent-text); }
.date-cell { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: var(--weight-note); }
.cab {
  --bg: #EDEEF0;
  --surface: #FFFFFF;
  --surface-sunk: #E4E6E9;
  --text: #16181C;
  --text-muted: #414851;
  --accent: #0F6B63;
  --accent-text: #0A4E48;
  --on-accent: #FFFFFF;
  --rule: color-mix(in oklab, #16181C 12%, transparent);
  --rule-strong: color-mix(in oklab, #16181C 28%, transparent);
  --edge: color-mix(in oklab, #16181C 52%, transparent);
  --focus: #0F6B63;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cab {
    --bg: #0F1216; --surface: #171B21; --surface-sunk: #12161B;
    --text: #E4E7EB; --text-muted: #A2ADBA;
    --accent: #4FC7B8; --accent-text: #4FC7B8; --on-accent: #06201C;
    --rule: color-mix(in oklab, #E4E7EB 15%, transparent);
    --rule-strong: color-mix(in oklab, #E4E7EB 28%, transparent);
    --edge: color-mix(in oklab, #E4E7EB 44%, transparent);
    --focus: #4FC7B8;
  }
}
:root[data-theme="dark"] .cab {
  --bg: #0F1216; --surface: #171B21; --surface-sunk: #12161B;
  --text: #E4E7EB; --text-muted: #A2ADBA;
  --accent: #4FC7B8; --accent-text: #4FC7B8; --on-accent: #06201C;
  --rule: color-mix(in oklab, #E4E7EB 15%, transparent);
  --rule-strong: color-mix(in oklab, #E4E7EB 28%, transparent);
  --edge: color-mix(in oklab, #E4E7EB 44%, transparent);
  --focus: #4FC7B8;
}
.cab h1 { font-size: var(--h3-size); line-height: var(--h3-lh); }
.cab h2 { font-size: var(--h4-size); line-height: var(--h4-lh); }
.cab h3 { font-size: var(--h5-size); line-height: var(--h5-lh); }
.cab h4 { font-size: var(--h6-size); line-height: var(--h6-lh); }
.cab h5, .cab h6 { font-size: var(--h7-size); line-height: var(--h7-lh); }
.gate,
.cab,
.crm {
  --note-size: 1rem;
  --note-lh: 1.5rem;
}
.rules-do {
  position: sticky;
  inset-block-end: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-s);
  margin-block-start: var(--space-l);
  padding-block: var(--space-2xs);
  background: var(--bg);
  border-block-start: var(--border-hair) solid var(--rule);
}
.rules-do__note {
  flex: 1 1 16rem;
  color: var(--text-muted);
  font-size: var(--note-size);
  line-height: var(--note-lh);
}
.cab {
  --cabtabs: 4rem;
  background: var(--bg);
  color: var(--text);
  min-block-size: 100vh;
  min-block-size: 100svh;
}
.cab__bar {
  border-block-end: var(--border-hair) solid var(--rule);
  background: var(--surface);
}
.cab__bar-inner {
  display: flex; align-items: center; gap: var(--space-s);
  flex-wrap: wrap; min-block-size: 3.5rem;
}
.cab__nav {
  display: flex;
  gap: var(--space-2xs);
  margin-inline-start: auto;
  flex-wrap: wrap;
}
.cab__nav a {
  color: var(--text-muted); text-decoration: none; font-size: var(--step--1);
  line-height: var(--note-lh);
  min-block-size: var(--tap-min);
  min-inline-size: var(--tap-min);
  justify-content: center;
  display: inline-flex; align-items: center;
}
.cab__nav a:hover { color: var(--text); }
.cab__nav a[aria-current="page"] {
  color: var(--text);
  box-shadow: inset 0 -3px 0 var(--accent);
}
.cab__nav a:active { background: var(--surface-sunk); }
.cab__nav--more { margin-inline-start: 0; }
.cab__ic {
  display: none;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  flex: none;
}
.cab :where(p, dd, li) > a:not(.btn):not(.linkline) {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
}
.stat-row {
  display: grid; gap: var(--border-hair); background: var(--rule);
  border: var(--border-hair) solid var(--rule); margin-block-start: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}
.stat { background: var(--surface); padding: var(--space-m) var(--space-s); }
.stat__n {
  font-family: var(--font-display); font-size: var(--h2-size);
  font-weight: var(--weight-heading); line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums slashed-zero;
}
.stat__n--warn { color: var(--danger); }
@media (max-width: 46rem) {
  .stat--lead { grid-column: 1 / -1; }
}
.stat__l { color: var(--text-muted); margin-block-start: var(--space-2xs); }
.pill {
  display: inline-block; font-size: var(--link-size);
  line-height: var(--link-lh); font-weight: var(--weight-note);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.25em 0.6em; border: var(--border-hair) solid var(--rule-strong);
  color: var(--text-muted);
}
.pill--due { border: var(--border-hair) dashed var(--danger); color: var(--danger); }
.pill--ok { border-color: var(--accent); color: var(--accent-text); }
.thread {
  display: grid; gap: var(--space-s);
  margin-block-start: var(--space-l);
  max-inline-size: var(--measure);
}
.msg {
  background: var(--surface);
  border: var(--border-hair) solid var(--rule);
  border-inline-start: 3px solid var(--rule-strong);
  padding: var(--space-s) var(--space-m);
}
.msg--team { border-inline-start-color: var(--accent); background: var(--surface-sunk); }
.msg__meta { font-size: var(--step--1);
  line-height: var(--note-lh); color: var(--text-muted); }
.msg__body { margin-block-start: var(--space-3xs); }
.msg__body p { margin-block: 0 var(--space-2xs); }
.msg__body p:last-child { margin-block-end: 0; }
.masthead { transition: transform var(--dur-fast) var(--ease-out); }
.masthead--away { transform: translateY(-100%); }
.masthead:focus-within { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .masthead { transition: none; }
  .masthead--away { transform: none; }
}
.to-top {
  position: fixed;
  inset-block-end: calc(var(--space-m) + env(safe-area-inset-bottom, 0px));
  inset-inline-end: var(--space-m);
  z-index: 30;
  inline-size: 3rem;
  block-size: 3rem;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: var(--radius-m);
  cursor: pointer;
  box-shadow: var(--shadow-lifted);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast);
}
.to-top--shown { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--oxide); }
.to-top svg { inline-size: 1.1rem; block-size: 1.1rem; }
:root[data-theme="dark"] .to-top,
:root:not([data-theme="light"]) .to-top {
  background: var(--surface);
  color: var(--text);
  border: var(--border-hair) solid var(--edge);
}
@media (max-width: 34rem) {
  .to-top { display: none; }
}
.page-loader { display: none; }
.js .page-loader {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 200;
  padding: var(--space-l);
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out),
              visibility var(--dur-slow) var(--ease-out);
}
.js.is-waiting .page-loader {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.page-loader__frame {
  display: grid;
  gap: var(--space-m);
  justify-items: center;
  inline-size: min(18rem, 100%);
}
.page-loader__mark {
  font-size: var(--step-3);
  line-height: var(--h2-lh);
}
.page-loader__mark .brand__word { font-size: inherit; }
.js.is-waiting .page-loader__mark {
  animation: loader-pulse 1400ms var(--ease-out) infinite;
}
@keyframes loader-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}
.page-loader__note {
  margin: 0;
  color: var(--text);
}
.page-loader__hint {
  margin: 0;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.js.is-waiting-long .page-loader__hint { opacity: 1; }
.disclaimer {
  max-inline-size: var(--measure);
  margin-block-start: var(--space-s);
  padding-block-start: var(--space-2xs);
  border-block-start: var(--border-hair) solid var(--rule);
  font-size: var(--step--1);
  line-height: var(--note-lh);
  color: var(--text-muted);
}
.disclaimer a { color: var(--accent-text); }
.facts-block {
  margin-block-start: var(--space-xl);
  padding: var(--space-m);
  border: var(--border-hair) solid var(--rule-strong);
  border-radius: var(--radius-m);
  background: var(--surface);
}
.facts-block h2 { margin-block-start: 0; }
.facts--wide {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: var(--space-2xs) var(--space-m);
  margin-block: var(--space-s) 0;
}
.facts--wide dt {
  font-size: var(--step--1);
  line-height: var(--note-lh);
  color: var(--text-muted);
}
.facts--wide dd {
  margin: 0;
  padding-block-end: var(--space-2xs);
  border-block-end: var(--border-hair) solid var(--rule);
  overflow-wrap: anywhere;
}
.facts--wide dd:last-of-type { border-block-end: none; }
@media (max-width: 34rem) {
  .facts--wide { grid-template-columns: 1fr; gap: 0; }
  .facts--wide dt { margin-block-start: var(--space-2xs); }
}
.switcher { display: flex; align-items: center; gap: var(--space-2xs); }
.switcher select {
  min-block-size: var(--tap-min);
  padding: var(--space-3xs) var(--space-2xs);
  border: var(--border-hair) solid var(--edge);
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--step--1);
  line-height: var(--note-lh);
  max-inline-size: 16rem;
}
.table-scroll { overflow-x: auto; margin-block: var(--space-m); }
.prose table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  line-height: var(--note-lh);
}
.prose th {
  padding: var(--space-2xs) var(--space-xs);
  border-block-end: var(--border-rule) solid var(--rule-strong);
  text-align: start;
  white-space: nowrap;
  font-size: var(--note-size);
  line-height: var(--note-lh);
  font-weight: var(--weight-note);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.prose td {
  padding: var(--space-2xs) var(--space-xs);
  border-block-end: var(--border-hair) solid var(--rule);
  vertical-align: top;
}
.prose tbody tr:last-child td { border-block-end: none; }
.calendar__whom { display: none; }
@media (max-width: 30rem) {
  .calendar__who { display: none; }
  .calendar__whom { display: block; margin-block-start: var(--space-3xs); }
}
@media (max-width: 30rem) {
  .table-scroll th,
  .prose th {
    padding-inline: var(--space-3xs);
    white-space: normal;
    overflow-wrap: normal;
  }
  .prose td {
    padding-inline: var(--space-3xs);
    overflow-wrap: anywhere;
  }
  .table-scroll td.num { overflow-wrap: normal; }
  .table-scroll td.num strong,
  .table-scroll td time,
  .prose td time {
    overflow-wrap: normal;
    white-space: nowrap;
  }
  .table-scroll td .card__meta,
  .prose td .card__meta { overflow-wrap: normal; }
  .table-scroll td.num .digest { overflow-wrap: anywhere; }
  .cab .table-scroll td.num { white-space: nowrap; }
  .cab .table-scroll td.num .digest { white-space: normal; }
}
.pricetag {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-s);
  margin-block: var(--space-m);
  padding: var(--space-s) var(--space-m);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius-m);
  background: var(--surface);
}
.pricetag strong {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pricetag span { color: var(--text-muted); }
.pricetag a { margin-inline-start: auto; font-size: var(--step--1);
  line-height: var(--note-lh); }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  margin-block: var(--space-l) var(--space-s);
}
.chip {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  padding-inline: var(--space-s);
  border: var(--border-hair) solid var(--edge);
  border-radius: 999px;
  font-size: var(--step--1);
  line-height: var(--note-lh);
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
.chip:hover { background: var(--surface-sunk); }
.chip.is-on {
  background: var(--accent);
  border-color: var(--accent-text);
  color: var(--on-accent);
  font-weight: var(--weight-note);
}
.scope {
  margin-block-start: var(--space-l);
  padding: var(--space-m);
  border-inline-start: 3px solid var(--rule-strong);
  background: var(--surface-sunk);
  border-radius: var(--radius-m);
}
.scope h3 { margin-block-start: 0; }
.scope ul { margin-block: var(--space-2xs); padding-inline-start: 1.2em; }
.scope li { margin-block: var(--space-3xs); }
.byline {
  margin-block: var(--space-2xs) var(--space-s);
  color: var(--text-muted);
}
.photo,
.clip { max-inline-size: var(--column-xl); }
.row--pictured { display: grid; gap: var(--space-m); align-items: start; }
@media (min-width: 46rem) {
  .row--pictured { grid-template-columns: var(--thumb-max) 1fr; }
  .row--pictured > .photo--thumb { grid-row: span 3; }
}
.photo--thumb { margin-block: 0; max-inline-size: var(--thumb-max); }
.photo--thumb img { border-radius: var(--radius-s); }
.photo--card {
  margin-block: 0 var(--space-s);
  margin-inline: calc(var(--space-m) * -1);
  margin-block-start: calc(var(--space-m) * -1);
}
.photo--card img {
  border-start-start-radius: var(--radius-m);
  border-start-end-radius: var(--radius-m);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.photo { margin-block: var(--space-l); }
.photo img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-m);
}
.photo__note {
  margin-block-start: var(--space-2xs);
  max-inline-size: var(--measure);
  color: var(--text-muted);
}
.clip { margin-block: var(--space-l); }
.clip__frame { position: relative; }
.clip__toggle {
  position: absolute;
  inset-block-end: var(--space-s);
  inset-inline-start: var(--space-s);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.clip__frame img,
.clip__video {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-m);
}
.clip__video { background: var(--ink); }
.clip__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  min-block-size: var(--tap-min);
  padding-inline: var(--space-s);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--text);
  font-weight: var(--weight-note);
}
.clip__ico { inline-size: 1.25em; block-size: 1.25em; flex: none; }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-s);
  margin-block-start: var(--space-l);
}
.card--link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-m);
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.card--link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lifted); }
.card--link h2 {
  margin: 0;
  font-size: var(--h5-size);
  line-height: var(--h5-lh);
}
.card--link p { margin: 0; color: var(--text-muted); font-size: var(--step--1);
  line-height: var(--note-lh); }
.card__price {
  margin-block-start: auto !important;
  padding-block-start: var(--space-2xs);
  border-block-start: var(--border-hair) solid var(--rule);
  color: var(--text) !important;
}
.card__price strong {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: var(--h4-lh);
  font-variant-numeric: tabular-nums;
}
.qr {
  inline-size: fit-content;
  margin-block: var(--space-l);
  padding: var(--space-s);
  background: #FFFFFF;
  border-radius: var(--radius-m);
}
.qr svg {
  display: block;
  inline-size: 13rem;
  block-size: 13rem;
}
.qr svg path { fill: #000000; }
.sources {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-m);
  border-block-start: var(--border-hair) solid var(--rule-strong);
}
.sources__title {
  margin-block-end: var(--space-m);
}
.sources__list {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin: 0;
}
.sources__item {
  padding: var(--space-s);
  border: var(--border-hair) solid var(--rule);
}
.sources__term {
  color: var(--text-muted);
}
.sources__value {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin: 0;
  margin-block-start: var(--space-2xs);
  max-inline-size: var(--measure);
}
.sources__value strong { font-size: var(--step-1);
  line-height: var(--h4-lh); }
.sources__norm,
.sources__checked {
  color: var(--text-muted);
}
.sources__link {
  align-self: start;
  color: var(--accent-text);
}
.peaks {
  margin-block: var(--space-l) 0;
  padding: var(--space-s) var(--space-m);
  border-inline-start: var(--border-rule) solid var(--warn);
  background: var(--surface);
  max-inline-size: var(--measure);
}
.peaks__title {
  margin-block: 0 var(--space-2xs);
}
.peaks__month {
  margin-block: 0 var(--space-2xs);
  font-size: var(--step--1);
  line-height: var(--note-lh);
}
.peaks__how {
  margin-block: var(--space-2xs) 0;
  color: var(--text-muted);
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3xs);
  color: var(--text-muted);
  margin-block-end: var(--space-s);
}
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--accent-text); }
.crumbs [aria-current="page"] { color: var(--text); }
.btn:focus-visible {
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--bg);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--surface-sunk);
  color: var(--text-muted);
  border-color: var(--rule);
  cursor: not-allowed;
}
.btn:disabled:active,
.btn[aria-disabled="true"]:active { transform: none; }
.btn--primary:active { background: var(--accent-text); }
.btn--ghost:active { background: var(--surface-sunk); }
.prose a:active,
.colophon a:active,
.crumbs a:active { text-decoration-thickness: 3px; }
a[aria-disabled="true"] {
  color: var(--text-muted);
  text-decoration: none;
  cursor: not-allowed;
}
.pricetag[data-estimate]::after {
  content: "попередня";
  align-self: center;
  font-size: var(--link-size);
  line-height: var(--link-lh);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field :is(input, textarea, select):hover:not(:disabled, [readonly], :focus-visible) {
  border-color: var(--text-muted);
}
.field :is(input, textarea, select):focus-visible { border-color: var(--focus); }
.field :is(input, textarea, select):disabled {
  background: var(--surface-sunk);
  color: var(--text-muted);
  border-color: var(--rule);
  cursor: not-allowed;
}
.field :is(input, textarea)[readonly] {
  background: var(--surface-sunk);
  border-style: dashed;
}
.field :is(input, textarea, select)[aria-invalid="true"] {
  border-color: var(--danger);
  border-width: var(--border-rule);
}
.field .error::before { content: "— "; }
.check {
  display: flex;
  align-items: start;
  gap: var(--space-2xs);
  min-block-size: var(--tap-min);
  padding-block: var(--space-3xs);
  font-weight: 400;
  cursor: pointer;
}
.check input[type="checkbox"],
.check input[type="radio"] {
  flex: none;
  inline-size: 1.15em;
  block-size: 1.15em;
  margin-block-start: 0.28em;
  accent-color: var(--accent);
}
.check:hover input[type="checkbox"]:not(:disabled):not(:focus-visible),
.check:hover input[type="radio"]:not(:disabled):not(:focus-visible) {
  outline: var(--border-hair) solid var(--edge);
}
.check:has(input:disabled) { color: var(--text-muted); cursor: not-allowed; }
.check:has(input[aria-invalid="true"]) { color: var(--danger); font-weight: var(--weight-note); }
.check:has(input[aria-invalid="true"]) input[type="checkbox"],
.check:has(input[aria-invalid="true"]) input[type="radio"] { accent-color: var(--danger); }
.stepper {
  display: flex;
  align-items: stretch;
  inline-size: fit-content;
  border: var(--border-hair) solid var(--edge);
  border-radius: var(--radius-s);
  background: var(--surface);
}
.stepper input[type="number"] {
  inline-size: 4.5rem;
  min-block-size: var(--tap-min);
  padding-inline: var(--space-2xs);
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums slashed-zero;
  appearance: textfield;
}
.stepper input[type="number"]::-webkit-outer-spin-button,
.stepper input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
.stepper__btn {
  inline-size: var(--tap-min);
  min-block-size: var(--tap-min);
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--step-1);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.stepper__btn:first-child { border-inline-end: var(--border-hair) solid var(--rule); }
.stepper__btn:last-child { border-inline-start: var(--border-hair) solid var(--rule); }
.stepper__btn:hover:not(:disabled) { background: var(--surface-sunk); }
.stepper__btn:active:not(:disabled) { background: var(--rule); }
.stepper__btn:disabled { color: var(--text-muted); cursor: not-allowed; }
.stepper:focus-within { border-color: var(--focus); }
.stepper:has(input[aria-invalid="true"]) {
  border-color: var(--danger);
  border-width: var(--border-rule);
}
.switch {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--space-2xs);
  min-block-size: var(--tap-min);
  padding-inline: var(--space-3xs);
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: var(--note-lh);
  cursor: pointer;
}
.switch__track {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: 3rem;
  block-size: 1.625rem;
  padding-inline: 0.1875rem;
  border: var(--border-hair) solid var(--edge);
  border-radius: 999px;
  background: var(--surface);
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.switch__ico {
  position: relative;
  z-index: 1;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  flex: none;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.switch:not([aria-checked="true"]) .switch__ico--sun { color: var(--surface); }
.switch[aria-checked="true"] .switch__ico--sun { color: var(--on-accent); }
.switch[aria-checked="true"] .switch__ico--moon { color: var(--accent); }
.switch__thumb {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border-radius: 999px;
  background: var(--text-muted);
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.switch[aria-checked="true"] .switch__track {
  background: var(--accent);
  border-color: var(--accent-text);
}
.switch[aria-checked="true"] .switch__thumb {
  transform: translateX(1.375rem);
  background: var(--on-accent);
}
.switch:hover { color: var(--text); }
.switch:hover .switch__track { border-color: var(--text-muted); }
.switch:active .switch__track { background: var(--surface-sunk); }
.switch[aria-checked="true"]:active .switch__track { background: var(--accent-text); }
.switch:disabled { color: var(--rule-strong); cursor: not-allowed; }
.switch:disabled .switch__track { background: var(--surface-sunk); }
@media (prefers-reduced-motion: reduce) {
  .switch__track, .switch__thumb { transition: none; }
}
[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] {
  cursor: progress;
  position: relative;
  overflow: hidden;
  color: transparent;
}
.btn[aria-busy="true"]::before {
  content: attr(data-busy-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--on-accent);
  font-weight: var(--weight-note);
}
.btn--ghost[aria-busy="true"]::before { color: var(--text); }
.btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: var(--border-rule);
  background: var(--on-accent);
  transform-origin: left;
  animation: pending 900ms var(--ease-out) infinite;
}
.btn--ghost[aria-busy="true"]::after { background: var(--text); }
.btn[aria-busy="true"][aria-disabled="true"]::before { color: var(--text-muted); }
.btn[aria-busy="true"][aria-disabled="true"]::after { background: var(--text-muted); }
@keyframes pending {
  0%   { transform: scaleX(0); }
  50%  { transform: scaleX(1); }
  100% { transform: scaleX(0) translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .btn[aria-busy="true"]::after { animation: none; transform: scaleX(1); }
}
.sending {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-s);
}
.sending__bar {
  display: none;
  inline-size: 4rem;
  block-size: var(--border-rule);
  background: var(--text);
  transform-origin: left;
}
.sending[data-letter-state="sending"] .sending__bar {
  display: block;
  animation: pending 900ms var(--ease-out) infinite;
}
.sending[data-letter-state="failed"] .sending__word { color: var(--danger); }
@media (prefers-reduced-motion: reduce) {
  .sending[data-letter-state="sending"] .sending__bar {
    animation: none;
    transform: scaleX(1);
  }
}
.num, td.num, th.num, .price,
.date-cell,
.deadline__date,
.pricetag strong,
.card__price strong {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums slashed-zero;
}
.ruled {
  padding-block: var(--baseline);
  border-block-end: var(--border-hair) solid var(--rule);
}
.ruled:last-child { border-block-end: 0; }
.ledger-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-s);
  min-block-size: var(--baseline);
  padding-block: var(--space-3xs);
  border-block-end: var(--border-hair) solid var(--rule);
}
.ledger-row:last-child { border-block-end: var(--border-rule) solid var(--text); }
.ledger-row__value {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums slashed-zero;
}
.tax-date {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-3xs);
}
.tax-date__day {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums slashed-zero;
  font-weight: var(--weight-heading);
  white-space: nowrap;
}
.tax-date__weekday {
  color: var(--text-muted);
}
.tax-date__arrow {
  font-weight: 400;
  margin-inline-end: 0.15em;
}
.tax-date .badge { white-space: normal; text-align: start; }
.tax-date a.badge { text-decoration: none; }
.tax-date a.badge:hover { border-color: var(--accent-text); color: var(--accent-text); }
.badge__short { display: none; }
@media (max-width: 30rem) {
  .table-scroll .badge,
  .prose .badge { overflow-wrap: normal; }
  .badge__full {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
  }
  .badge__short { display: inline; }
}
.dialog {
  inline-size: min(34rem, 100vw - 2 * var(--space-m));
  max-block-size: calc(100dvh - 2 * var(--space-l));
  padding: var(--space-l);
  border: var(--border-hair) solid var(--rule-strong);
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lifted);
}
.dialog::backdrop {
  background: color-mix(in oklab, var(--ink) 55%, transparent);
}
.dialog__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  margin-block-end: var(--space-m);
}
.dialog__title { margin: 0; }
.dialog--leave { inline-size: min(26rem, 100vw - 2 * var(--space-m)); }
.dialog--leave p { max-inline-size: var(--measure); }
.dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block-start: var(--space-m);
}
.dialog__actions .btn { flex: 1 1 9rem; }
.dialog--contact .dialog__actions .btn { flex: 0 1 auto; }
.contact-value {
  margin-block: var(--space-2xs) 0;
  font-size: var(--step-1);
  line-height: var(--h4-lh);
}
@media (max-width: 34rem) {
  .dialog--leave,
  .dialog--contact {
    inline-size: 100vw;
    max-inline-size: none;
    margin: auto 0 0;
    border-inline: 0;
    border-block-end: 0;
    border-radius: var(--radius-m) var(--radius-m) 0 0;
    padding-block-end: calc(var(--space-l) + env(safe-area-inset-bottom, 0px));
  }
  .dialog--contact .dialog__actions .btn { flex: 1 1 100%; }
}
@media print {
  :root { color-scheme: light; }
  body { color: #000; }
  .masthead,
  .cab__bar,
  .to-top,
  .skip-link,
  .switch,
  .colophon,
  .dialog { display: none !important; }
  .wrap { max-inline-size: none; padding-inline: 0; }
  .section { padding-block: 0; }
  a { color: #000; }
  .prose a[href^="http"]::after,
  .card__meta a[href^="http"]::after { content: " (" attr(href) ")"; }
  .table-scroll { overflow: visible; }
  table, tr, .card, .notice, .pricetag, figure { break-inside: avoid; }
  h1, h2, h3, caption { break-after: avoid; }
}
.above-3xs { margin-block-start: var(--space-3xs); }
.above-2xs { margin-block-start: var(--space-2xs); }
.above-s   { margin-block-start: var(--space-s); }
.above-m   { margin-block-start: var(--space-m); }
.above-l   { margin-block-start: var(--space-l); }
.above-xl  { margin-block-start: var(--space-xl); }
.above-2xl { margin-block-start: var(--space-2xl); }
.around-s { margin-block: var(--space-s); }
.measure { max-inline-size: var(--measure); }
.column-2xs { max-inline-size: var(--column-2xs); }
.column-xs  { max-inline-size: var(--column-xs); }
.column-s   { max-inline-size: var(--column-s); }
.column-m   { max-inline-size: var(--column-m); }
.column-l   { max-inline-size: var(--column-l); }
.column-xl  { max-inline-size: var(--column-xl); }
.stack--flow-none { --flow: 0; }
.stack--flow-2xs  { --flow: var(--space-2xs); }
.stack--flow-m    { --flow: var(--space-m); }
.gap-2xs { gap: var(--space-2xs); }
.gap-s   { gap: var(--space-s); }
.gap-m   { gap: var(--space-m); }
.spread { justify-content: space-between; }
.surface-sunk { background: var(--surface-sunk); }
.ruled-above {
  padding-block-start: var(--space-s);
  border-block-start: var(--border-rule) solid var(--text);
}
.ruled-above--tight { padding-block-start: var(--space-2xs); }
.framed { padding: var(--space-m); border: var(--border-hair) solid var(--rule); }
.row-2xs { padding-block: var(--space-2xs); }
.row-m   { padding-block: var(--space-m); }
.row-ruled { border-block-end: var(--border-hair) solid var(--rule); }
.list-bare { padding: 0; list-style: none; }
.cell-nested { padding-inline-start: var(--space-l); }
.fieldset-plain { border: 0; padding: 0; }
.fieldset-plain > legend { padding: 0; }
.inline-form { display: inline; }
@media (max-width: 43.75rem) {
  .grid--cards thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .grid--cards tbody,
  .grid--cards tr,
  .grid--cards td { display: block; }
  .grid--cards tr {
    margin-block-end: var(--space-2xs);
    padding: var(--space-s);
    border: var(--border-hair) solid var(--rule);
    border-radius: var(--radius-m);
    background: var(--surface);
  }
  .grid--cards tr.is-hot { border-color: var(--danger); }
  .grid--cards td {
    display: grid;
    grid-template-columns: minmax(min(7rem, 40%), min-content) minmax(0, 1fr);
    gap: var(--space-2xs);
    align-items: baseline;
    padding: var(--space-3xs) 0;
    border-block-end: 0;
    overflow-wrap: anywhere;
  }
  .grid--cards td::before {
    content: attr(data-label);
    font-size: var(--note-size);
    line-height: var(--note-lh);
    color: var(--text-muted);
    overflow-wrap: normal;
  }
  .grid--cards td[data-label] > * { grid-column: 2; }
  .grid--cards td:not([data-label]) { grid-template-columns: minmax(0, 1fr); }
  .grid--cards .grid__name { min-block-size: var(--tap-min); }
  .grid--cards td > a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-min);
  }
  .grid--cards .ta-r,
  .grid--cards td:last-child,
  .grid--cards th:last-child { text-align: start; }
  .grid--cards td::before,
  .grid--cards td.num,
  .grid--cards .pill,
  .grid--cards .stage { white-space: normal; }
  .grid--cards .btn {
    overflow-wrap: normal;
    padding-inline: var(--space-xs);
  }
  .grid--cards td[data-label] > form { grid-column: span 2; }
  .grid--cards tr.is-stop td:first-child { box-shadow: none; }
  .grid--cards tr.is-stop {
    border-inline-start: 3px solid var(--danger);
  }
}
@media (max-width: 43.75rem) {
  .cab__nav--main {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 30;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(max-content, 1fr);
    gap: 0;
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    background: var(--surface);
    border-block-start: var(--border-hair) solid var(--rule);
  }
  .cab__nav--main a {
    flex-direction: column;
    gap: 2px;
    min-block-size: var(--cabtabs);
    padding: var(--space-3xs) 2px;
  }
  .cab__ic { display: block; }
  .cab__nav--main a[aria-current="page"] {
    box-shadow: inset 0 3px 0 var(--accent);
  }
  .cabinet__main {
    padding-block-end: calc(var(--cabtabs) + var(--space-xl)
                            + env(safe-area-inset-bottom, 0px));
  }
  .rules-do {
    inset-block-end: calc(var(--cabtabs) + var(--border-hair)
                          + env(safe-area-inset-bottom, 0px));
  }
  .cab .to-top {
    inset-block-end: calc(var(--cabtabs) + var(--space-2xs)
                          + env(safe-area-inset-bottom, 0px));
  }
}
.digest { white-space: normal; overflow-wrap: anywhere; }
.icon-sprite { display: none; }
.cabinet__main { padding-block: var(--space-l) var(--space-2xl); }
.rule--spaced { margin-block: var(--space-m); }
.fold > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-block-size: var(--tap-min);
  padding-block: var(--space-2xs);
  font-weight: var(--weight-note);
  cursor: pointer;
}
.fold > summary::before {
  content: "";
  inline-size: 0;
  block-size: 0;
  border-block: 0.32em solid transparent;
  border-inline-start: 0.42em solid currentColor;
  transition: transform var(--dur-fast) var(--ease-out);
}
.fold[open] > summary::before { transform: rotate(90deg); }
.quote {
  border: var(--border-rule) solid var(--text);
  background: var(--surface);
  padding: var(--space-m);
}
.quote__label {
  display: block;
  font-size: var(--note-size);
  line-height: var(--note-lh);
  letter-spacing: 0.03em;
  font-weight: var(--weight-note);
  color: var(--text-muted);
  margin-block-end: var(--space-2xs);
}
.quote__select {
  inline-size: 100%;
  min-block-size: var(--tap-min);
  padding: var(--space-2xs) var(--space-xs);
  background: var(--bg);
  border: var(--border-hair) solid var(--edge);
  border-radius: var(--radius-s);
}
.quote__amount {
  display: block;
  margin-block: var(--space-m) 0;
  padding-block-start: var(--space-s);
  border-block-start: var(--border-rule) solid var(--text);
}
.quote__value {
  font-family: var(--font-display);
  font-size: clamp(2.9rem, 1.9rem + 4.8vw, 5rem);
  font-weight: var(--weight-heading);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums slashed-zero;
  display: inline-block;
}
.quote__unit {
  display: block;
  color: var(--text-muted);
  font-size: var(--h4-size);
  line-height: var(--h4-lh);
  margin-block-start: var(--space-2xs);
}
.quote__submit { margin-block: var(--space-s) 0; }
.quote__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-s); margin-block-start: var(--space-m);
}
.quote__more {
  font-size: var(--link-size);
  line-height: var(--link-lh);
  font-weight: var(--weight-link);
}
@media (prefers-reduced-motion: no-preference) {
  .quote__value[data-bump] { animation: bump 260ms var(--ease-out); }
}
@keyframes bump {
  0%   { transform: translateY(0.12em); opacity: .4; }
  100% { transform: none; opacity: 1; }
}
.tiles {
  display: grid;
  gap: var(--border-hair);
  background: var(--rule);
}
@media (min-width: 40rem) and (max-width: 61.999rem) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tiles .tile:last-child { grid-column: span 2; }
}
@media (min-width: 62rem) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile {
  display: grid;
  align-content: start;
  justify-items: center;
  text-align: center;
  gap: var(--space-2xs);
  padding: var(--space-m) var(--space-s);
  background: var(--bg);
  text-decoration: none;
  color: var(--text);
  position: relative;
  transition: background-color var(--dur-slow) var(--ease-out);
}
.tile:hover { background: var(--surface); }
.tile__k {
  font-size: var(--note-size); line-height: var(--note-lh);
  letter-spacing: 0.03em;
  font-weight: var(--weight-note); color: var(--accent-text);
}
.tile__v { color: var(--text-muted); }
.tile::after {
  content: "";
  position: absolute;
  inset-block-end: 0; inset-inline: 0;
  block-size: var(--border-rule);
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.tile:hover::after, .tile:focus-visible::after { transform: scaleX(1); }
.deadline { padding-block: var(--space-l); }
.deadline__row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  padding-block-start: var(--space-s);
  border-block-start: var(--border-rule) solid var(--text);
}
.deadline__date {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem);
  font-weight: var(--weight-heading); line-height: 1; letter-spacing: -0.03em;
  color: var(--accent-text);
}
.deadline__title {
  font-size: var(--h4-size); line-height: var(--h4-lh);
  max-inline-size: var(--measure);
}
.deadline__who {
  color: var(--text-muted);
  font-size: var(--note-size); line-height: var(--note-lh);
  font-weight: var(--weight-note);
  max-inline-size: var(--measure);
}
.deadline__link {
  margin-inline-start: auto;
  font-size: var(--link-size); line-height: var(--link-lh);
  font-weight: var(--weight-link);
}
.reads { list-style: none; margin: var(--space-m) 0 0; padding: 0; }
.reads__item {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-s);
  padding-block: var(--space-xs);
  border-block-end: var(--border-hair) solid var(--rule);
  max-inline-size: var(--measure);
}
.reads__item a { text-decoration: none; color: var(--text); }
.reads__item a:hover { color: var(--accent-text); text-decoration: underline; }
.reads__date {
  color: var(--text-muted); flex: none;
  font-size: var(--note-size); line-height: var(--note-lh);
  font-weight: var(--weight-note);
}
.closing {
  border-block-start: var(--border-rule) solid var(--text);
  padding-block-start: var(--space-l);
  max-inline-size: var(--prose-max);
  display: grid; gap: var(--space-s);
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .tile, .reads__item, .closing, .deadline__row, .card {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
  }
}
@keyframes reveal {
  from { transform: translateY(10px); }
  to   { transform: none; }
}
.statement {
  font-size: var(--step-2);
  line-height: var(--h3-lh);
  max-inline-size: var(--measure);
  margin-block: var(--space-l) var(--space-m);
  text-wrap: pretty;
}
.statement span { color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .statement span {
      animation: inking linear both;
      animation-timeline: view();
      animation-range: entry 25% cover 62%;
    }
  }
}
@media (prefers-reduced-motion: no-preference) {
  .burger[open] .burger__panel,
  .colophon--tabbed .colophon__grid > dl.is-open {
    animation: unfolding 160ms var(--ease-out);
  }
}
@keyframes unfolding {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes inking {
  from { color: var(--text-muted); }
  to   { color: var(--text); }
}
.pinned { display: grid; gap: var(--space-l); }
.pinned__text { max-inline-size: var(--measure); }
@media (min-width: 60rem) {
  .pinned {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .pinned__media {
    position: sticky;
    inset-block-start: calc(var(--masthead-h) + var(--space-m));
  }
  .pinned__text > :first-child { margin-block-start: 0; }
}
.photo:not(.photo--thumb) { overflow: clip; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .photo:not(.photo--thumb) img {
      animation: settling linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 34%;
    }
  }
}
@keyframes settling {
  from { transform: scale(1.05); }
  to   { transform: none; }
}
body {
  background-color: var(--bg);
  background-attachment: scroll;
}
.band { padding-block: var(--space-xl); border-block-end: var(--border-hair) solid var(--rule); }
.band--sunk { background: color-mix(in oklab, var(--surface) 70%, transparent); }
.band--ink {
  background: var(--ink);
  color: var(--paper);
  border-block-end: 0;
}
:root[data-theme="dark"] .band--ink,
:root:not([data-theme="light"]) .band--ink { background-color: #080B0F; }
.band--ink h2, .band--ink h3 { color: var(--paper); }
.band--ink a { color: #E2764F; }
.band--ink .rule { background: color-mix(in oklab, var(--paper) 22%, transparent); }
.band--ink .card__meta, .band--ink .tile__v { color: color-mix(in oklab, var(--paper) 62%, transparent); }
.band--ink .lede { color: color-mix(in oklab, var(--paper) 78%, transparent); }
.band--ink .card { color: var(--text); }
.band--ink .card :is(h2, h3) { color: var(--text); }
.band--ink .card a { color: var(--accent-text); }
.band--ink .card .card__meta { color: var(--text-muted); }
.band--photo {
  position: relative;
  isolation: isolate;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.band--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: color-mix(in oklab, var(--ink) var(--photo-veil), transparent);
}
.band--photo-paper { background-image: url("../img/arkhiv-dokumentiv-1600.07ccd5dbdf21.webp"); }
.band--photo-desk { background-image: url("../img/stil-z-planerom-1600.a60c70bded95.webp"); }
.band--photo-ledger { background-image: url("../img/bukhhalterska-knyha-1600.5614476d7540.webp"); }
.figure-row {
  display: grid; gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  margin-block-start: var(--space-l);
}
.figure__n {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem);
  font-weight: var(--weight-heading); line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums slashed-zero;
  color: var(--accent-text);
}
.band--ink .figure__n { color: #E2764F; }
.figure__l { color: var(--text-muted); margin-block-start: var(--space-2xs); }
.band--ink .figure__l { color: color-mix(in oklab, var(--paper) 65%, transparent); }
.hero {
  background-color: var(--bg);
  border-block-end: var(--border-hair) solid var(--rule);
}
.hero__inner {
  display: grid;
  gap: var(--space-l);
  padding-block: var(--space-xl);
}
@media (min-width: 62rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    grid-template-areas:
      "lede form"
      "marks form";
    gap: var(--space-l) var(--space-xl);
    padding-block: var(--space-2xl);
    align-content: center;
  }
  .hero__lede { grid-area: lede; align-self: end; }
  .hero__marks { grid-area: marks; align-self: start; }
  .hero .quote { grid-area: form; align-self: center; }
}
.hero__eyebrow {
  font-size: var(--note-size);
  line-height: var(--note-lh);
  letter-spacing: 0.03em;
  font-weight: var(--weight-note);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
.hero__eyebrow::before {
  content: "";
  inline-size: 2.2rem;
  block-size: var(--border-rule);
  background: var(--accent);
  flex: none;
}
.hero h1 {
  margin-block: var(--space-s) var(--space-m);
  letter-spacing: -0.03em;
  max-inline-size: var(--measure-title);
}
.hero__note {
  font-size: var(--h4-size);
  line-height: var(--text-lh);
  max-inline-size: var(--measure-eyebrow);
}
@media (max-width: 52rem) and (max-height: 46rem) {
  .hero__inner {
    padding-block: var(--space-m);
    gap: var(--space-s);
  }
  .hero h1 {
    font-size: var(--h3-size);
    line-height: var(--h3-lh);
    margin-block: var(--space-2xs) var(--space-s);
  }
  .quote { padding: var(--space-s); }
  .quote__amount { margin-block-start: var(--space-s); }
}
.hero__marks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-l);
  padding-block-start: var(--space-s);
  border-block-start: var(--border-hair) solid var(--rule-strong);
  font-size: var(--note-size);
  line-height: var(--note-lh);
  font-weight: var(--weight-note);
  color: var(--text-muted);
}
.hero__marks b { color: var(--text); font-weight: var(--weight-note); }
.hero__mark {
  position: relative;
  min-block-size: var(--tap-min-floor);
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-slow) var(--ease-out);
}
.hero__mark::after {
  content: "";
  position: absolute;
  inset-block-end: 0; inset-inline: 0;
  block-size: var(--border-hair);
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.hero__mark:hover,
.hero__mark:focus-visible { color: var(--text); }
.hero__mark:hover::after,
.hero__mark:focus-visible::after { transform: scaleX(1); }
.hero .quote {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: var(--shadow-raised);
  --focus: var(--oxide-strong);
  --surface: var(--paper-bright);
  --rule-strong: color-mix(in oklab, var(--ink) 26%, transparent);
  --text-muted: var(--slate);
  --accent-text: var(--oxide-strong);
  --rule: color-mix(in oklab, var(--ink) 12%, transparent);
}
.hero .quote__label { color: var(--slate); }
.hero .quote__select { background: var(--surface); border-color: var(--rule-strong); }
.hero .quote__amount { border-block-start-color: var(--ink); }
.hero .quote__value { color: var(--ink); }
.hero .quote__unit { color: var(--slate); }
.hero .quote__more { color: var(--oxide-strong); }
.hero .quote .disclaimer {
  max-inline-size: var(--measure);
  margin-block-start: var(--space-s);
}
@media print {
  body,
  :root[data-theme="dark"] body,
  :root:not([data-theme="light"]) body {
    background-color: #FFF;
    background-image: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--dur-fast);
    animation-timing-function: var(--ease-out);
  }
}
.masthead { view-transition-name: masthead; }
.colophon { view-transition-name: colophon; }
.reading { display: none; }
@supports (animation-timeline: scroll()) {
  .reading {
    display: block;
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 30;
    block-size: 0.1875rem;
    pointer-events: none;
  }
  .reading__bar {
    display: block;
    block-size: 100%;
    background: var(--accent);
    transform-origin: left center;
    animation: reading linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes reading {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
}
