.works-started {
    position: relative;
    overflow: hidden;
    background: var(--color-light-purple);
    color: var(--color-dark-purple);
    padding: 5rem 0 4.75rem;
}

.works-started__header {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto 4.25rem;
    text-align: center;
}

.works-started.is-grid-migrated > .container.grid > .works-started__header {
    grid-column: 3 / 11;
    width: 100%;
    max-width: none;
    min-width: 0;
}

.works-started__title {
    color: var(--color-dark-purple);
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 4.8vw, var(--text-h2));
    font-weight: var(--fw-bold);
    line-height: var(--lh-h2);
    margin: 0 0 1.5rem;
}

.works-started__intro {
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--text-copy);
    font-weight: var(--fw-medium);
    line-height: var(--lh-copy);
    margin: 0 auto;
    max-width: 760px;
}

.works-started__intro strong {
    color: var(--color-primary);
    font-weight: var(--fw-bold);
}

.works-started__intro > :last-child {
    margin-bottom: 0;
}

.works-started__decor {
    position: absolute;
    pointer-events: none;
}

.works-started__decor--scribble {
    left: 13.2%;
    top: 10.5rem;
    width: 92px;
    height: 90px;
    object-fit: contain;
    transform: rotate(14deg);
}

.works-started__decor--grid {
    right: -10rem;
    top: -4rem;
    width: min(522px, 42vw);
    height: 300px;
    opacity: 0.42;
    object-fit: contain;
}

.works-started__decor--circle {
    right: 16.7%;
    top: 6.5rem;
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.works-started__decor--spark {
    right: 5.25%;
    bottom: 4.25rem;
    width: 90px;
    height: 90px;
    object-fit: contain;
}

.works-started__carousel {
    position: relative;
    z-index: 2;
}

.works-started__track {
    display: flex;
    gap: 1.375rem;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 0 1.5rem;
}

.works-started__track::-webkit-scrollbar {
    display: none;
}

.works-started__track.is-looping {
    scroll-behavior: auto;
}

.works-started__slide {
    flex: 0 0 535px;
    scroll-snap-align: start;
}

.works-started-card {
    overflow: hidden;
    border-radius: 16px;
    background: var(--color-white);
    transition: opacity 180ms ease;
}

.works-started__track:hover .works-started-card {
    opacity: 0.45;
}

.works-started__slide:hover .works-started-card {
    opacity: 1;
}

/* Mouse drag (main.js). The drag and its release glide move the track a
   frame at a time, so snap and smooth scrolling sit out until it rests. */
.works-started__track.is-draggable {
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}

.works-started__track.is-dragging {
    cursor: grabbing;
}

.works-started__track.is-dragging,
.works-started__track.is-settling {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

/* The cards sit out the drag and its glide: no spotlight, no clicks. */
.works-started__track.is-dragging .works-started__slide,
.works-started__track.is-settling .works-started__slide {
    pointer-events: none;
}

.works-started__track.is-dragging .works-started-card,
.works-started__track.is-settling .works-started-card {
    opacity: 1;
}

.works-started-card__media {
    position: relative;
    width: calc(100% - 28px);
    height: 357px;
    margin: 14px 14px 0;
    border-radius: 16px;
    overflow: hidden;
    background: var(--color-light-purple);
    transform: scale(1);
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.works-started-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* The still image sits over the animation and clears out of the way once the
   Lottie has finished loading and is actually playing. */
.works-started-card__media > .works-started-card__image {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 1;
    visibility: visible;
    transition: opacity 250ms linear, visibility 250ms linear;
}

.works-started-card.is-playing .works-started-card__image {
    opacity: 0;
    visibility: hidden;
}

.works-started-card__animation {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.works-started-card__animation svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Soft brand-yellow glow that blooms up from the bottom of the artwork on hover. */
.works-started-card__media::after {
    content: "";
    position: absolute;
    top: auto;
    bottom: -50%;
    left: 0;
    right: 0;
    z-index: 3;
    height: 50%;
    border-radius: 100vw;
    background-color: var(--color-accent-01);
    filter: blur(5.75rem);
    mix-blend-mode: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity 650ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
    .works-started__slide:hover .works-started-card__media {
        transform: scale(0.975);
    }

    /* Its own layer while the Lottie plays under it, so the blur isn't
       painted again on every animation frame. */
    .works-started__slide:hover .works-started-card__media::after {
        opacity: 1;
        will-change: opacity;
    }
}

@media (prefers-reduced-motion: reduce) {
    .works-started-card__media {
        transition: none;
    }

    .works-started-card__image {
        transition: none;
    }

    .works-started-card__media::after {
        transition: none;
    }
}

.works-started-card__body {
    padding: 1.875rem 1rem 1.75rem;
    text-align: left;
}

.works-started-card__title {
    color: var(--color-dark-purple);
    font-family: var(--font-display);
    font-size: var(--text-title6);
    font-weight: var(--fw-bold);
    line-height: var(--lh-title6);
    margin: 0 0 0.125rem;
}

.works-started-card__title a {
    color: inherit;
}

.works-started-card__type {
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--lh-body);
    margin: 0;
}

.works-started__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    margin-top: 2.125rem;
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--lh-body);
}

.works-started__control {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 0.25rem;
}

.works-started__control:hover {
    color: var(--color-primary);
}

.works-started__dots {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.works-started__dot {
    width: 5px;
    height: 5px;
    border: 0;
    border-radius: 50%;
    background: var(--color-dark-purple);
    cursor: pointer;
    padding: 0;
}

.works-started__dot.is-active {
    width: 8px;
    height: 8px;
    background: #ff8d28;
}

@media (max-width: 1024px) {
    .works-started {
        padding: 4rem 0;
    }

    /* The 3 / 11 placement above outranks global.css's `.container.grid > *`
       reset, so once the track drops to 6 columns (then 4 at 768) the header
       keeps asking for lines that no longer exist, grid invents empty ones to
       reach them, and the whole block lands off to the right at ~55% width.
       Hand it the row back. */
    .works-started.is-grid-migrated > .container.grid > .works-started__header {
        grid-column: 1 / -1;
    }

    .works-started__header {
        margin-bottom: 3rem;
    }

    /* These two only ever worked because the header used to sit in columns
       3 / 11 and left a clear margin either side of it. Now that it spans the
       row there is no margin left to sit in: at 900 the scribble lands under
       the first words of the intro. Nothing above the carousel is wide enough
       to move them to, so they come out here rather than at 768. */
    .works-started__decor--scribble,
    .works-started__decor--circle {
        display: none;
    }

    .works-started__decor--grid {
        width: 70vw;
    }

    .works-started__slide {
        flex-basis: min(78vw, 460px);
    }

    .works-started__track {
        padding-inline: 1.5rem;
    }

    .works-started-card__media {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .works-started {
        padding: 3rem 0;
    }

    .works-started__title {
        font-size: clamp(2.25rem, 12vw, 3.25rem);
    }

    .works-started__intro {
        font-size: var(--text-body);
    }

    .works-started__decor--spark {
        display: none;
    }

    .works-started__slide {
        flex-basis: min(86vw, 340px);
    }

    .works-started__track {
        gap: 1rem;
        padding-inline: 1rem;
    }

    .works-started-card__media {
        width: calc(100% - 20px);
        height: 220px;
        margin: 10px 10px 0;
        border-radius: 8px;
    }

    .works-started-card__body {
        padding: 1.25rem 1rem;
    }

    .works-started__controls {
        flex-wrap: wrap;
        margin-top: 1.5rem;
    }
}