/*
 * Временный лендинг NUTREVA.
 *
 * Сознательно без Tailwind и без сборки: это отдельная статическая страница,
 * которая живёт до открытия магазина. Файл, лежащий на сервере, совпадает
 * с тем, что открывается на компьютере, — собирать нечего и подменить нечем.
 *
 * Цвета и шрифты — те же токены, что в магазине (src/app/globals.css).
 * Если они там поменяются, поменять и здесь: это две отдельные копии,
 * и связать их без сборки нельзя.
 *
 * Страница — один экран по слайду «Big Idea» из презентации владельца
 * NUTREVA_brand_platform_v2_visual.pdf (решение 04.11.2026): снимок
 * во весь экран, сверху строка «логотип · Скоро в продаже · 12 / 26»,
 * внизу слева почта и реквизиты. Числа (поля, кегли, разрядка,
 * прозрачность) вынуты из самого PDF, слайд 1920 точек шириной.
 * До этого была светлая панель с анимированной капсулой по образцу
 * seed.com — она в истории, коммит 09faf7f.
 */

/* ============================== Шрифты ============================== */

/*
 * Bounded из брендбука — заголовки. Переменный шрифт, одна насыщенность
 * от 200 до 900 в одном файле.
 */
@font-face {
  font-family: "Bounded";
  src: url("fonts/bounded.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

/*
 * Inter — основной текст. Два файла: кириллица и латиница. unicode-range
 * говорит браузеру, какой из них качать: на русской странице латинский
 * файл (48 КБ) не скачивается вовсе, пока не встретится латинская буква.
 */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-cyrillic.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================== Токены ============================== */

:root {
  /* Основной цвет текста — приглушённый фирменный голубой, 4,6:1 на светлом */
  --ink: #547283;
  /* Тёмно-синий, Pantone 533 C — для текста на акцентном фоне */
  --ink-deep: #1f2a44;
  /* Акцентный синий — логотип, Pantone 5425 C */
  --accent: #7a99ac;
  /* Светлый фон-акцент, Pantone 656 C */
  --accent-soft: #dde5ed;
  /* Тёплый тёмный, вторичный, Pantone 411 C */
  --warm: #5e514d;
  /* Тёплый серый, Warm Gray 1 C */
  --warm-soft: #d7d2cb;
  /*
   * Основной светлый фон из брендбука. В магазине он же лежит
   * под именем --color-surface.
   *
   * Раньше здесь стоял #f4f3f2 — «нейтральный фон страницы». Он
   * единственный из всех цветов проекта не имеет ссылки на брендбук
   * и, судя по всему, попал в проект не оттуда. Заметить это можно
   * только рядом с голубым: #f4f3f2 тёплый, в бежевый, а фирменный
   * светлый холодный — это тот же Pantone 656 C, сильно разбавленный.
   * В связке «голубой · светлый · голубой» разнородность видна.
   */
  --surface: #f0f4f7;

  /*
   * Тон краёв экрана на телефоне — снимок с затемнениями, как он
   * лежит на 390×844 (кадр 75%, правая треть), усреднён по верхним
   * и нижним 6 точкам командой: сверху #434952, снизу #353f4d.
   * Та же команда для прежнего кадра (50%) дала #595d64 / #4b515c —
   * ровно то, что стояло, так что счёт сверен. Взят верхний: им залита
   * сама страница, а Safari на iOS 26 тем же цветом заливает место
   * под обеими своими панелями, и сверху, и снизу; к нему же снимок
   * плавно уходит у краёв экрана. Тот же цвет — в theme-color
   * (index.html) для прежних версий Safari. Поменяется снимок или
   * затемнения — пересчитать.
   */
  --edge-top: #434952;

  --font-heading: "Bounded", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, sans-serif;

  /* Ширина содержимого. Та же, что у шапки магазина (src/lib/layout.ts) */
  --wide: 1600px;
  /* Боковой отступ. На телефоне 24 точки, как в магазине */
  --pad: 1.5rem;

  /*
   * Текст на снимке — светлый фирменный #f0f4f7, как на слайде.
   * Строка сверху на слайде — с прозрачностью 82%, логотип — 90%.
   */
  --on-photo: #f0f4f7;
  --on-photo-soft: rgb(240 244 247 / 0.82);
  /* Тёмно-синий затемнения — из функции заливки слайда */
  --shade: 19 26 42;
}

@media (min-width: 640px) {
  :root {
    --pad: 2rem;
  }
}

/* ============================== Основа ============================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  /*
   * Фон страницы — снимок с затемнениями — лежит на холсте, то есть
   * на body, а не отдельным слоем (просьба владельца 04.11.2026:
   * на телефоне сверху и снизу были полосы).
   *
   * Почему не отдельный неподвижный слой во весь экран: Safari
   * на iOS 26, увидев элемент с position: fixed у края экрана,
   * берёт его цвет и заливает им сплошь место под своими панелями —
   * снимок обрывался у строки состояния и над строкой адреса
   * (снимок экрана владельца). Холст Safari рисует под панелями
   * сам, вместе со снимком.
   *
   * Каждый слой размером в экран при свёрнутых панелях (100lvh),
   * а не в страницу: страница высотой в 100svh кончается над
   * строкой адреса, и снимок по ней кончался бы там же.
   * Снимок — «cover» по этому экрану, посчитанный вручную:
   * 1.791 — пропорция снимка, 2400×1340 (backdrop-1*.webp, обе копии).
   * Пересобрали снимок в другой пропорции — поменять число.
   *
   * Цвет под снимком — тон верха снимка, и задан он отдельно:
   * его видно при оттяжке пальцем за край и пока снимок грузится.
   * Только на body, не на html — иначе фон перестанет быть фоном
   * холста и не уйдёт под панели.
   */
  --screen-h: 100vh;
  --backdrop-w: max(100vw, var(--screen-h) * 1.791);
  background-color: var(--edge-top);
  /*
   * Первые два слоя — только на телефоне: снимок у верхнего и нижнего
   * края экрана плавно уходит в сплошной тон краёв. Safari на iOS 26
   * всё равно заливает место под своими панелями сплошным цветом
   * страницы (проверено на iPhone владельца дважды: и с отдельным
   * слоем, и со снимком на холсте), — пусть шва между заливкой
   * и снимком не будет. Нижний — у края экрана при развёрнутых
   * панелях (100svh): ниже Safari рисует свою заливку.
   */
  background-image:
    linear-gradient(180deg, var(--edge-top) 0, rgb(67 73 82 / 0) 100%),
    /*
     * Низ тоже уходит в тон верха, а не низа: Safari заливает обе
     * панели одним цветом — цветом фона страницы (--edge-top).
     * С тоном низа на стыке оставалась ступенька (iPhone владельца).
     */
    linear-gradient(0deg, var(--edge-top) 0, rgb(67 73 82 / 0) 100%),
    linear-gradient(180deg,
      rgb(var(--shade) / 0.45) 0,
      rgb(var(--shade) / 0) 9rem),
    linear-gradient(0deg,
      rgb(var(--shade) / 0.55) 0,
      rgb(var(--shade) / 0) 22rem),
    linear-gradient(90deg,
      rgb(var(--shade) / 0.62) 0%,
      rgb(var(--shade) / 0.30) 45%,
      rgb(var(--shade) / 0) 70%),
    url("backdrop-1-narrow.webp");
  background-repeat: no-repeat;
  background-size:
    100% 4rem,
    100% 4rem,
    100% var(--screen-h),
    100% var(--screen-h),
    100% var(--screen-h),
    var(--backdrop-w) auto;
  /*
   * Снимок на телефоне сдвинут вправо (75%): в кадре правая треть
   * с вертикальным лучом за панелью — выбор владельца 04.11.2026.
   * Центр (50%) был светлее, правый край (100%) — тёмный и пустой,
   * тёмный текст панели на нём не читался.
   */
  background-position:
    0 0,
    0 calc(100vh - 4rem),
    0 0,
    0 0,
    0 0,
    75% calc((var(--screen-h) - var(--backdrop-w) / 1.791) / 2);
  color: var(--on-photo);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /*
   * Страховка от горизонтальной прокрутки (CLAUDE.md, п. 3.4). Ни один
   * блок не должен уезжать вбок, но если однажды уедет — покупатель
   * этого не увидит и страница не «поедет» под пальцем.
   */
  overflow-x: hidden;
}

@supports (height: 100lvh) {
  body {
    --screen-h: 100lvh;
    background-position:
      0 0,
      0 calc(100svh - 4rem),
      0 0,
      0 0,
      0 0,
      75% calc((var(--screen-h) - var(--backdrop-w) / 1.791) / 2);
  }
}

@media (min-width: 640px) {
  body {
    background-image:
      linear-gradient(180deg,
        rgb(var(--shade) / 0.45) 0,
        rgb(var(--shade) / 0) 9rem),
      linear-gradient(0deg,
        rgb(var(--shade) / 0.55) 0,
        rgb(var(--shade) / 0) 22rem),
      linear-gradient(90deg,
        rgb(var(--shade) / 0.62) 0%,
        rgb(var(--shade) / 0.30) 45%,
        rgb(var(--shade) / 0) 70%),
      url("backdrop-1.webp");
    background-size:
      100% var(--screen-h),
      100% var(--screen-h),
      100% var(--screen-h),
      var(--backdrop-w) auto;
    background-position:
      0 0,
      0 0,
      0 0,
      50% calc((var(--screen-h) - var(--backdrop-w) / 1.791) / 2);
  }
}

/*
 * Разрешаем длинным словам переноситься. На узком экране адрес электронной
 * почты иначе распирает страницу вбок.
 */
p,
h1,
h2,
h3,
a {
  overflow-wrap: break-word;
}

img,
svg {
  max-width: 100%;
}

a {
  color: inherit;
}

/* ============================== Страница ============================== */

/*
 * Фон — снимок света на голубой стене со слайда (npm run landing:backdrop).
 *
 * Затемнение слева — то же, что на слайде: 62% у края, 30% на 45%
 * ширины, ноль к 70%; числа из функции заливки в PDF. Сверху и снизу
 * добавлены свои полосы, которых на слайде нет: середина снимка
 * наверху почти белая (среднее около #c8c7c2, замерено командой
 * по исходнику), и светлая строка на ней не читалась бы. Внизу на них
 * стоят почта и реквизиты.
 */
.page {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  column-gap: 1.5rem;
  min-height: 100svh;
  /*
   * Поля плюс безопасные зоны экрана (вырез, полоса «домой»): со
   * viewport-fit=cover страница заходит под них, а текст — нет.
   */
  padding:
    max(1.5rem, env(safe-area-inset-top))
    max(var(--pad), env(safe-area-inset-right))
    max(1.5rem, env(safe-area-inset-bottom))
    max(var(--pad), env(safe-area-inset-left));
}

/* Поля слайда: 96 по бокам и около 60 сверху на 1920 — 5% и 3% ширины */
@media (min-width: 640px) {
  .page {
    padding:
      max(clamp(2rem, 3.2vw, 4rem), env(safe-area-inset-top))
      max(clamp(2rem, 5vw, 6rem), env(safe-area-inset-right))
      max(clamp(2rem, 3.2vw, 4rem), env(safe-area-inset-bottom))
      max(clamp(2rem, 5vw, 6rem), env(safe-area-inset-left));
  }
}

/* ─────────────── Строка сверху ─────────────── */

/*
 * Как на слайде: слева логотип, посередине раздел, справа счёт.
 * Подписи — Inter Medium прописными с широкой разрядкой: на слайде
 * 14 точек при ширине 1920, разрядка около 0,35 кегля.
 *
 * На телефоне три пункта в строку не помещаются (320 точек): логотип
 * и «12 / 26» остаются по краям, «Скоро в продаже» уходит строкой ниже.
 */
.topbar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "logo  count"
    "title title";
  align-items: center;
  row-gap: 2.5rem;
}

