.experience-page .muted {
    color: var(--mud-palette-text-secondary);
}

/* Timeline: year | line | content */
.xp-timeline {
    /* control the layout with vars */
    --year-col: 96px; /* width of the year column */
    --gap: 24px; /* space between year and content */
    position: relative;
}

    /* the vertical blue line that runs through the whole section */
    .xp-timeline::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        /* center of the gap between the two columns */
        left: calc(var(--year-col) + (var(--gap) / 2) - 1px);
        width: 2px;
        background: color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
        border-radius: 2px;
        opacity: .7;
    }

/* each row in the timeline */
.xp-item {
    display: grid;
    grid-template-columns: var(--year-col) 1fr;
    column-gap: var(--gap);
    align-items: start;
    padding: 8px 0 12px; /* vertical spacing between rows */
}

.xp-year {
    text-align: right;
    padding-right: 6px;
    color: var(--mud-palette-primary);
    font-weight: 600;
    white-space: nowrap;
}

/* your text on the right */
.xp-content {
    margin: 0;
}

    .xp-content .muted {
        color: var(--mud-palette-text-secondary);
    }

/* optional: shrink a bit on tablets */
@media (max-width: 900px) {
    .xp-timeline {
        --year-col: 84px;
        --gap: 20px;
    }
}

/* mobile: stack (hide the line), year on top */
@media (max-width: 600px) {
    .xp-timeline::before {
        display: none;
    }

    .xp-item {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }

    .xp-year {
        text-align: left;
        padding-right: 0;
    }
}


.xp-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

/* Cards */
.hi-card {
    border-radius: 12px;
    box-shadow: var(--mud-elevation-2);
}

    .hi-card .mud-typography {
        margin: 0;
    }

/* Responsive */
@media (max-width: 900px) {
    .xp-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* slide two widths → ends exactly where it started (no jump) */
@keyframes gradient-x {
    100% {
        background-position: -200% 0%;
    }
}

.mud-panel-expanded > .mud-expand-panel-header .mud-typography,
.mud-panel-expanded > .mud-expand-panel-header .mud-expand-panel-text {
    background-image: linear-gradient(90deg, #5C51DB 0%, #6CA5F4 50%, #5C51DB 100%);
    background-size: 200% 100%;
    background-position: 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: gradient-x 2.4s linear infinite;
    will-change: background-position;
}

@media (prefers-reduced-motion: reduce) {
    .mud-panel-expanded > .mud-expand-panel-header .mud-typography,
    .mud-panel-expanded > .mud-expand-panel-header .mud-expand-panel-text {
        animation: none;
    }
}