/* Чистая главная. Вид задаёт html[data-look]: chrome, dusk, vice. Край шапки задаёт html[data-edge]: line, chrome, air.
   Цвета только токенами, коралла, бирюзы и фестона здесь нет. */
html[data-look="chrome"] {
  --base: #08090C; --plate: #121419; --lift: #1C1F26; --text: #F4F2EC; --text-2: #A9ACB3;
  --accent: #F4F2EC; --on-accent: #08090C; --accent-lit: #FFFFFF; --accent-press: #D5D3CD; --tone: #3A3D44;
}
html[data-look="dusk"] {
  --base: #060C1C; --plate: #0E1830; --lift: #17243F; --text: #FFF4E6; --text-2: #AEB8CC;
  --accent: #FF8A3D; --on-accent: #0A1226; --accent-lit: #FFA566; --accent-press: #E8742A; --tone: #6E4A33;
}
html[data-look="vice"] {
  --base: #0B0714; --plate: #170E28; --lift: #24173A; --text: #F8F1FA; --text-2: #B7ABC4;
  --accent: #FF3D8B; --on-accent: #12060F; --accent-lit: #FF6BA6; --accent-press: #E62E78; --tone: #6B2F5E;
}

/* Токены принятой шапки принимают палитру вида */
html[data-look] {
  --page: var(--base); --bar: var(--base); --bar-n: var(--base); --panel: var(--plate); --panel-n: var(--plate); --raise: var(--lift);
  --ink: var(--text); --ink-n: var(--text); --mute: var(--text-2); --bar-mute: var(--text-2);
  --coral: var(--accent); --on-coral: var(--on-accent); --on-teal: var(--on-accent); --coral-press: var(--accent-press);
  --coral-ink: var(--accent); --teal: var(--accent); --teal-ink: var(--accent); --gold: var(--accent);
  --line: color-mix(in srgb, var(--text) 13%, transparent); --teal-tint: color-mix(in srgb, var(--text) 9%, transparent); --teal-soft: color-mix(in srgb, var(--text) 17%, transparent); --coral-tint: color-mix(in srgb, var(--accent) 20%, transparent);
  --focus: var(--text); --count: var(--text); --count-glow: 0 0 0 transparent; --pill-line: transparent;
  --palm: .1; --plaque-glow: 0 0 0 0 transparent; --lit: transparent; --steel-fx: brightness(1); --sun-fx: none; --bar-shade: none;
  /* Фестона нет: слои ядра пусты, край рисуют --edge и --edge-h */
  --hem: none; --hem-lit: transparent; --hem-fx: none; --hem-off: none;
  --metal-0: #1C1E23; --metal-1: #6C717A; --metal-2: #C4C8CF; --metal-3: #FFFFFF; --metal-t: color-mix(in srgb, var(--accent) 55%, var(--metal-2));
  --back: color-mix(in srgb, var(--base) 62%, transparent); --back-fx: none;
  /* На 1440×900 единица равна 1 px. Вся страница дышит вместе с окном и остаётся в первом экране */
  --u: min(calc(100vw / 1440), calc(100vh / 900));
  --m: max(32px, 4.45vw);
  --hero-w: calc(var(--u) * 500);
  transition: none;
  color-scheme: dark;
}
html[data-look] .c-pic [data-t="n"] { opacity: 1; }
/* В хромовых цифрах, логотипе и значках отражён оранжевый закат, в кадрах тёплый свет. В чёрном хроме цвета нет совсем.
   В Вайсе матрица переводит оранжевый блик в розовый и не трогает холодный металл: поворот оттенка делал его бирюзовым */
