/* Source Serif 4 (тело статьи) + Inter (интерфейс), самохостинг.
   Сабсеты latin / latin-ext / cyrillic. Узбекские ʻ ʼ (U+02BB, U+02BC) входят в latin
   и посажены на нормальную ширину — в IBM Plex они были 0.60em, шире буквы o.

   Файлы вариативные (fvar), поэтому один сабсет закрывает весь диапазон весов.
   Отдельных файлов под 600 не держим: они были побайтово теми же самыми.
   Курсив Source Serif 4 — статический, только 400. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/text/inter-400-cyrillic.4e2553027f1d.woff2") format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/text/inter-400-latin-ext.01ba6c2a184b.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/text/inter-reference-latin.65850a373e25.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: 'Source Serif 4';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/text/source-serif-4-400-italic-cyrillic.af565311b977.woff2") format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}

@font-face {
    font-family: 'Source Serif 4';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/text/source-serif-4-400-italic-latin-ext.de0b93db1e3a.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: 'Source Serif 4';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/text/source-serif-4-400-italic-latin.4995c54f474a.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: 'Source Serif 4';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/text/source-serif-4-400-cyrillic.7e5684efc679.woff2") format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}

@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/text/source-serif-4-400-latin-ext.ab6e1dbe7b75.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/text/source-serif-4-400-latin.62f0a26ced41.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
}

/* Палитра снята с samabdullaev.com; светлая тема по умолчанию. */
:root {
    color-scheme: light;

    --color-bg: #faf8f4;
    --color-text: #222;
    --color-text-secondary: #6a6a6a;
    --color-card: #fff;
    --color-border: #e3dfd5;
    --color-hover: #eeebe4;
    --color-link: #175cff;
    --navbar-bg: #faf8f4eb;
    --navbar-border: #0000000f;
    --shadow: 0 8px 24px rgb(0 0 0 / .08);

    /* Отдельная граница для интерактивных элементов. --color-border даёт к фону
       1.25:1, а WCAG 1.4.11 требует ≥3:1 для контуров кнопок и контролов.
       У карточек граница декоративная, там достаточно обычной. */
    --color-border-strong: #8f877b;

    --radius: .5rem;
    --radius-lg: .75rem;
    --radius-xl: 1rem;
    --ease: cubic-bezier(.16, 1, .3, 1);

    --font-ui: 'Inter', system-ui, sans-serif;
    --font-body: 'Source Serif 4', Georgia, serif
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --color-bg: #1a1919;
    --color-text: #eee;
    --color-text-secondary: #a0a0a0;
    --color-card: #222;
    --color-border: #333;
    --color-hover: #2a2a2a;
    --color-link: #a8b8ff;
    --color-border-strong: #6b6b68;
    --navbar-bg: #1a1919eb;
    --navbar-border: #ffffff14;
    --shadow: 0 8px 24px rgb(0 0 0 / .3)
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

ol, ul {
    list-style: none
}

a {
    text-decoration: none
}

a:hover {
    text-decoration: none;
    opacity: .9
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
    scrollbar-color: var(--color-border-strong) var(--color-bg)
}

::selection { background: var(--color-text); color: var(--color-bg) }

body {
    font-family: var(--font-ui);
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    transition: background-color 240ms ease, color 240ms ease
}

.skip-link {
    position: fixed;
    z-index: 200;
    top: 8px;
    left: 8px;
    padding: 10px 14px;
    border-radius: var(--radius);
    color: var(--color-bg);
    background: var(--color-text);
    transform: translateY(-150%)
}

.skip-link:focus {
    transform: translateY(0)
}

/* Сайт для чтения: тело статьи засечным, интерфейс гротеском. */

/* Раньше приходил из about.css и Bootstrap. Оба ушли — без этого правила
   подписи иконок на главной стали бы видимым текстом. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
}

/* Доступность: до этого во всём проекте не было ни одного стиля фокуса.
   :focus-visible, а не :focus — контур только для клавиатуры, не для мыши. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px
}

@media (prefers-reduced-motion: reduce) {
    *, *:before, *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
    }
}

/* Метка переводов в строке архива. Кодирует факт о посте — что он существует
   на других языках, — а не украшает. У одноязычного поста её нет вовсе. */
.post-langs {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid var(--color-border);
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--color-text-secondary)
}

@media (max-width: 767.98px) {
    h1 {
        font-size: 30px
    }
}

p, li {
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--color-text)
}

/* Раскладка. Взамен Bootstrap 4.4.1 (159 КБ с CDN ради ~15 классов) и его
   самодельной копии .row/.col-* на 12 долей: колонки держит grid внутри
   самих компонентов. */

body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh
}

main {
    display: flex;
    flex-direction: column;
    flex: 1
}

.container {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: 48px
}

/* Статья и другие страницы сплошного текста: 68ch читаются лучше 1200px. */
.container--narrow {
    max-width: 768px
}

@media (max-width: 640px) {
    .container {
        padding-inline: 16px
    }
}

