:root {
    --fandom-page-max-width: 1440px;
    --fandom-content-max-width: 1240px;
    --fandom-reading-width: 72ch;

    --fandom-space-1: 0.25rem;
    --fandom-space-2: 0.5rem;
    --fandom-space-3: 0.75rem;
    --fandom-space-4: 1rem;
    --fandom-space-5: 1.25rem;
    --fandom-space-6: 1.5rem;
    --fandom-space-8: 2rem;
    --fandom-space-10: 2.5rem;
    --fandom-space-12: 3rem;
    --fandom-space-16: 4rem;
    --fandom-space-20: 5rem;
    --fandom-space-24: 6rem;
    --fandom-space-32: 8rem;

    --fandom-radius-sm: 0.75rem;
    --fandom-radius-md: 1rem;
    --fandom-radius-lg: 1.5rem;
    --fandom-radius-xl: 2rem;
    --fandom-radius-full: 9999px;

    --fandom-shadow-sm: 0 10px 24px rgba(15, 15, 15, 0.06);
    --fandom-shadow-md: 0 18px 40px rgba(15, 15, 15, 0.1);
    --fandom-shadow-lg: 0 28px 80px rgba(15, 15, 15, 0.16);
    --fandom-shadow-glow: 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 24px 72px rgba(255, 0, 102, 0.12);

    --fandom-ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
    --fandom-ease-exit: cubic-bezier(0.4, 0, 1, 1);
    --fandom-duration-fast: 180ms;
    --fandom-duration-base: 320ms;
    --fandom-duration-slow: 560ms;
    --fandom-duration-xslow: 900ms;

    --fandom-font-display: var(--font-family, 'DM Sans', sans-serif);
    --fandom-font-body: var(--font-family, 'DM Sans', sans-serif);

    --fandom-text-xs: clamp(0.75rem, 0.72rem + 0.18vw, 0.875rem);
    --fandom-text-sm: clamp(0.875rem, 0.83rem + 0.22vw, 1rem);
    --fandom-text-base: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
    --fandom-text-lg: clamp(1.125rem, 1.02rem + 0.6vw, 1.5rem);
    --fandom-text-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem);
    --fandom-text-2xl: clamp(2rem, 1.3rem + 2vw, 3.25rem);
    --fandom-text-3xl: clamp(2.75rem, 1.6rem + 3.8vw, 5.25rem);
    --fandom-text-hero: clamp(3.25rem, 1.4rem + 5vw, 7rem);

    --fandom-page-bg: #f6f3f0;
    --fandom-page-surface: #ffffff;
    --fandom-page-surface-2: #fcfaf8;
    --fandom-page-surface-3: #f1ece7;
    --fandom-page-border: rgba(22, 18, 15, 0.1);
    --fandom-page-border-strong: rgba(22, 18, 15, 0.16);
    --fandom-page-text: #171311;
    --fandom-page-text-muted: #655c56;
    --fandom-page-text-faint: #9e948d;
    --fandom-page-accent: #ff2b6c;
    --fandom-page-accent-strong: #d91154;
    --fandom-page-accent-soft: rgba(255, 43, 108, 0.12);

    --fandom-primary-text: var(--fandom-page-text);
    --fandom-secondary-text: var(--fandom-page-text-muted);
    --fandom-accent: var(--fandom-page-accent);
    --fandom-muted-text: var(--fandom-page-text-faint);
    --fandom-accent-text: #ffffff;
    --fandom-background: var(--fandom-page-surface);
    --fandom-surface: var(--fandom-page-surface-2);
    --fandom-surface-accent: #fff1f6;
    --fandom-border: rgba(22, 18, 15, 0.1);
    --fandom-overlay: rgba(16, 10, 14, 0.2);
    --fandom-shadow-color: rgba(255, 43, 108, 0.18);
    --fandom-gradient-from: #ff2b6c;
    --fandom-gradient-to: #ff986f;
    --fandom-badge-background: rgba(255, 43, 108, 0.14);
    --fandom-badge-text: #7d103d;

    --fandom-grid-gap: clamp(var(--fandom-space-4), 2vw, var(--fandom-space-6));
    --fandom-section-gap: clamp(var(--fandom-space-6), 4vw, var(--fandom-space-12));
    --fandom-section-padding: clamp(var(--fandom-space-8), 5vw, var(--fandom-space-20));
}

