/* ============================================================================
   JEWELRY COMPONENTS (DIAMAS) — часть 1.

   Что взято у ориентиров и зачем:
     · Messika — полноэкранный кампейн-герой с одной фразой и единственным
       призывом; крупные плитки категорий без описаний; на карточке товара
       переключатель металла (у нас — пробы); редакционный блок-история;
     · Silvexcraft (бенчмарк из брифа) — счётчики каталога и разделы по металлу;
     · премиальная моторика продуктовой съёмки — узкий блик, медленно идущий
       по поверхности, и сдержанный наезд вместо вращений и карусели.

   Материал бренда: розовый металл градиентом #FBC7B7 → #ECBCAD → #8D5B4E,
   фирменные фоны из CMYK-листа, геометрический Jost как в вордмарке DIAMAS.
   ==========================================================================*/

@import url('fonts.css');

:root {
  --navy: #091852;
  --teal: #003D46;
  --burgundy: #490024;
  --rose: #DDA392;
  --metal: #ECBCAD;
  --brown: #8D5B4E;
  --peach: #FBC7B7;

  --bg: #091852;
  --bg-deep: #04091F;
  --ink: #FFF;
  --ink-2: rgba(255, 255, 255, .68);
  --ink-3: rgba(255, 255, 255, .4);
  --hair: rgba(236, 188, 173, .16);
  --hair-2: rgba(236, 188, 173, .34);
  --surface: rgba(255, 255, 255, .04);
  --surface-2: rgba(255, 255, 255, .08);
  --accent: var(--metal);
  --ivory: #F6EFE8;
  --ivory-ink: #22110C;
  --logo-filter: none;
  --shadow: 0 30px 80px rgba(0, 0, 0, .5);
  --metal-grad: linear-gradient(112deg, #FBC7B7 0%, #ECBCAD 32%, #C08A78 60%, #8D5B4E 100%);

  --display: 'Jost', 'Century Gothic', system-ui, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --t: 260ms cubic-bezier(.22, .61, .36, 1);
  --slow: 720ms cubic-bezier(.16, .84, .28, 1);
  --pad: clamp(20px, 6vw, 118px);
}

html[data-theme="teal"] { --bg: #003D46; --bg-deep: #001B20; }
html[data-theme="burgundy"] { --bg: #490024; --bg-deep: #22000F; }
html[data-theme="rose"] {
  --bg: #DDA392; --bg-deep: #C2836F;
  --ink: #24100B;
  --ink-2: rgba(36, 16, 11, .76);
  --ink-3: rgba(36, 16, 11, .48);
  --hair: rgba(36, 16, 11, .16);
  --hair-2: rgba(36, 16, 11, .3);
  --surface: rgba(255, 255, 255, .3);
  --surface-2: rgba(255, 255, 255, .5);
  --accent: #6E3327;
  --ivory: #FFFAF6;
  --logo-filter: brightness(0) invert(1);
  --shadow: 0 24px 60px rgba(90, 40, 26, .24);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font: 300 16px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background var(--t), color var(--t);
}
body.is-locked { overflow: hidden; }

/* глубина: подсветки в тон металла и уход в тёмное к низу экрана */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(80vw 60vh at 82% -10%, color-mix(in srgb, var(--metal) 12%, transparent), transparent 60%),
    radial-gradient(60vw 50vh at 4% 20%, color-mix(in srgb, var(--metal) 6%, transparent), transparent 56%),
    linear-gradient(180deg, transparent 45%, var(--bg-deep) 100%);
  transition: background var(--t);
}
/* зерно: снимает пластиковую плоскость заливки */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 { font-family: var(--display); font-weight: 200; margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

.skip { position: absolute; left: -9999px; background: var(--ink); color: var(--bg); padding: 10px 16px; z-index: 99; }
.skip:focus { left: 12px; top: 12px; }

/* ---------- ЗАСТАВКА ---------- */
.intro {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: var(--bg-deep); overflow: hidden;
  transition: opacity 620ms ease, visibility 620ms;
}
.intro.is-out { opacity: 0; visibility: hidden; }
.intro__logo { width: min(320px, 62vw); animation: introRise 900ms cubic-bezier(.16, .84, .28, 1) both; }
.intro__sweep {
  position: absolute; top: 0; bottom: 0; width: 46vw;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent);
  animation: sweep 1500ms cubic-bezier(.4, 0, .2, 1) 260ms both;
}
@keyframes introRise { from { opacity: 0; transform: translateY(14px) scale(.985) } to { opacity: 1; transform: none } }
@keyframes sweep { from { left: -50vw } to { left: 110vw } }

/* ---------- ТИПОГРАФИКА ---------- */
.kicker {
  margin: 0 0 22px; font-family: var(--display); font-size: 10.5px;
  letter-spacing: .3em; text-transform: uppercase; color: var(--accent);
}
.kicker--dark { color: var(--brown); }

.display {
  font-size: clamp(40px, 7.2vw, 104px); line-height: .96; letter-spacing: -.025em;
  white-space: pre-line;
}
.display em {
  font-style: normal;
  background: var(--metal-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.display--dark { color: var(--ivory-ink); font-size: clamp(30px, 4.2vw, 62px); }

.h2 { font-size: clamp(28px, 4vw, 58px); line-height: 1.02; letter-spacing: -.02em; }
.sub { max-width: 62ch; margin: 20px 0 0; color: var(--ink-2); font-size: clamp(15px, 1.1vw, 17px); }
.lead { max-width: 46ch; margin: 30px 0 0; color: var(--ink-2); font-size: clamp(15.5px, 1.2vw, 18.5px); }
.note { margin: 22px 0 0; font-size: 13px; color: var(--ink-3); max-width: 82ch; }
.link {
  font-family: var(--display); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  border-bottom: 1px solid var(--hair-2); padding-bottom: 5px; transition: border-color var(--t), color var(--t);
}
.link:hover { border-color: var(--accent); color: var(--accent); }

.num, .spec td, .live__v, .nums__grid dt, .code__mass { font-variant-numeric: tabular-nums; }

/* ---------- ШАПКА ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: 26px; padding: 22px var(--pad);
  transition: padding var(--t), background var(--t), border-color var(--t), backdrop-filter var(--t);
  border-bottom: 1px solid transparent;
}
.bar.is-stuck {
  padding: 12px var(--pad);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(16px) saturate(120%);
  border-bottom-color: var(--hair);
}
.bar__nav { display: flex; gap: 28px; margin-left: auto; font-family: var(--display); font-size: 11.5px; letter-spacing: .17em; text-transform: uppercase; }
.bar__nav a { position: relative; color: var(--ink-2); padding-bottom: 4px; transition: color var(--t); }
.bar__nav a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--metal-grad); transition: width var(--t); }
.bar__nav a:hover { color: var(--ink); }
.bar__nav a:hover::after { width: 100%; }
.bar__lang { display: flex; gap: 2px; }
.lang { background: none; border: 0; color: var(--ink-3); font-family: var(--display); font-size: 11.5px; letter-spacing: .16em; padding: 5px 9px; cursor: pointer; transition: color var(--t); }
.lang:hover { color: var(--ink); }
.lang.is-on { color: var(--ink); border-bottom: 1px solid var(--accent); }
.bar__themes { display: flex; gap: 9px; }
.sw { width: 17px; height: 17px; border-radius: 50%; padding: 0; cursor: pointer; border: 1px solid rgba(255, 255, 255, .3); transition: transform var(--t), box-shadow var(--t); }
.sw:hover { transform: scale(1.2); }
.sw.is-on { box-shadow: 0 0 0 1px var(--bg), 0 0 0 2px var(--accent); }
.sw--navy { background: #091852 } .sw--teal { background: #003D46 }
.sw--burgundy { background: #490024 } .sw--rose { background: #DDA392 }

.logo { filter: var(--logo-filter); }
.logo--sm { height: 25px; width: auto; }

/* ---------- ГЕРОЙ ---------- */
.stagehero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding: 0 var(--pad) clamp(70px, 12vh, 140px); overflow: hidden; }
.stagehero__bg { position: absolute; inset: 0; z-index: 0; }
.stagehero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 66% 42%;
  filter: saturate(1.06) contrast(1.05);
  transform: scale(1.06);
  animation: kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns { from { transform: scale(1.06) translate3d(0, 0, 0) } to { transform: scale(1.16) translate3d(-1.6%, -1.4%, 0) } }
.stagehero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 2%, color-mix(in srgb, var(--bg) 68%, transparent) 34%, transparent 72%),
    linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 18%, transparent) 42%, color-mix(in srgb, var(--bg) 34%, transparent) 100%);
}
/* пятно света идёт за курсором — кадр «оживает» без видео */
.stagehero__spot {
  position: absolute; width: 46vw; aspect-ratio: 1; border-radius: 50%;
  left: var(--sx, 70%); top: var(--sy, 40%); translate: -50% -50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--metal) 16%, transparent), transparent 62%);
  transition: left 900ms cubic-bezier(.16, .84, .28, 1), top 900ms cubic-bezier(.16, .84, .28, 1);
  pointer-events: none;
}
.stagehero__inner { position: relative; z-index: 1; max-width: 1080px; }
.cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 42px; }

