/* About · журнальная вёрстка в духе Cargo Collective (Р91, дирижёр).
   Разделы — полосы во всю ширину экрана, раскрываются и сворачиваются (sections/about.js).
   Различаются тихими оттенками бумаги, а не цветными вкладками; разделители — волосяные
   линии 1px; шрифт — тонкий Inter Tight, заголовки умеренные; моно только для цифр. */

@font-face {
    font-family: 'LoRes 12';
    src: url('../fonts/lores/LoRes12OT-Regular.otf?v=1') format('opentype');
    font-weight: 400; font-style: normal; font-display: swap;
}
/* LoRes 12 OT Regular — средние «инфо-заголовки» About (Р95): 24px = 2× сетки шрифта (em = 12 пикселей).
   Serif LoRes 21 остаётся только у заголовка страницы. */
.ab {
    /* LoRes 12: 36px = 3× сетки, разрядка −3px = минус ровно один пиксель шрифта (Р103: крупнее, смелее, плотнее) */
    --ab-info-xl: 400 36px/40px 'LoRes 12', var(--font-ui, 'Inter Tight', system-ui, sans-serif);
    --ab-info-xl-ls: -3px;
    /* 48px = 4× сетки, −4px = минус один пиксель шрифта: названия разделов */
    --ab-title: 400 48px/52px 'LoRes 12', var(--font-ui, 'Inter Tight', system-ui, sans-serif);
    --ab-title-ls: -4px;
    /* 24px = 2× сетки, разрядка −2px = минус один пиксель шрифта */
    --ab-info: 400 24px/30px 'LoRes 12', var(--font-ui, 'Inter Tight', system-ui, sans-serif);
    --ab-info-ls: -2px;
}
.af-t, .ab-lead, .ab-pts h4 { font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; }

/* Пиксельные шрифты показываем как они нарисованы: кратный кегль, разрядка 0, без сглаживания и фальш-жирного */
body[data-page="about"] .page-title { font-size: 42px; line-height: 48px; letter-spacing: 0; font-weight: 400; font-synthesis: none; }
body[data-page="about"] .page-head { margin-bottom: 0; border: 0; }
body[data-page="about"] .page { padding-bottom: 0; }

.ab {
    width: 100vw;
    margin: 40px 0 0 calc(50% - 50vw);
    --ab-line: color-mix(in srgb, var(--ink) 11%, transparent);
    --ab-pad: max(52px, calc((100vw - 1320px) / 2));
}

/* мягкая серая градация разделов (Р104): каждый следующий на ~1.3% темнее, без крайностей;
   между разделами одна волосяная линия, у первого её нет */
.af + .af { border-top: 1px solid var(--ab-line); }
.af { background: var(--ab-tone, var(--paper)); }
.af-1 { --ab-tone: var(--paper); }
.af-2 { --ab-tone: color-mix(in srgb, var(--paper) 98.7%, var(--ink)); }
.af-3 { --ab-tone: color-mix(in srgb, var(--paper) 97.4%, var(--ink)); }
.af-4 { --ab-tone: color-mix(in srgb, var(--paper) 96.1%, var(--ink)); }
.af-5 { --ab-tone: color-mix(in srgb, var(--paper) 94.8%, var(--ink)); }
.af-6 { --ab-tone: color-mix(in srgb, var(--paper) 93.5%, var(--ink)); }

/* строка раздела */
.af-tabrow { margin: 0; font: inherit; }
.af-tab {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: baseline;
    width: 100%;
    margin: 0;
    padding: 32px var(--ab-pad) 30px;
    border: 0;
    background: none;
    color: var(--ink);
    font: 400 15px/1.3 var(--font-ui, 'Inter Tight', system-ui, sans-serif);
    letter-spacing: 0;
    text-align: left;
    cursor: pointer;
    transition: background-color 160ms var(--ease-out, ease-out);
}
.af-tab::after {
    content: "+";
    font: 400 15px/1 var(--font-label, var(--font-mono, ui-monospace, monospace));
    color: var(--ink-3);
}
.af-tab[aria-expanded="true"]::after { content: "–"; }
.af-n { font: 400 12px/1 var(--font-label, var(--font-mono, ui-monospace, monospace)); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.af-t { color: var(--ink); font: var(--ab-title); letter-spacing: var(--ab-title-ls); }
.af-tab { grid-template-columns: 64px 40px 1fr auto !important; align-items: center !important; }
.af-tab::after { content: none !important; }
.af-ico { width: 24px; height: 24px; color: var(--ink-3); align-self: center; }                 /* 8×8 клеток по 3px */
.af-arrow { width: 15px; height: 9px; color: var(--ink-3); align-self: center; }                 /* 5×3 клетки по 3px */
.af-tab[aria-expanded="true"] .af-arrow { transform: scaleY(-1); }                                    /* ▼ → ▲ без поворота: пиксели не плывут */
.af-n { font: 400 24px/1 'LoRes 12', var(--font-label, monospace) !important; letter-spacing: -2px; color: var(--ink-3); font-synthesis: none; -webkit-font-smoothing: antialiased; }
/* полоска длительности в карьере: сегмент = полгода, как полоска здоровья */
.ab-hp { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 9px; max-width: 162px; }       /* сегмент 2×2 клетки по 3px, зазор 1 клетка */
.ab-hp i { display: block; width: 6px; height: 6px; background: var(--ink-3); }
.ab-tl tr:last-child .ab-hp i { background: var(--accent); }
/* пиксельные маркеры списков */
.ab-listf li { position: relative; padding-left: 18px !important; }
.ab-listf li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: color-mix(in srgb, var(--ink-3) 70%, var(--paper)); }
.af-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
    .af-tab:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
}

.af-body { overflow: hidden; }
.af-in { padding: 12px var(--ab-pad) 88px calc(var(--ab-pad) + 64px); }

/* Overview */
.ab-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 32px;
}
.ab-lead {
    grid-column: 1 / span 8;
    margin: 0;
    font: var(--ab-info-xl);
    letter-spacing: var(--ab-info-xl-ls);
    color: var(--ink);
    max-width: 28ch;
    text-wrap: balance;
}
.ab-prose { grid-column: 1 / span 5; }
.ab-prose p { margin: 0 0 12px; font: 400 15px/1.55 var(--font-ui, 'Inter Tight', system-ui, sans-serif); color: var(--ink-2); max-width: 62ch; }
.ab-facts { grid-column: 7 / span 6; margin: 0; }
.ab-fact {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 16px;
    padding: 0 0 18px;
}
.ab-fact dt { font: 400 11px/1.6 var(--font-label, var(--font-mono, ui-monospace, monospace)); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.02em; }
.ab-fact dd { margin: 0; font: 400 15px/1.4 var(--font-ui, 'Inter Tight', system-ui, sans-serif); color: var(--ink); }
.ab-sub { display: block; font-size: 13px; color: var(--ink-2); }
.ab-sub a, .ab-facts a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Career */
.ab-tl { width: 100%; border-collapse: collapse; }
.ab-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ab-tl td { padding: 0 24px 26px 0; vertical-align: baseline; }
.ab-when { width: 18%; font: 400 12px/1.5 var(--font-label, var(--font-mono, ui-monospace, monospace)); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ab-co { width: 22%; font: 500 15px/1.4 var(--font-ui, 'Inter Tight', system-ui, sans-serif); color: var(--ink); }
.ab-role { width: 20%; font: 400 15px/1.4 var(--font-ui, 'Inter Tight', system-ui, sans-serif); color: var(--ink-2); }
.ab-what { font: 400 14px/1.55 var(--font-ui, 'Inter Tight', system-ui, sans-serif); color: var(--ink-2); padding-right: 0 !important; max-width: 60ch; }

/* Design / Product / Tools */
.ab-listf ul { margin: 0; padding: 0; list-style: none; columns: 3 220px; column-gap: 24px; }
.ab-listf li {
    break-inside: avoid;
    padding: 0 0 12px;
    font: 400 15px/1.4 var(--font-ui, 'Inter Tight', system-ui, sans-serif);
    color: var(--ink);
}

/* Philosophy */
.ab-pts { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.ab-pts li { padding: 0; }
.ab-pn { display: block; font: 400 12px/1 var(--font-label, var(--font-mono, ui-monospace, monospace)); color: var(--ink-3); margin-bottom: 10px; }
.ab-pts h4 { margin: 0 0 10px; font: var(--ab-info); letter-spacing: var(--ab-info-ls); color: var(--ink); }
.ab-pts p { margin: 0; font: 400 14px/1.55 var(--font-ui, 'Inter Tight', system-ui, sans-serif); color: var(--ink-2); max-width: 52ch; }

@media (max-width: 1023px) {
    .ab-lead { grid-column: 1 / -1; }
    .ab-prose, .ab-facts { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
    body[data-page="about"] .page-title { font-size: 42px; }
    .ab { --ab-pad: 20px; }
    .af-tab { grid-template-columns: 40px 1fr auto; }
    .af-in { padding: 4px 20px 40px; }
    .ab-lead { font: var(--ab-info); letter-spacing: var(--ab-info-ls); }
    .af-t { font: var(--ab-info-xl); letter-spacing: var(--ab-info-xl-ls); }
    .af-tab { grid-template-columns: 36px 30px 1fr auto !important; }
    .af-n { font: 500 12px/1 var(--font-ui, 'Inter Tight', system-ui, sans-serif) !important; letter-spacing: 0; font-variant-numeric: tabular-nums; }   /* мелкое — Inter, пиксельный только от 24 */
    .ab-fact { grid-template-columns: 96px 1fr; }
    .ab-tl, .ab-tl tbody, .ab-tl tr, .ab-tl td { display: block; width: auto; }
    .ab-tl tr { padding: 12px 0; }
    .ab-tl td { padding: 2px 0; }
    .ab-pts { grid-template-columns: 1fr; }
}


/* ── Р108: без заголовков «About» и «Overview», типографика без перепадов ───────────────
   Страница и так говорит, где мы: заголовок страницы и строка первого раздела скрыты (для
   скринридера остаются). Шкала усреднена: крупное на шаг меньше, мелкое на шаг крупнее и темнее,
   чтобы между ними не было провала по толщине. */
body[data-page="about"] .page-head {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.af-1 .af-tabrow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.af-1 .af-in { padding-top: 24px; }
.ab { margin-top: 8px; }
.ab-lead .hidden-coin { margin-left: 8px; vertical-align: middle; }

.af-t { font: var(--ab-info-xl) !important; letter-spacing: var(--ab-info-xl-ls) !important; }      /* 48 → 36 */
.ab-lead { font: var(--ab-info) !important; letter-spacing: var(--ab-info-ls) !important; max-width: 36ch; }   /* 36 → 24 */
.ab-prose p { font-size: 17px; line-height: 1.55; color: var(--ink); }
.ab-fact dt, .ab-when { font-size: 12px; }
.ab-fact dd { font-size: 17px; }
.ab-sub { font-size: 15px; }
.ab-co, .ab-role { font-size: 16px; }
.ab-what { font-size: 15px; color: var(--ink); }
.ab-listf li { font-size: 16px; }
.ab-pts p { font-size: 15px; color: var(--ink); }
.af-tab { padding-top: 26px !important; padding-bottom: 24px !important; }


/* ── Р118: вступление и подписи без хлипкого моно ───────────────────────────────────────
   Иерархия (apple-design §15: вес + размер + интерлиньяж набором, не одним кеглем):
   надзаголовок Inter 13 капс → тезис LoRes 21 Serif 42 → цифры LoRes 12 36 + подпись Inter 14.
   Моно в About больше не используется: подписи и даты — Inter Tight 500 с табличными цифрами. */
.ab-intro { padding: 56px 0 72px 64px; }                         /* левый край совпадает с текстом разделов */
.ab-intro .ab-eyebrow {                                           /* .page p { margin:0 } перебивал одиночный класс */
    margin: 0 0 40px;                                              /* Р146: больше воздуха до тезиса */
    font: 500 13px/1 var(--font-ui, 'Inter Tight', system-ui, sans-serif);
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}
.ab-hero {
    margin: 0;
    max-width: none;                                               /* Р146: строки заданы вручную — «and» с новой строки */
    font: 400 63px/60px 'LoRes 21 Serif', var(--font-ui, 'Inter Tight', system-ui, sans-serif);
    letter-spacing: 0; font-synthesis: none;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision;
    color: var(--ink);
}
.ab-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 56px 0 0;
    max-width: 1100px;
}
.ab-stats div { display: flex; flex-direction: column-reverse; gap: 8px; padding-top: 16px; border-top: 1px solid var(--ab-line, color-mix(in srgb, var(--ink) 11%, transparent)); }
.ab-stats dd {
    margin: 0;
    font: 400 36px/40px 'LoRes 12', var(--font-ui, 'Inter Tight', system-ui, sans-serif);
    letter-spacing: -3px; font-synthesis: none;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision;
    color: var(--ink);
}
.ab-stats dt { font: 400 14px/1.35 var(--font-ui, 'Inter Tight', system-ui, sans-serif); color: var(--ink-2); }

/* подписи и даты: вместо тонкого моно — Inter Tight 500, табличные цифры */
.ab-fact dt {
    font: 500 12px/1.6 var(--font-ui, 'Inter Tight', system-ui, sans-serif) !important;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}
.ab-when {
    font: 500 14px/1.5 var(--font-ui, 'Inter Tight', system-ui, sans-serif) !important;
    font-variant-numeric: tabular-nums; color: var(--ink-2) !important; letter-spacing: 0;
}

@media (max-width: 1023px) { .ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } }
@media (max-width: 767px) {
    .ab-intro { padding: 32px 0 48px; }
    .ab-hero { font-size: 42px; line-height: 42px; }
    .ab-hero .ab-br-d { display: none; }
    .ab-stats { margin-top: 40px; }
    .ab-stats dd { font-size: 24px; line-height: 28px; letter-spacing: -2px; }
}


/* ── Р154: аудит типографики About — воздух, ритм, тихие пиксельные акценты ─────────────────
   Роб: «всё сливается, очень мало места; слишком большие перепады контраста у пиксельных иконок
   и индикаторов с нашими шрифтами — индикаторы меньше, иконки аккуратнее и серым».
   Ритм на одной шкале 8 · 16 · 24 · 40 · 64 · 96. Текст: основной --ink, вторичный --ink-2,
   служебное --ink-3. Пиксельное (иконки, стрелки, полоски, маркеры) — на том же шаге 3px, но
   приглушено до --ab-px, чтобы не спорить с буквами по контрасту. */
.ab { --ab-px: color-mix(in srgb, var(--ink-3) 55%, var(--paper)); }

/* вступление → разделы */
.ab-intro { padding-bottom: 96px; }
.ab-stats { margin-top: 64px; row-gap: 40px; }
.ab-stats div { gap: 12px; padding-top: 24px; }

/* строки разделов: больше воздуха, тише служебное */
.af-tab { padding-top: 36px !important; padding-bottom: 36px !important; }
.af-n { color: var(--ab-px) !important; }
.af-ico, .af-arrow { color: var(--ab-px); }
.af-in { padding-top: 16px; padding-bottom: 104px; }
.af-1 .af-in { padding-top: 40px; }

/* Overview: лид → текст → факты, каждый шаг отделён */
.ab-grid { row-gap: 56px; column-gap: 40px; }
.ab-lead { line-height: 36px !important; }
.ab-prose p { margin: 0 0 20px; font-size: 17px; line-height: 1.65; max-width: 58ch; }
.ab-prose p:last-child { margin-bottom: 0; }
.ab-fact { gap: 24px; padding: 0 0 28px; }
.ab-fact dd { line-height: 1.45; }
.ab-sub { margin-top: 6px; line-height: 1.45; }

/* Career: строки дышат, полоска-индикатор втрое тише */
.ab-tl td { padding: 0 32px 44px 0; }
.ab-tl tr:last-child td { padding-bottom: 0; }
.ab-what { line-height: 1.65; }
.ab-hp { gap: 3px; margin-top: 12px; max-width: 120px; }
.ab-hp i { width: 3px; height: 3px; background: var(--ab-px); }                     /* 1 клетка 3px вместо 2×2 */
.ab-tl tr:last-child .ab-hp i { background: var(--ink-3); }                         /* текущее место — на тон темнее, без синего */

/* списки Design / Product / Tools */
.ab-listf ul { column-gap: 48px; }
.ab-listf li { padding: 0 0 18px 16px !important; line-height: 1.5; }
.ab-listf li::before { top: .62em; width: 3px; height: 3px; background: var(--ab-px); }

/* Philosophy */
.ab-pts { gap: 56px 48px; }
.ab-pn { font: 500 12px/1 var(--font-ui, 'Inter Tight', system-ui, sans-serif) !important; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: var(--ink-3); margin-bottom: 14px; }   /* без тонкого моно */
.ab-pts h4 { margin-bottom: 14px; }
.ab-pts p { line-height: 1.65; }

/* монета в лиде — тоже тише, не синим пятном рядом с текстом */
.ab-lead .hidden-coin { opacity: .6; }

@media (max-width: 767px) {
    .ab-intro { padding-bottom: 64px; }
    .ab-stats { margin-top: 48px; row-gap: 32px; }
    .af-tab { padding-top: 28px !important; padding-bottom: 28px !important; }
    .af-in { padding-bottom: 64px; }
    .ab-grid { row-gap: 40px; }
    .ab-tl tr { padding: 0 0 32px; }
    .ab-tl td { padding: 3px 0; }
    .ab-pts { gap: 40px; }
}

/* аудит №5: мелкий набор только по шкале 18 · 16 · 14 · 12 (было шесть кеглей 12–17) */
.ab-prose p, .ab-fact dd { font-size: 18px !important; }
.ab-co, .ab-role, .ab-what, .ab-listf li, .ab-pts p { font-size: 16px !important; }
.ab-sub, .ab-when, .ab-stats dt { font-size: 14px !important; }
.ab-intro .ab-eyebrow, .ab-fact dt, .ab-pn { font-size: 12px !important; }
.ab-co { font-weight: 600 !important; }                                             /* было 500/700 вперемешку */
.ab b, .ab strong, .ab th { font-weight: 600; }   /* Inter Tight подключён 400–600: без 700 браузер не дорисовывает жирный */