@font-face {
    font-family: "Artisan12";
    src: url("/assets/fonts/artisan12.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Space Mono";
    src: url("/assets/fonts/SpaceMono-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Space Mono";
    src: url("/assets/fonts/SpaceMono-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Space Mono";
    src: url("/assets/fonts/SpaceMono-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

:root {
    --black: #000;
    --panel: #080808;
    --white: #fff;
    --light: #b8b8b8;
    --mid: #858585;
    --dim: #585858;
    --edge-hi: #666;
    --edge-lo: #171717;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;

    min-height: 100%;

    background: #050505;

    color: var(--white);

    font-family: "Space Mono", monospace;
}

html {
    overflow-x: hidden;
    overflow-y: auto;

    image-rendering: pixelated;
}

body {
    position: relative;

    min-height: 100vh;

    background:
        linear-gradient(
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0.2)
        ),
        url("/assets/background.webp") center center / cover no-repeat;

    background-color: #050505;
}

img {
    display: block;
    max-width: 100%;
}

.page {
    width: min(1100px, 92%);

    margin: 0 auto;

    padding: 58px 0 100px;
}

.masthead {
    display: flex;

    flex-direction: column;
    align-items: center;

    margin-bottom: 58px;
}

.logo {
    width: min(500px, 76vw);

    height: auto;

    opacity: 0.94;

    transform-origin: center center;

    animation:
        logo-drift 7s steps(168, end) infinite;

    will-change: transform;
}

@keyframes logo-drift {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-3px) rotate(0.08deg);
    }
}

.logo:hover {
    animation:
        logo-fright 0.25s steps(6, end) infinite;
}

@keyframes logo-fright {
    0% {
        transform:
            translate(0, 0)
            rotate(0deg)
            skewX(0deg);
    }

    10% {
        transform:
            translate(-2px, 1px)
            rotate(-0.4deg)
            skewX(-0.7deg);
    }

    20% {
        transform:
            translate(3px, -1px)
            rotate(0.45deg)
            skewX(0.8deg);
    }

    30% {
        transform:
            translate(-4px, 0)
            rotate(-0.3deg)
            skewX(-1deg);
    }

    40% {
        transform:
            translate(2px, 1px)
            rotate(0.5deg)
            skewX(0.7deg);
    }

    50% {
        transform:
            translate(-2px, -1px)
            rotate(-0.4deg)
            skewX(-0.8deg);
    }

    60% {
        transform:
            translate(4px, 1px)
            rotate(0.25deg)
            skewX(1deg);
    }

    70% {
        transform:
            translate(-3px, 0)
            rotate(-0.3deg)
            skewX(-0.7deg);
    }

    80% {
        transform:
            translate(2px, -1px)
            rotate(0.25deg)
            skewX(0.5deg);
    }

    90% {
        transform:
            translate(-1px, 0)
            rotate(-0.12deg)
            skewX(-0.25deg);
    }

    100% {
        transform:
            translate(0, 0)
            rotate(0deg)
            skewX(0deg);
    }
}

.series-credit {
    position: relative;

    display: grid;

    width: max-content;

    max-width: 100%;

    margin-top: 21px;
    padding: 2px 0 3px;

    color: var(--white);

    font-family: "Artisan12", serif;

    font-size: clamp(1rem, 2.1vw, 1.34rem);

    font-weight: 400;

    letter-spacing: 0.075em;

    line-height: 1.2;

    text-align: center;

    text-transform: uppercase;

    white-space: pre;

    cursor: default;

    text-shadow: 1px 1px 0 #000;

    transform:
        translate3d(
            var(--mouse-x, 0px),
            var(--mouse-y, 0px),
            0
        );

    will-change: transform;
}

.series-default,
.series-social {
    grid-area: 1 / 1;

    display: block;

    letter-spacing: 0.075em;

    line-height: 1.2;

    will-change: transform;
}

.series-default {
    visibility: visible;
}

.series-social {
    visibility: hidden;

    pointer-events: none;
}

.series-credit.is-social .series-default {
    visibility: hidden;
}

.series-credit.is-social .series-social {
    visibility: visible;
}

.series-credit.is-frightening {
    animation: logo-fright 0.25s steps(6, end) infinite;
}

.series-actions {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    margin-top: 18px;
}

.full-series-button {
    position: relative;

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    min-width: 145px;

    padding: 8px 15px;

    color: #fff !important;

    background: #101010;

    border-top: 1px solid #606060;
    border-left: 1px solid #606060;
    border-right: 1px solid #222;
    border-bottom: 1px solid #222;

    box-shadow:
        inset 1px 1px 0 #303030,
        inset -1px -1px 0 #000;

    font-family: "Space Mono", monospace;

    font-size: 0.66rem;

    font-weight: 400;

    letter-spacing: 0.18em;

    line-height: 1.2;

    text-align: center;

    text-decoration: none !important;

    cursor: pointer;

    user-select: none;

    visibility: visible !important;

    opacity: 1 !important;

    transition:
        background 0.083333s steps(2, end),
        transform 0.083333s steps(2, end);
}

.full-series-button:hover {
    color: #fff !important;

    background: #171717;

    animation:
        logo-fright 0.25s steps(6, end) infinite;
}

.full-series-button:active {
    background: #080808;

    transform: translateX(0);
}

.season {
    width: 100%;
}

.season-heading {
    display: flex;

    flex-direction: column;
    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    padding: 18px 20px 19px;

    background: rgba(5, 5, 5, 0.74);

    border-top: 1px solid #505050;
    border-left: 1px solid #505050;
    border-right: 1px solid #181818;
    border-bottom: 1px solid #181818;

    box-shadow:
        inset 1px 1px 0 #242424,
        inset -1px -1px 0 #000;

    text-align: center;
}

.season-mark {
    display: none;
}

.season-heading h2 {
    margin: 0;

    color: #fff;

    font-family: "Artisan12", serif;

    font-size: clamp(2.15rem, 5vw, 3.8rem);

    font-weight: 400;

    line-height: 0.95;

    letter-spacing: 0.045em;

    text-align: center;

    text-shadow:
        1px 1px 0 #000;

    transform-origin: center center;
}

.season-heading h2:hover {
    animation:
        logo-fright 0.25s steps(6, end) infinite;
}

.season-heading::after {
    content: "";

    width: 100%;
    height: 1px;

    margin-top: 15px;

    background: #292929;
}

.episode {
    position: relative;

    display: block;

    width: 100%;

    padding: 9px;

    color: inherit;

    text-decoration: none;

    background: rgba(7, 7, 7, 0.84);

    border-top: 1px solid #555;
    border-left: 1px solid #555;
    border-right: 1px solid #181818;
    border-bottom: 1px solid #181818;

    box-shadow:
        inset 1px 1px 0 #232323,
        inset -1px -1px 0 #000;
}

.episode-image {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: #030303;

    border: 1px solid #292929;
}

.episode-image img {
    display: block;

    width: 100%;
    height: auto;

    filter:
        grayscale(100%)
        contrast(1.07)
        brightness(0.98);

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

.episode-image::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.02),
            rgba(255, 255, 255, 0)
        );

    opacity: 0.8;
}

