/* =====================================================================
   Типографическая система wwwgoncharov — единственный источник правды.
   Fluid modular scale, Major Third (1.25), viewport ≈ 360 → 1440px.
   Любой новый блок или страница берёт размеры ТОЛЬКО из этих токенов.

   Подключение: в <head> ПОСЛЕ основного <style>:
     главная:          <link rel="stylesheet" href="typography.css">
     вложенная папка:  <link rel="stylesheet" href="../typography.css">
   ===================================================================== */

:root {
  /* Type Scale */
  --fs-xs:    clamp(0.75rem,  0.71rem + 0.18vw, 0.8125rem);  /* caption / fine print / eyebrow */
  --fs-sm:    clamp(0.875rem, 0.83rem + 0.22vw, 0.9375rem);  /* small / labels / meta */
  --fs-base:  clamp(1rem,     0.95rem + 0.25vw, 1.125rem);   /* body text */
  --fs-md:    clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);    /* lead / large body */
  --fs-lg:    clamp(1.25rem,  1.12rem + 0.55vw, 1.5rem);     /* H4 / subheading */
  --fs-xl:    clamp(1.5rem,   1.28rem + 0.95vw, 1.875rem);   /* H3 */
  --fs-2xl:   clamp(1.875rem, 1.5rem  + 1.6vw,  2.5rem);     /* H2 */
  --fs-3xl:   clamp(2.25rem,  1.7rem  + 2.4vw,  3.25rem);    /* H1 */
  --fs-4xl:   clamp(2.75rem,  1.95rem + 3.5vw,  4.5rem);     /* Display / Hero / Name */

  /* Line heights */
  --lh-tight:   1.15;  /* крупные заголовки */
  --lh-snug:    1.3;   /* подзаголовки */
  --lh-normal:  1.5;   /* body */
  --lh-relaxed: 1.65;  /* длинный текст */

  /* Letter-spacing */
  --ls-tight:  -0.02em;  /* крупные заголовки */
  --ls-normal:  0;
  --ls-wide:    0.04em;  /* eyebrow / uppercase */
}

/* ---------- Базовые роли (для любых текущих и будущих страниц) ---------- */
body { font-size: var(--fs-base); line-height: var(--lh-normal); letter-spacing: var(--ls-normal); }
h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-2xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-xl);  line-height: var(--lh-snug);  letter-spacing: var(--ls-tight); }
h4 { font-size: var(--fs-lg);  line-height: var(--lh-snug); }
small { font-size: var(--fs-sm); }

/* Утилиты для новых блоков */
.t-display { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.t-h1      { font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.t-h2      { font-size: var(--fs-2xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.t-h3      { font-size: var(--fs-xl);  line-height: var(--lh-snug);  letter-spacing: var(--ls-tight); }
.t-h4      { font-size: var(--fs-lg);  line-height: var(--lh-snug); }
.t-lead    { font-size: var(--fs-md);  line-height: var(--lh-relaxed); }
.t-body    { font-size: var(--fs-base); line-height: var(--lh-normal); }
.t-small   { font-size: var(--fs-sm);  line-height: var(--lh-normal); }
.t-caption { font-size: var(--fs-xs);  line-height: var(--lh-normal); }
.t-eyebrow { font-size: var(--fs-xs);  line-height: var(--lh-normal); letter-spacing: var(--ls-wide); text-transform: uppercase; }

/* ---------- Главная: существующие компоненты → токены ---------- */
.role        { font-size: var(--fs-md); line-height: var(--lh-snug); }
.handle      { font-size: var(--fs-sm); }
.about       { font-size: var(--fs-md); line-height: var(--lh-relaxed); }
.label       { font-size: var(--fs-2xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.name        { font-size: var(--fs-lg); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
.type        { font-size: var(--fs-xs); }
.extra       { font-size: var(--fs-sm); }
.cta         { font-size: var(--fs-sm); }
.btn         { font-size: var(--fs-base); }
.contacts p  { font-size: var(--fs-base); line-height: var(--lh-normal); }
.socials-label    { font-size: var(--fs-sm); }
.socials-list a   { font-size: var(--fs-base); line-height: var(--lh-snug); }
.planet-info      { font-size: var(--fs-sm); }
.planet-btn       { font-size: var(--fs-sm); }
.lang-switch button { font-size: var(--fs-xs); }
footer       { font-size: var(--fs-sm); }

/* Мобильные переопределения из основного <style> больше не нужны:
   токены сами дают 16px body и 20px .name на 360px. */
@media (max-width: 640px) {
  body  { font-size: var(--fs-base); }
  .name { font-size: var(--fs-lg); }
  .lang-switch button { font-size: var(--fs-xs); }
}
