/* Архимодный клуб - дизайн-система
   Построена на измерениях премиум-ниши (17 сайтов), см. ТЗ_ДИЗАЙН_Архимодный_витрина_20260725.md
   Школа: тёмная (Basalte). Кривая: отраслевая easeOutQuart. Скругления: 0-2px. */

/* ── шрифты ─────────────────────────────────────────────── */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 200 400;
  font-display: swap;
  src: url('../fonts/unbounded-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 200 400;
  font-display: swap;
  src: url('../fonts/unbounded-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* ── токены ─────────────────────────────────────────────── */
:root {
  /* цвет: тёмная школа Basalte - чистый чёрный, но текст не чистый белый */
  --bg: #000;
  --bg-lift: #0a0a0a;
  --fg: #f2f0ed;
  --fg-mute: #8b8781;
  --fg-dim: #5c5954;
  --rule: #1c1b19;
  /* акцент выведен из материалов: латунь выключателя, тёплый свет */
  --brass: #9e7c34;
  --brass-lift: #c2984a;

  /* типографика: заголовки тонкие (200-300), кегль по clamp */
  --h1: clamp(2.45rem, calc(4vw + 0.9rem), 7rem);
  --h2: clamp(1.75rem, calc(2.2vw + 0.75rem), 3.4rem);
  --h3: clamp(1.25rem, calc(0.6vw + 0.9rem), 1.6rem);
  --body: 1.0625rem;
  --small: 0.8125rem;

  /* движение: одна кривая на весь сайт */
  --ease: cubic-bezier(0.165, 0.84, 0.44, 1);
  --t-fast: 200ms;
  --t-mid: 400ms;
  --t-slow: 735ms;
  --t-reveal: 1s;

  --gut: clamp(1.5rem, 5vw, 6rem);
  --max: 1440px;
}

/* ── основа ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: var(--body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: 'Unbounded', system-ui, sans-serif;
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-size: var(--h1);
  font-weight: 200;
  line-height: 1.02;
  letter-spacing: -0.025em;
}
h2 {
  font-size: var(--h2);
  font-weight: 200;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
h3 {
  font-size: var(--h3);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
p { margin: 0; }

/* ── служебные ──────────────────────────────────────────── */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.eyebrow {
  font-size: var(--small);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.lede { font-size: clamp(1.0625rem, 1.1vw + 0.7rem, 1.3rem); color: var(--fg-mute); max-width: 34em; }

/* ── шапка ──────────────────────────────────────────────── */
.top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem var(--gut);
  background: transparent;
  transition: background-color 500ms var(--ease), padding var(--t-mid) var(--ease);
}
.top.is-scrolled {
  background: rgba(0, 0, 0, 0.92);
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.brand {
  font-family: 'Unbounded', sans-serif;
  font-size: 0.9375rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}
.brand em { font-style: normal; color: var(--brass); }
.brand__mark { width: 0.85em; height: 0.85em; color: #9c6a3f; flex: none; }
.brand__div { width: 1px; height: 1.1em; background: var(--rule); flex: none; }
.top nav { display: flex; gap: clamp(1rem, 2.5vw, 2.4rem); align-items: center; }
.top nav a { font-size: var(--small); letter-spacing: 0.05em; color: var(--fg-mute); transition: color var(--t-mid) var(--ease); }
.top nav a:hover { color: var(--fg); }

/* ── ссылка с подчёркиванием (приём B&O: 0,735s, точка отсчёта left) ── */
.ul {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.ul::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-slow) cubic-bezier(0.625, 0.05, 0, 1);
}
.ul:hover::after { transform: scaleX(1); }

/* ── призыв к действию: пустая рамка, при наведении опустошается наоборот ── */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.05rem 2rem;
  border: 1px solid var(--fg-dim);
  border-radius: 0;
  font-size: var(--small);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  background: transparent;
  transition: background-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.cta:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.cta--brass { border-color: var(--brass); color: var(--brass-lift); }
.cta--brass:hover { background: var(--brass); color: #0b0906; border-color: var(--brass); }
.cta .arrow { transition: transform var(--t-fast) var(--ease); }
.cta:hover .arrow { transform: translateX(4px); }

/* ── первый экран ───────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 0 0 clamp(3rem, 8vh, 7rem);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.95) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0) 100%);
}
.hero__inner { position: relative; z-index: 1; width: 100%; }
.hero .eyebrow { color: var(--fg-mute); text-shadow: 0 1px 12px rgba(0,0,0,0.9); }
.hero h1 { max-width: 18em; }
.hero .lede { margin-top: 1.6rem; }
.hero__foot { margin-top: clamp(2rem, 5vh, 3.4rem); display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: center; }

/* ── секции: ритм «один смысл = один экран» ─────────────── */
.sec { padding: clamp(5rem, 14vh, 11rem) 0; }
.sec--tight { padding: clamp(3.5rem, 9vh, 7rem) 0; }
.sec--rule { border-top: 1px solid var(--rule); }
.sec__head { display: grid; gap: 1.4rem; max-width: 46em; }
.sec__head .lede { margin-top: 0.4rem; }

/* области автоматизации - простой перечень без иконок */
.domains {
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.domain {
  background: var(--bg);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transition: background-color var(--t-mid) var(--ease);
}
.domain:hover { background: var(--bg-lift); }
.domain h3 { margin: 0 0 0.7rem; }
.domain p { font-size: 0.9375rem; color: var(--fg-mute); }

/* участники клуба / объекты - «один объект = одна строка» */
.rows { margin-top: clamp(2.5rem, 6vh, 4rem); border-top: 1px solid var(--rule); }
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto;
  gap: 1rem 2rem;
  align-items: baseline;
  padding: clamp(1.5rem, 3.4vh, 2.4rem) 0;
  border-bottom: 1px solid var(--rule);
  transition: opacity var(--t-mid) var(--ease);
}
.row__name { font-family: 'Unbounded', sans-serif; font-weight: 300; font-size: clamp(1.1rem, 1.3vw + 0.6rem, 1.5rem); letter-spacing: -0.01em; }
.row__co { font-size: var(--small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass); display: block; margin-top: 0.5rem; }
.row__desc { font-size: 0.9375rem; color: var(--fg-mute); }
.row__link { font-size: var(--small); letter-spacing: 0.06em; color: var(--fg-mute); white-space: nowrap; }

/* фотография группы */
.photo { margin-top: clamp(2.5rem, 6vh, 4rem); }
.photo img { width: 100%; aspect-ratio: 1080 / 730; object-fit: cover; }
.photo figcaption { margin-top: 1rem; font-size: var(--small); color: var(--fg-dim); }

/* объекты с названием и городом */
.works { margin-top: clamp(2.5rem, 6vh, 4rem); display: grid; gap: clamp(3rem, 8vh, 6rem); }
.work { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; padding-bottom: clamp(1.6rem, 3vh, 2.2rem); border-bottom: 1px solid var(--rule); }
.work img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: clamp(1.2rem, 2.5vh, 1.8rem);
  filter: saturate(0.9) brightness(0.88);
  transition: filter var(--t-slow) var(--ease);
}
.work:hover img { filter: saturate(1) brightness(1); }
.work__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; align-items: baseline; }
.work__city { font-size: var(--small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim); }
.work p { font-size: 0.9375rem; color: var(--fg-mute); max-width: 46em; }

/* оборудование / партнёрство */
/* min(280px, 100%) вместо голых 280px: на экране 320 с полями остаётся 272,
   и жёсткий минимум распирал документ на 8 пикселей - появлялась
   горизонтальная прокрутка на всей странице. */
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: clamp(2rem, 5vh, 3.5rem); }
.pair p { color: var(--fg-mute); }

/* цепочка «дом под ключ» */
.chain { margin-top: clamp(2.5rem, 6vh, 4rem); display: flex; flex-wrap: wrap; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.chain > a, .chain > span {
  flex: 1 1 150px;
  background: var(--bg);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1.5rem 1.3rem;
  font-size: 0.9375rem;
  transition: background-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
}
.chain > a:hover { background: var(--bg-lift); color: var(--brass-lift); }
.chain .is-here { color: var(--brass); }
.chain__step { display: block; font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--fg-dim); margin-bottom: 0.6rem; }

/* FAQ */
.faq { margin-top: clamp(2.5rem, 6vh, 4rem); border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: clamp(1.3rem, 2.6vh, 1.9rem) 0;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: baseline;
  font-family: 'Unbounded', sans-serif;
  font-weight: 300;
  font-size: clamp(1rem, 0.9vw + 0.7rem, 1.2rem);
  transition: color var(--t-mid) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brass-lift); }
