/* ===================================================================
   Сайт Григория Смирнова: общая вёрстка.

   Собирается через Jinja вместе с файлами стилей templates/styles/<id>.css.j2
   (список — config.yaml, styles). Здесь только раскладка и компоненты;
   цвета, шрифты, скругления — токены, которые задаёт файл стиля под
   :root[data-style="<id>"] и :root[data-style="<id>"][data-theme="light"].

   Контракт токенов (каждый стиль задаёт все):
     цвета   --bg --raised --rule --rule-strong --ink --muted --accent
             --figure --link-hover --cta --cta-hover --cta-ink --focus
             --mat --photo-bg --shadow --photo-filter --shot-filter
     шрифты  --font-text --font-display --w-display --w-head --w-strong
     формы   --radius-btn --radius-panel --rule-double

   Раскладка — во всю ширину окна: поля --pad по краям, сетки и скриншоты
   тянутся до 2560 px, длинный текст держится в --measure (около 70 знаков).
   Мобильная вёрстка — первая, от 360 px.
   =================================================================== */

:root {
  --pad: clamp(16px, 4vw, 72px);
  --measure: 66ch;
  --gap: clamp(24px, 3vw, 48px);
  --chapter: clamp(56px, 8vw, 128px);
  --cover-photo: min(41.667vw, 52rem);
}

/* На широких мониторах всё крупнее пропорционально: rem растёт. */
@media (min-width: 1800px) { html { font-size: 106.25%; } }
@media (min-width: 2300px) { html { font-size: 112.5%; } }

/* --------------------------------------------------------------- база */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-variant-numeric: lining-nums tabular-nums;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 960px) { body { font-size: 1.125rem; } }

img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
table { border-collapse: collapse; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
[tabindex="-1"]:focus { outline: none; }

.skip-link {
  position: absolute; left: var(--pad); top: -100px; z-index: 50;
  padding: 8px 14px; border-radius: var(--radius-panel);
  background: var(--cta); color: var(--cta-ink); text-decoration: none;
}
.skip-link:focus { top: 8px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.icon { width: 1.1em; height: 1.1em; flex: none; }
.icon--inline { width: .85em; height: .85em; margin-left: .3em; vertical-align: -.05em; }

.measure { max-width: var(--measure); }
.muted { color: var(--muted); }

/* ------------------------------------------------------------ кнопки */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px;
  border: 1px solid transparent; border-radius: var(--radius-btn);
  font: inherit; font-size: 1rem; font-weight: 500; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn--main { background: var(--cta); color: var(--cta-ink); }
.btn--main:hover { background: var(--cta-hover); color: var(--cta-ink); }
.btn--line { border-color: var(--rule); color: var(--ink); }
.btn--line:hover { border-color: var(--accent); color: var(--ink); }
.btn--small { min-height: 42px; padding: 0 18px; font-size: .9375rem; }
/* На узком телефоне длинная подпись кнопки переносится, а не распирает экран. */
@media (max-width: 479px) {
  .btn { max-width: 100%; white-space: normal; text-align: left; padding-block: 10px; }
}

.link { font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* Метка статуса — текстом в рамке, не цветным кружком. */
.badge {
  display: inline-block; padding: 2px 14px;
  border: 1px solid var(--accent); border-radius: var(--radius-btn);
  color: var(--figure); font-size: .875rem; line-height: 1.6; white-space: nowrap;
  text-decoration: none;
}
a.badge:hover { color: var(--link-hover); background: var(--raised); }

/* ------------------------------------------------------------- шапка */

.site-header {
  position: relative; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px;
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--rule);
  font-size: 1rem;
}
.brand {
  margin-right: auto; padding: 14px 0;
  font-family: var(--font-display); font-weight: var(--w-strong); line-height: 1.2;
  text-decoration: none;
}
.nav { order: 3; flex: 1 0 100%; display: flex; flex-wrap: wrap; column-gap: 20px; }
/* Разделы на телефоне — одной строкой по всей ширине: шрифт чуть меньше,
   промежутки поровну. С пятым разделом (Power BI, 05.10.2026) строка в «Отчёте»
   не влезает до ~540 px: вместо переноса на вторую строку (минус 41 px первого
   экрана) она прокручивается вбок от края до края, как вкладки; обрезанный у
   края пункт подсказывает, что дальше есть ещё. Активный раздел прокручивает
   в вид static/js/settings.js. */
@media (max-width: 479px) { .nav { font-size: .875rem; column-gap: 8px; justify-content: space-between; } }
@media (max-width: 374px) { .nav { font-size: .8125rem; } }
@media (max-width: 539px) {
  .nav {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav__link { flex: none; white-space: nowrap; }
  .nav::after { content: ""; flex: none; width: 1px; }
}
.nav__link {
  padding: 6px 0 10px; text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav__link.is-active { border-bottom-color: var(--accent); }
.nav__link:hover { color: var(--link-hover); }
.site-header__cv {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 0;
  text-decoration: none;
}

.settings { position: relative; }
.settings__toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 42px; min-height: 42px; padding: 0 11px;
  border: 1px solid var(--rule); border-radius: var(--radius-btn);
  background: transparent; color: var(--ink);
  font: inherit; font-size: .9375rem; cursor: pointer;
}
.settings__toggle:hover, .settings__toggle[aria-expanded="true"] { border-color: var(--accent); }
.settings__toggle .icon { width: 19px; height: 19px; }
.settings__label {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.settings__panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 30;
  width: max-content; min-width: 15rem; max-width: calc(100vw - 2 * var(--pad));
  padding: 16px 18px 18px;
  background: var(--raised); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
}
.settings__group + .settings__group { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.settings__legend { margin-bottom: 8px; color: var(--muted); font-size: .875rem; }
.settings__options { display: flex; gap: 8px; }
.settings__options--list { flex-direction: column; }
.settings__option {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 16px 0 12px;
  border: 1px solid var(--rule); border-radius: var(--radius-btn);
  font-size: .9375rem; cursor: pointer; white-space: nowrap;
}
.settings__option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.settings__option .icon { width: 17px; height: 17px; }
.settings__option:hover { border-color: var(--accent); }
.settings__option:has(input:checked) { border-color: var(--accent); background: var(--bg); color: var(--figure); }
.settings__option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (min-width: 960px) {
  .site-header { flex-wrap: nowrap; min-height: 76px; column-gap: clamp(16px, 2vw, 32px); }
  .brand { margin-right: clamp(8px, 2vw, 32px); }
  .nav { order: 0; flex: 0 1 auto; gap: clamp(18px, 2vw, 30px); margin-right: auto; }
  .nav__link { padding: 26px 0 24px; }
}
@media (min-width: 1200px) {
  .settings__toggle { padding: 0 16px 0 13px; }
  .settings__label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
}

/* ----------------------------------------------- первый экран главной */

/* Разворот: портрет на левую часть окна до краёв, справа имя, мысль,
   факты строками отчёта и кнопки. На телефоне — портрет рядом с именем. */
.cover {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-areas: "top top" "photo id" "main main";
  column-gap: 16px;
  padding: 0 var(--pad) 8px;
}
.cover > .site-header { grid-area: top; padding-inline: 0; margin-bottom: 14px; }
.cover__photo {
  grid-area: photo; align-self: center; position: relative; overflow: hidden;
  aspect-ratio: 4 / 5; border-radius: 2px; background: var(--photo-bg);
}
.cover__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 12%; filter: var(--photo-filter);
}
.cover__id { grid-area: id; align-self: center; }
.cover__main { grid-area: main; }

.cover__name {
  font-family: var(--font-display); font-weight: var(--w-display);
  font-size: clamp(1.875rem, 1rem + 3.2vw, 5.5rem); line-height: 1.04; letter-spacing: -.02em;
}
.cover__role { margin-top: 6px; font-size: clamp(1.1875rem, 1rem + .9vw, 1.75rem); line-height: 1.25; font-weight: 500; }
.cover__note { color: var(--muted); font-size: .9375rem; line-height: 1.35; }
.cover__lead { margin-top: 12px; max-width: 50ch; font-size: 1rem; line-height: 1.5; }
/* Список задач под вводной строкой: короткие пункты с чертой, как в PDF-резюме;
   две колонки, когда колонке хватает места на самый длинный пункт. */
.cover__tasks {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17em), 1fr));
  gap: 0 1.5em; margin-top: 6px; font-size: 1rem; line-height: 1.55;
}
.cover__tasks li { position: relative; padding-left: 1.15em; }
.cover__tasks li::before {
  content: ""; position: absolute; left: .1em; top: .78em;
  width: .6em; height: 1px; background: var(--figure);
}
.cover__after { margin-top: 10px; font-size: 1rem; line-height: 1.55; }

