/* Royal Garden — переверстка.
   Тексты, фото и видео от оригинала; сетка, ритм и композиция свои.
   Шрифты — те же файлы из fonts/, но роли другие: Desire-Pro не используется. */

@font-face { font-family: 'hn-med';  src: url('../fonts/helveticaneuecyr-medium.ttf'); font-display: swap; }
@font-face { font-family: 'hn-roman'; src: url('../fonts/helveticaneuecyr-roman.otf'); font-display: swap; }

:root{
    --bg: #08090a;
    --panel: #0d0f11;
    --line: #1e2126;
    --acc: #9b2540;
    --acc-lt: #c8536b;
    --txt: #f2f3f4;
    --dim: #767c84;
    --rail: 78px;
    --pad: clamp(1.25rem, .5rem + 3vw, 5rem);
}

*{ margin: 0; padding: 0; box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
    background: var(--bg);
    color: var(--txt);
    font-family: 'hn-roman', system-ui, sans-serif;
    font-size: clamp(.95rem, .9rem + .2vw, 1.05rem);
    line-height: 1.55;
    overflow-x: hidden;
}

img, video{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
summary::-webkit-details-marker{ display: none; }
::selection{ background: var(--acc); color: #fff; }
::-webkit-scrollbar{ width: 6px; height: 6px; background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--acc); }
:focus-visible{ outline: 2px solid var(--acc-lt); outline-offset: 3px; }

/* ---------- левая панель вместо шапки ---------- */

.rail{
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: var(--rail);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 22px 0;
    background: var(--panel);
    border-right: 1px solid var(--line);
}
.rail__mark img{ width: 34px; }
.rail__nav{
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 34px;
}
/* пункты меню стоят боком — так вертикальная панель читается как навигация */
.rail__nav a{
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'hn-med', sans-serif;
    font-size: 12px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--dim);
    transition: color .25s;
}
.rail__nav a:hover{ color: var(--txt); }

.picker{ position: relative; }
.picker__btn{
    background: none;
    border: 1px solid var(--line);
    color: var(--txt);
    font: 12px/1 'hn-med', sans-serif;
    letter-spacing: .12em;
    padding: 8px 6px;
    cursor: pointer;
    transition: border-color .25s, color .25s;
}
.picker__btn:hover{ border-color: var(--acc); color: var(--acc-lt); }
.picker__menu{
    position: absolute;
    left: calc(100% + 10px);
    bottom: 0;
    list-style: none;
    background: var(--panel);
    border: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: .2s;
}
.picker.is-open .picker__menu{ opacity: 1; visibility: visible; transform: none; }
.picker__menu button{
    display: block;
    width: 56px;
    background: none;
    border: 0;
    color: var(--dim);
    font: 12px/1 'hn-med', sans-serif;
    letter-spacing: .12em;
    padding: 10px 0;
    cursor: pointer;
}
.picker__menu button:hover{ background: var(--acc); color: #fff; }

.shell{ margin-left: var(--rail); }

/* ---------- общие детали ---------- */

.tag{
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: 'hn-med', sans-serif;
    font-size: 11px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--dim);
}
.tag i{
    font-style: normal;
    color: var(--acc-lt);
    letter-spacing: .1em;
}
.tag i::after{
    content: "";
    display: inline-block;
    width: 46px;
    height: 1px;
    margin-left: 14px;
    vertical-align: middle;
    background: var(--acc);
}

