/* styles.css — вид SoundStore. Всё из токенов (tokens.css), литералы — только геометрия проигрывателя и пластинки.
   Порядок: база → сигнатура (пластинка, проигрыватель) → шапка → первый экран → секции → финал → телефон (отдельная композиция). */

/* ---------- база ---------- */
html, body { overscroll-behavior: none; }
html.in-tg { height: 100%; overflow: hidden; }
html.in-tg body { height: 100%; overflow-x: clip; overflow-y: auto; -webkit-overflow-scrolling: touch; }
body { font: 400 var(--step-0)/1.5 var(--font-body); overflow-x: clip; }
::selection { background: var(--ink); color: var(--surface); }
.mono { font-family: var(--font-mono); font-weight: 500; font-size: var(--step--1); letter-spacing: var(--track-mono); text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1, h2, h3 { font-weight: 800; letter-spacing: var(--track-display); }
em { font-style: var(--slant); }
.link { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; text-decoration-color: var(--ink); transition: text-underline-offset var(--dur-micro) var(--ease-soft); }
.link:hover { text-underline-offset: 5px; }

.btn--primary { min-height: var(--btn-h); padding: 0 var(--space-6); border-radius: var(--radius-pill); font: 700 16px/1 var(--font-body); letter-spacing: 0; box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 10px 24px -12px color-mix(in oklab, var(--accent) 80%, transparent); }
.btn--primary:hover { background: color-mix(in oklab, var(--accent) 88%, var(--ink)); }
.btn .arr { font-weight: 500; transition: transform var(--dur-micro) var(--ease-soft); }
.btn:hover .arr { transform: translate(2px, -2px); }

/* ---------- сигнатура: пластинка (canvas) и проигрыватель (SVG) ---------- */
.vinyl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 20; pointer-events: none; }
.vinyl > * { display: none; }

.tt { --tt-r: 2.2% / 2.75%; position: absolute; aspect-ratio: 1000 / 800; border-radius: var(--tt-r); box-shadow: var(--signature-shadow); background: var(--signature-vinyl); }
.tt svg { display: block; max-width: none; }
.tt__body { width: 100%; height: 100%; border-radius: var(--tt-r); }
.tt__platter { position: absolute; left: 4%; top: 4.375%; width: 70%; height: auto; }
.tt__arm { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 30; pointer-events: none; overflow: visible; }
.tt__txt { font: 500 15px var(--font-mono); letter-spacing: .08em; fill: #8b8a87; }
.tt__txt--mat { font-size: 17px; fill: #3a3a3c; }
.arm, .arm__body { transform-box: view-box; transform-origin: 840px 185px; }
.arm { transform: rotate(var(--arm, 31.5deg)); }
.arm__body { transform: scale(calc(1 + var(--lift, 0) * .018)); }
.arm__shadow { transform: translate(calc(6px + var(--lift, 0) * 16px), calc(9px + var(--lift, 0) * 20px)); opacity: calc(.38 - var(--lift, 0) * .14); }
.cue__lever { transform-box: fill-box; transform-origin: 50% 100%; transform: rotate(calc(var(--lift, 0) * -40deg)); }
.strobe, .tt__mat { transform-box: fill-box; transform-origin: center; }
.strobe--b { animation: spin 46s linear infinite; }
.strobe--c { animation: spin 71s linear infinite reverse; }
.strobe--d { animation: spin 120s linear infinite; }
.tt__mat { animation: spin 1.8s linear infinite; animation-play-state: paused; }
.tt.is-empty .tt__mat { animation-play-state: running; }
.tt.is-empty .tt__arm { z-index: auto; } /* пластинка ушла с диска — растущий крупный план идёт поверх тонарма */
.hero:not(.is-live) .strobe, .hero:not(.is-live) .tt__mat { animation-play-state: paused; }
@keyframes spin { to { transform: rotate(360deg); } }

/* окна-круги: пэкшот на чёрном (спутники); фото не масштабируется */
.window { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--plate); }
.window img { width: 100%; height: 100%; object-fit: cover; }


/* ---------- шапка ---------- */
.header__inner { min-height: var(--header-h); border-bottom: 1px solid var(--edge); gap: var(--space-6); }
.logo { display: block; flex: none; padding: 9px 12px 7px; background: var(--ink); border-radius: var(--radius-plate); color: var(--surface); }
.logo svg { width: 82px; height: auto; fill: currentColor; }
.nav { margin-right: auto; margin-left: clamp(24px, 10vw, 170px); }
.nav__list { gap: 0; }
.nav__list a, .lang button, .btn { white-space: nowrap; }
.nav__list a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; font: 500 var(--step--1)/1 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; }
.nav__list li + li::before { content: '·'; font: 500 var(--step--1)/44px var(--font-mono); padding-inline: 10px; color: var(--ink-muted); }
.nav__list a:hover .nav__short { text-decoration: underline; text-underline-offset: 6px; }
.nav__no, .nav__long, .nav__extra { display: none; }
.nav .nav__a { order: 2; }
.nav .nav__b1::before { content: none !important; }
.header__actions { gap: var(--space-6); }
.lang { gap: 0; }
.lang button { min-width: 0; padding: 0 6px; font: 500 var(--step--1)/44px var(--font-mono); letter-spacing: var(--track-mono); opacity: 1; color: var(--ink-muted); }
.lang button + button::before { content: '·'; display: inline-block; margin-right: 12px; color: var(--ink-muted); }
.lang button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.header__cta { min-height: 52px; }

