/* Атлас для веба (К-26): токены и роли текста 1:1 с приложением.
   Источник: ZhivayaKarta/DesignSystem/Atlas/Atlas.swift (палитра) и
   AtlasText.swift (роли). Правишь там — правь здесь в том же заходе.

   Интерлиньяж как в SwiftUI: строка = max(цель Figma, естественная высота
   шрифта); лишняя половина интерлиньяжа над первой и под последней строкой
   срезается отрицательным margin (--trim), чтобы блоки стояли так же, как
   Text в стеках приложения. Естественные высоты (hhea): PT Serif 1.325,
   Old Standard 1.236, Inter 1.21 от кегля. */

:root {
  color-scheme: dark;
  --ink: #0A0D13;
  --card: rgba(15, 16, 19, .62);
  --plate: rgba(15, 16, 19, .85);
  --brass: #C2A06A;
  --champagne: #E6D3A7;
  --cinnabar: #B8402E;
  --mist: #98A0B4;
  --faint: #4A5470;
  --text-light: #F2EFE6;
  --read-text: #E8E3D6;
  --cinnabar-text: #D9644F;
  --line: rgba(194, 160, 106, .32);
  --hair: rgba(152, 160, 180, .14);
  --metal-top: #CCA366;
  --metal-bottom: #856338;
  --serif: 'PT Serif', Georgia, 'Times New Roman', serif;
  --caption-serif: 'PT Serif Caption', 'PT Serif', Georgia, serif;
  --display: 'Old Standard TT', 'PT Serif', Georgia, serif;
  --grotesk: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--text-light);
  font-family: var(--serif); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-kerning: normal; overflow-x: hidden;
}
a { color: inherit; }
img { display: block; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nb { white-space: nowrap; }

/* Бумага раздела: чернила + гравюра профиля на 50 %, как AtlasBackground */
.paper::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url(/static/img/ui/paper_profile.webp) center / cover no-repeat;
  opacity: .5;
}

/* ── Роли текста (AtlasText) ─────────────────────────────────────── */
.t-display   { font: 400 34px/42.02px var(--display); --trim: 0px; }
.t-title     { font: 400 30px/37.08px var(--display); letter-spacing: 1.8px; text-transform: uppercase; --trim: 0px; }
.t-screen    { font: 400 26px/32.14px var(--display); --trim: 0px; }
.t-affiche   { font: 400 22px/28px var(--display); --trim: -.4px; }
.t-quote     { font: italic 400 21px/28px var(--display); --trim: -1.02px; }
.t-lead      { font: italic 400 18px/26px var(--serif); --trim: -1.08px; }
.t-reading   { font: 400 17px/26px var(--serif); --trim: -1.74px; }
.t-card      { font: 400 17px/22.53px var(--serif); --trim: 0px; }
.t-body      { font: 400 16px/24px var(--serif); --trim: -1.4px; }
.t-body-i    { font: italic 400 16px/24px var(--serif); --trim: -1.4px; }
.t-compact   { font: 400 15px/22px var(--serif); --trim: -1.06px; }
.t-chip      { font: 400 14px/18.55px var(--serif); --trim: 0px; }
.t-link      { font: italic 400 14px/18.55px var(--serif); --trim: 0px; }
.t-caption   { font: italic 400 13px/18px var(--caption-serif); letter-spacing: .195px; --trim: -.39px; }
.t-footnote  { font: italic 400 12px/16px var(--caption-serif); letter-spacing: .18px; --trim: -.05px; }
.t-kick      { font: 500 11px/14px var(--grotesk); letter-spacing: 1.32px; text-transform: uppercase; --trim: -.34px; }
.t-kicklabel { font: 500 10px/12.1px var(--grotesk); letter-spacing: 1.2px; text-transform: uppercase; --trim: 0px; }
.t-button    { font: 600 13px/16px var(--grotesk); letter-spacing: 1.3px; text-transform: uppercase; --trim: -.13px; }
.t-button-c  { font: 600 11px/14px var(--grotesk); letter-spacing: 1.1px; text-transform: uppercase; --trim: -.34px; }
.t-data      { font: 500 12px/16px var(--grotesk); font-variant-numeric: tabular-nums; --trim: -.74px; }
.tr { margin-block: var(--trim); }
/* Old Standard: у шрифта межстрочный зазор (lineGap .236em). UIKit кладёт
   его НАД строкой, браузер — поровну сверху и снизу; опускаем глифы на
   половину зазора; у АФИШИ/ЦИТАТЫ (интерлиньяж больше естественного) — наоборот,
   чуть вверх. Цифры подобраны сверкой с симулятором 29.09 (±0,7 pt). */