.faq summary::after { content: '+'; color: var(--fg-dim); font-family: 'Manrope', sans-serif; }
.faq details[open] summary::after { content: '–'; }
.faq details > p { padding: 0 0 clamp(1.3rem, 2.6vh, 1.9rem); color: var(--fg-mute); max-width: 52em; }

/* контакты */
.contacts { margin-top: clamp(2.5rem, 6vh, 4rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(1.6rem, 4vw, 3.5rem); }
.contact__label { font-size: var(--small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 0.7rem; }
.contact__val { font-size: 1.0625rem; }
.contact__val a { color: var(--fg); }

/* подвал */
.foot { border-top: 1px solid var(--rule); padding: clamp(2.5rem, 6vh, 4rem) 0 clamp(2rem, 4vh, 3rem); }
.foot__grid { display: flex; flex-wrap: wrap; gap: 1.2rem 2.5rem; justify-content: space-between; align-items: baseline; }
.foot a, .foot p { font-size: var(--small); color: var(--fg-dim); }
.foot a:hover { color: var(--fg-mute); }

/* ── появление при прокрутке (1s, приём Occhio) ─────────── */
.rv { opacity: 0; transform: translateY(18px); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); }
.rv.in { opacity: 1; transform: none; }
/* скрипт не долетел или отключён - содержимое видно сразу */
.no-js .rv { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .rv { opacity: 1; transform: none; }
}

/* ── адаптив ────────────────────────────────────────────── */
@media (max-width: 720px) {
  .row { grid-template-columns: 1fr; gap: 0.6rem; }
  .row__link { justify-self: start; }
  .top nav { gap: 1rem; }
  .top nav a.is-hide-sm { display: none; }
}

/* ── мобильное меню: цвета Elspace и служебных страниц ── */
.mobmenu, .mobmenu__btn {
  --mm-bg: var(--bg-lift);
  --mm-fg: var(--fg);
  --mm-dim: var(--fg-mute);
  --mm-accent: var(--brass-lift);
  --mm-rule: rgb(242 240 237 / 0.12);
  --mm-scrim: rgb(0 0 0 / 0.6);
}

/* ── пальцевые цели: шапка и футер служебных страниц ── */
@media (max-width: 760px) {
  .brand { min-height: 44px; display: inline-flex; align-items: center; }
  footer a, .pv a.back { display: inline-block; padding-block: 0.6rem; min-height: 44px; min-width: 44px; }
}

/* ── заголовки на телефоне: последнее слово не остаётся одно в строке ── */
@media (max-width: 760px) {
  h2, h3 { text-wrap: balance; }
}