/* ---------- первый экран: проигрыватель — главный герой ---------- */
.hero { --tt-w: min(58vw, calc((100svh - var(--header-h) - 72px) * 1.25), 940px);
  position: relative; min-height: max(calc(100svh - var(--header-h)), calc(var(--tt-w) * .8 + 72px));
  display: flex; align-items: flex-end; padding: var(--space-7) var(--gutter) clamp(32px, 7svh, 72px); }
.hero .tt { top: 24px; right: max(16px, calc(var(--gutter) - 24px)); width: var(--tt-w); }
.hero__copy { width: calc(100vw - var(--tt-w) - 2 * var(--gutter) - 8px); display: grid; gap: var(--space-5); }
.eyebrow { color: var(--ink-muted); }
.hero__title { font-size: min(var(--step-4), calc((100vw - var(--tt-w) - 2 * var(--gutter)) / 6.1)); line-height: .93; font-weight: 800; }
.hero__title .l { display: block; }
.hero__title em { font-weight: 900; }
.hero__lead { max-width: 34ch; margin-top: var(--space-3); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-6); margin-top: var(--space-3); }

/* ПК — «пластинка с заголовком» (правка Tim: без слов вокруг предмета): вся фраза одной строкой сверху, как надпись на конверте,
   проигрыватель по центру под ней; внизу слева — кнопки, справа — короткий абзац и одна mono-строка. Много воздуха по бокам.
   Телефон — без изменений. */
.hero__year, .hero__origin { display: none; }
@media (min-width: 901px) {
  .hero { --hh: calc(100svh - var(--header-h)); --e: 56px;
    --fh: min(calc((100vw - 2 * var(--e)) / 15.1), 128px);      /* одна строка во всю ширину (RU) */
    --tt-top: calc(26px + var(--fh) * .95 + 26px);
    --tt-w: min(60vw, calc((var(--hh) - var(--tt-top) - 28px) / .8), 1080px, calc(100vw - 616px)); /* по бокам ≥ 220 px под кнопки и абзац (1280×1024, высокие окна) */
    --side: calc((100vw - var(--tt-w)) / 2 - var(--e) - 32px);
    display: block; min-height: max(var(--hh), 600px); padding: 0; }
  .hero .tt { z-index: auto; top: var(--tt-top); left: calc(50% - var(--tt-w) / 2); right: auto; }
  .hero__copy { display: contents; }
  .hero__title { position: absolute; z-index: 3; left: var(--e); right: var(--e); top: 26px; margin: 0; text-align: center;
    font-size: var(--fh); line-height: .95; font-weight: 800; white-space: nowrap; }
  .hero__title .l { display: inline; }
  .hero__title em.l { font-weight: 900; }
  .hero__lead { position: absolute; z-index: 3; right: var(--e); bottom: 54px; width: max(var(--side), 220px); max-width: 30ch; margin: 0; text-align: right;
    font-size: clamp(15px, 1.05vw, 18px); line-height: 1.5; }
  .hero__copy > .eyebrow { position: absolute; z-index: 3; right: var(--e); bottom: 24px; }
  .hero__cta { position: absolute; z-index: 3; left: var(--e); bottom: 24px; margin: 0; flex-direction: column; align-items: flex-start; gap: 14px; }
  :lang(en) .hero__title { font-size: min(calc((100vw - 2 * var(--e)) / 13.9), 128px); }
  :lang(uz) .hero__title { font-size: min(calc((100vw - 2 * var(--e)) / 16.4), 128px); }
}
/* 901–1199 (ноутбук 1024, планшет горизонтально): по центру не хватает полей — проигрыватель вправо, слева колонка:
   mono-строка вровень с верхом проигрывателя, абзац и кнопки внизу */
@media (min-width: 901px) and (max-width: 1199px) {
  .hero { --tt-w: min(calc(100vw - 2 * var(--e) - 268px), calc((var(--hh) - var(--tt-top) - 28px) / .8)); --col: calc(100vw - 2 * var(--e) - var(--tt-w) - 28px); }
  .hero .tt { left: calc(100% - var(--e) - var(--tt-w) + 24px); }
  .hero__lead { left: var(--e); right: auto; bottom: 150px; width: var(--col); max-width: var(--col); text-align: left; }
  .hero__copy > .eyebrow { left: var(--e); right: auto; bottom: auto; top: calc(var(--tt-top) + 6px); max-width: var(--col); }
}

/* ---------- сцена v2: «игла на кольцах Сатурна» (design/scene-v2.md) ----------
   Пластинка, игла, свет и чёрный — на canvas (site.js), здесь только тексты кадров поверх.
   Без JS и при reduced-motion — тексты стопкой на чёрном. */
.scene { --surface: var(--night); --ink: var(--night-ink); --ink-muted: var(--night-muted); position: relative; color: var(--ink); background: var(--night); padding: 0; }
/* Кадр — «обложка»: предмет магазина по центру на кольцах, заголовок разрезан по диагонали вокруг него
   (первая часть сверху слева, вторая курсивом снизу справа, предмет перекрывает края букв), по углам — мелкие факты.
   --ny (линия иглы) и --rl (отступ справа до серпа этикетки) ставит site.js по геометрии крупного плана. */