/* Компактный профиль: геометрия и типографика текущего референса. */
.home-hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;
    width: 100%;
    padding: 24px;
    text-align: center
}

.home-hero__avatar {
    display: block;
    width: 180px;
    height: 180px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-card);
    object-fit: cover
}

.home-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 100%
}

.home-hero h1 {
    max-width: 100%;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.025em
}

.home-hero__role {
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    color: var(--color-text-secondary)
}

.home-hero__location {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-secondary)
}

.home-hero__location svg {
    width: 14px;
    height: 14px
}

.profile-socials {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px
}

.profile-social {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-card);
    color: var(--color-text);
    transition: transform .2s, box-shadow .2s, background-color .2s
}

.profile-social svg {
    width: 24px;
    height: 24px;
    transition: transform .2s
}

.profile-social--linkedin {
    color: #0a66c2
}

.profile-social:after {
    content: attr(aria-label);
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s
}

.home-hero__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px
}

.profile-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-card);
    color: var(--color-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    transition: transform .2s, background-color .2s
}

.profile-action svg {
    width: 16px;
    height: 16px;
    transition: transform .2s
}

.profile-action--primary {
    border: 0;
    background: #222;
    color: #fff
}

:root[data-theme="dark"] .profile-action--primary {
    background: #f0f0f0;
    color: #171717
}

@media (hover: hover) {
    .profile-social:hover {
        transform: translateY(-4px);
        background: var(--color-hover);
        box-shadow: var(--shadow);
        opacity: 1
    }

    .profile-social:hover svg {
        transform: scale(1.1)
    }

    .profile-social:hover:after {
        opacity: 1
    }

    .profile-social--linkedin:hover {
        background: #eff6ff;
        border-color: #bfdbfe;
        box-shadow: 0 0 16px rgb(10 102 194 / .2)
    }

    :root[data-theme="dark"] .profile-social--linkedin:hover {
        background: #1e2a3a;
        border-color: #1e4a7a
    }

    .profile-action:hover {
        transform: translateY(-1px);
        background: var(--color-hover);
        opacity: 1
    }

    .profile-action--primary:hover {
        background: #444
    }

    :root[data-theme="dark"] .profile-action--primary:hover {
        background: #ddd
    }
}

@media (max-width: 639px) {
    .home-hero {
        padding: 20px;
        gap: 24px
    }

    .home-hero__avatar {
        width: 140px;
        height: 140px
    }

    .home-hero h1 {
        font-size: 36px
    }

    .home-hero__role {
        font-size: 18px;
        line-height: 28px
    }

    .home-hero__actions {
        flex-direction: column;
        width: 100%
    }

    .profile-action {
        width: 100%
    }
}

.about-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 18px
}

.about-links a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 4px
}

.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px
}

.action {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    padding: 12px 22px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: .9rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background .15s, opacity .15s
}

.action:hover {
    background: var(--color-hover)
}

.action--primary,
.action--primary:hover {
    border-color: var(--color-text);
    background: var(--color-text);
    color: var(--color-bg)
}

.action--primary:hover {
    opacity: .85
}

