/* EDITORIAL DIRECTORY */

.editorial-directory {
    --editorial-bg: #0d0e0e;
    --editorial-surface: #151717;
    --editorial-ink: #f2eee8;
    --editorial-muted: #a9a59f;
    --editorial-line: rgb(242 238 232 / 0.18);
    --editorial-gold: #cfad62;
    --editorial-blue: #72bdcf;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: clip;
    background: var(--editorial-bg);
    color: var(--editorial-ink);
}

.editorial-directory a {
    color: inherit;
}

.editorial-kicker {
    margin: 0;
    color: var(--editorial-gold);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    line-height: 1.45;
    text-transform: uppercase;
}

.editorial-cover {
    min-height: min(68svh, 760px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:
        clamp(4rem, 7vw, 6.5rem)
        max(6vw, calc((100vw - 1180px) / 2));
    border-bottom: 1px solid var(--editorial-line);
    background:
        linear-gradient(
            110deg,
            #0d0e0e 0%,
            #111718 60%,
            #1a3036 100%
        );
}

.editorial-cover h1 {
    max-width: 11ch;
    margin: 1.25rem 0 2.5rem;
    font-size: clamp(3.25rem, 7vw, 5.5rem);
    font-weight: 300;
    letter-spacing: -0.055em;
    line-height: 0.92;
    text-wrap: balance;
}

.editorial-cover__footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3rem;
    align-items: end;
    border-top: 1px solid var(--editorial-line);
    padding-top: 2rem;
}

.editorial-cover__footer p {
    max-width: 650px;
    margin: 0;
    color: var(--editorial-muted);
    font-size: clamp(1.1rem, 1.7vw, 1.5rem);
    line-height: 1.55;
}

.editorial-cover__footer a {
    border-bottom: 1px solid currentcolor;
    padding-bottom: 0.4rem;
    text-decoration: none;
}

.editorial-directory .article-category-tabs {
    display: grid;
    grid-template-columns: repeat(7, minmax(145px, 1fr));
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--editorial-line);
    background: #111313;
    scrollbar-width: thin;
}

.editorial-directory .article-category-tab {
    min-height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem;
    border: 0;
    border-right: 1px solid var(--editorial-line);
    border-radius: 0;
    background: transparent;
    color: var(--editorial-muted);
    font-size: 0.86rem;
    line-height: 1.35;
    text-decoration: none;
}

.editorial-directory .article-category-tab span {
    color: var(--editorial-gold);
    font-size: 0.65rem;
}

.editorial-directory .article-category-tab:hover,
.editorial-directory .article-category-tab:focus-visible {
    background: rgb(255 255 255 / 0.04);
    color: var(--editorial-ink);
    transform: none;
}

.editorial-directory .article-category-tab.is-active {
    background: #eeeae3;
    color: #171818;
}

.editorial-directory .article-category-tab.is-active span {
    color: #765b27;
}

.editorial-directory .article-directory {
    width: 100%;
    margin: 0;
    padding:
        clamp(5rem, 9vw, 9rem)
        max(6vw, calc((100vw - 1180px) / 2));
}

.editorial-directory .article-directory__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3rem;
    align-items: end;
    margin: 0 0 clamp(3rem, 6vw, 6rem);
    padding: 0;
}

.editorial-directory .article-directory__header h2 {
    max-width: 850px;
    margin: 1.3rem 0 0;
    font-size: clamp(2.8rem, 5.5vw, 6rem);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 0.98;
}

.editorial-directory .article-directory__tools {
    display: grid;
    justify-items: end;
    gap: 1.2rem;
}

.editorial-directory .article-directory__tools > p {
    margin: 0;
    color: var(--editorial-muted);
}

.editorial-directory .article-view-switcher {
    display: flex;
    gap: 0;
    padding: 0;
    border: 1px solid var(--editorial-line);
    border-radius: 0;
    background: transparent;
}