.btn {
  display: inline-block; padding: 15px 32px; cursor: pointer; border: 0;
  font-family: var(--display); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); background: none; transition: transform var(--t), filter var(--t), background var(--t), color var(--t), border-color var(--t);
}
.btn--primary { color: #22110C; background: var(--metal-grad); }
.btn--primary:hover { transform: translateY(-2px); filter: brightness(1.07); }
.btn--ghost { border: 1px solid var(--hair-2); }
.btn--ghost:hover { border-color: var(--accent); background: var(--surface); transform: translateY(-2px); }
.btn--dark { border: 1px solid rgba(34, 17, 12, .28); color: var(--ivory-ink); }
.btn--dark:hover { background: var(--ivory-ink); color: var(--ivory); transform: translateY(-2px); }

.scroll {
  position: absolute; right: var(--pad); bottom: clamp(70px, 12vh, 140px); z-index: 1;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--display); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3);
}
.scroll i { display: block; width: 1px; height: 58px; background: linear-gradient(180deg, var(--accent), transparent); animation: drop 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes drop { 0%, 100% { transform: scaleY(.4); opacity: .5 } 50% { transform: scaleY(1); opacity: 1 } }

/* ---------- СЕКЦИИ ---------- */
.wrap { position: relative; padding: clamp(74px, 11vw, 168px) var(--pad); }
.sechead { display: flex; gap: 30px; align-items: end; justify-content: space-between; flex-wrap: wrap; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--slow), transform var(--slow); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- ПЛИТКИ РАЗДЕЛОВ ---------- */
.tiles { padding: clamp(74px, 11vw, 150px) var(--pad) 0; }
.tiles__head { max-width: 900px; }
.tiles__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; margin-top: clamp(34px, 5vw, 68px); background: var(--hair); }
/* Съёмка в каталоге снята на белом и в небольшом разрешении, поэтому плитка
   светлая и кадр в неё вписывается целиком: ничего не растягивается, а светлая
   полоса после тёмного героя задаёт ритм страницы. */