.episode-image::after {
    content: "";

    position: absolute;

    left: -15%;
    top: 0;

    width: 130%;
    height: 2px;

    z-index: 3;

    pointer-events: none;

    background: rgba(255, 255, 255, 0.13);

    opacity: 0;

    transform: translateX(-100%);
}

.episode:hover .episode-image::after {
    animation:
        image-tear 1.75s steps(42, end) infinite;
}

@keyframes image-tear {
    0%,
    45%,
    100% {
        opacity: 0;

        transform: translateX(-100%);
    }

    47% {
        opacity: 0.6;

        transform: translateX(-35%);
    }

    49% {
        opacity: 0.08;

        transform: translateX(5%);
    }

    51% {
        opacity: 0.45;

        transform: translateX(65%);
    }

    53% {
        opacity: 0;

        transform: translateX(100%);
    }
}

.episode:hover .episode-image img {
    transform: scale(1.01);

    filter:
        grayscale(100%)
        contrast(1.18)
        brightness(1.03);
}

.episode-title:hover {
    animation: logo-fright 0.25s steps(6, end) infinite;
}

.episode-info {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 9px;

    padding: 19px 6px 11px;

    text-align: center;
}

.episode-number {
    color: var(--white);

    font-size: 0.76rem;

    letter-spacing: 0.18em;

    text-align: center;
}

