/* Инсур Мусанниф — каркас сайта.
   Два вида на одной разметке. Газета — вид по умолчанию: её палитра и размеры здесь, на :root.
   Обычный вид — класс is-journal на <html>, переопределения — в journal.css. Палитра и все
   повторяющиеся величины — только в переменных. Основа — телефон, отличия компьютера —
   в responsive.css. */

:root {
  /* бумага и краска */
  --bg: #f0ece1;
  --surface: #e8e2d4;
  --card: #f6f2e8;
  --ink: #161513;
  --muted: #5a564d;
  --rule: #c9c2b2;
  --rule-strong: #161513;
  --badge-border: #b9b1a0;
  --leader: #a39b89;
  --control-border: #d6cfbf;
  --accent: #2f4a3a; /* бутылочный */
  /* --accent: #9a3b2a; */ /* кирпичный — запасной вариант (тогда --accent-dark: #5e2116, а в --focus-ring — 154, 59, 42) */
  --accent-dark: #192a20; /* акцент на 30% темнее — при наведении */
  --on-accent: #ffffff;
  --placeholder-stripe: #e7e2d6;
  --placeholder-stripe-alt: #ded8ca;
  --placeholder-ink: #5d5a52;
  --lightbox-bar: rgba(0, 0, 0, .55); /* подложка надписей поверх снимка в просмотре — тёмная в обоих видах */

  --font-text: 'PT Serif', Georgia, serif;
  --font-ui: 'PT Sans', system-ui, sans-serif;
  --font-display: 'Noto Serif Display', 'PT Serif', serif;
  --font-label: 'PT Sans Narrow', 'PT Sans', sans-serif;
  --font-narrow: 'PT Sans Narrow', 'PT Sans', sans-serif;
  --font-mono: 'PT Mono', ui-monospace, monospace;

  --container: 1320px;
  --gutter: clamp(18px, 4.4vw, 56px);
  --radius: 0;
  --tap: 44px;
  --compact-header-pad: 8px 18px;
  --content-pad-top: 32px;     /* отступы середины и колонки каталога сверху и снизу */
  --content-pad-bottom: 56px;
  --font-size-small: 15px;     /* подписи, даты, служебные ссылки */
  --field-height: 52px;        /* поле и кнопки поиска */
  --field-height-compact: 50px; /* они же в меню телефона */

  --link-style: solid;

  /* что показывать в каком виде: части только одного вида прячутся через эти переменные */
  --paper-block: block;
  --paper-flex: flex;
  --paper-inline: inline;
  --journal-block: none;
  --journal-flex: none;
  --journal-inline: none;

  /* раскладка */
  --layout-cols: minmax(0, 1fr) 330px;
  --layout-gap: 0;
  --aside-order: 2;
  --aside-border: 1px solid var(--rule-strong);
  --aside-pad: 32px;
  --main-pad-right: 40px;
  --reading-cols: minmax(0, 1fr) 300px;
  --reading-max: 760px;

  /* заголовки секций */
  --section-border-top: 3px solid var(--rule-strong);
  --section-border-bottom: 1px solid var(--rule-strong);
  --section-pad: 10px 0;
  --section-title: 700 18px/1.2 var(--font-narrow);
  --section-title-spacing: .12em;
  --section-title-transform: uppercase;

  --page-title: 800 clamp(44px, 7vw, 88px)/0.95 var(--font-display);
  --page-title-stretch: 70%;
  --label: 700 14px/1.3 var(--font-narrow);
  --label-spacing: .12em;
  --label-transform: uppercase;

  --card-title: 700 27px/1.1 var(--font-display);
  --card-title-stretch: 80%;
  --card-title-color: var(--ink);
  --card-dir: column;
  --card-gap: 8px;
  --card-pad: 20px 0 22px;
  --pub-cols: repeat(auto-fill, minmax(220px, 1fr));
  --card-body-basis: auto;

  --list-font: 400 16px/1.3 var(--font-text);
  --list-border: 1px dotted var(--leader);
  --list-pad: 7px 0;
  --count-font: 700 var(--font-size-small) var(--font-narrow);
  --count-color: var(--ink);

  --row-name: 400 20px/1.3 var(--font-text);
  --row-name-color: var(--ink);
  --row-pad: 9px 0;
  --row-border: 0;
  --row-count: 700 26px/1 var(--font-display);

  --prose: 400 19px/1.7 var(--font-text);
  --dropcap-font: 800 92px/0.8 var(--font-display);
  --dropcap-float: left;
  --dropcap-color: var(--accent);
  --dropcap-margin: 8px 10px 0 0;

  --note-bg: transparent;
  --note-border: 1px solid var(--rule-strong);
  --note-pad: 14px 0;
  --note-radius: 0;

  --search-bg: transparent;
  --search-margin: 0 var(--gutter);
  --search-pad: 14px 0 16px;
  --search-border: 1px solid var(--rule-strong);
  --input-border: 0;
  --input-border-bottom: 2px solid var(--rule-strong);
  --input-radius: 0;
  --input-bg: transparent;
  --input-font: italic 400 22px var(--font-text);
  --input-pad: 0 2px;
  --input-focus-border: var(--accent);
  --input-focus-shadow: 0 1px 0 0 var(--accent); /* в фокусе черта под полем — толще и акцентного цвета */
  --focus-ring: 0 0 0 3px rgba(47, 74, 58, 0.18); /* акцент на 18% — подсветка поля; при смене --accent поменять и её */
  --button-font: 700 16px var(--font-narrow);
  --button-spacing: .1em;
  --button-transform: uppercase;

  --footer-margin: 0 var(--gutter);
  --footer-border: 1px solid var(--rule-strong);
}