/* Та же шапка и группы меню, с сохранением переключения RU/UZ/EN. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 72px;
    background: var(--navbar-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--navbar-border)
}

.site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    max-width: 1440px;
    height: 71px;
    padding-inline: 32px;
    margin-inline: auto
}

.brand {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 10px;
    color: var(--color-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    white-space: nowrap
}

.brand__monogram svg {
    display: block;
    width: 32px;
    height: 32px
}

.brand__monogram rect { fill: #171717 }
.brand__monogram text { fill: #faf8f4 }
:root[data-theme="dark"] .brand__monogram rect { fill: #faf8f4 }
:root[data-theme="dark"] .brand__monogram text { fill: #171717 }

.nav-links {
    display: flex;
    align-items: center;
    justify-self: center;
    gap: 4px
}

.nav-links[hidden],
.nav-backdrop[hidden],
.nav-group summary[hidden],
.nav-group__heading[hidden] {
    display: none
}

.nav-links > a,
.nav-group summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
    list-style: none
}

.nav-group summary::-webkit-details-marker { display: none }
.nav-group summary svg { width: 12px; height: 12px }
.nav-group[open] summary svg { transform: rotate(180deg) }
.nav-links a:hover,
.nav-links a[aria-current="page"],
.nav-group[open] summary,
.nav-group summary:hover {
    color: var(--color-text);
    background: var(--color-hover);
    opacity: 1
}

.nav-group {
    position: relative
}

.nav-group__menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-card);
    box-shadow: var(--shadow)
}

.nav-group__menu a {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 20px
}

.header-tools,
.lang {
    display: flex;
    align-items: center
}

.header-tools {
    justify-self: end;
    gap: 12px
}

.lang { gap: 2px }
.lang-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 32px;
    padding: 4px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 11px;
    cursor: pointer
}

.lang-item:hover { background: var(--color-hover); color: var(--color-text) }
.lang-item.is-active { color: var(--color-text); cursor: default }

.theme-toggle,
.nav-toggle {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: transparent;
    color: var(--color-text);
    cursor: pointer
}

.theme-toggle:not([hidden]) { display: inline-flex }
.theme-toggle:hover { background: var(--color-hover) }
.theme-toggle span,
.nav-toggle span { line-height: 0 }
.theme-toggle svg,
.nav-toggle svg { width: 20px; height: 20px }
.theme-toggle .icon-sun { display: none }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: inline }
.nav-toggle { display: none; border: 0; border-radius: 12px; background: var(--color-text); color: var(--color-bg) }
.nav-toggle .icon-close { display: none }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none }
.nav-toggle[aria-expanded="true"] .icon-close { display: inline }

.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 998;
    border: 0;
    background: rgb(0 0 0 / .3)
}

.site-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 24px 24px 48px;
    color: var(--color-text-secondary)
}

.site-footer p { font-size: 14px; line-height: 20px; color: inherit }
.site-footer > p { grid-column: 2; grid-row: 1; text-align: center }

@media (max-width: 1100px) {
    .brand__name { display: none }
}

@media (max-width: 767px) {
    .site-header { height: auto; min-height: 72px }
    .site-header__inner {
        grid-template-columns: auto 1fr auto;
        gap: 12px;
        padding-inline: 20px
    }

    .site-header__inner > .brand { grid-row: 1; grid-column: 1 }
    .site-header__inner > .nav-links { grid-row: 2 }
    .site-header__inner { height: auto; min-height: 71px }
    .js-enabled .site-header { height: 72px }
    .js-enabled .site-header__inner { height: 71px }
    .brand__monogram svg { width: 40px; height: 40px }
    .header-tools { grid-column: 3; grid-row: 1 }
    .nav-toggle:not([hidden]) { display: inline-flex }
    .nav-links { grid-column: 1 / -1; flex-wrap: wrap }
    .js-enabled .nav-links {
        position: fixed;
        top: 80px;
        left: 12px;
        right: 12px;
        z-index: 999;
        display: block;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        max-height: calc(100dvh - 96px);
        padding: 12px;
        overflow-y: auto;
        border: 1px solid var(--color-border);
        border-radius: 20px;
        background: var(--color-card);
        box-shadow: 0 24px 60px rgb(0 0 0 / .18)
    }

    .js-enabled .nav-links[hidden] { display: none }
    .js-enabled .nav-links > a,
    .js-enabled .nav-group__menu a {
        padding: 14px 16px;
        background: var(--color-hover);
        border-radius: 12px;
        color: var(--color-text);
        font-size: 15px;
        font-weight: 500;
        line-height: 22.5px
    }

    .js-enabled .nav-links > a { font-weight: 600 }
    .js-enabled .nav-links > a { display: flex; margin-bottom: 6px }
    .js-enabled .nav-group { margin-top: 8px }
    .js-enabled .nav-group + .nav-group { margin-top: 14px }
    .js-enabled .nav-group__heading {
        padding: 6px 4px;
        font-size: 12px;
        line-height: 18px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--color-text-secondary)
    }

    .js-enabled .nav-group__menu {
        position: static;
        display: flex;
        flex-direction: column;
        gap: 6px;
        transform: none;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none
    }
}

@media (max-width: 639px) {
    .site-header__inner { padding-inline: 16px }
}

.page {
    padding-block: 32px 80px
}

@media (max-width: 640px) {
    .page {
        padding-block: 24px 60px
    }
}

/* Шапка страницы: заголовок + подпись. */
.page-header {
    margin-bottom: 48px
}

.page-header h1 {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.025em;
    margin-bottom: 6px
}

.page-header p {
    font-size: 16px;
    color: var(--color-text-secondary)
}

/* Услуги: одна спокойная страница вместо трёх тонких SEO-лендингов. */
.services-intro {
    max-width: 650px;
    margin-bottom: 34px
}

.services-intro h1 {
    max-width: 620px;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 650;
    line-height: 1.08;
    letter-spacing: -.04em
}

.services-intro > p {
    max-width: 58ch;
    margin-top: 16px;
    line-height: 1.55
}

.service-list {
    border-top: 1px solid var(--color-border)
}

.service-list article {
    padding-block: 25px;
    border-bottom: 1px solid var(--color-border);
    scroll-margin-top: 100px
}

.service-list h2,
.services-process h2,
.services-cta h2 {
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: -.015em
}

.service-list h2 + p {
    max-width: 56ch;
    margin-top: 7px;
    color: var(--color-text-secondary)
}

.service-list__stack {
    margin-top: 11px;
    font-size: .72rem;
    color: var(--color-text-secondary)
}

.service-list__deliverable {
    max-width: 56ch;
    margin-top: 12px;
    font-size: .9rem;
    line-height: 1.6
}

.services-process {
    margin-top: 52px
}

.services-process ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 32px;
    margin-top: 22px
}

