/* KATALIK-OPT · база: токены, сброс, типографика, примитивы */

:root {
  /* Бумага — основа. Тёплый серый, как чертёжная калька, а не белый лист:
     фотки товара сняты на белом и на чистом #fff теряют край. */
  --paper:    #EDEAE3;
  --paper-2:  #E4E0D7;
  --paper-3:  #D8D3C7;

  --ink:      #15150F;
  --ink-2:    #57544A;
  --ink-3:    #8C887C;

  --night:    #0B0B0C;
  --night-2:  #141416;
  --night-3:  #1F1F22;

  --flame:    #FF4A16;   /* горячий акцент — выхлоп, сварка */
  --flame-d:  #D93A0C;
  --blue:     #79A9C4;   /* холодный — чертёжные линии, размеры */

  --line:     rgba(21, 21, 15, .16);
  --line-2:   rgba(21, 21, 15, .08);
  --line-n:   rgba(255, 255, 255, .14);
  --line-n2:  rgba(255, 255, 255, .07);

  /* Bahnschrift есть в каждой Windows и это готовый DIN — ровно тот
     индустриальный конденс, который нужен. Oswald — запасной с Google. */
  --f-display: 'Bahnschrift', 'Oswald', 'Archivo Narrow', 'Segoe UI', system-ui, sans-serif;
  --f-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', 'Cascadia Mono', 'Consolas', ui-monospace, monospace;
  --f-serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;

  --pad:       clamp(16px, 4vw, 56px);
  --maxw:      1600px;
  --ease:      cubic-bezier(.22, .61, .36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

/* ---------------------------------------------------------------- примитивы */

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

/* Заголовок раздела: моно-метка в скобках. Взято у Fliker — метка держит
   техничность, пока сам заголовок может быть сколь угодно крупным. */
.tag {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 10px;
}
.tag::before { content: '['; opacity: .5; }
.tag::after  { content: ']'; opacity: .5; }
.on-night .tag, .night .tag { color: rgba(255, 255, 255, .42); }

.h1, .h2 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: .94;
  letter-spacing: -.015em;
  text-transform: uppercase;
  margin: 0;
}
.h1 { font-size: clamp(40px, 7.4vw, 116px); }
.h2 { font-size: clamp(30px, 4.6vw, 72px); }
.h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 0;
}
.serif {
  font-family: var(--f-serif);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.01em;
  font-size: clamp(30px, 4.2vw, 62px);
  line-height: 1.04;
}
.serif em { font-style: italic; }

.lead { font-size: clamp(15px, 1.25vw, 19px); line-height: 1.5; color: var(--ink-2); max-width: 56ch; }
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .05em; }
.flame { color: var(--flame); }

.night { background: var(--night); color: #F2F0EA; }
.night .lead { color: rgba(255, 255, 255, .58); }

/* Тонкая линейка — вместо рамок и теней держит всю сетку сайта */
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.night .rule { background: var(--line-n2); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px;
  background: var(--flame);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { background: var(--flame-d); transform: translateY(-1px); }
.btn--ghost {
  background: none;
  color: inherit;
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); box-shadow: none; }
.night .btn--ghost { box-shadow: inset 0 0 0 1px var(--line-n); }
.night .btn--ghost:hover { background: #fff; color: var(--night); }

/* Появление при скролле. Без JS класс не навешивается — контент виден сразу. */
.rise { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rise.in { opacity: 1; transform: none; }


/* ============================== общая обвязка: шапка и подвал ==============
   Лежала в home.css, из-за чего на внутренних страницах шапка
   рассыпалась в столбик — там home.css не подключается. */

.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 14px var(--pad);
  color: #F2F0EA;
  transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.hdr--solid {
  background: rgba(11, 11, 12, .86);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line-n2);
}
.hdr--paper { background: rgba(237, 234, 227, .9); color: var(--ink); box-shadow: 0 1px 0 var(--line); }

.logo {
  font-family: var(--f-display);
  font-size: 19px;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.logo b { font-weight: 600; }
.logo span { color: var(--flame); }

.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .68;
  transition: opacity .2s;
}
.nav a:hover { opacity: 1; }
.hdr .btn { padding: 11px 20px; font-size: 11px; }

@media (max-width: 900px) { .nav { display: none; } }


.ftr { color: rgba(255,255,255,.5); border-top: 1px solid var(--line-n2); padding: 44px 0 54px; }
.ftr__in { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: baseline; }
.ftr__in .logo { color: #F2F0EA; }
.ftr nav { display: flex; flex-wrap: wrap; gap: 20px; }
.ftr nav a { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.ftr nav a:hover { color: #fff; }
.ftr small { display: block; width: 100%; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; color: rgba(255,255,255,.3); line-height: 1.7; }