.career-atlas {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(32rem, 3fr) minmax(22rem, 2fr);
    margin: var(--space-3) 0 var(--space-5);
}

.career-atlas__map-column {
    align-self: start;
    position: sticky;
    top: calc(4.25rem + var(--space-2));
}

.career-atlas__map-frame {
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
}

.career-atlas__map {
    height: min(66vh, 42rem);
    min-height: 25rem;
    width: 100%;
}

.career-atlas__map-note {
    border-top: 1px solid var(--color-rule);
    color: var(--color-muted);
    font-size: 0.77rem;
    line-height: 1.45;
    margin: 0;
    padding: 0.65rem 0.8rem;
}

.career-atlas__status {
    align-items: center;
    display: grid;
    column-gap: 0.7rem;
    grid-template-columns: auto minmax(0, 1fr);
    margin: 0 0 var(--space-2);
    padding: 0.1rem 0;
}

.career-atlas__marker,
.career-stage__marker {
    border-radius: 50%;
    border: 2px solid var(--stage-color, var(--color-work));
    box-sizing: border-box;
    color: var(--stage-color, var(--color-work));
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}

.career-atlas__marker {
    border-width: 3px;
    height: 3.1rem;
    width: 3.1rem;
}

.career-atlas__context { min-width: 0; }

.career-atlas__date {
    color: var(--color-muted);
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.career-atlas__role {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
}

.career-atlas__timeline {
    border-bottom: 1px solid var(--color-rule);
    color: var(--color-muted);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-2);
    padding-bottom: 0.5rem;
}

.career-atlas__timeline strong { color: var(--color-ink); }

.career-atlas__stages {
    min-width: 0;
    padding-top: 0.25rem;
}

.career-stage {
    border-left: 1px solid var(--color-rule);
    display: grid;
    align-content: center;
    min-height: calc(100vh - 10rem);
    margin: 0 0 var(--space-3);
    padding: 0.25rem 0 var(--space-2) var(--space-2);
    transition: border-color 180ms ease, opacity 180ms ease;
}

.career-stage h3 { margin-top: 0; }
.career-stage h3::before { content: none; }

.career-stage__marker {
    height: 1.85rem;
    font-size: 0.68rem;
    margin-right: 0.6rem;
    vertical-align: 0.1em;
    width: 1.85rem;
}

.career-stage { --stage-color: var(--color-work); }
.career-stage.cv-education { --stage-color: var(--color-education); }
.career-stage.cv-fellowship { --stage-color: #6e4fa3; }
.career-stage.cv-appointment { --stage-color: #167a6e; }
.career-atlas__status[data-stage-type="education"] { --stage-color: var(--color-education); }
.career-atlas__status[data-stage-type="fellowship"] { --stage-color: #6e4fa3; }
.career-atlas__status[data-stage-type="appointment"] { --stage-color: #167a6e; }

.career-stage.is-active {
    border-left: 4px solid var(--color-work);
    padding-left: calc(var(--space-2) - 3px);
}

.career-stage.is-active.cv-education { border-left-color: var(--color-education); }
.career-stage.is-active.cv-fellowship { border-left-color: #6e4fa3; }
.career-stage.is-active.cv-appointment { border-left-color: #167a6e; }

.career-atlas .maplibregl-ctrl-group {
    border: 1px solid var(--color-rule);
    border-radius: 0;
    box-shadow: none;
}

.career-atlas .maplibregl-ctrl-group button { width: 28px; height: 28px; }
.career-atlas .maplibregl-ctrl-attrib { font-size: 10px; }

@media (max-width: 991px) {
    .career-atlas { gap: var(--space-3); grid-template-columns: minmax(18rem, 1fr) minmax(0, 1fr); }
}

@media (max-width: 767px) {
    .career-atlas { display: block; }
    .career-atlas__map-column { margin-bottom: var(--space-3); position: static; }
    .career-atlas__map { height: 55vh; min-height: 20rem; }
    .career-stage { display: block; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .career-stage { transition: none; }
}

@media print {
    .career-atlas__map-column { display: none; }
    .career-atlas { display: block; }
}