/* ---------- site: страница целиком ---------- */
.site { max-width: var(--container); margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.site__content { flex: 1; }

/* части, которые есть только в одном виде */
.view-only--paper { display: var(--paper-block); }
.view-only--journal { display: var(--journal-block); }

/* ---------- view-switch: «Газетный вид · обычный» ---------- */
.view-switch { align-items: center; gap: 6px; color: var(--muted); }
.view-switch--paper { display: var(--paper-flex); }
.view-switch--journal { display: var(--journal-flex); }
.view-switch__current { text-decoration: underline; text-underline-offset: 3px; }
/* зона нажатия — 44px, как у остальных кнопок, а строка переключателя остаётся низкой: лишнее по высоте
   забирают отрицательные поля */
.view-switch__option { min-height: var(--tap); margin-block: -6px; padding: 0 2px; background: none; border: 0; color: inherit; letter-spacing: inherit; text-transform: inherit; }
.view-switch__option:hover { color: var(--ink); }

/* ---------- menu-button: открывает меню на телефоне ---------- */
.menu-button { flex: none; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: var(--tap); height: var(--tap); padding: 0; background: none; border: 0; }
.menu-button--boxed { border: 1px solid var(--control-border); border-radius: var(--radius); }
.menu-button--paper { display: var(--paper-flex); margin-right: -10px; }
.menu-button__line { width: 20px; height: 2px; background: var(--ink); }

/* ---------- search-icon ---------- */
.search-icon { position: relative; display: inline-block; width: 11px; height: 11px; margin: -2px 3px 0 0; border: 1.5px solid currentColor; border-radius: 50%; }
.search-icon::after { content: ''; position: absolute; right: -5px; bottom: -4px; width: 6px; height: 1.5px; background: currentColor; transform: rotate(45deg); }

/* ---------- nav: основное меню; в газете — модификатор --paper ---------- */
.nav { --nav-link-pad: 0 0 4px; --nav-link-border: 2px solid transparent; display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 17px; }
.nav--paper { --nav-link-pad: 0; --nav-link-border: 0; justify-content: center; gap: 8px 40px; font: 700 17px var(--font-narrow); letter-spacing: .08em; text-transform: uppercase; }
.nav__link { padding: var(--nav-link-pad); background: none; border: 0; border-bottom: var(--nav-link-border); color: var(--ink); text-decoration: none; letter-spacing: inherit; text-transform: inherit; }
.nav__link:hover { color: var(--accent); }
.nav__link--active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- topbar: верхняя полоса газеты; на телефоне прилипает с кнопкой меню ---------- */
.topbar { position: sticky; top: 0; z-index: 20; display: var(--paper-flex); align-items: center; justify-content: space-between; gap: 8px 24px; min-height: 40px; padding: 4px var(--gutter); background: var(--bg); border-bottom: 1px solid var(--rule-strong); box-shadow: 0 -16px 0 var(--bg); font: 700 14px/1.2 var(--font-narrow); letter-spacing: .1em; text-transform: uppercase; }
.topbar__tagline { min-width: 0; }
.topbar__motto { display: none; }
.topbar__switch { display: none; }

/* ---------- masthead: шапка газеты — шарж и название в две строки ---------- */
/* кегль названия — от ширины экрана: на самом узком телефоне «МУСАННИФ» умещается в строку */
.masthead { --masthead-size: clamp(34px, 11.4vw, 148px); display: var(--paper-block); }
.masthead__brand { display: flex; align-items: center; justify-content: flex-start; gap: calc(var(--masthead-size) * 0.13); padding: clamp(12px, 1.6vw, 20px) var(--gutter) 10px; color: var(--ink); text-decoration: none; }
.masthead__brand:hover { color: var(--ink); }
/* макушка — по верху прописных «ИНСУР», ноги — по базовой линии «МУСАННИФ»; всё в долях кегля названия */
.masthead__logo { flex: none; width: auto; height: calc(var(--masthead-size) * 1.66); margin-top: calc(var(--masthead-size) * 0.09); }
.masthead__name { min-width: 0; font: 900 var(--masthead-size)/0.9 var(--font-display); font-stretch: 62.5%; letter-spacing: -.01em; text-transform: uppercase; }
.masthead__name-line { display: block; }
.masthead__nav { display: none; margin: 0 var(--gutter); padding: 12px 0; border-top: 3px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); }
.masthead__rule { display: block; margin: 0 var(--gutter); border-top: 3px solid var(--rule-strong); }
.masthead__switch { display: flex; justify-content: flex-end; padding: 0 var(--gutter); font: 700 12px var(--font-narrow); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- search-panel: полоса поиска под шапкой — открывается кнопкой «Поиск» ---------- */
.search-panel { display: none; margin: var(--search-margin); padding: var(--search-pad); background: var(--search-bg); border-bottom: var(--search-border); }

/* ---------- search-form: форма поиска — в полосе, на странице поиска, в меню телефона (--compact) ---------- */
.search-form {
  --field-size: var(--field-height);
  --field-basis: 320px;
  --field-pad: var(--input-pad);
  --field-bg: var(--input-bg);
  --field-border: var(--input-border);
  --field-border-bottom: var(--input-border-bottom);
  --field-radius: var(--input-radius);
  --field-font: var(--input-font);
  --field-focus-shadow: var(--input-focus-shadow);
  --submit-pad: 0 26px;
  --submit-font: var(--button-font);
  --submit-spacing: var(--button-spacing);
  --submit-transform: var(--button-transform);

  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
}
.search-form--compact {
  --field-size: var(--field-height-compact);
  --field-basis: 0%;
  --field-pad: 0 14px;
  --field-bg: var(--card);
  --field-border: 1px solid var(--rule);
  --field-border-bottom: 1px solid var(--rule);
  --field-radius: var(--radius);
  --field-font: 400 17px var(--font-ui);
  --field-focus-shadow: var(--focus-ring);
  --submit-pad: 0 18px;
  --submit-font: 700 16px var(--font-ui);
  --submit-spacing: 0;
  --submit-transform: none;

  flex-wrap: nowrap; gap: 8px;
}
.search-form__input { flex: 1 1 var(--field-basis); min-width: 0; height: var(--field-size); padding: var(--field-pad); background: var(--field-bg); border: var(--field-border); border-bottom: var(--field-border-bottom); border-radius: var(--field-radius); font: var(--field-font); color: var(--ink); }
.search-form__input::placeholder { color: var(--muted); opacity: 1; }
.search-form__input:focus, .search-form__input:focus-visible { outline: none; border-color: var(--input-focus-border); box-shadow: var(--field-focus-shadow); }
.search-form__submit { height: var(--field-size); padding: var(--submit-pad); background: var(--accent); color: var(--on-accent); border: 0; border-radius: var(--radius); font: var(--submit-font); letter-spacing: var(--submit-spacing); text-transform: var(--submit-transform); }
.search-form__close { height: var(--field-size); padding: 0 6px; background: none; border: 0; color: var(--muted); font: var(--button-font); font-weight: 400; letter-spacing: var(--button-spacing); text-transform: var(--button-transform); }

/* ---------- mobile-menu: меню телефона на весь экран ---------- */
.mobile-menu { position: fixed; inset: 0; z-index: 50; display: none; flex-direction: column; overflow: auto; padding: 0 18px 28px; background: var(--bg); color: var(--ink); }
.mobile-menu.is-open { display: flex; }
/* меню открыто — страница под ним не прокручивается (класс на <html>), фон недоступен (inert) */
.is-menu-open { overflow: hidden; }
.mobile-menu__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-height: 60px; background: var(--bg); border-bottom: 1px solid var(--rule); }
.mobile-menu__title { font: 700 20px var(--font-text); }
.mobile-menu__close { min-height: var(--tap); padding: 0; background: none; border: 0; font: 700 17px var(--font-ui); text-decoration: underline; text-underline-offset: 3px; }
.mobile-menu__search { padding: 16px 0 8px; }
.mobile-menu__switch { padding-bottom: 4px; font-size: var(--font-size-small); }
.mobile-menu__nav { display: flex; flex-direction: column; border-top: 1px solid var(--rule); font: 700 20px var(--font-ui); }
.mobile-menu__link { padding: 12px 0; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.mobile-menu__toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; background: none; border: 0; border-bottom: 1px solid var(--rule); color: var(--ink); font: inherit; text-align: left; }
.mobile-menu__hint { font: 400 var(--font-size-small) var(--font-ui); color: var(--muted); }
.mobile-menu__sub { display: none; padding: 2px 0 6px 14px; border-bottom: 1px solid var(--rule); font-weight: 400; }
.mobile-menu__sub.is-open { display: block; }
.mobile-menu__sub-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: var(--tap); padding-top: 6px; font-size: 17px; }
.mobile-menu__collapse { min-height: var(--tap); padding: 0; background: none; border: 0; font: 400 var(--font-size-small) var(--font-ui); color: var(--muted); }