.cover__actions { margin-top: 14px; gap: 10px 20px; }
.cover__actions .btn--main { flex: 1 1 100%; }

@media (min-width: 480px) {
  .cover__actions .btn--main { flex: 0 1 auto; }
}
@media (min-width: 640px) {
  .cover { grid-template-columns: 136px minmax(0, 1fr); column-gap: 24px; }
  .cover__note { font-size: 1rem; }
  .cover__lead { font-size: 1.125rem; }
}
@media (min-width: 960px) {
  .cover {
    grid-template-columns: var(--cover-photo) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto auto 1fr;
    grid-template-areas: "photo top" "photo ." "photo id" "photo main" "photo .";
    column-gap: 0; padding: 0;
    min-height: 100vh; min-height: 100svh;
  }
  .cover > :not(.cover__photo) { padding-inline: var(--pad); }
  .cover > .site-header { margin-bottom: 0; border-bottom: 0; }
  .cover .brand { display: none; }
  .cover__photo { align-self: stretch; aspect-ratio: auto; border-radius: 0; }
  .cover__photo img { object-position: 50% 22%; }
  .cover__role { margin-top: 14px; }
  .cover__note { font-size: 1.0625rem; }
  .cover__lead { margin-top: 28px; max-width: 34em; font-size: clamp(1.1875rem, .8rem + .6vw, 1.375rem); line-height: 1.55; }
  .cover__tasks, .cover__after { font-size: 1.0625rem; }
  .cover__after { margin-top: 12px; }
  .cover__main { padding-bottom: 48px; }
  .cover__actions { margin-top: 32px; gap: 12px 24px; }
}

/* ------------------------------------------ факты строками отчёта */

/* Подпись слева, цифра по правому краю, снизу двойная черта итога. */
.statement { margin-top: 12px; max-width: 46rem; font-size: .875rem; }
.statement__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 6px 0; border-top: 1px solid var(--rule);
}
.statement__row:first-child { border-top-color: var(--rule-strong); }
.statement::after {
  content: ""; display: block; height: var(--rule-double);
  border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong);
}
.statement dt { color: var(--muted); line-height: 1.4; }
.statement dd {
  font-size: 1.25rem; font-weight: 500; line-height: 1.3; color: var(--figure);
  white-space: nowrap; text-align: right;
}
@media (min-width: 960px) {
  .statement { margin-top: 32px; font-size: .9444rem; }
  .statement__row { gap: 24px; padding: 10px 0; }
  .statement dd { font-size: clamp(1.375rem, .9rem + .75vw, 1.75rem); }
}

/* ------------------------------------------------------------ главы */

.chapter { padding: var(--chapter) var(--pad) 0; }
.chapter__head {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
  align-items: baseline; margin-bottom: clamp(24px, 3vw, 48px);
  padding-bottom: 16px; border-bottom: 1px solid var(--rule-strong);
}
.chapter__title {
  font-family: var(--font-display); font-weight: var(--w-head);
  font-size: clamp(1.875rem, 1.2rem + 2.2vw, 3.5rem); line-height: 1.08; letter-spacing: -.015em;
}
.chapter__intro { color: var(--muted); max-width: 56ch; }
.chapter__more { margin-top: 28px; }
.chapter__subtitle { margin: 40px 0 12px; font-size: 1.25rem; font-weight: var(--w-strong); }
.chapter__title--small { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.375rem); line-height: 1.15; }
.chapter--flush { padding-top: clamp(20px, 3vw, 48px); }