html[data-look="chrome"] { --steel-fx: grayscale(1); }
html[data-look="vice"] { --steel-fx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='v' color-interpolation-filters='sRGB'%3E%3CfeColorMatrix values='1.083 -.244 .175 0 0 -.598 1.651 -.086 0 0 .386 .055 .587 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3C/svg%3E#v"); }
html[data-look] :is(.ck .cc-s, .ck .cc-c, .gh-brand, .gh-menu-i:not([data-i=""]), .gh-res-i) { filter: var(--steel-fx); }
html[data-look] .gh-chip::before { filter: var(--steel-fx); }
html[data-look="chrome"] :is(.door-p, .c-pic) { filter: grayscale(1); }

/* Край шапки. Одна краска на низ строки, панели, поиска и меню: --edge, толщина --edge-h */
html[data-edge="line"] {
  --edge-h: 1px;
  --edge: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 30%, transparent) 16%, color-mix(in srgb, var(--accent) 72%, transparent) 36%, var(--accent-lit) 50%, color-mix(in srgb, var(--accent) 72%, transparent) 64%, color-mix(in srgb, var(--accent) 30%, transparent) 84%, transparent);
}
/* Молдинг: блики и тёмные участки вдоль, светлая верхняя кромка и тёмная нижняя поперёк */
html[data-edge="chrome"] {
  --edge-h: 2px;
  --edge: linear-gradient(180deg, color-mix(in srgb, var(--metal-3) 20%, transparent) 0 1px, color-mix(in srgb, var(--metal-0) 34%, transparent) 1px 2px),
    linear-gradient(90deg, var(--metal-0), var(--metal-1) 6%, var(--metal-2) 10%, var(--metal-3) 11.5%, var(--metal-2) 13%, var(--metal-1) 19%, var(--metal-0) 30%, var(--metal-1) 39%, var(--metal-t) 46%, var(--metal-3) 50%, var(--metal-t) 54%, var(--metal-1) 61%, var(--metal-0) 72%, var(--metal-1) 81%, var(--metal-2) 88%, var(--metal-3) 89.5%, var(--metal-1) 94%, var(--metal-0));
}
html[data-edge="air"] { --edge-h: 0px; --edge: none; --air: 62%; }

/* Шапка */
.gh .gh-count, .gh .gh-count[data-live], .gh .gh-theme { display: none; }
.gh-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--edge-h); background: var(--edge); pointer-events: none; }
html[data-look] .gh :is(.gh-sheets, .gh-search, .gh-menu)::after { height: var(--edge-h); background: var(--edge); filter: none; animation: none; transition: none; }

/* chrome: компактная плашка, не толкает соседей. Цель нажатия остаётся 44 px */
html[data-edge="chrome"] .c-plaque { height: 34px; margin-top: -17px; border-radius: 8px; box-shadow: none; }
/* line и air: плашки нет. Плашка ядра становится полоской шириной с подпись и едет от раздела к разделу */
html:is([data-edge="line"], [data-edge="air"]) .gh-nav .c-plaque { height: 2px; margin: 0; border-radius: 0; background: none; box-shadow: none; transform: none; }
html:is([data-edge="line"], [data-edge="air"]) .gh-nav:has(.gh-link:active) .c-plaque { background: none; }
html:is([data-edge="line"], [data-edge="air"]) .c-plaque::before { content: ""; position: absolute; inset: 0 var(--nav-x); background: var(--accent); }
html[data-edge="line"] .gh-nav .c-plaque { top: auto; bottom: 0; }
html[data-edge="line"] .c-plaque::after { content: ""; position: absolute; left: var(--nav-x); right: var(--nav-x); top: 100%; height: 14px; background: radial-gradient(ellipse 50% 100% at 50% 0, color-mix(in srgb, var(--accent) 38%, transparent), transparent); pointer-events: none; }
html[data-edge="air"] .gh-nav .c-plaque { top: calc(50% + 13px); }
/* Подпись на месте и без плашки, поэтому не темнеет: при наведении становится полным цветом */
html[data-edge="line"] .gh-link { color: var(--mute); }
html:is([data-edge="line"], [data-edge="air"]) :is(.gh-link[data-on="1"], .gh-link:focus-visible) { color: var(--ink); }

