/* ─────────────────────────────────────────────────────────────────────────
   REACH · альтернативная обложка: журнальный вариант без космонавта.
   Лежит поверх cover.css и меняет только сам разворот обложки — рамка,
   шапка, меню, колонтитул и запуск модели остаются общими.
   Откат: открыть index.html, этот файл в нём не подключён.
   Агент контента, 21.09.2026.
   ───────────────────────────────────────────────────────────────────────── */

.mag-mode .cover{background:#05090f}

/* ── подложка из кадров ролика ───────────────────────────────────────────
   Петля 15 секунд из тех же кадров, что идут в ролике: Лондон-Сити, его же
   снимок с наездом, стикеры, старт ракеты, лесной перекрёсток и снова
   Лондон. Поверх лежит тёмное поле обложки, открытое на пятую часть, —
   движение читается, журнальная полоса остаётся. */
.mag-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;pointer-events:none;filter:saturate(.7) contrast(1.04)}
.mag-field.has-video::before{opacity:.8}
@media(prefers-reduced-motion:reduce){.mag-video{display:none}}

/* ── поле обложки ───────────────────────────────────────────────────────
   Пока снимка нет, поле держит глубину само: три градиента дают свет
   сверху справа, тень в нижнем левом углу и общий тёмно-синий тон.
   Когда снимок выберем, он встаёт сюда одной строкой:
   .mag-field{--shot:url('cover-shot.jpg')}                                */
.mag-field{position:absolute;inset:0;z-index:-1;
  background-image:var(--shot,none);
  background-size:cover;background-position:center 30%;background-repeat:no-repeat}
/* тот же тёмный разворот, что и на внутренних страницах: диагональ
   от тёмно-синего через #152438 к почти чёрному. Сверху лёгкий свет,
   чтобы поле не было плоским, но глубину он не съедает. */