.editorial-directory .article-view-button {
    min-height: 42px;
    padding: 0.65rem 0.9rem;
    border: 0;
    border-right: 1px solid var(--editorial-line);
    border-radius: 0;
    background: transparent;
    color: var(--editorial-muted);
}

.editorial-directory .article-view-button:last-child {
    border-right: 0;
}

.editorial-directory .article-view-button.is-active {
    background: var(--editorial-ink);
    color: #171818;
}

.editorial-directory .article-list {
    display: block;
    margin: 0;
    border-top: 1px solid var(--editorial-line);
}

.editorial-directory .article-list-item {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) 150px;
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: start;
    min-height: 260px;
    margin: 0;
    padding: 2.6rem 0;
    border: 0;
    border-bottom: 1px solid var(--editorial-line);
    border-radius: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
}

.editorial-directory .article-list-item:hover {
    background:
        linear-gradient(
            90deg,
            rgb(114 189 207 / 0.08),
            transparent 70%
        );
    transform: none;
}

.article-list-item__number {
    margin: 0;
    color: var(--editorial-blue);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
}

.editorial-directory .article-list-item__content {
    max-width: 830px;
}

.editorial-directory .article-category-label {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--editorial-blue);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.editorial-directory .article-list-item__title {
    max-width: 840px;
    margin: 1rem 0 1.4rem;
    font-size: clamp(2.2rem, 4vw, 4.4rem);
    font-weight: 300;
    letter-spacing: -0.045em;
    line-height: 1;
}

.editorial-directory .article-list-item__title a {
    text-decoration: none;
}

.editorial-directory .article-list-item__summary {
    max-width: 680px;
    margin: 0;
    color: var(--editorial-muted);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.7;
}

.editorial-directory .article-list-item__footer {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    color: var(--editorial-muted);
}

.editorial-directory .article-list-item__link {
    border-bottom: 1px solid currentcolor;
    padding-bottom: 0.35rem;
    color: var(--editorial-ink);
    text-decoration: none;
}

/* Existing JavaScript toggles this class. */
.editorial-directory .article-list.article-list--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--editorial-line);
}

.editorial-directory
.article-list--grid
.article-list-item {
    display: flex;
    min-height: 480px;
    flex-direction: column;
    padding: clamp(2rem, 4vw, 4rem);
    border-right: 1px solid var(--editorial-line);
}

.editorial-directory
.article-list--grid
.article-list-item:nth-child(even) {
    border-right: 0;
}

.editorial-directory
.article-list--grid
.article-list-item__number {
    margin-bottom: 2.5rem;
}