.episode-title {
    display: inline-block;

    color: #fff;

    font-family: "Artisan12", serif !important;

    font-size: clamp(2.15rem, 5vw, 3.7rem);

    font-weight: 400;

    line-height: 0.95;

    letter-spacing: 0.035em;

    text-align: center;

    text-shadow:
        1px 1px 0 #000;
}

.description-control {
    position: relative;

    display: flex;

    justify-content: center;

    margin-top: 12px;

    padding: 9px;

    background: rgba(5, 5, 5, 0.76);

    border-top: 1px solid #4e4e4e;
    border-left: 1px solid #4e4e4e;
    border-right: 1px solid #181818;
    border-bottom: 1px solid #181818;

    box-shadow:
        inset 1px 1px 0 #202020,
        inset -1px -1px 0 #000;
}

.description-checkbox {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}

.description-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 145px;

    padding: 8px 15px;

    color: #fff;

    background: #101010;

    border-top: 1px solid #606060;
    border-left: 1px solid #606060;
    border-right: 1px solid #222;
    border-bottom: 1px solid #222;

    box-shadow:
        inset 1px 1px 0 #303030,
        inset -1px -1px 0 #000;

    font-size: 0.66rem;

    letter-spacing: 0.18em;

    cursor: pointer;

    user-select: none;

    text-align: center;

    transition:
        background 0.083333s steps(2, end),
        transform 0.083333s steps(2, end);
}

.description-button:hover {
    background: #171717;

    animation:
        logo-fright 0.25s steps(6, end) infinite;
}

.description-button:active {
    background: #080808;

    transform: translateX(0);
}

@keyframes button-fright {
    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-1px);
    }

    40% {
        transform: translateX(1px);
    }

    60% {
        transform: translateX(-1px);
    }

    80% {
        transform: translateX(1px);
    }

    100% {
        transform: translateX(0);
    }
}

.description-overlay {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.86);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.5s steps(12, end),
        visibility 0s linear 0.5s;
}

.description-checkbox:checked
~ .description-overlay {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transition:
        opacity 0.083333s steps(2, end),
        visibility 0s linear 0s;
}

.description-overlay.is-closing {
    visibility: visible;

    pointer-events: none;

    animation: overlay-close 0.5s steps(12, end) forwards;
}

