/* =============================================================
   lastpeek — базовый каркас
   токены → сброс → типографика → плашка → шапка → hero →
   секции → плитки → товар → футер → анимации
   ============================================================= */

:root {
  --bg: #e9e8e4;
  --ink: #0d0d0d;
  --grey: #7d7c78;
  --hair: rgba(13, 13, 13, 0.2);
  --hair-soft: rgba(13, 13, 13, 0.1);
  --surface: #dedcd7;

  /* на страницах товаров переопределяется своей темой */
  --accent: var(--ink);

  --wrap: 1240px;
  --gut: clamp(20px, 4vw, 44px);
  --step: clamp(80px, 12vw, 168px);

  --t: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-slow: 380ms cubic-bezier(0.22, 0.61, 0.36, 1);

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- сброс ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 120px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  animation: page-in 260ms ease both;
}

@keyframes page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.is-leaving {
  opacity: 0;
  transition: opacity 200ms ease;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- фоновый шум ----------
   webgl-канвас во весь экран, под всем содержимым.
   густоту задаёт NOISE_OPACITY в js/config.js */

.neural {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}

/* всё содержимое живёт над шумом */
.topbar,
.site-head,
main,
.site-foot {
  position: relative;
  z-index: 1;
}

.site-head { z-index: 50; }

/* ---------- сетка ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: var(--step); }
.section + .section { padding-top: 0; }

/* ---------- типографика ---------- */

/* микро-подпись: капс с широким трекингом — тот же приём, что в самом логотипе */
.micro {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin: 0;
}

.micro--tight { letter-spacing: 0.16em; }

/* короткая линия под подписью */
.micro--ruled::after {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  background: var(--ink);
  margin-top: 16px;
}

.t-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 8vw, 76px);
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  margin: 0;
}

.t-head {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 5vw, 44px);
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: lowercase;
  margin: 0;
}

.lede {
  font-size: clamp(16px, 2.2vw, 18px);
  line-height: 1.75;
  margin: 0;
}

/* ---------- ссылки ---------- */

.link-underline {
  display: inline-block;
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--ink);
  transition: opacity var(--t), border-color var(--t);
}

.link-underline:hover { opacity: 0.55; }

.link-quiet {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  padding-bottom: 3px;
  transition: color var(--t), background-size var(--t), opacity var(--t);
}

.link-quiet:hover,
.link-quiet:focus-visible { background-size: 100% 1px; }

/* ---------- кнопка ---------- */

.btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 34px;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  text-decoration: none;
  transition: background-color var(--t), color var(--t), border-color var(--t);
}

.btn-solid:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ---------- чёрная плашка сверху ---------- */

.topbar {
  background: var(--ink);
  color: #dcdbd7;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 34px;
}

.topbar .micro {
  font-size: 10px;
  letter-spacing: 0.18em;
  line-height: 1.4;
}

.topbar-links {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar-links a {
  text-decoration: none;
  transition: color var(--t);
}

.topbar-links a:hover { color: #fff; }

.topbar-sep { opacity: 0.4; }

/* ---------- шапка ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: background-color var(--t), border-color var(--t);
}

.site-head.is-stuck {
  background-color: rgba(233, 232, 228, 0.9);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--hair-soft);
}

.head-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "nav brand links";
  align-items: center;
  gap: 16px;
  min-height: 74px;
}

.brand {
  grid-area: brand;
  justify-self: center;
  display: inline-flex;
  text-decoration: none;
}

.brand img {
  height: 21px;
  width: auto;
  transition: transform var(--t);
}

.brand:hover img { transform: translateX(2px); }

.head-nav {
  grid-area: nav;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
  justify-content: flex-start;
}

.head-links {
  grid-area: links;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 30px);
  justify-content: flex-end;
}

.head-nav a,
.head-links a { color: var(--ink); }

@media (max-width: 760px) {
  .head-inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand brand"
      "nav links";
    gap: 12px 0;
    padding-block: 14px;
    min-height: 0;
  }
  .brand img { height: 18px; }
  .head-nav,
  .head-links { gap: 18px; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(20px, 3vw, 40px) clamp(28px, 4vw, 52px);
}

.hero-inner {
  position: relative;
  height: clamp(470px, 80vh, 720px);
}

.hero-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* настоящий вордмарк из логотипа, во всю ширину */
.hero-wordmark {
  position: absolute;
  left: 50%;
  top: 46%;
  /* --py задаётся из main.js, лёгкий параллакс */
  transform: translate(-50%, calc(-50% + var(--py, 0px)));
  width: min(1180px, 104vw);
  max-width: none;
  z-index: 1;
}

/* фигура — вырезана по контуру, без фона. стоит на нижней кромке
   и перекрывает середину слова, как в референсе. пропорции берутся
   из самого файла (через width/height в html), поэтому box-модель
   без aspect-ratio/object-fit: это уже не рамка под кроп, а силуэт */
.hero-subject {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, var(--py, 0px));
  z-index: 3;
  height: 92%;
  width: auto;
  max-width: none;
  filter: grayscale(1) contrast(1.05);
}

.hero-tagline {
  position: absolute;
  left: 0;
  top: 10%;
  z-index: 4;
}

.hero-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
}