@media (min-width: 900px) {
  .topbar {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "logo title count";
  }
}

.label {
  margin: 0;
  font-size: var(--label-size);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--on-photo-soft);
}

/*
 * Кегль подписей сверху; по нему же логотип. 13 и 15 — на точку
 * крупнее слайда (было 12 и 14), просьба владельца 04.11.2026.
 */
.page {
  --label-size: 13px;
}

@media (min-width: 1440px) {
  .page {
    --label-size: 15px;
  }
}

/*
 * Логотип — наша надпись NUTREVA (та же, что в шапке магазина,
 * src/components/brand/Wordmark.tsx), прямо в разметке.
 *
 * Высота букв — та же, что у прописных в подписях рядом (просьба
 * владельца 04.11.2026): у Inter прописная — 0,727 кегля (1490
 * из 2048 единиц шрифта), а буквы надписи занимают её картинку
 * по высоте целиком. Поэтому высота картинки — 0,727 × кегль
 * подписей, ширина выводится из пропорции. Поменяется кегль
 * подписей — логотип пойдёт за ним сам.
 */
.logo {
  grid-area: logo;
  display: block;
  width: auto;
  height: calc(var(--label-size) * 0.727);
  color: var(--on-photo);
  opacity: 0.9;
}

/*
 * «Скоро в продаже» — главный заголовок страницы для поиска и экранного
 * диктора, хоть и выглядит подписью, как на слайде.
 */