.services-process strong,
.services-process span {
    display: block
}

.services-process strong {
    font-size: .9rem
}

.services-process span {
    margin-top: 5px;
    font-size: .8rem;
    color: var(--color-text-secondary)
}

.services-cta {
    margin-top: 56px;
    padding-block: 26px;
    border-block: 1px solid var(--color-border)
}

.services-cta > p:not(:last-child) {
    max-width: 58ch;
    margin-top: 9px;
    color: var(--color-text-secondary)
}

@media (max-width: 640px) {
    .services-process ol {
        grid-template-columns: 1fr
    }

    .site-footer__inner {
        align-items: flex-start;
        flex-direction: column
    }
}

@media (max-width: 640px) {
    .page-header h1 {
        font-size: 24px
    }
}

/* auto-fill, а не auto-fit: при трёх постах auto-fit растянул бы каждую
   карточку на треть экрана. 300px + gap дают 3 колонки на 1200, 2 на планшете,
   1 на телефоне. */
.card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px
}

@media (max-width: 1023px) {
    .card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media (max-width: 767px) {
    .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media (max-width: 639px) {
    .card-grid { grid-template-columns: 1fr }
}

.card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-card);
    color: var(--color-text);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease)
}

.card__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -.025em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.card__meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-text-secondary)
}

.card__excerpt {
    font-size: 14px;
    color: var(--color-text-secondary)
}

/* Подъём только там, где есть настоящий ховер: на тач-экране карточка
   залипала бы поднятой после тапа. */
@media (hover: hover) {
    a.card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow);
        opacity: 1
    }
}

/* Карточка раздела: то же тело, что у поста, плюс картинка и описание. */
.card--entry {
    padding: 8px;
    border: 0;
    overflow: hidden
}

.card--entry > :not(.card__image) {
    margin-inline: 8px
}

.card--entry > .card__title {
    margin-top: 4px
}

.card--entry > .card__meta {
    margin-bottom: 8px
}

/* flex: none обязателен: карточка — флекс-колонка, и без него растяжка
   по высоте съедает aspect-ratio. */
.card__image {
    flex: none;
    width: 100%;
    /* height: auto обязателен: атрибут height в разметке приходит как
       презентационная подсказка и иначе перебивает aspect-ratio. */
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    object-fit: cover;
    background: var(--color-hover);
    display: block
}

.card__desc {
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--color-hover);
    color: var(--color-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px
}
.card__cta svg { width: 16px; height: 16px }


/* Иллюстрированные категории референса; счётчики из опубликованных записей. */
.category-tabs { display: flex; align-items: flex-start; gap: 10px; overflow-x: auto; padding: 4px 0; margin-bottom: 36px }
.category-tab { display: flex; flex: 0 0 142px; flex-direction: column; gap: 4px; padding: 6px; border-radius: 20px; color: var(--color-text) }
.category-tab img { width: 128px; height: 128px; border-radius: 20px; object-fit: cover; margin-bottom: 8px }
.category-tab strong { font-size: 14px; font-weight: 600; line-height: 21px }
.category-tab span { font-size: 12px; line-height: 18px; color: var(--color-text-secondary) }
.category-tab:hover, .category-tab.is-active { background: var(--color-hover); opacity: 1 }
.category-reset { margin-bottom: 24px }
.category-reset a { color: var(--color-text-secondary); text-decoration: underline }
.entry-group + .entry-group { margin-top: 56px }
.entry-group > h2 { margin-bottom: 20px; font-size: 24px; font-weight: 700; line-height: 30px; letter-spacing: -.02em }

/* Фильтр категорий у проектов. */
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px
}

.filter-pill {
    padding: 6px 14px;
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    transition: color .2s var(--ease), background-color .2s var(--ease)
}

.filter-pill:hover {
    color: var(--color-text);
    background: var(--color-hover);
    opacity: 1
}

.filter-pill.is-active {
    background: var(--color-text);
    border-color: var(--color-text);
    color: var(--color-bg)
}

/* Блок подписки. */
.panel {
    margin-top: 48px;
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-card)
}

.panel h6 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px
}

.panel p {
    font-size: 15px;
    color: var(--color-text-secondary)
}

.panel a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 2px
}

/* Шапка статьи. */
.article-head {
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border)
}

.article-head h1 {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.025em;
    margin-bottom: 10px
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 14px;
    color: var(--color-text-secondary)
}

@media (max-width: 640px) {
    .article-head h1 {
        font-size: 28px
    }
}

/* Тело статьи. Единственное место, где остался засечный шрифт: на длинном
   тексте он читается лучше гротеска. Отступы задаёт одно правило вместо
   115 строк, которые расписывали каждый тег по отдельности. */
.prose {
    font-size: 18px;
    line-height: 1.7;
    max-width: 68ch
}

.prose--serif {
    font-family: var(--font-body)
}

.prose > * + * {
    margin-top: 1.4em
}

.prose h2,
.prose h3,
.prose h4 {
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.02em;
    margin-top: 1.8em;
    margin-bottom: -.6em
}

