/*
  Discovera v2 — оформление по дизайн-системе приложения (E:/discovera-kotlin/DESIGN.md)
  и действующему сайту (assets/tokens.css): только тёмная тема, один янтарный акцент,
  Playfair Display в заголовках, Inter в тексте, JetBrains Mono для цифр и метаданных.
*/

/* ---------- Шрифты: файлы действующего сайта ---------- */
@font-face { font-family: "Discovera Serif"; src: url("../assets/fonts/playfair-cyrillic.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0400-052F, U+2DE0-2DFF, U+A640-A69F; }
@font-face { font-family: "Discovera Serif"; src: url("../assets/fonts/playfair-latin.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Discovera Sans"; src: url("../assets/fonts/inter-cyrillic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0400-052F, U+2DE0-2DFF, U+A640-A69F; }
@font-face { font-family: "Discovera Sans"; src: url("../assets/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
/* Кириллица 400, 600 и 700 — побайтно один и тот же файл (inter-cyrillic-*.woff2 одинаковые).
   Все три начертания берут его по одному адресу: вид прежний, а браузер качает файл один раз,
   а не трижды под разными именами. */
@font-face { font-family: "Discovera Sans"; src: url("../assets/fonts/inter-cyrillic-400.woff2") format("woff2"); font-weight: 500 600; font-display: swap; unicode-range: U+0400-052F, U+2DE0-2DFF, U+A640-A69F; }
@font-face { font-family: "Discovera Sans"; src: url("../assets/fonts/inter-600.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Discovera Sans"; src: url("../assets/fonts/inter-cyrillic-400.woff2") format("woff2"); font-weight: 700 900; font-display: swap; unicode-range: U+0400-052F, U+2DE0-2DFF, U+A640-A69F; }
@font-face { font-family: "Discovera Sans"; src: url("../assets/fonts/inter-700.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Discovera Mono"; src: url("../assets/fonts/jetbrains-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

/* ---------- Токены (DiscoveraColors) ---------- */
:root {
  --bg: #0f0e0d;             /* Night Soil */
  --bg-alt: #141211;         /* Pill Charcoal */
  --surface: #1c1917;        /* Dark Stone */
  --surface-raised: #252422; /* Raised Stone */
  --surface-inset: #2a2826;  /* Inset Well */
  --stone-border: #44403c;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  --text: #fafaf9;           /* Bone */
  --text-body: #d6d3d1;
  --text-dim: #a8a29e;       /* Dust */
  --text-faint: #8a837d;     /* 5:1 на фоне */

  --amber: #d97706;          /* Lantern Amber */
  --amber-bright: #f59e0b;   /* Lantern Bright */
  --amber-glow: #fbbf24;     /* Lantern Glow */
  --amber-deep: #b45309;
  --on-amber: #0f0e0d;
  --amber-tint: rgba(245, 158, 11, 0.1);
  --amber-line: rgba(245, 158, 11, 0.35);

  --cyan: #22d3ee;           /* ИИ и экспертиза */
  --success: #34d399;
  --error: #f87171;

  --font-display: "Discovera Serif", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Discovera Sans", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Discovera Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --radius-sm: 8px;
  --radius-card: 12px;
  /* 14px уже был фактическим радиусом управляющих элементов — поля, списки,
     кнопки, скелетоны, подложка логотипа, — но жил восемью числами вразнобой.
     Объявлен, чтобы шкала описывала то, что на странице и так есть. */
  --radius-control: 14px;
  --radius-panel: 16px;
  --radius-modal: 24px;

  --gutter: 20px;
  --header-h: 64px;
  --section-y: 72px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --shadow-float: 0 30px 70px -24px rgba(0, 0, 0, 0.75);

  color-scheme: dark;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --section-y: 96px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 48px; --header-h: 72px; --section-y: 128px; }
}

/* ---------- Основа ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  overflow-x: clip;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (min-width: 1024px) {
  body { font-size: 1.0625rem; }
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p, h1, h2, h3, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  text-wrap: balance;
}

h2 {
  font-size: clamp(2.125rem, 1.45rem + 2.6vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  max-width: 15ch;
}

h3 {
  font-size: clamp(1.3125rem, 1.15rem + 0.5vw, 1.625rem);
  line-height: 1.2;
}

p { text-wrap: pretty; }

::selection { background: rgba(245, 158, 11, 0.35); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--amber-glow);
  outline-offset: 3px;
}

.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-sm { width: 16px; height: 16px; }

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

.skip-link {
  position: fixed;
  left: 16px;
  top: -100px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: var(--radius-card);
  background: var(--amber);
  color: var(--on-amber);
  font-weight: 700;
}
.skip-link:focus { top: 12px; }

.wrap {
  width: min(1240px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* ---------- Типографические элементы ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  font-family: var(--font-sans);
  color: var(--amber-bright);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Номер раздела рисуется из data-num, чтобы не попадать в текст заголовка */
.eyebrow[data-num]::before {
  content: attr(data-num);
  margin-right: 12px;
  padding-right: 40px;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  background: linear-gradient(currentColor, currentColor) right center / 28px 1px no-repeat;
  opacity: 0.9;
}

.lead {
  max-width: 34em;
  margin-top: 20px;
  color: var(--text-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .lead { font-size: 1.1875rem; }
}

h2 > .eyebrow { max-width: none; }

.academy-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 0.875rem;
}
.academy-links > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
  color: var(--text-faint);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.academy-links a {
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text-body);
  transition: border-color 140ms var(--ease), color 140ms var(--ease), background-color 140ms var(--ease);
}
.academy-links a:hover { border-color: var(--amber-line); color: var(--amber-glow); background: var(--amber-tint); }

.note {
  margin-top: 20px;
  color: var(--text-faint);
  font-size: 0.875rem;
  line-height: 1.55;
}

/* ---------- Кнопки и ссылки ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  transition: background-color 140ms var(--ease), border-color 140ms var(--ease), color 140ms var(--ease), transform 140ms var(--ease), box-shadow 140ms var(--ease);
}
.button:active:not(:disabled) { transform: translateY(1px); }
.button:disabled { opacity: 0.55; cursor: not-allowed; }

.button-primary {
  background: var(--amber);
  color: var(--on-amber);
  box-shadow: 0 10px 28px -12px rgba(217, 119, 6, 0.75);
}
.button-primary:hover:not(:disabled) { background: var(--amber-bright); }

.button-large {
  min-height: 56px;
  padding: 0 28px;
  font-size: 1.0625rem;
}

.button-outline {
  border-color: var(--amber-line);
  color: var(--amber-glow);
  background: transparent;
}
.button-outline:hover:not(:disabled) { background: var(--amber-tint); border-color: var(--amber-bright); }

.button-ghost {
  background: var(--surface-raised);
  border-color: var(--line-strong);
  color: var(--text);
}
.button-ghost:hover:not(:disabled) { border-color: var(--amber-line); background: var(--surface-inset); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 5px;
  border: 0;
  border-bottom: 1px solid var(--amber-line);
  background: none;
  color: var(--amber-bright);
  font-weight: 600;
  line-height: 1.3;
  transition: color 140ms var(--ease), border-color 140ms var(--ease), gap 140ms var(--ease);
}
.text-link:hover { color: var(--amber-glow); border-color: var(--amber-glow); gap: 14px; }
.text-link-sm { font-size: 0.9375rem; gap: 8px; }

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: transparent;
  color: var(--text-body);
  transition: background-color 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease);
}
.icon-button:hover { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.icon-button:disabled { opacity: 0.5; cursor: progress; }
.icon-button-sm { width: 36px; height: 36px; border-radius: var(--radius-sm); }

/* ---------- Шапка ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15, 14, 13, 0.9);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
}
.brand img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.brand span {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
}
@media (min-width: 1024px) {
  .brand img { width: 40px; height: 40px; }
  .brand span { font-size: 1.625rem; }
}

.desktop-nav {
  display: none;
  gap: 32px;
  margin-left: auto;
}
.desktop-nav a {
  position: relative;
  padding: 10px 0;
  white-space: nowrap;
  color: var(--text-body);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color 140ms var(--ease);
}
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background: var(--amber-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease);
}
.desktop-nav a:hover { color: var(--text); }
.desktop-nav a:hover::after { transform: scaleX(1); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.header-play { display: none; min-height: 44px; padding: 0 14px; gap: 8px; font-size: 0.9375rem; }
.icon-gplay { width: 16px; height: auto; flex: none; }
.play-badge {
  display: inline-block;
  line-height: 0;
  border-radius: 10px;
  transition: transform 140ms var(--ease), box-shadow 140ms var(--ease);
}
.play-badge img { width: auto; height: 56px; }
.play-badge-large img { height: 60px; }
@media (min-width: 1024px) {
  .hero .play-badge img, .play-badge-large img { height: 66px; }
}
.play-badge:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -14px rgba(245, 158, 11, 0.7); }
.mobile-menu .play-badge { justify-self: start; margin-top: 16px; }
/* Язык — всегда в шапке, рядом с поиском, и на телефоне тоже (просьба владельца 15.10):
   в меню-бургере его не находили. */
.lang-link {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  border-radius: var(--radius-card);
  color: var(--text-dim);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: color 140ms var(--ease), background-color 140ms var(--ease);
}
.lang-link:hover { color: var(--text); background: var(--surface); }

.menu-toggle span {
  position: absolute;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 220ms var(--ease);
}
.menu-toggle { position: relative; }
.menu-toggle span:first-child { transform: translateY(-4px); }
.menu-toggle span:last-child { transform: translateY(4px); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

.mobile-menu {
  display: grid;
  gap: 2px;
  padding: 8px var(--gutter) 24px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a:not(.button) {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 1.0625rem;
}
.mobile-menu .button { margin-top: 16px; }

@media (max-width: 359px) {
  .header-actions { gap: 4px; }
  .lang-link { min-width: 38px; }
}
@media (min-width: 600px) {
  .header-play { display: inline-flex; }
}
@media (min-width: 1024px) {
  .desktop-nav { display: flex; gap: 22px; }
  .header-actions { margin-left: 16px; padding-left: 20px; border-left: 1px solid var(--line); }
  .menu-toggle, .mobile-menu { display: none !important; }
}

/* ---------- Первый экран ----------
   Слои сцены: фото → карта → вырезанная рука с медальоном → затемнение → телефон.
   Фото и вырезка имеют одинаковую геометрию, поэтому рука совпадает с фоном пиксель в пиксель. */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero-scene { position: relative; }
.hero-photo,
.hero-hand {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
.hero-photo img,
.hero-hand img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 60%;
}
.hero-photo { z-index: 0; }
.hero-hand { z-index: 2; }
.hero-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* Мобильный порядок: текст → сцена → маршрут */
.hero-inner { display: contents; }
.hero-copy,
.journey-rail,
.offline-line {
  width: min(1240px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.hero-copy { order: 1; padding-top: 32px; }
.hero-scene { order: 2; }
.journey-rail { order: 3; }
.offline-line { order: 4; }

.hero-scene {
  aspect-ratio: 4 / 5;
  max-height: 620px;
  margin-top: 8px;
}
.hero-scene .hero-photo img,
.hero-scene .hero-hand img {
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}

/* Телефон с настоящим экраном карты. На узких экранах он перед рукой, на десктопе — за ней */
.hero-phone {
  position: absolute;
  top: 3%;
  bottom: 3%;
  left: var(--gutter);
  z-index: 4;
  aspect-ratio: 446 / 982;
  transform: rotate(-4deg);
  transform-origin: 50% 60%;
}
.hero-phone .app-map {
  --device-w: 100%;
  width: 100%;
  height: 100%;
  padding: 7px;
  border-radius: 38px;
  cursor: default;
  /* мягкая тень на землю от наклонённого телефона */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    -18px 34px 48px -18px rgba(0, 0, 0, 0.85);
}
.app-map-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 31px;
  background: var(--bg);
  container-type: inline-size;
}
.app-map-screen > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: top;
  border-radius: 0;
}
.app-map-old { opacity: var(--old, 0.7); }

/* Ползунок прозрачности стоит там же и выглядит так же, как в приложении */
.app-map-control {
  position: absolute;
  left: 91.2%;
  top: calc(47.9% - 16px);
  height: calc(15.5% + 32px);
  width: 16%;
  transform: translateX(-50%);
  cursor: ns-resize;
  touch-action: none;
  border-radius: 14px;
}
.app-map-control:focus-visible { outline: 2px solid var(--amber-glow); outline-offset: 0; }
.app-map-track {
  position: absolute;
  left: 50%;
  top: 16px;
  bottom: 16px;
  width: max(4px, 1.4cqw);
  overflow: hidden;
  border-radius: 999px;
  background: rgba(28, 25, 23, 0.82);
  transform: translateX(-50%);
}
.app-map-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--old, 0.7) * 100%);
  background: linear-gradient(to top, var(--amber), var(--amber-bright));
}
.app-map-knob {
  position: absolute;
  left: 50%;
  top: calc(16px + (1 - var(--old, 0.7)) * (100% - 32px));
  width: max(16px, 5.8cqw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--amber-bright) 0 21%, #fff 25% 62%, var(--amber-bright) 66%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%);
}
.app-map-value {
  position: absolute;
  left: 91.2%;
  top: 65.4%;
  color: var(--amber-bright);
  font-size: max(10px, 3cqw);
  font-weight: 600;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.app-map-hint {
  position: absolute;
  right: 17%;
  top: calc(47.9% + (1 - var(--old, 0.7)) * 15.5%);
  padding: max(4px, 1.2cqw) max(8px, 2.6cqw);
  border-radius: 999px;
  background: rgba(15, 14, 13, 0.88);
  border: 1px solid var(--amber-line);
  color: var(--text);
  font-size: max(10px, 3cqw);
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  transform: translateY(-50%);
  pointer-events: none;
  transition: opacity 300ms var(--ease);
}
.app-map-hint::before { content: "↕ "; color: var(--amber-bright); }
.app-map.touched .app-map-hint { opacity: 0; }

.hero h1 {
  font-size: clamp(3rem, 1.4rem + 5vw, 6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.eyebrow-line::after {
  content: "";
  display: none;
  flex: 0 0 72px;
  height: 1px;
  margin-left: 16px;
  background: var(--amber);
  opacity: 0.8;
}

.hero-lead {
  max-width: 25em;
  margin-top: 24px;
  color: var(--text);
  font-size: 1.125rem;
  line-height: 1.45;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 20px;
  color: var(--text-body);
  font-size: 0.9375rem;
}
.hero-proof span { color: var(--amber-bright); }

.hero-actions {
  display: grid;
  justify-items: start;
  gap: 20px;
  margin-top: 30px;
}

.trust-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  color: var(--text-dim);
  font-size: 0.875rem;
}
.trust-line span { color: var(--amber); }

/* Маршрут выезда: значок шага — точка маршрута, между точками пунктир трека */
.journey-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 8px;
  padding: 14px 0 4px;
}
.journey-rail a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px 2px 10px;
  color: var(--text-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  transition: color 160ms var(--ease);
}
.journey-stop {
  position: relative;
  z-index: 1;
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 50%;
  background: rgba(15, 14, 13, 0.6);
  color: var(--amber-bright);
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.journey-stop .icon { width: 18px; height: 18px; }
/* Пунктир от точки до следующей точки: на узком экране — поверх колонок, на широком — после названия */
.journey-path {
  position: absolute;
  top: 20.5px;
  left: calc(50% + 24px);
  width: calc(100% - 48px);
  height: 3px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.8) 1px, transparent 1.5px) left center / 7px 3px repeat-x;
}
.journey-peek { display: none; }
.journey-rail a:hover,
.journey-rail a:focus-visible { color: var(--text); }
.journey-rail a:hover .journey-stop,
.journey-rail a:focus-visible .journey-stop {
  border-color: var(--amber-bright);
  background: rgba(245, 158, 11, 0.16);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.08);
}

.offline-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0 28px;
  color: var(--text-dim);
  font-size: 0.875rem;
}
.offline-line .icon { color: var(--amber-bright); width: 20px; height: 20px; flex: none; }

@media (min-width: 600px) and (max-width: 1023px), (min-width: 1280px) {
  .eyebrow-line::after { display: block; }
}
@media (min-width: 600px) {
  .hero-scene { aspect-ratio: 16 / 13; }
  .hero-phone { left: 10%; }
}

@media (min-width: 768px) {
  .journey-rail a {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
  }
}

/* Десктоп: сцена занимает весь экран, текст слева поверх тёмной части фото */
@media (min-width: 1024px) {
  .hero {
    --hero-h: clamp(700px, calc(100svh - var(--header-h)), 940px);
    min-height: var(--hero-h);
  }
  .hero-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    aspect-ratio: auto;
    max-height: none;
    margin: 0;
  }
  /* Запас по краям под объём: фото и вырезка сдвигаются вместе, поэтому рука не отрывается от фона */
  /* Рука с медальоном сдвинута влево, почти под текст: фото и вырезка двигаются вместе */
  .hero-scene .hero-photo,
  .hero-scene .hero-hand {
    --shift: 14%;
    inset: -14px calc(-14px + var(--shift)) -14px calc(-14px - var(--shift));
  }
  .hero-scene .hero-photo img,
  .hero-scene .hero-hand img {
    object-position: 62% 46%;
    /* освободившийся справа край растворяется в фон, туда же встаёт телефон */
    -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 22%);
    mask-image: linear-gradient(to left, transparent 0%, #000 22%);
  }
  /* Затемнение лежит над рукой, но не доходит до телефона: слева под текст и снизу под маршрут */
  .hero-scene::after {
    background:
      linear-gradient(90deg, rgba(15, 14, 13, 0.96) 0%, rgba(15, 14, 13, 0.84) 24%, rgba(15, 14, 13, 0.38) 38%, rgba(15, 14, 13, 0) 47%),
      linear-gradient(180deg, rgba(15, 14, 13, 0.5) 0%, rgba(15, 14, 13, 0) 9%, rgba(15, 14, 13, 0) 79%, rgba(15, 14, 13, 0.85) 90%, var(--bg) 100%);
  }
  .hero-phone {
    top: 64px;
    bottom: auto;
    left: auto;
    right: max(20px, calc((100vw - 1240px) / 2 - 8px));
    z-index: 1;
    /* ширина от окна, но телефон никогда не заходит на линию маршрута */
    width: min(21vw, 300px, calc((var(--hero-h) - 222px) * 446 / 982));
    transform: rotate(-7deg);
  }

  .hero-inner {
    position: relative;
    z-index: 5;
    display: flex;
    flex: 1;
    flex-direction: column;
    pointer-events: none;
  }
  .hero-inner > * { pointer-events: auto; }
  .hero-copy,
  .journey-rail,
  .offline-line { width: auto; margin-inline: 0; }
  .hero-copy {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: min(46vw, 640px);
    padding: 40px 0 48px;
  }
  .hero-lead { font-size: 1.3125rem; }
  .hero-proof { font-size: 1.0625rem; }
  .journey-rail { margin-top: 0; padding: 14px 0 10px; }
  .journey-rail a {
    flex-direction: row;
    gap: 12px;
    padding: 6px 0;
    font-size: 1.25rem;
    text-align: left;
  }
  .journey-path {
    position: static;
    flex: 1;
    width: auto;
    min-width: 20px;
    margin: 0 14px 0 4px;
  }
  /* При наведении над шагом всплывает его настоящий экран */
  .journey-peek {
    position: absolute;
    left: -8px;
    bottom: calc(100% + 10px);
    display: block;
    width: 136px;
    padding: 6px 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(20, 18, 17, 0.94);
    box-shadow: 0 22px 44px -14px rgba(0, 0, 0, 0.85);
    color: var(--text-body);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 180ms var(--ease), transform 220ms var(--ease);
    pointer-events: none;
  }
  .journey-peek img {
    display: block;
    width: 100%;
    height: 150px;
    margin-bottom: 8px;
    border-radius: var(--radius-sm); /* было 11px */
    object-fit: cover;
    object-position: top;
    background: var(--surface);
  }
  .journey-peek > span { display: block; padding: 0 4px; }
  .journey-rail a:hover .journey-peek,
  .journey-rail a:focus-visible .journey-peek { opacity: 1; transform: none; }
}

/* ---------- Подписи на снимках ---------- */
.compare-label {
  position: absolute;
  top: 12px;
  z-index: 2;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: rgba(15, 14, 13, 0.8);
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  pointer-events: none;
}


/* ---------- Секции ---------- */
.section {
  position: relative;
  padding-block: var(--section-y);
  overflow-x: clip; /* веер и комья земли не должны давать горизонтальную прокрутку */
}
/* Разделы другого тона перетекают в соседние, а не обрываются линией */
.section-alt {
  isolation: isolate;
  background: linear-gradient(180deg, var(--bg) 0, var(--bg-alt) 160px, var(--bg-alt) calc(100% - 160px), var(--bg) 100%);
}
/* Топографические горизонтали — картографический мотив приложения, еле заметным фоном */
.section-alt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("assets/topo.svg") 70% 30% / 1600px 900px no-repeat;
  opacity: 0.08;
  -webkit-mask-image: radial-gradient(ellipse 60% 75% at 72% 35%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 75% at 72% 35%, #000 25%, transparent 75%);
}

.section-heading { max-width: 760px; }
.section-heading h2 { max-width: 16ch; }

.split {
  display: grid;
  gap: 48px;
  align-items: center;
}
@media (min-width: 1024px) {
  .split {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(48px, 7vw, 112px);
  }
  .split-media-left > .split-copy { order: 2; }
  .split-media-left > .screen-figure { order: 1; }
}

.feature-list {
  margin-top: 32px;
  border-bottom: 1px solid var(--line);
}
.feature-list li {
  display: grid;
  gap: 4px;
  padding: 16px 0 16px 22px;
  border-top: 1px solid var(--line);
  position: relative;
}
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber-bright);
}
.feature-list strong { color: var(--text); font-weight: 600; }
.feature-list span { color: var(--text-dim); font-size: 0.9375rem; }
.split-copy > .text-link { margin-top: 28px; }

/* ---------- Экран приложения в корпусе телефона ---------- */
.screen-figure {
  display: grid;
  justify-items: center;
  gap: 26px; /* место под осевшую землю, чтобы она не ложилась на подпись */
}
.screen-figure figcaption {
  max-width: 300px;
  color: var(--text-faint);
  font-size: 0.8125rem;
  text-align: center;
}

.device {
  --ratio: 1 / 2;
  --device-w: 290px;
  position: relative;
  display: block;
  width: min(100%, var(--device-w));
  padding: 8px;
  border: 0;
  border-radius: 40px;
  background: linear-gradient(155deg, #34312e 0%, #161413 38%, #1d1a18 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    var(--shadow-float);
  color: inherit;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
button.device { cursor: zoom-in; }
button.device:not(.fan-phone):hover { transform: translateY(-4px); }
.device img {
  width: 100%;
  aspect-ratio: var(--ratio);
  object-fit: cover;
  object-position: top;
  border-radius: 32px;
  background: var(--bg);
}
.device-zoom {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(15, 14, 13, 0.82);
  border: 1px solid var(--line-strong);
  color: var(--text);
  opacity: 0.85;
  transition: opacity 140ms var(--ease), background-color 140ms var(--ease);
}
button.device:hover .device-zoom,
button.device:focus-visible .device-zoom { opacity: 1; background: var(--amber); color: var(--on-amber); }

.device-xs { --device-w: 64px; padding: 4px; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.device-xs img { border-radius: 10px; }

@media (min-width: 1024px) {
  .device { --device-w: 316px; }
  .device-xs { --device-w: 64px; }
}

/* ---------- 01 Место: архив рядом ---------- */
.nearby-panel {
  display: grid;
  gap: 32px;
  margin-top: clamp(64px, 9vw, 120px);
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--radius-modal);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(217, 119, 6, 0.1), transparent 55%),
    var(--surface);
}
@media (min-width: 900px) {
  .nearby-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
}
.nearby-intro h3 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem); line-height: 1.12; max-width: 14ch; }
.nearby-intro > p:not(.eyebrow):not(.archive-count) { margin-top: 14px; color: var(--text-dim); }

.archive-count {
  display: grid;
  gap: 2px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.archive-count [data-archive-count] {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}
.archive-count [data-archive-count][data-loaded] { color: var(--amber-glow); }
.archive-count .note { margin-top: 0; }

.nearby-controls label {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
}
.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}
/* Поиск по городам: поле с подсказками вместо системного списка */
.place-field {
  position: relative;
  display: flex;
  align-items: center;
}
.place-field > .icon {
  position: absolute;
  left: 16px;
  color: var(--amber-bright);
  pointer-events: none;
}
/*
 * Было привязано к #archive-place — к идентификатору поля в диалоге. Когда
 * такое же поле понадобилось в карточке партнёра, оно осталось вовсе без
 * оформления: сырой input в 150px высотой со значком поверх текста. Стиль
 * принадлежит полю, а не одному его экземпляру, поэтому селектор по классу.
 */
.place-field input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px 0 44px;
  border: 1px solid var(--stone-border);
  border-radius: var(--radius-control);
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.place-field input::placeholder { color: var(--text-faint); }
.place-field input:hover { border-color: var(--amber-line); }
.place-field input:focus { border-color: var(--amber-bright); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }
.place-field input:disabled { opacity: 0.6; cursor: progress; }
.place-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 290px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface-raised);
  box-shadow: 0 20px 44px -12px rgba(0, 0, 0, 0.7);
}
.place-list[hidden] { display: none; }
.place-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
}
.place-option small { color: var(--text-faint); font-size: 0.8125rem; }
.place-option:hover,
.place-option[aria-selected="true"] { background: var(--amber-tint); }
.place-option[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--amber-bright); }
.place-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: var(--text-faint);
  font-size: 0.8125rem;
}
.place-quick span { margin-right: 4px; }
.place-quick button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-body);
  font-size: 0.8125rem;
  transition: border-color 140ms var(--ease), color 140ms var(--ease), background-color 140ms var(--ease);
}
.place-quick button:hover { border-color: var(--amber-line); color: var(--amber-glow); background: var(--amber-tint); }