/* ---------- layout: раскладка середины; на телефоне — одна колонка, каталог внизу ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--layout-gap); padding: 0 var(--gutter); }
.layout__main { min-width: 0; display: flex; flex-direction: column; gap: 44px; padding: var(--content-pad-top) 0 var(--content-pad-bottom); }
.layout__main--reading { gap: 20px; width: 100%; max-width: var(--reading-max); }
.layout__aside { order: 2; display: flex; flex-direction: column; gap: 32px; padding: 0 0 48px; }

/* ---------- section-head: заголовок секции с линейками ---------- */
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: var(--section-pad); border-top: var(--section-border-top); border-bottom: var(--section-border-bottom); }
.section-head__title { font: var(--section-title); letter-spacing: var(--section-title-spacing); text-transform: var(--section-title-transform); }
.section-head__note { font: italic 16px var(--font-text); color: var(--muted); }
.section-head__link { font-size: var(--font-size-small); color: var(--muted); text-decoration: none; }
.section-head__link:hover { color: var(--accent); }

/* ---------- page-title: заголовок страницы (h1) ---------- */
/* длинное слово заголовка на узком экране переносится, а не раздвигает страницу */
.page-title { font: var(--page-title); font-stretch: var(--page-title-stretch); text-wrap: balance; overflow-wrap: break-word; }