.head{
    font-family: 'hn-med', sans-serif;
    font-weight: 400;
    font-size: clamp(1.6rem, 1rem + 2.4vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    max-width: 20ch;
}

.act{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 58px;
    padding: 0 34px;
    background: var(--acc);
    color: #fff;
    font-family: 'hn-med', sans-serif;
    font-size: 14px;
    letter-spacing: .16em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: box-shadow .3s;
}
.act::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #6f1a2e;
    transform: translateY(101%);
    transition: transform .38s cubic-bezier(.4,0,.2,1);
}
.act:hover::before{ transform: none; }
.act:hover{ box-shadow: 0 18px 36px -18px rgba(155,37,64,.9); }
.act--line{
    background: none;
    border: 1px solid var(--acc);
    color: var(--acc-lt);
}
.act--line:hover{ color: #fff; }
.act--wide{ justify-self: start; }

.reveal{ opacity: 0; transform: translateY(26px); transition: opacity .8s, transform .8s; }
.reveal.is-in{ opacity: 1; transform: none; }

/* ---------- 01 обложка ---------- */

.cover{
    display: grid;
    grid-template-columns: 46fr 54fr;
    min-height: 100svh;
}
.cover__panel{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(1.5rem, 2.5vw, 2.6rem);
    padding: clamp(2.5rem, 5vw, 5rem) var(--pad);
    background:
        radial-gradient(80% 60% at 0% 100%, rgba(155,37,64,.22), transparent 70%),
        var(--bg);
}
.cover__lead{
    font-family: 'hn-med', sans-serif;
    font-weight: 400;
    font-size: clamp(1.5rem, .9rem + 1.9vw, 2.75rem);
    line-height: 1.18;
    letter-spacing: -.02em;
}
.cover__panel .act{ align-self: start; }

.getter{
    border-top: 1px solid var(--line);
    padding-top: clamp(1.2rem, 2vw, 2rem);
    display: grid;
    gap: 6px;
}
.getter__q{ font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.getter__t{ font-family: 'hn-med', sans-serif; font-size: clamp(1rem, .9rem + .4vw, 1.25rem); }
.getter__row{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.store{
    display: flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 16px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.03);
    transition: border-color .25s, background .25s;
}
.store:hover{ border-color: var(--acc); background: rgba(155,37,64,.12); }
/* значки сторов нарисованы под белую кнопку — на тёмной плашке их надо вывернуть */
.store img{ width: 22px; filter: invert(1); }
.store__txt{ display: flex; flex-direction: column; gap: 3px; }
.store__txt img{ width: auto; height: 8px; }
.store__txt img:last-child{ height: 12px; }
.store--go{ font-family: 'hn-med', sans-serif; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }

.cover__frame{ position: relative; overflow: hidden; }
.cover__frame video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cover__frame::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--bg), transparent 22%),
                linear-gradient(0deg, rgba(8,9,10,.85), transparent 45%);
}
.cover__wordmark{
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 5%;
    width: 88%;
    z-index: 2;
    opacity: .9;
}

/* ---------- секции-полосы ---------- */

.band{
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    padding: clamp(4.5rem, 8vw, 9rem) var(--pad);
    border-top: 1px solid var(--line);
}
.band__head{ display: grid; gap: 1.1rem; }

/* 02 — лента с прилипанием */
.reel{
    display: flex;
    gap: 1px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    background: var(--line);
    border: 1px solid var(--line);
    scrollbar-width: thin;
}
.slab{
    flex: 1 0 clamp(230px, 25%, 340px);
    scroll-snap-align: start;
    display: grid;
    gap: 22px;
    align-content: start;
    padding: clamp(1.5rem, 2.5vw, 2.4rem);
    background: var(--bg);
    transition: background .35s;
}
.slab:hover{ background: var(--panel); }
.slab__no{
    font-family: 'hn-med', sans-serif;
    font-size: 12px;
    letter-spacing: .3em;
    color: var(--acc-lt);
}
.slab img{ width: 92px; filter: drop-shadow(0 12px 24px rgba(0,0,0,.6)); }
.slab p{ font-size: clamp(.95rem, .9rem + .3vw, 1.15rem); line-height: 1.4; }

/* ---------- 03 манифест ---------- */

.creed{
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--line);
}
.creed__shot{ overflow: hidden; }
.creed__shot img{ width: 100%; height: 100%; object-fit: cover; }
.creed__body{
    display: grid;
    align-content: center;
    justify-items: start;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding: clamp(3rem, 6vw, 7rem) var(--pad);
}
.creed__text{
    font-family: 'hn-med', sans-serif;
    font-size: clamp(1.15rem, .9rem + 1.1vw, 2rem);
    line-height: 1.3;
    letter-spacing: -.015em;
    border-left: 2px solid var(--acc);
    padding-left: clamp(1rem, 2vw, 1.8rem);
}

/* ---------- 04 зигзаг ---------- */