.geo-button { width: 100%; margin-top: 12px; }
.nearby-controls .note { margin-top: 12px; }

.request-status {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bg);
  color: var(--text-body);
  font-size: 0.9375rem;
}
.request-status.is-error { border-color: rgba(248, 113, 113, 0.45); color: var(--error); }

.nearby-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  grid-column: 1 / -1;
}
.nearby-results[hidden] { display: none; }
@media (min-width: 900px) {
  .nearby-results { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.nearby-result {
  display: grid;
  align-content: start;
  gap: 2px;
  overflow: hidden;
  padding: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bg);
  text-align: left;
  transition: border-color 140ms var(--ease), transform 140ms var(--ease);
}
.nearby-result:hover:not(:disabled) { border-color: var(--amber-line); transform: translateY(-2px); }
.nearby-result:disabled { cursor: default; }
.nearby-result img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: 10px;
  background: var(--surface-raised);
  filter: grayscale(0.15);
}
.nearby-result strong {
  display: -webkit-box;
  padding: 0 14px;
  overflow: hidden;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.nearby-result small { padding: 0 14px; overflow: hidden; color: var(--text-dim); font-family: var(--font-mono); font-size: 0.8125rem; white-space: nowrap; text-overflow: ellipsis; }
.results-caption { grid-column: 1 / -1; color: var(--text-faint); font-size: 0.875rem; }
.results-caption a { color: var(--amber-bright); border-bottom: 1px solid var(--amber-line); }

/* ---------- 02 Время: вкладки ---------- */
.tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 32px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.tabs button {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: background-color 140ms var(--ease), color 140ms var(--ease);
}
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { background: var(--amber); color: var(--on-amber); }

.tab-panel { margin-top: 26px; min-height: 8.5em; }
.tab-panel h3 { margin-bottom: 10px; }
.tab-panel p { color: var(--text-dim); max-width: 34em; }

.fact-grid {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}
@media (min-width: 560px) {
  .fact-grid { grid-template-columns: 1fr 1fr; }
}
.fact-grid li {
  display: grid;
  gap: 4px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}
.fact-grid strong { color: var(--text); font-weight: 600; }
.fact-grid span { color: var(--text-dim); font-size: 0.9375rem; }

/* Поле на карте и шторка «Мои поля» внахлёст */
.fields-duo { position: relative; }
.fields-sheet {
  position: relative;
  z-index: 2;
  width: min(300px, 84%);
  margin: -150px 0 0 auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-modal); /* было 22px */
  background: var(--surface);
  box-shadow: var(--shadow-float);
  cursor: zoom-in;
  transition: transform 220ms var(--ease);
}
.fields-sheet img { width: 100%; }
.fields-sheet:hover { transform: translateY(-4px); }
@media (min-width: 1024px) {
  .fields-duo { justify-items: start; padding-left: 4%; }
  .fields-sheet {
    position: absolute;
    right: 7%;
    bottom: 64px;
    width: 284px;
    margin: 0;
  }
}

/* ---------- 01 Место: два экрана карт ---------- */
/* Наклон через rotate, а не transform: появление при прокрутке и наведение двигают transform и не сбивают наклон */
.maps-duo { position: relative; padding-top: 12px; }
.maps-duo .maps-front { --device-w: 236px; z-index: 2; margin-left: 64px; rotate: 3deg; }
.maps-duo .maps-back {
  --device-w: 196px;
  position: absolute;
  top: 34px;
  left: max(0px, calc(50% - 170px));
  z-index: 1;
  rotate: -8deg;
  filter: brightness(0.82);
}
.maps-duo .device.maps-back:hover { filter: none; }
@media (min-width: 1024px) {
  .maps-duo .maps-front { --device-w: 296px; margin-left: 96px; }
  .maps-duo .maps-back { --device-w: 262px; top: 46px; left: calc(50% - 250px); }
}

/* Источники архива: ЭтоМесто и аэрофотоснимки Люфтваффе */
.map-sources {
  display: grid;
  gap: 20px;
  margin-top: clamp(64px, 8vw, 104px);
}
@media (min-width: 1024px) {
  .map-sources { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}
.source-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}
.source-card h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.2; }
.source-card > p:not(.eyebrow):not(.note) { color: var(--text-body); }
.source-card .note { margin-top: auto; padding-top: 6px; }
/*
 * Подложка под логотип партнёра. Была белым прямоугольником (background: #fff)
 * посреди тёмной страницы — приём взят с боевого сайта, где знак лежит на
 * тёмной полупрозрачной плашке и светится сам, без перекраски под янтарь.
 */
.source-logo {
  display: inline-block;
  margin-bottom: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-control);
  background: rgba(8, 8, 8, 0.38);
  line-height: 0;
  transition: border-color 140ms var(--ease);
}