.mag-field::before{content:'';position:absolute;inset:0;
  background:
    radial-gradient(52% 38% at 55% 31%, rgba(34,68,108,.22) 0%, rgba(14,28,47,.08) 56%, rgba(5,10,18,0) 84%),
    linear-gradient(168deg, #070d18 0%, #0f1c2e 32%, #070d17 70%, #03070e 100%)}
/* когда снимок появится, он проступит сквозь эту вуаль, а текст останется читаемым */
.mag-field::after{content:'';position:absolute;inset:0;
  background:linear-gradient(94deg, rgba(6,12,21,.72) 0%, rgba(6,12,21,.44) 38%, rgba(6,12,21,.12) 68%, rgba(6,12,21,.30) 100%);
  opacity:var(--veil,0)}
.mag-field[style*='--shot']::after{--veil:1}
/* виньетка: углы и края уходят в чёрный, светлым остаётся узкий центр */
.mag-field::after{box-shadow:inset 0 0 clamp(120px,18vw,260px) clamp(40px,7vw,110px) rgba(2,5,10,.72)}

/* ── полоса обложки ─────────────────────────────────────────────────────── */
.mag-in{position:relative;z-index:2;display:grid;grid-template-rows:auto minmax(0,1fr);
  width:100%;max-width:1240px;min-height:100svh;margin-inline:auto;
  padding:calc(var(--head-h) + clamp(14px,3vh,40px)) 44px clamp(74px,11vh,104px)}

/* ── мастхед ────────────────────────────────────────────────────────────── */
.mag-head{text-align:center}
.mag-head .overline{margin:0 0 clamp(10px,1.5vh,18px);color:var(--blue);
  font-size:clamp(11px,.93vw,14px);white-space:nowrap}
/* мастхед делового журнала: буквы стоят раздельно. Плотная разрядка
   основной обложки здесь читалась как марка модного дома.
   Правый межбуквенный просвет вычитается слева, иначе строка уезжает. */
.mag .masthead{font:900 clamp(72px,9.6vw,156px)/.86 'Playfair Display',Georgia,serif;
  letter-spacing:.055em;padding-left:.055em;
  text-shadow:0 2px 26px rgba(214,238,255,.10)}
/* буквы мастхеда живут отдельно: та, к которой подходит курсор, слегка
   выступает вперёд — подъём, увеличение и тень под ней. Остальные стоят. */
.mag .masthead .ml{display:inline-block;will-change:transform;
  transition:transform .38s cubic-bezier(.22,.75,.22,1),text-shadow .38s ease}
@media(hover:none),(pointer:coarse){.mag .masthead .ml{transition:none;transform:none!important}}
@media(prefers-reduced-motion:reduce){.mag .masthead .ml{transition:none;transform:none!important}}

.mag-rule{display:flex;align-items:center;gap:clamp(14px,2vw,30px);
  margin-top:clamp(12px,1.8vh,22px);
  font-family:'PT Sans Narrow','Arial Narrow',Arial,sans-serif;
  letter-spacing:.35em;text-transform:uppercase;color:#dbe7ef;
  font-size:clamp(13px,1.4vw,21px)}
.mag-rule::before,.mag-rule::after{content:'';flex:1;height:1px;
  background:rgba(220,238,249,.42)}
.mag-rule span{padding-bottom:2px}
.mag-issue{margin:clamp(11px,1.6vh,17px) 0 0;color:#8ea4b5;
  font-family:'PT Sans Narrow','Arial Narrow',Arial,sans-serif;
  letter-spacing:.24em;text-transform:uppercase;font-size:clamp(10px,.85vw,12px)}

/* ── нижняя часть: тема номера и содержание номера ──────────────────────── */
/* рубрики стоят в одной строке сетки, поэтому «Тема номера» и «В номере»
   всегда сидят на одной линии, как рубрики на журнальной полосе */
.mag-body{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(290px,.94fr);
  grid-template-rows:minmax(0,1fr) auto auto;column-gap:clamp(28px,4.4vw,72px);
  padding-top:clamp(22px,4vh,52px)}
/* первая строка пустая и тянется: она держит поле обложки,
   а рубрики с текстом прижаты к низу полосы */
.rub-lead{grid-column:1;grid-row:2}
.rub-toc{grid-column:2;grid-row:2}
.mag-lead{grid-column:1;grid-row:3}
.mag-toc{grid-column:2;grid-row:3}
.mag-rub{margin:0 0 clamp(10px,1.4vh,16px);color:var(--blue);
  font-family:'PT Sans Narrow','Arial Narrow',Arial,sans-serif;
  letter-spacing:.22em;text-transform:uppercase;font-size:12px}

.mag-lead{max-width:640px}
.mag-title{margin:0;font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:clamp(32px,3.7vw,57px);line-height:1.3;letter-spacing:-.028em}
.mag-title>span{display:block}
.mag-title .mag-line{white-space:nowrap}
/* меняющееся слово: тот же шрифт и тот же кегль, только цвет другой.
   Шаг ленты, высота окна и высота строки — одно число, поэтому соседние
   слова не выглядывают снизу и сверху. */
/* Обрезка вынесена во внутренний слой. У элемента с overflow:hidden базовой
   линией считается нижний край, и слово вставало выше строки; теперь базовую
   линию даёт скрытая мерка, а лента обрезается слоем внутри окна. */
.mag-title .roller-window{--step:1.3em;color:var(--blue);font-size:1em;
  letter-spacing:inherit;overflow:visible}
.mag-title .roller-clip{position:absolute;inset:0;overflow:hidden}
.mag-title .roller-track>span{height:var(--step);line-height:var(--step)}
.mag-teaser{max-width:47ch;margin:clamp(16px,2.4vh,26px) 0 0;color:var(--muted);
  font:400 clamp(15px,1.15vw,18px)/1.5 'PT Sans',Arial,Helvetica,sans-serif;
  letter-spacing:-.006em;text-wrap:pretty}
.mag-lead .cta{margin-top:clamp(18px,2.6vh,30px)}

/* содержание номера: колонка со своей линейкой, как боковая полоса в журнале */
.mag-toc,.rub-toc{border-left:1px solid rgba(220,238,249,.26);padding-left:clamp(20px,2.6vw,38px)}
.rub-toc{align-self:end}
.mag-toc ul{margin:0;padding:0;list-style:none}
.mag-toc li{border-top:1px solid rgba(220,238,249,.20)}
.mag-toc li:last-child{border-bottom:1px solid rgba(220,238,249,.20)}
.mag-toc a{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;
  gap:clamp(12px,1.1vw,18px);padding:clamp(9px,1.25vh,14px) 0;
  color:#e4edf4;text-decoration:none;
  font:400 clamp(14px,1.02vw,16px)/1.32 'PT Sans',Arial,Helvetica,sans-serif;
  transition:color .2s}
.mag-toc a b{font:700 clamp(15px,1.15vw,19px)/1 'Playfair Display',Georgia,serif;
  color:var(--blue);font-variant-numeric:lining-nums}
.mag-toc a:hover{color:var(--blue)}
.mag-more{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(14px,2vh,22px);
  color:#9fb3c2;text-decoration:none;
  font-family:'PT Sans Narrow','Arial Narrow',Arial,sans-serif;
  letter-spacing:.18em;text-transform:uppercase;font-size:12px;transition:color .2s}
.mag-more i{font-style:normal;color:var(--blue)}
.mag-more:hover{color:#e4edf4}

/* уход обложки при запуске модели: тот же ход, что и в основном варианте */
.mag-mode.launching .mag-in{opacity:0;transform:translateY(-14px);
  transition:opacity .85s ease,transform .95s cubic-bezier(.2,.7,.2,1)}
.mag-in{transition:opacity .6s ease,transform .6s ease}

/* ── узкие экраны ───────────────────────────────────────────────────────── */
@media(max-width:1100px){
  .mag-body{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;
    align-items:start;row-gap:0}
  .rub-lead{grid-row:1}.mag-lead{grid-row:2}.rub-toc{grid-row:3}.mag-toc{grid-row:4}
  .rub-lead,.rub-toc,.mag-lead,.mag-toc{grid-column:1}
  .rub-toc{border-left:0;padding-left:0;margin-top:clamp(18px,3vh,28px)}
  .mag-toc{border-left:0;border-top:1px solid rgba(220,238,249,.26);
    padding-left:0;padding-top:clamp(14px,2vh,20px)}
}
/* на телефоне обложка выше экрана: полоса прокручивается,
   а рамка и шапка остаются на месте */
@media(max-width:780px){
  .mag-mode{overflow:visible;height:auto}
  .mag-mode .editorial-frame,.mag-mode #model,.mag-mode #stars{position:fixed}
  /* шапка уезжает вместе с полосой: закреплённая, она наезжала на мастхед */
  .mag-mode .folio{display:none}
  .mag-in{min-height:0;padding:calc(var(--head-h) + 16px) 28px 46px}
  .mag .cover,.mag-mode .cover{min-height:100svh;height:auto}
  .mag .masthead{font-size:clamp(62px,17vw,120px)}
  .mag-rule{font-size:13px;letter-spacing:.26em}

}
@media(max-width:520px){
  .mag-in{padding-left:22px;padding-right:22px}
  .mag-head .overline{white-space:normal}
  .mag-title{font-size:clamp(29px,7.6vw,38px)}
}
@media(prefers-reduced-motion:reduce){.mag-in{transition:none}}

/* ── стеклянная надпись на обложке ────────────────────────────────────
   Холст со стеклянным «REACH» встаёт ровно на место надписи. Пока он не
   запустился, виден обычный набор: так обложка не мигает пустотой и
   остаётся читаемой, если трёхмерная сцена не поднялась. */
.masthead.glass-on{color:transparent}
.masthead-glass{position:absolute;pointer-events:none;z-index:1}