.legacy-hero { background: var(--color-surface-soft); border-block: 1px solid var(--color-border); padding-block: 64px; }
.legacy-hero h1 { font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.15; color: var(--color-heading); overflow-wrap: anywhere; }
.legacy-prose { padding-block: 40px; font-size: 1rem; overflow-wrap: anywhere; }
.legacy-prose h2 { font-size: clamp(1.5rem, 2.7vw, 2rem); line-height: 1.25; margin-top: 40px; color: var(--color-heading); }
.legacy-prose h3 { font-size: 1.35rem; line-height: 1.3; margin-top: 28px; }
.legacy-prose p, .legacy-prose li { line-height: 1.8; }
.legacy-prose a:not(.button) { color: var(--color-brand); }
.legacy-prose img { max-width: 100%; height: auto; max-height: 560px; object-fit: contain; margin: 24px auto; border-radius: var(--radius-card); }
.legacy-prose figure { margin: 24px 0; }
.legacy-prose figcaption { color: var(--color-muted); font-size: .875rem; text-align: center; }
.legacy-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin-block: 24px; }
.legacy-prose th, .legacy-prose td { border: 1px solid var(--color-border); padding: 12px; min-width: 100px; text-align: left; }
.legacy-prose th { background: var(--color-surface-soft); }
.legacy-prose .button { margin-block: 12px; }
.legacy-retained { padding-block: 32px; }
.legacy-retained > details { border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 20px; }
.legacy-retained summary { min-height: 44px; cursor: pointer; color: var(--color-heading); font-weight: 650; }
.legacy-retained .legacy-prose { max-width: 820px; margin-inline: auto; }
.legacy-directory, .legacy-related, .legacy-final { padding-block: 48px; }
.legacy-directory > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.legacy-directory article { padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.legacy-directory h3 { font-size: 1.2rem; line-height: 1.35; }
.legacy-directory p { color: var(--color-muted); }
.legacy-directory a { color: var(--color-brand); }
.legacy-final { border-top: 1px solid var(--color-border); }
.legacy-final h2, .legacy-related h2, .legacy-directory > h2 { font-size: clamp(1.65rem, 3vw, 2.4rem); }
.legacy-related > a { display: inline-flex; margin-top: 24px; min-height: 44px; align-items: center; color: var(--color-brand); }
@media(max-width:900px) { .legacy-directory > div { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .legacy-hero { padding-block: 40px; } .legacy-directory > div { grid-template-columns: minmax(0,1fr); } .legacy-prose { padding-block: 24px; } }
.legacy-image-reference { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border: 1px solid var(--color-border); padding: 16px; border-radius: var(--radius-control); font-size: .875rem; color: var(--color-muted); }
.legacy-image-reference a { min-height: 44px; display: inline-flex; align-items: center; }

.explore-shortcuts { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-block: var(--space-8); }
.explore-section { padding-block: 40px; border-top: 1px solid var(--color-border); scroll-margin-top: 110px; }
.explore-section h2 { color: var(--color-heading); font-size: clamp(1.6rem, 3vw, 2.4rem); }
.explore-section h2 span { color: var(--color-muted); font-size: 1rem; font-weight: 400; }
.explore-section > p { color: var(--color-muted); max-width: 70ch; }
.explore-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2) var(--space-6); list-style: none; padding: 0; margin: var(--space-6) 0 0; }
.explore-links li { min-width: 0; }
.explore-links a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--control-height); height: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-brand); text-decoration: none; overflow-wrap: anywhere; transition: background-color var(--motion-feedback); }
.explore-links a:hover { background: var(--color-surface-soft); text-decoration: underline; }
.explore-links a > span:last-child { flex-shrink: 0; }
@media (max-width: 900px) { .explore-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .explore-links { grid-template-columns: minmax(0, 1fr); } .explore-shortcuts > a { flex: 1 1 100%; } }