.scene { --ny: calc(var(--header-h) + 12svh); --rl: calc(var(--gutter) + 9vw); --ox: 46%; --oy: 58%; --ow: 34vw; --oh: 46svh; }
.scene__copy { display: grid; }
.scene__mark { position: absolute; top: 0; }
.frame { position: relative; height: 100svh; min-height: 560px; }
.frame__obj { position: absolute; z-index: 2; left: var(--ox); top: var(--oy); width: var(--ow); height: var(--oh); max-width: none; object-fit: contain;
  translate: -50% -50%; filter: none; }
.frame::after { content: ''; position: absolute; z-index: 0; left: var(--ox); top: calc(var(--oy) + 24px); width: calc(var(--ow) * 1.05); height: calc(var(--oh) * 1.12); translate: -50% -50%; pointer-events: none;
  background: radial-gradient(ellipse, rgb(0 0 0 / .72) 0%, rgb(0 0 0 / .5) 28%, transparent 68%); }
html.js .frame::after { opacity: calc(var(--io,0) * (1 - var(--oo,0))); } /* тень на бороздках стоит, предмет над ней чуть плывёт */
.frame--a2 { --ow: 18vw; --oh: 52svh; }
@media (min-width: 901px) { .frame--a2 .frame__title .w1 { font-size: 11.5vw; } .frame--a2 .frame__title .w2 { right: 31vw; } }
.frame__title { position: static; font-weight: 900; letter-spacing: var(--track-display); }
.frame__title .w1, .frame__title .w2 { position: absolute; z-index: 1; line-height: .86; white-space: nowrap; }
.frame__title .w1 { left: var(--gutter); top: calc(var(--ny) + 52px); font-size: var(--step-cover); font-weight: 900; }
.frame__title .w2 { right: var(--rl); bottom: 12svh; font-size: var(--step-cover2); font-style: var(--slant); font-weight: 900; text-align: right; }
.frame__no { position: absolute; left: var(--gutter); top: calc(var(--ny) + 22px); color: var(--ink-muted); }
.frame__lead { position: absolute; right: var(--rl); top: calc(var(--ny) + 56px); width: min(30ch, 22vw); font-size: 15px; line-height: 1.5; color: color-mix(in oklab, var(--ink) 84%, var(--surface)); }
.frame__meta { position: absolute; left: var(--gutter); bottom: 28px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-muted); line-height: 1.5; }
.frame__links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-3); }
.frame__links--row { flex-direction: row; flex-wrap: wrap; gap: 0 var(--space-5); margin-top: 0; }
.frame__links .link { display: inline-block; padding-block: 6px; text-underline-offset: 6px; font-size: 15px; color: var(--ink); }
.frame__cta { gap: var(--space-3); align-items: flex-start; }
.frame__cta .btn { margin-top: var(--space-2); }
.frame .rate { margin-top: var(--space-3); }

html.js .scene { height: var(--scene-len); padding: 0; background: transparent; }
html.js .scene__pin { position: sticky; top: 0; z-index: 25; height: 100svh; overflow: clip; pointer-events: none; }
html.js .scene__copy { position: absolute; inset: 0; display: block; }
html.js .frame { position: absolute; inset: 0; height: auto; min-height: 0; visibility: hidden; }
html.js .frame.is-vis { visibility: visible; }
html.js .frame.is-on .link, html.js .frame.is-on .btn { pointer-events: auto; }
/* смена: предмет — затухание и масштаб 0.96→1, плывёт от прокрутки; части заголовка гаснут и вспыхивают каждая на своём месте со сдвигом */
html.js .frame__obj { opacity: calc(var(--io, 0) * (1 - var(--oo, 0))); } /* transform — из site.js */
html.js .frame__title .w1 { opacity: calc(var(--i1, 0) * (1 - var(--o1, 0))); transform: translate3d(0, calc((1 - var(--i1, 0)) * 18px - var(--o1, 0) * 14px), 0);
  letter-spacing: var(--track-display); }
html.js .frame__title .w2 { opacity: calc(var(--i2, 0) * (1 - var(--o2, 0))); transform: translate3d(0, calc((1 - var(--i2, 0)) * 18px - var(--o2, 0) * 14px), 0);
  letter-spacing: var(--track-display); }
html.js .frame__title > * { text-shadow: none; }
html.js .frame__no, html.js .frame__lead, html.js .frame__meta { opacity: calc(var(--i2, 0) * (1 - var(--o1, 0))); }
html.js .scene__mark { left: 0; width: 1px; height: 1px; }

/* шапка ночью — пока пластинка в крупном плане */
.header { transition: background-color var(--dur-reveal) var(--ease-soft), border-color var(--dur-reveal) var(--ease-soft); }
.header.is-night { --surface: var(--night); --ink: var(--night-ink); --ink-muted: var(--night-muted); --edge: var(--night-line); color: var(--ink); }
.header.is-night .burger span { background: var(--ink); }

/* ---------- сторона B: «спутники» — последний кадр закреплённой сцены: пластинка садится в центр, техника собирается вокруг ---------- */
.orbit { --surface: var(--night-ink); --ink: var(--night); --ink-muted: var(--day-muted); --ox: 50%;
  --rx: min(28vw, 400px); --ry: calc((100svh - var(--header-h)) * .24); --sd: min(14vw, 24svh, 220px); --hd: min(20vw, 32svh, 300px);
  position: relative; height: calc(100svh - var(--header-h)); min-height: 600px; margin: var(--space-9) calc(-1 * var(--gutter)) calc(-1 * var(--space-9)); color: var(--ink); background: var(--surface); }
