/* «Архивный отдел»: тема. Описание решений в DESIGN.md */
:root {
  --bg: oklch(0.965 0.012 85);
  --surface: oklch(0.985 0.008 85);
  --surface-2: oklch(0.93 0.015 85);
  --ink: oklch(0.23 0.025 275);
  --ink-soft: oklch(0.45 0.02 275);
  --line: oklch(0.85 0.015 85);
  --oxblood: oklch(0.42 0.15 22);
  --oxblood-deep: oklch(0.34 0.12 22);
  --indigo: oklch(0.36 0.09 268);
  --moss: oklch(0.52 0.1 145);
  --strap: oklch(0.8 0.12 85);
  --paper-on-red: oklch(0.95 0.02 60);

  --accent: var(--oxblood);
  --accent-ink: var(--paper-on-red);
  --focus: var(--strap);

  --offer-bg: var(--surface);
  --offer-ink: var(--ink);
  --offer-line: oklch(0.8 0.02 85);

  --radius-s: 3px;
  --radius-m: 6px;
  --radius-l: 10px;

  --font-display: "Geologica", "Golos Text", system-ui, sans-serif;
  --font-body: "Golos Text", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --bevel-hi: oklch(1 0 0 / 0.55);
  --bevel-lo: oklch(0.2 0.03 275 / 0.35);
  --shadow-window: 0 1px 0 var(--bevel-hi) inset, 0 24px 48px -28px oklch(0.23 0.05 275 / 0.45), 0 2px 6px -2px oklch(0.23 0.05 275 / 0.2);
}

h1, h2 { font-variation-settings: "CRSV" 0; letter-spacing: -0.02em; }

/* ---------- Шапка ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in oklch, var(--bg) 92%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.site-header.is-stuck { border-bottom-color: var(--line); background: var(--bg); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; }
.brand svg { width: 34px; height: 34px; }
.nav { display: flex; gap: 1.5rem; align-items: center; font-size: 0.9375rem; }
.nav a:not(.btn-bevel) { text-decoration: none; color: var(--ink-soft); transition: color var(--dur-fast) var(--ease-out); }
.nav a:not(.btn-bevel):hover { color: var(--ink); }
@media (max-width: 720px) { .nav a:not(.btn-bevel) { display: none; } }

/* ---------- Кнопки со скосом ---------- */
.btn-bevel {
  --b-bg: var(--surface);
  --b-ink: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 48px; padding: 0 1.4rem;
  background: var(--b-bg); color: var(--b-ink);
  border: 1px solid var(--ink); border-radius: var(--radius-s);
  box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo);
  font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: box-shadow 120ms var(--ease-out), transform 120ms var(--ease-out), background-color var(--dur) var(--ease-out);
}
.btn-bevel:hover { --b-bg: color-mix(in oklch, var(--surface) 80%, var(--strap)); }
.btn-bevel:active { box-shadow: inset 2px 2px 0 var(--bevel-lo), inset -1px -1px 0 var(--bevel-hi); transform: translateY(1px); }
.btn-bevel--primary { --b-bg: var(--oxblood); --b-ink: var(--paper-on-red); border-color: var(--oxblood-deep); }
.btn-bevel--primary:hover { --b-bg: color-mix(in oklch, var(--oxblood) 88%, white); }
.btn-bevel--small { min-height: 40px; padding: 0 1rem; font-size: 0.9375rem; }
.btn-bevel[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.btn-bevel svg { width: 18px; height: 18px; }
.btn-meta { font-weight: 400; font-size: 0.8125rem; opacity: 0.8; font-family: var(--font-mono); }

/* ---------- Герой ---------- */
.hero { position: relative; isolation: isolate; padding-block: clamp(2.5rem, 7vw, 6rem) clamp(3rem, 8vw, 7rem); overflow: clip; }
.hero::before {
  /* оксбладовая полоса-корешок, на которой стоит окно архива */
  content: ""; position: absolute; inset: 38% 0 0 52%; background: var(--oxblood); z-index: -1;
}
@media (max-width: 959px) { .hero::before { inset: 62% 0 0 0; } }
.hero .wrap { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 960px) { .hero .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }

.stamp {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1.5px solid var(--oxblood); color: var(--oxblood);
  padding: 0.3rem 0.7rem; border-radius: var(--radius-s);
  font-size: 0.8125rem; font-weight: 600; transform: rotate(-1.5deg);
}
.hero h1 { margin-top: 1.4rem; font-size: clamp(2.25rem, 4.4vw, 3.75rem); font-weight: 800; line-height: 1.02; }
.hero h1 em { font-style: normal; color: var(--oxblood); }
.hero .lead { margin-top: 1.4rem; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--ink-soft); max-width: 46ch; }
.hero .cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero .fineprint { margin-top: 1rem; font-size: 0.875rem; color: var(--ink-soft); max-width: 52ch; }

