/* ============================================================
   A.L.E.X. — РАМКА-МАНИФЕСТ БРЕНДА (задача 1204, блок I).
   Решение владельца 27.08.2026: под хиро «О A.L.E.X.» — рамка с
   тонкой янтарно-золотой линией на графите и воздухом внутри;
   сверху локап «A.L.E.X.» (с точкой), снизу позывной
   «Ask. Listen. Evolve. X.».
   ------------------------------------------------------------
   Подключается ТОЛЬКО трём страницам, где узел «О A.L.E.X.»
   действительно есть (/alex/ и узлы зеркал /en/, /zh/) — через
   extra_css. Остальные 61 страница его не грузят.

   ПРАВИЛО ФАЙЛА — как у style2.css, hub.css и metall.css: ЦВЕТА
   ТОЛЬКО ТОКЕНАМИ, значения ровно в трёх блоках §1.

   СВЕТЛАЯ ТЕМА — слово владельца: «графит-золото на слоновой
   кости». Поэтому в светлой теме поле рамки не белое, а тон
   слоновой кости, линия — латунь витрины, буквы — графит.
   ============================================================ */

/* ---------- 1. Токены ---------- */

:root {
  --rmk-pole:   #F6F3EA;                    /* слоновая кость */
  --rmk-liniya: rgba(184, 134, 11, .55);    /* латунь витрины */
  --rmk-bukvy:  #16181C;                    /* графит */
  --rmk-tihie:  #5C6470;
  --rmk-blik:   rgba(184, 134, 11, .10);
}

[data-theme="dark"] {
  --rmk-pole:   #12161B;                    /* графит поверхности */
  --rmk-liniya: rgba(212, 175, 55, .60);    /* янтарное золото */
  --rmk-bukvy:  #ECEFF3;
  --rmk-tihie:  #9AA5B1;
  --rmk-blik:   rgba(212, 175, 55, .12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --rmk-pole:   #12161B;
    --rmk-liniya: rgba(212, 175, 55, .60);
    --rmk-bukvy:  #ECEFF3;
    --rmk-tihie:  #9AA5B1;
    --rmk-blik:   rgba(212, 175, 55, .12);
  }
}

/* ---------- 2. Расшифровка над рамкой ---------- */

.mnf-rasshifrovka {
  margin: 0 auto 18px;
  max-width: 62ch;
  text-align: center;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rmk-tihie, currentColor);
}

/* ---------- 3. Сама рамка ----------
   Локап и позывной сидят НА линии, разрывая её: это и есть приём
   «рамка с надписью на канте». Разрыв делает не картинка, а фон
   подписи — тот же тон поля, поэтому он верен в обеих темах и не
   зависит от того, что лежит под секцией (а под ней теперь
   металл-канон). */

/* 🔴 ПОДПИСЬ НА КАНТЕ ОБЯЗАНА ЗАБРОНИРОВАТЬ МЕСТО ПОД СОБОЙ (задача 1640).
   Локап и позывной вынуты из потока (`position: absolute`) и свисают наружу
   ровно на половину своей высоты. Пока рамка стояла с `margin: 0`, этой
   половины в потоке не существовало вовсе: сверху локап налезал на
   расшифровку, снизу позывной ложился на первую строку следующей колонки —
   замер 02.09 дал −7 px на английском зеркале и −8 px на китайском, на всех
   ширинах от 768 до 1920 и в обеих темах. Русской странице везло: под рамкой
   там начиналась новая секция со своим отступом, и дефект был не виден.

   ПОЧЕМУ ВЫЛЕТ СЧИТАЕТСЯ ИЗ КЕГЛЯ, А НЕ ЗАДАН ЧИСЛОМ. Кегль подписей текучий
   (clamp), значит текучей обязана быть и бронь: жёсткие 20 px разъехались бы
   на первой же смене шрифта, и чинить пришлось бы «на одной ширине». Строка
   подписи высотой примерно 1,55 кегля, свисает половина — отсюда 0,8 кегля,
   плюс воздух, чтобы буквы не касались соседа.

   ПОЛЯ НЕ СКЛАДЫВАЮТСЯ С СОСЕДЯМИ, А ПОБЕЖДАЮТ ИХ: соседние вертикальные
   поля в потоке схлопываются в максимум, поэтому бронь задана здесь целиком
   и ни на что не рассчитывает — 18 px расшифровки её не уменьшат. */
.mnf-ramka {
  --mnf-kegl-lokap: clamp(18px, 3.2vw, 26px);
  --mnf-kegl-pozyvnoy: clamp(14px, 2vw, 16px);
  --mnf-vylet-verh: calc(var(--mnf-kegl-lokap) * 0.8 + 16px);
  --mnf-vylet-niz: calc(var(--mnf-kegl-pozyvnoy) * 0.8 + 16px);

  position: relative;
  max-width: 900px;
  margin: var(--mnf-vylet-verh) auto var(--mnf-vylet-niz);
  padding: clamp(44px, 7vw, 76px) clamp(22px, 5vw, 60px);
  background: var(--rmk-pole, transparent);
  background-image: radial-gradient(120% 140% at 84% 0%,
                    var(--rmk-blik) 0%, transparent 58%);
  border: 1px solid var(--rmk-liniya, currentColor);
  border-radius: var(--r-card, 16px);
}

.mnf-lokap,
.mnf-pozyvnoy {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 16px;
  background: var(--rmk-pole, transparent);
  white-space: nowrap;
  color: var(--rmk-bukvy, inherit);
}

.mnf-lokap {
  top: 0;
  transform: translate(-50%, -50%);
  font-size: var(--mnf-kegl-lokap);
  font-weight: 600;
  letter-spacing: .30em;
  /* Локап набран с точками, как имя бренда: «A.L.E.X.» — с точкой
     после X. Разрядка съедает правый край последней точки, поэтому
     отступ справа чуть больше — иначе точка липнет к линии. */
  padding-right: 22px;
}

/* Нижняя граница кегля поднята с 13 px до 14 px (задача 1640, приёмка П6):
   на 320…414 позывной набирался 13 px, то есть мельче порога читаемости, —
   и это был не выбор шкалы, а провал clamp'а: на широком экране тот же
   позывной уже 15,4 px. Верх и середина шкалы не тронуты, облик прежний. */
.mnf-pozyvnoy {
  bottom: 0;
  transform: translate(-50%, 50%);
  font-size: var(--mnf-kegl-pozyvnoy);
  letter-spacing: .16em;
  color: var(--rmk-tihie, inherit);
}

.mnf-text {
  margin: 0;
  text-align: center;
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  line-height: 1.5;
  color: var(--rmk-bukvy, inherit);
}

/* Мобайл: позывной длиннее ширины экрана на 390 быть не должен —
   при нехватке места он уходит внутрь рамки строкой, а не режется
   краем. Проверено замером 390 px. */
@media (max-width: 460px) {
  /* Позывной ушёл ВНУТРЬ рамки — значит снизу он больше ничего не свисает, и
     бронь под него превращается в обычный воздух до следующего блока. */
  .mnf-ramka { --mnf-vylet-niz: 26px; }
  .mnf-pozyvnoy {
    position: static;
    display: block;
    transform: none;
    margin-top: 22px;
    padding: 0;
    text-align: center;
    white-space: normal;
    background: transparent;
  }
}