[data-theme='dark'] {
    --fandom-page-bg: #0f0c0f;
    --fandom-page-surface: #151116;
    --fandom-page-surface-2: #19141a;
    --fandom-page-surface-3: #231c24;
    --fandom-page-border: rgba(255, 255, 255, 0.08);
    --fandom-page-border-strong: rgba(255, 255, 255, 0.14);
    --fandom-page-text: #f7f1f5;
    --fandom-page-text-muted: #c1b5bc;
    --fandom-page-text-faint: #857983;
    --fandom-page-accent: #ff5e96;
    --fandom-page-accent-strong: #ff2f76;
    --fandom-page-accent-soft: rgba(255, 94, 150, 0.16);

    --fandom-primary-text: var(--fandom-page-text);
    --fandom-secondary-text: var(--fandom-page-text-muted);
    --fandom-accent: var(--fandom-page-accent);
    --fandom-muted-text: var(--fandom-page-text-faint);
    --fandom-accent-text: #170d12;
    --fandom-background: var(--fandom-page-surface);
    --fandom-surface: var(--fandom-page-surface-2);
    --fandom-surface-accent: #271824;
    --fandom-border: rgba(255, 255, 255, 0.08);
    --fandom-overlay: rgba(0, 0, 0, 0.32);
    --fandom-shadow-color: rgba(255, 94, 150, 0.22);
    --fandom-gradient-from: #ff5e96;
    --fandom-gradient-to: #ffb06a;
    --fandom-badge-background: rgba(255, 94, 150, 0.18);
    --fandom-badge-text: #ffd7e6;

    --fandom-shadow-sm: 0 12px 24px rgba(0, 0, 0, 0.22);
    --fandom-shadow-md: 0 22px 52px rgba(0, 0, 0, 0.28);
    --fandom-shadow-lg: 0 30px 100px rgba(0, 0, 0, 0.4);
    --fandom-shadow-glow: 0 0 0 1px rgba(255, 255, 255, 0.06),
        0 26px 86px rgba(255, 94, 150, 0.16);
}

.fandom-theme-scope {
    color: var(--fandom-primary-text);
}

.fandom-surface-card {
    position: relative;
    border: 1px solid var(--fandom-border);
    border-radius: var(--fandom-radius-lg);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--fandom-background) 92%, white 8%) 0%,
            var(--fandom-surface) 100%);
    box-shadow: var(--fandom-shadow-sm);
}

.fandom-surface-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--fandom-gradient-from) 14%, transparent) 0%,
            transparent 38%,
            color-mix(in srgb, var(--fandom-gradient-to) 8%, transparent) 100%);
    opacity: 0.75;
    pointer-events: none;
}

.fandom-title {
    margin: 0;
    font-family: var(--fandom-font-display);
    font-size: var(--fandom-text-xl);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--fandom-primary-text);
}

.fandom-title--hero {
    font-size: var(--fandom-text-hero);
    line-height: 0.95;
}

.fandom-title--chapter {
    font-size: var(--fandom-text-3xl);
}

.fandom-title--section {
    font-size: var(--fandom-text-2xl);
}

.fandom-copy {
    margin: 0;
    max-width: var(--fandom-reading-width);
    font-size: var(--fandom-text-base);
    line-height: 1.75;
    color: var(--fandom-secondary-text);
}

.fandom-copy--compact {
    font-size: var(--fandom-text-sm);
    line-height: 1.6;
}

.fandom-kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--fandom-space-2);
    margin: 0;
    font-size: var(--fandom-text-xs);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fandom-accent);
}

.fandom-kicker::before {
    content: '';
    width: 0.75rem;
    height: 0.75rem;
    border-radius: var(--fandom-radius-full);
    background:
        radial-gradient(circle at 35% 35%, #ffffff 0%, rgba(255, 255, 255, 0.28) 25%, transparent 26%),
        linear-gradient(135deg, var(--fandom-gradient-from) 0%, var(--fandom-gradient-to) 100%);
    box-shadow: 0 0 24px color-mix(in srgb, var(--fandom-accent) 25%, transparent);
    flex-shrink: 0;
}

.fandom-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0 var(--fandom-space-3);
    border-radius: var(--fandom-radius-full);
    border: 1px solid color-mix(in srgb, var(--fandom-badge-text) 12%, transparent);
    background: var(--fandom-badge-background);
    color: var(--fandom-badge-text);
    font-size: var(--fandom-text-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.fandom-eyebrow-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fandom-space-3);
}