.source-logo:hover {
  border-color: rgba(20, 184, 166, 0.45);
}
.source-logo img { width: 150px; height: auto; }
/* Контактный лист: кадры как отпечатки с плёнки, подпись — год и место */
.contact-sheet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  border-radius: var(--radius-card);
  background: #090807;
}
@media (min-width: 640px) {
  .contact-sheet { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.contact-sheet li { display: grid; gap: 6px; }
.contact-sheet img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 2px;
  filter: sepia(0.15) contrast(1.05);
}
.contact-sheet span {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 03 Выезд: полевая фотография ---------- */
.section-photo {
  isolation: isolate;
  overflow: hidden;
}
.section-photo-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}
/* Фото растворяется в соседние разделы сверху и снизу — без видимого шва */
.section-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(15, 14, 13, 0.6) 9%, rgba(15, 14, 13, 0) 24%, rgba(15, 14, 13, 0) 70%, rgba(15, 14, 13, 0.7) 88%, var(--bg) 100%),
    linear-gradient(90deg, rgba(15, 14, 13, 0.92) 0%, rgba(15, 14, 13, 0.78) 36%, rgba(15, 14, 13, 0.3) 62%, rgba(15, 14, 13, 0.12) 100%);
}
@media (max-width: 1023px) {
  /*
   * Верх был задан как rgba(…, 0.55): фотография проступала на 45% прямо от
   * кромки секции, и под сплошной чёрной «02» это читалось как шов, а не как
   * переход. Теперь она раскрывается от непрозрачного фона, как на десктопе:
   * к 10% ещё почти темно, к 30% фотография набирает силу, к низу снова уходит
   * в фон — следующая секция начинается без ступеньки.
   */
  .section-photo::before {
    background:
      linear-gradient(180deg,
        var(--bg) 0%,
        rgba(15, 14, 13, 0.92) 10%,
        rgba(15, 14, 13, 0.58) 30%,
        rgba(15, 14, 13, 0.72) 58%,
        rgba(15, 14, 13, 0.94) 82%,
        var(--bg) 100%);
  }
  /*
   * Второй резкий край, парный верхнему. Фотографии задана высота 70% от
   * секции, и она просто кончалась ровной горизонталью посреди текста:
   * затемнение сверху гасит её лишь частично, и на границе читался шов.
   * Высоту оставляем — низ секции и должен быть на чистом фоне, — но край
   * растворяем маской, а не режем.
   */
  .section-photo-bg {
    height: 70%;
    object-position: 70% 40%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, 0.45) 84%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, 0.45) 84%, transparent 100%);
  }
}
.section-photo .feature-list span { color: var(--text-body); }

/* ---------- 04 Находка ---------- */
.finds-layout {
  display: grid;
  gap: 48px;
  margin-top: 56px;
}
@media (min-width: 1024px) {
  .finds-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }
}

.restoration { max-width: 580px; }
/* Реставрация: тот же снимок, медальон проявляется в руке полосой света сверху вниз */
.resto-stage {
  --reveal: -12%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-modal);
  background: var(--bg-alt);
  box-shadow: var(--shadow-float);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* Удержание снимка — жест сравнения, а не «картинка»: без pointer-events долгое нажатие
   на телефоне выделяло фото синей рамкой и звало меню «Скачать изображение» (15.10). */
.resto-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
.resto-result {
  opacity: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--reveal) - 7%), transparent calc(var(--reveal) + 7%));
  mask-image: linear-gradient(to bottom, #000 calc(var(--reveal) - 7%), transparent calc(var(--reveal) + 7%));
  transition: opacity 240ms var(--ease);
}
.resto-stage.is-revealing .resto-result,
.resto-stage.is-restored .resto-result { opacity: 1; }
.resto-stage.is-restored { cursor: pointer; }
.resto-stage.is-restored.is-peeking .resto-result { opacity: 0; transition-duration: 160ms; }
.resto-sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--reveal);
  z-index: 2;
  height: 2px;
  margin-top: -1px;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 214, 0.95) 22%, rgba(255, 240, 214, 0.95) 78%, transparent);
  box-shadow: 0 0 22px 6px rgba(251, 191, 36, 0.3);
  opacity: 0;
  pointer-events: none;
}
.resto-stage.is-revealing .resto-sweep { opacity: 1; }
.resto-label { left: 12px; transition: color 200ms var(--ease), box-shadow 200ms var(--ease); }
.resto-stage.is-restored:not(.is-peeking) .resto-label { color: var(--amber-bright); box-shadow: inset 0 0 0 1px var(--amber-line); }
.resto-hold {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 2;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(15, 14, 13, 0.8);
  color: var(--text-body);
  font-size: 0.8125rem;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
  pointer-events: none;
}
.resto-stage.is-restored .resto-hold { opacity: 1; transform: translate(-50%, 0); }
.resto-stage.is-peeking .resto-hold { opacity: 0; }

.restoration-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 22px;
}
#restoration-status { color: var(--text-dim); font-size: 0.9375rem; flex: 1 1 220px; }
.restoration .note { margin-top: 14px; }

/* Иваныч: блок с настоящим ответом из чата приложения */
.ivanych {
  display: grid;
  gap: 40px;
  margin-top: clamp(72px, 9vw, 120px);
  padding-top: clamp(48px, 6vw, 72px);
  border-top: 1px solid var(--line);
}
@media (min-width: 1024px) {
  .ivanych { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
}
.ivanych-copy h3 { margin-top: 12px; font-size: clamp(1.75rem, 3vw, 2.5rem); }
.ivanych-copy > p:not(.eyebrow):not(.note) { margin-top: 16px; color: var(--text-body); font-size: 1.0625rem; }
.ivanych-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ivanych-topics li {
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 500;
}
.ivanych-copy .note { margin-top: 20px; }

.ivanych-chat {
  max-width: 560px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-modal); /* было 26px */
  background: #121110;
  box-shadow: var(--shadow-float);
}
.chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #191715;
}
.chat-head img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.chat-head strong { display: block; color: var(--text); font-size: 0.9375rem; }
.chat-head small { color: var(--text-dim); font-size: 0.75rem; }
.chat-log { display: grid; gap: 14px; padding: 20px 18px 8px; }
.msg { max-width: 88%; padding: 12px 15px; border-radius: 16px; font-size: 0.9375rem; line-height: 1.5; }
.msg-me {
  justify-self: end;
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-bottom-right-radius: 6px;
  background: #2a1d10;
  color: var(--text);
}
.msg-bot {
  justify-self: start;
  border-bottom-left-radius: 6px;
  background: #1f1d1b;
  color: var(--text-body);
}
.msg-bot p + p { margin-top: 10px; }
.msg-bot b { color: var(--text); }
/* «Печатает…» и ответ делят одну ячейку сетки: ответ держит место всё время, поэтому окно
   чата не схлопывается, пока Иваныч печатает, и не вырастает, когда ответ пришёл. */
.chat-typing { display: none; grid-row: 2; grid-column: 1; align-self: start; }
.chat-log .msg-bot { grid-row: 2; grid-column: 1; }
.chat-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 12px 12px;
  padding: 12px 16px;
  border-radius: 999px;
  background: #1f1d1b;
  color: var(--text-dim);
  font-size: 0.875rem;
}
.chat-input svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ivanych-chat figcaption { padding: 0 18px 14px; }

/* Ответ приходит один раз, когда чат появился на экране: короткое «печатает…», затем текст */
.motion .ivanych-chat:not(.is-answered) .msg-bot { opacity: 0; transform: translateY(8px); }
.motion .ivanych-chat .msg-bot { transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.motion .ivanych-chat.is-typing .chat-typing {
  display: inline-flex;
  justify-self: start;
  gap: 5px;
  padding: 14px 16px;
  border-radius: 16px;
  border-bottom-left-radius: 6px;
  background: #1f1d1b;
}
.chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); animation: typing 1s ease-in-out infinite; }
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }

.steps { border-bottom: 1px solid var(--line); }
.steps li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.step-num {
  padding-top: 8px;
  color: var(--amber-bright);
  font-family: var(--font-mono);
  font-size: 0.875rem;
}
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--text-dim); }

.peek-grid {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}
@media (min-width: 1280px) {
  .peek-grid { grid-template-columns: 1fr 1fr; }
}
.finding-peek {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 14px 18px 14px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
  text-align: left;
  transition: border-color 140ms var(--ease), background-color 140ms var(--ease);
}
.finding-peek:hover { border-color: var(--amber-line); background: var(--surface-raised); }
.finding-peek-copy { display: grid; gap: 4px; flex: 1; }
.finding-peek-copy strong { color: var(--text); font-weight: 600; }
.finding-peek-copy span { color: var(--text-dim); font-size: 0.875rem; line-height: 1.45; }
.finding-peek > .icon { color: var(--amber-bright); }

/* ---------- 05 Коллекция ---------- */
.option-list {
  display: grid;
  gap: 8px;
  margin-top: 32px;
}
.option-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  text-align: left;
  transition: border-color 140ms var(--ease), background-color 140ms var(--ease), color 140ms var(--ease);
}
.option-list button::after {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 140ms var(--ease), transform 220ms var(--ease);
}
.option-list button:hover { color: var(--text); background: var(--surface); }
.option-list button[aria-selected="true"] {
  border-color: var(--amber-line);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--amber-bright);
}
.option-list button[aria-selected="true"]::after { opacity: 1; transform: none; color: var(--amber-bright); }

#collection-panel { min-height: 5.5em; margin-top: 20px; }

/* Веер из трёх экранов: выбранный впереди, соседи затемнены и развёрнуты */
.phone-fan {
  display: grid;
  justify-items: center;
  padding-inline: 12%;
}
.phone-fan .fan-phone {
  --ratio: 1 / 2.12;
  --device-w: 240px;
  grid-area: 1 / 1;
  transition: transform 650ms var(--ease), filter 400ms var(--ease), box-shadow 400ms var(--ease);
}
.phone-fan figcaption { grid-area: 2 / 1; }
.fan-phone[data-pos="center"] { z-index: 3; }
.fan-phone[data-pos="left"] { z-index: 1; transform: translateX(-40%) rotate(-7deg) scale(0.82); filter: brightness(0.5) saturate(0.8); cursor: pointer; }
.fan-phone[data-pos="right"] { z-index: 2; transform: translateX(40%) rotate(7deg) scale(0.82); filter: brightness(0.5) saturate(0.8); cursor: pointer; }
.fan-phone[data-pos="left"]:hover,
.fan-phone[data-pos="right"]:hover { filter: brightness(0.75) saturate(0.9); }
button.fan-phone[data-pos="center"]:hover { transform: translateY(-4px); }
.fan-phone:not([data-pos="center"]) .device-zoom { display: none; }
/* До появления на экране веер сложен в стопку и раскрывается при прокрутке */
.motion .phone-fan:not(.is-spread) .fan-phone { transform: none; filter: none; }
@media (min-width: 1024px) {
  .phone-fan { padding-inline: 0; }
  .phone-fan .fan-phone { --device-w: 270px; }
}
#collection-panel p { color: var(--text-dim); }

.callout {
  display: flex;
  gap: 14px;
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px solid var(--amber-line);
  border-radius: var(--radius-panel);
  background: var(--amber-tint);
}
.callout .icon { color: var(--amber-bright); margin-top: 1px; }
.callout p { color: var(--text-body); font-size: 0.9375rem; }
.callout strong { color: var(--text); font-weight: 600; }

/* ---------- Сообщество: живая запись ---------- */
.community-split { align-items: start; }
@media (min-width: 1024px) {
  .community-split { align-items: center; }
}

.community-visual {
  position: relative; /* земля из-под карточки ленты ложится внутри этого блока */
  display: grid;
  justify-items: center;
  gap: 24px;
}
@media (min-width: 1024px) {
  .community-visual {
    position: relative;
    display: block;
    min-height: 720px;
  }
  .community-visual .screen-figure { position: absolute; right: 0; top: 0; }
  /* Зал находок наклонён от карточки ленты, а не к ней: верх уходит вправо и экран открывается.
     С −5° телефон заваливался под карточку и прятал левую половину зала. */
  .community-visual .screen-figure .device { --device-w: 272px; rotate: 5deg; }
  /* подпись телефона — справа, чтобы карточка ленты её не закрывала */
  .community-visual .screen-figure figcaption { justify-self: end; max-width: 150px; text-align: right; }
  .community-visual .live-card { position: absolute; left: 0; bottom: 24px; z-index: 2; width: min(300px, 56%); }
}

.live-card {
  position: relative;
  z-index: 2; /* часть земли ложится перед карточкой, часть — за ней */
  width: 100%;
  max-width: 520px;
  justify-self: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-modal);
  background: var(--surface);
  box-shadow: var(--shadow-float);
}


.live-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-dim);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.live-heading .icon-button { margin-left: auto; }
.live-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
}
#live-publication { margin-top: 16px; }

.live-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.live-author strong { display: block; color: var(--text); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.live-author time { display: block; color: var(--text-faint); font-size: 0.8125rem; }
.live-avatar {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-raised);
}
.live-avatar-fallback {
  display: grid;
  place-items: center;
  background: var(--amber-deep);
  color: var(--text);
  font-weight: 700;
}

.live-photo-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-control);
  background: #0a0a0a;
}
.live-photo {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.live-photo[hidden] { display: none; }
/* Снимок заполняет рамку; рамка подстраивается под первое фото (от 4:5 до 4:3), целиком — по нажатию */
.live-photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-loading {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  color: var(--text-dim);
  font-size: 0.875rem;
}
.live-photo-wrap.is-loading .photo-loading { display: grid; }
.photo-count {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: rgba(15, 14, 13, 0.8);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.photo-controls {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 8px;
}
.photo-controls button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(15, 14, 13, 0.85);
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
}
.photo-controls button:hover { border-color: var(--amber-bright); }

.live-title { margin-top: 16px; font-size: 1.375rem; overflow-wrap: anywhere; }
.live-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.live-meta span {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--amber-tint);
  color: var(--amber-glow);
  font-size: 0.75rem;
  font-weight: 600;
}
.live-description {
  display: -webkit-box;
  margin-top: 10px;
  overflow: hidden;
  color: var(--text-dim);
  font-size: 0.9375rem;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.live-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-size: 0.8125rem;
}
.live-footer a { color: var(--amber-bright); font-weight: 600; }
.live-caption { margin-top: 14px; font-size: 0.8125rem; }

.live-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 36px 12px;
  text-align: center;
}
.live-state h3 { font-size: 1.25rem; }
.live-state p { color: var(--text-dim); font-size: 0.9375rem; max-width: 30em; }
.live-state .button { margin-top: 8px; }
.photo-unavailable { position: absolute; inset: 0; align-content: center; }

.live-loading p { margin-top: 14px; color: var(--text-faint); font-size: 0.875rem; }
.skeleton {
  border-radius: var(--radius-control);
  background: linear-gradient(90deg, var(--surface-raised) 0%, var(--surface-inset) 50%, var(--surface-raised) 100%) 0 0 / 200% 100%;
  animation: skeleton 1.4s linear infinite;
}
.skeleton-photo { aspect-ratio: 4 / 3; }
.skeleton-line { width: 60%; height: 20px; margin-top: 16px; border-radius: 6px; }
@keyframes skeleton { to { background-position: -200% 0; } }

/* ---------- Академия и инструменты ---------- */
.academy-layout {
  display: grid;
  gap: 40px;
  margin-top: 48px;
}
@media (min-width: 1024px) {
  .academy-layout { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 80px; align-items: start; }
}
.academy-count {
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: var(--text-body);
  font-size: 1.375rem;
}
.academy-count span {
  color: var(--amber-bright);
  font-family: var(--font-display);
  font-size: clamp(4rem, 2.6rem + 4vw, 7rem);
  font-weight: 700;
  line-height: 0.9;
}
.academy-intro > p:not(.academy-count) { margin-top: 18px; color: var(--text-dim); }
.academy-intro .text-link { margin-top: 24px; }
.academy-app { margin-top: 48px; justify-items: start; }
.academy-app .device { --device-w: 248px; rotate: -4deg; margin-left: 12px; }
.academy-app figcaption { max-width: 300px; text-align: left; }
@media (max-width: 1023px) {
  .academy-app { justify-items: center; }
  .academy-app figcaption { text-align: center; }
}

