.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(1.65rem, 4.2vw, 2.65rem);
    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(1.38rem, 1.02rem + 2.05vw, 2.15rem);
    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(0.92rem, 0.88rem + 0.22vw, 1.02rem);
    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-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%;
}