.tile {
  position: relative; display: flex; flex-direction: column; border: 0; padding: 0; cursor: pointer;
  aspect-ratio: 4 / 5; overflow: hidden; background: var(--ivory); text-align: left; color: var(--ivory-ink);
}
.tile img {
  flex: 1; width: 100%; min-height: 0; object-fit: contain; padding: clamp(20px, 3vw, 40px) clamp(16px, 2vw, 34px) 8px;
  transition: transform 900ms cubic-bezier(.16, .84, .28, 1);
}
.tile__veil { display: none; }
.tile__body { position: relative; padding: 0 26px 26px; }
.tile__n { margin: 0 0 10px; font-family: var(--display); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(34, 17, 12, .5); }
.tile h3 { font-size: clamp(19px, 1.6vw, 25px); color: var(--ivory-ink); }
.tile__go { margin: 12px 0 0; font-family: var(--display); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--brown); opacity: 0; transform: translateY(6px); transition: opacity var(--t), transform var(--t); }
.tile:hover img { transform: scale(1.05); }
.tile:hover .tile__go { opacity: 1; transform: none; }
.tile::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--metal-grad); transform: scaleX(0); transform-origin: left; transition: transform var(--slow); }
.tile:hover::after { transform: scaleX(1); }
.tile:disabled { cursor: default; }
.tile:disabled .tile__go { display: none; }