.academy-index { border-top: 1px solid var(--line); }
.academy-index a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  grid-template-areas: "chip arrow" "title arrow" "desc arrow";
  align-items: center;
  gap: 6px 20px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
  transition: background-color 140ms var(--ease);
}
@media (min-width: 640px) {
  .academy-index a {
    grid-template-columns: 124px minmax(0, 1fr) 24px;
    grid-template-areas: "chip title arrow" "chip desc arrow";
    gap: 2px 20px;
  }
}
.academy-index .chip { grid-area: chip; justify-self: start; }
.academy-title { grid-area: title; color: var(--text); font-family: var(--font-display); font-size: 1.3125rem; font-weight: 700; line-height: 1.25; transition: color 140ms var(--ease); }
.academy-desc { grid-area: desc; color: var(--text-dim); font-size: 0.9375rem; }
.academy-index .icon { grid-area: arrow; color: var(--amber-bright); transition: transform 220ms var(--ease); }
.academy-index a:hover { background: rgba(245, 158, 11, 0.04); }
.academy-index a:hover .academy-title { color: var(--amber-glow); }
.academy-index a:hover .icon { transform: translateX(4px); }

.resource-grid {
  display: grid;
  gap: 14px;
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) {
  .resource-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
.resource-card {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 28px 64px 28px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--bg);
  transition: border-color 140ms var(--ease), background-color 140ms var(--ease), transform 220ms var(--ease);
}
.resource-card h3 { font-size: 1.3125rem; }
.resource-card p { color: var(--text-dim); font-size: 0.9375rem; }
.resource-card .icon {
  position: absolute;
  top: 30px;
  right: 24px;
  color: var(--amber-bright);
  transition: transform 220ms var(--ease);
}
.resource-card:hover { border-color: var(--amber-line); background: var(--surface); transform: translateY(-2px); }
.resource-card:hover .icon { transform: translateX(3px); }

/* ---------- Условия ---------- */
.pricing-layout {
  display: grid;
  gap: 40px;
}
@media (min-width: 1024px) {
  .pricing-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
}
.price-cards { display: grid; gap: 14px; }
.price-card {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}
.price-card > p:not(.note) { color: var(--text-dim); }
.price-card .note { margin-top: 4px; }
.price-card-coins {
  border-color: var(--amber-line);
  background:
    radial-gradient(100% 120% at 100% 0%, rgba(217, 119, 6, 0.12), transparent 60%),
    var(--surface);
}
.chip {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.chip-amber { background: var(--amber-tint); color: var(--amber-glow); }

.trust-grid {
  display: grid;
  gap: 32px;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) {
  .trust-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
}
.trust-grid article { display: grid; gap: 10px; align-content: start; justify-items: start; }
.trust-grid h3 { font-size: 1.3125rem; }
.trust-grid p { color: var(--text-dim); font-size: 0.9375rem; }

/* ---------- Вопросы ---------- */
.faq-layout {
  display: grid;
  gap: 40px;
}
@media (min-width: 1024px) {
  .faq-layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 80px; align-items: start; }
  .faq-intro { position: sticky; top: calc(var(--header-h) + 40px); }
}
.faq-intro .text-link { margin-top: 28px; }

.faq-list { border-bottom: 1px solid var(--line); }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 16px 0;
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
  transition: color 140ms var(--ease);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--amber-glow); }
.faq-list summary .icon {
  color: var(--amber-bright);
  transition: transform 220ms var(--ease);
}
.faq-list details[open] summary .icon { transform: rotate(45deg); }
.faq-list details > p {
  max-width: 40em;
  padding: 0 48px 18px 0;
  color: var(--text-dim);
}
.faq-list details > p:last-child { padding-bottom: 24px; }

/* ---------- Начать: катушка проходит над эмблемой ---------- */
.start-section {
  overflow: hidden;
  border-top: 1px solid var(--line);
  padding-top: clamp(40px, 6vw, 72px);
  background:
    radial-gradient(60% 70% at 50% 18%, rgba(217, 119, 6, 0.14), transparent 70%),
    var(--bg);
}
.start-layout {
  display: grid;
  justify-items: center;
  text-align: center;
}
@media (max-width: 599px) {
  /* на телефоне сцена крупнее: края почвы за кадром, катушка и находки — в нём */
  .detector-scene {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  }
  /* max-width: none — иначе общее svg { max-width: 100% } срезало ширину до кадра, а сдвиг на
     четверть уводил катушку и находки влево (15.10). */
  .detector-scene .detector-art { width: 150%; max-width: none; margin-left: -25%; }
}
.detector-scene {
  width: min(780px, 100%);
  background: radial-gradient(50% 45% at 50% 88%, rgba(217, 119, 6, 0.2), transparent 70%);
}
.detector-art {
  width: 100%;
  height: auto;
  /* штанга уходит вверх за кадр: верх сцены растворяется */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%), linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0%, #000 34%), linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
}
.detector-art .coil image { filter: drop-shadow(0 14px 10px rgba(0, 0, 0, 0.55)); }
.detector-art .ground { display: none; } /* без схематичной пунктирной линии: край почвы даёт сама полоса */

.start-copy { display: grid; justify-items: center; margin-top: 8px; }
.start-copy h2 { max-width: 16ch; }
.start-copy h2 > .eyebrow { justify-content: center; }
.start-copy .lead { margin-inline: auto; }
.start-copy .play-badge { margin-top: 32px; }
.start-copy .trust-line { justify-content: center; }

.steps-start {
  width: 100%;
  margin-top: 56px;
  text-align: left;
}
.steps-start h3 { font-size: 1.25rem; }
@media (min-width: 900px) {
  .steps-start {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    border-bottom: 0;
  }
  .steps-start li { grid-template-columns: 44px minmax(0, 1fr); border-top: 1px solid var(--amber-line); }
}

/* ---------- Подвал ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 56px 0 48px;
  background: var(--bg-alt);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 24px;
}
.footer-about { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
  .footer-about { grid-column: auto; }
}
.footer-about { display: grid; justify-items: start; gap: 12px; align-content: start; }
.footer-about .brand img { width: 36px; height: 36px; }
.footer-about .brand span { font-size: 1.375rem; }
.footer-tagline { color: var(--text-body); font-family: var(--font-display); font-style: italic; font-size: 1.0625rem; }
.footer-note { max-width: 30em; color: var(--text-faint); font-size: 0.875rem; }
.footer-play { min-height: 44px; margin-top: 4px; padding: 0 16px; font-size: 0.9375rem; }
.footer-col { display: grid; align-content: start; gap: 4px; }
.footer-title {
  margin-bottom: 8px;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer-col a {
  padding: 6px 0;
  color: var(--text-dim);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
  transition: color 140ms var(--ease);
}
.footer-col a:hover { color: var(--amber-glow); }
.footer-credits {
  grid-column: 1 / -1;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-size: 0.8125rem;
}
.footer-credits a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; }
/* Авторские права: материалы сайта — только с письменного согласия; чужие фото — по их лицензиям. */
.footer-rights { grid-column: 1 / -1; margin: 0; color: var(--text-faint); font-size: 0.8125rem; line-height: 1.55; }
.footer-rights a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Диалоги ---------- */
dialog {
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-modal);
  background: var(--surface);
  color: var(--text-body);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
}
dialog::backdrop {
  background: rgba(5, 5, 4, 0.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.image-dialog {
  max-width: min(94vw, 720px);
  max-height: 94vh;
  padding: 14px;
  overflow: hidden;
}
.image-dialog img {
  width: auto;
  max-width: 100%;
  max-height: calc(94vh - 84px);
  margin-inline: auto;
  border-radius: 16px;
  background: var(--bg);
}
.image-dialog p {
  padding: 12px 52px 2px;
  color: var(--text-dim);
  font-size: 0.875rem;
  text-align: center;
}
.dialog-close {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 1;
  background: rgba(15, 14, 13, 0.85);
  border-color: var(--line-strong);
}

.search-dialog {
  width: min(92vw, 560px);
  max-height: 86vh;
  margin-top: 10vh;
  padding: 20px;
}
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.dialog-header h2 { font-size: 1.5rem; max-width: none; }
#site-search {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--stone-border);
  border-radius: var(--radius-control);
  background: var(--bg);
  color: var(--text);
  outline: none;
}
#site-search:focus { border-color: var(--amber-bright); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); }
#site-search::placeholder { color: var(--text-faint); }
#search-results { display: grid; gap: 4px; margin-top: 12px; }
#search-results a {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border-radius: var(--radius-card);
  transition: background-color 140ms var(--ease);
}
#search-results a:hover, #search-results a:focus-visible { background: var(--surface-raised); }
#search-results strong { color: var(--text); font-weight: 600; }
#search-results span { color: var(--text-dim); font-size: 0.875rem; }
#search-results > p { padding: 12px 4px; color: var(--text-dim); }
/* Поиск по сайту (search.js): группы — разделы главной, Академия, новости, инструменты;
   найденные слова подсвечены в заголовке и в куске текста раздела. */
.search-dialog { overflow-y: auto; overscroll-behavior: contain; }
.search-group {
  margin: 14px 14px 2px;
  color: var(--amber-bright);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.search-group:first-child { margin-top: 4px; }
#search-results span { line-height: 1.5; }
#search-results mark { padding: 0 2px; border-radius: 3px; background: rgba(245, 158, 11, 0.22); color: var(--text); }

.noscript-note {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  padding: 14px 16px;
  border: 1px solid var(--amber-line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text-body);
  font-size: 0.875rem;
}

/* ---------- Моушн в стиле копателей ----------
   Только декоративный: заголовок, текст и фото первого экрана никогда не прячутся,
   чтобы LCP считался сразу. Всё включает класс .motion от app.js и выключает reduced-motion. */
/* Маршрут проходится один раз: точка загорается, затем к следующей тянется пунктир */
.motion .journey-rail.is-waiting .journey-stop {
  opacity: 0.45;
  border-color: rgba(245, 158, 11, 0.22);
  background-color: rgba(15, 14, 13, 0.3);
}
.motion .journey-rail.is-waiting .journey-path,
.motion .journey-rail.is-walking .journey-path { clip-path: inset(0 100% 0 0); }
.motion .journey-rail.is-walking .journey-path {
  animation: path-walk 0.5s cubic-bezier(0.45, 0, 0.55, 1) forwards;
  animation-delay: calc(var(--i) * 0.7s + 0.15s);
}
.motion .journey-rail.is-walking .journey-stop {
  animation: stop-reach 0.6s var(--ease) backwards;
  animation-delay: calc(var(--i) * 0.7s);
}
@keyframes path-walk { to { clip-path: inset(0 0 0 0); } }
@keyframes stop-reach {
  from { opacity: 0.45; border-color: rgba(245, 158, 11, 0.22); background-color: rgba(15, 14, 13, 0.3); }
  45% { transform: scale(1.1); border-color: var(--amber-bright); background-color: rgba(245, 158, 11, 0.2); }
  to { transform: none; }
}

/* Появление при прокрутке: блоки поднимаются, экраны «выкапываются» из земли */
.motion [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease), transform 700ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.motion [data-reveal="dig"] {
  transform: translateY(40px) rotate(1deg) scale(0.98);
  transition: opacity 700ms var(--ease), transform 900ms var(--ease);
}
.motion [data-reveal].is-in { opacity: 1; transform: none; }

.screen-figure { position: relative; }
.screen-figure .device { z-index: 1; }

/* Линия у номера раздела прочерчивается */
.motion [data-reveal] .eyebrow[data-num]::before { background-size: 0 1px; transition: background-size 900ms var(--ease) 250ms; }
.motion [data-reveal].is-in .eyebrow[data-num]::before { background-size: 28px 1px; }

/* Финал: катушку раскачивает app.js; над находкой — кольца и вспышка */
/* Находки лежат в земле плашмя (разметка в index.html): ребро — та же картинка темнее и ниже,
   «ложе» — тёмный эллипс в почве. Теплеет только лицевая сторона, ребро остаётся в тени. */
.detector-art .target .bed { fill: url(#find-bed); }
.detector-art .target image { opacity: 0.85; }
.detector-art .target .rim { opacity: 0.9; filter: brightness(0.32) saturate(0.6); }
.motion .detector-art .target image { opacity: 0.5; filter: brightness(0.6) saturate(0.85); }
.motion .detector-art .target .rim { opacity: 0.55; filter: brightness(0.28) saturate(0.6); }
.motion .detector-art .target.ping image:not(.rim) { animation: find-glow 2.2s ease-out; }
@keyframes find-glow {
  0% { opacity: 0.5; filter: brightness(0.6) saturate(0.85); }
  25% { opacity: 0.95; filter: brightness(1.05) saturate(1); }
  100% { opacity: 0.5; filter: brightness(0.6) saturate(0.85); }
}

/* ---------- Плавающий бейдж Google Play (телефон) ---------- */
.floating-play {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 60;
  line-height: 0;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.65);
  opacity: 0;
  transform: translate(-50%, 140%);
  transition: transform 320ms var(--ease), opacity 200ms var(--ease);
  pointer-events: none;
}
/* пока внизу висит уведомление о куки, бейдж стоит над ним (--consent-h ставит consent.js) */
.floating-play { bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--consent-h, 0px)); }
.floating-play img { width: auto; height: 52px; }
.floating-play.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
@media (min-width: 768px) {
  .floating-play { display: none; }
}
@media (max-width: 767px) {
  .site-footer { padding-bottom: 104px; }
}

/* ---------- Запись трека ----------
   Прокрутка — это выезд с включённым GPS. Пройденное считается в километрах и подписано у жёлтой
   точки «я здесь»: на широком экране — прямо на треке справа, на остальных — та же точка под шапкой. */
/* Трек под шапкой: на экранах, где бокового трека нет, он идёт поперёк страницы сразу под шапкой */
.track-strip {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 26px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(15, 14, 13, 0.9), rgba(15, 14, 13, 0));
  opacity: 0;
  transition: opacity 300ms var(--ease);
}
.track-strip[hidden] { display: none; }
.track-strip.is-on { opacity: 1; }
/* Открытое меню закрывает полосу — она снова видна, когда меню свёрнуто */
.site-header:has(.mobile-menu:not([hidden])) .track-strip { display: none; }
.strip-map { display: block; width: 100%; height: 26px; overflow: visible; }
.strip-plan { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 1.5; stroke-dasharray: 1 6; stroke-linecap: round; }
.strip-done { fill: none; stroke: var(--amber); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.strip-stops circle { fill: var(--bg); stroke: rgba(245, 158, 11, 0.5); stroke-width: 1.2; transition: fill 300ms var(--ease); }
.strip-stops .is-passed { fill: var(--amber); stroke: var(--amber-bright); }
.strip-me {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--amber-bright);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2), 0 2px 6px rgba(0, 0, 0, 0.6);
}
.track-strip .track-km {
  position: absolute;
  left: 0;
  top: 0;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(15, 14, 13, 0.88);
  color: var(--amber-bright);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  white-space: nowrap;
}
/* Трек сохранён в финале — точка замирает, цифра становится белой */
.track-strip.is-saved .track-km, .track-recorder.is-saved .track-me-km { color: var(--text); }
/*
 * Плашка всегда висит под шапкой справа. В строку она не помещается: логотип,
 * шесть пунктов меню и кнопки занимают всю сетку в 1240 px, а раньше на
 * 1280–1340 px плашка сжимала логотип и наезжала на «Discovera».
 */