/* ---------- page-heading: заголовок страницы с меткой рядом ----------
   Метка — не часть <h1>, но стоит в конце его последней строки: заголовок — строчный. */
.page-heading__title { display: inline; }

/* ---------- rubric: рубрика и подписи капителью ---------- */
.rubric { font: var(--label); letter-spacing: var(--label-spacing); text-transform: var(--label-transform); color: var(--accent); }

/* ---------- breadcrumbs ---------- */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; font: var(--label); letter-spacing: var(--label-spacing); text-transform: var(--label-transform); color: var(--muted); }
.breadcrumbs__link { color: var(--muted); }

/* ---------- age-badge: возрастная метка — одинаковая в обоих видах ---------- */
.age-badge { display: inline-block; margin-left: 6px; padding: 1px 5px; font: 400 12px/1.3 var(--font-mono); letter-spacing: 0; color: var(--muted); border: 1px solid var(--badge-border); border-radius: 4px; white-space: nowrap; vertical-align: 2px; }

/* ---------- site-footer ---------- */
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin: var(--footer-margin); padding: 22px var(--gutter); border-top: var(--footer-border); font-size: var(--font-size-small); line-height: 1.5; color: var(--muted); }

/* ---------- yandex-metrika: пиксель счётчика без скрипта — на сайте, в макете его нет; невидим и места не занимает ---------- */
.yandex-metrika { position: absolute; left: -9999px; }

/* ---------- error-page: 404 и 500 ---------- */
.error-page { display: flex; flex-direction: column; gap: 18px; max-width: 720px; }
.error-page__text { font: var(--prose); }
.error-page__joke { font: italic 19px/1.5 var(--font-text); color: var(--muted); }