.editorial-directory
.article-list--grid
.article-list-item__content {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.editorial-directory
.article-list--grid
.article-list-item__title {
    font-size: clamp(2rem, 3.4vw, 3.7rem);
}

.editorial-directory
.article-list--grid
.article-list-item__summary {
    margin-bottom: 2rem;
}

.editorial-directory
.article-list--grid
.article-list-item__footer {
    height: auto;
    flex-direction: row;
    margin-top: auto;
}

.editorial-directory__empty {
    padding: 4rem 0;
    border-block: 1px solid var(--editorial-line);
    color: var(--editorial-muted);
}

.editorial-directory__final {
    min-height: 62vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:
        clamp(5rem, 9vw, 9rem)
        max(6vw, calc((100vw - 1180px) / 2));
    border-top: 1px solid var(--editorial-line);
    background: #eeeae3;
    color: #171818;
}

.editorial-directory__final .editorial-kicker {
    color: #765b27;
}

.editorial-directory__final h2 {
    max-width: 850px;
    margin: 2rem 0 3rem;
    font-size: clamp(2.8rem, 5.5vw, 5.8rem);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1;
}

.editorial-directory__final > a {
    align-self: flex-start;
    padding: 1rem 1.35rem;
    border: 1px solid #171818;
    text-decoration: none;
}

@media (max-width: 820px) {
    .editorial-cover__footer,
    .editorial-directory .article-directory__header {
        grid-template-columns: 1fr;
    }

    .editorial-directory .article-directory__tools {
        justify-items: start;
    }

    .editorial-directory .article-list-item {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .editorial-directory .article-list-item__footer {
        grid-column: 2;
        height: auto;
        flex-direction: row;
    }

    .editorial-directory .article-list.article-list--grid {
        grid-template-columns: 1fr;
    }

    .editorial-directory
    .article-list--grid
    .article-list-item {
        border-right: 0;
    }
}

@media (max-width: 520px) {
    .editorial-cover {
        min-height: auto;
        padding: 4rem 1.35rem 3.5rem;
    }

    .editorial-cover h1 {
        max-width: 100%;
        font-size: clamp(3rem, 15vw, 4.75rem);
        line-height: 0.94;
    }

    .editorial-directory .article-directory,
    .editorial-directory__final {
        padding: 5rem 1.35rem;
    }

    .editorial-directory .article-list-item {
        grid-template-columns: 28px minmax(0, 1fr);
        min-height: auto;
        padding: 2rem 0;
    }

    .editorial-directory .article-list-item__title {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .editorial-directory .article-list-item__footer {
        display: grid;
        gap: 1rem;
    }

    .editorial-directory
    .article-list--grid
    .article-list-item {
        min-height: 390px;
        padding: 2rem 1.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .editorial-directory *,
    .editorial-directory *::before,
    .editorial-directory *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}


/* EDITORIAL CATEGORY COLOR SYSTEM */

.editorial-directory {
    --editorial-terracotta: #ce765e;
    --editorial-terracotta-deep: #8f4637;
}

/* Психотерапия и нейроотличия */

.editorial-directory
.article-category-tab[href$="section=psychotherapy"],
.editorial-directory
.article-category-tab[href$="section=neurodiversity"] {
    color: var(--editorial-terracotta);
}

.editorial-directory
.article-category-tab[href$="section=psychotherapy"].is-active,
.editorial-directory
.article-category-tab[href$="section=neurodiversity"].is-active {
    background: var(--editorial-terracotta-deep);
    color: #fff5ef;
}

.editorial-directory
.article-category-tab[href$="section=psychotherapy"].is-active span,
.editorial-directory
.article-category-tab[href$="section=neurodiversity"].is-active span {
    color: #ffd2c4;
}

.editorial-directory
.article-list-item[data-article-section="psychotherapy"],
.editorial-directory
.article-list-item[data-article-section="neurodiversity"] {
    background:
        linear-gradient(
            90deg,
            rgb(143 70 55 / 0.2),
            rgb(143 70 55 / 0.05) 52%,
            transparent 82%
        );
    box-shadow:
        inset 3px 0 0
        rgb(206 118 94 / 0.75);
}

.editorial-directory
.article-list-item[data-article-section="psychotherapy"]
.article-list-item__number,
.editorial-directory
.article-list-item[data-article-section="neurodiversity"]
.article-list-item__number,
.editorial-directory
.article-list-item[data-article-section="psychotherapy"]
.article-category-label,
.editorial-directory
.article-list-item[data-article-section="neurodiversity"]
.article-category-label {
    color: var(--editorial-terracotta);
}

.editorial-directory
.article-list-item[data-article-section="psychotherapy"]
.article-list-item__link,
.editorial-directory
.article-list-item[data-article-section="neurodiversity"]
.article-list-item__link {
    color: #efb19f;
}

/* Архетипические материалы */

.editorial-directory
.article-list-item[data-article-section="archetypes"]
.article-list-item__number,
.editorial-directory
.article-list-item[data-article-section="archetypes"]
.article-category-label {
    color: var(--editorial-gold);
}

/* Методология и digital */

.editorial-directory
.article-list-item[data-article-section="methodology"]
.article-list-item__number,
.editorial-directory
.article-list-item[data-article-section="methodology"]
.article-category-label,
.editorial-directory
.article-list-item[data-article-section="digital_ai"]
.article-list-item__number,
.editorial-directory
.article-list-item[data-article-section="digital_ai"]
.article-category-label {
    color: var(--editorial-blue);
}


/* EDITORIAL ARTICLE */

.editorial-article {
    --article-bg: #0d0e0e;
    --article-surface: #151717;
    --article-paper: #eeeae3;
    --article-ink: #f2eee8;
    --article-paper-ink: #222322;
    --article-muted: #aaa69f;
    --article-line: rgb(242 238 232 / 0.18);
    --article-accent: #72bdcf;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: clip;
    background: var(--article-bg);
    color: var(--article-ink);
}

.editorial-article--psychotherapy,
.editorial-article--neurodiversity {
    --article-accent: #ce765e;
}

.editorial-article--archetypes {
    --article-accent: #cfad62;
}

.editorial-article__breadcrumbs {
    padding:
        1.2rem
        max(6vw, calc((100vw - 1180px) / 2));
    border-bottom: 1px solid var(--article-line);
}

.editorial-article .article-breadcrumbs {
    max-width: none;
    margin: 0;
    padding: 0;
}

.editorial-article__cover {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.55fr);
    min-height: min(68svh, 760px);
    border-bottom: 1px solid var(--article-line);
    background:
        linear-gradient(
            135deg,
            #0d0e0e 0%,
            #111819 62%,
            #1a3036 100%
        );
}

.editorial-article--psychotherapy .editorial-article__cover,
.editorial-article--neurodiversity .editorial-article__cover {
    background:
        linear-gradient(
            135deg,
            #0d0e0e 0%,
            #211412 58%,
            #713728 100%
        );
}

.editorial-article__heading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:
        clamp(3.5rem, 6vw, 6rem)
        clamp(2rem, 6vw, 7rem);
}

.editorial-article__section {
    margin: 0;
}

.editorial-article__section a {
    color: var(--article-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.45;
    text-decoration: none;
    text-transform: uppercase;
}

.editorial-article__heading h1 {
    max-width: 14ch;
    margin: 1.4rem 0 1.8rem;
    font-size: clamp(2.9rem, 4.8vw, 4.5rem);
    font-weight: 300;
    letter-spacing: -0.045em;
    line-height: 0.98;
}

.editorial-article .article-summary {
    max-width: 720px;
    margin: 0;
    color: var(--article-muted);
    font-size: clamp(1.12rem, 1.65vw, 1.5rem);
    line-height: 1.6;
}

.editorial-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 2.5rem;
    color: var(--article-muted);
    font-size: 0.85rem;
}

.editorial-article .article-cover {
    min-height: 620px;
    margin: 0;
    overflow: hidden;
}

.editorial-article .article-cover__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.editorial-article__symbol {
    display: grid;
    min-height: 620px;
    place-items: center;
    border-left: 1px solid var(--article-line);
    background:
        radial-gradient(
            circle,
            color-mix(in srgb, var(--article-accent) 22%, transparent),
            transparent 58%
        );
}

.editorial-article__symbol span {
    display: grid;
    width: min(28vw, 320px);
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid var(--article-accent);
    border-radius: 50%;
    color: var(--article-accent);
    font-size: clamp(2rem, 5vw, 5rem);
    font-weight: 300;
}

.editorial-article .article-detail {
    width: 100%;
    max-width: none;
    margin: 0;
    padding:
        clamp(4rem, 8vw, 8rem)
        max(6vw, calc((100vw - 1180px) / 2));
    background: var(--article-paper);
    color: var(--article-paper-ink);
}

.editorial-article__tools {
    max-width: 800px;
    margin: 0 auto 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgb(34 35 34 / 0.2);
}

.editorial-article .article-body {
    max-width: 800px;
    margin-inline: auto;
    color: var(--article-paper-ink);
    font-size: clamp(1.08rem, 1.35vw, 1.24rem);
    line-height: 1.82;
}

.editorial-article .article-body > :first-child {
    margin-top: 0;
}

.editorial-article .article-body h2 {
    margin-top: 4rem;
    font-size: clamp(2rem, 3.5vw, 3.6rem);
    font-weight: 400;
    letter-spacing: -0.04em;
    line-height: 1.08;
}

.editorial-article .article-body h3 {
    margin-top: 3rem;
    font-size: clamp(1.5rem, 2.3vw, 2.2rem);
    line-height: 1.2;
}

.editorial-article .article-body blockquote {
    margin-block: 3rem;
    padding: 1.5rem 0 1.5rem 2rem;
    border-left: 3px solid var(--article-accent);
    color: #45433f;
    font-size: 1.15em;
}

.editorial-article .article-engagement,
.editorial-article .article-author,
.editorial-article .article-faq {
    max-width: 800px;
    margin-inline: auto;
}

.editorial-article__cta {
    padding:
        clamp(4rem, 8vw, 8rem)
        max(6vw, calc((100vw - 1180px) / 2));
    border-top: 1px solid var(--article-line);
    background: var(--article-surface);
}

.editorial-article__cta .article-cta {
    max-width: 1180px;
    margin: 0 auto;
}

.editorial-article__back {
    padding:
        2rem
        max(6vw, calc((100vw - 1180px) / 2));
    border-top: 1px solid var(--article-line);
    background: var(--article-bg);
}

.editorial-article__back a {
    color: var(--article-ink);
}

@media (max-width: 900px) {
    .editorial-article__cover {
        grid-template-columns: 1fr;
    }

    .editorial-article .article-cover,
    .editorial-article__symbol {
        min-height: min(100vw, 720px);
        border-top: 1px solid var(--article-line);
        border-left: 0;
    }

    .editorial-article__symbol span {
        width: min(58vw, 300px);
    }
}

@media (max-width: 520px) {
    .editorial-article__breadcrumbs {
        padding-inline: 1.35rem;
    }

    .editorial-article__heading {
        padding: 4rem 1.35rem;
    }

    .editorial-article__heading h1 {
        font-size: clamp(2.6rem, 8vw, 4rem);
    }

    .editorial-article .article-detail,
    .editorial-article__cta,
    .editorial-article__back {
        padding-inline: 1.35rem;
    }

    .editorial-article .article-body {
        font-size: 1.06rem;
        line-height: 1.75;
    }

    .editorial-article .article-body blockquote {
        padding-left: 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .editorial-article *,
    .editorial-article *::before,
    .editorial-article *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* ARTICLE THEME SYSTEM */

.editorial-article {
    --article-bg: #e8e3dc;
    --article-surface: #e1dbd3;
    --article-paper: #f2efe9;
    --article-paper-ink: #292723;
    --article-heading: #171614;
    --article-muted: #625d56;
    --article-line: rgb(41 39 35 / 0.2);
    --article-cover-start: #dce7e8;
    --article-cover-end: #6d9aa3;
    --article-cover-ink: #171b1c;
    --article-cover-muted: #364c50;
    --article-accent: #397f8f;
    --article-accent-soft: rgb(57 127 143 / 0.11);
}

.editorial-article--psychotherapy,
.editorial-article--neurodiversity {
    --article-cover-start: #eadbd4;
    --article-cover-end: #b8624b;
    --article-cover-ink: #241714;
    --article-cover-muted: #604239;
    --article-accent: #9e4d39;
    --article-accent-soft: rgb(158 77 57 / 0.11);
}

.editorial-article--archetypes {
    --article-cover-start: #eee5ce;
    --article-cover-end: #bd9950;
    --article-cover-ink: #282113;
    --article-cover-muted: #625438;
    --article-accent: #8b6a27;
    --article-accent-soft: rgb(139 106 39 / 0.11);
}

html[data-reading-theme="gray"] .editorial-article {
    --article-bg: #bebbb5;
    --article-surface: #c7c3bc;
    --article-paper: #d8d5cf;
    --article-paper-ink: #272624;
    --article-heading: #171716;
    --article-muted: #5c5954;
    --article-line: rgb(39 38 36 / 0.24);
    --article-cover-start: #aebfc1;
    --article-cover-end: #527780;
    --article-cover-ink: #111718;
    --article-cover-muted: #293d40;
    --article-accent: #276e7e;
    --article-accent-soft: rgb(39 110 126 / 0.13);
}

html[data-reading-theme="gray"]
.editorial-article--psychotherapy,
html[data-reading-theme="gray"]
.editorial-article--neurodiversity {
    --article-cover-start: #cbb8b0;
    --article-cover-end: #91503f;
    --article-cover-ink: #1f1512;
    --article-cover-muted: #503a33;
    --article-accent: #874331;
    --article-accent-soft: rgb(135 67 49 / 0.13);
}

html[data-reading-theme="gray"]
.editorial-article--archetypes {
    --article-cover-start: #cfc4a8;
    --article-cover-end: #957536;
    --article-cover-ink: #211c12;
    --article-cover-muted: #51472f;
    --article-accent: #76591d;
    --article-accent-soft: rgb(118 89 29 / 0.13);
}

html[data-reading-theme="dark"] .editorial-article {
    --article-bg: #0d0e0e;
    --article-surface: #151717;
    --article-paper: #171919;
    --article-paper-ink: #e8e4de;
    --article-heading: #f4f0ea;
    --article-muted: #aaa69f;
    --article-line: rgb(232 228 222 / 0.18);
    --article-cover-start: #0d0e0e;
    --article-cover-end: #1a3036;
    --article-cover-ink: #f2eee8;
    --article-cover-muted: #b8b2aa;
    --article-accent: #72bdcf;
    --article-accent-soft: rgb(114 189 207 / 0.12);
}

html[data-reading-theme="dark"]
.editorial-article--psychotherapy,
html[data-reading-theme="dark"]
.editorial-article--neurodiversity {
    --article-cover-start: #120d0c;
    --article-cover-end: #713728;
    --article-cover-ink: #f5eee9;
    --article-cover-muted: #d1b7ae;
    --article-accent: #dc8168;
    --article-accent-soft: rgb(220 129 104 / 0.13);
}

html[data-reading-theme="dark"]
.editorial-article--archetypes {
    --article-cover-start: #11100c;
    --article-cover-end: #5e4921;
    --article-cover-ink: #f4efe4;
    --article-cover-muted: #c9bea5;
    --article-accent: #d5b568;
    --article-accent-soft: rgb(213 181 104 / 0.13);
}

.editorial-article {
    background: var(--article-bg);
    color: var(--article-paper-ink);
}

.editorial-article__breadcrumbs {
    border-color: var(--article-line);
    background: var(--article-bg);
    color: var(--article-paper-ink);
}

.editorial-article__breadcrumbs a {
    color: var(--article-paper-ink);
}

.editorial-article__cover,
.editorial-article--psychotherapy .editorial-article__cover,
.editorial-article--neurodiversity .editorial-article__cover {
    border-color: var(--article-line);
    background:
        linear-gradient(
            135deg,
            var(--article-cover-start) 0%,
            color-mix(
                in srgb,
                var(--article-cover-start) 48%,
                var(--article-cover-end)
            ) 56%,
            var(--article-cover-end) 100%
        );
    color: var(--article-cover-ink);
}

.editorial-article__heading h1 {
    color: var(--article-cover-ink);
}

.editorial-article .article-summary,
.editorial-article__meta {
    color: var(--article-cover-muted);
}

.editorial-article__section a {
    color: var(--article-accent);
}

.editorial-article__symbol {
    border-color: var(--article-line);
}

.editorial-article .article-detail {
    padding-top: clamp(2.6rem, 5vw, 5rem);
    background: var(--article-paper);
    color: var(--article-paper-ink);
}

.editorial-article__navigation {
    max-width: 800px;
    margin: 0 auto clamp(2.8rem, 5vw, 4.5rem);
}

.editorial-article__navigation .reading-navigation {
    max-width: none;
    margin: 0;
    padding: 1rem 0;
    border: 0;
    border-top: 1px solid var(--article-line);
    border-bottom: 1px solid var(--article-line);
    border-radius: 0;
    background: transparent;
    color: var(--article-paper-ink);
}

.editorial-article__navigation
.reading-navigation__header {
    margin-bottom: 0.75rem;
}

.editorial-article__navigation
.reading-navigation__header h2 {
    color: var(--article-heading);
    font-family: var(--font-interface);
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.editorial-article__navigation
.reading-navigation__progress-text {
    color: var(--article-muted);
    font-family: var(--font-interface);
    font-size: 0.78rem;
}

.editorial-article__navigation
.reading-navigation__progress,
.editorial-article__navigation
.reading-navigation__progress::-webkit-progress-bar {
    height: 3px;
    background: var(--article-line);
}

.editorial-article__navigation
.reading-navigation__progress::-webkit-progress-value,
.editorial-article__navigation
.reading-navigation__progress::-moz-progress-bar {
    background: var(--article-accent);
}

.editorial-article__navigation .reading-contents {
    margin-top: 0.85rem;
    color: var(--article-paper-ink);
}

.editorial-article__navigation
.reading-contents summary {
    color: var(--article-paper-ink);
    font-family: var(--font-interface);
    font-size: 0.88rem;
    cursor: pointer;
}

.editorial-article__navigation
.reading-contents__list {
    margin: 1rem 0 0;
    padding: 1rem 0 0 1.4rem;
    border-top: 1px solid var(--article-line);
}

.editorial-article__navigation
.reading-contents__list a {
    color: var(--article-paper-ink);
    text-decoration-color: var(--article-accent);
    text-underline-offset: 0.18em;
}

.editorial-article__navigation .reading-resume {
    border-left-color: var(--article-accent);
    background: var(--article-accent-soft);
    color: var(--article-paper-ink);
}

.editorial-article__navigation
.reading-resume button {
    border-color: var(--article-line);
    background: transparent;
    color: var(--article-paper-ink);
}

.editorial-article .article-body {
    max-width: 800px;
    color: var(--article-paper-ink);
    font-size: clamp(1.12rem, 1.35vw, 1.24rem);
    line-height: 1.78;
}

.editorial-article .article-body p,
.editorial-article .article-body li,
.editorial-article .article-body dd,
.editorial-article .article-body figcaption,
.editorial-article .article-body table {
    color: var(--article-paper-ink);
}

.editorial-article .article-body h2,
.editorial-article .article-body h3,
.editorial-article .article-body h4,
.editorial-article .article-body strong,
.editorial-article .article-body b {
    color: var(--article-heading);
}

.editorial-article .article-body a {
    color: var(--article-accent);
    text-decoration-color: currentColor;
    text-underline-offset: 0.18em;
}

.editorial-article .article-body blockquote {
    border-inline-start-color: var(--article-accent);
    background: var(--article-accent-soft);
    color: var(--article-paper-ink);
}

.editorial-article .article-body li::marker {
    color: var(--article-accent);
}

.editorial-article .article-engagement,
.editorial-article .article-author,
.editorial-article .article-faq {
    color: var(--article-paper-ink);
}

.editorial-article__cta {
    border-color: var(--article-line);
    background: var(--article-surface);
    color: var(--article-paper-ink);
}

.editorial-article__back {
    border-color: var(--article-line);
    background: var(--article-bg);
}

.editorial-article__back a {
    color: var(--article-paper-ink);
}

@media (max-width: 520px) {
    .editorial-article .article-detail {
        padding-top: 2rem;
    }

    .editorial-article__navigation {
        margin-bottom: 2.5rem;
    }

    .editorial-article__navigation
    .reading-navigation__header {
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* EDITORIAL ARTICLE MOBILE REFLOW */

.editorial-article {
    min-width: 0;
    max-width: none;
}

.editorial-article__cover,
.editorial-article__heading,
.editorial-article__heading h1,
.editorial-article .article-summary,
.editorial-article .article-detail,
.editorial-article .article-body {
    min-width: 0;
    max-width: 100%;
}

.editorial-article__heading h1 {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: balance;
}

.editorial-article .article-summary {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

@media (max-width: 700px) {
    .editorial-article {
        width: 100vw;
        max-width: none;
        margin-left: calc(50% - 50vw);
        overflow-x: clip;
    }

    .editorial-article__cover {
        display: block;
        min-height: auto;
    }

    .editorial-article__heading {
        width: 100%;
        padding:
            clamp(2.8rem, 10vw, 4rem)
            clamp(1rem, 4.5vw, 1.4rem);
    }

    .editorial-article__heading h1 {
        width: 100%;
        max-width: none;
        margin: 1.2rem 0 1.5rem;
        font-size: clamp(2rem, 8vw, 3rem);
        letter-spacing: -0.035em;
        line-height: 1.02;
    }

    .editorial-article .article-summary {
        width: 100%;
        max-width: none;
        font-size: clamp(0.96rem, 3.8vw, 1.05rem);
        line-height: 1.55;
    }

    .editorial-article__meta {
        gap: 0.65rem 1rem;
        margin-top: 1.75rem;
        font-size: 0.75rem;
    }

    .editorial-article .article-cover,
    .editorial-article__symbol {
        min-height: min(88vw, 520px);
    }

    .editorial-article .article-detail,
    .editorial-article__cta,
    .editorial-article__back {
        width: 100%;
        padding-inline: clamp(1rem, 4.5vw, 1.4rem);
    }

    .editorial-article__navigation,
    .editorial-article .article-body,
    .editorial-article .article-engagement,
    .editorial-article .article-author,
    .editorial-article .article-faq {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 390px) {
    .editorial-article__heading h1 {
        font-size: clamp(1.85rem, 8vw, 2.3rem);
        letter-spacing: -0.03em;
    }
}

/* ARTICLE MOBILE CONTENT SAFETY */

.editorial-article .article-body,
.editorial-article .article-body *,
.editorial-article__navigation,
.editorial-article .article-engagement,
.editorial-article .article-author,
.editorial-article .article-faq,
.editorial-article__cta {
    box-sizing: border-box;
    min-width: 0;
}

.editorial-article .article-body img,
.editorial-article .article-body video,
.editorial-article .article-body svg,
.editorial-article .article-body canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

.editorial-article .article-body iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
}

.editorial-article .article-body table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.editorial-article .article-body pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
}

.editorial-article .article-body a {
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .editorial-article .article-body h2 {
        max-width: 100%;
        font-size: clamp(1.65rem, 7.5vw, 2.25rem);
        line-height: 1.08;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
        text-wrap: balance;
    }

    .editorial-article .article-body h3 {
        max-width: 100%;
        font-size: clamp(1.3rem, 6vw, 1.75rem);
        line-height: 1.14;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
        text-wrap: balance;
    }

    .editorial-article .article-body h4 {
        max-width: 100%;
        font-size: 1.15rem;
        line-height: 1.25;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .editorial-article .article-body blockquote {
        max-width: 100%;
        margin-right: 0;
        margin-left: 0;
        padding: 1.25rem;
    }

    .editorial-article__navigation,
    .editorial-article .article-engagement,
    .editorial-article .article-author,
    .editorial-article .article-faq,
    .editorial-article__cta {
        width: 100%;
        max-width: 100%;
        overflow: clip;
    }

    .editorial-article__navigation *,
    .editorial-article .article-engagement *,
    .editorial-article .article-author *,
    .editorial-article .article-faq *,
    .editorial-article__cta * {
        min-width: 0;
        max-width: 100%;
    }
}