.brand { flex: none; }
/* Якоря главной («Карты», «Находки») уступают место разделам сайта, пока шесть
   пунктов не помещаются рядом с логотипом и кнопками. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .desktop-nav .nav-anchor { display: none; }
}
/* На 1024–1179 px и четыре раздела впритык: меню чуть плотнее. Раньше здесь логотип
   сжимался, и «Discovera» наезжала на первый пункт. */
@media (min-width: 1024px) and (max-width: 1179px) {
  .desktop-nav { gap: 10px; }
  .desktop-nav a { font-size: 0.875rem; }
  .header-actions { gap: 6px; margin-left: 12px; padding-left: 12px; }
}

.track-recorder { display: none; }
@media (min-width: 1400px) {
  .motion .track-recorder {
    position: absolute;
    top: 0;
    right: calc((100% - 1240px) / 4 - 30px);
    z-index: 2;
    display: block;
    width: 60px;
    pointer-events: none;
  }
}
.track-map { display: block; overflow: visible; }
.track-plan {
  fill: none;
  stroke: rgba(255, 255, 255, 0.13);
  stroke-width: 1.5;
  stroke-dasharray: 1 7;
  stroke-linecap: round;
}
.track-done {
  fill: none;
  stroke: var(--amber);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
.track-stops circle { fill: var(--bg); stroke: rgba(245, 158, 11, 0.45); stroke-width: 1.5; transition: fill 300ms var(--ease), stroke 300ms var(--ease); }
.track-stops .is-passed circle { fill: var(--amber); stroke: var(--amber-bright); }
.track-stops text { fill: var(--text-dim); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; }
.track-stops .is-passed text { fill: var(--amber-bright); }
.track-me {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--amber-bright);
  box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.18), 0 3px 8px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 300ms var(--ease);
}
.track-recorder.is-live .track-me { opacity: 1; }
/* Километры — под точкой «я здесь», по центру, чтобы не залезать ни на текст, ни за край экрана */
.track-me-km {
  position: absolute;
  left: 0;
  top: 0;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(15, 14, 13, 0.88);
  color: var(--amber-bright);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 300ms var(--ease), color 300ms var(--ease);
}
.track-recorder.is-live .track-me-km { opacity: 1; }
/* Где трек нарисован на поле страницы, полоса под шапкой не нужна */
@media (min-width: 1400px) {
  .motion .track-strip { display: none; }
}

/* ---------- Мобильные уточнения ---------- */
@media (max-width: 479px) {
  .form-row { grid-template-columns: 1fr; }
  .hero-actions .button { width: 100%; }
  .map-bar { justify-content: center; }
  .map-place { width: 100%; justify-content: center; }
  .tabs { display: flex; }
  .tabs button { flex: 1 1 auto; padding: 0 12px; }
  .faq-list details > p { padding-right: 8px; }
  .resource-card { padding: 22px 60px 22px 22px; }
  .resource-card .icon { top: 22px; right: 20px; }
}

/* ---------- Без лишнего движения ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    /* 0s, а не 0.01ms: иначе каждое изменение стиля становится микропереходом и на мгновение отдаёт старое значение */
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

/* ═══ Зоны нажатия: палец шире курсора ═══════════════════════════════ */

/*
 * На телефоне ссылка-подсказка под кнопкой установки давала 34px по высоте:
 * подчёркивание здесь рисует border-bottom, и добавить отступ сверху и снизу
 * нельзя — оно отъедет от текста. Поэтому зону растягивает псевдоэлемент,
 * а вид остаётся прежним.
 */
.text-link {
  position: relative;
}

.text-link::after {
  content: "";
  position: absolute;
  inset: -6px 0;
}

/*
 * Ползунок прозрачности внутри макета телефона был 37px шириной: он задан в
 * процентах от экрана устройства, а устройство на телефоне узкое. Сама дорожка
 * центрирована внутри (left: 50%), поэтому расширение зоны её не сдвигает.
 */
.app-map-control {
  min-width: 44px;
}

/*
 * Ещё две таблетки меньше пальца: быстрые города под поиском архива — 32px,
 * ссылки «В Академии» (их пять секций) — 36px.
 *
 * Псевдоэлемент, которым расширена ссылка выше, здесь не годится. На узком
 * экране таблетки переносятся по одной в строку с зазором 8px: растянув каждую
 * на 4px вверх и вниз, зоны смыкаются вплотную, и промах между двумя ссылками
 * открывает не ту статью. Хуже исходной беды.
 *
 * Поэтому таблеткам даётся настоящая высота — и только там, где это нужно:
 * pointer: coarse — это палец, а не ширина окна. На мыши 36px попадаются
 * без труда, и ритм, заданный брендбуком, остаётся нетронутым.
 */
@media (pointer: coarse) {
  .place-quick button,
  .academy-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/*
 * Подложка под логотип партнёра.
 *
 * Было background: #fff — белый прямоугольник посреди тёмной страницы, который
 * выламывался из палитры сильнее, чем сам логотип. На боевом сайте приём лучше
 * и взят оттуда: тёмная полупрозрачная подложка со своей рамкой, а зелёный знак
 * ЭтоМесто светится сам, без перекраски под янтарь.
 *
 * Карточка подхватывает бирюзовый самого партнёра — цвет приходит от него,
 * а не навязывается ему.
 */
/* Оформление подложки логотипа собрано выше, в одном правиле. */

.source-etomesto {
  background:
    radial-gradient(circle at 12% 18%, rgba(20, 184, 166, 0.12), transparent 34%),
    var(--surface);
}

/*
 * Подпись источника на карточке выдачи. Бирюзовый — цвет ЭтоМесто, тот же, что
 * и в сиянии партнёрской карточки выше: одна и та же вещь выглядит одинаково
 * в обоих местах. У NARA своей краски нет, он идёт нейтральным.
 */
.result-source {
  /* Карточка — грид, поэтому align-self тут не сужает: нужен justify-self. */
  justify-self: start;
  width: fit-content;
  margin-top: 2px;
  padding: 2px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text-faint);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Листы партнёра — его бирюзовым; у NARA своей краски нет, остаётся нейтральным. */
.result-source[data-src="etomesto"] {
  border-color: rgba(20, 184, 166, 0.42);
  color: rgba(94, 216, 201, 0.92);
}

/* ═══ Архив местности: диалог вместо панели в полэкрана ══════════════ */

/*
 * Поиск занимал на странице почти экран ради формы из двух полей, а выдача
 * раскладывала миниатюры по 4:3 в две колонки — листы выходили с ладонь.
 * Теперь это диалог, и миниатюры в нём мельче и плотнее.
 */
/*
 * Здесь было правило с flex-direction: column — от той поры, когда
 * .source-archive оборачивала кнопку с пояснением. Когда на её месте
 * появилась строка поиска, column никто не перебил, и поле с кнопкой
 * вставали друг под другом. Оформление строки — ниже, одним правилом.
 */

.archive-dialog {
  width: min(880px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  overflow: auto;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-modal);
  background:
    radial-gradient(circle at 10% 0%, rgba(20, 184, 166, 0.1), transparent 38%),
    var(--surface);
  color: var(--text-body);
}

.archive-dialog::backdrop {
  background: rgba(6, 6, 6, 0.72);
  backdrop-filter: blur(3px);
}

.archive-dialog-intro {
  margin: 0 0 16px;
  color: var(--text-body);
}

.archive-dialog .archive-count {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* Миниатюры: три в ряд уже с 520px и кадр площе — лист читается, но не давит. */
.archive-dialog .nearby-results {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

@media (min-width: 520px) {
  .archive-dialog .nearby-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 760px) {
  .archive-dialog .nearby-results { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.archive-dialog .nearby-result img {
  aspect-ratio: 3 / 2;
  margin-bottom: 8px;
}

.archive-dialog .nearby-result {
  padding-bottom: 10px;
}

.archive-dialog .nearby-result strong { font-size: 0.8125rem; line-height: 1.3; }
.archive-dialog .nearby-result small { font-size: 0.6875rem; }

/*
 * Логотип партнёра и поиск по его местности — в одной строке. Прежде под
 * карточкой стояла кнопка во всю ширину с пояснением на две строки: много
 * места внизу ради одного действия. Теперь поле сразу принимает город, а
 * выдача открывается в диалоге.
 */
.source-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  width: 100%;
  margin-bottom: 2px;
}

.source-head .source-logo { margin-bottom: 0; flex: 0 0 auto; }

/*
 * Поиск рядом с логотипом — одной строкой и заметно компактнее, чем в диалоге:
 * здесь он приглашение, а не рабочее место. Скруглён в таблетку под стать
 * логотипу на подложке, высота у обоих одна — 44px, поэтому ряд читается как
 * ряд, а не как два случайно соседних блока.
 */
.source-archive {
  display: flex;
  flex: 1 1 260px;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.source-archive .place-field { flex: 1 1 120px; min-width: 0; }

.source-archive .place-field input {
  min-height: 44px;
  padding: 0 14px 0 38px;
  border-radius: 999px;
  font-size: 0.9375rem;
}

.source-archive .place-field > .icon { left: 13px; }

.source-archive .button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 0.9375rem;
}

.source-archive-note {
  margin-top: 2px;
}

/* Ссылка на партнёра и отметка о бесплатности — одной строкой. */
.source-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0;
}

/* Бесплатность — довод, а не сноска: свой цвет, но без отдельной строки. */
.source-free {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  border: 1px solid rgba(20, 184, 166, 0.34);
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.08);
  color: rgba(126, 226, 213, 0.95);
  font-size: 0.8125rem;
  font-weight: 600;
}

.source-free .icon { width: 16px; height: 16px; }

/* ═══ Реставрация: размер снимка и вес главной кнопки ════════════════ */

/*
 * Снимок занимал 580px при колонке в 875 и стоял вплотную к левому краю:
 * до 1024px .finds-layout одноколоночный, и max-width без центрирования
 * прижимал кадр влево, оставляя справа четверть экрана пустой.
 */
.restoration {
  max-width: 420px;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  /* В две колонки кадру можно чуть больше — рядом стоят шаги, пустоты нет. */
  .restoration { max-width: 460px; }
}

/*
 * Кнопка запускает единственную интерактивную демонстрацию на странице, но
 * выглядела как рядовая кнопка формы. Ореол оставлен, а метку «демо» убрал:
 * подпись под кадром и так говорит, что это готовый пример, — значок повторял
 * её и мешал.
 *
 * Ширина закреплена потому, что подпись меняется с «Показать ИИ-реставрацию»
 * на «Вернуть оригинал»: без min-width кнопка на каждое нажатие прыгала,
 * утаскивая за собой строку состояния рядом.
 */
#restore-button {
  position: relative;
  gap: 10px;
  /* Поля уже обычной кнопки: оранжевого по краям было больше, чем нужно. */
  padding: 0 16px;
  justify-content: center;
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.28), 0 8px 26px rgba(251, 191, 36, 0.16);
  transition: box-shadow 200ms var(--ease);
}

#restore-button:hover {
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.5), 0 10px 32px rgba(251, 191, 36, 0.26);
}

#restore-button .icon {
  width: 20px;
  height: 20px;
}

/* Нажатая — приглушается: демонстрация уже идёт, звать больше некуда. */
#restore-button[aria-pressed="true"] {
  box-shadow: none;
}


/*
 * Земля на телефоне обрывалась вместе со сценой: фотография — слой внутри
 * .hero-scene, у сцены задана пропорция 4/5, и ниже маршрут выезда лежал уже
 * на голом фоне. Прокручиваешь — и грунт просто исчезает.
 *
 * Теперь продолжается до конца первого экрана: фон уходит ниже сцены и гаснет
 * маской, а .hero обрезает его по своей нижней кромке (overflow: hidden), так
 * что следующая секция начинается чисто. Вырезка руки не трогается — она
 * обязана совпадать с фоном пиксель в пиксель, и растягивать её нельзя.
 */
@media (max-width: 1023px) {
  .hero-scene { overflow: visible; }

  /* Фото и вырезка руки тянутся вниз вместе. Раньше тянулось одно фото: оно
     масштабировалось крупнее вырезки, и на телефоне медальонов становилось два. */
  .hero-scene .hero-photo,
  .hero-scene .hero-hand {
    bottom: -280px;
  }

  /* Гаснет позже и мягче прежнего: к низу сцены ещё земля, у маршрута — фон. */
  .hero-scene .hero-photo img,
  .hero-scene .hero-hand img {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 54%, rgba(0, 0, 0, 0.62) 74%, rgba(0, 0, 0, 0.22) 90%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 54%, rgba(0, 0, 0, 0.62) 74%, rgba(0, 0, 0, 0.22) 90%, transparent 100%);
  }

  /* Маршрут и строка про офлайн читаются поверх грунта, а не из-под него. */
  .journey-rail,
  .offline-line {
    position: relative;
    z-index: 4;
  }
  /* Под подписями теперь медальон и пальцы, а не тёмная земля: тень держит текст. */
  .journey-rail a,
  .offline-line { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 14px rgba(0, 0, 0, 0.8); }
  .journey-stop { background: rgba(15, 14, 13, 0.78); }
}
/* На 360 px «Находка» и «Коллекция» сходились вплотную: колонки по 64 px, а
   «Коллекция» в 12 px — 66. Маршрут берёт поля целиком, подпись — на пункт мельче. */
@media (max-width: 420px) {
  .journey-rail { width: calc(100% - 12px); }
  .journey-rail a { font-size: 0.6875rem; letter-spacing: -0.005em; }
}

/*
 * Ширину кнопки держит призрак длинной подписи: обе копии лежат в одной
 * ячейке грида, видна только живая. Так ширина равна самому длинному тексту
 * ровно — без запаса, выбранного на глаз, и без скачка при переключении.
 */
.restore-label {
  display: grid;
}

.restore-label__live,
.restore-label__ghost {
  grid-area: 1 / 1;
  white-space: nowrap;
}

.restore-label__ghost {
  visibility: hidden;
}

/* Кнопка и строка состояния — по центру под кадром, как и сам кадр. */
.restoration-actions {
  justify-content: center;
  text-align: center;
}

#restoration-status { flex: 1 1 100%; text-align: center; }

/* ═══ Фирменная катушка-загрузчик ═══════════════════════════════════ */

/*
 * Взята с боевого сайта: та же катушка и та же упругая раскрутка — перелёт
 * в cubic-bezier (1.25) и есть та самая «оттяжка», из-за которой катушка на
 * каждом обороте подаётся вперёд и чуть отыгрывает назад.
 *
 * Красим не фильтром, как на боевом (там длинная строка invert/sepia/hue-rotate
 * поверх чёрного SVG), а маской: цвет берётся из токена, и его видно в коде.
 */
@keyframes coil-elastic {
  0%   { transform: rotate(0deg)    scale(0.88); }
  22%  { transform: rotate(-88deg)  scale(1.10); }
  44%  { transform: rotate(-168deg) scale(0.93); }
  66%  { transform: rotate(-248deg) scale(1.06); }
  88%  { transform: rotate(-328deg) scale(0.95); }
  100% { transform: rotate(-360deg) scale(0.88); }
}

.coil-loader {
  flex: 0 0 auto;
  width: var(--coil-size, 40px);
  height: var(--coil-size, 40px);
  background: var(--amber-bright);
  -webkit-mask: url("assets/loading.svg") center / contain no-repeat;
  mask: url("assets/loading.svg") center / contain no-repeat;
  transform-origin: center center;
  animation: coil-elastic 2.05s cubic-bezier(0.38, 1.25, 0.55, 1) infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  /* Вращение остаётся — застывший загрузчик пугает сильнее, — но без рывков. */
  .coil-loader { animation: coil-elastic 3.6s linear infinite; }
}