/* Заголовок главы слева, содержимое справа. */
.chapter--split { display: grid; grid-template-columns: minmax(0, 1fr); }
.chapter--split > .chapter__head { border-bottom: 0; padding-bottom: 0; margin-bottom: 24px; }
.chapter--split .chapter__intro { margin-top: 4px; }

@media (min-width: 960px) {
  .chapter__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px var(--pad); padding-bottom: 18px; }
  .chapter--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--pad); }
  .chapter--split > .chapter__head { display: block; margin-bottom: 0; }
  .chapter--split .chapter__intro { margin-top: 14px; }
}

/* ------------------------------------------------- решаю задачи */

.uses { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--pad); }
.use { border-top: 1px solid var(--rule); padding: 18px 0 26px; max-width: var(--measure); }
.use__title { font-family: var(--font-display); font-size: 1.3125rem; line-height: 1.25; font-weight: var(--w-display); margin-bottom: 8px; }
.use__links { margin-top: 10px; font-size: .9375rem; color: var(--muted); }
/* В одну колонку черта под заголовком главы уже отделяет первый пункт. */
@media (max-width: 639px) { .use:first-child { border-top: 0; padding-top: 0; } }
@media (min-width: 640px) { .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .uses { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .use__title { font-size: 1.4375rem; }
}

/* --------------------------------------------------------- проекты */

/* Разворот проекта: скриншот 7/12, текст 5/12; через один — зеркально. */
.spread {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px;
  padding: 28px 0 36px;
}
.spread + .spread { border-top: 1px solid var(--rule); }
.spread:first-child { padding-top: 4px; }
.spread__title, .pair__title {
  font-family: var(--font-display); font-weight: var(--w-display);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.08; letter-spacing: -.01em;
}
.spread__title a, .pair__title a { text-decoration: none; }
.spread__title a:hover, .pair__title a:hover { text-decoration: underline; }
.spread__sub { margin-top: 6px; color: var(--muted); }
.spread__summary { margin-top: 16px; max-width: 46ch; font-size: 1.0625rem; }
.spread__list { margin-top: 18px; border-top: 1px solid var(--rule); max-width: 46ch; }
.spread__list li { padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: .9444rem; line-height: 1.45; }
.spread__angle { margin-top: 18px; max-width: 46ch; color: var(--muted); font-size: .9444rem; }
.spread__angle b { color: var(--ink); font-weight: var(--w-strong); }
.spread__foot { margin-top: 22px; gap: 12px 22px; }
@media (min-width: 960px) {
  .spread { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--pad); align-items: center; padding: var(--gap) 0; }
  .spread:nth-child(even) > .spread__media { order: 2; }
  .spread__summary { font-size: 1.1875rem; }
}