.prose h2 {
    font-size: 1.4em
}

.prose h3 {
    font-size: 1.2em
}

.prose h4 {
    font-size: 1.05em
}

.prose a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px
}

.prose ul,
.prose ol {
    padding-left: 1.4em
}

.prose ul {
    list-style: disc
}

.prose ol {
    list-style: decimal
}

.prose li + li {
    margin-top: .5em
}

.prose blockquote {
    font-style: italic;
    padding-left: 1.2em;
    border-left: 3px solid var(--color-border);
    color: var(--color-text-secondary)
}

.prose pre {
    padding: 16px;
    border-radius: var(--radius);
    background: var(--color-hover);
    overflow-x: auto;
    font-size: .9em;
    line-height: 1.5
}

.prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9em
}

.prose pre code {
    font-size: inherit
}

.prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius)
}

.prose {
    overflow-wrap: anywhere
}

.post-list {
    max-width: 760px;
    border-top: 1px solid var(--color-border)
}

.post-list .card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 24px;
    padding: 24px 0;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent
}

.post-list .card__excerpt {
    grid-column: 1 / -1
}

.post-list .card__meta {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    white-space: nowrap
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 40px
}

.pagination a,
.pagination span {
    min-height: 44px;
    display: inline-flex;
    align-items: center
}

.project-detail__cover {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin-bottom: 40px;
    border-radius: var(--radius-xl)
}

.project-detail__external,
.back-link {
    display: inline-block;
    margin-block: 24px;
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 4px
}

@media (max-width: 640px) {
    .post-list .card {
        grid-template-columns: 1fr
    }

    .post-list .card__meta {
        grid-column: 1;
        grid-row: auto;
        white-space: normal
    }
}

/* nh3 пропускает таблицы. Без прокрутки внутри блока широкая таблица
   растягивает всю страницу и даёт горизонтальный скролл документу. */
.prose table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse
}

.prose th,
.prose td {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    text-align: left
}

.prose hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin-block: 2.4em
}

.prose figcaption {
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-top: .6em
}

/* Соседние посты. */
/* Сетка, а не space-between: у соседей разная длина названий, и «Barcha
   maqolalar» посередине от неё уезжало бы. */
.post-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    margin-top: 64px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
    font-size: 14px;
    font-weight: 500
}

.post-nav > :last-child {
    text-align: right
}

.post-nav a {
    color: var(--color-text-secondary);
    transition: color .2s var(--ease)
}

.post-nav a:hover {
    color: var(--color-text);
    opacity: 1
}