.t-display, .t-title, .t-screen { position: relative; top: .11em; }
.t-affiche, .t-quote { position: relative; top: -.085em; }

.c-brass { color: var(--brass); }
.c-champ { color: var(--champagne); }
.c-mist { color: var(--mist); }
.c-light { color: var(--text-light); }
.c-read { color: var(--read-text); }
.c-cinn { color: var(--cinnabar-text); }
.center { text-align: center; }

/* ── Кирпичи ─────────────────────────────────────────────────────── */
.hairline { height: 1px; background: rgba(194, 160, 106, var(--op, .14)); flex: none; }
/* Рамка — тенью внутрь, не border: в SwiftUI обводка — оверлей и места не
   занимает (border добавлял плите 1,5 pt высоты — сверка 29.09) */
.plate { background: var(--plate); box-shadow: inset 0 0 0 .75px var(--plate-edge, var(--line)); border-radius: 14px; }

/* Шапка секции (AtlasSectionHeader, градиент): черты по бокам */
.sh { display: flex; align-items: center; gap: 12px; }
.sh::before, .sh::after { content: ""; flex: 1 1 0; height: 1px; }
.sh::before { background: linear-gradient(90deg, transparent, rgba(194, 160, 106, .55)); }
.sh::after { background: linear-gradient(90deg, rgba(194, 160, 106, .55), transparent); }
.sh > span { flex: none; color: var(--champagne); white-space: nowrap; }

/* Знак раскрытия — латунное кольцо с шевроном (AtlasDisclosureGlyph) */
.ring {
  --r: 26px; width: var(--r); height: var(--r); flex: none; border-radius: 50%;
  background: rgba(194, 160, 106, .08); box-shadow: inset 0 0 0 1px var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .2s ease;
}
.ring::after {
  content: ""; width: calc(var(--r) * .54); height: calc(var(--r) * .54); background: var(--brass);
  -webkit-mask: url(/static/img/ui/chevron_down.webp) center / contain no-repeat;
  mask: url(/static/img/ui/chevron_down.webp) center / contain no-repeat;
  transition: transform .2s ease;
}
.ring.r18 { --r: 18px; }
.open > .ring::after, [open] > summary .ring::after, .ring.is-open::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) {
  .ring.pulse { animation: ringHint 1.1s ease-in-out 2 both; animation-delay: var(--d, 0s); }
}
@keyframes ringHint {
  0%, 100% { transform: scale(1); background: rgba(194, 160, 106, .08); box-shadow: inset 0 0 0 1px var(--line); }
  50% { transform: scale(1.12); background: rgba(194, 160, 106, .22); box-shadow: inset 0 0 0 1px var(--brass); }
}

details > summary { list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
details > summary::-webkit-details-marker { display: none; }
summary:focus-visible, a:focus-visible, button:focus-visible, label:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; }

/* Кнопки-пилюли (AtlasCapsuleButton, h48) */
.capsule {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 48px;
  padding: 0 20px; border-radius: 999px; text-decoration: none; white-space: nowrap;
}
.capsule.metal {
  color: var(--ink); background: linear-gradient(180deg, var(--metal-top), var(--metal-bottom));
  box-shadow: 0 0 14px rgba(194, 160, 106, .30);
}
.capsule.quiet { color: var(--champagne); background: rgba(10, 13, 19, .62); box-shadow: inset 0 0 0 .75px rgba(194, 160, 106, .55); }
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 18px; border-radius: 999px;
  color: var(--champagne); box-shadow: inset 0 0 0 .75px rgba(194, 160, 106, .55); text-decoration: none;
}

/* Бейдж App Store: официальный рисунок (static/img/appstore/<язык>.svg),
   пока его нет / нет номера приложения — тихая капсула «Скоро в App Store» */
.store { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.store img { height: 48px; width: auto; }
.store .soon { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px;
  color: var(--champagne); box-shadow: inset 0 0 0 .75px rgba(194, 160, 106, .55); }