/* Загрузка фотографии публикации: катушка над подписью, поверх кадра. */
.photo-loading {
  display: none;
  grid-auto-flow: row;
  justify-items: center;
  align-content: center;
  gap: 10px;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.photo-loading .coil-loader { --coil-size: 34px; }

/* Загрузка публикации целиком. */
.live-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/*
 * Снимок находки занимал всю карточку: рамка подстраивается под кадр, и
 * портретное фото 4:5 вытягивалось почти на шестьсот пикселей — запись
 * превращалась в плакат. Кадрирование остаётся (object-fit: cover), но высота
 * ограничена: видно, что нашли, и видно саму запись вокруг.
 */
.live-photo-wrap {
  /*
   * width обязателен. У рамки задана aspect-ratio, и одного max-height мало:
   * высота упирается в предел, а ширина послушно ужимается следом, чтобы
   * сохранить пропорцию, — карточка остаётся с чёрным полем справа. Явная
   * ширина делает её определённой, предел режет только высоту, а кадр
   * дорезает object-fit: cover у самого снимка.
   */
  width: 100%;
  max-height: min(46vh, 380px);
}

/*
 * Металлоискатель уходит на фон: он стоял отдельным блоком над текстом и
 * забирал себе высоту, хотя его работа — задать настроение, а не занять место.
 * Теперь это подложка секции, а призыв читается поверх.
 */
.start-section {
  position: relative;
  isolation: isolate;
}

.start-section .detector-scene {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}

.start-section .start-copy {
  position: relative;
  z-index: 1;
  /*
   * Текст заходит на нижнюю, земляную часть сцены — там она и так уходит в
   * тень, — но не на саму катушку: подложка должна задавать настроение,
   * а не спорить с заголовком за внимание.
   */
  padding-top: clamp(118px, 16vw, 190px);
}

/* ═══ Подвал: ссылки сворачиваются на телефоне ══════════════════════ */

.footer-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  cursor: pointer;
  list-style: none;
}

.footer-disclosure summary::-webkit-details-marker { display: none; }

/* Шеврон показывает, что список раскрывается, и поворачивается при раскрытии. */
.footer-disclosure summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: 0.6;
  transition: transform 160ms var(--ease);
}

.footer-disclosure[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.footer-links {
  display: grid;
  gap: 2px;
  padding-bottom: 6px;
}

@media (min-width: 640px) {
  /*
   * На широком экране колонки всегда раскрыты: шеврон убран, нажатие по
   * заголовку ничего не делает — он снова просто заголовок.
   */
  .footer-disclosure summary {
    min-height: 0;
    cursor: default;
    pointer-events: none;
  }
  .footer-disclosure summary::after { display: none; }
}

/* ═══ Внутренние страницы: новости и Академия ═══════════════════════ */

/*
 * Шапка страницы вместо первого экрана: тот же строй — eyebrow, заголовок,
 * лид, строка-подпись, — но без сцены. Разделам она задаёт ту же точку входа,
 * что главной её герой.
 */
.page-head {
  padding-top: clamp(40px, 7vw, 88px);
}

.page-head-inner {
  max-width: 44rem;
}
/* Рубрика статьи стоит над H1 отдельной строкой: в заголовке — только название статьи,
   как на живом сайте. Отступ тот же, что был внутри h1 (18 + gap 14). */
.page-head-inner > .eyebrow { margin-bottom: 32px; }

.page-head h1 {
  display: grid;
  gap: 14px;
  font-size: clamp(2.4rem, 5.4vw, 3.6rem);
  line-height: 1.06;
  overflow-wrap: break-word;
}
/* На телефоне размер — от ширины экрана: самое длинное слово заголовков Академии
   («чувствительность», «Металлоискатель») при 38 px не помещалось в колонку 280–350 px
   и уходило за край (15.10). 9vw держит его в колонке от 320 px. */
@media (max-width: 599px) {
  .page-head h1 { font-size: clamp(1.75rem, 9vw, 2.4rem); }
}

.page-head .lead { margin-top: 18px; }
.page-head .trust-line { margin-top: 22px; }
.page-head .trust-line .icon { color: var(--amber-bright); }

/* Лента новостей */
.feed-list {
  display: grid;
  gap: 14px;
}

@media (min-width: 760px) {
  .feed-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Первая новость — во всю ширину: она и есть «что нового». */
  .feed-card--lead { grid-column: 1 / -1; }
}

.feed-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}

.feed-card:hover { border-color: var(--amber-line); background: var(--surface-raised); }

.feed-date {
  margin: 0;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.feed-title {
  margin: 0;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.24;
}

.feed-card--lead .feed-title { font-size: clamp(1.4rem, 2.6vw, 2rem); }

.feed-title a { color: var(--text); text-decoration: none; }
.feed-title a:hover { color: var(--amber-glow); }

/* Ссылка «растягивается» на карточку: попасть можно куда угодно в ней. */
.feed-title a::after { content: ""; position: absolute; inset: 0; }
.feed-card { position: relative; }

.feed-excerpt {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* Каталог Академии */
.academy-groups { display: grid; gap: clamp(32px, 4vw, 52px); }

.academy-group-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 16px;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
}

.academy-count {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.academy-list { display: grid; gap: 10px; }

@media (min-width: 860px) {
  .academy-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.academy-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--bg-alt);
  color: var(--text);
  text-decoration: none;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}

.academy-item strong { grid-column: 1; font-size: 1rem; line-height: 1.3; }
.academy-item span { grid-column: 1; color: var(--text-faint); font-size: 0.875rem; line-height: 1.45; }
.academy-item .icon { grid-column: 2; grid-row: 1 / -1; width: 18px; height: 18px; color: var(--text-faint); }

.academy-item:hover {
  border-color: var(--amber-line);
  background: var(--surface);
}

.academy-item:hover .icon { color: var(--amber-glow); }

/*
 * Шапка страницы и список под ней — одно целое, а не два раздела: между ними
 * не нужен полный межсекционный отступ в 128px, иначе лента начинается
 * вторым экраном.
 */
.page-head { padding-bottom: clamp(20px, 3vw, 36px); }
.page-head + .section { padding-top: clamp(28px, 4vw, 56px); }

/* ═══ Статья Академии ═══════════════════════════════════════════════ */

.article-back { margin-bottom: 18px; }

.article-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--text-dim);
  font-size: 0.9375rem;
  text-decoration: none;
}

.article-back a:hover { color: var(--amber-glow); }
/* Стрелка смотрит назад, к каталогу. */
.article-back .icon { width: 18px; height: 18px; transform: rotate(180deg); }

.article-layout { display: grid; gap: clamp(28px, 4vw, 48px); }

/*
 * Статья — одна композиция по центру экрана: колонка текста и призыв рядом с ней.
 * Раньше колонка занимала всю ширину в 1240 px, текст в ней прижимался влево, а
 * призыв висел у правого края — между ними оставалась пустая полоса. Заголовок
 * статьи стоит по левому краю той же колонки.
 */
.article-page > .wrap,
.wrap:has(> .article-layout) { width: min(976px, 100% - 2 * var(--gutter)); }

@media (min-width: 1000px) {
  /* Призыв держится рядом с текстом, пока его читают. */
  .article-layout { grid-template-columns: minmax(0, 40rem) 280px; justify-content: space-between; align-items: start; }
  .article-aside { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* Колонка текста: мера строки, а не вся ширина экрана. */
.article-body { max-width: 40rem; color: var(--text-body); font-size: 1.0625rem; line-height: 1.7; }
.article-body > * + * { margin-top: 1.1em; }

.article-body h2,
.article-body h3,
.article-body h4 {
  margin-top: 1.9em;
  color: var(--text);
  font-family: var(--font-display);
  line-height: 1.2;
}

.article-body h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.article-body h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
.article-body h4 { font-size: 1.1rem; }

.article-body a { color: var(--amber-glow); text-underline-offset: 3px; }
.article-body strong { color: var(--text); }
.article-body ul, .article-body ol { padding-left: 1.3em; }
.article-body li + li { margin-top: 0.5em; }

.article-body blockquote {
  margin-left: 0;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--amber-line);
  color: var(--text-dim);
}

.article-cta {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.article-cta-text { margin: 0; color: var(--text); font-weight: 600; line-height: 1.4; }
.article-cta .note { margin: 0; }
.article-related { margin-top: clamp(40px, 6vw, 72px); }

/* ═══ Статья: оглавление, таблицы, рисунки ═════════════════════════ */

/*
 * Без этих трёх вещей статья читалась сплошной пеленой: двенадцать разделов
 * без входа, пятьдесят семь строк таблиц абзацами с палками и потерянная
 * диаграмма.
 */
.article-toc {
  margin-bottom: clamp(28px, 4vw, 44px);
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--amber-line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.article-toc-title {
  margin: 0 0 12px;
  color: var(--text-faint);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.article-toc ol {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: 7px;
  color: var(--text-faint);
  font-size: 0.9375rem;
}

.article-toc a { color: var(--text-body); text-decoration: none; }
.article-toc a:hover { color: var(--amber-glow); text-decoration: underline; text-underline-offset: 3px; }

/* Раздел, к которому перешли, не прячется под липкую шапку. */
.article-body h2[id] { scroll-margin-top: calc(var(--header-h) + 20px); }

/* Таблицы выходят за меру строки — им нужна вся колонка и прокрутка на узком. */
.article-table-wrap {
  overflow-x: auto;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
}

.article-table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.article-table th,
.article-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.article-table th {
  color: var(--text);
  font-weight: 600;
  background: var(--bg-alt);
  border-bottom-color: var(--line-strong);
}

.article-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }

.article-figure {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--bg-alt);
}

.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

.article-figure figcaption {
  margin-top: 10px;
  color: var(--text-faint);
  font-size: 0.875rem;
  line-height: 1.5;
}

.article-body code {
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font-family: var(--font-mono);
  font-size: 0.875em;
}

/* Таблицы и рисунки шире меры строки — пусть занимают всю колонку. */
.article-body > .article-table-wrap,
.article-body > .article-figure { max-width: none; }

/* ═══ Логотип: оборот с оттяжкой ═══════════════════════════════════ */

/*
 * Приём с боевого сайта. Оттяжку даёт перелёт в кривой (1.1): знак проворачивается
 * чуть дальше полного оборота и отыгрывает назад. На мыши — по наведению,
 * на телефоне наведения нет, поэтому по нажатию; переход на главную при этом
 * остаётся обычным переходом по ссылке, анимация его не перехватывает.
 */
.brand img {
  border-radius: 50%;
  transform-origin: center center;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 0 3px rgba(217, 119, 6, 0.14),
    0 6px 18px rgba(0, 0, 0, 0.38);
  transition:
    transform 0.65s cubic-bezier(0.34, 1.1, 0.48, 1),
    box-shadow 0.3s ease;
}

.brand:hover img,
.brand:focus-visible img,
.brand:active img {
  transform: rotate(360deg);
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.4),
    0 0 0 5px rgba(217, 119, 6, 0.22),
    0 8px 22px rgba(217, 119, 6, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  /* Подсветка остаётся, оборот — нет. */
  .brand img { transition: box-shadow 0.3s ease; }
  .brand:hover img,
  .brand:focus-visible img,
  .brand:active img { transform: none; }
}

/* ═══ Статья: ритм вместо пелены ═══════════════════════════════════ */

/*
 * Оглавление длинным столбцом было почти так же монотонно, как сам текст.
 * Теперь это сетка пронумерованных строк — её видно одним взглядом, и в ней
 * сразу читается, из чего статья состоит.
 */
.article-toc ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 680px) {
  .article-toc ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; }
}

.article-toc a {
  display: grid;
  grid-template-columns: 2.2em 1fr;
  align-items: baseline;
  gap: 2px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  line-height: 1.35;
}

.article-toc a:hover { background: var(--surface-raised); text-decoration: none; }

.article-toc-num {
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

/*
 * Номер раздела — тот же приём, что у секций главной: моноширинная цифра и
 * прочерк. Он разбивает текст на части, которые видно при пролистывании,
 * и связывает статью с остальным сайтом.
 */
.article-body h2 {
  display: grid;
  gap: 6px;
  margin-top: 2.4em;
  padding-top: 1.2em;
  border-top: 1px solid var(--line);
}

.article-body h2 .eyebrow { font-size: 0.6875rem; }
.article-body h2 .eyebrow[data-num]::before { margin-right: 0; padding-right: 34px; }

/* Первый абзац — вход в текст. */
.article-lede {
  color: var(--text);
  font-size: 1.1875rem;
  line-height: 1.6;
}

/*
 * Цитата была просто текстом с чертой слева. Сделана врезкой: на неё
 * натыкается глаз, когда текст идёт длинно.
 */
.article-body blockquote {
  margin-block: 1.6em;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-panel);
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
}

/*
 * Колонка статьи обязана уметь сжиматься. У элементов грида min-width по
 * умолчанию auto, то есть «не уже своего содержимого», а внутри лежит таблица
 * с min-width: 30rem. На телефоне колонка растягивалась до 480px в окне 375 и
 * текст уезжал за правый край — страница при этом не прокручивалась, просто
 * обрезалась. Прокручиваться должна таблица внутри себя, а не статья целиком.
 */
.article-layout > *,
.article-main {
  min-width: 0;
}

/*
 * Подсказка, что таблицу можно листать. Приём со «scroll shadow»: четыре слоя
 * фона — две плотные заглушки, прикреплённые к содержимому (local), и две
 * тени, прикреплённые к окну прокрутки (scroll). Пока есть что листать, тень
 * видна; доскроллил до края — заглушка её закрывает. Без скрипта.
 */
.article-table-wrap {
  background:
    linear-gradient(to right, var(--bg-alt), rgba(20, 18, 17, 0)) left center / 22px 100% no-repeat,
    linear-gradient(to left, var(--bg-alt), rgba(20, 18, 17, 0)) right center / 22px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)) left center / 14px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)) right center / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

/* Полоса прокрутки у таблицы — тонкая и в палитре, а не системная светлая. */
.article-table-wrap::-webkit-scrollbar { height: 6px; }
.article-table-wrap::-webkit-scrollbar-thumb { background: var(--stone-border); border-radius: 999px; }
.article-table-wrap::-webkit-scrollbar-track { background: transparent; }

/* ═══ Новости: карточка с фотографией ══════════════════════════════ */

.feed-card { overflow: hidden; padding: 0; }

.feed-media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-alt);
}

.feed-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Без фотографии карточка не проваливается: знак на приглушённом фоне. */
.feed-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: radial-gradient(60% 60% at 50% 45%, rgba(217, 119, 6, 0.12), transparent 70%), var(--bg-alt);
  opacity: 0.55;
}

.feed-text {
  display: grid;
  gap: 8px;
  padding: clamp(16px, 2.2vw, 22px);
}

.feed-date { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.feed-cat,
.feed-pin {
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.feed-cat { border: 1px solid var(--line-strong); color: var(--text-dim); }
.feed-pin { border: 1px solid var(--amber-line); color: var(--amber-glow); }

@media (min-width: 760px) {
  /* Ведущая новость — фотография слева, текст справа. */
  .feed-card--lead { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch; }
  .feed-card--lead .feed-media { aspect-ratio: auto; height: 100%; }
  .feed-card--lead .feed-text { align-content: center; padding: clamp(22px, 3vw, 34px); }
}

/* ═══ Новости: фото из кэша, страница новости, лайки и комментарии ═══════ */

/* Заголовок карточки — во всю колонку. Общее правило h2 { max-width: 15ch } рвало
   «Житель Жлобина нашёл в реке…» на пять строк по два слова. */
.feed-title { max-width: none; }

/* Пока фото едет, на его месте мерцает подложка; приехало — проявляется. */
[data-photo] { position: relative; background-color: var(--bg-alt); }
.photos [data-photo]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.045) 50%, transparent 70%) 0 0 / 220% 100%;
  animation: photo-wait 1.3s linear infinite;
  pointer-events: none;
}
.photos [data-photo] img { opacity: 0; transition: opacity 450ms var(--ease); }
.photos [data-photo].is-loaded::before { content: none; }
.photos [data-photo].is-loaded img { opacity: 1; }
/* Битая ссылка на фото: знак вместо пустой рамки. */
[data-photo].is-broken img { visibility: hidden; }
[data-photo].is-broken { background: url("assets/logo.png") center / 56px no-repeat, var(--bg-alt); }
@keyframes photo-wait { to { background-position: -220% 0; } }