/* About: та же двухколоночная биография и нативные раскрываемые абзацы. */
.about-section + .about-section { margin-top: 56px }
.about-section__title {
    margin-bottom: 24px;
    font-size: 13px;
    font-weight: 600;
    line-height: 19.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-text-secondary)
}
.about-bio {
    display: grid;
    grid-template-columns: minmax(0, 720px) minmax(0, 380px);
    align-items: start;
    gap: 48px
}
.about-text { font-size: 16px; line-height: 28px }
.bio-entry + .bio-entry { margin-top: 16px }
.bio-entry summary { display: block; list-style: none; cursor: pointer; line-height: 28px }
.bio-entry summary::-webkit-details-marker { display: none }
.bio-expand {
    position: relative;
    top: -1px;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    padding: 1px 6px;
    margin-left: 4px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-hover);
    color: var(--color-text-secondary)
}
.bio-expand svg { width: 15px; height: 15px }
.bio-entry > p { margin-top: 12px; line-height: 28px; color: var(--color-text-secondary) }
.about-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 20px }
.bio-entry__body { padding-top: 12px; color: var(--color-text-secondary) }
.bio-entry__body p + p { margin-top: 12px }
.bio-entry[open] .bio-expand { color: var(--color-text); background: var(--color-card) }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text); font-size: 14px; font-weight: 600 }
.text-link svg, .panel-arrow svg { width: 16px; height: 16px; transition: transform 240ms var(--ease) }
.about-mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px }
.profile-panel { position: relative; min-width: 0; padding: 28px; border: 1px solid var(--color-border); border-radius: 24px; background: var(--color-card); color: var(--color-text); transition: border-color 220ms ease, box-shadow 220ms ease }
.profile-panel h3 { font-size: 23px; font-weight: 700; line-height: 1.25; letter-spacing: -.025em; text-wrap: balance }
.profile-panel p { margin-top: 12px; color: var(--color-text-secondary); font-size: 14px; line-height: 1.6 }
.profile-panel .text-link { margin-top: 24px }
.profile-panel--work { grid-column: span 6; grid-row: span 2; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 28px; min-height: 416px }
.profile-panel__story h3 { font-size: 30px; line-height: 1.14; letter-spacing: -.035em }
.career-preview { padding: 20px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-bg) }
.career-preview li + li { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--color-border) }
.career-preview p { margin: 0 0 8px; font-size: 11px; font-variant-numeric: tabular-nums }
.career-preview strong { display: block; font-size: 14px; line-height: 1.35 }
.career-preview span { display: block; margin-top: 4px; color: var(--color-text-secondary); font-size: 12px }
.profile-panel--learning { grid-column: span 3; grid-row: span 2; display: flex; flex-direction: column }
.certificate-stack { position: relative; height: 144px; margin: 8px 0 24px }
.certificate-stack img { position: absolute; width: 90%; height: auto; max-height: 140px; object-fit: contain; border: 1px solid var(--color-border); border-radius: 10px; background: white; box-shadow: 0 6px 16px rgb(0 0 0 / .08); transition: transform 350ms cubic-bezier(.16, 1, .3, 1) }
.certificate-stack img:first-child { left: 0; top: 0; transform: rotate(-5deg) }
.certificate-stack img:last-child { right: 0; top: 16px; transform: rotate(4deg) }
.learning-preview { margin-top: 16px; color: var(--color-text-secondary); font-size: 12px; line-height: 1.5 }
.learning-preview li + li { margin-top: 10px }
.learning-preview time { display: block; margin-top: 3px; font-size: 11px }
.profile-panel--learning .text-link { margin-top: auto; padding-top: 24px }
.profile-panel--github, .profile-panel--telegram, .profile-panel--linkedin { grid-column: span 3 }
.profile-panel--github { min-height: 228px; background: #0d1117; color: #f0f6fc; border-color: #30363d; display: flex; flex-direction: column; justify-content: end }
.profile-panel--github p { color: #aab5c2 }
.github-mark svg { width: 70px; height: 70px; margin-bottom: 24px }
.profile-panel--telegram { min-height: 170px }
.telegram-mark, .linkedin-mark { display: block; margin-bottom: 20px; color: var(--color-text) }
.telegram-mark svg, .linkedin-mark svg { width: 28px; height: 28px }
.panel-arrow { position: absolute; bottom: 28px; right: 28px }
.profile-panel--approach { grid-column: span 9; min-height: 224px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px }
.workflow-line { display: flex; flex-direction: column; gap: 12px; padding-left: 24px; border-left: 1px solid var(--color-border); font-size: 14px }
.workflow-line li { position: relative }
.workflow-line li:before { content: ''; position: absolute; left: -28px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-secondary) }
.interest-tags { display: flex; flex-wrap: wrap; gap: 10px }
.interest-tags li { padding: 10px 18px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-card); font-size: 14px }
@media (hover: hover) {
    a.profile-panel:hover { opacity: 1; border-color: var(--color-border-strong); box-shadow: 0 8px 24px rgb(0 0 0 / .05) }
    a.profile-panel:hover .text-link svg, a.profile-panel:hover .panel-arrow svg, .text-link:hover svg { transform: translateX(4px) }
    .profile-panel--learning:hover .certificate-stack img:first-child { transform: rotate(-8deg) translateY(-3px) }
    .profile-panel--learning:hover .certificate-stack img:last-child { transform: rotate(7deg) translateY(-3px) }
}
@media (max-width: 1100px) {
    .profile-panel--work { grid-column: span 8 }
    .profile-panel--learning { grid-column: span 4 }
    .profile-panel--github, .profile-panel--telegram, .profile-panel--linkedin { grid-column: span 4; min-height: 184px }
    .profile-panel--approach { grid-column: span 12; grid-row: 4 }
}
@media (max-width: 767px) {
    .about-bio { grid-template-columns: 1fr; gap: 32px }
    .about-photo { grid-row: 1 }
    .about-photo img { max-width: 380px; margin-inline: auto }
    .profile-panel--work, .profile-panel--learning, .profile-panel--approach { grid-column: span 12; grid-row: auto }
    .profile-panel--github, .profile-panel--telegram, .profile-panel--linkedin { grid-column: span 4 }
    .profile-panel--learning { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px }
    .certificate-stack { grid-column: 1; grid-row: 1 / span 4; align-self: center; margin: 0 }
    .profile-panel--learning h3, .profile-panel--learning > p, .profile-panel--learning .learning-preview, .profile-panel--learning > .text-link { grid-column: 2 }
}
@media (max-width: 639px) {
    .profile-panel { padding: 24px }
    .profile-panel--work, .profile-panel--approach { grid-template-columns: 1fr; gap: 28px; min-height: auto }
    .profile-panel--learning { display: flex }
    .certificate-stack { width: 100%; height: 180px; margin: 4px 0 24px }
    .certificate-stack img { max-height: 172px }
    .profile-panel--github, .profile-panel--telegram, .profile-panel--linkedin { grid-column: span 12; min-height: 164px }
    .github-mark svg { width: 52px; height: 52px; margin-bottom: 12px }
}