/* Поиск, язык и профиль без плашек: наведение не занимает места ни в одном варианте края */
html[data-look] :is(.gh-search-btn, .gh-me, .gh-lang button) { background: none; }
html[data-edge="line"] .gh-search-btn { color: var(--mute); }
html[data-look] :is(.gh-search-btn:hover, .gh-search-btn[aria-expanded="true"], .gh-lang button:hover) { color: var(--ink); }

/* air: строка прозрачна, логотип и разделы стоят на ролике. Контраст держит затемнение цветом базы: на полную до низа шапки, в ноль ещё через 120 px */
html[data-edge="air"] .c-shade { display: none; }
html[data-edge="air"] :is(.gh-bar, .gh-chips) { background: none; transition: background-color .16s, height .25s ease; }
html[data-edge="air"] :is(.gh[data-open], .gh[data-search], .gh[data-scrolled="1"]) :is(.gh-bar, .gh-chips) { background: var(--bar); }
html[data-edge="air"] .gh::before { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: calc(100% + 120px); pointer-events: none;
  background: linear-gradient(0deg, transparent, color-mix(in srgb, var(--base) calc(var(--air) * .1), transparent) 22px, color-mix(in srgb, var(--base) calc(var(--air) * .36), transparent) 48px, color-mix(in srgb, var(--base) calc(var(--air) * .68), transparent) 76px, color-mix(in srgb, var(--base) calc(var(--air) * .92), transparent) 104px, color-mix(in srgb, var(--base) var(--air), transparent) 120px); }
/* Панель и поиск сплошные, низ с мягкой тенью. За прозрачной строкой им не спрятаться, поэтому не выезжают из-под неё, а проявляются на месте */
html[data-edge="air"] .gh .gh-search { box-shadow: 0 22px 44px -14px var(--sheet-drop); transform: translateY(-12px); transition: transform .18s, opacity .18s, visibility 0s .18s; }
html[data-edge="air"] .gh .gh-search[data-open="1"] { transform: none; transition: transform .26s var(--ease), opacity .14s; }

.gh-login { background: var(--lift); color: var(--ink); box-shadow: none; }
html[data-look] .gh-login:hover { background: var(--accent); color: var(--on-accent); }
.gh-back { transition: opacity .25s, visibility 0s .25s; }
.gh[data-open] .gh-back, .gh[data-search] .gh-back { transition: opacity .25s; }
/* У рейтинга и инструментов нет кадров вида: одноцветная версия в тоне палитры */
.gh-sheet[data-id="rating"] .c-pic i, .gh-sheet[data-id="tools"] .c-pic i { background-color: var(--tone); background-blend-mode: luminosity; }

/* Панели говорят тем же тихим голосом, что и главная. Акцент остаётся у края, у отметок при наведении и в поле поиска, подписи и метки идут вторым цветом.
   Вывеска карточки больше не плитка: у неё нет заливки, и она не заходит на картинку */
html[data-look] .gh-group-t { border-bottom: 1px solid var(--teal-soft); color: var(--mute); }
html[data-look] .gh-menu-h { border-bottom: 1px solid var(--teal-soft); }
html[data-look] :is(.gh-soon, .gh-st, .gh-st[data-st]) { padding: 0; background: none; color: var(--mute); }
html[data-look] .gh-st[data-st="reported"] { color: var(--accent); }
html[data-look] :is(.gh-news-d, .gh-res-y, .gh-esc) { color: var(--mute); }
html[data-look] .c-tag { justify-content: flex-start; margin-top: 0; padding-top: 15px; background: none; color: var(--ink); }
html[data-look] .gh-card-k { color: var(--mute); }
html[data-look] .gh-search-in { border-bottom-color: var(--teal-soft); color: var(--mute); }
html[data-look] .gh-search-in:focus-within { border-bottom-color: var(--accent); }
html[data-look] .gh-search-input { padding-left: 0; }
html[data-look] .gh-res-a { margin-inline: -12px; padding-right: 14px; border-bottom: 0; background-image: linear-gradient(var(--line), var(--line)); background-position: 50% 100%; background-size: calc(100% - 24px) 1px; background-repeat: no-repeat; }
html[data-look] .gh-res li:last-child .gh-res-a { background-image: none; }
html[data-look] .gh-res-i { width: 26px; height: 26px; }
/* Значок появляется вместе с текстом: без вспышки и поворота, а значит и без цвета в чёрном хроме */
html[data-look] .gh-sheet[data-open="1"] .gh-sheet-i { animation-name: hm-fade; animation-duration: .2s; }
@keyframes hm-fade { from { opacity: 0; } }
html[data-look] .gh-toast { background: var(--lift); color: var(--ink); }