.zigzag{ display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
.pair{
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    gap: clamp(1.2rem, 3vw, 3rem);
    padding-bottom: clamp(1.5rem, 3vw, 3rem);
    border-bottom: 1px solid var(--line);
}
.pair:nth-child(even){ direction: rtl; }
.pair:nth-child(even) > *{ direction: ltr; }
.pair figure{ overflow: hidden; }
.pair img{
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.pair:hover img{ transform: scale(1.05); }
.pair p{
    font-family: 'hn-med', sans-serif;
    font-size: clamp(1.05rem, .9rem + .8vw, 1.75rem);
    line-height: 1.25;
    letter-spacing: -.015em;
}
.pair:nth-child(even) p{ text-align: right; }

/* ---------- 05 планета ---------- */

.globe{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
    padding: clamp(4rem, 7vw, 8rem) 0 clamp(4rem, 7vw, 8rem) var(--pad);
    border-top: 1px solid var(--line);
    overflow: hidden;
}
.globe__copy{ display: grid; justify-items: start; gap: clamp(1rem, 2vw, 1.6rem); }
.globe__desc{ color: var(--dim); max-width: 46ch; }
.globe__big{
    font-family: 'hn-med', sans-serif;
    font-size: clamp(3rem, 1rem + 7vw, 7rem);
    line-height: .95;
    letter-spacing: -.03em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #fff 35%, var(--acc));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* видео сдвинуто за край — планета «выходит» из макета */
.globe__render{ margin-right: -8%; }
.globe__render video{ width: 100%; }

/* ---------- 06 вопросы ---------- */

.qa-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.qa{ background: var(--bg); padding: clamp(1.2rem, 2vw, 1.8rem); }
.qa summary{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    font-family: 'hn-med', sans-serif;
    font-size: clamp(1rem, .9rem + .35vw, 1.2rem);
    line-height: 1.3;
    transition: color .25s;
    list-style: none;
}
.qa summary:hover{ color: var(--acc-lt); }
.qa summary::after{
    content: "";
    flex: 0 0 14px;
    height: 14px;
    margin-top: 5px;
    background:
        linear-gradient(var(--acc), var(--acc)) center/100% 2px no-repeat,
        linear-gradient(var(--acc), var(--acc)) center/2px 100% no-repeat;
    transition: transform .3s;
}
.qa[open] summary::after{ transform: rotate(45deg); }
.qa[open] summary{ color: var(--acc-lt); }
.qa p{
    color: var(--dim);
    padding-top: 14px;
    max-width: 60ch;
    animation: drop .35s ease both;
}
@keyframes drop{ from{ opacity: 0; transform: translateY(-8px); } }

/* ---------- подвал ---------- */

.base{
    border-top: 1px solid var(--line);
    background: var(--panel);
    padding: clamp(2rem, 4vw, 3.5rem) var(--pad);
}
.base__cols{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(1rem, 3vw, 3rem);
    font-size: 13px;
}
.base__logo{ width: 40px; }
.base__dim{ color: var(--dim); }
.base__nav{ display: flex; gap: 1.5rem; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }
.base__nav a:hover{ color: var(--acc-lt); }

/* мелкий блок внешних ссылок в самом низу подвала */
.press{
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
}
.press__label{
    font-size: 10px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: #4a4f56;
    margin-bottom: .7rem;
}
.press__list{
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 11px;
    line-height: 1.4;
    color: #565c64;
}
.press__list a{ transition: color .25s; }
.press__list a:hover{ color: var(--acc-lt); }

/* ---------- адаптив ---------- */

@media (max-width: 1100px){
    /* колонки схлопываются в один слой: видео — фон экрана, текст и кнопка поверх.
       Кадр не режется по высоте, вертикальное видео ложится в экран телефона целиком. */
    .cover{ position: relative; grid-template-columns: 1fr; min-height: 100svh; }
    .cover__frame{
        position: absolute;
        inset: 0;
        z-index: 0;
    }
    .cover__frame::after{
        background: linear-gradient(0deg, var(--bg) 6%, rgba(8,9,10,.78) 42%, rgba(8,9,10,.3) 100%);
    }
    .cover__wordmark{ top: 3%; bottom: auto; left: 5%; right: auto; width: 62%; }
    .cover__panel{
        position: relative;
        z-index: 1;
        min-height: 100svh;
        justify-content: flex-end;
        background: none;
        padding-top: 5rem;
        padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
    }
    .creed, .globe{ grid-template-columns: 1fr; }
    .creed__shot{ max-height: 60svh; }
    .globe{ padding-right: var(--pad); }
    .globe__render{ margin-right: 0; }
    .qa-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
    :root{ --rail: 0px; }
    /* панель ложится сверху горизонтальной полосой */
    .rail{
        inset: 0 0 auto 0;
        width: 100%;
        height: 58px;
        flex-direction: row;
        padding: 0 16px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .rail__mark img{ width: 28px; }
    .rail__nav{ flex-direction: row; gap: 18px; }
    .rail__nav a{ writing-mode: horizontal-tb; transform: none; font-size: 10px; letter-spacing: .18em; }
    .picker__menu{ left: auto; right: 0; bottom: auto; top: calc(100% + 8px); }
    .shell{ margin-left: 0; padding-top: 58px; }
    /* первый экран целиком: заголовок, кнопка и установка Telegram помещаются без прокрутки */
    .cover__panel{ gap: 1rem; padding-top: 4.5rem; }
    .cover__lead{ font-size: clamp(1.1rem, .95rem + 1.2vw, 1.5rem); }
    .getter{ margin-top: .4rem; }
    .getter__row{ margin-top: 10px; }
    .pair{ grid-template-columns: 1fr; }
    .pair:nth-child(even) p{ text-align: left; }
    .slab{ flex: 0 0 74vw; }
    .base__cols{ grid-template-columns: 1fr; justify-items: start; gap: 1.2rem; }
}

@media (prefers-reduced-motion: reduce){
    *{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
    html{ scroll-behavior: auto; }
    .reveal{ opacity: 1; transform: none; }
}