/* Резюме читается как документ, с навигацией по разделам. */
.resume-layout { display: grid; grid-template-columns: 240px minmax(0, 800px); gap: 80px }
.resume-aside { position: sticky; top: 104px; align-self: start; color: var(--color-text-secondary); font-size: 14px }
.resume-aside > img { width: 96px; height: 96px; border-radius: 50%; display: block; margin-bottom: 20px }
.resume-name { color: var(--color-text); font-weight: 700; font-size: 18px }
.resume-aside nav { display: flex; flex-direction: column; gap: 12px; margin: 32px 0 }
.resume-aside nav a { display: flex; align-items: center; gap: 8px; color: var(--color-text-secondary) }
.resume-aside nav a:hover { color: var(--color-text) }
.resume-aside nav svg { width: 14px; height: 14px }
.resume-content { min-width: 0 }
.resume-intro { font-size: 23px; line-height: 1.55; letter-spacing: -.02em; max-width: 60ch; margin-bottom: 48px }
.resume-section { scroll-margin-top: 96px }
.resume-section + .resume-section { margin-top: 48px }
.resume-section > h2 { margin-bottom: 28px; font-size: 24px; font-weight: 700 }
.resume-section h3 { font-size: 18px; font-weight: 700 }
.experience-item { padding-left: 24px; border-left: 1px solid var(--color-border); position: relative }
.experience-item:before { content: ''; position: absolute; left: -4px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-text) }
.experience-item + .experience-item { margin-top: 36px }
.experience-item__head { display: flex; justify-content: space-between; gap: 16px; align-items: baseline }
.experience-item__head p { color: var(--color-text-secondary); font-size: 12px; font-variant-numeric: tabular-nums }
.experience-role { margin: 4px 0 12px; font-size: 14px; font-weight: 500 }
.experience-item ul { margin: 16px 0; padding-left: 18px; list-style: disc; color: var(--color-text-secondary); font-size: 14px; line-height: 1.75 }
.experience-item ul li + li { margin-top: 8px }
.experience-stack { font-size: 12px; color: var(--color-text-secondary) }
.resume-skills > div { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 18px 0; border-top: 1px solid var(--color-border) }
.resume-skills dt { font-weight: 600; font-size: 14px }
.resume-skills dd { color: var(--color-text-secondary); font-size: 14px; line-height: 1.75 }
.resume-end { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--color-border) }
.card__image--certificate { object-fit: contain; background: #fff }
@media (max-width: 1023px) {
    .resume-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 40px }
    .experience-item__head { display: block }
}
@media (max-width: 767px) {
    .resume-layout { grid-template-columns: 1fr; gap: 36px }
    .resume-aside { position: static }
    .resume-aside nav { flex-direction: row; flex-wrap: wrap; gap: 12px 24px; margin-block: 20px }
    .resume-intro { font-size: 20px }
    .resume-skills > div { grid-template-columns: 1fr; gap: 8px }
}

/* Фотография — главный момент входа; переходы сохраняют её между страницами. */
@view-transition { navigation: auto }
.home-hero__avatar, .about-photo img, .resume-aside > img { view-transition-name: profile-portrait }
::view-transition-old(root) { animation: page-leave 140ms ease both }
::view-transition-new(root) { animation: page-arrive 280ms ease both }
::view-transition-group(profile-portrait) { animation-duration: 420ms; animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
@keyframes page-leave { to { opacity: 0 } }
@keyframes page-arrive { from { opacity: 0 } }
@keyframes portrait-focus { from { filter: blur(3px); transform: scale(1.04); clip-path: circle(43%) } to { filter: blur(0); transform: scale(1); clip-path: circle(50%) } }
@media (prefers-reduced-motion: no-preference) {
    .page-header, .article-head { animation: page-arrive 340ms ease both }
    .home-hero__avatar { animation: portrait-focus 650ms cubic-bezier(.16, 1, .3, 1) both }
    .home-hero__copy, .home-hero .profile-socials, .home-hero__actions { animation: page-arrive 420ms ease both }
    .home-hero__copy { animation-delay: 80ms }
    .home-hero .profile-socials { animation-delay: 140ms }
    .home-hero__actions { animation-delay: 200ms }
    .nav-group[open] .nav-group__menu { animation: menu-arrive 180ms cubic-bezier(.16, 1, .3, 1) both }
}
@keyframes menu-arrive { from { opacity: 0; translate: 0 -6px } }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none }
    .home-hero__avatar, .about-photo img, .resume-aside > img { view-transition-name: none }
    .profile-panel *, .profile-action *, .profile-social * { transition: none }
}

