/* Вёрстка визитки поверх дизайн-системы Broadsheet (broadsheet.css).
   Значения перенесены из макета design/Vizitka.dc.html; размеры в cqi
   считаются от ширины .page (container-type: inline-size). */

/* Тёмная тема — палитра из design/Maket.dc.html */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1b1a19;
    --color-surface: #2d2b2b;
    --color-text: #f3f2f2;
    --color-accent: #62c5ee;
    --color-accent-2: #ff90b1;
    --color-divider: color-mix(in srgb, #f3f2f2 20%, transparent);
    --color-accent-100: #0a303e;
    --color-accent-600: #99e0ff;
    --color-accent-700: #99e0ff;
    --color-accent-800: #cbeeff;
    --color-accent-2-100: #4b1528;
    --color-accent-2-700: #ff90b1;
    --color-accent-2-800: #ffdee6;
    --color-neutral-100: #393636;
    --color-neutral-800: #eae7e7;
    color-scheme: dark;
  }
}

/* Печатные эффекты (.cmyk, .cmyk-num) рассчитаны на светлую бумагу —
   в тёмной теме показываем простые варианты, как в макете */
.only-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .only-light { display: none; }
  .only-dark { display: block; }
}

.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.muted { color: color-mix(in srgb, var(--color-text) 72%, transparent); }

.page {
  container-type: inline-size;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
.wrap {
  max-width: 1360px;
  padding: 0 clamp(20px, 6.5cqi, 104px) clamp(32px, 4cqi, 56px);
}

.link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 15px; }
.link:hover { color: var(--color-accent-600); }

.section { margin-top: clamp(72px, 10cqi, 160px); }
.section-h { font-size: clamp(30px, 3.6cqi, 52px); margin: 0 0 clamp(24px, 3cqi, 40px); }

/* — Hero — */
.hero { padding-top: clamp(24px, 6cqi, 96px); }
.portrait {
  width: clamp(120px, 15cqi, 220px);
  aspect-ratio: 1;
  margin-bottom: clamp(20px, 3cqi, 40px);
  border-radius: var(--radius-md);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
img.portrait { height: auto; object-fit: cover; filter: grayscale(0.2) brightness(0.92); }
.hero h1 {
  font-size: clamp(44px, 7.4cqi, 112px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  max-width: 12ch;
  margin: 0 0 clamp(16px, 2cqi, 28px);
  text-wrap: balance;
}
.hero-role {
  font-size: clamp(18px, 1.9cqi, 26px);
  line-height: 1.35;
  max-width: 34em;
  margin: 0 0 var(--space-3);
  text-wrap: pretty;
}
.hero-lead {
  font-size: clamp(16px, 1.35cqi, 19px);
  line-height: 1.5;
  font-style: italic;
  max-width: 34em;
  margin: 0;
  text-wrap: pretty;
}
.contact-btns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
  max-width: 820px;
  margin-top: clamp(28px, 3.5cqi, 48px);
}
.contact-btn {
  min-height: 56px;
  justify-content: flex-start;
  gap: 10px;
  padding-inline: 16px;
  font-size: 16px;
}
.contact-btn i { font-size: 22px; }
.contact-btn.btn-secondary i { color: var(--color-accent); }

/* — Кто я — */
.about .section-h { margin-bottom: clamp(20px, 2.5cqi, 32px); }
.about-text {
  font-size: clamp(19px, 2cqi, 28px);
  line-height: 1.45;
  max-width: 30em;
  margin: 0;
  text-wrap: pretty;
}

/* — Проекты — */
.projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: var(--space-3);
}
.projects .card { gap: var(--space-3); padding: clamp(20px, 1.8cqi, 28px); }
.projects .card-kicker { font-size: 11px; color: var(--color-accent-700); }
.projects .card-kicker.is-oss { color: var(--color-accent-2-700); }
.projects .card-title { font-size: 22px; margin: 0; }
.projects .card-body { font-size: 15px; opacity: 0.85; }

.more { margin-top: clamp(64px, 8cqi, 128px); }
.more .section-h { font-size: clamp(26px, 2.8cqi, 40px); margin-bottom: clamp(20px, 2.5cqi, 32px); }
.more-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr));
  gap: var(--space-4) clamp(24px, 4cqi, 64px);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 1.45;
}
.more-list strong { font-weight: 600; }
.more-list em { color: var(--color-accent-700); }

/* — Open source — */
.repos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr));
  gap: var(--space-2) clamp(24px, 4cqi, 64px);
}
.repo {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 4px 14px;
  padding: var(--space-3) 0;
  color: var(--color-text);
  text-decoration: none;
}
.repo > i:first-child { font-size: 20px; color: var(--color-accent-2); }
.repo > i:nth-child(3) { color: var(--color-accent); }
.repo-name { font-size: 15px; font-weight: 500; color: var(--color-accent-700); overflow-wrap: anywhere; }
.repo:hover .repo-name { text-decoration: underline; text-underline-offset: 3px; }
.repo-desc { grid-column: 2; font-size: 15px; color: color-mix(in srgb, var(--color-text) 75%, transparent); }
.gh-btn { min-height: 48px; margin-top: var(--space-6); gap: 10px; padding-inline: 16px; font-size: 15px; }
.gh-btn i { font-size: 20px; }

/* — Контакты — */
.contacts-h {
  font-size: clamp(36px, 5.4cqi, 80px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(28px, 4cqi, 56px);
}
.contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(24px, 3cqi, 40px) clamp(24px, 4cqi, 64px);
}
.contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--color-text);
  text-decoration: none;
}
.contact-label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.contact-label i { font-size: 18px; color: var(--color-accent); }
.contact-label em { color: var(--color-accent-2-700); }
.contact-value {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(22px, 2.4cqi, 34px);
  color: var(--color-accent-700);
}
.contact:hover .contact-value { text-decoration: underline; text-underline-offset: 4px; }

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: clamp(80px, 10cqi, 160px);
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}