:root{--navy:#0a1322;--ink:#f6f7f7;--blue:#8cdafa;--muted:#b4c3cf}*{box-sizing:border-box}html,body{margin:0;min-width:320px;min-height:100%;background:#0a1322;color:var(--ink)}button,a{font:inherit}button{cursor:pointer}.experience{position:relative;min-height:100svh;overflow:hidden;background:#0a1322}#model{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;pointer-events:none;transition:opacity 1.25s ease;z-index:1}.experience.revealed #model{opacity:1;pointer-events:auto}#stars{position:absolute;inset:0;z-index:5;pointer-events:none}.cover{position:relative;z-index:4;min-height:100svh;isolation:isolate;
  background:radial-gradient(130% 95% at 72% 44%,#1b2c42 0%,#152438 32%,#0a1322 68%,#060c15 100%);
  transition:opacity 1.25s ease,visibility 1.25s ease}.experience.revealed .cover{opacity:0;visibility:hidden;pointer-events:none}.astronaut{position:absolute;inset:0;z-index:-1;background:url('astronaut-cut.png') no-repeat right 47%;background-size:auto 87%;opacity:1;transform:translate3d(var(--ax,0px),var(--ay,0px),0);transition:transform .32s ease-out}.experience.launching .astronaut{transform:translate3d(-4.5vw,-1vw,0) scale(1.045);transition:transform 1.05s cubic-bezier(.2,.7,.2,1)}.ghost-system{position:absolute;z-index:0;left:54%;top:46%;width:27vw;height:27vw;min-width:290px;min-height:290px;transform:translate(-50%,-50%);opacity:.17;filter:blur(.3px)}.ghost-system .sun{position:absolute;left:49%;top:49%;width:19px;height:19px;border-radius:50%;background:#fff9d3;box-shadow:0 0 18px #ffc75c,0 0 65px #f0a744;transform:translate(-50%,-50%)}.orbit{position:absolute;left:50%;top:50%;border:1px solid rgba(122,196,236,.6);border-radius:50%;transform:translate(-50%,-50%) rotate(-20deg)}.orbit-a{width:44%;height:44%}.orbit-b{width:87%;height:62%}.planet{position:absolute;width:7px;height:7px;border-radius:50%;background:#8bcdf6;box-shadow:0 0 12px #61c9ff}.planet-a{left:67%;top:31%}.planet-b{left:10%;top:61%;width:4px;height:4px}.glass-plane{position:absolute;left:48%;top:12%;height:76%;width:1px;background:linear-gradient(transparent,rgba(145,211,244,.07),transparent);box-shadow:0 0 36px rgba(120,205,250,.05);pointer-events:none}.ripple{position:absolute;z-index:2;left:47%;top:41%;width:4px;height:4px;border-radius:50%;opacity:0;pointer-events:none;background:radial-gradient(circle,rgba(210,245,255,.7) 0%,rgba(126,210,255,.24) 20%,rgba(65,170,245,.08) 45%,transparent 72%);box-shadow:0 0 0 1px rgba(152,223,255,.8),0 0 55px 20px rgba(77,175,243,.35);transform:translate(-50%,-50%) scale(1)}.experience.launching .ripple{animation:ripple 1.55s ease-out .72s forwards}@keyframes ripple{0%{opacity:.8;transform:translate(-50%,-50%) scale(1)}45%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(390)}}.editorial-frame{position:absolute;inset:24px;border:1px solid rgba(223,238,248,.34);pointer-events:none}.topbar{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:39px 6.1vw 0;gap:20px}.issue,.top-actions,.overline,.brand-sub,.folio,.menu-kicker{font-family:'PT Sans Narrow','Arial Narrow',Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase}.issue{font-size:12px;color:#a9bbc7}.top-actions{display:flex;align-items:center;gap:35px}.language{display:flex;align-items:center;gap:8px;color:#92a8b8}.language button{border:0;background:none;color:#8fa4b3;padding:4px;font-size:14px;letter-spacing:.12em}.language button[aria-pressed=true]{color:#fff}.menu-trigger{display:flex;align-items:center;gap:15px;border:0;background:none;color:#e7eff3;letter-spacing:.2em;font-size:13px}.burger{display:grid;gap:5px;width:22px}.burger i{height:1px;background:#d4e0e9}.cover-content{position:relative;z-index:2;width:min(54vw,840px);padding:5.3vh 0 100px 6.1vw}.brand-block{width:fit-content;max-width:100%}.overline{margin:0 0 15px;color:var(--blue);font-size:14px;white-space:nowrap}.masthead{font:900 clamp(92px,10.8vw,183px)/.86 'Playfair Display',Georgia,serif;letter-spacing:-.075em;text-shadow:0 2px 18px rgba(230,244,255,.08)}.brand-sub{max-width:100%;margin-top:13px;border-top:1px solid rgba(220,238,249,.42);padding:9px 0 0;text-align:center;font-size:clamp(15px,1.65vw,23px);letter-spacing:.35em;color:#dce8ef}.lead{margin-top:clamp(50px,8vh,110px)}.headline{margin:0;font:500 clamp(42px,4.25vw,77px)/1.08 Arial,Helvetica,sans-serif;letter-spacing:-.062em}.headline-line{display:block;white-space:nowrap}/* ротатор: окно держит ширину самого длинного слова, строка не прыгает,
   обрезка идёт по высоте строки, поэтому уходящие буквы не торчат */
.rot{display:inline-grid;vertical-align:baseline;overflow:hidden;
  line-height:1.08;padding-bottom:.08em}
.rot>*{grid-area:1/1}
.rot .ghost{visibility:hidden;pointer-events:none}
.accent{color:var(--blue);font:italic 400 1.04em/1.08 'Playfair Display',Georgia,serif;
  letter-spacing:-.075em;transition:opacity .22s ease,transform .22s ease}.accent.changing{opacity:0;transform:translateY(-.28em)}.teaser{max-width:640px;margin:31px 0 0;color:var(--muted);font:400 clamp(15px,1.17vw,18px)/1.5 Arial,Helvetica,sans-serif;letter-spacing:-.012em;text-wrap:pretty}.cta{margin-top:33px;display:flex;align-items:center;justify-content:space-between;gap:18px;min-width:320px;height:57px;padding:4px 4px 4px 25px;border:1px solid rgba(224,241,251,.52);border-radius:30px;color:#f7fbfc;background:rgba(5,16,29,.48);font:700 16px/1 'PT Sans Narrow','Arial Narrow',Arial,sans-serif;letter-spacing:.15em;text-transform:uppercase;transition:background .2s,border-color .2s}.cta:hover{background:rgba(54,98,126,.28);border-color:var(--blue)}.cta-arrow{display:grid;place-items:center;width:47px;height:47px;border-radius:50%;background:var(--blue);color:#07121d;font:30px Arial,sans-serif;letter-spacing:0}.folio{position:absolute;left:6.1vw;right:6.1vw;bottom:43px;display:flex;justify-content:space-between;color:#7891a2;font-size:11px}.menu{position:absolute;z-index:9;top:24px;right:24px;bottom:24px;width:min(445px,calc(100vw - 48px));padding:75px 38px;background:rgba(7,13,22,.45);border-left:1px solid rgba(158,216,247,.22);box-shadow:-25px 0 80px #000b;backdrop-filter:blur(32px) saturate(.9) brightness(.8)}.menu[hidden]{display:none}.menu-close{position:absolute;right:26px;top:19px;border:0;background:none;color:#f4f8fa;font-size:34px}.menu-kicker{color:var(--blue);font-size:12px;margin:0 0 45px}.menu a,.menu>button:not(.menu-close){display:flex;align-items:baseline;gap:18px;width:100%;padding:19px 0;border:0;border-bottom:1px solid #ffffff2b;background:none;color:#fff;text-align:left;text-decoration:none;font:30px/1.1 Arial,sans-serif;letter-spacing:-.04em}.menu small{color:var(--blue);font:14px 'PT Sans Narrow',sans-serif;letter-spacing:.1em}.experience.revealed @media(max-width:1100px){.cover-content{width:min(64vw,700px)}.astronaut{background-size:auto 78%;background-position:105% 47%}.headline{font-size:clamp(40px,4.5vw,65px)}}@media(max-width:780px){.cover{min-height:100svh}.editorial-frame{inset:12px}.topbar{padding:23px 28px 0}.issue{font-size:10px}.top-actions{gap:12px}.menu-trigger>span:first-child{display:none}.cover-content{width:auto;padding:7vh 28px 105px}.brand-block{position:relative;z-index:2}.masthead{font-size:clamp(75px,20vw,150px)}.overline{font-size:11px}.brand-sub{font-size:14px}.lead{margin-top:clamp(80px,30vh,250px)}.headline{font-size:clamp(36px,7vw,57px)}.teaser{max-width:600px;font-size:15px}.astronaut{background-size:auto 58%;background-position:115% 22%;opacity:.7}.ghost-system{left:67%;top:32%}.glass-plane{left:48%;top:13%;height:45%}.ripple{left:48%;top:37%}.folio{left:28px;right:28px;bottom:25px;font-size:9px}}@media(max-width:520px){.cover-content{padding-top:10vh}.masthead{font-size:clamp(65px,19vw,95px)}.headline{font-size:clamp(29px,7.3vw,38px);letter-spacing:-.06em}.lead{margin-top:34vh}.teaser{margin-top:22px;font-size:14px}.cta{min-width:0;width:100%;font-size:13px;letter-spacing:.1em}.astronaut{background-size:auto 43%;background-position:118% 20%}.folio span:last-child{display:none}}@media(prefers-reduced-motion:reduce){.astronaut,.cover,#model,.accent{transition:none!important}.experience.launching .ripple{animation:none}.astronaut{transform:none!important}}
@media(min-width:1101px){.astronaut{background-size:auto 70%;background-position:100% 48%}}
@media(min-width:781px){.glass-plane{left:43%}.ripple{left:43%}}

/* v3: editorial cover, fluid viewport rhythm, and a glass object independent of the still. */
.experience,.cover{height:100svh;min-height:0}

@media(max-width:850px){}
.cover{background:radial-gradient(130% 95% at 70% 43%,#1b2c42 0%,#152438 34%,#0f1c2e 66%,#0a1322 100%)}
.astronaut{background-size:auto min(72vh,67vw);background-position:100% 47%}
.topbar{padding-top:clamp(22px,2.9vh,30px)}
.cover-content{width:min(55vw,800px);padding-top:clamp(14px,3.5vh,46px);padding-bottom:45px}
.overline{margin-bottom:clamp(8px,1.3vh,14px)}
.masthead{font-size:clamp(72px,min(9.1vw,17vh),150px);line-height:1.03;letter-spacing:-.036em;text-shadow:none;-webkit-font-smoothing:antialiased}
.brand-sub{margin-top:clamp(3px,.8vh,10px);font-size:clamp(13px,1.3vw,19px);letter-spacing:.3em}
.lead{margin-top:clamp(18px,3.8vh,52px)}
.headline{font-size:clamp(34px,min(3.9vw,6.8vh),68px);line-height:1.13;letter-spacing:-.036em;-webkit-font-smoothing:antialiased}
.headline-line{white-space:normal;display:block}
.headline-line:first-child{white-space:nowrap}
.accent{font-size:1.04em;letter-spacing:-.035em}
/* ротатор: механический проворот. Ширину окна задаёт скрытая мерка по самому
   длинному слову, высоту строки и шаг ленты держит одна переменная --step,
   поэтому соседние слова не выглядывают из окна. Базовая линия берётся у мерки */
.roller-window{--step:1.22em;position:relative;display:inline-block;vertical-align:baseline;
  overflow:hidden;height:var(--step);text-align:left;white-space:nowrap}
.roller-sizer{display:block;visibility:hidden;height:var(--step);line-height:var(--step)}
.roller-track{position:absolute;left:0;top:0;display:block;
  transform:translate3d(0,var(--word-offset,0em),0);
  transition:transform .72s cubic-bezier(.22,.75,.22,1);will-change:transform}
.roller-track>span{display:block;height:var(--step);line-height:var(--step)}
.roller-track.without-transition{transition:none}
.roller-track>span{white-space:nowrap}
.teaser{max-width:610px;margin-top:clamp(16px,2.8vh,28px);font-size:clamp(16px,min(1.28vw,2.6vh),19px);font-weight:300;line-height:1.52;letter-spacing:.012em;color:#c8d5df}
.cta{margin-top:clamp(16px,2.5vh,27px);min-width:0;width:fit-content;height:48px;padding-left:19px;font-size:13px;letter-spacing:.12em;gap:18px}
.cta-arrow{width:39px;height:39px;font-size:24px}
.folio{bottom:clamp(32px,4vh,44px)}
.ghost-system,.ripple{display:none!important}
.glass-plane{z-index:0;left:47%;top:30%;width:clamp(112px,11vw,174px);height:clamp(132px,15vw,215px);border:1px solid rgba(160,213,247,.32);border-radius:5px;background:linear-gradient(125deg,rgba(181,232,255,.09),rgba(17,42,64,.08) 44%,rgba(138,209,246,.07));box-shadow:inset 1px 0 rgba(224,244,255,.26),inset -1px 0 rgba(124,202,245,.23),0 0 35px rgba(46,151,218,.08);backdrop-filter:blur(2px);transform:perspective(650px) rotateY(-14deg) rotateZ(-6deg);overflow:hidden}
.glass-plane:before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 18%,rgba(210,246,255,.13) 32%,transparent 42%);pointer-events:none}
.miniature{position:absolute;inset:13%;opacity:.67;filter:drop-shadow(0 0 3px #8bcfff)}
.miniature .sun{position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:#fff6b7;box-shadow:0 0 9px 4px rgba(253,227,127,.5);transform:translate(-50%,-50%)}
.miniature .orbit{position:absolute;left:50%;top:50%;border:1px solid rgba(120,197,242,.55);border-radius:50%;transform:translate(-50%,-50%) rotate(-27deg)}
.miniature .orbit-a{width:55%;height:62%}.miniature .orbit-b{width:98%;height:80%}
.miniature .planet{position:absolute;width:6px;height:6px;border-radius:50%;background:#9ad7f5;box-shadow:0 0 8px #83caff}
.miniature .planet-a{left:72%;top:26%}.miniature .planet-b{left:14%;top:62%;width:5px;height:5px;background:#a590cf}
.miniature .connection{position:absolute;left:50%;top:50%;height:1px;transform-origin:left center;background:linear-gradient(90deg,#bde8fa,transparent)}
.miniature .connection-a{width:40%;transform:rotate(-43deg)}.miniature .connection-b{width:44%;transform:rotate(158deg)}


.experience.launching 
.experience.launching .experience.launching 

.suit-light{display:none}
.experience.launching .suit-light{display:none}
@keyframes suit-sweep{0%{opacity:0;mask-position:-40% 0}30%{opacity:.68}80%{opacity:.5}100%{opacity:0;mask-position:155% 0}}
.experience.launching .glass-plane{box-shadow:0 0 33px rgba(89,193,248,.52),inset 0 0 23px rgba(157,226,255,.27);transition:box-shadow .45s ease .8s}
@media(max-width:1100px){.cover-content{width:min(62vw,680px)}.headline{font-size:clamp(34px,min(4.25vw,6.7vh),60px)}.astronaut,.suit-light{display:none}.glass-plane{left:47%;top:31%}}
@media(max-width:780px){.cover-content{width:100%;padding:clamp(20px,4vh,40px) 28px 70px}.masthead{font-size:clamp(65px,min(18vw,14vh),116px)}.headline{font-size:clamp(31px,min(6vw,5.5vh),49px)}.lead{margin-top:clamp(125px,24vh,230px)}.teaser{font-size:clamp(15px,2.5vh,18px);max-width:78%}.astronaut,.suit-light{display:none}.glass-plane{left:42%;top:20%;width:110px;height:135px}.folio{bottom:25px}}
@media(max-width:520px){.cover-content{padding-top:6vh}.masthead{font-size:clamp(62px,18vw,92px)}.lead{margin-top:clamp(145px,31vh,230px)}.headline{font-size:clamp(29px,min(7.4vw,5.3vh),39px)}.teaser{max-width:100%;font-size:15px;line-height:1.4;margin-top:17px}.cta{font-size:12px;max-width:100%;height:46px}.glass-plane{left:37%;top:22%;width:85px;height:110px}.astronaut,.suit-light{display:none}}
@media(max-height:650px) and (min-width:781px){.cover-content{padding-top:10px}.lead{margin-top:14px}.headline{font-size:clamp(32px,5.9vh,48px)}.teaser{margin-top:12px;line-height:1.38;font-size:15px}.cta{margin-top:13px}.folio{bottom:28px}.masthead{font-size:clamp(70px,15vh,112px)}}
@media(max-width:520px) and (max-height:720px){.cover-content{padding-top:4vh}.lead{margin-top:clamp(108px,19vh,140px)}.teaser{margin-top:11px;line-height:1.34}.cta{margin-top:11px}.folio{display:none}}
@media(prefers-reduced-motion:reduce){.roller-track{transition:none}.experience.launching }

/* Preserve the magazine grid and font continuity of the main site. */
.editorial-frame{inset:14px}
.topbar{max-width:1240px;margin-inline:auto;padding-left:44px;padding-right:44px}
.cover-content{width:100%;max-width:1240px;margin-inline:auto;padding-left:44px}
.cover-content .brand-block,.cover-content .lead{max-width:min(55vw,800px)}
.headline{font-family:"PT Sans",Arial,Helvetica,sans-serif;font-weight:400}
.teaser{font-family:"PT Sans",Arial,Helvetica,sans-serif;font-weight:400}
.folio{left:max(44px,calc(50vw - 576px));right:max(44px,calc(50vw - 576px))}
.menu{top:14px;right:14px;bottom:14px}
.menu a,.menu>button:not(.menu-close){font:400 28px/1.15 "Playfair Display",Georgia,serif;letter-spacing:-.01em}
@media(max-width:1100px){.cover-content .brand-block,.cover-content .lead{max-width:min(62vw,680px)}}
@media(max-width:780px){.editorial-frame{inset:10px}.topbar{padding-left:28px;padding-right:28px}.cover-content{padding-left:28px;padding-right:28px}.cover-content .brand-block,.cover-content .lead{max-width:none}.folio{left:28px;right:28px}}
@media(max-width:520px){.cover-content{padding-left:22px;padding-right:22px}}

/* ── рамка, шапка и колонтитул поверх всего экрана ───────────────────────
   Раньше они лежали внутри обложки и исчезали вместе с ней. Теперь стоят
   отдельным слоем: модель открывается внутри той же рамки, под той же
   шапкой, и читается как часть сайта, а не как отдельная картинка.      */
/* шапка держит только марку и меню, поэтому высота небольшая:
   элементы управления моделью поднимаются ближе к рамке */
/* рамка проходит в 14 пикселях от края, поэтому марка и меню отступают
   от неё, а не липнут к линии; модель начинается сразу под ними */
.experience{--head-h:clamp(48px,6vh,64px)}
.editorial-frame{position:absolute;inset:14px;z-index:7;pointer-events:none;
  border:1px solid rgba(223,238,248,.34)}
.topbar{position:absolute;top:0;left:0;right:0;z-index:8}
/* шапка вынута из потока, поэтому обложка сама отступает на её высоту:
   иначе выпуск и надстрочная строка встают на одну строку */
.cover-content{padding-top:calc(var(--head-h) + 3vh)}
.folio{position:absolute;left:max(44px,calc(50vw - 576px));right:max(44px,calc(50vw - 576px));
  bottom:40px;z-index:8;pointer-events:none}
/* модель садится под шапку и внутрь рамки */
/* у iframe свой размер по умолчанию 300×150, поэтому ширину и высоту
   задаём явно: auto для встроенного элемента его не растягивает */
#model{top:calc(var(--head-h) + 6px);left:14px;
  width:calc(100% - 28px);height:calc(100% - var(--head-h) - 20px)}
.experience.revealed .folio{opacity:0;transition:opacity .5s ease}
/* на обложке колонтитул виден, при открытой модели уступает место её панелям */
@media(max-width:780px){
  .editorial-frame{inset:10px}
  #model{top:calc(var(--head-h) + 6px);left:10px;
    width:calc(100% - 20px);height:calc(100% - var(--head-h) - 20px)}
}

/* Возврат на обложку — по марке выпуска слева вверху, как на внутренних
   страницах возврат по бренду. Отдельная кнопка «← Обложка» убрана. */
.issue{background:none;border:0;padding:0;cursor:default;font:inherit;
  letter-spacing:.22em;text-transform:uppercase;transition:color .2s}
.experience.revealed .issue{cursor:pointer}
.experience.revealed .issue:hover,.experience.revealed .issue:focus-visible{color:#eaf4fb}

/* вход сразу в диагностику: обложка не проявляется и не гаснет на глазах */
.experience.instant .cover,.experience.instant #model,.experience.instant .mag-in{transition:none!important}

/* ── кольцо курсора ──────────────────────────────────────────────────────
   Живёт только на обложке. Когда открыта модель, кольцо выключается:
   там фильтры, подписи и точки, и лишний круг мешает целиться.          */
#ring{position:fixed;top:0;left:0;width:54px;height:54px;border-radius:50%;
  border:1.5px solid rgba(140,218,250,.85);pointer-events:none;z-index:9999;
  opacity:0;will-change:transform;
  transition:opacity .35s ease,width .28s ease,height .28s ease,border-width .28s ease}
#ring.on{opacity:1}
#ring.big{width:86px;height:86px;border-width:1px;border-color:rgba(214,239,255,.95)}
.experience.revealed #ring,.experience.launching #ring{opacity:0}
@media(hover:none),(pointer:coarse){#ring{display:none}}
@media(prefers-reduced-motion:reduce){#ring{display:none}}
