/* Career page additions to the shared homepage design. */
.site-header a[aria-current="page"] {
    color:var(--purple);
    text-decoration:underline;
    text-underline-offset:6px;
}

.career-heading {
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
    gap:72px;
    align-items:center;
    padding-block:76px 64px;
    border-bottom:1px solid var(--line);
}

.career-heading h1 {
    font-size:clamp(42px,5.2vw,74px);
    line-height:1.12;
    font-weight:500;
    letter-spacing:-.06em;
    margin-top:24px;
}

.career-intro > p {
    font-size:16px;
    line-height:1.9;
    color:var(--muted);
}

.career-actions {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:24px;
    margin-top:28px;
}

.career-actions .button {
    margin-top:0;
}

.career-experience {
    padding-block:40px 72px;
}

.career-section-heading {
    margin-bottom:32px;
    text-align:center;
}

.career-section-heading h2 {
    font-size:clamp(30px,3vw,42px);
    margin-top:16px;
}

.experience-timeline {
    list-style:none;
    margin:40px auto 0;
    padding:0;
    max-width:900px;
}

.timeline-entry {
    position:relative;
    padding:0 0 40px 44px;
    margin-left:8px;
    border-left:2px solid var(--line);
}

.timeline-entry:last-child {
    padding-bottom:0;
    border-left-color:transparent;
}

.timeline-entry::before {
    content:'';
    position:absolute;
    left:-8px;
    top:8px;
    width:14px;
    height:14px;
    background:var(--paper);
    border:2px solid var(--purple);
    border-radius:50%;
}

.timeline-current::before {
    background:var(--purple);
    box-shadow:0 0 0 5px var(--lavender);
}

.timeline-heading {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px 18px;
    margin-bottom:14px;
}

.timeline-heading h3 {
    font-size:28px;
    font-weight:500;
    letter-spacing:-.04em;
    line-height:1.25;
    margin:0;
}

.timeline-status {
    font-family:'Source Code Pro',monospace;
    font-size:11px;
    color:var(--purple);
}

.timeline-entry p {
    font-size:14px;
    line-height:1.95;
    color:#55534f;
}

.career-tools {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
    gap:80px;
    padding-block:40px 72px;
    border-top:1px solid var(--line);
}

.career-tools h2 {
    margin:20px 0;
}

.tools-intro {
    max-width:400px;
    color:var(--muted);
    font-size:14px;
}

.tools-list {
    margin:0;
}

.tools-list > div {
    display:grid;
    grid-template-columns:100px minmax(0,1fr);
    gap:20px;
    border-bottom:1px solid var(--line);
    padding-block:20px;
}

.tools-list dt {
    font-weight:500;
    font-size:14px;
    color:var(--purple);
}

.tools-list dd {
    margin:0;
    font-size:14px;
    color:var(--muted);
    line-height:1.8;
}

.career-speaking-band {
    background:var(--yellow);
    padding-block:64px;
}

.career-speaking-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:72px;
    align-items:center;
}

.career-speaking-grid > img {
    width:100%;
    border-radius:3px;
}

.speaking-copy h2 {
    margin:22px 0;
}

.speaking-copy p:not(.eyebrow) {
    font-size:14px;
    line-height:1.9;
}

.speaking-copy p + p {
    margin-top:20px;
}

@media(max-width:1100px) {
    .career-heading,.career-tools,.career-speaking-grid {
        gap:40px;
    }
}

@media(max-width:760px) {
    .career-heading,.career-tools,.career-speaking-grid {
        grid-template-columns:1fr;
        gap:32px;
    }
    .career-heading {
        padding-block:44px 36px;
    }
    .career-heading h1 {
        font-size:clamp(36px,8vw,60px);
    }
    .career-intro > p {
        font-size:14px;
    }
    .career-experience {
        padding-block:32px 44px;
    }
    .timeline-entry {
        padding-left:28px;
    }
    .timeline-heading h3 {
        font-size:26px;
    }
    .career-tools {
        padding-block:32px 44px;
    }
    .tools-intro {
        max-width:100%;
    }
    .tools-list > div {
        grid-template-columns:80px minmax(0,1fr);
        gap:16px;
    }
    .career-speaking-band {
        padding-block:44px;
    }
    .career-speaking-grid > img {
        max-width:480px;
        justify-self:center;
    }
}