html.js .orbit { position: absolute; left: 0; right: 0; top: var(--header-h); bottom: 0; height: auto; min-height: 0; margin: 0; background: transparent; }
/* Les mots encadrent le disque et ses satellites. */
.orbit__head { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.orbit__head .eyebrow { position: absolute; left: var(--gutter); top: 24px; color: var(--ink-muted); }
.orbit__title { font-size: clamp(52px, 7.5vw, 128px); line-height: .9; font-weight: 900; }
.orbit__title .w1 { position: absolute; top: 52px; left: var(--gutter); }
.orbit__title .w2 { position: absolute; bottom: 10px; right: var(--gutter); font-size: 1.2em; }
.orbit__lead { position: absolute; left: var(--gutter); bottom: 30px; max-width: 28ch; font-size: 15px; }
.orbit__field { position: absolute; inset: 0; z-index: 2; }
.orbit__line { position: absolute; left: calc(var(--ox) - var(--rx)); top: calc(50% - var(--ry)); width: calc(var(--rx) * 2); height: calc(var(--ry) * 2);
  border: 1px solid var(--ink-muted); border-radius: 50%; opacity: .4; }
.orbit__hub { position: absolute; left: var(--ox); top: 50%; width: var(--hd); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; }
.sat { position: absolute; left: calc(var(--ox) + var(--x) - var(--sd) / 2); top: calc(50% + var(--y) - var(--sd) / 2); width: var(--sd); color: var(--ink); text-decoration: none; }
.sat--tl { --x: calc(var(--rx) * -.77); --y: calc(var(--ry) * -.64); }
.sat--tr { --x: calc(var(--rx) * .77); --y: calc(var(--ry) * -.64); }
.sat--bl { --x: calc(var(--rx) * -.77); --y: calc(var(--ry) * .64); }
.sat--br { --x: calc(var(--rx) * .77); --y: calc(var(--ry) * .64); }
.sat__img { display: block; width: 100%; }
.sat__label { position: absolute; left: 50%; top: calc(100% + 14px); translate: -50% 0; white-space: nowrap; text-underline-offset: 6px; }
.sat--tl .sat__label, .sat--tr .sat__label { top: auto; bottom: calc(100% + 14px); }
.sat:hover .sat__label { text-decoration: underline; }
.sat:focus-visible { outline: none; }
.sat:focus-visible .sat__label { outline: 2px solid var(--accent); outline-offset: 4px; }
/* появление — в момент посадки, разом, со сдвигом 70 мс, маской круга на месте: без разлёта и пружины */
html.js .orbit__line { opacity: 0; transition: opacity 1.2s var(--ease-soft) 200ms; }
html.js .sat__img { clip-path: circle(0% at 50% 50%); transition: clip-path 900ms var(--ease-out) calc(var(--i) * 70ms); }
html.js .sat__label { opacity: 0; transition: opacity var(--dur-reveal) var(--ease-soft) calc(var(--i) * 70ms + 300ms); }
html.js .orbit__head { opacity: 0; transition: opacity 500ms var(--ease-soft); }
html.js .orbit__title { letter-spacing: calc(var(--track-display) + .14em); transition: letter-spacing 1s var(--ease-out); }
html.js .orbit.is-landed .orbit__line { opacity: .4; }
html.js .orbit.is-landed .sat__img { clip-path: circle(50% at 50% 50%); }
html.js .orbit.is-landed .sat__label, html.js .orbit.is-landed .orbit__head { opacity: 1; }
html.js .orbit.is-landed .orbit__title { letter-spacing: var(--track-display); }
html.js .orbit.is-landed .orbit__head, html.js .orbit.is-landed .sat { pointer-events: auto; }

.deck__inner { max-width: var(--container); margin-inline: auto; padding: var(--space-8) var(--gutter) 0; }
.deck__howto { color: var(--ink-muted); }
.deck__howto .link { margin-left: var(--space-2); color: var(--ink); text-underline-offset: 5px; white-space: nowrap; }
/* Native scroll-snap supplies touch inertia; cards remain in the source HTML. */
.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-top: 32px; padding: 4px 0 12px; }
.tabs::-webkit-scrollbar, .rows::-webkit-scrollbar { display: none; }
.tabs button { flex: none; min-height: 48px; padding: 10px 22px; border: 1px solid var(--ink-muted); border-radius: var(--radius-pill); background: transparent; color: var(--ink); font-size: 13px; }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--surface); }
.tabs button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.catalog-nav { display: flex; justify-content: flex-end; align-items: center; gap: 20px; margin: 16px 0; }
.catalog-arrow { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--ink-muted); border-radius: 50%; background: transparent; color: var(--ink); font-size: 24px; cursor: pointer; }
.catalog-arrow:disabled { opacity: .35; cursor: default; }
.catalog-arrow:hover:enabled { color: var(--surface); background: var(--ink); }
.cols { display: block; min-width: 0; }
.col { min-width: 0; }
html.js .col:not(.is-on) { display: none; }
.col__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.rows { position: relative; --card-w: min(440px, 44vw); display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 16px max(0px, calc((100% - var(--card-w)) / 2)) 24px; cursor: grab; touch-action: pan-x pan-y; }
.rows.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.row { position: relative; flex: 0 0 var(--card-w); min-width: 0; scroll-snap-align: center; display: flex; flex-direction: column; background: color-mix(in oklab, var(--surface) 60%, white); border: 1px solid var(--edge); scale: .96; transition: scale 250ms var(--ease-soft); }
.row.is-active { scale: 1; }
/* соседние карточки: фото чистое (без серой вуали), притушен только текст */
.row__main { transition: opacity 200ms var(--ease-soft); }
.row:not(.is-active) .row__main { opacity: .5; }
.row__chip { order: -1; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: var(--night); pointer-events: none; }
.row__no { position: absolute; right: 18px; top: 16px; padding: 3px 7px; color: var(--night-ink); background: var(--night); }
.row__main { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; min-width: 0; min-height: 180px; }
.row__name { font-size: clamp(24px, 2.4vw, 38px); line-height: 1.1; font-weight: 800; letter-spacing: var(--track-display); }
.row__note { width: 100%; margin-top: 12px; color: var(--ink-muted); font-size: 14px; line-height: 1.5; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.row__act { color: var(--ink); margin-top: 24px; padding-block: 8px; text-underline-offset: 6px; }
.row__act:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
html:not(.js) .col { margin-top: 40px; }
html:not(.js) .row { scale: 1; }
html:not(.js) .row .row__main { opacity: 1; }
@media (max-width: 900px) {
  .cols { margin-left: 0; }
  .rows { position: relative; --card-w: 78vw; gap: 14px; padding-inline: 0; scroll-padding-inline: 0; }
  .row { scale: 1; }
  .row:not(.is-active) .row__main { opacity: 1; }
  .row__main { padding: 20px; }
  .catalog-nav { justify-content: flex-start; }
}
/* Витрина (JS): механика «Оборудование» powerup-go — предмет-вырезка крупно по центру, соседи ×0.58 приглушены, стрелки и счётчик
   под предметом, ниже — название, суть, действие. Композиция по центру: поля слева и справа свободны (по левому катится пластинка). */
html.js .deck__inner { text-align: center; }
html.js .deck__howto { justify-content: center; }
/* вкладки по центру, пока влезают; при переполнении — от левого края (center уводил первые за 0, туда не прокрутить) */
html.js .tabs { margin-inline: auto; width: max-content; max-width: 100%; justify-content: flex-start; scroll-padding-inline: 16px; }
/* пластинка проходит от «спутников» к витрине под строкой и вкладками: они поверх неё, на своей бумаге — читаются и на чёрном */
html.js .deck__howto, html.js .tabs { position: relative; z-index: 21; }
html.js .deck__howto > span, html.js .deck__howto .link { background: var(--surface); padding: 3px 6px; }
html.js .tabs button { background: var(--surface); }
html.js .tabs button[aria-selected="true"] { background: var(--ink); }
html.js .cols { position: relative; z-index: 21; margin: var(--space-5) auto 0; width: min(100%, 1100px); overflow: clip; overflow-clip-margin: 0;
  --img-h: clamp(280px, 30vw, 460px); --sw: clamp(250px, 27vw, 400px); --off: clamp(230px, 25vw, 380px); }
html.js .rows { position: relative; display: block; height: calc(var(--img-h) * 1.08 + 84px + 176px); padding: 0; margin: 0; overflow: visible;
  scroll-snap-type: none; cursor: grab; touch-action: pan-y; user-select: none; }
html.js .row, html.js .row.is-active { position: absolute; top: 0; left: 50%; width: var(--sw); display: flex; flex-direction: column; flex: none; margin: 0; padding: 0;
  background: none; border: 0; scale: 1; transform-origin: 50% calc(var(--img-h) / 2);
  transition: transform 600ms cubic-bezier(.22, 1, .36, 1), opacity 600ms var(--ease-soft); }
html.js .row.is-active { z-index: 3; transform: translateX(-50%); opacity: 1; }
html.js .row.is-prev { z-index: 2; transform: translateX(calc(-50% - var(--off))) scale(.58); opacity: .42; cursor: pointer; }
html.js .row.is-next { z-index: 2; transform: translateX(calc(-50% + var(--off))) scale(.58); opacity: .42; cursor: pointer; }
html.js .row.is-prev:hover, html.js .row.is-next:hover { opacity: .75; }
html.js .row.is-hidden-left { z-index: 1; transform: translateX(calc(-50% - var(--off) * 1.6)) scale(.5); opacity: 0; pointer-events: none; }
html.js .row.is-hidden-right { z-index: 1; transform: translateX(calc(-50% + var(--off) * 1.6)) scale(.5); opacity: 0; pointer-events: none; }
html.js .row__chip { display: block; order: -1; width: 100%; height: var(--img-h); aspect-ratio: auto; object-fit: contain; background: transparent; pointer-events: none;
  filter: drop-shadow(0 22px 26px rgb(40 30 15 / .22)); }
html.js .row__no { display: none; }
html.js .row__main, html.js .row:not(.is-active) .row__main { align-items: center; margin-top: calc(var(--img-h) * .08 + 84px); padding: 0; min-height: 0; opacity: 0; transition: opacity 250ms var(--ease-soft); }
html.js .row.is-active .row__main { opacity: 1; transition-delay: 220ms; }
html.js .row__name { font-size: clamp(26px, 2.6vw, 40px); }
html.js .row__note { max-width: 46ch; white-space: normal; text-align: center; }
html.js .row__act { margin-top: var(--space-4); }
html.js .catalog-nav { position: absolute; z-index: 4; top: calc(var(--img-h) * 1.08 + 16px); /* ниже края пластинки за предметом */ left: 50%; translate: -50% 0; width: max-content; margin: 0; justify-content: center; white-space: nowrap; }
@media (max-width: 900px) {
  html.js .cols { --img-h: 62vw; --sw: 70vw; --off: 50vw; width: 100%; }
  html.js .rows { height: calc(var(--img-h) * 1.08 + 80px + 190px); }
  html.js .row.is-prev, html.js .row.is-next { opacity: .36; }
  html.js .row.is-prev { transform: translateX(calc(-50% - var(--off))) scale(.55); }
  html.js .row.is-next { transform: translateX(calc(-50% + var(--off))) scale(.55); }
  html.js .catalog-nav { justify-content: center; }
  html.js .tabs { width: auto; max-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } /* лента вкладок до краёв экрана */
}
@media (prefers-reduced-motion: reduce) { html.js .row, html.js .row__main { transition: none; } }
.credit { margin-top: var(--space-7); color: var(--ink-muted); }
.rate { color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ---------- финал: конверт ---------- */
.finale { padding: calc(clamp(420px, 58svh, 640px) + 32svh) var(--gutter) var(--space-7); } /* полоса для мягкого спуска пластинки в щель */
.envelope { position: relative; z-index: 30; width: min(100%, 1200px, calc((100svh - var(--header-h) - 300px) * 1200 / 700)); min-width: min(100%, 760px); margin-inline: auto; aspect-ratio: 1200 / 700; padding: 6% 6.5% 5%;
  display: flex; flex-direction: column; justify-content: space-between; background: var(--surface); border: 2px solid var(--edge); transform: rotate(-2deg);
  box-shadow: 0 1px 2px rgb(40 30 15 / .08), 0 30px 60px -30px rgb(40 30 15 / .35); }
.envelope::before { content: ""; position: absolute; left: 6%; right: 6%; top: -4px; height: 4px; border-radius: 50%; background: var(--ink); box-shadow: 0 -3px 8px rgb(14 14 14 / .15); }
.envelope__logo { width: 82%; }
.envelope__logo svg { width: 100%; height: auto; max-width: none; }
.envelope__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5) var(--space-7); }
.envelope__tel { font: 800 clamp(40px, 4.6vw, 64px)/1 var(--font-display); letter-spacing: var(--track-display); text-decoration: none; font-variant-numeric: tabular-nums; }
.envelope__tel:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.envelope__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-6); }

