@layer components {
    .series-page {
        display: grid;
        gap: var(--space-24);
    }

    .series-page__masthead {
        display: grid;
        grid-column: 1 / -1;
        gap: var(--space-24);
        min-width: 0;
    }

    .series-page__header {
        margin-bottom: 0;
    }

    .series-timeline {
        display: grid;
        gap: var(--space-18);
        overflow: hidden;
        padding: clamp(var(--space-18), 2vw, var(--space-28));
        border: var(--border-width-hairline) solid color-mix(in oklch, var(--color-neutral-600) 54%, transparent);
        border-radius: var(--radius-corner);
        background: linear-gradient(135deg, var(--color-neutral-950), color-mix(in oklch, var(--color-neutral-950) 90%, var(--color-brand-secondary)));
        color: var(--color-text-inverse);
        box-shadow: 0 var(--space-14) var(--space-32) color-mix(in oklch, var(--color-black) 18%, transparent);
    }

    .series-timeline__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-16);
    }

    .series-timeline__heading {
        display: grid;
        gap: var(--space-4);
        min-width: 0;
    }

    .series-timeline__heading h2,
    .series-timeline__heading p {
        margin: 0;
    }

    .series-timeline__heading h2 {
        color: var(--color-text-inverse);
        font-size: var(--text-lg);
        line-height: var(--line-height-title);
    }

    .series-timeline__heading p {
        color: rgb(255 255 255 / 62%);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
        line-height: var(--leading-ui);
    }

    .series-timeline__reset {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-8);
        min-height: var(--space-40);
        padding: 0 var(--space-16);
        border: var(--border-width-hairline) solid rgb(255 255 255 / 24%);
        border-radius: var(--radius-round);
        background: rgb(255 255 255 / 8%);
        color: var(--color-text-inverse);
        font-weight: var(--font-weight-bold);
        cursor: pointer;
        transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
    }

    .series-timeline__reset:hover,
    .series-timeline__reset:focus-visible {
        border-color: var(--color-brand-primary);
        background: rgb(255 255 255 / 14%);
        transform: translateY(-0.0625rem);
    }

    .series-timeline__reset-icon.svg-sprite {
        position: static;
        width: var(--space-16);
        height: var(--space-16);
        overflow: visible;
        fill: currentColor;
    }

    .series-timeline__rail {
        --series-timeline-cover-size: clamp(5.5rem, 7.2vw, 7rem);
        --series-timeline-marker-gap: var(--space-8);
        --series-timeline-marker-radius: var(--space-10);
        --series-timeline-marker-size: var(--space-20);
        --series-timeline-nav-size: var(--space-40);
        --series-timeline-rail-top-space: var(--space-4);
        --series-timeline-line-top: calc(var(--series-timeline-cover-size) + var(--series-timeline-marker-gap) + var(--series-timeline-marker-radius));

        position: relative;
        min-width: 0;
    }

    .series-timeline__viewport {
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        padding: var(--series-timeline-rail-top-space) var(--space-48) var(--space-8);
        overscroll-behavior-inline: contain;
        scroll-behavior: smooth;
        scroll-snap-type: inline proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .series-timeline__viewport::-webkit-scrollbar {
        display: none;
    }

    .series-timeline__list {
        position: relative;
        display: flex;
        gap: clamp(var(--space-18), 3vw, var(--space-32));
        width: max-content;
        min-width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .series-timeline__list::after {
        content: "";
        position: absolute;
        right: 0;
        left: 0;
        top: var(--series-timeline-line-top);
        height: var(--border-width-default);
        background: rgb(255 255 255 / 34%);
        pointer-events: none;
    }

    .series-timeline__item {
        position: relative;
        z-index: 1;
        flex: 0 0 clamp(8.25rem, 11vw, 10.25rem);
        scroll-snap-align: center;
    }

    .series-timeline__button {
        display: grid;
        justify-items: center;
        gap: var(--series-timeline-marker-gap);
        width: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        text-align: center;
        cursor: pointer;
    }

    .series-timeline__media {
        position: relative;
        display: block;
        width: var(--series-timeline-cover-size);
        overflow: hidden;
        border: var(--border-width-default) solid rgb(255 255 255 / 16%);
        border-radius: var(--radius-corner-m);
        background: var(--color-media-placeholder-bg);
        aspect-ratio: 1;
        transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    .series-timeline__button:hover .series-timeline__media,
    .series-timeline__button:focus-visible .series-timeline__media {
        border-color: rgb(255 255 255 / 58%);
        transform: translateY(-0.125rem);
    }

    .series-timeline__button.is-active .series-timeline__media {
        border-color: var(--color-brand-primary);
        box-shadow: 0 0 0 var(--space-2) color-mix(in oklch, var(--color-brand-primary) 34%, transparent);
    }

    .series-timeline__item.has-award-winner .series-timeline__media {
        border-color: color-mix(in oklch, var(--color-brand-primary) 88%, var(--color-accent-gold-dark));
    }

    .series-timeline__item.has-award-nominee .series-timeline__media {
        border-color: color-mix(in oklch, var(--color-neutral-200) 72%, var(--color-neutral-500));
    }

    .series-timeline__image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .series-timeline__badge {
        position: absolute;
        top: var(--space-6);
        left: 50%;
        max-width: calc(100% - var(--space-12));
        padding: var(--space-4) var(--space-8);
        border-radius: var(--radius-round);
        background: rgb(5 9 18 / 82%);
        color: var(--color-text-inverse);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-extrabold);
        line-height: var(--leading-none);
        text-transform: uppercase;
        transform: translateX(-50%);
    }

    .series-timeline__marker {
        position: relative;
        z-index: 2;
        width: var(--series-timeline-marker-size);
        height: var(--series-timeline-marker-size);
        border: var(--border-width-default) solid rgb(255 255 255 / 68%);
        border-radius: 50%;
        background: var(--color-neutral-950);
        transition: background-color .18s ease, border-color .18s ease;
    }

    .series-timeline__button.is-active .series-timeline__marker {
        border-color: var(--color-brand-primary);
        background: var(--color-brand-primary);
    }

    .series-timeline__title,
    .series-timeline__year {
        display: block;
        max-width: 100%;
        font-weight: var(--font-weight-bold);
        line-height: var(--leading-ui);
    }

    .series-timeline__title {
        display: -webkit-box;
        overflow: hidden;
        min-height: 2.35em;
        color: rgb(255 255 255 / 84%);
        font-size: var(--text-xs);
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .series-timeline__year {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-4);
        color: rgb(255 255 255 / 58%);
        font-size: var(--text-xs);
    }

    .series-timeline__button.is-active .series-timeline__title,
    .series-timeline__button.is-active .series-timeline__year {
        color: var(--color-brand-primary);
    }

    .series-timeline__review-icon.svg-sprite {
        position: static;
        display: inline-block;
        width: 0.7em;
        height: 0.7em;
        margin-right: 0.2rem;
        overflow: visible;
        color: rgb(255 255 255 / 54%);
        fill: currentColor;
        vertical-align: -0.04em;
    }

    .series-timeline__award-icon.svg-sprite {
        position: static;
        display: block;
        flex: 0 0 auto;
        width: 0.8em;
        height: 0.8em;
        overflow: visible;
        fill: currentColor;
    }

    .series-timeline__award-icon--nominee.svg-sprite {
        color: #9aa6b2;
    }

    .series-timeline__award-icon--winner.svg-sprite {
        color: #d4af37;
    }

    .series-timeline__nav {
        position: absolute;
        top: calc(var(--series-timeline-rail-top-space) + ((var(--series-timeline-cover-size) - var(--series-timeline-nav-size)) / 2));
        z-index: 3;
        display: none;
        place-items: center;
        width: var(--series-timeline-nav-size);
        height: var(--series-timeline-nav-size);
        min-height: 0;
        padding: 0;
        border: var(--border-width-hairline) solid rgb(255 255 255 / 26%);
        border-radius: var(--radius-round);
        background: rgb(5 9 18 / 72%);
        color: var(--color-text-inverse);
        box-shadow: 0 var(--space-12) var(--space-24) rgb(0 0 0 / 28%);
        backdrop-filter: blur(0.35rem);
        cursor: pointer;
        transition: opacity .18s ease, transform .18s ease, border-color .18s ease, background-color .18s ease;
    }

    .series-timeline__nav:hover,
    .series-timeline__nav:focus-visible {
        border-color: rgb(255 255 255 / 46%);
        background: rgb(5 9 18 / 84%);
        transform: translateY(-0.0625rem);
    }

    .series-timeline__nav--prev {
        left: 0;
    }

    .series-timeline__nav--next {
        right: 0;
    }

    .series-timeline__rail.has-overflow .series-timeline__nav {
        display: grid;
    }

    .series-timeline__rail.is-at-start .series-timeline__nav--prev,
    .series-timeline__rail.is-at-end .series-timeline__nav--next {
        opacity: 0;
        pointer-events: none;
    }

    .series-timeline__nav .svg-sprite {
        position: static;
        display: block;
        width: 0.78rem;
        height: 0.78rem;
        overflow: visible;
        fill: currentColor;
    }

    .series-content-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--space-16);
        margin: 0;
    }

    .series-content-header h2,
    .series-content-header__filter {
        margin: 0;
    }

    .series-content-header__filter {
        margin-top: var(--space-6);
        color: var(--color-text-muted);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
    }

    .series-empty {
        padding: var(--space-24);
        border: var(--border-width-hairline) solid var(--color-card-border);
        border-radius: var(--radius-corner);
        background: var(--color-card-bg);
        color: var(--color-text);
        font-weight: var(--font-weight-bold);
        box-shadow: 0 var(--space-8) var(--space-24) color-mix(in oklch, var(--color-black) 8%, transparent);
    }

    @media (max-width: 47.9375rem) {
        .series-timeline {
            margin-inline: calc(var(--container-padding, var(--space-16)) * -1);
            border-radius: 0;
        }

        .series-timeline__header,
        .series-content-header {
            align-items: flex-start;
            flex-direction: column;
        }

        .series-timeline__reset {
            min-height: var(--space-36);
        }

        .series-timeline__viewport {
            padding-inline: var(--space-36);
            scroll-padding-inline: var(--space-36);
        }

        .series-timeline__rail {
            --series-timeline-nav-size: var(--space-36);
        }
    }

    @media (min-width: 75rem) {
        .listing-main__content.series-page__content {
            grid-row: auto;
        }
    }
}