.hero-drop { text-align: right; }

.hero-drop.micro--ruled::after { margin-left: auto; }

@media (max-width: 760px) {
  .hero-inner {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .hero-stage {
    position: relative;
    inset: auto;
    height: clamp(300px, 48vh, 420px);
    order: 2;
  }
  .hero-tagline {
    position: static;
    order: 1;
  }
  .hero-foot {
    position: static;
    order: 3;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
  }
  .hero-drop { text-align: left; }
  .hero-drop.micro--ruled::after { margin-left: 0; }
  .hero-wordmark { width: 112vw; top: 52%; }
  .hero-subject { height: 88%; }
}

/* ---------- о нас ---------- */

.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 4vw, 48px);
  padding-top: clamp(26px, 4vw, 44px);
  border-top: 1px solid var(--hair-soft);
}

@media (min-width: 860px) {
  .about { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
}

.about-body { max-width: 54ch; }

.about-body p {
  font-size: clamp(18px, 2.6vw, 24px);
  line-height: 1.6;
  letter-spacing: -0.01em;
  margin: 0;
}

.about-body p + p { margin-top: 1em; }

/* ---------- заголовок секции ---------- */

.section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  /* на узком экране подпись уходит под заголовок, а не жмёт его
     в две строки: заголовку достаётся вся ширина */
  flex-wrap: wrap;
  gap: 6px 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ink);
  margin-bottom: clamp(28px, 4vw, 44px);
}

/* ---------- плитки ---------- */

.drops-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(44px, 6vw, 64px);
}

@media (min-width: 760px) {
  .drops-grid { grid-template-columns: 1fr 1fr; }
}

.tile-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.tile-media {
  position: relative;
  background: var(--surface);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: filter var(--t-slow), transform var(--t-slow);
}

.tile-link:hover .tile-media img,
.tile-link:focus-visible .tile-media img {
  filter: grayscale(1) contrast(1.04) brightness(0.9);
  transform: scale(1.015);
}

/* мокап на прозрачном фоне — ему нужна тёмная подложка */
.tile-media--dark {
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 44px);
  background: #14100f;
}

.tile-media--dark img {
  height: auto;
  max-height: 100%;
  object-fit: contain;
  filter: none;
}

.tile-link:hover .tile-media--dark img,
.tile-link:focus-visible .tile-media--dark img {
  filter: brightness(1.08);
  transform: scale(1.015);
}

/* обычная светлая плитка, но без общего обесцвечивания — когда
   у товара есть свой акцентный цвет, который не должен уйти в серый */
.tile-media--color img { filter: none; }

.tile-link:hover .tile-media--color img,
.tile-link:focus-visible .tile-media--color img {
  filter: brightness(0.94);
  transform: scale(1.015);
}

.tile-badge {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  background: var(--bg);
  color: var(--ink);
  padding: 6px 10px;
}

.tile-media--dark .tile-badge {
  background: transparent;
  color: #e9e8e4;
  border: 1px solid rgba(233, 232, 228, 0.4);
}

.tile-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair-soft);
}

.tile-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-transform: lowercase;
  margin: 0;
}

.tile-price {
  font-size: 15px;
  white-space: nowrap;
  color: var(--accent);
}

.tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  color: var(--grey);
}

.tile-cta {
  color: var(--ink);
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size var(--t);
}

.tile-link:hover .tile-cta,
.tile-link:focus-visible .tile-cta { background-size: 100% 1px; }

/* ---------- страница товара ---------- */

.product { padding-block: clamp(28px, 5vw, 56px) var(--step); }

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 60px);
}

@media (min-width: 900px) {
  .product-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
  }
  .product-visual { position: sticky; top: 96px; }
}

.product-visual {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.shot {
  position: relative;
  margin: 0;
  background: var(--surface);
  overflow: hidden;
}

.shot img { width: 100%; }

/* кадр держит пропорцию сам: при листании галереи панель не прыгает,
   даже если подложить фото другой формы */
.shot--fixed { aspect-ratio: 3 / 4; }

.shot--fixed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- переключатель показа: товар / на людях ---------- */

.shot-modes {
  display: flex;
  align-items: center;
  gap: 18px;
}

.shot-mode {
  color: var(--grey);
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: color var(--t), background-size var(--t);
}

.shot-mode:hover { color: var(--ink); }

.shot-mode[aria-pressed="true"] {
  color: var(--ink);
  background-size: 100% 1px;
}

/* ---------- стрелки и счётчик галереи ---------- */

.shot-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  background: rgba(233, 232, 228, 0.9);
  color: var(--ink);
  font-size: 17px;
  line-height: 1;
  transition: background-color var(--t), opacity var(--t);
}

.shot-nav:hover { background: var(--bg); }