.footer { padding: var(--space-6) 0 var(--space-7); }
.footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); color: var(--ink-muted); }
.footer__links { display: flex; gap: var(--space-5); }
.footer__links a { display: inline-block; padding-block: 12px; text-decoration: none; color: var(--ink); }
.footer__links a:hover { text-decoration: underline; text-underline-offset: 5px; }

.dock { display: none; }

/* ---------- шапка уже 1200: меню уходит в бургер, языки и кнопка остаются (UZ в одну строку требует ~1155 px) ---------- */
@media (max-width: 1199px) {
  .nav { display: none; }
  .burger { display: block; }
  .burger span { left: 8px; right: 8px; }
  .mobile-menu { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; overflow-y: auto; display: flex; flex-direction: column; padding: var(--space-6) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 0; }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu__eyebrow { color: var(--ink-muted); margin-bottom: var(--space-5); }
  .mobile-menu .nav__list { display: block; border-bottom: 1px solid var(--line); }
  .mobile-menu .nav__list li::before { content: none; }
  .mobile-menu .nav__extra { display: list-item; list-style: none; }
  .mobile-menu .nav__list a { display: flex; align-items: baseline; gap: var(--space-5); width: 100%; min-height: 72px; padding: var(--space-4) 0; border-top: 1px solid var(--line); font: 800 30px/1.1 var(--font-display); letter-spacing: var(--track-display); text-transform: none; }
  .mobile-menu .nav__no { display: inline; width: 28px; flex: none; font: 500 var(--step--1)/1 var(--font-mono); letter-spacing: var(--track-mono); color: var(--ink-muted); }
  .mobile-menu .nav__list a.is-current .nav__no { color: var(--accent); }
  .mobile-menu .nav__short { display: none; }
  .mobile-menu .nav__long { display: inline; }
  .mobile-menu .lang { order: 3; margin-top: var(--space-6); }
  .mobile-menu .lang button { font-size: 15px; padding: 0 8px 0 0; }
  .mobile-menu__tg { order: 4; align-self: flex-start; margin-top: var(--space-5); padding-block: 8px; }

}
@media (min-width: 901px) and (max-width: 1199px) {
  .mobile-menu .lang { display: none; }
  .header__actions { gap: var(--space-5); }
}
@media (min-width: 1200px) {
  .mobile-menu { display: none !important; }
}