@media (min-width: 981px) {
  html[data-look] { --gh-pad: var(--m); }
  .gh-bar { gap: clamp(20px, 3.4vw, 64px); }
  .gh-nav ul { gap: clamp(2px, calc(1.8vw - 11px), 18px); }
  /* Разделы во всю высоту строки: от её низа считаются линия и отрезок света */
  .gh-nav { display: flex; align-items: center; align-self: stretch; }
  /* Панель садится без отскока: отскок был у шторки */
  html[data-look] .gh[data-open] .gh-sheets { transition: transform .3s var(--ease); }
  /* Закрытая панель стоит сразу под строкой: её край показываем только у открытой, иначе линия двоится */
  html[data-look] .gh .gh-sheets::after { opacity: 0; transition: opacity 0s .2s; }
  html[data-look] .gh[data-open] .gh-sheets::after { opacity: 1; transition: none; }
  html[data-edge="air"] .gh .gh-sheets { visibility: hidden; opacity: 0; transform: translateY(-12px); transition: transform .18s, opacity .18s, visibility 0s .18s; }
  html[data-edge="air"] .gh[data-open] .gh-sheets { visibility: visible; opacity: 1; transform: none; box-shadow: 0 22px 44px -14px var(--sheet-drop); transition: transform .26s var(--ease), opacity .14s; }
}
@media (hover: hover) {
  html:is([data-edge="line"], [data-edge="air"]) .gh-link:hover { color: var(--ink); }
  html[data-look] .gh-tile:hover .gh-tile-i { transform: translateY(-2px); filter: var(--steel-fx) brightness(1.12); }
}
@media (min-width: 1840px) { html[data-look] { --nav-x: 10px; } }

/* Сцена: ролик на весь экран, закреплён. Пальма справа, поэтому режем левый край. Вертикаль 69 % равна высоте горизонта: он стоит на месте при любой обрезке */
.stage { position: fixed; top: 0; left: 0; right: 0; height: 100lvh; z-index: -1; overflow: hidden; background: var(--base); pointer-events: none; }
.stage-v { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 69%; opacity: 0; transition: opacity .5s; }
html[data-lit] .stage-v { opacity: 1; }
/* Если автозапуск запрещён, остаётся постер без кнопки запуска поверх кадра */
.stage-v::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.stage i { position: absolute; inset: 0; }
/* Вуаль только слева, под героем. Горизонт на 69 % высоты: от него море плавно уходит в цвет базы, под двери */
.stage-veil { background:
  linear-gradient(0deg, var(--base) 7%, color-mix(in srgb, var(--base) 80%, transparent) 17%, transparent 31%),
  linear-gradient(90deg, color-mix(in srgb, var(--base) 88%, transparent) 0, color-mix(in srgb, var(--base) 72%, transparent) 34%, transparent 56%); }
.stage-dim { background: var(--base); opacity: 0; transition: opacity .25s; }
/* Открыта панель или поиск: герой уходит вместе с фоном, иначе край панели режет заголовок и кнопку на виду */
html:has(.gh[data-open], .gh[data-search]) .hero { opacity: .3; }

/* Страница */
.hm { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: calc(100vh - var(--gh-h)); }

