.topic-page {
    max-width: none;
    margin-inline: 0;
}

.topic-shell {
    border: 1px solid var(--color-border);
}

/* Tighter section rhythm on topic detail + list */
.topic-section.section-shell {
    padding: clamp(0.85rem, 2.2vw, 1.15rem) clamp(0.9rem, 2.4vw, 1.25rem);
}

.topic-section-heading {
    letter-spacing: 0.02em;
}

.topic-kicker {
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
}

.topic-display-title {
    font-size: clamp(calc(1.65rem * var(--sv-heading-scale)), calc(4.2vw * var(--sv-heading-scale)), calc(2.65rem * var(--sv-heading-scale)));
    line-height: 1.12;
    letter-spacing: -0.01em;
}

.topic-lead,
.topic-copy {
    max-width: var(--sv-reading-width);
    line-height: var(--sv-content-line-height);
}

/*
 * Topic detail intro — mobile-first editorial block.
 * Shares shell + padding rhythm with topic list header and other `topic-section` shells;
 * avoids the old gradient “hero card” so the fold stays light and calm.
 */
.topic-intro.topic-shell.sv-surface {
    background: var(--color-surface);
}

.topic-intro__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(0.26rem, 0.85vw, 0.4rem);
    min-width: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .topic-intro__body {
        gap: clamp(0.42rem, 1.1vw, var(--sv-heading-block-gap));
    }
}

.topic-intro__eyebrow {
    line-height: 1.28;
}

/* Title leads hierarchy: one tight line rhythm, scales up gently on larger viewports. */
.topic-intro .topic-intro__title.topic-display-title {
    font-size: clamp(calc(1.38rem * var(--sv-heading-scale)), calc((1.02rem + 2.05vw) * var(--sv-heading-scale)), calc(2.15rem * var(--sv-heading-scale)));
    line-height: 1.11;
    letter-spacing: -0.02em;
    margin: 0;
}

/* Secondary copy: slightly narrower measure than full reading width for scannability. */
.topic-intro__lede.topic-lead {
    max-width: min(56ch, var(--sv-reading-width));
    font-size: clamp(calc(0.92rem * var(--sv-font-scale)), calc((0.88rem + 0.22vw) * var(--sv-font-scale)), calc(1.02rem * var(--sv-font-scale)));
    line-height: 1.62;
}

.topic-card,
.topic-related-card {
    position: relative;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.topic-card:hover,
.topic-card:focus-within,
.topic-related-card:hover,
.topic-related-card:focus-within {
    border-color: color-mix(in srgb, var(--color-heading) 45%, var(--color-border));
    background-color: color-mix(in srgb, var(--color-surface-alt) 86%, var(--color-heading) 14%);
}

/* —— Topic SVG icons (same mask + theme swap pattern as site Scroll icon / sidebar headings) —— */

.sv-topic-icon-mask {
    --sv-topic-icon-size: clamp(1.72rem, 3.4vw, 2.05rem);
    --_sv-topic-icon-fill: var(
        --sv-topic-icon-color,
        color-mix(in srgb, var(--sv-heading) 90%, var(--color-text-muted) 10%)
    );
    --_sv-topic-icon-fill-hover: var(--sv-topic-icon-hover-color, rgb(var(--color-heading-rgb)));
    width: var(--sv-topic-icon-size);
    height: var(--sv-topic-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transform: translateY(0.04em);
}

.sv-topic-icon-mask--card {
    --sv-topic-icon-size: clamp(1.62rem, 3.1vw, 1.95rem);
}

.sv-topic-icon-mask--compact {
    --sv-topic-icon-size: clamp(1.32rem, 2.65vw, 1.52rem);
}

.sv-topic-icon-mask--hero {
    --sv-topic-icon-size: clamp(1.85rem, 3.6vw, 2.35rem);
    transform: translateY(0.06em);
}

.sv-topic-icon-mask__glyph.sv-topic-icon-mask__glyph--theme {
    display: block;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    background-color: var(--_sv-topic-icon-fill);
    -webkit-mask-image: var(--sv-topic-icon-mask);
    mask-image: var(--sv-topic-icon-mask);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: background-color var(--theme-transition-duration) ease;
}

.topic-card:hover .sv-topic-icon-mask__glyph.sv-topic-icon-mask__glyph--theme,
.topic-card:focus-within .sv-topic-icon-mask__glyph.sv-topic-icon-mask__glyph--theme,
.topic-related-card:hover .sv-topic-icon-mask__glyph.sv-topic-icon-mask__glyph--theme,
.topic-related-card:focus-within .sv-topic-icon-mask__glyph.sv-topic-icon-mask__glyph--theme,
.topic-intro:hover .sv-topic-icon-mask__glyph.sv-topic-icon-mask__glyph--theme,
.topic-intro:focus-within .sv-topic-icon-mask__glyph.sv-topic-icon-mask__glyph--theme {
    background-color: var(--_sv-topic-icon-fill-hover);
}

.sv-topic-icon-mask .sv-topic-icon-mask__glyph--theme {
    display: none !important;
}

html[data-theme="light"] .sv-topic-icon-mask .sv-topic-icon-mask__glyph--light,
html[data-theme="sepia"] .sv-topic-icon-mask .sv-topic-icon-mask__glyph--sepia,
html[data-theme="dark"] .sv-topic-icon-mask .sv-topic-icon-mask__glyph--dark {
    display: block !important;
}

.topic-card__row,
.topic-related-card__row {
    display: flex;
    align-items: flex-start;
    gap: clamp(0.72rem, 2vw, 1.05rem);
    min-width: 0;
}

.topic-card__body,
.topic-related-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

.topic-card__title,
.topic-related-card__title {
    text-wrap: balance;
}

.topic-intro__mast {
    display: flex;
    align-items: flex-start;
    gap: clamp(0.75rem, 2vw, 1.15rem);
    min-width: 0;
}

.topic-intro__mast-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(0.26rem, 0.85vw, 0.4rem);
}

.topic-scroll-cover {
    --sv-card-media-aspect-ratio: 16 / 10;
}

.topic-card .card-body,
.topic-related-card .card-body {
    gap: var(--sv-space-2);
}

.topic-scroll-cover img {
    object-fit: var(--sv-card-media-fit, cover);
}

.topic-cover-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}