.topbar__title {
  grid-area: title;
  justify-self: center;
  text-align: center;
}

/* Разрядка добавляется и после последней буквы — компенсируем, чтобы центр не съезжал */
.topbar__title,
.topbar__count {
  margin-right: -0.35em;
}

.topbar__count {
  grid-area: count;
  justify-self: end;
  white-space: nowrap;
}

/*
 * Телефон: «Скоро в продаже» — внизу слева, на месте реквизитов
 * (их на телефоне нет), напротив монограммы (просьба владельца
 * 04.11.2026). Строка сверху для этого «растворяется» в сетке
 * страницы: логотип и «12 / 26» остаются в первом ряду, заголовок
 * уходит в последний. Линия букв заголовка — на одной высоте
 * с низом монограммы (расхождение меньше половины точки).
 * В разметке заголовок по-прежнему в шапке — порядок для поиска
 * и экранного диктора не меняется.
 */
@media (max-width: 639px) {
  .topbar {
    display: contents;
  }

  .logo {
    grid-row: 1;
    grid-column: 1;
    align-self: center;
  }

  .topbar__count {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
  }

  .topbar__title {
    grid-row: 3;
    grid-column: 1;
    align-self: end;
    justify-self: start;
    text-align: left;
    white-space: nowrap;
  }
}