/* Лайки и комментарии — в правом верхнем углу карточки, всегда, и нули тоже.
   Над фотографией — тёмная плашка, чтобы цифры читались на любом снимке. */
.feed-stats {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(15, 14, 13, 0.74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.2;
  pointer-events: none;
}
.feed-stats[hidden] { display: none; }
.feed-stats span { display: inline-flex; align-items: center; gap: 5px; }
.feed-stats b { font-weight: 500; }
.feed-stats .icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.feed-list--three { margin-top: 26px; }
@media (min-width: 1000px) {
  .feed-list--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Страница новости --- */
.news-wrap { width: min(760px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.news-head { padding: clamp(28px, 5vw, 56px) 0 clamp(22px, 3vw, 32px); }
.news-title {
  max-width: none;
  margin: 12px 0 0;
  font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3rem);
  line-height: 1.1;
}
.news-byline { margin: 14px 0 0; color: var(--text-dim); font-size: 0.9375rem; }

.news-cover {
  width: min(1040px, 100% - 2 * var(--gutter));
  margin: 0 auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
}
.news-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 599px) {
  /* На телефоне фото — от края до края, как в ленте приложения. */
  .news-cover { width: 100%; border-inline: 0; border-radius: 0; }
}

.news-body {
  margin-top: clamp(26px, 4vw, 40px);
  color: var(--text-body);
  font-size: 1.0625rem;
  line-height: 1.75;
}
.news-body > * + * { margin-top: 1.05em; }
/* Первый абзац — вход в историю: крупнее и светлее. */
.news-body > p:first-child { color: var(--text); font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); line-height: 1.6; }
.news-body h2 { max-width: none; margin-top: 1.6em; font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); }
.news-body ul, .news-body ol { padding-left: 1.3em; }
.news-body li + li { margin-top: 0.4em; }
.news-body a { color: var(--amber-bright); text-decoration: underline; text-decoration-color: var(--amber-line); text-underline-offset: 3px; overflow-wrap: anywhere; }
.news-body a:hover { color: var(--amber-glow); }
.news-body img { max-width: 100%; height: auto; border-radius: var(--radius-card); }

/* --- Отклики --- */
.news-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.react-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-body);
  font: 500 0.9375rem/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease), color 160ms var(--ease);
}
.react-button:hover:not(:disabled) { border-color: var(--amber-line); color: var(--text); }
.react-button:disabled { opacity: 0.5; cursor: default; }
.react-button .icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.react-count { font-family: var(--font-mono); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.like-button[aria-pressed="true"] { border-color: var(--amber-line); background: var(--amber-tint); color: var(--amber-glow); }
.like-button[aria-pressed="true"] .icon { fill: var(--amber-bright); stroke: var(--amber-bright); }
.like-button.is-popping .icon { animation: like-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes like-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.react-share { margin-left: auto; }
.react-status { flex-basis: 100%; color: var(--text-dim); font-size: 0.875rem; overflow-wrap: anywhere; }
.react-status:empty { display: none; }
@media (max-width: 479px) {
  .react-share span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .react-share { padding: 0 13px; }
}

/* --- Комментарии --- */
.comments { margin-top: clamp(36px, 5vw, 56px); padding-bottom: clamp(48px, 7vw, 88px); }
.comments-title { max-width: none; font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); }
.comments-title[data-count]:not([data-count=""])::after {
  content: attr(data-count);
  margin-left: 12px;
  color: var(--text-faint);
  font: 500 1rem var(--font-mono);
  vertical-align: middle;
}
.comment-list { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.comment-list:empty { display: none; }
.comment {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}
.comment.is-pending { border-style: dashed; border-color: var(--line-strong); background: transparent; }
.comment-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: hsl(var(--hue) 32% 26%);
  color: hsl(var(--hue) 70% 86%);
  font: 600 1rem var(--font-sans);
}
.comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.comment-head strong { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.comment-head time { color: var(--text-faint); font-size: 0.8125rem; }
.comment-chip {
  padding: 1px 8px;
  border: 1px solid var(--amber-line);
  border-radius: 999px;
  color: var(--amber-glow);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.comment-body { margin: 6px 0 0; color: var(--text-body); line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.comments-empty { margin: 18px 0 0; color: var(--text-dim); }
.comments-empty[hidden] { display: none; }

.comment-form {
  margin-top: 22px;
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--bg-alt);
}
.comment-fields { display: grid; gap: 14px; }
.comment-field { display: grid; gap: 7px; }
.comment-field span { color: var(--text-dim); font-size: 0.875rem; }
.comment-field--name { max-width: 320px; }
.comment-field input,
.comment-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.5 var(--font-sans);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.comment-field textarea { min-height: 112px; resize: vertical; }
.comment-field input::placeholder, .comment-field textarea::placeholder { color: var(--text-faint); }
.comment-field input:hover, .comment-field textarea:hover { border-color: var(--amber-line); }
.comment-field input:focus, .comment-field textarea:focus { outline: none; border-color: var(--amber-bright); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }
/* Ловушка для ботов: человек её не видит и до неё не дотабается. */
.comment-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.comment-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 14px; }
.comment-note { flex: 1 1 260px; margin: 0; color: var(--text-faint); font-size: 0.8125rem; line-height: 1.5; }
.comment-counter { color: var(--text-faint); font: 0.75rem var(--font-mono); font-variant-numeric: tabular-nums; }
.comment-counter.is-near { color: var(--amber-glow); }
.comment-status { margin: 12px 0 0; font-size: 0.9375rem; }
.comment-status:empty { display: none; }
.comment-status[data-kind="ok"] { color: var(--success); }
.comment-status[data-kind="error"] { color: var(--error); }
@media (max-width: 479px) {
  .comment-foot .button { width: 100%; }
}

.news-related-title { max-width: none; }
.news-related-more { margin: 26px 0 0; }

/* --- Модерация комментариев (служебная страница) --- */
.review { padding: clamp(28px, 5vw, 56px) 0 80px; }
.review-brand { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--text-dim); font-size: 0.875rem; }
.review-brand img { border-radius: 50%; }
.review-title { max-width: none; margin: 18px 0 0; font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); }
.review-lead { margin: 12px 0 0; color: var(--text-dim); }
.review-login { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-top: 28px; }
.review-login .comment-field { flex: 1 1 260px; }
.review-login[hidden], .review-board[hidden] { display: none; }
.review-board { margin-top: 28px; }
.review-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.review-tabs button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-body);
  font: 500 0.875rem var(--font-sans);
  cursor: pointer;
}
.review-tabs [aria-selected="true"] { border-color: var(--amber-line); background: var(--amber-tint); color: var(--amber-glow); }
.review-tabs .review-logout { margin-left: auto; background: transparent; color: var(--text-dim); }
.review-status { margin: 16px 0 0; color: var(--text-dim); font-size: 0.9375rem; }
.review-item { grid-template-columns: minmax(0, 1fr); }
.review-item .comment-head a { color: var(--amber-bright); font-size: 0.8125rem; }
.review-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.review-actions .button { min-height: 40px; padding: 0 16px; font-size: 0.875rem; }

/* ═══ Инструменты ═══════════════════════════════════════════════════ */
.tool-list { display: grid; gap: clamp(16px, 2vw, 24px); }
.tool-panel {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}
.tool-visual {
  display: grid;
  place-items: center;
  padding: clamp(22px, 4vw, 44px);
  border-bottom: 1px solid var(--line);
  background: radial-gradient(80% 90% at 50% 40%, rgba(217, 119, 6, 0.1), transparent 70%), var(--bg-alt);
}
@media (min-width: 900px) {
  .tool-panel { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .tool-visual { border-bottom: 0; border-right: 1px solid var(--line); }
  /* Второй инструмент — зеркально: картинки не встают одна под другой. */
  .tool-panel:nth-child(even) .tool-visual { order: 2; border-right: 0; border-left: 1px solid var(--line); }
}
/* Настоящий скриншот инструмента в рамке окна браузера: видно, как он выглядит в работе. */
.tool-visual { margin: 0; align-content: center; gap: 12px; }
.tool-shot {
  display: block;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--bg);
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.9);
  transition: transform 300ms var(--ease), border-color 200ms var(--ease);
}
.tool-shot:hover { transform: translateY(-3px); border-color: var(--amber-line); }
.tool-shot-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface-raised); }
.tool-shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.tool-shot-bar span { overflow: hidden; margin-left: 8px; color: var(--text-faint); font: 0.75rem var(--font-mono); white-space: nowrap; text-overflow: ellipsis; }
/* Адрес в «окне браузера» рисуется стилями: текстом внутри ссылки он расходился с её
   подписью «Открыть …», и проверка доступности это отмечала. */
.tool-shot-bar span::after { content: attr(data-url); }
.tool-shot img { display: block; width: 100%; height: auto; }
.tool-visual figcaption { color: var(--text-faint); font-size: 0.8125rem; line-height: 1.5; text-align: center; }

.tool-copy { display: grid; align-content: center; gap: 14px; padding: clamp(22px, 3.4vw, 40px); }
.tool-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--text-faint);
  font: 500 0.75rem var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tool-tag span { color: var(--amber-bright); }
.tool-name { max-width: none; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); }
.tool-lead { margin: 0; color: var(--text-body); font-size: 1.0625rem; line-height: 1.65; }
.tool-points { display: grid; gap: 9px; margin: 2px 0 0; padding: 0; list-style: none; }
.tool-points li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; color: var(--text-body); line-height: 1.5; }
.tool-points .icon { width: 18px; height: 18px; margin-top: 3px; fill: none; stroke: var(--amber-bright); stroke-width: 2.2; }
.tool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px; }
.tool-actions .button .icon { margin-left: 8px; }

.tools-flow-title { max-width: 18ch; }
.flow-steps { display: grid; gap: 14px; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .flow-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.flow-steps li { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); }
.flow-num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--amber-line);
  border-radius: 50%;
  color: var(--amber-glow);
  font: 600 0.9375rem var(--font-mono);
}
.flow-steps h3 { margin: 14px 0 0; font-size: 1.25rem; }
.flow-steps p { margin: 8px 0 0; color: var(--text-dim); line-height: 1.6; }
.flow-steps a, .how-grid a { color: var(--amber-bright); text-decoration: underline; text-decoration-color: var(--amber-line); text-underline-offset: 3px; }

.faq-wrap > h2 { max-width: 20ch; margin-bottom: clamp(20px, 3vw, 30px); }
.faq-wrap .faq-list { max-width: 820px; }

.page-cta-inner { display: grid; justify-items: center; gap: 14px; text-align: center; }
.page-cta h2 { max-width: 18ch; margin: 0 auto; }
.page-cta h2 .eyebrow { justify-content: center; }
.page-cta p { max-width: 52ch; margin: 0; color: var(--text-dim); }

/* ═══ Аэрофотоархив ═════════════════════════════════════════════════ */
.archive-head-grid { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (min-width: 980px) { .archive-head-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.archive-facts { display: flex; flex-wrap: wrap; gap: 14px 30px; margin: 26px 0 0; padding: 0; list-style: none; }
.archive-facts li { display: grid; gap: 2px; }
.archive-facts b { color: var(--text); font: 600 1.375rem var(--font-mono); font-variant-numeric: tabular-nums; }
.archive-facts span { color: var(--text-dim); font-size: 0.875rem; }

/* Контактный лист: настоящие кадры архива, как отпечатки на столе. */
.archive-sheet {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--bg-alt);
}
@media (min-width: 980px) {
  .archive-sheet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    transform: rotate(-1.2deg);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.85);
  }
}
.archive-sheet figure { margin: 0; min-width: 0; }
.archive-sheet img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 4px; filter: grayscale(1) contrast(1.05); }
.archive-sheet figcaption { margin-top: 6px; overflow: hidden; color: var(--text-faint); font: 0.6875rem var(--font-mono); white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 559px) { .archive-sheet figcaption { display: none; } }

/* Строка поиска едет под шапкой: искать приходится, пролистав выдачу. */
.archive-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  padding: 12px 0;
  border-block: 1px solid var(--line);
  background: rgba(15, 14, 13, 0.92);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}
.archive-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.archive-search { position: relative; display: flex; flex: 1 1 320px; align-items: center; min-width: 0; }
.archive-search > .icon { position: absolute; left: 14px; width: 20px; height: 20px; color: var(--text-faint); pointer-events: none; }
.archive-search input {
  width: 100%;
  height: 48px;
  padding: 0 48px 0 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font: 400 1rem var(--font-sans);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.archive-search input::placeholder { color: var(--text-faint); }
.archive-search input:hover { border-color: var(--amber-line); }
.archive-search input:focus { outline: none; border-color: var(--amber-bright); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }
.archive-search input::-webkit-search-cancel-button { display: none; }
.archive-clear {
  position: absolute;
  right: 6px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.archive-clear:hover { background: var(--surface-raised); color: var(--text); }
.archive-clear .icon { width: 18px; height: 18px; }
.archive-clear[hidden] { display: none; }
.archive-chips { display: flex; gap: 8px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.archive-chips::-webkit-scrollbar { display: none; }
.filter-chip {
  flex: none;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-body);
  font: 500 0.875rem var(--font-sans);
  cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease), color 160ms var(--ease);
}
.filter-chip:hover { border-color: var(--amber-line); color: var(--text); }
.filter-chip[aria-pressed="true"] { border-color: var(--amber-line); background: var(--amber-tint); color: var(--amber-glow); }
@media (pointer: coarse) { .filter-chip { min-height: 44px; } }

.archive-results { padding: clamp(20px, 3vw, 32px) 0 clamp(56px, 7vw, 96px); scroll-margin-top: calc(var(--header-h) + 80px); }
.archive-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 18px; }
.archive-meta > p { margin: 0; color: var(--text-dim); }
.archive-meta b { color: var(--text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.archive-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; font-size: 0.875rem; }
.archive-quick span { margin-right: 6px; color: var(--text-faint); }
.archive-quick button {
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--amber-bright);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--amber-line);
  text-underline-offset: 3px;
  cursor: pointer;
}
.archive-quick button:hover { background: var(--amber-tint); color: var(--amber-glow); }
@media (pointer: coarse) { .archive-quick button { min-height: 44px; } }