@keyframes overlay-close {
    0%,
    72% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.description-card {
    position: relative;

    width: min(680px, 100%);

    max-height: min(78vh, 620px);

    overflow: hidden;

    background: #080808;

    border-top: 1px solid #727272;
    border-left: 1px solid #727272;
    border-right: 1px solid #171717;
    border-bottom: 1px solid #171717;

    box-shadow:
        inset 1px 1px 0 #303030,
        inset -1px -1px 0 #000,
        0 18px 50px rgba(0, 0, 0, 0.78);

    clip-path: inset(0 0 100% 0);

    will-change: clip-path;

    transition: clip-path 0.5s steps(12, end);
}

.description-checkbox:checked
~ .description-overlay
.description-card {
    animation:
        tv-open 0.75s steps(18, end) forwards;
}

.description-overlay.is-closing .description-card {
    animation: tv-close 0.5s steps(12, end) forwards;
}

@keyframes tv-open {
    0% {
        clip-path: inset(0 0 100% 0);
    }

    7% {
        clip-path: inset(0 0 96% 0);
    }

    16% {
        clip-path: inset(0 0 86% 0);
    }

    28% {
        clip-path: inset(0 0 71% 0);
    }

    40% {
        clip-path: inset(0 0 55% 0);
    }

    52% {
        clip-path: inset(0 0 39% 0);
    }

    64% {
        clip-path: inset(0 0 23% 0);
    }

    76% {
        clip-path: inset(0 0 11% 0);
    }

    88% {
        clip-path: inset(0 0 3% 0);
    }

    100% {
        clip-path: inset(0 0 0 0);
    }
}

.description-card::after {
    content: "";

    position: absolute;

    left: -8%;

    top: 0;

    width: 116%;

    height: 2px;

    z-index: 10;

    pointer-events: none;

    background: rgba(255, 255, 255, 0.22);

    opacity: 0;

    animation:
        tv-scan-cuts 2.75s steps(66, end) infinite;
}

@keyframes tv-scan-cuts {
    0%,
    9%,
    100% {
        opacity: 0;

        transform: translateY(-10px);
    }

    11% {
        opacity: 0.5;

        transform: translateY(22px);
    }

    13% {
        opacity: 0;

        transform: translateY(55px);
    }

    39% {
        opacity: 0;

        transform: translateY(140px);
    }

    41% {
        opacity: 0.34;

        transform: translateY(160px);
    }

    43% {
        opacity: 0;

        transform: translateY(184px);
    }

    67% {
        opacity: 0;

        transform: translateY(290px);
    }

    69% {
        opacity: 0.28;

        transform: translateY(310px);
    }

    71% {
        opacity: 0;

        transform: translateY(332px);
    }

    87% {
        opacity: 0;

        transform: translateY(420px);
    }

    89% {
        opacity: 0.22;

        transform: translateY(438px);
    }

    91% {
        opacity: 0;

        transform: translateY(460px);
    }
}

.description-card::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 9;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.018) 0,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px,
            transparent 4px
        );

    opacity: 0.38;

    mix-blend-mode: screen;
}

.description-header {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 46px;

    padding: 10px 46px;

    color: #fff;

    background: #111;

    border-bottom: 1px solid #303030;

    font-size: 0.82rem;

    letter-spacing: 0.17em;

    text-align: center;

    overflow: hidden;
}

.description-header::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.015),
            transparent
        );
}

.description-header > span {
    position: relative;

    z-index: 2;

    animation:
        description-header-flicker 5.375s steps(129, end) infinite;
}

@keyframes description-header-flicker {
    0%,
    88%,
    100% {
        opacity: 1;
    }

    89% {
        opacity: 0.7;
    }

    90% {
        opacity: 1;
    }

    94% {
        opacity: 0.84;
    }

    95% {
        opacity: 1;
    }
}

.description-close {
    position: absolute;

    top: 50%;
    right: 9px;

    z-index: 11;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 21px;
    height: 21px;

    color: #fff;

    background: #121212;

    border-top: 1px solid #555;
    border-left: 1px solid #555;
    border-right: 1px solid #222;
    border-bottom: 1px solid #222;

    box-shadow:
        inset 1px 1px 0 #262626,
        inset -1px -1px 0 #000;

    font-family: Arial, sans-serif;

    font-size: 0.9rem;

    line-height: 1;

    transform: translateY(-50%);

    cursor: pointer;
}

.description-close:hover {
    background: #1a1a1a;

    animation:
        close-fright 0.25s steps(6, end) infinite;
}

@keyframes tv-close {
    0% {
        clip-path: inset(0 0 0 0);
    }

    14% {
        clip-path: inset(0 0 7% 0);
    }

    28% {
        clip-path: inset(0 0 31% 0);
    }

    44% {
        clip-path: inset(0 0 53% 0);
    }

    60% {
        clip-path: inset(0 0 74% 0);
    }

    78% {
        clip-path: inset(0 0 91% 0);
    }

    100% {
        clip-path: inset(0 0 100% 0);
    }
}

@keyframes close-fright {
    0%,
    100% {
        transform: translateY(-50%) translateX(0);
    }

    25%,
    75% {
        transform: translateY(-50%) translateX(-1px);
    }

    50% {
        transform: translateY(-50%) translateX(1px);
    }
}

.description-content {
    position: relative;

    z-index: 2;

    padding: 29px 31px 30px;

    background: #080808;
}

.description-content p {
    position: relative;

    z-index: 1;

    margin: 0 0 14px;

    color: #fff;

    font-size: 0.98rem;

    line-height: 1.78;

    opacity: 0;

    transform: translateY(-3px);

    transition:
        opacity 0.083333s steps(2, end),
        transform 0.083333s steps(2, end);
}