/* ─────────────── Капсула с почтой ─────────────── */

/*
 * Прозрачное белое стекло (просьба владельца 04.11.2026), по центру
 * экрана.
 *
 * Текст тёмно-синий 533 C, а не белый, как остальное на странице:
 * под капсулой снимок светлый (среднее около #9aa1a2, блики до белого —
 * замерено командой по исходнику), и белый на белом стекле дал бы
 * около 2,7 : 1 при норме 4,5. Тёмно-синий на стекле — около 7 : 1.
 * Размытие умеренное: блики снимка под панелью угадываются,
 * но текст не пятнают.
 *
 * Форма — как стеклянная панель блока ViaCap на главной seed.com
 * (просьба владельца 04.11.2026): прямоугольник со скруглением 32,
 * поля до 80 — числа сняты с образца ещё для прежней панели.
 * Сначала была полностью скруглённая капсула, тем же днём заменена.
 *
 * Прозрачность — 8% белого (было 38%, 20%, 12%; просьбы владельца
 * сделать прозрачнее). Тёмно-синий на ней около 6 : 1 по среднему
 * тону снимка под панелью; на самых светлых бликах — больше, на тёмных
 * участках — меньше.
 *
 * На телефоне — во всю ширину, в середине экрана.
 */
.pill {
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: center;
  margin: 2rem 0;
  /*
   * Отступ до букв одинаков со всех сторон (просьба владельца 04.11.2026).
   * Сверху и снизу поле меньше бокового на запас, который добавляют
   * сами строки: над прописными первой строки — пустое место строки,
   * под почтой — её поле в 44 точки (под палец). Вычеты заданы
   * в кеглях текста, поэтому держатся на всех ширинах; сверка —
   * замером букв в браузере.
   */
  --pill-pad: 1.75rem;
  padding:
    calc(var(--pill-pad) - var(--pill-top-extra))
    var(--pill-pad)
    calc(var(--pill-pad) - var(--pill-bottom-extra));
  /*
   * Запас сверху — 0,27 кегля фразы: от верха строки до верха прописных.
   * Запас снизу — 17,7 + 0,215 кегля почты. Оба числа сняты замером
   * в браузере на 320, 1024 и 1440 точках (без вычета было: сверху 64
   * и снизу 82 при 58 по бокам на 1440). Меняете кегль, высоту строки
   * или поле почты — перемерить.
   *
   * Замер до букв 04.11.2026 показал, что снизу от линии букв почты
   * этот запас даёт меньше, чем сверху и по бокам: 47 против 57
   * на 1440, 29 против 36 на 900. Выровненный вариант (постоянный
   * запас 14,5 точки, `v=88`) владелец посмотрел и решил на компьютере
   * вернуть как было. На телефоне выровнено — правило ниже.
   */
  --pill-top-extra: calc(0.27 * clamp(18px, 1.6vw, 28px));
  --pill-bottom-extra: calc(17.7px + 0.215 * clamp(20px, 2.1vw, 36px));
  /* Без обводки — убрана по просьбе владельца 04.11.2026 */
  border-radius: 32px;
  background: rgb(255 255 255 / 0.08);
  box-shadow: 0 24px 60px -30px rgb(var(--shade) / 0.35);
  /*
   * Размытие 6 (было 40, потом 16). Матовой панель делает именно оно,
   * а не заливка: снижение белого с 20% до 12% на глаз почти не изменило
   * вид. Меньше 6 — блики снимка идут под буквами почти как есть.
   */
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  backdrop-filter: blur(6px) saturate(1.1);
  /*
   * Тёмно-синий 533 C. Белый пробовали 04.11.2026 — на светлом снимке
   * под панелью около 2,5–3 : 1, владелец вернул тёмно-синий.
   */
  color: var(--ink-deep);
  /*
   * Всё по центру. На компьютере фраза в одну строку, и разницы
   * не видно; на телефоне она в три строки, и прижатая влево фраза
   * над почтой по центру смотрелась криво (владелец, 04.11.2026).
   */
  text-align: center;
}

