/* Scoped reading hubs. Preserve the publication's light, print-inspired theme. */
.hub-page { color: var(--vs-ink); overflow-wrap: anywhere; }
/* Only these two hubs load this sheet. Let the existing navigation reflow at enlarged text sizes. */
.visual-system:has(.hub-page) .editorial-header .primary-nav { flex-wrap: wrap; }
.hub-page:lang(ko) { word-break: keep-all; }
.hub-page :is(h1,h2,h3) { text-wrap: pretty; }
.hub-page a { text-underline-offset: .2em; text-decoration-thickness: 1px; }
.hub-page a:hover { text-decoration-thickness: 2px; }
.hub-page a:focus-visible { outline: 3px solid var(--vs-ink); outline-offset: 4px; }
.hub-page :is(section,nav,h2)[id] { scroll-margin-top: 7rem; }
.hub-breadcrumb { padding-top: 1rem; font-size: .8125rem; color: var(--vs-muted); }
.hub-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .65rem; padding: 0; margin: 0; list-style: none; }
.hub-breadcrumb li { display: flex; align-items: center; gap: .65rem; }
.hub-breadcrumb li+li::before { content: '›'; }
.hub-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }
.hub-hero { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); align-items: center; gap: 3rem; padding-block: 1rem 2.5rem; }
.hub-hero>div { min-width: 0; }
.hub-hero h1 { font-size: clamp(2rem,3.3vw,3rem); line-height: 1.12; letter-spacing: -.035em; max-width: 22ch; margin: 0 0 1.25rem; }
.hub-intro { font-size: 1.125rem; line-height: 1.65; max-width: 48ch; color: var(--vs-muted); margin: 0; }
.hub-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.75rem; }
.hub-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; line-height: 1.4; font-size: .9375rem; font-weight: 700; }
.hub-actions .hub-primary { background: var(--vs-yellow); color: var(--vs-ink); padding: .75rem 1rem; border: 1px solid var(--vs-ink); text-decoration: none; }
.hub-actions .hub-primary:hover { background: var(--vs-ink); color: var(--vs-yellow); }
.hub-actions a:active { transform: translateY(1px); }
.hub-art { margin: 0; justify-self: center; max-width: 100%; }
.hub-art img { display: block; width: auto; max-width: 100%; height: 16rem; object-fit: contain; }
.hub-art figcaption { font-size: .75rem; color: var(--vs-muted); margin-top: .5rem; line-height: 1.5; }
.hub-topics { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; border-block: 1px solid var(--vs-rule); padding-block: .5rem; margin-bottom: 2.5rem; }
.hub-topics a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 650; font-size: .9375rem; }
.hub-start { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 2.5rem; padding: 2rem; background: var(--color-accent-soft); border-left: 4px solid var(--vs-yellow); margin-bottom: 2.5rem; }
.hub-page h2 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -.02em; margin: 0 0 .75rem; }
.hub-page h3 { font-size: 1.25rem; line-height: 1.35; letter-spacing: -.015em; margin: 0 0 .75rem; }
.hub-start>div>p,.hub-reading-group>div>p { color: var(--vs-muted); font-size: .9375rem; line-height: 1.6; margin: 0; max-width: 32ch; }
.hub-reading-group { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 2.5rem; border-top: 1px solid var(--vs-rule); padding-block: 2rem; }
.hub-reading-group h2 { max-width: 16ch; }
.hub-stories { display: grid; gap: 1.75rem; }
.hub-story { min-width: 0; }
.hub-story h3 a { display: inline-block; min-height: 44px; }
.hub-story p { margin: 0 0 .65rem; font-size: 1rem; line-height: 1.65; color: var(--vs-muted); max-width: 66ch; }
.hub-story time { color: var(--vs-muted); font-size: .8125rem; line-height: 1.5; }
.hub-check { background: var(--vs-paper); padding: 1.5rem 2rem; margin-top: 1rem; }
.hub-check p { line-height: 1.65; max-width: 70ch; margin: 0 0 .5rem; }
.hub-check a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; }
.hub-page .ux-next { margin-top: 2.5rem; padding-top: 1.5rem; }
.hub-page .ux-next a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; }
.hub-work-section { border-top: 3px solid var(--vs-ink); padding-top: 1.5rem; }
.hub-work-section>p { color: var(--vs-muted); line-height: 1.6; margin-bottom: 1.5rem; }
.hub-work-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; }
.hub-work-guide { padding: 1.75rem; background: var(--vs-paper); border-top: 3px solid var(--vs-yellow); }
.hub-work-guide .hub-stage { font-size: .875rem; font-weight: 750; margin: 0 0 1rem; }
.hub-work-guide h3 { font-size: 1.5rem; }
.hub-experienced { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem 2rem; align-items: center; border-block: 1px solid var(--vs-rule); padding-block: 1.5rem; margin-block: 2rem; }
.hub-experienced h2 { font-size: 1.125rem; }
.hub-experienced p { margin: 0; max-width: 65ch; line-height: 1.6; color: var(--vs-muted); }
.hub-experienced a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.hub-page .career-preparation { border-top: none; padding-block: 1.5rem; }
.hub-page .career-preparation .kicker { display: none; }
.hub-page .career-preparation h2 { font-size: 1.75rem; }
.hub-page .career-preparation>.container>p { max-width: 75ch; }
.hub-page .career-preparation-grid { display: block; padding-left: 1.5rem; margin-block: 1.5rem; list-style-position: outside; }
.hub-page .career-preparation-grid li { background: none; border-top: 1px solid var(--vs-rule); padding: 1.25rem 0 1.25rem .5rem; }
.hub-page .career-preparation-grid li::marker { font-weight: 750; }
.hub-page .career-preparation-grid h3 { font-size: 1.25rem; margin: 0 0 .5rem; }
.hub-page .career-preparation-grid p { max-width: 78ch; margin: 0; }
.hub-page .career-preparation-grid a { font-weight: 650; }
.hub-page .career-bridge-note { color: var(--vs-muted); font-size: .875rem; }
.hub-end { border-top: 1px solid var(--vs-rule); margin-top: 2rem; padding-top: 1rem; }
.hub-scope { font-size: .875rem; color: var(--vs-muted); line-height: 1.65; max-width: 80ch; }
.hub-end .audit-topic-links { margin-top: .5rem; }
.hub-end .audit-topic-links a { min-height: 44px; display: inline-flex; align-items: center; }
@media(min-width:1024px) {
 .hub-page .career-preparation-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2.5rem; padding-left: 1.5rem; }
 .hub-page .career-preparation-grid li { padding-right: 1rem; }
}
@media(max-width:1023px) {
 .hub-hero { grid-template-columns: minmax(0,1fr); gap: 1.5rem; padding-bottom: 1.5rem; }
 .hub-hero h1 { font-size: 2rem; }
 .hub-art img { height: 10rem; }
 .hub-actions { margin-top: 1.25rem; gap: .5rem 1rem; }
 .hub-start,.hub-reading-group { grid-template-columns: minmax(0,1fr); gap: 1.25rem; }
 .hub-start { padding: 1.25rem; margin-bottom: 2rem; }
 .hub-reading-group { padding-block: 1.5rem; }
 .hub-reading-group h2 { max-width: none; }
 .hub-start>div>p,.hub-reading-group>div>p { max-width: none; }
 .hub-topics { gap: .25rem 1rem; margin-bottom: 1.5rem; }
 .hub-check { padding: 1.25rem; }
 .hub-work-grid { grid-template-columns: minmax(0,1fr); gap: 1rem; }
 .hub-work-guide { padding: 1.25rem; }
 .hub-work-guide h3 { font-size: 1.25rem; }
 .hub-experienced { grid-template-columns: minmax(0,1fr); }
}
@media(prefers-reduced-motion:reduce) { .hub-actions a:active { transform: none; } }
@media print { .hub-actions,.hub-topics { display: none; } .hub-art img { max-height: 8rem; } }