/* Общие шапка и подвал всех страниц femetrica.ru и блога — 24.10.2026.
   Разметка — site-chrome/header.html и footer.html, вставляет scripts/build-site-chrome.mjs.
   Файл самодостаточный: страницы грузят разные style.css со своими переменными и сбросами,
   поэтому все цвета и шрифты заданы здесь, классы с префиксом fm-.
   Шапка фиксированная, 72px (64px на телефоне) — как старая .navbar, под которую у страниц
   уже есть отступ сверху. Страницам без такого отступа — <div class="fm-header-spacer">. */

@font-face { font-family: 'FmInter'; font-weight: 300 900; font-display: swap; src: url('/fonts/inter-var-cyrillic.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'FmInter'; font-weight: 300 900; font-display: swap; src: url('/fonts/inter-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'FmPlayfair'; font-weight: 400 900; font-display: optional; src: url('/fonts/playfair-var-cyrillic.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'FmPlayfair'; font-weight: 400 900; font-display: optional; src: url('/fonts/playfair-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }

.fm-header, .fm-footer {
  --fm-bg: #f7f5fb;
  --fm-surface: #fff;
  --fm-ink: #1e1833;
  --fm-ink-2: #4a4462;
  --fm-muted: #6f6a85;
  --fm-line: #e7e3f0;
  --fm-violet: #5b3fd1;
  --fm-violet-soft: #efeafd;
  --fm-rose: #d93f72;
  --fm-rose-soft: #fdeaf1;
  --fm-sans: 'FmInter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fm-serif: 'FmPlayfair', Georgia, 'Times New Roman', serif;
  font-family: var(--fm-sans);
  color: var(--fm-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.fm-header *, .fm-footer * { box-sizing: border-box; }
.fm-header a, .fm-footer a { color: inherit; text-decoration: none; }

/* ===== Шапка ===== */
.fm-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  /* Плотный фон: на тёмных страницах («О проекте») полупрозрачный светлый становится серым */
  background: rgba(247, 245, 251, .96);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.fm-header.is-scrolled { border-color: var(--fm-line); }
.fm-header-spacer { height: 72px; }
.fm-header__row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1180px; height: 72px; margin: 0 auto; padding: 0 24px; }
.fm-logo { display: flex; align-items: center; gap: 10px; font: 700 21px/1 var(--fm-serif); color: var(--fm-ink); white-space: nowrap; }
.fm-logo img { width: 34px; height: 34px; flex: none; }
.fm-header__actions { display: flex; align-items: center; gap: 10px; }

.fm-drop { position: relative; }
.fm-drop__btn {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  height: 42px; padding: 0 14px 0 18px; border-radius: 12px; border: 1px solid var(--fm-line); background: var(--fm-surface);
  font: 600 15px/1 var(--fm-sans); color: var(--fm-ink); white-space: nowrap; user-select: none;
  transition: border-color .2s, box-shadow .2s;
}
.fm-drop__btn::-webkit-details-marker { display: none; }
.fm-drop__btn::marker { content: ''; }
.fm-drop__btn:hover, .fm-drop[open] > .fm-drop__btn { border-color: #cfc3f5; box-shadow: 0 0 0 4px rgba(91, 63, 209, .08); }
.fm-drop__btn:focus-visible { outline: 2px solid var(--fm-violet); outline-offset: 2px; }
.fm-chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.fm-drop[open] .fm-chev { transform: rotate(180deg); }
.login-choice__name { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fm-drop__panel {
  position: absolute; right: 0; top: 52px; width: 300px; max-width: calc(100vw - 32px);
  background: var(--fm-surface); border: 1px solid var(--fm-line); border-radius: 18px;
  box-shadow: 0 24px 50px -20px rgba(30, 24, 51, .3); padding: 8px; display: grid; gap: 2px; z-index: 5;
}
.fm-menu a { display: block; padding: 12px; border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--fm-ink); }
.fm-menu a:hover, .fm-menu a:focus-visible { background: var(--fm-bg); outline: none; }
.fm-menu a[aria-current="page"] { color: var(--fm-violet); font-weight: 700; background: var(--fm-violet-soft); }
.fm-menu__label { margin: 8px 12px 2px; padding-top: 10px; border-top: 1px solid var(--fm-line); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fm-muted); }

.fm-login__item { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; transition: background .2s; }
.fm-login__item:hover, .fm-login__item:focus-visible { background: var(--fm-bg); outline: none; }
.fm-login__item b { display: block; font-size: 15px; font-weight: 700; }
.fm-login__item small { display: block; font-size: 13px; color: var(--fm-muted); margin-top: 2px; }
.fm-login__ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.fm-login__ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fm-login__ic--app { background: var(--fm-violet-soft); color: var(--fm-violet); }
.fm-login__ic--site { background: var(--fm-rose-soft); color: var(--fm-rose); }
.fm-login__note { margin: 4px 12px 8px; padding-top: 10px; border-top: 1px solid var(--fm-line); font-size: 12.5px; line-height: 1.45; color: var(--fm-muted); }

@media (max-width: 640px) {
  .fm-header-spacer { height: 64px; }
  .fm-header__row { height: 64px; padding: 0 16px; gap: 8px; }
  .fm-logo { font-size: 19px; gap: 8px; }
  .fm-logo img { width: 30px; height: 30px; }
  .fm-header__actions { gap: 8px; }
  .fm-drop__btn { height: 40px; padding: 0 10px 0 13px; font-size: 14px; }
  /* Панели — от правого края шапки, а не кнопки: иначе «Меню» уезжает за левый край экрана */
  .fm-drop { position: static; }
  .fm-drop__panel { right: 16px; top: 58px; width: calc(100vw - 32px); max-width: 360px; }
}
@media (max-width: 360px) {
  .fm-logo { font-size: 17px; }
  .fm-drop__btn { padding: 0 8px 0 10px; }
}

/* ===== Подвал ===== */
.fm-footer { background: var(--fm-surface); border-top: 1px solid var(--fm-line); padding: 56px 0 40px; font-size: 15px; text-align: left; }
.fm-footer__wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.fm-footer__grid { display: grid; grid-template-columns: 1.4fr; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 32px; }
.fm-footer__brand p { color: var(--fm-muted); margin: 14px 0 0; max-width: 300px; }
.fm-footer__h { margin: 0 0 14px; font-size: 14px; font-weight: 700; color: var(--fm-ink); }
.fm-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.fm-footer li { margin: 0; padding: 0; }
.fm-footer ul a { color: var(--fm-ink-2); overflow-wrap: anywhere; }
.fm-footer ul a:hover { color: var(--fm-ink); }
.fm-footer__legal { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--fm-line); color: var(--fm-muted); font-size: 13px; display: grid; gap: 8px; }
.fm-footer__legal p { margin: 0; color: inherit; }

@media (max-width: 1000px) {
  .fm-footer__grid { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .fm-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .fm-footer { padding: 44px 0 32px; }
  .fm-footer__wrap { padding: 0 16px; }
  .fm-footer__grid { gap: 28px 20px; }
}
@media (max-width: 420px) {
  .fm-footer__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .fm-header, .fm-drop__btn, .fm-chev { transition: none; } }