.shot-nav[hidden] { display: none; }

.shot-nav--prev { left: 12px; }
.shot-nav--next { right: 12px; }

.shot-count {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 5px 10px;
  background: rgba(233, 232, 228, 0.9);
  color: var(--ink);
  pointer-events: none;
}

.shot-count[hidden] { display: none; }

@media (max-width: 520px) {
  .shot-nav { width: 38px; height: 38px; }
  .shot-nav--prev { left: 8px; }
  .shot-nav--next { right: 8px; }
}


.product-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
}

.product-head {
  width: 100%;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ink);
}

.price {
  margin: 0;
  font-size: clamp(20px, 3vw, 26px);
  letter-spacing: -0.02em;
  color: var(--accent);
}

.meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid var(--hair);
  color: var(--grey);
  white-space: nowrap;
}

.specs {
  margin: 0;
  width: 100%;
  font-size: 15px;
}

.specs > div {
  display: grid;
  grid-template-columns: minmax(104px, 34%) 1fr;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hair-soft);
}

.specs > div:first-child { border-top: 1px solid var(--hair-soft); }

.specs dt { margin: 0; color: var(--grey); }
.specs dd { margin: 0; }

.note {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--grey);
  max-width: 42ch;
}

/* ---------- расцветки ---------- */

.swatches {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* display у класса перебивает браузерное правило для hidden — возвращаем */
.swatches[hidden] { display: none; }

.swatch {
  width: 26px;
  height: 26px;
  border: 1px solid var(--hair);
  box-shadow: inset 0 0 0 3px var(--bg);
  transition: box-shadow var(--t), border-color var(--t);
}

.swatch[aria-pressed="true"] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 3px var(--bg), 0 0 0 1px var(--ink);
}

.swatch-label { margin-left: 6px; color: var(--grey); }

/* ---------- 3d-вьювер ---------- */

/* пока модель не подтверждена и не загружена, блок вообще не занимает
   места на странице — ни пустого кадра, ни подписи "скоро" */
.viewer {
  position: relative;
  background: var(--surface);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.viewer[hidden] { display: none; }

.viewer-stage {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--t-slow);
}

.viewer-stage canvas { display: block; width: 100%; height: 100%; }

.viewer.is-live .viewer-stage { opacity: 1; }

.viewer-note {
  position: absolute;
  left: 12px;
  bottom: 11px;
  color: var(--grey);
  background: var(--bg);
  padding: 4px 9px;
  pointer-events: none;
}

/* ---------- футер ---------- */

.site-foot {
  margin-top: var(--step);
  background: var(--ink);
  color: #dcdbd7;
  padding-block: clamp(44px, 7vw, 80px);
}

.foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.foot-brand {
  display: flex;
  flex-direction: column;
  /* без этого дети колонки растягиваются на всю её ширину (stretch по
     умолчанию) и перебивают width:auto у логотипа — он сплющивается */
  align-items: flex-start;
  gap: 16px;
}

/* логотип чёрной заливкой — на тёмном выворачиваем */
.foot-brand img {
  height: 34px;
  width: auto;
  filter: invert(1);
}

.foot-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.foot-links {
  display: flex;
  gap: 26px;
}

.foot-links a { color: #dcdbd7; }
.foot-links a:hover { color: #fff; }

.foot-year { color: #8b8a86; }

@media (min-width: 640px) {
  .foot-side { align-items: flex-end; }
}

/* ---------- появление по скроллу ---------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-slow), transform var(--t-slow);
  transition-delay: var(--d, 0ms);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- диафрагма ----------
   изображения раскрываются от горизонтальной оси наружу — как открывается глаз.
   единственный «громкий» приём на сайте, только для фотографий и вордмарка */

.aperture {
  clip-path: inset(50% 0 50% 0);
  opacity: 0;
  transition:
    clip-path 460ms cubic-bezier(0.36, 0.07, 0.16, 1),
    opacity 240ms ease;
  transition-delay: var(--d, 0ms);
}

.aperture.is-in {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}

/* тот же приём, но без всякой зависимости от JS — для того, что видно
   сразу на входе (hero, визуал товара). Такой контент не должен ждать
   ни IntersectionObserver, ни requestAnimationFrame: на странице с
   тяжёлым webgl-шумом их первый колбэк может прийти позже, чем
   хотелось бы, и картинка повиснет невидимой */
.aperture-auto {
  animation: aperture-in 620ms cubic-bezier(0.36, 0.07, 0.16, 1) both;
  animation-delay: var(--d, 0ms);
}

@keyframes aperture-in {
  from { clip-path: inset(50% 0 50% 0); opacity: 0; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* ---------- тише ---------- */

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .aperture { opacity: 1; clip-path: none; transition: none; }
  .aperture-auto { animation: none; clip-path: none; opacity: 1; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- узкие экраны ---------- */

@media (max-width: 380px) {
  .micro { font-size: 10px; letter-spacing: 0.2em; }
  .head-nav, .head-links { gap: 14px; }
}