/*
 * Телефон: поля до букв под нынешние кегли — фраза 16, почта 22.
 * Замер 04.11.2026 на 390 и 320: сверху до прописных 27,6, снизу
 * до линии букв почты 20,1 при боковом 28 — общая формула выше
 * считана под 18 и 20 и снизу не сходится. Снизу запас — 14,1:
 * от линии букв почты до низа её строки (поле 44 точки под палец).
 * Цель — 28 со всех сторон (просьба владельца 04.11.2026).
 */
@media (max-width: 639px) {
  .pill {
    --pill-top-extra: calc(0.27 * 16px);
    --pill-bottom-extra: 14.1px;
  }
}

/*
 * Телефон и планшет: панель по центру экрана по высоте, как
 * на компьютере, а не посередине между шапкой и реквизитами —
 * реквизиты внизу в четыре-пять строк, и панель съезжала вниз
 * (замечание владельца 04.11.2026). Поля по бокам — те же,
 * что у страницы.
 *
 * Только на экранах от 521 точки в высоту: на более низких
 * (телефон боком) панель наехала бы на шапку или реквизиты,
 * и там она остаётся в общем потоке, как раньше.
 */
@media (max-width: 899px) and (min-height: 521px) {
  .pill {
    grid-area: auto;
    position: absolute;
    top: 50%;
    left: 1.5rem;
    right: 1.5rem;
    margin: 0;
    transform: translateY(-50%);
  }
}

@media (min-width: 640px) and (max-width: 899px) and (min-height: 521px) {
  .pill {
    left: clamp(2rem, 5vw, 6rem);
    right: clamp(2rem, 5vw, 6rem);
  }
}

@media (min-width: 900px) {
  .pill {
    /*
     * Место в сетке снимается: у абсолютного элемента с местом в сетке
     * «50%» отсчитываются от этой ячейки, а не от экрана, и капсула
     * съезжала на 33 точки вниз (замер на 1440×810).
     */
    grid-area: auto;
    /*
     * По центру экрана по обеим осям, ширина — по тексту: первая
     * строка идёт в одну строку (просьба владельца 04.11.2026; до того
     * панель стояла справа, от середины экрана до поля). Самая узкая
     * ширина, где это включается, 900 — там строке нужно около 730
     * точек вместе с полями, а места 810.
     */
    position: absolute;
    top: 50%;
    left: 50%;
    width: max-content;
    max-width: calc(100% - 2 * clamp(2rem, 5vw, 6rem));
    margin: 0;
    transform: translate(-50%, -50%);
    --pill-pad: clamp(2rem, 4vw, 5rem);
  }
}

.lead {
  margin: 0;
  font-size: clamp(18px, 1.6vw, 28px);
  font-weight: 400;
  line-height: 1.3;
}

/* На телефоне — 16 точек вместо 18 (просьба владельца 04.11.2026) */
@media (max-width: 639px) {
  .lead {
    font-size: 16px;
  }
}

@media (min-width: 900px) {
  .lead {
    white-space: nowrap;
  }
}

/* 44 точки — под палец (CLAUDE.md, п. 3.4) */
.contact {
  /*
   * Промежуток от фразы до почты удвоен по просьбе владельца 04.11.2026:
   * между строками было около 15 точек на компьютере и 18 на телефоне,
   * стало около 30 и 36 (замер по строкам текста в браузере).
   */
  margin: 26px 0 0;
  /* По центру панели (просьба владельца 04.11.2026) */
  text-align: center;
}

/*
 * На телефоне промежуток ужат вдвое против удвоенного: 36 точек между
 * строками оказались слишком много для узкой панели (просьба владельца
 * 04.11.2026). Стало около 20 — чуть больше, чем было до удвоения (18).
 */