.story-list { max-width: 960px }
.timeline-entry { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 32px; padding: 24px 0; border-top: 1px solid var(--color-border) }
.timeline-entry__date { color: var(--color-text-secondary); font-size: 13px; font-variant-numeric: tabular-nums }
.timeline-entry h3 { font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -.025em }
.timeline-entry p { max-width: 70ch; margin-top: 10px; color: var(--color-text-secondary); line-height: 1.75 }
.timeline-entry .text-link { margin-top: 14px }
.applications-wrap { width: 100%; overflow-x: auto }
.applications-table { border-collapse: collapse; width: 100%; text-align: left; font-size: 14px }
.applications-table th { padding: 16px 20px; color: var(--color-text-secondary); font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--color-border) }
.applications-table td { padding: 24px 20px; border-bottom: 1px solid var(--color-border); vertical-align: top }
.applications-table td:first-child { width: 30%; font-weight: 600 }
.applications-table td:nth-child(2) { color: var(--color-text-secondary); max-width: 55ch }
.application-stage { display: inline-flex; padding: 5px 12px; border: 1px solid var(--color-border); border-radius: 999px; white-space: nowrap; background: var(--color-card); font-size: 12px }
@media (max-width: 767px) {
    .timeline-entry { grid-template-columns: 1fr; gap: 8px }
    .applications-table th, .applications-table td { padding: 16px 10px }
    .applications-table td:nth-child(2) { min-width: 0 }
    .application-stage { white-space: normal }
}

/* Project illustrations keep their provenance visible at card and case level. */
.project-detail__figure { margin: 0 0 2rem; }
.project-detail__figure .project-detail__cover { margin-bottom: .6rem; }

/* Reading and learning collections follow the reference's grouped catalogs. */
.collection-tabs { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 10px; margin-bottom: 34px; scrollbar-width: thin; }
.collection-tab { flex: none; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 16px; border-radius: 12px; background: var(--color-card); color: var(--color-text-secondary); border: 1px solid var(--color-border); font-size: 14px; transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease); }
.collection-tab strong { font-weight: 600; }
.collection-tab span { font-size: 12px; font-variant-numeric: tabular-nums; }
.collection-tab:hover, .collection-tab.is-active { background: var(--color-hover); border-color: var(--color-border-strong); color: var(--color-text); opacity: 1; }
.resource-grid, .learning-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.resource-row, .learning-row { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border-radius: 12px; background: var(--color-card); color: var(--color-text); transition: background 200ms var(--ease), box-shadow 200ms var(--ease); }
.resource-row h3, .learning-row h3 { font-size: 16px; font-weight: 600; line-height: 1.5; }
.resource-row p, .learning-row p { margin-top: 6px; color: var(--color-text-secondary); font-size: 14px; line-height: 1.6; }
.resource-row > div, .learning-row > div { min-width: 0; flex: 1; }
.resource-row__icon { display: grid; place-items: center; flex: none; width: 72px; height: 72px; padding: 8px; border-radius: 14px; background: #fff; }
.resource-row__icon img { width: 56px; height: 56px; object-fit: contain; }
.resource-row__icon svg { width: 20px; height: 20px; }
.resource-row__arrow, .learning-row > span { flex: none; width: 16px; height: 16px; margin-top: 4px; }
.learning-row time { display: inline-block; margin-top: 12px; color: var(--color-text-secondary); font-size: 12px; }
.card--post .card__excerpt { margin: 0 8px 8px; line-height: 1.6; }
.card--post > .card__cta { width: auto; margin-bottom: 8px; }
.card__image { transition: transform 360ms var(--ease), filter 360ms var(--ease); }
.card__cta { transition: background 200ms var(--ease); }
.card__cta svg, .resource-row__arrow, .learning-row > span { transition: transform 240ms var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    a.card:hover .card__image { transform: scale(1.025); filter: saturate(1.05); }
    a.card:hover .card__cta svg, a.resource-row:hover .resource-row__arrow, a.learning-row:hover > span { transform: translateX(3px); }
    a.resource-row:hover, a.learning-row:hover { background: var(--color-hover); box-shadow: var(--shadow); opacity: 1; }
}
@media (max-width: 1023px) { .resource-grid, .learning-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .resource-grid, .learning-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .card__image, .card__cta, .card__cta svg, .resource-row, .learning-row, .resource-row__arrow, .learning-row > span { transition: none; } }

.analytics-privacy {
    max-width: 620px;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin: 0;
    text-align: left;
    font-size: 13px;
}
.analytics-privacy summary { cursor: pointer; text-align: right; }
.analytics-privacy[open] { grid-column: 1 / -1; grid-row: 2; max-width: min(620px, 100%); }
.analytics-privacy p { margin: 12px 0; }
@media (max-width: 767px) {
    .site-footer { grid-template-columns: minmax(0, 1fr); }
    .site-footer > p { grid-column: 1; }
    .analytics-privacy { grid-column: 1; grid-row: 2; }
}
.analytics-consent {
    position: fixed;
    z-index: 30;
    right: 20px;
    bottom: 20px;
    width: min(420px, calc(100% - 40px));
    padding: 20px;
    background: var(--color-card);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgb(0 0 0 / 12%);
}
.analytics-consent h2 { margin: 0 0 8px; font-size: 17px; }
.analytics-consent p { margin: 0 0 16px; font-size: 14px; }
.analytics-consent a { text-decoration: underline; text-underline-offset: 2px; }
.analytics-consent .action-row { margin: 0; }
.analytics-consent[hidden] { display: none; }