/* 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);
}
.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);
}

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

/* Пределы марки заданы зазором между звеньями: монограмма не уже 64px,
   локап не уже 96px. Поэтому размер задаём по ширине, а не по высоте
   (.mark из base.css даёт 32px высоты — для монограммы это ~42px ширины). */
.site-header__brand .mark {
  height: auto;
  width: 64px;
}
.mark--hero {
  height: auto;
  width: min(360px, 80%);
}

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

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

.project__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
.project__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 {
  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;
}

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

.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);
}