/* ===== shulgin.is-a.dev — общий бренд-слой для статических дочерних страниц ===== */
/* Self-hosted шрифты + токены + компонент шапки .brand-bar. Не грузить внешние CDN. */

@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url(./fonts/big-shoulders-display-latin-900-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./fonts/big-shoulders-display-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./fonts/oswald-cyrillic-700-normal.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./fonts/oswald-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./fonts/jetbrains-mono-cyrillic-400-normal.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./fonts/jetbrains-mono-cyrillic-600-normal.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./fonts/jetbrains-mono-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./fonts/inter-cyrillic-400-normal.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./fonts/inter-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./fonts/inter-cyrillic-500-normal.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./fonts/inter-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./fonts/inter-cyrillic-600-normal.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./fonts/inter-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --bg:        #0b0b0c;
  --bg-2:      #121214;
  --ink:       #f3f1ec;
  --ink-dim:   #9a968f;
  --ink-faint: #6e6b66;
  --coral:     #ee4e4e;
  --coral-2:   #ff6a5a;
  --line:      rgba(255, 255, 255, 0.10);
  --line-2:    rgba(255, 255, 255, 0.06);
  --f-display: "Big Shoulders Display", "Oswald", "Arial Narrow", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, monospace;
  --f-body:    "Inter", system-ui, sans-serif;
  color-scheme: dark;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.btn {
  display: inline-block;
  background: var(--coral);
  color: #fff;
  font-family: var(--f-mono);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 0.85rem 1.5rem;
  border-radius: 0;
  border: 1px solid var(--coral);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--coral-2); border-color: var(--coral-2); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn--ghost:hover { border-color: var(--coral); color: var(--coral); }

h1, h2 {
  font-family: var(--f-display);
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.01em;
}
html[lang="ru"] h1, html[lang="ru"] h2 { line-height: 1.04; }
h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); margin: 0; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); margin: 0; }

.tag {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--line);
  padding: 0.1rem 0.4rem;
}

/* ===== brand-bar: sticky header общий для всех дочерних страниц ===== */
.brand-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 56px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand-bar__in {
  max-width: 1400px;
  margin-inline: auto;
  height: 56px;
  padding-inline: clamp(1.15rem, 5vw, 5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand-bar__logo {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand-bar__logo:hover { color: var(--ink); }
.brand-bar__dot { color: var(--coral); }
.brand-bar__crumb {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
  white-space: nowrap;
}
.brand-bar__right {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}
.brand-bar__lang {
  display: flex;
  gap: 0.4rem;
  font-family: var(--f-mono);
  font-size: 0.68rem;
}
.brand-bar__lang button {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  padding: 0.25rem 0.55rem;
  cursor: pointer;
  font: inherit;
  text-transform: uppercase;
}
.brand-bar__lang button[aria-pressed="true"] {
  color: #fff;
  background: var(--coral);
  border-color: var(--coral);
}
.brand-bar__hire {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: var(--coral);
  color: #fff;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--coral);
  text-decoration: none;
  white-space: nowrap;
}
.brand-bar__hire:hover { background: var(--coral-2); border-color: var(--coral-2); }

@media (max-width: 620px) {
  .brand-bar__crumb { display: none; }
}

/* клавиатурный фокус виден на всех бренд-страницах (e2e: outline:none без :focus-visible) */
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }