/* Сайт Александра Глибичука · дизайн-система D4 (wave-04/design-system.md 1.5, tokens.json).
   Mobile-first. Пороги 767/768 и 1199/1200. Значения px кратны 8, исключения — раздел 4 системы. */

@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/onest-cyrillic.90d6f787e7.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/onest-latin.d1ae1d5e48.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/assets/martian-mono-cyrillic.0bbd5ee328.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/assets/martian-mono-latin.b8b88084cd.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ultramarine: #2B2AE6;
  --malachite: #0E5E45;
  --yellow: #FFCA70;
  --mint: #D3EBDF;
  --ink: #0D1033;
  --muted: #4B4F6E;
  --ground: #F4F5FA;
  --white: #FFFFFF;
  --lavender: #DCDDFF;
  --on-color-line: rgba(255, 255, 255, 0.16);
  --on-malachite-line: rgba(255, 255, 255, 0.32);
  --sans: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Martian Mono', ui-monospace, Menlo, monospace;

  /* Телефон */
  --page-pad: 8px;
  --plate-gap: 8px;
  --plate-pad: 24px;
  --plate-radius: 24px;
  --display: 56px; --display-lh: 56px;
  --page-title: 40px; --page-title-lh: 48px;
  --section-title: 40px; --section-title-lh: 48px;
  --subsection-title: 40px; --subsection-title-lh: 48px;
  --contact-title: 32px; --contact-title-lh: 40px;
  --card-title: 32px; --card-title-lh: 40px;
  --library-card-title: 24px; --library-card-title-lh: 32px;
  --statement-lg: 24px; --statement-lg-lh: 32px;
  --question: 24px; --question-lh: 32px;
  --statement: 24px; --statement-lh: 32px;
  --nickname: 32px; --nickname-lh: 40px;
}

@media (min-width: 768px) {
  /* Планшет: раскладка широкого экрана, типографика web-tablet, остальное — как на широком экране */
  :root {
    --page-pad: 16px;
    --plate-gap: 16px;
    --plate-pad: 64px;
    --plate-radius: 32px;
    --display: 96px; --display-lh: 96px;
    --page-title: 64px; --page-title-lh: 64px;
    --section-title: 64px; --section-title-lh: 64px;
    --subsection-title: 48px; --subsection-title-lh: 48px;
    --contact-title: 64px; --contact-title-lh: 64px;
    --card-title: 32px; --card-title-lh: 40px;
    --library-card-title: 40px; --library-card-title-lh: 48px;
    --statement-lg: 40px; --statement-lg-lh: 48px;
    --question: 32px; --question-lh: 40px;
    --statement: 32px; --statement-lh: 40px;
    --nickname: 48px; --nickname-lh: 56px;
  }
}

@media (min-width: 1200px) {
  :root {
    --display: 136px; --display-lh: 128px;
    --page-title: 96px; --page-title-lh: 96px;
    --section-title: 96px; --section-title-lh: 96px;
    --subsection-title: 64px; --subsection-title-lh: 64px;
    --card-title: 40px; --card-title-lh: 48px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 24px; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
li { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
svg { flex-shrink: 0; }
[hidden]:not([hidden="until-found"]) { display: none !important; }
[hidden="until-found"] { padding: 0 !important; }

/* Состояния: раздел 6 */
a:hover, button:hover { opacity: 0.85; }
a:active, button:active { opacity: 0.7; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; box-shadow: 0 0 0 8px var(--white); }

.skip-link { position: absolute; left: 8px; top: -80px; z-index: 10; padding: 8px 24px; border-radius: 999px; background: var(--ink); color: var(--white); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.page { max-width: 1440px; margin: 0 auto; padding: var(--page-pad); display: flex; flex-direction: column; gap: var(--plate-gap); }
main { display: flex; flex-direction: column; gap: var(--plate-gap); }
.plate { border-radius: var(--plate-radius); padding: var(--plate-pad); display: flex; flex-direction: column; }

/* Типографика */
.display { font-size: var(--display); line-height: var(--display-lh); font-weight: 800; letter-spacing: -0.045em; }
.display span { display: block; }
.page-title { font-size: var(--page-title); line-height: var(--page-title-lh); font-weight: 800; letter-spacing: -0.04em; }
.section-title { font-size: var(--section-title); line-height: var(--section-title-lh); font-weight: 800; letter-spacing: -0.04em; }
.subsection-title { font-size: var(--subsection-title); line-height: var(--subsection-title-lh); font-weight: 800; letter-spacing: -0.04em; }
.contact-title { font-size: var(--contact-title); line-height: var(--contact-title-lh); font-weight: 800; letter-spacing: -0.04em; }
.card-title { font-size: var(--card-title); line-height: var(--card-title-lh); font-weight: 800; letter-spacing: -0.03em; }
.library-card-title { font-size: var(--library-card-title); line-height: var(--library-card-title-lh); font-weight: 800; letter-spacing: -0.03em; }
.card-title-sm { font-size: 32px; line-height: 40px; font-weight: 800; letter-spacing: -0.03em; }
.statement-lg { font-size: var(--statement-lg); line-height: var(--statement-lg-lh); font-weight: 700; letter-spacing: -0.02em; }
.statement { font-size: var(--statement); line-height: var(--statement-lh); font-weight: 700; letter-spacing: -0.02em; }
.question { font-size: var(--question); line-height: var(--question-lh); font-weight: 800; letter-spacing: -0.03em; }
.nickname { font-size: var(--nickname); line-height: var(--nickname-lh); font-weight: 700; letter-spacing: -0.03em; color: var(--malachite); }
.lead { font-size: 24px; line-height: 32px; max-width: 640px; }
.lead-strong { font-size: 24px; line-height: 32px; font-weight: 600; }
.body { font-size: 16px; line-height: 24px; }
.meta { font-family: var(--mono); font-size: 16px; line-height: 24px; font-weight: 400; }
.measure-560 { max-width: 560px; }

/* Навигация и капсулы */
.nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; }
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 2px solid transparent; font-size: 16px; line-height: 24px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pill--white { background: var(--white); border-color: var(--white); color: var(--ink); }
.pill--dark { background: var(--ink); border-color: var(--ink); color: var(--white); }
.pill--outline-light { min-height: 56px; background: transparent; border-color: var(--white); color: var(--white); gap: 16px; }
.pill--ground { background: var(--ground); border-color: var(--ground); color: var(--ink); }

/* Основная кнопка раздела */
.btn { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; min-height: 64px; padding: 8px 32px; border-radius: 999px; text-align: center; font-size: 16px; line-height: 24px; font-weight: 700; text-decoration: none; }
.btn--yellow { background: var(--yellow); color: var(--ink); }
.btn--malachite { background: var(--malachite); color: var(--white); }
@media (min-width: 768px) {
  .btn { width: auto; min-height: 72px; padding: 0 40px; font-size: 24px; line-height: 32px; white-space: nowrap; }
}

/* Первый экран */
.hero { background: var(--white); color: var(--ink); display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.hero__name { display: flex; flex-direction: column; gap: 16px; container-type: inline-size; }
.hero__photo { height: 320px; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; border-radius: 16px; }
.hero__intro { display: flex; flex-direction: column; gap: 32px; }
.entries { display: flex; flex-direction: column; gap: 8px; }
.entry { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 0 24px; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 16px; line-height: 24px; font-weight: 600; text-decoration: none; }
.entry span { padding: 8px 0; }
@media (min-width: 768px) {
  .hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; column-gap: 64px; row-gap: 64px; }
  .hero__name { grid-column: 1; grid-row: 1; gap: 24px; }
  .hero__intro { grid-column: 1; grid-row: 2; align-self: end; }
  .hero__photo { grid-column: 2; grid-row: 1 / span 2; height: auto; min-height: 720px; position: relative; }
  .hero__photo img { position: absolute; inset: 0; object-position: 50% 25%; border-radius: 24px; }
  .entries { max-width: 480px; }
  .entry { min-height: 64px; }
}
/* Имя не режется: если строка не помещается в колонку, берётся стиль следующей ширины (раздел 3) */
@container (max-width: 687px) { .hero .display { font-size: 96px; line-height: 96px; } }
@container (max-width: 485px) { .hero .display { font-size: 56px; line-height: 56px; } }
@container (max-width: 282px) { .hero .display { font-size: 40px; line-height: 48px; } }

/* Выступления */
.speaking { background: var(--ultramarine); color: var(--white); gap: 32px; }
.speaking__head { display: flex; flex-direction: column; gap: 24px; }
.speaking__intro { color: var(--lavender); }
.speaking__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; }
.topics-wrap { container-type: inline-size; }
.topics { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.topic { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 24px; border-radius: 24px; color: var(--ink); }
.topic--mint { background: var(--mint); }
.topic--white { background: var(--white); }
.topic--white p { color: var(--muted); }
.topic--yellow { background: var(--yellow); }
.examples { display: flex; flex-direction: column; }
.example { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; border-top: 2px solid var(--on-color-line); color: var(--white); text-decoration: none; }
.example__text { display: flex; flex-direction: column; gap: 8px; }
.example__label { color: var(--lavender); }
.example__link { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.circle { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; }
.circle--yellow { background: var(--yellow); color: var(--ink); }
.cta-row { display: flex; flex-direction: column; gap: 24px; }
.cta-row--lined { padding-top: 24px; border-top: 2px solid var(--on-color-line); }
@media (min-width: 768px) {
  .speaking { gap: 48px; }
  .speaking__head { flex-direction: row; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; }
  .speaking__photo img { aspect-ratio: auto; height: 400px; object-position: 50% 45%; border-radius: 24px; }
  .topics { gap: 16px; }
  .topic { padding: 40px; }
  .cta-row { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
}
@media (min-width: 1200px) {
  .speaking__photo img { height: 560px; }
}
/* Три темы в ряд — при ширине плиты от 960 (раздел 8) */
/* Абзацы трёх карточек начинаются с одной линии (раздел 5, правка Sasha 13.09.2026) */
@container (min-width: 832px) {
  .topics { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr auto; row-gap: 0; min-height: 400px; }
  .topic { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 32px; }
  .topic h3 { min-height: calc(var(--card-title-lh) * 2); }
}

/* Консультации */
.consulting { background: var(--malachite); color: var(--white); gap: 32px; }
.consulting__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.checklist-block { display: flex; flex-direction: column; gap: 24px; }
.checklist li { display: flex; align-items: flex-start; gap: 24px; padding: 24px 0; border-top: 2px solid var(--on-malachite-line); }
.circle--check { background: var(--yellow); color: var(--malachite); }
.infocard { display: flex; flex-direction: column; gap: 24px; padding: 24px; border-radius: 24px; background: var(--white); color: var(--ink); }
.infocard__row { padding-top: 24px; border-top: 2px solid var(--ground); }
.infocard__row strong { font-weight: 800; }
.link-underline { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--malachite); text-decoration-thickness: 3px; text-underline-offset: 4px; }
@media (min-width: 768px) {
  .consulting { gap: 48px; }
  .infocard { padding: 40px; }
}
/* Колонки 7:5 и 1:1 — когда в каждой колонке помещается строка текста; уже 1024 колонки ставятся друг под другом (раздел 8) */
@media (min-width: 1024px) {
  .consulting__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
}

/* Раскрытия */
.disclosure__button { display: flex; flex-wrap: wrap; width: 100%; align-items: center; justify-content: space-between; gap: 24px; }
.plus { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; transition: transform 200ms cubic-bezier(0.25, 0.1, 0.25, 1); }
.disclosure__button[aria-expanded="true"] .plus { transform: rotate(45deg); }
html:not(.js) .plus { display: none; }
html.js .disclosure__panel[data-initial] { display: none; }
html:not(.js) .disclosure__button { cursor: default; }
.disclosure-card { border-radius: 24px; background: var(--white); color: var(--ink); }
.disclosure-card .disclosure__button { padding: 24px; }
.disclosure-card .plus { background: var(--malachite); color: var(--white); }
.disclosure-card .disclosure__panel { padding: 0 24px 24px; }
.disclosure-line { margin-top: 32px; border-top: 2px solid var(--ink); }
.disclosure-line .disclosure__button { padding: 24px 0; }
.disclosure-line .plus { background: var(--ground); color: var(--ink); }
.disclosure-line .disclosure__panel { display: flex; flex-direction: column; gap: 16px; max-width: 640px; padding-bottom: 8px; user-select: text; }
.disclosure-line .disclosure__panel .body { color: var(--muted); }
@media (min-width: 768px) {
  .disclosure-card .disclosure__button { padding: 24px 40px; }
  .disclosure-card .disclosure__panel { padding: 0 40px 40px; }
  .disclosure-line { margin-top: 48px; }
}

/* Для СМИ */
.media { background: var(--white); color: var(--ink); }
.media__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.media__head { display: flex; flex-direction: column; gap: 32px; }
.media__actions { display: flex; flex-direction: column; gap: 24px; justify-content: flex-end; }
.media__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; }
.lib-link { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--malachite); text-decoration-thickness: 3px; text-underline-offset: 8px; }
@media (min-width: 1024px) {
  .media__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; row-gap: 32px; align-items: start; }
  .media__head { grid-column: 1; grid-row: 1; }
  .media__actions { grid-column: 1; grid-row: 2; align-items: flex-start; }
  .media__photo { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
@media (min-width: 768px) {
  .media__photo img { border-radius: 24px; }
  .media__actions { align-items: flex-start; }
}

/* Блог, книга и курс */
.duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.blog { background: var(--ink); color: var(--white); gap: 32px; justify-content: space-between; }
.blog__title { display: flex; flex-direction: column; gap: 16px; }
.blog__label { color: var(--lavender); }
.blog__name { color: var(--mint); }
.works { background: var(--white); color: var(--ink); gap: 32px; container-type: inline-size; }
.works__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.work { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 24px; background: var(--ground); }
.work p { flex-grow: 1; }
.work a { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--malachite); text-decoration-thickness: 3px; text-underline-offset: 4px; }
@media (min-width: 1024px) {
  .duo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; }
}
@media (min-width: 768px) {
  .works__grid { gap: 16px; }
  .work { padding: 32px; }
}
/* Две работы в ряд: заголовки, абзацы и ссылки на одних линиях (раздел 5) */
@container (min-width: 672px) {
  .works__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; column-gap: 16px; row-gap: 0; }
  .work { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 16px; }
  .work h3 { min-height: 80px; }
}

/* Подвал */
.footer { display: flex; flex-direction: column; gap: 16px; padding: 24px 16px; }
.footer__name { font-size: 24px; line-height: 32px; font-weight: 800; }
.footer__name a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--malachite); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.footer__help, .footer__copy { color: var(--muted); }
.footer__copy { text-align: center; }
@media (min-width: 768px) {
  .footer { flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding: 40px 24px; }
  .footer__copy { flex-basis: 100%; }
}

/* Материалы */
.lib-header { background: var(--malachite); color: var(--white); gap: 32px; }
.lib-header .page-title { max-width: 1120px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
html:not(.js) .filters { display: none; }
.filter { display: flex; align-items: center; min-height: 56px; padding: 0 24px; border-radius: 999px; border: 2px solid var(--white); background: var(--white); color: var(--ink); font-size: 16px; line-height: 24px; font-weight: 600; }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.library { background: var(--white); padding: 8px 24px; container-type: inline-size; }
.material { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px 0; border-bottom: 2px solid var(--ground); scroll-margin-top: 16px; }
.material__main { display: flex; flex-direction: column; gap: 16px; }
.material__meta { color: var(--muted); }
.material__source { color: var(--ink); font-weight: 500; }
.material__side { display: flex; flex-direction: column; gap: 24px; justify-content: space-between; }
.capsules { display: flex; flex-wrap: wrap; gap: 8px; }
.capsules .pill { gap: 8px; }
@media (min-width: 768px) {
  .library { padding: 16px 64px; }
  .material { padding: 40px 0; }
}
@container (min-width: 800px) {
  .material { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; }
}
.lib-contact { background: var(--ultramarine); color: var(--white); gap: 32px; }
.lib-contact .contact-title { max-width: 960px; }
.lib-contact__text { color: var(--lavender); }
.lib-contact__links { display: flex; flex-wrap: wrap; gap: 24px; }
.lib-contact__links a { color: var(--white); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* 404 */
.notfound { background: var(--white); color: var(--ink); gap: 32px; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}