.description-content p:last-child {
    margin-bottom: 0;
}

.description-checkbox:checked
~ .description-overlay
.description-card
.description-content
p {
    opacity: 1;

    transform: translateY(0);

    transition:
        opacity 0.083333s steps(2, end),
        transform 0.083333s steps(2, end);
}

.description-checkbox:checked
~ .description-overlay
.description-card
.description-content
p:nth-child(1) {
    transition-delay: 0.22s;
}

.description-checkbox:checked
~ .description-overlay
.description-card
.description-content
p:nth-child(2) {
    transition-delay: 0.30s;
}

.description-checkbox:checked
~ .description-overlay
.description-card
.description-content
p:nth-child(3) {
    transition-delay: 0.38s;
}

.description-checkbox:checked
~ .description-overlay
.description-card
.description-content
p:nth-child(4) {
    transition-delay: 0.46s;
}

.site-footer {
    display: flex;

    justify-content: center;
    align-items: center;

    margin-top: clamp(190px, 23vh, 290px);
    padding: 0 0 8px;

    color: var(--white);

    font-family: "Artisan12", serif;

    font-size: clamp(1rem, 2.1vw, 1.34rem);

    font-weight: 400;

    letter-spacing: 0.075em;

    line-height: 1.2;

    text-align: center;
}

.site-footer span {
    display: inline-block;

    text-shadow: 1px 1px 0 #000;
}

.site-footer:hover span {
    animation: logo-fright 0.25s steps(6, end) infinite;
}

.not-found-page {
    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 34px 20px;

    background:
        linear-gradient(
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0.2)
        ),
        url("/assets/background.webp") center center / cover no-repeat;

    background-color: #050505;
}

.not-found {
    width: min(820px, 100%);

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;
}

.not-found-logo {
    width: min(430px, 72vw);

    margin-bottom: 30px;
}

.terminal {
    width: min(700px, 100%);

    padding: 8px;

    background: #080808;

    border-top: 1px solid #666;
    border-left: 1px solid #666;
    border-right: 1px solid #171717;
    border-bottom: 1px solid #171717;

    box-shadow:
        inset 1px 1px 0 #292929,
        inset -1px -1px 0 #000,
        0 18px 50px rgba(0, 0, 0, 0.72);
}

.terminal-screen {
    position: relative;

    min-height: 330px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 50px 34px;

    overflow: hidden;

    background: #020202;

    border: 1px solid #2d2d2d;

    box-shadow:
        inset 0 0 34px rgba(255, 255, 255, 0.025);
}

.terminal-screen::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.01),
            transparent
        );

    opacity: 0.8;
}

.terminal-screen::after {
    content: "";

    position: absolute;

    left: -20%;
    top: 24%;

    width: 140%;
    height: 1px;

    pointer-events: none;

    background: rgba(255, 255, 255, 0.14);

    opacity: 0;

    animation:
        terminal-interference 4.375s steps(105, end) infinite;
}

@keyframes terminal-interference {
    0%,
    64%,
    100% {
        opacity: 0;

        transform: translateX(-100%);
    }

    66% {
        opacity: 0.42;

        transform: translateX(-20%);
    }

    68% {
        opacity: 0.1;

        transform: translateX(20%);
    }

    70% {
        opacity: 0.35;

        transform: translateX(65%);
    }

    72% {
        opacity: 0;

        transform: translateX(100%);
    }
}

.not-found-code {
    position: relative;

    z-index: 2;

    margin-bottom: 20px;

    color: #fff;

    font-family: "Artisan12", serif;

    font-size: clamp(6rem, 15vw, 10rem);

    line-height: 0.72;

    text-shadow:
        1px 1px 0 #000;

    animation:
        terminal-number 5.75s steps(138, end) infinite;
}

@keyframes terminal-number {
    0%,
    86%,
    100% {
        opacity: 1;
    }

    87% {
        opacity: 0.7;
    }

    88% {
        opacity: 1;
    }

    89% {
        opacity: 0.82;
    }

    90% {
        opacity: 1;
    }
}