.fandom-shell {
    position: relative;
    max-width: var(--fandom-page-max-width);
    margin-inline: auto;
    padding-inline: clamp(var(--fandom-space-4), 3vw, var(--fandom-space-8));
}

.fandom-section {
    position: relative;
    padding-block: var(--fandom-section-padding);
}

.fandom-section__inner {
    max-width: var(--fandom-content-max-width);
    margin-inline: auto;
}

.fandom-stack {
    display: flex;
    flex-direction: column;
    gap: var(--fandom-section-gap);
}

.fandom-grid {
    display: grid;
    gap: var(--fandom-grid-gap);
}

.fandom-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fandom-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fandom-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fandom-pill-button,
.fandom-primary-button,
.fandom-secondary-button,
.fandom-ghost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fandom-space-2);
    min-height: 2.875rem;
    padding: 0 var(--fandom-space-5);
    border-radius: var(--fandom-radius-full);
    text-decoration: none;
    font-size: var(--fandom-text-sm);
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition:
        transform var(--fandom-duration-fast) var(--fandom-ease-standard),
        box-shadow var(--fandom-duration-fast) var(--fandom-ease-standard),
        border-color var(--fandom-duration-fast) var(--fandom-ease-standard),
        background-color var(--fandom-duration-fast) var(--fandom-ease-standard),
        color var(--fandom-duration-fast) var(--fandom-ease-standard),
        opacity var(--fandom-duration-fast) var(--fandom-ease-standard);
}

.fandom-primary-button {
    border: 1px solid var(--fandom-accent);
    background: linear-gradient(135deg,
            var(--fandom-gradient-from) 0%,
            var(--fandom-gradient-to) 100%);
    color: var(--fandom-accent-text);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--fandom-shadow-color) 78%, transparent);
}

.fandom-primary-button:hover,
.fandom-primary-button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 22px 42px color-mix(in srgb, var(--fandom-shadow-color) 92%, transparent);
}

.fandom-primary-button:active {
    transform: translateY(0);
}

.fandom-secondary-button {
    border: 1px solid var(--fandom-border);
    background: color-mix(in srgb, var(--fandom-surface) 90%, white 10%);
    color: var(--fandom-primary-text);
    box-shadow: var(--fandom-shadow-sm);
}

.fandom-secondary-button:hover,
.fandom-secondary-button:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--fandom-accent) 36%, var(--fandom-border));
    box-shadow: var(--fandom-shadow-md);
}

.fandom-secondary-button:active {
    transform: translateY(0);
}

.fandom-ghost-button {
    border: 1px solid transparent;
    background: transparent;
    color: var(--fandom-accent);
}

.fandom-ghost-button:hover,
.fandom-ghost-button:focus-visible {
    background: color-mix(in srgb, var(--fandom-accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--fandom-accent) 18%, transparent);
}

.fandom-pill-button {
    min-height: 2.5rem;
    padding-inline: var(--fandom-space-4);
    border: 1px solid var(--fandom-border);
    background: color-mix(in srgb, var(--fandom-background) 92%, white 8%);
    color: var(--fandom-primary-text);
}

.fandom-pill-button:hover,
.fandom-pill-button:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--fandom-accent) 24%, var(--fandom-border));
    background: color-mix(in srgb, var(--fandom-surface-accent) 82%, white 18%);
}

.fandom-media-frame {
    position: relative;
    overflow: hidden;
    border-radius: calc(var(--fandom-radius-lg) - 0.25rem);
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--fandom-gradient-from) 16%, var(--fandom-background)) 0%,
            color-mix(in srgb, var(--fandom-gradient-to) 10%, var(--fandom-surface)) 100%);
    isolation: isolate;
}

.fandom-media-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--fandom-overlay) 100%);
    z-index: 1;
    pointer-events: none;
}