/* ---------- планшет и узкий ПК ---------- */
@media (max-width: 1199px) and (min-width: 901px) {

}

/* ---------- телефон: своя композиция (direction §Телефон; сцена v2 — свой кадр) ---------- */
@media (max-width: 900px) {
  .header__inner { gap: var(--space-3); }
  .logo { padding: 7px 10px 5px; }
  .logo svg { width: 70px; }

  .hero { flex-direction: column; align-items: stretch; min-height: 0; padding: var(--space-4) var(--gutter) var(--space-8); }
  .hero .tt { order: -1; }
  .hero .tt { position: relative; top: auto; right: auto; width: 100%; }
  .hero__copy { width: auto; margin-top: var(--space-6); gap: var(--space-4); }
  .hero__title { font-size: min(var(--step-4), 13.2vw); line-height: .96; } /* «сводят хиты» одной строкой и на 320 */
  .hero__title .l { display: inline; }
  .hero__title .l:nth-child(1), .hero__title .l:nth-child(2) { display: block; }
  .hero__lead { margin-top: 0; font-size: 16px; }
  .hero__cta .btn { display: none; }
  .hero__cta { margin-top: 0; }

  /* сцена: тексты в нижней трети над закреплённой кнопкой Uzum, игла сверху */
  /* кадр телефона: первая часть сверху, предмет по центру крупно, вторая снизу справа, факты мелко над кнопкой */
  .scene { --ox: 50%; --oy: 54%; --ow: 62vw; --oh: 31svh; --rl: var(--gutter); } /* предмет заходит на низ первой части, слово читается целиком */
  .frame--a2 { --ow: 34vw; --oh: 40svh; }
  .frame__title .w1 { top: calc(var(--ny) + 64px); }
  .frame--a2 { --ox: 40%; --oy: 58%; } /* микрофон левее и ниже — «Дилер» и «Soyuz» читаются целиком */
  .frame--a2 .w1 { font-size: 14vw; }
  .frame__title .w2 { white-space: normal; max-width: calc(100vw - 2 * var(--gutter)); bottom: calc(var(--btn-h) + max(var(--gutter), env(safe-area-inset-bottom)) + 74px); }
  .frame__no { top: calc(var(--ny) + 40px); max-width: calc(100vw - 2 * var(--gutter) - 12px); font-size: 10px; line-height: 1.45; }
  .frame__lead { display: none; }
  .frame__meta { bottom: calc(var(--btn-h) + max(var(--gutter), env(safe-area-inset-bottom)) + 16px); right: var(--gutter); gap: 2px; font-size: 11px; }
  .frame__cta { gap: 2px; }
  .frame__cta .btn { display: none; }
  .frame__cta .mono { display: none; }
  .frame__links .link { font-size: 14px; padding-block: 4px; }
  html.js .frame__title > * { filter: none; }

  /* спутники 2×2 вокруг пластинки, подписи снаружи; заголовок сверху одной строкой */
  .orbit { --wb: calc(100vw - 2 * var(--gutter)); --gap: calc(var(--wb) * .2); --lab: 30px;
    --sd: min(calc(var(--wb) * .44), calc((100svh - var(--header-h) - var(--btn-h) - 236px - var(--gap)) / 2)); --hd: min(calc(var(--wb) * .37), calc(var(--sd) * 1.05));
    display: flex; flex-direction: column; height: auto; min-height: 0; padding: var(--space-7) var(--gutter); }
  html.js .orbit { justify-content: center; padding: var(--space-4) var(--gutter) calc(var(--btn-h) + 40px); }
  .orbit__head { position: static; width: auto; }
  .orbit__head .eyebrow { top: 16px; }
  .orbit__title { font-size: clamp(32px, 10vw, 64px); line-height: .94; }
  .orbit__title .w1 { top: 42px; }
  .orbit__title .w2 { bottom: calc(var(--btn-h) + max(var(--gutter), env(safe-area-inset-bottom)) + 22px); right: var(--gutter); }
  .orbit__lead { display: none; }
  .orbit__field { position: relative; inset: auto; display: grid; grid-template-columns: 1fr 1fr; row-gap: var(--gap); margin-top: var(--space-5); }
  .orbit__line { left: calc(var(--sd) / 2); width: calc(var(--wb) - var(--sd)); top: calc(var(--lab) + var(--sd) / 2); height: calc(var(--sd) + var(--gap)); }
  .orbit__hub { left: 50%; top: calc(var(--lab) + var(--sd) + var(--gap) / 2); }
  .sat { position: relative; left: auto; top: auto; display: flex; flex-direction: column; gap: 8px; }
  .sat--tl, .sat--tr { flex-direction: column-reverse; }
  .sat--tr, .sat--br { justify-self: end; }
  .sat__label { position: static; translate: none; align-self: center; line-height: 22px; }

  .deck { padding-bottom: var(--space-8); }
  .deck__inner { padding-top: var(--space-7); }


  .finale { padding: 90svh var(--gutter) var(--space-5); }
  .envelope { width: 100%; min-width: 0; aspect-ratio: auto; padding: var(--space-8) var(--space-5) var(--space-6); gap: var(--space-8); transform: rotate(-2deg); }
  .envelope__logo { width: 100%; }
  .envelope__foot { flex-direction: column; align-items: flex-start; }
  .envelope__tel { font-size: 40px; }
  .envelope__cta .btn { display: none; }

  .footer__inner { flex-direction: column; }
  .dock { display: block; position: fixed; z-index: 40; left: var(--gutter); right: var(--gutter); bottom: max(var(--gutter), env(safe-area-inset-bottom)); }
  .dock .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .strobe, .tt__mat { animation: none; }
  html.js .sat__img { clip-path: none; transition: none; }
  html.js .sat__label, html.js .orbit__head { opacity: 1; transition: none; }
  html.js .orbit__title { letter-spacing: var(--track-display); transition: none; }
  html.js .orbit { position: relative; top: auto; height: calc(100svh - var(--header-h)); margin: var(--space-9) 0 0; background: var(--surface); }
  /* пластинка в центре орбиты — статичная, кодом (canvas под бумагой орбиты не виден) */
  html.js .orbit__hub { background: radial-gradient(circle, var(--paper, #EFEAE0) 0 1.6%, var(--accent) 2% 17%, #0e0e0e 17.6% 18.4%, transparent 18.6%),
    repeating-radial-gradient(circle, #121212 0 2px, #1d1d1d 2px 3px), #111; box-shadow: 0 18px 40px -18px rgb(14 14 14 / .5); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  html.js .orbit { height: auto; padding: var(--space-7) var(--gutter); }
  html.js .orbit__lead { display: block; }
  html.js .orbit__line { opacity: .4; transition: none; }
  /* заголовок и подпись — обычным потоком над полем (абсолютная раскладка рассчитана на закреплённый экран) */
  html.js .orbit__head .eyebrow, html.js .orbit__title .w1, html.js .orbit__title .w2 { position: static; display: block; }
  html.js .orbit__title .w2 { text-align: right; margin-top: 4px; }
  html.js .orbit__lead { position: static; margin-top: var(--space-4); }
}
/* reduced на любой ширине: сцена — статичные кадры подряд (на ПК раньше все кадры ложились друг на друга) */
@media (prefers-reduced-motion: reduce) {
  html.js .scene { height: auto; padding: 0; background: var(--night); }
  html.js .scene__pin { position: relative; height: auto; overflow: visible; pointer-events: auto; }
  html.js .scene__copy { position: relative; inset: auto; display: grid; }
  html.js .frame { position: relative; inset: auto; height: 100svh; min-height: 560px; visibility: visible; }
  html.js .frame__obj, html.js .frame__title .w1, html.js .frame__title .w2, html.js .frame__no, html.js .frame__lead, html.js .frame__meta { opacity: 1; transform: none; filter: none; letter-spacing: var(--track-display); text-shadow: none; }
  html.js .frame__no, html.js .frame__meta { letter-spacing: var(--track-mono); }
  html.js .frame .link, html.js .frame .btn { pointer-events: auto; }
}

/* Canvas raster work is frozen in layers; only the needle and dust repaint. */
.vinyl-close, .vinyl-record { position: fixed; left: 0; top: 0; z-index: 20; pointer-events: none; visibility: hidden; }
.vinyl-close img, .vinyl-needle img { max-width: none; }
.vinyl-close { width: 100%; height: 100%; transform-origin: 0 0; will-change: transform, opacity; }
.vinyl-close.is-active, .vinyl-record.is-active { visibility: visible; }
.vinyl-close__light { will-change: transform, opacity; }
.vinyl-record { transform-origin: 0 0; will-change: transform; }
.vinyl-record > canvas, .vinyl-record > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.vinyl-record > .vinyl-record__label { inset: 30%; width: 40%; height: 40%; will-change: transform; }
.frame.is-vis .frame__obj, .frame.is-vis .w1, .frame.is-vis .w2 { will-change: transform, opacity; }
.strobe { will-change: transform; }

.vinyl-needle { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 20; transform-origin: 0 0; pointer-events: none; visibility: hidden; will-change: transform; }
.vinyl-needle i { display: block; background: linear-gradient(90deg,#4d4c4a,#f6f5f2 30%,#b9b8b5 52%,#2f2e2d); }
.vinyl-clock { position: fixed; left: 0; top: 0; z-index: 20; color: var(--night-ink); font-size: 12px; white-space: nowrap; pointer-events: none; visibility: hidden; will-change: transform; }
.vinyl-needle.is-active, .vinyl-clock.is-active { visibility: visible; }
.vinyl-close__flash { will-change: opacity; }

.arm, .arm__body, .tt__mat { will-change: transform; }

.vinyl-record.is-spinning > .vinyl-record__label { animation: vinyl-label-spin 1.8s linear infinite; }
@keyframes vinyl-label-spin { from { transform: rotate(var(--idle-angle,0rad)); } to { transform: rotate(calc(var(--idle-angle,0rad) + 1turn)); } }

.page-paused .vinyl-record__label, .page-paused .strobe, .page-paused .tt__mat { animation-play-state: paused !important; }


@media (prefers-reduced-motion: reduce) { html.js .frame::after { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .vinyl-close, .vinyl-record, .vinyl-needle, .vinyl-clock { display: none !important; }
}
@media (max-width: 900px) {
  .sat__label { max-width: calc(var(--wb) * .5); white-space: normal; }
  .sat--tl .sat__label, .sat--bl .sat__label { align-self: flex-start; text-align: left; }
  .sat--tr .sat__label, .sat--br .sat__label { align-self: flex-end; text-align: right; }
}
/* низкий телефон (320×568, Telegram с клавишами): проигрыватель меньше — заголовок целиком над кнопкой Uzum */
@media (max-width: 900px) and (max-height: 640px) {
  .hero .tt { width: 74%; align-self: center; }
  .hero__copy { margin-top: var(--space-5); }
}
/* 320–360: подписи спутников в одну строку (переносили «B1 ·» отдельно и наезжали на заголовок) */
@media (max-width: 360px) {
  .sat__label { white-space: nowrap; max-width: none; font-size: 10px; letter-spacing: .04em; }
}