@media (max-width: 639px) {
  .contact {
    margin-top: 10px;
  }
}

@media (min-width: 900px) {
  .contact {
    margin-top: 23px;
  }
}

.contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: clamp(20px, 2.1vw, 36px);
  /* Жирный — просьба владельца 04.11.2026 (был тонкий, 300) */
  font-weight: 600;
  /* Без подчёркивания — просьба владельца 04.11.2026 */
  text-decoration: none;
}

/* На телефоне — 22 точки (просьба владельца 04.11.2026; 24 — крупно) */
@media (max-width: 639px) {
  .contact a {
    font-size: 22px;
  }
}

/* ─────────────── Низ: реквизиты ─────────────── */

/*
 * Реквизиты прижаты к нижнему полю — иначе их поднимала соседняя
 * монограмма, она выше.
 */
.bottom {
  grid-row: 3;
  grid-column: 1;
  align-self: end;
  max-width: 40rem;
}

/*
 * Реквизиты ООО «Прайм» — обязательные сведения (CLAUDE.md, п. 2.4):
 * мелко можно, бледно нельзя.
 */
.requisites {
  margin: 0;
  /*
   * 12 точек, мелко — как было до 04.11.2026; тем же днём их
   * ненадолго ставили кеглем подписей сверху, владелец вернул мелкий.
   */
  font-size: 12px;
  line-height: 1.5;
  color: var(--on-photo-soft);
}

/*
 * На телефоне (уже 640 точек) реквизитов нет — решение владельца
 * 04.11.2026, принятое после предупреждения: это обязательные
 * сведения о продавце (CLAUDE.md, п. 2.4, исключение), а посетители
 * приходят в основном с телефона. Вернуть — убрать это правило.
 */
@media (max-width: 639px) {
  .bottom {
    display: none;
  }
}

/*
 * Монограмма NR — внизу справа. Тем же светлым и с той же
 * прозрачностью, что логотип сверху (90%).
 *
 * По высоте — как две строки реквизитов слева (просьба владельца
 * 04.11.2026): от верха прописных первой строки до линии букв второй.
 * При кегле 12 и высоте строки 1,5 это 18 + 0,727 × 12 ≈ 26,7 точки,
 * а линия букв второй строки на 4,6 точки выше низа строки (половина
 * лишней высоты строки плюс нижний вынос Inter, 0,241 кегля) —
 * на столько монограмма и приподнята. Числа завязаны на кегль
 * реквизитов: поменяется он — пересчитать.
 *
 * На телефоне реквизиты идут в пять строк; монограмма там вровень
 * с двумя последними.
 *
 * История: сначала шириной 56 / 7vw / 140, затем на четверть меньше.
 */
.monogram {
  grid-row: 3;
  grid-column: 2;
  align-self: end;
  /* Вправо: на телефоне колонку задаёт «12 / 26», она шире монограммы */
  justify-self: end;
  display: block;
  width: auto;
  height: calc(12px * 1.5 + 12px * 0.727);
  margin-bottom: calc((12px * 1.5 - 12px * 1.2109) / 2 + 12px * 0.2412);
  color: var(--on-photo);
  opacity: 0.9;
}

/*
 * Монограмма на телефоне — высотой с прописные «Скоро в продаже»
 * рядом (просьба владельца 04.11.2026): 0,727 × 13 ≈ 9,5 точки,
 * и на 10% больше — поправка на глаз: одиночный знак рядом с длинной
 * строкой той же высоты кажется мельче (владелец, тем же днём).
 * Итог около 10,4 точки.
 * Низ — по линии букв надписи: половина лишней высоты строки 1,4
 * плюс нижний вынос Inter, 0,241 кегля.
 */
@media (max-width: 639px) {
  .monogram {
    height: calc(var(--label-size) * 0.727 * 1.1);
    margin-bottom: calc((var(--label-size) * 1.4 - var(--label-size) * 1.2109) / 2 + var(--label-size) * 0.2412);
  }
}

/* Наведение — только там, где есть мышь (CLAUDE.md, п. 3.7) */
@media (hover: hover) and (pointer: fine) {
  /* Подчёркивания нет, поэтому отклик на наведение — прозрачностью */
  .contact a {
    transition: opacity 0.2s ease;
  }

  .contact a:hover {
    opacity: 0.7;
  }
}

.contact a:focus-visible {
  outline: 2px solid var(--ink-deep);
  outline-offset: 3px;
}