.not-found h1 {
    position: relative;

    z-index: 2;

    margin: 0 0 18px;

    color: #fff;

    font-family: "Artisan12", serif;

    font-size: clamp(2rem, 5vw, 3.5rem);

    font-weight: 400;

    line-height: 0.93;

    letter-spacing: 0.035em;

    text-align: center;

    text-shadow:
        1px 1px 0 #000;
}

.not-found p {
    position: relative;

    z-index: 2;

    max-width: 520px;

    margin: 0 0 28px;

    color: #fff;

    font-size: 0.96rem;

    line-height: 1.78;

    text-align: center;
}

.home-link {
    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 145px;

    padding: 8px 15px;

    color: #fff;

    background: #101010;

    border-top: 1px solid #606060;
    border-left: 1px solid #606060;
    border-right: 1px solid #222;
    border-bottom: 1px solid #222;

    box-shadow:
        inset 1px 1px 0 #303030,
        inset -1px -1px 0 #000;

    font-size: 0.66rem;

    letter-spacing: 0.18em;

    text-decoration: none;

    transition:
        background 0.083333s steps(2, end);
}

.home-link:hover {
    background: #171717;

    animation:
        logo-fright 0.25s steps(6, end) infinite;
}

.home-link:active {
    background: #080808;
}

@media (max-width: 700px) {

    .page {
        width: 94%;

        padding: 28px 0 70px;
    }

    .masthead {
        margin-bottom: 46px;
    }

    .logo {
        width: min(370px, 84vw);
    }

    .series-credit {
        margin-top: 17px;
        padding: 2px 0 3px;

        font-size: clamp(0.86rem, 4vw, 1.05rem);

        letter-spacing: 0.05em;
    }

    .series-default,
    .series-social {
        letter-spacing: 0.05em;
    }

    .series-actions {
        margin-top: 15px;
    }

    .full-series-button {
        min-width: 145px;

        padding: 8px 12px;

        font-size: 0.61rem;

        letter-spacing: 0.15em;
    }

    .season-heading {
        margin-bottom: 13px;

        padding: 16px 12px 17px;
    }

    .season-heading h2 {
        font-size: clamp(1.8rem, 9vw, 2.7rem);
    }

    .episode {
        padding: 7px;
    }

    .episode-info {
        gap: 8px;

        padding: 16px 4px 10px;
    }

    .episode-number {
        font-size: 0.64rem;
    }

    .episode-title {
        font-size: clamp(1.8rem, 8vw, 2.65rem);
    }

    .description-control {
        margin-top: 9px;

        padding: 8px;
    }

    .description-overlay {
        padding: 12px;
    }

    .description-card {
        width: 100%;

        max-height: 86vh;
    }

    .description-header {
        min-height: 40px;

        padding: 9px 38px;

        font-size: 0.7rem;
    }

    .description-content {
        padding: 23px 19px 25px;
    }

    .description-content p {
        font-size: 0.86rem;

        line-height: 1.72;
    }

    .site-footer {
        margin-top: clamp(140px, 20vh, 190px);

        font-size: clamp(0.86rem, 4vw, 1.05rem);
    }

    .not-found-page {
        padding: 20px 12px;
    }

    .not-found-logo {
        width: min(340px, 84vw);

        margin-bottom: 24px;
    }

    .terminal {
        padding: 6px;
    }

    .terminal-screen {
        min-height: 285px;

        padding: 38px 20px;
    }

    .not-found-code {
        font-size: clamp(5rem, 23vw, 7rem);
    }

    .not-found h1 {
        font-size: clamp(1.8rem, 8vw, 2.7rem);
    }

    .not-found p {
        font-size: 0.84rem;

        line-height: 1.7;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo,
    .logo:hover,
    .series-credit.is-frightening,
    .season-heading h2:hover,
    .description-button:hover,
    .full-series-button:hover,
    .description-close:hover,
    .home-link:hover,
    .episode-image::after,
    .description-card::after,
    .description-header > span,
    .terminal-screen::after,
    .not-found-code {
        animation: none !important;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }
}