.fandom-media-frame::after {
    content: '';
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--fandom-gradient-from) 24%, transparent) 0%, transparent 34%),
        radial-gradient(circle at 80% 22%, color-mix(in srgb, var(--fandom-gradient-to) 22%, transparent) 0%, transparent 32%);
    opacity: 0.8;
    mix-blend-mode: screen;
    z-index: 0;
    pointer-events: none;
}

.fandom-media-frame>img,
.fandom-media-frame>video,
.fandom-media-frame__fallback {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.fandom-media-frame>img,
.fandom-media-frame>video {
    object-fit: cover;
}

.fandom-media-frame__fallback {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--fandom-space-2);
    min-height: 100%;
    padding: var(--fandom-space-6);
}

.fandom-media-frame__fallback-kicker {
    margin: 0;
    font-size: var(--fandom-text-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fandom-accent);
}

.fandom-media-frame__fallback-title {
    margin: 0;
    font-family: var(--fandom-font-display);
    font-size: var(--fandom-text-xl);
    font-weight: 800;
    line-height: 1.1;
    color: var(--fandom-primary-text);
}

.fandom-media-frame--contain>img,
.fandom-media-frame--contain>video {
    object-fit: contain;
    padding: var(--fandom-space-6);
}

.fandom-media-frame--tinted::before {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--fandom-gradient-from) 14%, transparent) 0%,
            color-mix(in srgb, var(--fandom-overlay) 92%, transparent) 100%);
}

.fandom-media-frame--duotone>img,
.fandom-media-frame--duotone>video {
    filter: grayscale(0.1) contrast(1.06) saturate(0.9);
    mix-blend-mode: luminosity;
}

.fandom-clickable {
    transition:
        transform var(--fandom-duration-fast) var(--fandom-ease-standard),
        box-shadow var(--fandom-duration-fast) var(--fandom-ease-standard),
        border-color var(--fandom-duration-fast) var(--fandom-ease-standard),
        background-color var(--fandom-duration-fast) var(--fandom-ease-standard),
        color var(--fandom-duration-fast) var(--fandom-ease-standard),
        opacity var(--fandom-duration-fast) var(--fandom-ease-standard);
}

.fandom-clickable:hover,
.fandom-clickable:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--fandom-shadow-md);
}

.fandom-clickable:active {
    transform: translateY(0);
}

.fandom-divider {
    width: 100%;
    height: 1px;
    border: 0;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--fandom-page-border) 12%,
            var(--fandom-page-border) 88%,
            transparent 100%);
}

.fandom-noise-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.065;
    mix-blend-mode: soft-light;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.9) 0.35px, transparent 0.5px),
        radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.85) 0.4px, transparent 0.55px),
        radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.7) 0.25px, transparent 0.45px);
    background-size: 18px 18px, 24px 24px, 20px 20px;
}

.fandom-gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.36;
    pointer-events: none;
    mix-blend-mode: screen;
    background: radial-gradient(circle at center,
            color-mix(in srgb, var(--fandom-gradient-from) 84%, white 16%) 0%,
            color-mix(in srgb, var(--fandom-gradient-to) 48%, transparent) 44%,
            transparent 74%);
}

.fandom-gradient-orb--a {
    width: min(34vw, 24rem);
    height: min(34vw, 24rem);
    top: -8%;
    left: -4%;
}

.fandom-gradient-orb--b {
    width: min(26vw, 18rem);
    height: min(26vw, 18rem);
    right: -2%;
    bottom: -4%;
}

.fandom-reveal-fade {
    opacity: 1;
}

@supports (animation-timeline: view()) {
    .fandom-reveal-fade {
        opacity: 0;
        animation: fandom-reveal-fade linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 70%;
    }
}

@keyframes fandom-reveal-fade {
    to {
        opacity: 1;
    }
}

.fandom-reveal-clip {
    opacity: 1;
}

@supports (animation-timeline: view()) {
    .fandom-reveal-clip {
        clip-path: inset(0 0 100% 0 round var(--fandom-radius-lg));
        animation: fandom-reveal-clip linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 95%;
    }
}

@keyframes fandom-reveal-clip {
    to {
        clip-path: inset(0 0 0 0 round var(--fandom-radius-lg));
    }
}