/* ---------- РЕДАКЦИОННАЯ ПОЛОСА ---------- */
/* Тёмная секция с образцами на светлых подложках: страницы каталога сняты на
   белом, поэтому полосы живут на айвори, а ритм остаётся тёмным. */
.story {
  padding: clamp(70px, 10vw, 150px) var(--pad);
  display: grid; grid-template-columns: 44fr 56fr; gap: clamp(30px, 6vw, 84px); align-items: center;
  border-top: 1px solid var(--hair);
}
.story__p { max-width: 52ch; margin: 26px 0 34px; color: var(--ink-2); font-size: clamp(15px, 1.1vw, 17.5px); }
.story__bands { display: flex; flex-direction: column; gap: 12px; }
.story__plate {
  background: var(--ivory); padding: 6px 10px; opacity: 0; transform: translateX(26px);
  transition: opacity var(--slow), transform var(--slow);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .28);
}
.story__bands img { width: 100%; height: auto; mix-blend-mode: multiply; }
.story.is-in .story__plate { opacity: 1; transform: none; }
.story.is-in .story__plate:nth-child(2) { transition-delay: 130ms }
.story.is-in .story__plate:nth-child(3) { transition-delay: 260ms }

/* ---------- ИЗБРАННОЕ ---------- */
.sel { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: clamp(18px, 2vw, 32px); margin-top: clamp(34px, 4vw, 60px); }
.selcard { position: relative; cursor: pointer; border: 0; background: none; padding: 0; text-align: left; color: inherit; }
.selcard__stage {
  position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 14%, #FFFFFF 0%, var(--ivory) 66%, #EADFD4 100%);
  box-shadow: inset 0 0 0 1px rgba(34, 17, 12, .07), 0 18px 40px rgba(0, 0, 0, .26);
}
.selcard__stage img {
  max-width: min(66%, 190px); max-height: min(62%, 170px); width: auto;
  mix-blend-mode: multiply;
  transition: transform 700ms cubic-bezier(.16, .84, .28, 1);
}
.selcard:hover .selcard__stage img { transform: scale(1.07) translateY(-4px); }
.selcard__stage::after {                    /* узкий блик по плашке при наведении */
  content: ''; position: absolute; top: 0; bottom: 0; width: 42%; left: -45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
  mix-blend-mode: overlay;
}
.selcard:hover .selcard__stage::after { animation: gleam 1100ms cubic-bezier(.4, 0, .2, 1); }
@keyframes gleam { to { left: 110% } }
.selcard__code { margin: 18px 0 0; font-family: var(--display); font-size: 21px; letter-spacing: .06em; }
.selcard__meta { margin: 6px 0 0; font-size: 12px; color: var(--ink-3); }
.selcard__mass { margin: 12px 0 0; font-size: 15px; color: var(--accent); font-variant-numeric: tabular-nums; }
.selcard__ks { display: flex; gap: 7px; margin: 14px 0 0; flex-wrap: wrap; }
.kdot {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--hair-2); cursor: pointer;
  font: 300 8.5px/1 var(--sans); color: var(--ink-3); background: none;
  display: grid; place-items: center; transition: all var(--t); font-variant-numeric: tabular-nums;
}
.kdot:hover { border-color: var(--accent); color: var(--ink); }
.kdot.is-on { background: var(--metal-grad); border-color: transparent; color: #22110C; }

/* ---------- ЦИФРЫ ---------- */
.nums { padding: clamp(60px, 8vw, 120px) var(--pad); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.nums__h { max-width: 20ch; }
.nums__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 44px 30px; margin: clamp(34px, 4vw, 60px) 0 0; }
.nums__cell { display: flex; flex-direction: column; }
.nums__grid dt { font-family: var(--display); font-weight: 200; font-size: clamp(46px, 6vw, 88px); line-height: 1; background: var(--metal-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nums__grid dd { margin: 14px 0 0; font-family: var(--display); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- ПАНЕЛЬ ФИЛЬТРОВ ---------- */
.panel { display: flex; gap: 24px; flex-wrap: wrap; align-items: end; margin-top: clamp(30px, 4vw, 52px); padding: 26px 0 0; border-top: 1px solid var(--hair-2); }
.fld { display: flex; flex-direction: column; gap: 9px; min-width: 124px; }
.fld--grow { flex: 1 1 300px; }
.fld label { font-family: var(--display); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.fld input, .fld select {
  background: none; color: var(--ink); font: 300 15.5px var(--sans);
  border: 0; border-bottom: 1px solid var(--hair-2); padding: 9px 2px; border-radius: 0;
  transition: border-color var(--t);
}
.fld select { appearance: none; }
.fld input:focus, .fld select:focus { outline: 0; border-bottom-color: var(--accent); }
.fld option { background: var(--bg); color: var(--ink); }
html[data-theme="rose"] .fld option { background: #F3D4C8; }

.chips { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 28px; }
.chip { position: relative; padding: 6px 0; border: 0; background: none; color: var(--ink-3); font-family: var(--display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color var(--t); }
.chip::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--metal-grad); transition: width var(--t); }
.chip:hover { color: var(--ink) } .chip:hover::after { width: 100% }
.chip.is-on { color: var(--ink) } .chip.is-on::after { width: 100% }
.chip:disabled { opacity: .3; cursor: not-allowed }

/* ---------- СЦЕНА КАТАЛОГА ---------- */
.matrix__body { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(24px, 3vw, 54px); margin-top: clamp(30px, 4vw, 54px); align-items: start; }

.stagecard { position: relative; padding: clamp(24px, 3vw, 46px); background: var(--surface); border-top: 1px solid var(--hair-2); }
/* Миниатюры каталога сняты на белом. Возвращать им фон честнее, чем вырезать:
   на кадрах от 45×19 px контур рвётся. Поэтому предмет лежит на светлой
   студийной плашке — как в печатном каталоге, только с мягким светом. */
.stagecard__stage {
  position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 12%, #FFFFFF 0%, var(--ivory) 62%, #EADFD4 100%);
  box-shadow: inset 0 0 0 1px rgba(34, 17, 12, .07), 0 26px 60px rgba(0, 0, 0, .34);
}
.stagecard__stage img {
  max-width: min(46%, 330px); max-height: min(74%, 290px); width: auto;
  mix-blend-mode: multiply;
  animation: rise var(--slow) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.985) } to { opacity: 1; transform: none } }
.stagecard__empty { display: grid; place-items: center; gap: 18px; aspect-ratio: 16 / 10; color: var(--ink-3); font-family: var(--display); letter-spacing: .2em; text-transform: uppercase; font-size: 11px; }
.stagecard__empty span { width: 62px; height: 62px; border: 1px solid rgba(141, 91, 78, .45); transform: rotate(45deg); }
.stagecard__stage .stagecard__empty { color: rgba(34, 17, 12, .45); }
.stagecard__code { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-top: 26px; }
.stagecard__code h3 { font-size: clamp(34px, 4.4vw, 62px); letter-spacing: .02em; }
.stagecard__sec { font-family: var(--display); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.stagecard__ks { display: flex; gap: 20px; flex-wrap: wrap; margin: 26px 0 0; }
.kbtn { position: relative; padding: 5px 0; border: 0; background: none; color: var(--ink-3); font-family: var(--display); font-size: 13px; letter-spacing: .1em; cursor: pointer; transition: color var(--t); font-variant-numeric: tabular-nums; }
.kbtn::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--metal-grad); transition: width var(--t); }
.kbtn:hover:not(:disabled) { color: var(--ink) }
.kbtn.is-on { color: var(--ink) } .kbtn.is-on::after { width: 100% }
.kbtn:disabled { opacity: .26; cursor: not-allowed }

.stagecard__live { display: flex; gap: clamp(24px, 4vw, 60px); flex-wrap: wrap; margin: 30px 0 0; padding: 26px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.live__l { font-family: var(--display); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.live__v { font-family: var(--display); font-weight: 200; font-size: clamp(34px, 4vw, 56px); line-height: 1.05; margin: 10px 0 0; background: var(--metal-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.live__u { -webkit-text-fill-color: var(--ink-3); font-family: var(--sans); font-size: 15px; }
.stagecard__acts { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; margin-top: 28px; }
.stagecard__src { margin: 22px 0 0; font-size: 12px; color: var(--ink-3); line-height: 1.7; }

/* список кодов */
.codes { position: sticky; top: 96px; }
.codes__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--hair-2); }
.codes__title { margin: 0; font-family: var(--display); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.count { margin: 0; font-family: var(--display); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.codes__list { max-height: min(66vh, 720px); overflow-y: auto; scrollbar-width: thin; }
.codes__list::-webkit-scrollbar { width: 3px }
.codes__list::-webkit-scrollbar-thumb { background: var(--hair-2) }
.code {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center;
  width: 100%; padding: 13px 6px 13px 0; border: 0; border-bottom: 1px solid var(--hair);
  background: none; color: inherit; cursor: pointer; text-align: left; font-family: inherit;
  transition: background var(--t), padding var(--t);
}
.code:hover { background: var(--surface); padding-left: 8px; }
.code.is-on { background: var(--surface-2); }
.code.is-on .code__name { color: var(--accent); }
.code__thumb { height: 38px; display: grid; place-items: center; background: var(--ivory); box-shadow: inset 0 0 0 1px rgba(34, 17, 12, .06); }
.code__thumb img { max-height: 30px; width: auto; mix-blend-mode: multiply; }
.code__thumb.is-empty::after { content: ''; width: 13px; height: 13px; border: 1px solid rgba(141, 91, 78, .5); transform: rotate(45deg); }
.code__name { font-family: var(--display); font-size: 15.5px; letter-spacing: .05em; transition: color var(--t); }
.code__meta { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-3); font-family: var(--sans); letter-spacing: 0; }
.code__mass { font-size: 13px; color: var(--ink-2); }
.empty { margin-top: 18px; color: var(--ink-2); font-size: 14px; }
.empty code, .answer code { font-family: var(--display); color: var(--accent); }

/* ---------- ПОДБОРЩИК ---------- */
.finder { margin-top: 36px; padding: 32px 0 0; border-top: 1px solid var(--hair-2); }
.finder__row { display: flex; gap: 20px; flex-wrap: wrap; align-items: end; }
.finder__row input {
  flex: 1 1 340px; background: none; color: var(--ink);
  font: 200 clamp(20px, 2.4vw, 34px)/1.3 var(--display);
  border: 0; border-bottom: 1px solid var(--hair-2); padding: 10px 2px; transition: border-color var(--t);
}
.finder__row input:focus { outline: 0; border-bottom-color: var(--accent) }
.finder__row input::placeholder { color: var(--ink-3) }
.finder__hints { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px }
.hint { background: none; border: 1px solid var(--hair); color: var(--ink-3); font: 300 11.5px var(--sans); padding: 7px 14px; cursor: pointer; transition: color var(--t), border-color var(--t); }
.hint:hover { color: var(--ink); border-color: var(--accent) }
.finder__out { margin-top: 30px }
.answer { position: relative; padding-left: 22px; color: var(--ink-2) }
.answer::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 5px; width: 1px; background: var(--metal-grad) }
.answer b { color: var(--ink); font-weight: 400 }
.answer ul { margin: 16px 0 0; padding-left: 18px }
.answer li { margin-bottom: 9px }

/* ---------- АРХИВ ---------- */
.lib { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(24px, 3vw, 44px); margin-top: clamp(32px, 4vw, 56px); }
.lib__card { padding-top: 22px; border-top: 1px solid var(--hair-2); }
.lib__card h3 { font-size: 20px }
.world__ru { font-family: var(--display); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.lib__strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px }
.plate { background: var(--ivory) }
.lib__strip .plate { padding: 7px; display: grid; place-items: center; height: 54px; min-width: 54px }
.lib__strip img { max-height: 40px; width: auto; mix-blend-mode: multiply }
.lib__strip .plate--photo { height: 66px; min-width: 66px; background: var(--bg-deep) }
.lib__strip .plate--photo img { max-height: 52px; mix-blend-mode: normal }
.lib__meta { margin: 18px 0 0; font-family: var(--display); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); line-height: 1.9 }

/* ---------- ЭТАПЫ ---------- */
.road { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: clamp(26px, 3vw, 44px); margin-top: clamp(34px, 4vw, 60px) }
.road__card { padding-top: 24px; border-top: 1px solid var(--hair) }
.road__card.is-now { border-top-color: transparent; background-image: var(--metal-grad); background-size: 100% 1px; background-repeat: no-repeat }
.road__tag { margin: 0 0 14px; font-family: var(--display); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent) }
.road__card h3 { font-size: 26px; margin-bottom: 14px }
.road__card p { color: var(--ink-2); font-size: 14px }
.road__card ul { margin: 18px 0 0; padding-left: 16px; color: var(--ink-3); font-size: 13px }
.road__card li { margin-bottom: 6px }

/* ---------- ЗАПУСК И ПОДВАЛ ---------- */
.need { max-width: 84ch; margin: 32px 0 0; padding-left: 20px; color: var(--ink-2) }
.need li { margin-bottom: 13px }
.need b { color: var(--ink); font-weight: 400 }
.foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 36px var(--pad); border-top: 1px solid var(--hair); font-family: var(--display); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3) }
.foot p { margin: 0 }
.foot__src { margin-left: auto; font-family: var(--sans); font-size: 11px; letter-spacing: .04em; text-transform: none }