/* Проекты после второго на главной — парой колонок: скриншот над текстом. */
.pair {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px var(--pad);
  padding-top: var(--gap); border-top: 1px solid var(--rule);
}
.pair > .spread { grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; padding: 0; border: 0; }
.pair > .spread > .spread__media { order: 0; }
@media (min-width: 960px) { .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Скриншот в тонкой рамке, по клику — полный размер в новой вкладке. */
.shot__frame { display: block; box-shadow: 0 0 0 1px var(--rule); background: var(--raised); }
.shot__frame:hover { box-shadow: 0 0 0 1px var(--accent); }
.shot__frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; filter: var(--shot-filter); }
.shot__caption { margin-top: 12px; max-width: var(--measure); color: var(--muted); font-size: .9444rem; line-height: 1.5; }
.shot--mat .shot__frame { background: var(--mat); padding: 12px; }
.shot--mat .shot__frame img { aspect-ratio: auto; object-fit: contain; filter: none; }
.shots { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px var(--pad); }
@media (min-width: 900px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 2200px) { .shots--many { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Первая страница отчёта — во всю ширину, остальные — по две в ряд. */
@media (min-width: 900px) { .shots--lead > :first-child { grid-column: 1 / -1; } }

/* Сертификаты на «Обо мне»: листы А4 на паспарту, подпись мельче. */
.certs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--pad); max-width: 56rem; }
@media (min-width: 640px) { .certs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.certs .shot--mat .shot__frame { padding: 8px; }
.certs .shot__caption { margin-top: 8px; font-size: .8125rem; line-height: 1.4; }

.video { width: 100%; max-width: 1440px; box-shadow: 0 0 0 1px var(--rule); background: #000; }

/* -------------------------------------------------- финмодели */

.models { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px var(--pad); }
@media (min-width: 640px) { .models { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .models { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Две карточки (презентации) — в две колонки и на широком экране. */
@media (min-width: 1200px) { .models--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Превью на белом паспарту, как вклейка в отчёт. */
.model { position: relative; display: flex; flex-direction: column; }
.model__mat { background: var(--mat); padding: 12px; box-shadow: 0 0 0 1px var(--rule); }
.model__mat img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: left top; }
.model:hover .model__mat { box-shadow: 0 0 0 1px var(--accent); }
.model__title { margin-top: 20px; font-family: var(--font-display); font-size: 1.375rem; line-height: 1.22; font-weight: var(--w-display); }
.model__link { text-decoration: none; }
.model__link::after { content: ""; position: absolute; inset: 0; }
.model__link:focus-visible { outline: none; }
.model:focus-within { outline: 2px solid var(--focus); outline-offset: 6px; }
.model__tags { margin-top: 6px; color: var(--muted); font-size: .875rem; line-height: 1.45; }
.model__task { margin-top: 10px; font-size: .9444rem; line-height: 1.5; }
.model__figs { margin-top: 16px; border-top: 1px solid var(--rule-strong); font-size: .875rem; }
.model__figs div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.model__figs dt { color: var(--muted); line-height: 1.4; }
.model__figs dd { color: var(--figure); font-weight: 500; white-space: nowrap; text-align: right; }
.model__source { margin-top: auto; padding-top: 14px; font-size: .875rem; color: var(--muted); }

/* --------------------------------------------------------- опыт */

.exp { border-top: 1px solid var(--rule-strong); }
.exp__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 24px; padding: 14px 0 16px; border-bottom: 1px solid var(--rule); }
.exp__period { color: var(--figure); white-space: nowrap; }
.exp__duration { margin-left: .6em; color: var(--muted); font-size: .9375rem; }
.exp__text { max-width: var(--measure); }
.exp__title { font-family: var(--font-display); font-size: 1.1875rem; font-weight: var(--w-strong); line-height: 1.35; }
.exp__company { margin-top: 2px; color: var(--muted); }
.exp__summary { margin-top: 8px; }
@media (min-width: 640px) {
  .exp__row { grid-template-columns: 9rem minmax(0, 1fr); padding: 16px 0 18px; }
  .exp--long .exp__row { grid-template-columns: 11rem minmax(0, 1fr); padding: 22px 0 24px; }
  .exp--long .exp__duration { display: block; margin-left: 0; }
}

/* ------------------------------------------------------ контакты */

.tg {
  display: inline-flex; align-items: center; gap: 18px; max-width: 100%;
  padding: 16px 30px 16px 22px; border-radius: var(--radius-btn);
  background: var(--cta); color: var(--cta-ink); text-decoration: none;
}
.tg:hover { background: var(--cta-hover); color: var(--cta-ink); }
.tg .icon { width: 28px; height: 28px; }
.tg__label { display: block; font-size: 1.25rem; font-weight: var(--w-display); line-height: 1.2; }
.tg__handle { display: block; font-size: .9375rem; opacity: .85; }
.contact-list { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--pad); border-top: 1px solid var(--rule-strong); }
.contact-list div { padding: 12px 0 14px; border-bottom: 1px solid var(--rule); }
.contact-list dt { font-size: .875rem; color: var(--muted); }
.contact-list dd { font-size: 1.0625rem; overflow-wrap: anywhere; }
@media (min-width: 640px) {
  .contact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tg { padding: 18px 34px 18px 26px; }
  .tg__label { font-size: 1.5rem; }
}

/* -------------------------------------------------------- подвал */

.site-footer {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 32px;
  margin-top: var(--chapter); padding: 22px var(--pad) 30px;
  border-top: 1px solid var(--rule);
  color: var(--muted); font-size: .9375rem;
}
.site-footer__links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
@media (min-width: 960px) { .site-footer__note { margin-left: auto; } }
.site-footer a:hover { color: var(--ink); }

/* ----------------------------------------------- внутренние страницы */

/* Шапка страницы: слева заголовок и главное, справа справка (паспорт
   проекта, ключевые цифры модели) или скриншот. */
.page-head {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px var(--pad);
  padding: clamp(28px, 5vw, 88px) var(--pad) clamp(8px, 2vw, 24px);
}
.page-head__tags { margin-bottom: 12px; color: var(--muted); font-size: .9375rem; }
.page-head__title {
  max-width: 22ch;
  font-family: var(--font-display); font-weight: var(--w-display);
  font-size: clamp(2.125rem, 1.2rem + 3.2vw, 4.75rem); line-height: 1.04; letter-spacing: -.02em;
}
.page-head__title--long { max-width: 28ch; font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3.5rem); line-height: 1.1; }
.page-head__sub { margin-top: 10px; color: var(--muted); font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem); }
.page-head__lead { margin-top: 20px; max-width: 52ch; font-size: clamp(1.0625rem, .9rem + .55vw, 1.375rem); line-height: 1.55; }
.page-head__note { margin-top: 14px; color: var(--muted); font-size: .9375rem; }
.page-head__actions { margin-top: 28px; }
.page-head__filemeta { color: var(--muted); font-size: .9375rem; }
.page-head__files { margin-top: 12px; }
@media (min-width: 960px) {
  .page-head--aside { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .page-head--media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .page-head--media .page-head__title { font-size: clamp(2.25rem, 1rem + 2.6vw, 4.25rem); }
}

/* Паспорт проекта: роль, для кого, статус — строками отчёта. */
.passport { margin-top: 32px; max-width: 46ch; border-top: 1px solid var(--rule-strong); font-size: .9444rem; }
.passport div { padding: 10px 0 12px; border-bottom: 1px solid var(--rule); }
.passport dt { color: var(--muted); font-size: .875rem; }
.passport dd { margin-top: 2px; line-height: 1.45; }

/* Отчёт: строки «раздел — содержание» с линейкой сверху. */
.report { padding: 0 var(--pad); margin-top: clamp(32px, 5vw, 80px); }
.report__row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px var(--pad);
  padding: 24px 0 30px; border-top: 1px solid var(--rule);
}
.report__row:first-child { border-top-color: var(--rule-strong); }
.report__label { font-family: var(--font-display); font-weight: var(--w-head); font-size: clamp(1.375rem, 1.1rem + .8vw, 1.875rem); line-height: 1.2; }
.report__body { max-width: var(--measure); }
.report__body p + p { margin-top: .9em; }
.report__body .actions { margin-top: 20px; }
@media (min-width: 960px) {
  .report__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding: 30px 0 38px; }
}

/* Маркированный список: короткая латунная черта вместо точки. */
.ticks li { position: relative; padding-left: 1.4em; margin-bottom: .55em; }
.ticks li:last-child { margin-bottom: 0; }
.ticks li::before {
  content: ""; position: absolute; left: .1em; top: .8em;
  width: .6em; height: 1px; background: var(--accent);
}

.creds { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 18px 0 4px; }
.creds dt { font-size: .875rem; color: var(--muted); }
.creds code { font-family: var(--font-text); font-weight: var(--w-strong); font-size: 1.1875rem; color: var(--figure); }

