/* kudeb.ru — раскладка страниц поверх brand/base.css.
   Здесь только композиция блоков. Цвет, кегли, шаг, радиусы и длительности
   берутся токенами: захардкоженных значений быть не должно. */

/* ── Шапка ─────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
  padding-block: var(--sp-3);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  /* С третьим пунктом навигация перестаёт помещаться в строку уже
     на 400px. Перенос включается сам и только когда не хватает места. */
  flex-wrap: wrap;
  row-gap: var(--sp-3);
}
.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
}
.site-header__name {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
@media (max-width: 560px) {
  .site-header__name { display: none; }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.site-nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--fs-sm);
  transition: color var(--dur-fast) var(--ease-standard);
}
.site-nav a:hover { color: var(--text-primary); }

.theme-toggle {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  padding: 5px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.theme-toggle:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

/* ── Марка ─────────────────────────────────────────────────────── */

/* Знак квадратный и сплошной, пределов по просветам нет — размер задаём
   по ширине (.mark из base.css даёт 32px высоты). */
.site-header__brand .mark {
  height: auto;
  width: 48px;
}
.mark--hero {
  height: auto;
  width: min(220px, 60%);
}

/* ── Герой ─────────────────────────────────────────────────────── */

.hero { padding-block: var(--sp-8) var(--sp-9); }
.hero__eyebrow { margin-top: var(--sp-7); }
.hero h1 { margin-top: var(--sp-2); }
.hero .lede { margin-top: var(--sp-5); max-width: 56ch; }
.hero__cta { margin-top: var(--sp-7); display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ── Секции ────────────────────────────────────────────────────── */

.block { padding-block: var(--sp-8); border-top: 1px solid var(--hairline); }
.block__title { margin-top: var(--sp-2); }
.block__lede { margin-top: var(--sp-5); max-width: 56ch; }

/* ── Проекты ───────────────────────────────────────────────────── */

.projects,
.values {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}
/* base.css разводит соседние li вертикально — здесь за это отвечает gap */
.projects > li + li,
.values > li + li { margin-top: 0; }

.project__head,
.value__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
.project__num,
.value__num {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-secondary);
}
/* Гарнитура и интерлиньяж наследуются от body: Golos Text, --lh-md.
   PT Serif брендбук отводит под документы, на сайте его нет — в эталонной
   site.html из кита класс .prose не встречается ни разу. */
.project__text,
.value__text {
  margin-top: var(--sp-4);
  color: var(--text-secondary);
}

.stack {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.stack li {
  margin-top: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-secondary);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  padding: 4px 10px;
}

/* ── Ценности ──────────────────────────────────────────────────── */

/* Иконка слева от текста, на узких экранах — над ним. */
.value {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  align-items: start;
}
@media (max-width: 560px) {
  .value {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

/* Линии берут цвет темы через currentColor, подсвеченная грань — охра.
   48px при штрихе 2.5 по сетке 64 дают на экране ~1.9px: та же толщина
   линии, что у иконок из base.css, просто рисунок крупнее. */
.value__icon {
  width: 48px;
  height: 48px;
  color: var(--text-secondary);
}
.value__icon g {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.value__facet {
  fill: var(--accent);
  fill-opacity: 0.25;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Контакты ──────────────────────────────────────────────────── */

.contacts {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-6);
}
@media (min-width: 620px) {
  .contacts { grid-template-columns: 1fr 1fr; }
}
.contacts dt {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.contacts dd { margin-top: var(--sp-2); font-size: var(--fs-xl); }
.contacts a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.contacts a:hover { color: var(--accent); }

/* ── QR ────────────────────────────────────────────────────────── */

/* Фон из самого SVG снят: остались только модули. Маска красит их
   в цвет текста, поэтому код лежит прямо на canvas и переворачивается
   вместе с темой — в светлой это обычный чёрный код на светлом. */
.qr-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.qr {
  width: 176px;
  aspect-ratio: 1;
  margin-top: var(--sp-4);
  background-color: var(--text-primary);
  -webkit-mask: url('images/qr-code-mask.svg') center / contain no-repeat;
  mask: url('images/qr-code-mask.svg') center / contain no-repeat;
}

/* ── Подвал ────────────────────────────────────────────────────── */

.site-footer {
  padding-block: var(--sp-6);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

/* ── Ссылка «к содержимому» ────────────────────────────────────── */

.skip { position: absolute; left: -9999px; }
.skip:focus {
  position: fixed;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 20;
  background: var(--surface);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
}