/* ---------- ПАНЕЛИ ---------- */
.sheet { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end }
.sheet[hidden] { display: none }
.sheet__scrim { position: absolute; inset: 0; background: rgba(3, 7, 22, .66); backdrop-filter: blur(4px); animation: fade var(--t) }
.sheet__body { position: relative; width: min(600px, 100%); height: 100%; overflow-y: auto; background: var(--bg-deep); padding: 40px clamp(22px, 4vw, 48px); animation: slidein 320ms cubic-bezier(.16, .84, .28, 1) }
.sheet--wide .sheet__body { width: min(780px, 100%) }
.sheet__body::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--metal-grad); opacity: .6 }
html[data-theme="rose"] .sheet__body { background: #EFC5B5 }
.sheet__x { position: absolute; top: 22px; right: 24px; background: none; border: 0; color: var(--ink-3); font: 200 32px/1 var(--display); cursor: pointer; transition: color var(--t) }
.sheet__x:hover { color: var(--accent) }
.sheet__img {
  aspect-ratio: 4 / 3; display: grid; place-items: center; margin: 4px 0 28px;
  background: radial-gradient(120% 100% at 50% 14%, #FFFFFF 0%, var(--ivory) 66%, #EADFD4 100%);
  box-shadow: inset 0 0 0 1px rgba(34, 17, 12, .07);
}
.sheet__img img { max-width: min(58%, 260px); max-height: min(78%, 230px); width: auto; mix-blend-mode: multiply }
.sheet h2 { font-size: clamp(30px, 3.6vw, 44px) }
.sheet__sub { margin: 10px 0 30px; font-family: var(--display); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent) }
.sheet__note { margin: 14px 0 32px; font-size: 13px; color: var(--ink-3); max-width: 66ch }
.karats { display: flex; gap: 22px; flex-wrap: wrap; margin: 0 0 26px }
.live { padding: 26px 0; margin-bottom: 26px; border-top: 1px solid var(--hair-2); border-bottom: 1px solid var(--hair) }
.live__price { margin: 16px 0 0; font-size: 15px; color: var(--ink-2) }
table.spec { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 28px }
table.spec th, table.spec td { text-align: left; padding: 11px 4px; border-bottom: 1px solid var(--hair) }
table.spec th { font-family: var(--display); font-weight: 300; color: var(--ink-3); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase }
table.spec tr.is-on td { color: var(--accent) }
.sheet__acts { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px }
.sheet__order { display: flex; gap: 20px; align-items: end; flex-wrap: wrap; padding: 24px 0; border-bottom: 1px solid var(--hair); margin-bottom: 24px }
.sheet__src { font-size: 12px; color: var(--ink-3); border-top: 1px solid var(--hair); padding-top: 18px; line-height: 1.7 }
.flag { font-family: var(--display); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--brown); background: var(--peach); padding: 3px 8px; align-self: start }