.stack { padding: clamp(32px, 4vw, 56px) var(--pad) 0; color: var(--muted); font-size: .875rem; }

/* Ключевые цифры модели: показатель слева, значение вправо, черта итога. */
.figures { width: 100%; font-size: .9444rem; }
.figures caption { text-align: left; margin-bottom: 10px; font-family: var(--font-display); font-weight: var(--w-head); font-size: 1.375rem; }
.figures th, .figures td { padding: 10px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: baseline; }
.figures thead th { padding-top: 0; font-size: .8125rem; font-weight: 400; color: var(--muted); border-bottom: 1px solid var(--rule-strong); }
.figures tbody th { font-weight: 400; padding-right: 20px; line-height: 1.45; }
.figures tbody tr:last-child > * { border-bottom: 0; }
.figures .num { text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.figures td.num { font-size: 1.0625rem; font-weight: 500; color: var(--figure); }
.figures__note { display: block; font-size: .8125rem; color: var(--muted); }
/* На узком телефоне длинное значение («−39,6 / −576,5 тыс. руб.») переносится по «/». */
@media (max-width: 479px) { .figures td.num { white-space: normal; min-width: 7.5em; } }
.figures-wrap::after {
  content: ""; display: block; height: var(--rule-double);
  border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong);
}

/* Отчёт Power BI: таблицы модели, связи, меры DAX. */
.tbl { width: 100%; border-collapse: collapse; font-size: .9444rem; }
.tbl th, .tbl td { padding: 10px 16px 11px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: baseline; line-height: 1.45; }
.tbl th:last-child, .tbl td:last-child { padding-right: 0; }
.tbl thead th { padding-top: 0; font-size: .8125rem; font-weight: 400; color: var(--muted); border-bottom-color: var(--rule-strong); }
.tbl tbody th { font-weight: var(--w-strong); white-space: nowrap; }
.tbl td:nth-child(2) { color: var(--muted); white-space: nowrap; }
.tbl .num { text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.tbl td.num { color: var(--figure); font-weight: 500; }
/* На телефоне «Что в ней» уходит под строку: четыре колонки в 360 px не помещаются. */
@media (max-width: 639px) {
  .tbl thead th:last-child { display: none; }
  .tbl tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 16px; border-bottom: 1px solid var(--rule); padding: 10px 0 12px; }
  .tbl thead tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 16px; }
  .tbl tbody th, .tbl tbody td { border-bottom: 0; padding: 0; white-space: normal; }
  .tbl tbody td:last-child { grid-column: 1 / -1; margin-top: 4px; color: var(--muted); font-size: .875rem; }
  .tbl thead th { padding: 10px 0; border-bottom: 0; }
  .tbl thead tr { border-bottom: 1px solid var(--rule-strong); }
}
.datamodel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px var(--pad); }
.datamodel__title { margin-bottom: 14px; font-family: var(--font-display); font-weight: var(--w-head); font-size: 1.375rem; }
.datamodel__rels { font-size: .9444rem; line-height: 1.5; }
@media (min-width: 1200px) { .datamodel { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; } }

.datamodel__shot { margin-top: clamp(40px, 5vw, 72px); }
.measure-row:first-child { padding-top: 0; }
.measure-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px var(--pad); padding: 24px 0 30px; border-bottom: 1px solid var(--rule); }
.measure-row__name { font-family: var(--font-display); font-weight: var(--w-head); font-size: 1.25rem; line-height: 1.25; }
.measure-row__why { margin-top: 8px; max-width: 52ch; color: var(--muted); font-size: .9444rem; line-height: 1.55; }
@media (min-width: 960px) { .measure-row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; } }
/* Код как в модели: переносы и отступы сохраняются, длинная строка прокручивается внутри блока. */
.dax {
  margin: 0; padding: 16px 18px; overflow-x: auto;
  background: var(--raised); box-shadow: 0 0 0 1px var(--rule); border-radius: var(--radius-panel);
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .8125rem; line-height: 1.6; tab-size: 4; white-space: pre; color: var(--ink);
}
.dax:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dax code { font: inherit; }

/* Переход между материалами. */
.pager {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
  margin: clamp(40px, 5vw, 80px) var(--pad) 0; padding-top: 20px; border-top: 1px solid var(--rule-strong);
}
.pager__all { order: 3; }
.pager__side:empty { display: none; }
.pager__link { display: flex; align-items: center; gap: 14px; padding: 8px 0; text-decoration: none; }
.pager__link .icon { color: var(--accent); }
.pager__hint { display: block; font-size: .875rem; color: var(--muted); }
.pager__title { display: block; font-family: var(--font-display); font-weight: var(--w-strong); line-height: 1.3; }
.pager__link:hover .pager__title { text-decoration: underline; text-decoration-color: var(--accent); }
@media (min-width: 720px) {
  .pager { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; }
  .pager__all { order: 0; text-align: center; }
  .pager__side:empty { display: block; }
  .pager__side--next .pager__link { justify-content: flex-end; text-align: right; }
}

/* Полоса связи внизу страниц проекта и модели. */
.cta-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px;
  margin-top: var(--chapter); padding: 32px var(--pad) 36px;
  background: var(--raised); border-top: 1px solid var(--rule);
}
.page-project .site-footer, .page-model .site-footer, .page-report .site-footer { margin-top: 0; }
.cta-strip__text { color: var(--muted); max-width: 44ch; }
.cta-strip__name { display: block; font-family: var(--font-display); font-weight: var(--w-display); font-size: 1.375rem; color: var(--ink); }
@media (max-width: 479px) { .cta-strip .btn { flex: 1 1 100%; } }

/* Обо мне. */
.about-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px var(--pad); padding: clamp(24px, 4vw, 72px) var(--pad) 0; }
.about-head__photo { width: 148px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--photo-bg); }
.about-head__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: var(--photo-filter); }
.about-head__prose { margin-top: 22px; max-width: var(--measure); }
.about-head__prose p + p { margin-top: .9em; }
.about-head__prose p:first-child { font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); line-height: 1.55; }
@media (min-width: 960px) {
  .about-head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .about-head__photo { width: 100%; max-width: 40rem; }
}