/* Герой: заголовок и отсчёт одной ширины, остальное небо отдано ролику */
.hero { align-self: center; padding: 0 var(--m) calc(var(--u) * 28); transition: opacity .25s; }
.hero-k { color: var(--mute); font-size: max(14px, calc(var(--u) * 14)); line-height: 1.2; }
.hero-h { margin: calc(var(--u) * 14) 0 0; font-family: var(--f-display); font-weight: 800; font-stretch: 72%; font-size: calc(var(--hero-w) * .1165); line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; }
.hero-h span { display: block; white-space: nowrap; }
html[lang="en"] .hero-h { font-size: calc(var(--hero-w) * .0985); }
.hero-c { margin-top: calc(var(--u) * 26); padding-bottom: calc(var(--u) * 22); }
.ck { --cc-h: calc(var(--hero-w) / 8.63); }
.ck [data-u="d"] { margin-right: calc(var(--cc-h) * .18); }
.ck [data-u="d"] .cc-s[data-ch="1"] { width: calc(var(--cc-h) * .53); }
.ck .cc-g { position: relative; }
.ck .cc-g::after { content: attr(data-l); position: absolute; left: 0; right: 0; top: calc(100% + 7px); color: var(--mute); font-size: max(13px, calc(var(--u) * 13)); font-weight: 500; line-height: 1; text-align: center; }
.hero-l { max-width: var(--hero-w); margin-top: calc(var(--u) * 12); color: var(--ink); font-size: max(15px, calc(var(--u) * 17)); line-height: 1.3; }
.hero-h + .hero-l { margin-top: calc(var(--u) * 20); }
.hero-a { display: flex; align-items: center; gap: calc(var(--u) * 28); margin-top: calc(var(--u) * 24); }
.hero-go { display: inline-flex; align-items: center; min-height: 46px; height: calc(var(--u) * 50); padding: 0 calc(var(--u) * 28); border-radius: 8px; background: var(--accent); color: var(--on-accent); font-size: max(16px, calc(var(--u) * 17)); font-weight: 700; white-space: nowrap; transition: background-color .15s, transform .08s; }
.hero-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); font-size: max(15px, calc(var(--u) * 16)); font-weight: 700; white-space: nowrap; }
.hero-more span { padding-bottom: 2px; background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat; transition: background-size .2s var(--ease); }
.hero-arrow { width: max(18px, calc(var(--u) * 18)); height: max(18px, calc(var(--u) * 18)); flex: none; transition: transform .16s var(--ease); }

/* Двери стоят на море. В покое кадр почти растворён, читается текст. Один переключатель --open зажигает дверь целиком */
@property --open { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --quiet { syntax: "<number>"; inherits: true; initial-value: 1; }
.doors ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.door { --open: 0; --quiet: 1; position: relative; min-width: 0; transform-origin: 50% 100%; transition: --open .25s, --quiet .25s, transform .25s var(--ease); }
.door:first-child { transform-origin: 0 100%; }
.door:last-child { transform-origin: 100% 100%; }
.door-a { position: relative; display: block; height: calc(var(--u) * 232); min-height: 176px; overflow: hidden; color: var(--ink); }
.door-a:focus-visible { outline: 0; }
.door-p { position: absolute; inset: 0; display: block; }
.door-i { display: block; width: 100%; height: 100%; object-fit: cover; opacity: calc((.36 + .64 * var(--open)) * var(--quiet)); filter: brightness(calc(.76 + .32 * var(--open))) saturate(calc(.8 + .2 * var(--open)));
  /* В покое мягкое пятно без краёв и стыков, при наведении маска раскрывается в полный прямоугольник */
  --fade: radial-gradient(ellipse calc(58% + 250% * var(--open)) calc(62% + 250% * var(--open)) at 50% 74%, var(--ink) calc(18% + 70% * var(--open)), transparent 100%);
  -webkit-mask: var(--fade); mask: var(--fade);
  transition: transform 1.4s var(--ease); }
.door-p::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--base) 12%, color-mix(in srgb, var(--base) 90%, transparent) 52%, color-mix(in srgb, var(--base) 40%, transparent) 72%, transparent 88%); }
.door-b { position: absolute; left: var(--m); right: calc(var(--u) * 20); bottom: calc(var(--u) * 32); opacity: var(--quiet); }
.door-t { margin: 0; font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: max(15px, calc(var(--u) * 17)); line-height: 1.1; letter-spacing: var(--f-ls); text-transform: uppercase; }
.door-n { min-height: 4.14em; margin-top: calc(var(--u) * 6); color: var(--mute); font-size: max(14px, calc(var(--u) * 14)); line-height: 1.38; }
.door-n span { display: block; }

@media (hover: hover) {
  html:has(.door:hover) .stage-dim { opacity: .46; }
  html:has(.door:hover) .hero { opacity: .72; }
  .doors:has(.door:hover) .door:not(:hover) { --quiet: .62; }
  .door:hover { --open: 1; z-index: 1; transform: scale(1.025); }
  .door:hover .door-i { transform: scale(1.06); }
  .hero-go:hover { background: var(--accent-lit); }
  .hero-more:hover span { background-size: 100% 2px; }
  .hero-more:hover .hero-arrow { transform: translateX(4px); }
}
html:has(.door-a:focus-visible) .stage-dim { opacity: .46; }
html:has(.door-a:focus-visible) .hero { opacity: .72; }
.doors:has(.door-a:focus-visible) .door:not(:has(.door-a:focus-visible)) { --quiet: .62; }
.door:has(.door-a:focus-visible) { --open: 1; z-index: 1; transform: scale(1.025); }
.door:has(.door-a:focus-visible) .door-i { transform: scale(1.06); }
.door:has(.door-a:focus-visible)::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--focus); pointer-events: none; }
.hero-go:active { transform: translateY(1px); background: var(--accent-press); }
.door:active { --open: 1; }

/* Первый кадр собирается целиком: до готовности шрифта и цифр строка, герой и двери не видны, home.js ждёт не дольше .8 с. Иначе подписи прыгают при смене шрифта, а цифры появляются по одной */
html:not([data-go]) :is(.gh-nav, .gh-right, .gh-chips, .hero, .doors) { visibility: hidden; }
html[data-in] :is(.gh-nav, .gh-right, .gh-chips) { animation: hm-fade .3s backwards; }

/* Появление короткое: укладывается в .6 с */
html[data-in] .hero > * { animation: hm-rise .42s var(--ease) backwards; }
html[data-in] .hero > :nth-child(2) { animation-delay: .04s; }
html[data-in] .hero > :nth-child(3) { animation-delay: .08s; }
html[data-in] .hero > :nth-child(4) { animation-delay: .12s; }
html[data-in] .hero > :nth-child(5) { animation-delay: .16s; }
html[data-in] .door { animation: hm-rise .4s var(--ease) calc(var(--i) * 30ms + .08s) backwards; }
@keyframes hm-rise { from { opacity: 0; transform: translateY(12px); } }

@media (min-width: 981px) and (max-width: 1260px) { .door-n { min-height: 5.52em; } }

/* Телефон и планшет. Ролик поднят: небо с пальмой открыто, герой стоит на тёмном море под горизонтом.
   --hz это высота горизонта: герой целиком в первом экране, даже когда адресная строка браузера открыта.
   Ролик закреплён, поэтому вуаль здесь часть героя: лист с мягким краем на горизонте едет поверх ролика вместе с текстом, и при прокрутке текст не попадает на светлое небо */