.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 14px; }
@media (max-width: 559px) { .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.store-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  transition: border-color 160ms var(--ease);
}
.store-card:hover { border-color: var(--amber-line); }
.store-card:has(.store-buy:focus-visible) { outline: 2px solid var(--amber-bright); outline-offset: 2px; }
.store-card-thumb { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--bg-alt); }
.store-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: grayscale(1) contrast(1.06);
  transition: opacity 400ms var(--ease), transform 600ms var(--ease);
}
.store-card-thumb img.is-loaded { opacity: 1; }
.store-card:hover .store-card-thumb img { transform: scale(1.04); }
.store-badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; }
.store-badge { padding: 3px 8px; border-radius: 6px; background: rgba(15, 14, 13, 0.82); color: var(--text); font: 500 0.75rem var(--font-mono); }
.store-card-body { display: grid; align-content: start; gap: 4px; padding: 12px 14px 14px; }
.store-card-title {
  display: -webkit-box;
  max-width: none;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font: 600 0.9375rem/1.35 var(--font-sans);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.store-card-sub { margin: 0; color: var(--text-faint); font: 0.75rem var(--font-mono); }
.store-card-hint { margin: 0; color: var(--amber-glow); font-size: 0.75rem; }
.store-card-actions { margin-top: 6px; }
.store-buy { padding: 0; border: 0; background: none; color: var(--amber-bright); font: 600 0.8125rem var(--font-sans); cursor: pointer; }
.store-buy:focus-visible { outline: none; }
/* Вся карточка нажимается, а не одно слово «Подробнее». */
.store-buy::after { content: ""; position: absolute; inset: 0; }
@media (max-width: 559px) {
  .store-card-body { padding: 10px 11px 12px; }
  .store-card-title { font-size: 0.875rem; }
}

/* Пока каталог едет (11 МБ), на месте выдачи — заготовки, а не пустота. */
.store-card.is-skeleton .store-card-thumb,
.store-card.is-skeleton .store-card-body span {
  background: linear-gradient(100deg, var(--bg-alt) 30%, rgba(255, 255, 255, 0.05) 50%, var(--bg-alt) 70%) 0 0 / 220% 100%;
  animation: photo-wait 1.3s linear infinite;
}
.store-card.is-skeleton .store-card-body span { display: block; height: 10px; border-radius: 4px; }
.store-card.is-skeleton .store-card-body span + span { width: 60%; }

.archive-empty { display: grid; justify-items: center; gap: 10px; padding: 48px 16px; text-align: center; }
.archive-empty[hidden] { display: none; }
.archive-empty h2 { max-width: none; font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); }
.archive-empty p { margin: 0; color: var(--text-dim); }
.archive-more { margin: 26px 0 0; text-align: center; }
.archive-more .button[hidden] { display: none; }

.archive-how h2 { max-width: 20ch; }
.how-grid { display: grid; gap: 14px; margin-top: clamp(22px, 3vw, 34px); }
@media (min-width: 760px) { .how-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.how-grid article { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); }
.how-grid .icon { width: 26px; height: 26px; color: var(--amber-bright); }
.how-grid h3 { margin: 14px 0 0; font-size: 1.25rem; }
.how-grid p { margin: 8px 0 0; color: var(--text-dim); line-height: 1.6; }
.archive-note { max-width: 70ch; margin: 22px 0 0; color: var(--text-faint); font-size: 0.875rem; line-height: 1.6; }

/* Карточка снимка и окна Discovera Maps */
.store-dialog {
  width: min(980px, calc(100vw - 24px));
  max-height: min(90vh, 900px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-modal);
  background: var(--surface);
  color: var(--text-body);
  box-shadow: 0 40px 80px -30px #000;
}
.store-dialog.is-narrow { width: min(560px, calc(100vw - 24px)); }
.store-dialog::backdrop { background: rgba(8, 7, 6, 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.store-dialog .dialog-close { top: 14px; right: 14px; }
.store-dialog-inner { display: grid; }
@media (min-width: 820px) { .store-dialog-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.store-dialog-image { display: grid; place-items: center; min-height: 280px; background: var(--bg); }
.store-dialog-image > img { display: block; width: 100%; height: 100%; max-height: 72vh; object-fit: contain; filter: grayscale(1); }
.store-dialog-body { display: grid; align-content: start; gap: 14px; padding: clamp(22px, 3vw, 32px); }
.store-dialog-body .eyebrow { margin: 0; }
.store-dialog-body h2 { max-width: none; margin: 0; padding-right: 44px; font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); line-height: 1.2; }
.store-spec {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 18px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bg-alt);
}
.store-spec dt { color: var(--text-faint); font-size: 0.875rem; }
.store-spec dd { margin: 0; color: var(--text); font: 0.875rem var(--font-mono); overflow-wrap: anywhere; }
.store-note { margin: 0; color: var(--text-body); font-size: 0.9375rem; line-height: 1.6; }
.store-note:empty { display: none; }
.store-note-dim { color: var(--text-dim); font-size: 0.875rem; }
.store-warning { padding: 12px 14px; border: 1px solid var(--amber-line); border-radius: var(--radius-card); background: var(--amber-tint); }
.store-warning strong { color: var(--amber-glow); }
.store-error { color: var(--error); }
.store-packages { display: grid; gap: 10px; }
.store-getapp { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--bg-alt); }
.store-getapp strong { color: var(--text); }
.store-getapp span { color: var(--text-dim); font-size: 0.875rem; line-height: 1.5; }
.store-getapp .button { justify-self: start; margin-top: 6px; }
.store-getapp-row { display: flex; flex-wrap: wrap; gap: 10px; }
.store-getapp-row .button { margin-top: 0; }
/* Превью привязки — только у снимков, которые кто-то выверил вручную. */
.store-georef { display: grid; gap: 10px; width: 100%; padding: 14px; }
.store-georef-canvas { width: 100%; height: auto; border-radius: var(--radius-card); }
.store-georef-sliderrow { display: grid; gap: 6px; color: var(--text-dim); font-size: 0.875rem; }
.store-georef-slider { width: 100%; accent-color: var(--amber-bright); }
.store-georef-credit, .store-georef-caption { font-size: 0.8125rem; }

/* Раздел, в котором находишься, подсвечен в шапке. */
.desktop-nav a[aria-current="page"] { color: var(--text); }
.desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }
.mobile-menu a[aria-current="page"] { color: var(--amber-glow); }

/* ═══ Карточки разделов со скриншотами и пустота перед «Условиями» ═══ */
.resource-card { gap: 0; padding: 0; overflow: hidden; grid-template-rows: auto 1fr; }
.resource-media { display: block; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.resource-shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; transition: transform 500ms var(--ease); }
.resource-card:hover .resource-shot { transform: scale(1.03); }
.resource-copy { position: relative; display: grid; align-content: start; gap: 10px; padding: 22px 60px 24px 24px; }
.resource-card .resource-copy .icon { top: 24px; right: 22px; }
@media (max-width: 479px) {
  .resource-card { padding: 0; }
  .resource-copy { padding: 18px 54px 20px 18px; }
  .resource-card .resource-copy .icon { top: 20px; right: 18px; }
}
/* Между разделами Академии и «Условиями» было два полных отступа секций, а заголовок
   «Сколько стоит» стоял по центру высокой колонки карточек — вместе почти экран пустоты. */
#more { padding-bottom: clamp(56px, 6vw, 88px); }
#pricing { padding-top: clamp(48px, 6vw, 88px); }
@media (min-width: 1024px) { .pricing-layout { align-items: start; } }

/*
 * Фраза с живого сайта, которую владелец хотел сохранить, — шапка финального блока:
 * стоит у верхней кромки, а штанга прибора выходит прямо из-под неё (просьба 15.10).
 * Сцена стоит по своему месту в потоке (top: auto), поэтому сама встаёт под фразой,
 * сколько бы строк та ни заняла; её прозрачный верх заходит под текст на --tuck.
 */
.start-section {
  --scene-h: min(253.5px, 32.5vw); /* высота сцены: ширина min(780px, 100%) × 208/640 */
  --tuck: 26px;
  padding-top: clamp(28px, 4vw, 48px);
}
@media (max-width: 599px) {
  .start-section { --scene-h: 48.75vw; } /* на телефоне рисунок в полтора раза шире кадра */
}
.start-head { width: 100%; }
.start-section .start-head .detector-scene { top: auto; margin-top: calc(-1 * var(--tuck)); }
/* Текст призыва начинается под землёй сцены, как и раньше, когда фраза стояла над ним. */
.start-section .start-copy { padding-top: calc(var(--scene-h) - var(--tuck) + 12px); }
/* На телефоне текст начинается сразу под сценой: катушка доходит до её нижнего края и на
   краю размаха задевала «Скачать приложение», пока сцена стояла по центру (15.10). */
@media (max-width: 599px) {
  .start-section .start-copy { padding-top: calc(var(--scene-h) - var(--tuck) + 4px); }
}

.detector-motto {
  position: relative;
  max-width: none;
  margin: 0 auto;
  text-wrap: balance;
  color: var(--amber-glow);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

/* Заголовок раздела статьи — по мере колонки текста, а не по общему правилу h2 в 15 знаков:
   «Шуберт, РККА, WIG, Messtischblatt…» ломался на четыре строки. */
.article-body h2 { max-width: 26ch; }

/*
 * Маркеры списков в тексте статьи и новости. Общий сброс (ul, ol { list-style: none })
 * снимал их и здесь: шаги «1, 2, 3» и перечни читались сплошными абзацами без номеров.
 * Только у списков из текста — у оформленных блоков (с классом) свои значки.
 */
.article-body ul:not([class]), .news-body ul:not([class]) { list-style: disc; }
.article-body ol:not([class]), .news-body ol:not([class]) { list-style: decimal; }
.article-body :is(ul, ol):not([class]) > li::marker,
.news-body :is(ul, ol):not([class]) > li::marker { color: var(--amber); }
.article-body ol:not([class]) > li::marker,
.news-body ol:not([class]) > li::marker { font-family: var(--font-mono); font-size: 0.9em; }

/* Врезка из нескольких строк — заголовок, список, абзацы — обычным весом, как текст статьи. */
.article-body .article-callout { font-weight: 400; }
.article-callout > * { margin-block: 0; }
.article-callout > * + * { margin-top: 0.75em; }
.article-callout-title {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}

/* ═══ Уведомление о куки (consent.js) ═══════════════════════════════
   На телефоне — полоса над нижним краем, с 640px — карточка в левом нижнем углу:
   справа на широких экранах идёт запись трека. */
.consent {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 70;
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  color: var(--text-body);
  font-size: 0.875rem;
  line-height: 1.5;
}
.consent-text { margin: 0; }
.consent-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.consent .consent-accept { min-height: 44px; padding: 0 22px; font-size: 0.9375rem; }
@media (min-width: 640px) {
  .consent { left: 24px; right: auto; bottom: 24px; max-width: 420px; }
}
.motion .consent { opacity: 0; transform: translateY(8px); transition: opacity 260ms var(--ease), transform 260ms var(--ease); }
.motion .consent.is-visible { opacity: 1; transform: none; }

/* Автор и лицензия фото — обязательная часть подписи для CC BY и CC BY-SA, но тише её текста. */
.figure-credit { font-size: 0.8125rem; }
.figure-credit a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
.figure-credit a:hover { color: var(--text-dim); }

/* ═══ Страницы на два языка: политика и 404 (service.js) ═══════════════
   Неактивный язык прячет атрибут hidden; у бейджей и ссылок свой display, поэтому — !important. */
[data-lang-text][hidden], [data-doc][hidden] { display: none !important; }

.doc-lang { display: inline-flex; gap: 4px; margin-top: 26px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.doc-lang a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 0.9375rem;
  font-weight: 600;
}
.doc-lang a:hover { color: var(--text); }
.doc-lang a[aria-current] { background: var(--amber); color: var(--on-amber); }

.legal-body { max-width: 46rem; }
.legal-body h2 { max-width: none; font-size: clamp(1.25rem, 2vw, 1.5rem); }
.legal-body h3 { font-size: 1.125rem; }
.legal-meta { color: var(--text-faint); font-size: 0.875rem; }

.not-found-inner { display: grid; justify-items: center; text-align: center; }
.not-found-inner h1 { max-width: 18ch; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.08; }
.not-found-inner .eyebrow { justify-content: center; }
.not-found-inner .detector-scene { margin-top: 18px; }
.not-found-inner .lead { margin-inline: auto; }
.not-found-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  margin: 22px 0 30px;
  padding: 0;
  list-style: none;
}
.not-found-inner .play-badge img { width: auto; height: 56px; }
.not-found-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; }
.not-found-actions .play-badge img { height: 52px; }

/* ═══ «День в истории» в ленте новостей (facts.js) ═══════════════════
   Листок отрывного календаря справа от заголовка ленты (на телефоне — под ним),
   листание по дням и календарь месяца: дни с фактом подсвечены, без факта — приглушены. */
@media (min-width: 1000px) {
  /* до 420 px: шапка листка «День в истории ← Календарь →» помещается в одну строку */
  .page-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); gap: 56px; align-items: end; }
}
.fact-sheet {
  position: relative;
  margin-top: 32px;
  padding: 30px 24px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: var(--shadow-float);
}
@media (min-width: 1000px) { .fact-sheet { margin-top: 0; } }
/* корешок листка: ряд проколов по верхнему краю */
.fact-sheet::before {
  content: "";
  position: absolute;
  left: 20px; right: 20px; top: 12px;
  height: 6px;
  background: radial-gradient(circle at 3px 3px, var(--bg) 2.2px, transparent 2.6px) 0 0 / 15px 6px repeat-x;
}
.fact-sheet-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; }
.fact-sheet-label {
  margin: 0;
  white-space: nowrap;
  color: var(--amber-bright);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.fact-nav { display: flex; align-items: center; gap: 6px; }
.fact-back .icon { transform: rotate(180deg); }
.fact-calendar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: none;
  color: var(--text-dim);
  font-size: 0.8125rem;
  font-weight: 600;
}
.fact-calendar-toggle:hover { color: var(--text); }
.fact-calendar-toggle[aria-expanded="true"] { border-color: var(--amber-line); color: var(--amber-glow); }
.fact-nav button:disabled { opacity: 0.35; cursor: default; }
.fact-sheet-date { display: flex; align-items: flex-end; gap: 14px; min-height: 58px; margin: 14px 0 16px; }
.fact-sheet-date b {
  color: var(--amber-bright);
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 0.8;
}
.fact-sheet-date > span {
  padding-bottom: 4px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
}
.fact-sheet-text { min-height: 8em; margin: 0; color: var(--text); font-size: 1.0625rem; line-height: 1.6; outline: none; }
.fact-sheet-note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--text-faint); font-size: 0.8125rem; }
/* пока факт грузится — заготовка того же размера, шапка не прыгает */
.fact-sheet.is-loading .fact-sheet-date,
.fact-sheet.is-loading .fact-sheet-text {
  border-radius: var(--radius-card);
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.03) 30%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0.03) 70%) 0 0 / 220% 100%;
}
.motion .fact-sheet.is-loading .fact-sheet-date,
.motion .fact-sheet.is-loading .fact-sheet-text { animation: photo-wait 1.3s linear infinite; }
.fact-sheet.is-failed .fact-sheet-date { display: none; }
.fact-sheet.is-failed .fact-sheet-text { min-height: 0; color: var(--text-dim); }

/* Календарь всплывает поверх даты и текста листка, сразу под его шапкой: открытый, он не
   раздвигает карточку, не сдвигает заголовок ленты рядом и не закрывает кнопки листания. */
.fact-body { position: relative; }
.fact-calendar {
  position: absolute;
  left: -10px;
  right: -10px;
  top: 10px;
  z-index: 3;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--bg-alt);
  box-shadow: var(--shadow-float);
}
.fact-month { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.fact-month-title { margin: 0; color: var(--text); font-weight: 600; }
.fact-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.fact-weekday { padding: 4px 0; color: var(--text-faint); font-size: 0.6875rem; text-transform: uppercase; }
.fact-day {
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.1);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}
.fact-day:hover:not(:disabled) { border-color: var(--amber-line); }
.fact-day:disabled { background: none; color: var(--text-faint); opacity: 0.45; cursor: default; }
.fact-day.is-today { border-color: var(--amber-line); }
.fact-day[aria-pressed="true"] { background: var(--amber); color: var(--on-amber); }