.skills { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px var(--pad); }
@media (min-width: 900px) { .skills { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.skills__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: var(--w-strong); padding-bottom: 10px; border-bottom: 1px solid var(--rule-strong); }
.skills__list li { padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: .9444rem; line-height: 1.45; }

/* Доступ к демо по коду: формы /access/ (этап 16). */
.report__sub { margin-top: 22px; font-family: var(--font-display); font-weight: var(--w-head); font-size: 1.25rem; line-height: 1.25; }
.report__body .report__sub + p { margin-top: 6px; }
button.btn { font-family: inherit; }
button.btn--line { background: transparent; }
.btn[disabled] { opacity: .6; cursor: progress; }
.notice {
  margin-top: 18px; padding: 12px 16px; max-width: var(--measure);
  border-left: 2px solid var(--accent); background: var(--raised); color: var(--ink);
}
.form { margin-top: 18px; display: grid; gap: 18px; max-width: 36rem; }
.form > p { margin: 0; }
.field { display: grid; gap: 6px; }
.field__label { font-size: .9375rem; font-weight: var(--w-strong); }
.field__opt { font-weight: 400; color: var(--muted); font-size: .875rem; }
.field__hint { color: var(--muted); font-size: .875rem; }
.field__input {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius-panel);
  background: var(--raised); color: var(--ink);
  font: inherit; font-size: 1rem; line-height: 1.4;
}
textarea.field__input { min-height: 96px; resize: vertical; }
.field__input:hover { border-color: var(--accent); }
.field__input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--accent); }
.field__input--code { max-width: 14rem; letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.field--trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; font-size: .9375rem; line-height: 1.5; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.form__error { padding: 10px 14px; border: 1px solid var(--accent); border-radius: var(--radius-panel); color: var(--ink); font-size: .9375rem; }
.form__done .notice { margin-top: 18px; }
.form__done .actions { margin-top: 16px; }
.access-open__title { font-family: var(--font-display); font-weight: var(--w-head); font-size: 1.375rem; }
.access-open__until { margin-top: 6px; color: var(--muted); }
.access-open__until strong { color: var(--figure); font-weight: var(--w-strong); }
.access-open__back { margin-top: 18px; }
.access-open__note { margin-top: 18px; color: var(--muted); font-size: .9375rem; }
.demo-list { margin-top: 18px; border-top: 1px solid var(--rule-strong); }
.demo-item { padding: 16px 0 18px; border-bottom: 1px solid var(--rule); }
.demo-item__title { font-weight: var(--w-strong); font-size: 1.0625rem; }
.demo-item .creds { margin: 8px 0 12px; }

/* 404 и переходы. */
.error-links { margin-top: 28px; max-width: 32rem; border-top: 1px solid var(--rule-strong); }
.error-links li { border-bottom: 1px solid var(--rule); }
.error-links a { display: block; padding: 12px 0; font-weight: 500; text-decoration: none; }
.error-links a:hover { text-decoration: underline; }
.go { padding: 48px var(--pad); }
.go p + p { margin-top: 12px; }

/* --------------------------------------------------------- прочее */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header, .site-footer, .cover__actions, .cta-strip, .pager, .skip-link { display: none; }
  body { background: #fff; color: #000; }
}
/* ===================================================================
   Стиль «Отчёт»: разворот годового отчёта. Тёмно-зелёное сукно банковского
   стола, бумага, латунь для цифр; одна гарнитура — книжная антиква Literata.

   Файл стиля задаёт только токены (контракт — в начале css/base.css.j2) и
   свой шрифт. Правила, которые нужны лишь этому стилю, пишутся здесь же под
   [data-style="otchet"] .класс — шаблоны при этом не меняются.
   =================================================================== */

@font-face {
  font-family: "Literata";
  src: url("/assets/fonts/literata/Literata.7eeaacb490.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* Тёмная тема — по умолчанию. */
:root[data-style="otchet"] {
  color-scheme: dark;
  --bg: #13251F;          /* сукно */
  --raised: #1A2F28;      /* поле: панели, полоса связи */
  --rule: #2F4A40;        /* линейка строк */
  --rule-strong: #ECEDE6; /* черта итога */
  --ink: #ECEDE6;         /* бумага */
  --muted: #A3B1A8;
  --accent: #CDAE6E;      /* латунь: подчёркивания, активный раздел */
  --figure: #CDAE6E;      /* цифры отчёта */
  --link-hover: #E2C98F;
  --cta: #CDAE6E;
  --cta-hover: #D9BE84;
  --cta-ink: #13251F;
  --focus: #CDAE6E;
  --mat: #FFFFFF;         /* паспарту под превью моделей */
  --photo-bg: #1A2F28;
  --shadow: 0 16px 40px rgb(0 0 0 / .35);
  --photo-filter: brightness(.92) saturate(.9);
  --shot-filter: brightness(.93);

  --font-text: "Literata", Georgia, "Times New Roman", serif;
  --font-display: "Literata", Georgia, "Times New Roman", serif;
  --w-display: 560;
  --w-head: 520;
  --w-strong: 600;
  --radius-btn: 999px;
  --radius-panel: 6px;
  --rule-double: 4px;
}

/* Светлая тема: та же бумага отчёта, но при дневном свете. */
:root[data-style="otchet"][data-theme="light"] {
  color-scheme: light;
  --bg: #F4F5F1;
  --raised: #FFFFFF;
  --rule: #CDD5CF;
  --rule-strong: #13251F;
  --ink: #13251F;
  --muted: #52625A;
  --accent: #8C6A26;
  --figure: #74561C;
  --link-hover: #74561C;
  --cta: #1F4034;
  --cta-hover: #2A5444;
  --cta-ink: #F4F5F1;
  --focus: #1F4034;
  --mat: #FFFFFF;
  --photo-bg: #E4E8E3;
  --shadow: 0 16px 40px rgb(19 37 31 / .14);
  --photo-filter: none;
  --shot-filter: none;
}
/* ===================================================================
   Стиль «Календарь»: страница разлинована, как платёжный календарь.
   Чернильно-синий фон, ячейки и линии сетки, жёлтый маркер — им в отчёте
   выделяют главное. Гротеск Golos Text, иерархия весом, цифры белые и жирные.
   Макет — design/mockups/kalendar/.

   Файл задаёт токены (контракт — в начале css/base.css.j2), шрифт и правила
   под [data-style="kalendar"]; шаблоны не меняются.
   =================================================================== */

@font-face {
  font-family: "Golos Text";
  src: url("/assets/fonts/golos-text/GolosText.7c5544f727.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* Тёмная тема. */
:root[data-style="kalendar"] {
  color-scheme: dark;
  --bg: #162029;          /* чернила */
  --raised: #1C2833;      /* ячейка */
  --rule: #2C3A46;        /* сетка */
  --rule-strong: #93A3B0; /* черта итога — сильная линия сетки */
  --ink: #E7ECEF;
  --muted: #93A3B0;
  --accent: #EBCB6B;      /* маркер */
  --figure: #E7ECEF;      /* цифры — белым, выделяет вес, а не цвет */
  --link-hover: #F3DA8E;
  --cta: #EBCB6B;
  --cta-hover: #F3DA8E;
  --cta-ink: #17222C;
  --focus: #EBCB6B;
  --mat: #FFFFFF;
  --photo-bg: #1C2833;
  --shadow: 0 16px 40px rgb(0 0 0 / .35);
  --photo-filter: brightness(.92) saturate(.9);
  --shot-filter: brightness(.93);

  --font-text: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --w-display: 700;
  --w-head: 700;
  --w-strong: 600;
  --radius-btn: 3px;
  --radius-panel: 4px;
  --rule-double: 3px;
}

/* Светлая тема: лист календаря на белом. Маркер остаётся на кнопке,
   тонкие акценты — синим: жёлтая черта на белом не видна. */
:root[data-style="kalendar"][data-theme="light"] {
  color-scheme: light;
  --bg: #F3F5F7;
  --raised: #FFFFFF;
  --rule: #D3DAE0;
  --rule-strong: #3E4F5D;
  --ink: #17222C;
  --muted: #566674;
  --accent: #2F6DB5;
  --figure: #17222C;
  --link-hover: #1D5A9E;
  --cta: #F0CF5A;
  --cta-hover: #E7C23F;
  --cta-ink: #17222C;
  --focus: #1F5FA8;
  --mat: #FFFFFF;
  --photo-bg: #E3E8EC;
  --shadow: 0 16px 40px rgb(23 34 44 / .12);
  --photo-filter: none;
  --shot-filter: none;
}

/* Гротеск читается крупнее антиквы того же кегля — заголовки чуть мельче. */
[data-style="kalendar"] .cover__name { letter-spacing: -.025em; }
[data-style="kalendar"] .chapter__title,
[data-style="kalendar"] .page-head__title { letter-spacing: -.02em; }
[data-style="kalendar"] .btn { font-weight: 600; }

/* Факты первого экрана — ячейками календаря 2×2: цифра сверху, подпись
   под ней, между ячейками линии сетки. */
[data-style="kalendar"] .statement {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 2px solid var(--rule-strong);
}
[data-style="kalendar"] .statement::after { display: none; }
[data-style="kalendar"] .statement__row {
  flex-direction: column-reverse; justify-content: flex-end; align-items: flex-start; gap: 4px;
  padding: 10px 14px 12px; border-top: 0; border-bottom: 1px solid var(--rule);
}
[data-style="kalendar"] .statement__row:nth-child(odd) { padding-left: 0; }
[data-style="kalendar"] .statement__row:nth-child(even) { border-left: 1px solid var(--rule); }
[data-style="kalendar"] .statement dd { text-align: left; font-weight: 700; letter-spacing: -.01em; }
/* На телефоне ячейка узкая: подпись мельче, чтобы кнопка связи осталась
   на первом экране. */
@media (max-width: 479px) {
  [data-style="kalendar"] .statement__row { padding: 8px 10px 10px; }
  [data-style="kalendar"] .statement dt { font-size: .8125rem; line-height: 1.3; }
}

/* Цифры в таблицах и карточках — вес, а не цвет. */
[data-style="kalendar"] .figures td.num,
[data-style="kalendar"] .model__figs dd { font-weight: 650; }
[data-style="kalendar"] .exp__period { font-weight: 600; }

/* Активный раздел — полоса маркера, как закрашенная ячейка. */
[data-style="kalendar"] .nav__link.is-active { border-bottom-width: 3px; }
[data-style="kalendar"] .ticks li::before { top: .62em; width: .45em; height: .45em; background: var(--accent); }
/* ===================================================================
   Стиль «Чертёж»: лист конструкторского чертежа. Вся страница — в рамке
   с полем подшивки слева; факты первого экрана — основной надписью
   (штампом); толстая основная линия — контуры, тонкая — графы. Узкий
   гротеск Fira Sans Condensed, подписи граф — наклонным, как чертёжный
   шрифт. Синяя «печать» — кнопки, ссылки, фокус. Макет — design/mockups/chertezh/.

   Файл задаёт токены (контракт — в начале css/base.css.j2), шрифт и правила
   под [data-style="chertezh"]; шаблоны не меняются.
   =================================================================== */

@font-face { font-family: "Fira Sans Condensed"; src: url("/assets/fonts/fira-sans-condensed/FiraSansCondensed-Regular.6f08018f6d.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Sans Condensed"; src: url("/assets/fonts/fira-sans-condensed/FiraSansCondensed-Italic.fc40a5bf2d.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Fira Sans Condensed"; src: url("/assets/fonts/fira-sans-condensed/FiraSansCondensed-Medium.11407f427e.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Sans Condensed"; src: url("/assets/fonts/fira-sans-condensed/FiraSansCondensed-SemiBold.b5faa2083d.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* Тёмная тема: графитовый лист, светлые линии. */
:root[data-style="chertezh"] {
  color-scheme: dark;
  --bg: #202427;          /* графит */
  --raised: #262B2F;      /* лист, заливка граф */
  --rule: #465058;        /* тонкая линия */
  --rule-strong: #B8C2C9; /* основная линия */
  --ink: #E4E8EA;
  --muted: #98A3AB;
  --accent: #9DA8F5;      /* синяя печать */
  --figure: #E4E8EA;
  --link-hover: #B9C1F8;
  --cta: #9DA8F5;
  --cta-hover: #B9C1F8;
  --cta-ink: #151A3B;
  --focus: #9DA8F5;
  --mat: #FFFFFF;
  --photo-bg: #262B2F;
  --shadow: 0 12px 32px rgb(0 0 0 / .35);
  --photo-filter: brightness(.92) saturate(.9);
  --shot-filter: brightness(.93);

  --font-text: "Fira Sans Condensed", "Arial Narrow", sans-serif;
  --font-display: "Fira Sans Condensed", "Arial Narrow", sans-serif;
  --w-display: 600;
  --w-head: 600;
  --w-strong: 600;
  --radius-btn: 0;
  --radius-panel: 0;
  --rule-double: 3px;

  --bind: clamp(12px, 3.2vw, 52px);   /* поле подшивки */
  --edge: clamp(6px, .9vw, 14px);
}

/* Светлая тема: белая калька, чёрные линии, синяя печать. */
:root[data-style="chertezh"][data-theme="light"] {
  color-scheme: light;
  --bg: #F5F6F4;
  --raised: #ECEEEC;
  --rule: #B9C0C4;
  --rule-strong: #20262B;
  --ink: #1C2227;
  --muted: #5B656C;
  --accent: #3446B8;
  --figure: #1C2227;
  --link-hover: #283894;
  --cta: #3446B8;
  --cta-hover: #283894;
  --cta-ink: #FFFFFF;
  --focus: #3446B8;
  --mat: #FFFFFF;
  --photo-bg: #E4E7E6;
  --shadow: 0 12px 32px rgb(28 34 39 / .14);
  --photo-filter: none;
  --shot-filter: none;
}

/* Рамка листа: поле подшивки слева, узкие поля с трёх сторон. */
[data-style="chertezh"] body {
  margin: var(--edge) var(--edge) var(--edge) var(--bind);
  border: 2px solid var(--rule-strong);
  min-height: calc(100vh - 2 * var(--edge));
}
/* Узкий шрифт на том же кегле мельче — текст на ступень крупнее. */
[data-style="chertezh"] body { font-size: 1.125rem; }
@media (min-width: 960px) { [data-style="chertezh"] body { font-size: 1.1875rem; } }
/* Первый экран — внутри рамки, а не на всю высоту окна. */
@media (min-width: 960px) {
  [data-style="chertezh"] .cover { min-height: calc(100vh - 2 * var(--edge) - 4px); min-height: calc(100svh - 2 * var(--edge) - 4px); }
}
[data-style="chertezh"] .cover__name,
[data-style="chertezh"] .chapter__title,
[data-style="chertezh"] .page-head__title,
[data-style="chertezh"] .spread__title,
[data-style="chertezh"] .pair__title { letter-spacing: 0; }

/* Факты первого экрана — штамп: графы 2×2 в контуре основной линией,
   наклонная подпись графы над значением. */
[data-style="chertezh"] .statement {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 2px solid var(--rule-strong);
}
[data-style="chertezh"] .statement::after { display: none; }
[data-style="chertezh"] .statement__row {
  flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 6px;
  padding: 8px 12px 10px; border-top: 0;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
[data-style="chertezh"] .statement__row:nth-child(2n) { border-right: 0; }
[data-style="chertezh"] .statement__row:nth-last-child(-n + 2):nth-child(odd),
[data-style="chertezh"] .statement__row:last-child { border-bottom: 0; }
[data-style="chertezh"] .statement dd { text-align: left; font-weight: 600; }
/* На телефоне графа узкая: подпись мельче, чтобы кнопка связи осталась
   на первом экране. */
@media (max-width: 479px) {
  [data-style="chertezh"] .statement__row { padding: 6px 8px 8px; }
  [data-style="chertezh"] .statement dt { font-size: .8125rem; line-height: 1.25; }
}

/* Подписи граф — наклонным. */
[data-style="chertezh"] .statement dt,
[data-style="chertezh"] .passport dt,
[data-style="chertezh"] .contact-list dt,
[data-style="chertezh"] .creds dt,
[data-style="chertezh"] .model__figs dt,
[data-style="chertezh"] .figures thead th,
[data-style="chertezh"] .page-head__tags,
[data-style="chertezh"] .model__tags,
[data-style="chertezh"] .pager__hint,
[data-style="chertezh"] .settings__legend { font-style: italic; }

/* Основная линия — у контуров: черта под заголовком главы, начало отчёта,
   ключевые цифры, переход между материалами. */
[data-style="chertezh"] .chapter__head,
[data-style="chertezh"] .pager { border-width: 2px; }
[data-style="chertezh"] .report__row:first-child { border-top-width: 2px; }
[data-style="chertezh"] .figures-wrap { border: 2px solid var(--rule-strong); padding: 14px 16px 4px; }
[data-style="chertezh"] .figures-wrap::after { display: none; }
[data-style="chertezh"] .figures thead th { border-bottom-width: 1px; }

/* Скриншоты и превью — в тонкой рамке без скруглений; кнопки — прямоугольные. */
[data-style="chertezh"] .btn,
[data-style="chertezh"] .tg { font-weight: 500; letter-spacing: .01em; }
[data-style="chertezh"] .cover__photo { border-radius: 0; }
[data-style="chertezh"] .ticks li::before { top: .75em; width: .7em; height: 2px; }