/* ---------- Окно ---------- */
.window {
  background: var(--surface); border: 1px solid var(--ink); border-radius: var(--radius-m);
  box-shadow: var(--shadow-window); overflow: hidden;
}
.window__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.45rem 0.6rem 0.45rem 0.9rem; background: var(--indigo); color: var(--paper-on-red);
  font-size: 0.8125rem; font-weight: 600;
}
.window__ctrls { display: flex; gap: 4px; }
.window__ctrls i { width: 18px; height: 16px; background: var(--surface-2); border: 1px solid var(--ink); box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -1px -1px 0 var(--bevel-lo); }
.window__tools { display: flex; gap: 2px; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: 0.75rem; overflow: hidden; }
.window__tools span { padding: 0.25rem 0.55rem; border: 1px solid transparent; white-space: nowrap; }
.window__tools span:first-child { border-color: var(--ink-soft); background: var(--surface); }
.hero-canvas { width: 100%; aspect-ratio: 5 / 4; background: var(--surface); }
.window__status {
  display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0.9rem;
  border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-soft);
}

/* ---------- Секции ---------- */
.section { padding-block: clamp(4rem, 10vw, 8rem); }
.section h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); font-weight: 800; max-width: 18ch; }
.section .section-lead { margin-top: 1rem; color: var(--ink-soft); max-width: 58ch; font-size: 1.0625rem; }

.split { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; } }

.abilities { margin: 2rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.abilities li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.abilities .n { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--oxblood); padding-top: 0.2rem; }
.abilities h3 { font-family: var(--font-body); font-size: 1.125rem; font-weight: 600; }
.abilities p { margin-top: 0.3rem; color: var(--ink-soft); font-size: 0.9375rem; }

/* Ведомость файлов */
.ledger { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.ledger th { text-align: left; font-weight: 500; color: var(--ink-soft); padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--ink); background: var(--surface-2); white-space: nowrap; }
.ledger td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--line); font-family: var(--font-mono); white-space: nowrap; }
.ledger td:first-child { font-family: var(--font-body); white-space: normal; }
.ledger .num { text-align: right; }
.ledger .bar { width: 34%; min-width: 90px; }
.ledger .bar span {
  display: block; height: 8px; background: var(--moss); transform-origin: left;
  transform: scaleX(0); transition: transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms + 200ms);
}
.is-in .ledger .bar span { transform: scaleX(var(--r)); }
.ledger tfoot td { font-weight: 600; border-bottom: 0; background: var(--surface-2); }
@media (max-width: 560px) { .ledger .hide-sm { display: none; } }
.ledger-wrap { overflow-x: auto; }

/* ---------- Лицензия ---------- */
.license { background: var(--oxblood); color: var(--paper-on-red); }
.license .section-lead { color: color-mix(in oklch, var(--paper-on-red) 82%, var(--oxblood)); }
.license h2 { max-width: 16ch; }
.price-rows { margin-top: 2.5rem; border-top: 1px solid color-mix(in oklch, var(--paper-on-red) 40%, transparent); }
.price-row {
  display: grid; gap: 0.75rem 2rem; padding: 1.5rem 0;
  border-bottom: 1px solid color-mix(in oklch, var(--paper-on-red) 40%, transparent);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) { .price-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto; align-items: center; } }
.price-row h3 { font-size: 1.5rem; font-weight: 700; }
.price-row p { font-size: 0.9375rem; color: color-mix(in oklch, var(--paper-on-red) 82%, var(--oxblood)); }
.price { font-family: var(--font-display); font-size: 2rem; font-weight: 800; white-space: nowrap; }
.price small { font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; }
.license .btn-bevel { --b-bg: var(--paper-on-red); --b-ink: var(--oxblood-deep); border-color: var(--oxblood-deep); }
.license .note { margin-top: 1.5rem; font-size: 0.875rem; max-width: 70ch; color: color-mix(in oklch, var(--paper-on-red) 78%, var(--oxblood)); }
.license :focus-visible { outline-color: var(--strap); }

/* ---------- Честная загрузка ---------- */
.honest { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .honest { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.honest-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.25rem; }
.honest-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0.9rem; }
.honest-list svg { width: 28px; height: 28px; color: var(--moss); }
.honest-list strong { display: block; font-weight: 600; }
.honest-list span { color: var(--ink-soft); font-size: 0.9375rem; }

/* ---------- FAQ ---------- */
.faq { margin-top: 2rem; border-top: 1px solid var(--ink); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-weight: 600; font-size: 1.0625rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 2px solid var(--oxblood); border-bottom: 2px solid var(--oxblood);
  transform: rotate(45deg); transition: transform var(--dur) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq .answer { padding: 0 0 1.25rem; color: var(--ink-soft); max-width: 68ch; }

/* ---------- Подвал ---------- */
.site-footer { border-top: 1px solid var(--ink); padding-block: 2.5rem 3rem; font-size: 0.875rem; }
.site-footer .wrap { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .site-footer .wrap { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.site-footer nav { display: flex; flex-direction: column; gap: 0.4rem; }
.site-footer nav a { color: var(--ink-soft); }

/* ---------- Загрузка: акценты темы ---------- */
.dl-main .window { margin-top: 2rem; }
.dl-main .window .file-facts { margin: 0; padding: 0 1rem; border-top: 0; }
.dl-main .window .file-facts > :nth-last-child(-n + 2) { border-bottom: 0; }
.offer { border-color: var(--ink); box-shadow: var(--shadow-window); }
.offer__logo { background: var(--surface-2); }

@media (max-width: 480px) {
  .hero .cta > *, .dl-actions > [data-download-main] { width: 100%; }
  .btn-bevel { white-space: normal; text-align: center; padding-block: 0.6rem; }
}

.num, .price { font-variant-numeric: tabular-nums; }