@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes slidein { from { transform: translateX(34px); opacity: 0 } to { transform: none; opacity: 1 } }

/* ---------- ЗАЯВКА ---------- */
.basket {
  position: fixed; right: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vw, 40px); z-index: 50;
  display: flex; align-items: center; gap: 13px; padding: 16px 26px; border: 0; cursor: pointer;
  background: var(--metal-grad); color: #22110C; box-shadow: var(--shadow);
  font-family: var(--display); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  transition: transform var(--t), filter var(--t);
}
.basket[hidden] { display: none }
.basket:hover { transform: translateY(-3px); filter: brightness(1.07) }
.basket b { font-size: 14px; font-variant-numeric: tabular-nums }

.olines { border-top: 1px solid var(--hair-2) }
.oline { display: flex; gap: 20px; justify-content: space-between; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--hair) }
.oline__code { margin: 0; font-family: var(--display); font-size: 17px; letter-spacing: .06em }
.oline__meta { margin: 5px 0 0; font-size: 11.5px; color: var(--ink-3) }
.oline__right { display: flex; align-items: center; gap: 18px }
.oline__qty { width: 84px; background: none; color: var(--ink); font: 300 15px var(--sans); border: 0; border-bottom: 1px solid var(--hair-2); padding: 7px 2px; text-align: right; font-variant-numeric: tabular-nums }
.oline__qty:focus { outline: 0; border-bottom-color: var(--accent) }
.oline__sum { margin: 0; min-width: 136px; text-align: right; font-size: 13.5px; color: var(--accent); font-variant-numeric: tabular-nums }
.oline__x { background: none; border: 0; color: var(--ink-3); font: 200 24px/1 var(--display); cursor: pointer; transition: color var(--t) }
.oline__x:hover { color: var(--accent) }
.ototals { display: flex; gap: clamp(22px, 4vw, 56px); flex-wrap: wrap; padding: 26px 0 32px }
.ototals__v { margin: 8px 0 0; font-family: var(--display); font-weight: 200; font-size: 28px; color: var(--accent); font-variant-numeric: tabular-nums }
.oform { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; padding-top: 28px; border-top: 1px solid var(--hair-2) }
.oform .fld--wide { grid-column: 1 / -1 }
.oform textarea { background: none; color: var(--ink); font: 300 15px/1.6 var(--sans); border: 0; border-bottom: 1px solid var(--hair-2); padding: 9px 2px; resize: vertical }
.oform textarea:focus { outline: 0; border-bottom-color: var(--accent) }
.oform__acts { grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px }
.oform__consent { grid-column: 1 / -1; margin: 0; font-size: 11.5px; color: var(--ink-3) }
.oform__err { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--peach) }
html[data-theme="rose"] .oform__err { color: #8B1E1E }
.ok { padding: 30px 0 10px }
.ok h3 { font-family: var(--display); font-weight: 200; font-size: 32px; margin-bottom: 14px }
.ok p { color: var(--ink-2); max-width: 62ch; margin-bottom: 28px }

/* ---------- АДАПТИВ ---------- */
@media (max-width: 1080px) {
  .matrix__body { grid-template-columns: 1fr }
  .codes { position: static }
  .codes__list { max-height: 420px }
  .story { grid-template-columns: 1fr }
}
@media (max-width: 860px) {
  .bar__nav { display: none }
  .bar { gap: 14px; padding: 14px var(--pad) }
  .bar__lang { margin-left: auto }
  .stagehero { min-height: 92svh; align-items: center; padding-top: 90px }
  .scroll { display: none }
  .sel { grid-template-columns: repeat(2, 1fr); gap: 14px }
  .selcard__code { font-size: 17px }
  .oform { grid-template-columns: 1fr }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation: none !important; transition: none !important }
  .reveal, .story__bands img { opacity: 1 !important; transform: none !important }
}

/* На розовом фирменном фоне металлический градиент в тексте почти не читается,
   поэтому крупные числа и акцентная строка заголовка становятся плотным цветом. */
html[data-theme="rose"] .display em,
html[data-theme="rose"] .live__v,
html[data-theme="rose"] .nums__grid dt {
  background: none;
  -webkit-text-fill-color: var(--accent);
  color: var(--accent);
}
html[data-theme="rose"] .live__u { -webkit-text-fill-color: var(--ink-3) }