.fandom-glow-ring {
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--fandom-accent) 24%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--fandom-accent) 12%, transparent),
        0 0 34px color-mix(in srgb, var(--fandom-shadow-color) 54%, transparent);
    opacity: 0;
    transition: opacity var(--fandom-duration-fast) var(--fandom-ease-standard);
}

.fandom-clickable:hover .fandom-glow-ring,
.fandom-clickable:focus-visible .fandom-glow-ring {
    opacity: 1;
}

.fandom-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fandom-space-3);
}

.fandom-count-pill {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding-inline: var(--fandom-space-3);
    border-radius: var(--fandom-radius-full);
    background: color-mix(in srgb, var(--fandom-accent) 12%, transparent);
    color: var(--fandom-accent);
    font-size: var(--fandom-text-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fandom-empty-state {
    display: flex;
    flex-direction: column;
    gap: var(--fandom-space-4);
    padding: clamp(var(--fandom-space-8), 4vw, var(--fandom-space-12));
    border: 1px dashed var(--fandom-page-border-strong);
    border-radius: var(--fandom-radius-lg);
    background: color-mix(in srgb, var(--fandom-page-surface) 92%, white 8%);
}

.fandom-empty-state__title {
    margin: 0;
    font-family: var(--fandom-font-display);
    font-size: var(--fandom-text-xl);
    font-weight: 800;
    line-height: 1.1;
    color: var(--fandom-page-text);
}

.fandom-empty-state__copy {
    margin: 0;
    max-width: 56ch;
    font-size: var(--fandom-text-base);
    line-height: 1.7;
    color: var(--fandom-page-text-muted);
}

.fandom-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
}

@media (max-width: 1100px) {
    .fandom-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fandom-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fandom-title--hero {
        font-size: clamp(2.85rem, 1.5rem + 4.8vw, 5.4rem);
    }

    .fandom-title--chapter {
        font-size: clamp(2.2rem, 1.4rem + 2.8vw, 4rem);
    }
}

@media (max-width: 768px) {

    .fandom-grid--2,
    .fandom-grid--3,
    .fandom-grid--4 {
        grid-template-columns: 1fr;
    }

    .fandom-section {
        padding-block: clamp(var(--fandom-space-8), 10vw, var(--fandom-space-14, 3.5rem));
    }

    .fandom-media-frame__fallback {
        padding: var(--fandom-space-4);
    }

    .fandom-title--hero {
        font-size: clamp(2.35rem, 1.3rem + 5.2vw, 4rem);
        line-height: 0.98;
    }

    .fandom-title--chapter {
        font-size: clamp(1.85rem, 1.2rem + 3vw, 3rem);
    }

    .fandom-title--section {
        font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
    }

    .fandom-primary-button,
    .fandom-secondary-button,
    .fandom-ghost-button,
    .fandom-pill-button {
        width: 100%;
        justify-content: center;
    }

    .fandom-eyebrow-row,
    .fandom-meta-row {
        align-items: flex-start;
    }

    .fandom-gradient-orb--a,
    .fandom-gradient-orb--b {
        opacity: 0.24;
        filter: blur(40px);
    }
}

@media (hover: none) {

    .fandom-clickable:hover,
    .fandom-primary-button:hover,
    .fandom-secondary-button:hover,
    .fandom-ghost-button:hover,
    .fandom-pill-button:hover {
        transform: none;
    }

    .fandom-clickable:active,
    .fandom-primary-button:active,
    .fandom-secondary-button:active,
    .fandom-ghost-button:active,
    .fandom-pill-button:active {
        transform: scale(0.99);
    }
}

@media (prefers-reduced-motion: reduce) {

    .fandom-clickable,
    .fandom-primary-button,
    .fandom-secondary-button,
    .fandom-ghost-button,
    .fandom-pill-button,
    .fandom-glow-ring {
        transition-duration: 0.01ms !important;
    }

    .fandom-gradient-orb,
    .fandom-noise-overlay {
        display: none;
    }

    .fandom-reveal-fade,
    .fandom-reveal-clip {
        opacity: 1 !important;
        animation: none !important;
        clip-path: none !important;
    }
}