@media (max-width: 980px) {
  html[data-look] { --u: 1px; --m: 16px; --hero-w: calc(100vw - 32px); --hz: max(30lvh, min(50lvh, calc(100svh - 362px))); }
  .gh-bar { justify-content: space-between; }
  .hm { display: block; min-height: 0; }
  .stage-v { transform: translateY(calc(var(--hz) - 69lvh)); object-position: 62% 50%; }
  .stage-veil { background: none; }
  .hero { --top: calc(var(--hz) - 104px); padding: calc(var(--top) + 44px) var(--m) 28px; background: linear-gradient(180deg, transparent calc(var(--top) + 6px), color-mix(in srgb, var(--base) 88%, transparent) calc(var(--top) + 34px), var(--base) calc(var(--top) + 64px)); }
  .hero-h { margin-top: 10px; }
  .hero-c { margin-top: 18px; padding-bottom: 22px; }
  .ck .cc-g::after { top: calc(100% + 5px); }
  .hero-l { margin-top: 12px; font-size: 16px; }
  .hero-a { margin-top: 18px; }
  .hero-go { height: 50px; padding: 0 26px; }
  .hero-more { display: none; }
  .doors { background: var(--base); }
  .doors ul { grid-template-columns: minmax(0, 1fr); }
  .door-a { height: auto; min-height: 112px; }
  .door-i { opacity: calc((.62 + .38 * var(--open)) * var(--quiet)); --fade: linear-gradient(180deg, transparent, var(--ink) 18%, var(--ink) 82%, transparent); }
  .door-p::after { background: linear-gradient(90deg, var(--base) 30%, color-mix(in srgb, var(--base) 74%, transparent) 62%, transparent); }
  .door-b { position: relative; left: 0; right: 0; bottom: 0; padding: 16px 104px 16px var(--m); }
  .door-t { font-size: 17px; }
  .door-n { min-height: 0; margin-top: 5px; font-size: 14.5px; }
}
@media (min-width: 620px) and (max-width: 980px) {
  html[data-look] { --hero-w: 460px; }
  .doors ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* От 700 px идёт горизонтальный файл: пальма у правого края */
@media (min-width: 700px) and (max-width: 980px) { .stage-v { object-position: 100% 69%; } }

/* Край шапки на телефоне: линия или планка под лентой чипов, лента живёт по тем же правилам */
@media (max-width: 980px) {
  .gh-bar::after { display: none; }
  html[data-look] .gh::after { height: var(--edge-h); background: var(--edge); filter: none; animation: none; transition: none; }
  /* line и air: чипы без подложек, активный отмечен отрезком света. Значок первого чипа на одной вертикали с логотипом */
  html:is([data-edge="line"], [data-edge="air"]) .gh-chips { padding-left: 8px; }
  html:is([data-edge="line"], [data-edge="air"]) :is(.gh-chip, .gh-chip[data-on="1"], .gh-chip:active) { background: none; box-shadow: none; }
  html[data-edge="line"] .gh-chip { color: var(--mute); }
  html:is([data-edge="line"], [data-edge="air"]) :is(.gh-chip[data-on="1"], .gh-chip:active) { color: var(--ink); }
  html:is([data-edge="line"], [data-edge="air"]) .gh-chip[data-on="1"]::after { content: ""; position: absolute; left: 8px; right: 12px; bottom: -4px; height: 2px; background: var(--accent); }
  /* chrome: плашка 34 px, цель нажатия 44 px за счёт прозрачной рамки */
  html[data-edge="chrome"] .gh-chips { gap: 0; padding-left: 11px; }
  html[data-edge="chrome"] .gh-chip { border: 5px solid transparent; border-radius: 13px; background-clip: padding-box; }
  /* air: конец ленты закрывает уезжающие чипы, мягкие края не дают ему стать ящиком на ролике */
  html[data-edge="air"] .gh .c-end { padding-left: 30px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--base) 94%, transparent) 26px); -webkit-mask: linear-gradient(180deg, transparent, var(--ink) 9px, var(--ink) 43px, transparent); mask: linear-gradient(180deg, transparent, var(--ink) 9px, var(--ink) 43px, transparent); }
  html[data-edge="air"] .gh .gh-sheet { transform: translateY(-12px); transition: transform .18s, opacity .18s, visibility 0s .18s; }
  html[data-edge="air"] .gh .gh-sheet[data-open="1"] { transform: none; transition: transform .26s var(--ease), opacity .14s; }
}