.experience-hero{

    padding:90px 0;

}

.narrow{

    max-width:820px;

}

.experience-hero h1{

    margin:20px 0 30px;

}

.experience-hero p{

    color:var(--muted);
    font-size:1.15rem;

}

/* Timeline */

.timeline{

    background:#fafafa;

}

.timeline-item{

    display:grid;
    grid-template-columns:180px 1fr;
    gap:60px;

    padding:60px 0;

    border-bottom:1px solid var(--border);

}

.timeline-item:last-child{

    border:none;

}

.timeline-year{

    color:var(--accent);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;

}

.timeline-content .role{

    color:var(--accent);
    font-size:.85rem;
    text-transform:uppercase;
    letter-spacing:1.5px;

}

.timeline-content h2{

    margin:10px 0 20px;

}

.timeline-content p{

    color:var(--muted);
    max-width:720px;

}

.timeline-content ul{

    margin-top:25px;

    display:flex;
    flex-wrap:wrap;

    gap:12px;

    list-style:none;

}

.timeline-content li{

    border:1px solid var(--border);

    padding:8px 16px;

    border-radius:999px;

    font-size:.85rem;

}

/* Summary */

.summary-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.summary-grid article{

    border:1px solid var(--border);

    padding:34px;

    border-radius:var(--radius);

}

.summary-grid h3{

    margin-bottom:16px;

}

.summary-grid p{

    color:var(--muted);

}

/* Responsive */

@media(max-width:900px){

.timeline-item{

grid-template-columns:1fr;

gap:20px;

}

.summary-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:700px){

.summary-grid{

grid-template-columns:1fr;

}

}