/*
Theme Name: BlkScript Network
Theme URI: https://network.blkscript.com
Author: Kevin Marable
Author URI: https://network.blkscript.com
Description: Custom theme for BlkScript Network — independent Black filmmaking and storytelling. Built specifically for podcasts, reviews, and editorial content about Black-led productions.
Version: 2.0.3
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: Proprietary
License URI: 
Text Domain: blkscript
Tags: custom, film, podcast, reviews
*/

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #0a0a0f;
    color: #ffffff;
    line-height: 1.6;
}

:root {
    --color-brand: #6c44cc;
    --color-brand-light: #8b5cf6;
    --color-brand-dark: #4c2d99;
    --color-accent: #ffc857;
    --color-bg: #0a0a0f;
    --color-bg-alt: #15151c;
    --color-bg-card: rgba(255,255,255,0.03);
    --color-text: #ffffff;
    --color-text-muted: #888888;
    --color-text-subtle: #aaaaaa;
    --color-border: rgba(255,255,255,0.08);
    --color-border-strong: rgba(255,255,255,0.15);
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 32px;
    --space-xl: 64px;
    --space-2xl: 128px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;
    --container-max: 1400px;
    --container-padding: 60px;
}

.blkscript-welcome {
    max-width: 800px;
    margin: 100px auto;
    padding: 60px;
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-brand);
    text-align: center;
}

.blkscript-welcome h1 {
    font-size: 36px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, var(--color-text) 0%, var(--color-brand-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.blkscript-welcome p {
    color: var(--color-text-muted);
    font-size: 16px;
    margin-bottom: 10px;
}

/* ============================================================
   SITE HEADER
   ============================================================ */

.site-header {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    background: rgba(10, 10, 15, 0.85);
}

.site-header-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 16px var(--container-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.site-branding {
    flex-shrink: 0;
}

.site-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-decoration: none;
    color: var(--color-text);
    background: linear-gradient(135deg, var(--color-text) 0%, var(--color-brand-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.site-title:hover {
    opacity: 0.85;
}

/* Custom logo support */
.custom-logo-link img {
    max-height: 40px;
    width: auto;
}

/* ============================================================
   MAIN NAVIGATION
   ============================================================ */

.main-navigation {
    flex: 1;
    display: flex;
    justify-content: center;
}

.primary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 30px;
}

.primary-menu li {
    position: relative;
}

.primary-menu a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.2s;
    padding: 8px 0;
    display: block;
}

.primary-menu a:hover,
.primary-menu .current-menu-item a {
    color: var(--color-text);
}

/* Mobile menu toggle */
.menu-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    cursor: pointer;
    color: var(--color-text);
}

.menu-toggle-icon {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--color-text);
    position: relative;
}

.menu-toggle-icon::before,
.menu-toggle-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-text);
}

.menu-toggle-icon::before {
    top: -6px;
}

.menu-toggle-icon::after {
    bottom: -6px;
}

/* ============================================================
   HEADER ACTIONS
   ============================================================ */

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.header-login-link {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 16px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.header-login-link:hover {
    color: var(--color-text);
    border-color: var(--color-brand);
    background: rgba(108, 68, 204, 0.1);
}

.header-user-link img {
    border-radius: 50%;
    border: 2px solid var(--color-brand);
    transition: transform 0.2s;
}

.header-user-link:hover img {
    transform: scale(1.05);
}

/* ============================================================
   SKIP LINK (Accessibility)
   ============================================================ */

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--color-brand);
    clip: auto !important;
    -webkit-clip-path: none;
    clip-path: none;
    color: var(--color-text);
    display: block;
    font-size: 14px;
    font-weight: 700;
    padding: 15px 23px;
    text-decoration: none;
    top: 5px;
    left: 5px;
    z-index: 100000;
}

/* ============================================================
   SITE FOOTER
   ============================================================ */

.site-footer {
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
    padding: 60px 0 30px;
    margin-top: 80px;
}

.site-footer-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.footer-branding {
    text-align: center;
    margin-bottom: 40px;
}

.footer-logo {
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--color-text) 0%, var(--color-brand-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.footer-tagline {
    color: var(--color-text-muted);
    font-size: 14px;
    margin: 0;
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.footer-menu a {
    color: var(--color-text-subtle);
    text-decoration: none;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.2s;
}

.footer-menu a:hover {
    color: var(--color-text);
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid var(--color-border);
}

.footer-copyright {
    color: var(--color-text-subtle);
    font-size: 12px;
    margin: 0;
}

/* ============================================================
   RESPONSIVE - HEADER & FOOTER
   ============================================================ */

@media(max-width: 991px) {
    .site-header-container {
        padding: 14px 30px;
    }
    
    .menu-toggle {
        display: block;
    }
    
    .main-navigation {
        flex: 0;
    }
    
    .primary-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        padding: 20px 30px;
        flex-direction: column;
        gap: 0;
    }
    
    .main-navigation.toggled .primary-menu {
        display: flex;
    }
    
    .primary-menu a {
        padding: 12px 0;
        border-bottom: 1px solid var(--color-border);
    }
    
    .primary-menu li:last-child a {
        border-bottom: none;
    }
    
    :root {
        --container-padding: 30px;
    }
}

@media(max-width: 600px) {
    .site-header-container {
        padding: 12px 20px;
    }
    
    .site-title {
        font-size: 18px;
    }
    
    .header-login-link {
        font-size: 12px;
        padding: 6px 12px;
    }
    
    :root {
        --container-padding: 20px;
    }
}

/* ============================================================
   SINGLE REVIEW PAGE
   ============================================================ */

.review-single-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 40px var(--container-padding) 80px;
}

/* Review Header */
.review-header {
    text-align: center;
    margin-bottom: 50px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--color-border);
}

.review-subject {
    color: var(--color-text-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.review-subject strong {
    color: var(--color-brand-light);
    font-weight: 700;
}

.review-title {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.1;
    margin: 0 0 24px;
    background: linear-gradient(135deg, var(--color-text) 0%, var(--color-brand-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.review-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--color-text-muted);
}

.review-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.review-author img {
    border-radius: 50%;
    border: 2px solid var(--color-brand);
}

.review-author-name {
    font-weight: 600;
    color: var(--color-text-subtle);
}

/* Review Body */
.review-body-wrap {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 50px;
    align-items: start;
}

.review-poster-col {
    position: sticky;
    top: 100px;
}

.review-poster {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    aspect-ratio: 2/3;
    background: var(--color-bg-alt);
}

.review-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.review-content-col {
    min-width: 0;
}

/* Synopsis */
.review-synopsis {
    margin-bottom: 40px;
    padding: 24px;
    background: var(--color-bg-card);
    border-left: 3px solid var(--color-brand);
    border-radius: var(--radius-md);
}

.review-synopsis p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-subtle);
    font-style: italic;
}

.review-section-title {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text-muted);
    margin: 0 0 16px;
}

/* Scores */
.review-scores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}

.review-score-block {
    padding: 20px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.review-score-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text-muted);
    margin-bottom: 12px;
    font-weight: 700;
}

.review-score-block.critic .review-score-label {
    color: var(--color-brand-light);
}

.review-score-block.audience .review-score-label {
    color: var(--color-accent);
}

.review-score-value {
    display: flex;
    align-items: center;
    gap: 10px;
}

.review-score-number {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-text);
}

.review-score-count {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 6px;
}

.blkscript-stars {
    font-size: 16px;
    letter-spacing: 2px;
}

.blkscript-stars .star {
    display: inline-block;
}

/* Body Content */
.review-body-content {
    margin-bottom: 40px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text-subtle);
}

.review-body-content p {
    margin-bottom: 20px;
}

.review-body-content h2,
.review-body-content h3 {
    color: var(--color-text);
    margin: 30px 0 16px;
}

.review-body-content a {
    color: var(--color-brand-light);
}

/* Cast/Crew */
.review-cast-crew {
    margin-bottom: 40px;
}

.review-people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 20px;
}

.review-person {
    text-decoration: none;
    color: inherit;
    text-align: center;
    display: block;
}

.review-person img,
.review-person-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 8px;
    display: block;
    border: 2px solid var(--color-brand);
    background: var(--color-bg-alt);
}

.review-person:hover img {
    border-color: var(--color-brand-light);
}

.review-person-name {
    font-size: 12px;
    color: var(--color-text-subtle);
    display: block;
}

/* Tags */
.review-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.review-tag-chip {
    padding: 6px 14px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    text-decoration: none;
    color: var(--color-text-subtle);
    font-size: 12px;
    transition: all 0.2s;
}

.review-tag-chip:hover {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-text);
}

/* Comments */
.review-comments-section {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid var(--color-border);
}

/* Responsive */
@media(max-width: 991px) {
    .review-body-wrap {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .review-poster-col {
        position: static;
        max-width: 280px;
        margin: 0 auto;
    }
    
    .review-title {
        font-size: 36px;
    }
    
    .review-scores {
        grid-template-columns: 1fr;
    }
}

@media(max-width: 600px) {
    .review-title {
        font-size: 28px;
    }
    
    .review-meta {
        flex-direction: column;
        gap: 10px;
    }
    
    .review-people-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
}

/* ============================================================
   SINGLE PERSON PAGE
   ============================================================ */

.person-single-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 40px var(--container-padding) 80px;
}

/* Header */
.person-header {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 50px;
    margin-bottom: 60px;
    align-items: start;
}

.person-photo {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--color-brand);
    box-shadow: 0 20px 60px rgba(108, 68, 204, 0.3);
}

.person-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.person-photo-placeholder {
    background: linear-gradient(135deg, var(--color-brand-dark), var(--color-brand));
    display: flex;
    align-items: center;
    justify-content: center;
}

.person-photo-placeholder span {
    font-size: 100px;
    font-weight: 800;
    color: var(--color-text);
}

.person-info-col {
    padding-top: 20px;
}

.person-roles {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.person-role-badge {
    background: rgba(108, 68, 204, 0.15);
    color: var(--color-brand-light);
    border: 1px solid var(--color-brand);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.person-name {
    font-size: 52px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.05;
    margin: 0 0 16px;
    background: linear-gradient(135deg, var(--color-text) 0%, var(--color-brand-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.person-meta {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    font-size: 14px;
    color: var(--color-text-subtle);
}

.person-meta-item strong {
    color: var(--color-text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 2px;
}

.person-age {
    color: var(--color-text-muted);
    font-size: 13px;
}

/* Social links */
.person-social {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.person-social-link {
    padding: 8px 16px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    color: var(--color-text-subtle);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s;
}

.person-social-link:hover {
    color: var(--color-text);
    border-color: var(--color-brand);
    background: rgba(108, 68, 204, 0.1);
}

.person-social-link.imdb:hover {
    border-color: #f5c518;
    color: #f5c518;
}

/* Section titles */
.person-section-title {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text-muted);
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}

/* Biography */
.person-biography {
    margin-bottom: 60px;
}

.person-biography-content {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text-subtle);
}

.person-biography-content p {
    margin: 0 0 20px;
}

.person-biography-content h2,
.person-biography-content h3 {
    color: var(--color-text);
    margin: 30px 0 16px;
}

/* Known For */
.person-known-for {
    margin-bottom: 60px;
}

.person-known-for-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 24px;
}

.known-for-card {
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s;
    display: block;
}

.known-for-card:hover {
    transform: translateY(-4px);
}

.known-for-poster {
    aspect-ratio: 2/3;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-alt);
    margin-bottom: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.known-for-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.known-for-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-bg-alt), var(--color-bg-card));
}

.known-for-info {
    padding: 0 4px;
}

.known-for-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 4px;
    line-height: 1.3;
    color: var(--color-text);
}

.known-for-year {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-right: 8px;
}

.known-for-type {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-brand-light);
    font-weight: 700;
}

/* Articles */
.person-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.article-card-mini {
    display: flex;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px;
    transition: all 0.2s;
}

.article-card-mini:hover {
    border-color: var(--color-brand);
    background: rgba(108, 68, 204, 0.05);
}

.article-card-mini-img {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.article-card-mini-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-card-mini-info h4 {
    font-size: 14px;
    margin: 0 0 6px;
    color: var(--color-text);
    line-height: 1.3;
}

.article-card-mini-date {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Responsive */
@media(max-width: 991px) {
    .person-header {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    .person-photo {
        width: 220px;
        height: 220px;
        margin: 0 auto;
    }
    
    .person-info-col {
        padding-top: 0;
    }
    
    .person-name {
        font-size: 40px;
    }
    
    .person-meta,
    .person-roles,
    .person-social {
        justify-content: center;
    }
}

@media(max-width: 600px) {
    .person-name {
        font-size: 32px;
    }
    
    .person-known-for-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    
    .person-articles-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   SINGLE PODCAST EPISODE PAGE
   ============================================================ */

/* Video Player Section */
.episode-player-wrap {
    background: #000;
    border-bottom: 1px solid var(--color-border);
}

.episode-player-container {
    max-width: 1200px;
    margin: 0 auto;
}

.episode-video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
}

.episode-video-embed iframe,
.episode-video-embed video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.episode-audio-only {
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    background: linear-gradient(180deg, var(--color-bg-alt), var(--color-bg));
}

.episode-audio-art {
    width: 280px;
    height: 280px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(108, 68, 204, 0.4);
}

.episode-audio-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.episode-audio-only audio {
    width: 100%;
    max-width: 600px;
}

.episode-no-media {
    padding: 60px 30px;
    text-align: center;
    color: var(--color-text-muted);
}

.episode-no-media img {
    max-width: 320px;
    margin-bottom: 20px;
    border-radius: var(--radius-md);
}

/* Episode Content */
.episode-content-wrap {
    padding: 60px 0 40px;
}

.episode-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Episode Header */
.episode-header {
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--color-border);
}

.episode-meta-top {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.episode-podcast-link {
    color: var(--color-brand-light);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: color 0.2s;
}

.episode-podcast-link:hover {
    color: var(--color-text);
}

.episode-number-badge {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-subtle);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.episode-type-badge {
    background: rgba(255, 200, 87, 0.15);
    color: var(--color-accent);
    border: 1px solid rgba(255, 200, 87, 0.4);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.episode-title {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.15;
    margin: 0 0 16px;
    background: linear-gradient(135deg, var(--color-text) 0%, var(--color-brand-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.episode-meta-bottom {
    color: var(--color-text-muted);
    font-size: 13px;
}

.episode-meta-separator {
    margin: 0 10px;
    color: var(--color-text-subtle);
}

/* Sections */
.episode-section-title {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text-muted);
    margin: 0 0 16px;
}

.episode-topics {
    margin-bottom: 50px;
    padding: 24px;
    background: var(--color-bg-card);
    border-left: 3px solid var(--color-brand);
    border-radius: var(--radius-md);
}

.episode-topics p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-subtle);
}

/* People */
.episode-people {
    margin-bottom: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.episode-people-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.episode-person {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    padding: 8px 14px 8px 8px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    transition: all 0.2s;
}

.episode-person:hover {
    border-color: var(--color-brand);
    background: rgba(108, 68, 204, 0.05);
}

.episode-person img,
.episode-person-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-bg-alt);
}

.episode-person-placeholder {
    border: 2px dashed var(--color-border-strong);
}

.episode-person span {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
}

/* Show Notes */
.episode-show-notes {
    margin-bottom: 50px;
}

.episode-show-notes-content {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text-subtle);
}

.episode-show-notes-content p {
    margin: 0 0 20px;
}

.episode-show-notes-content a {
    color: var(--color-brand-light);
}

.episode-show-notes-content h2,
.episode-show-notes-content h3 {
    color: var(--color-text);
    margin: 30px 0 16px;
}

/* Comments */
.episode-comments {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid var(--color-border);
}

/* Responsive */
@media(max-width: 768px) {
    .episode-title {
        font-size: 28px;
    }
    
    .episode-people {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .episode-audio-art {
        width: 200px;
        height: 200px;
    }
    
    .episode-content-wrap {
        padding: 40px 0 30px;
    }
}

/* ============================================================
   SINGLE PODCAST SHOW PAGE
   ============================================================ */

/* Hero */
.podcast-hero {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-alt);
}

.podcast-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(30px) brightness(0.4);
    opacity: 0.6;
    z-index: 1;
    transform: scale(1.1);
}

.podcast-hero-overlay {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, rgba(10,10,15,0.6) 0%, rgba(10,10,15,0.95) 100%);
}

.podcast-hero-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 80px var(--container-padding);
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 50px;
    align-items: center;
}

.podcast-hero-art {
    width: 320px;
    height: 320px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

.podcast-hero-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.podcast-hero-art-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-brand-dark), var(--color-brand));
    display: flex;
    align-items: center;
    justify-content: center;
}

.podcast-hero-art-placeholder span {
    font-size: 120px;
    font-weight: 800;
    color: var(--color-text);
}

.podcast-hero-info {
    padding-top: 20px;
}

.podcast-status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-subtle);
}

.podcast-status-badge.status-active {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.4);
    color: #4ade80;
}

.podcast-status-badge.status-hiatus,
.podcast-status-badge.status-upcoming {
    background: rgba(255, 200, 87, 0.15);
    border-color: rgba(255, 200, 87, 0.4);
    color: var(--color-accent);
}

.podcast-status-badge.status-completed,
.podcast-status-badge.status-ended {
    background: rgba(156, 163, 175, 0.15);
    border-color: rgba(156, 163, 175, 0.4);
    color: var(--color-text-subtle);
}

.podcast-title {
    font-size: 56px;
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.05;
    margin: 0 0 16px;
    background: linear-gradient(135deg, var(--color-text) 0%, var(--color-brand-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.podcast-tagline {
    font-size: 18px;
    color: var(--color-text-subtle);
    margin: 0 0 24px;
    line-height: 1.5;
}

.podcast-stats {
    display: flex;
    gap: 30px;
    margin-bottom: 24px;
    color: var(--color-text-subtle);
    font-size: 13px;
}

.podcast-stat strong {
    color: var(--color-text);
    font-weight: 700;
    margin-right: 4px;
}

/* Platform links */
.podcast-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.podcast-platform-link {
    padding: 10px 18px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    color: var(--color-text-subtle);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s;
}

.podcast-platform-link:hover {
    color: var(--color-text);
    border-color: var(--color-brand);
    background: rgba(108, 68, 204, 0.1);
}

.podcast-platform-link.apple:hover { border-color: #b04ed6; color: #d68ef8; }
.podcast-platform-link.spotify:hover { border-color: #1ed760; color: #1ed760; }
.podcast-platform-link.youtube:hover { border-color: #ff0000; color: #ff5050; }

/* Body */
.podcast-body {
    padding: 60px 0;
}

.podcast-body-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.podcast-section-title {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text-muted);
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}

.podcast-description {
    margin-bottom: 60px;
}

.podcast-description-content {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text-subtle);
}

.podcast-description-content p {
    margin: 0 0 20px;
}

/* Hosts */
.podcast-hosts {
    margin-bottom: 60px;
}

.podcast-hosts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.podcast-host-card {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

.podcast-host-card:hover {
    border-color: var(--color-brand);
    background: rgba(108, 68, 204, 0.05);
    transform: translateY(-2px);
}

.podcast-host-photo {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--color-brand);
}

.podcast-host-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.podcast-host-placeholder {
    background: linear-gradient(135deg, var(--color-brand-dark), var(--color-brand));
    display: flex;
    align-items: center;
    justify-content: center;
}

.podcast-host-placeholder span {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-text);
}

.podcast-host-info h3 {
    margin: 0 0 6px;
    font-size: 16px;
    color: var(--color-text);
}

.podcast-host-info p {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Episodes List */
.podcast-episodes-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.podcast-episode-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 20px;
    padding: 16px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

.podcast-episode-row:hover {
    border-color: var(--color-brand);
    background: rgba(108, 68, 204, 0.05);
    transform: translateX(4px);
}

.podcast-episode-thumb {
    width: 160px;
    aspect-ratio: 16/9;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-bg-alt);
}

.podcast-episode-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.podcast-episode-info {
    padding: 4px 0;
}

.podcast-episode-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.podcast-episode-number {
    color: var(--color-brand-light);
    font-weight: 700;
}

.podcast-episode-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 6px;
    line-height: 1.3;
}

.podcast-episode-excerpt {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Responsive */
@media(max-width: 991px) {
    .podcast-hero-container {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
        padding: 50px var(--container-padding);
    }
    
    .podcast-hero-art {
        width: 240px;
        height: 240px;
        margin: 0 auto;
    }
    
    .podcast-hero-info {
        padding-top: 0;
    }
    
    .podcast-title {
        font-size: 40px;
    }
    
    .podcast-stats,
    .podcast-platforms {
        justify-content: center;
    }
}

@media(max-width: 600px) {
    .podcast-title {
        font-size: 32px;
    }
    
    .podcast-episode-row {
        grid-template-columns: 100px 1fr;
        gap: 12px;
    }
    
    .podcast-episode-thumb {
        width: 100px;
    }
}

/* ============================================================
   SINGLE MEDIA ARTICLE PAGE
   ============================================================ */

/* Article Header */
.article-header {
    padding: 60px 0 30px;
    text-align: center;
}

.article-header-container {
    max-width: 850px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.article-meta-top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.article-type-badge {
    background: rgba(108, 68, 204, 0.15);
    border: 1px solid var(--color-brand);
    color: var(--color-brand-light);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.article-category-link {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: color 0.2s;
}

.article-category-link:hover {
    color: var(--color-text);
}

.article-title {
    font-size: 52px;
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin: 0 0 20px;
    color: var(--color-text);
}

.article-subtitle {
    font-size: 22px;
    color: var(--color-text-subtle);
    line-height: 1.4;
    margin: 0 0 30px;
    font-weight: 300;
}

.article-meta-bottom {
    display: flex;
    justify-content: center;
}

.article-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.article-author img {
    border-radius: 50%;
    border: 2px solid var(--color-brand);
}

.article-author-info {
    text-align: left;
    display: flex;
    flex-direction: column;
}

.article-author-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
}

.article-author-date {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* Featured Image */
.article-featured-image {
    max-width: 1200px;
    margin: 0 auto 50px;
    padding: 0 var(--container-padding);
}

.article-featured-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    display: block;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.article-image-caption {
    margin-top: 12px;
    font-size: 13px;
    color: var(--color-text-muted);
    text-align: center;
    font-style: italic;
}

/* Article Body */
.article-body {
    padding-bottom: 60px;
}

.article-body-container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Pull Quote */
.article-pull-quote {
    margin: 40px 0;
    padding: 30px 30px 30px 50px;
    border-left: 4px solid var(--color-brand);
    background: var(--color-bg-card);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: 24px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--color-text);
    font-style: italic;
    position: relative;
}

.article-pull-quote::before {
    content: '"';
    position: absolute;
    top: 10px;
    left: 14px;
    font-size: 60px;
    color: var(--color-brand);
    line-height: 1;
    font-family: Georgia, serif;
}

/* Article Content */
.article-content {
    font-size: 18px;
    line-height: 1.8;
    color: var(--color-text-subtle);
}

.article-content p {
    margin: 0 0 24px;
}

.article-content h2 {
    font-size: 32px;
    color: var(--color-text);
    margin: 50px 0 20px;
    line-height: 1.2;
}

.article-content h3 {
    font-size: 24px;
    color: var(--color-text);
    margin: 40px 0 16px;
}

.article-content a {
    color: var(--color-brand-light);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.article-content a:hover {
    color: var(--color-text);
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: 30px 0;
}

.article-content blockquote {
    margin: 30px 0;
    padding: 20px 30px;
    border-left: 3px solid var(--color-brand);
    background: var(--color-bg-card);
    font-style: italic;
    color: var(--color-text);
}

.article-content ul,
.article-content ol {
    margin: 0 0 24px;
    padding-left: 24px;
}

.article-content li {
    margin-bottom: 8px;
}

/* Related sections */
.article-related {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid var(--color-border);
}

.article-related-title {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text-muted);
    margin: 0 0 20px;
}

.article-related-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.article-related-person {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    padding: 8px 14px 8px 8px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    transition: all 0.2s;
}

.article-related-person:hover {
    border-color: var(--color-brand);
    background: rgba(108, 68, 204, 0.05);
}

.article-related-person img,
.article-related-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-bg-alt);
}

.article-related-person span {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
}

/* Related works (movies/shows) */
.article-related-works {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}

.article-related-work {
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s;
    display: block;
}

.article-related-work:hover {
    transform: translateY(-3px);
}

.article-related-poster {
    aspect-ratio: 2/3;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-bg-alt);
    margin-bottom: 8px;
}

.article-related-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-related-info h4 {
    font-size: 13px;
    margin: 0 0 4px;
    color: var(--color-text);
    line-height: 1.3;
}

.article-related-info span {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Comments */
.article-comments {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid var(--color-border);
}

/* Responsive */
@media(max-width: 768px) {
    .article-header {
        padding: 40px 0 20px;
    }
    
    .article-title {
        font-size: 32px;
    }
    
    .article-subtitle {
        font-size: 18px;
    }
    
    .article-content {
        font-size: 16px;
    }
    
    .article-pull-quote {
        font-size: 18px;
        padding: 20px 20px 20px 40px;
    }
    
    .article-content h2 {
        font-size: 24px;
    }
    
    .article-content h3 {
        font-size: 20px;
    }
}

/* ============================================================
   SINGLE MOVIE / TV SHOW PAGE
   ============================================================ */

/* Hero */
.movie-hero {
    position: relative;
    overflow: hidden;
    min-height: 600px;
    background: var(--color-bg-alt);
}

.movie-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(40px) brightness(0.4);
    opacity: 0.6;
    z-index: 1;
    transform: scale(1.15);
}

.movie-hero-overlay {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, rgba(10,10,15,0.6) 0%, rgba(10,10,15,0.95) 100%);
    min-height: 600px;
    display: flex;
    align-items: center;
}

.movie-hero-container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 60px var(--container-padding);
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 50px;
    align-items: center;
}

.movie-poster {
    aspect-ratio: 2/3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
    background: var(--color-bg-alt);
}

.movie-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.movie-poster-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.movie-info-col {
    color: var(--color-text);
}

.movie-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.movie-genre-tag {
    padding: 4px 12px;
    background: rgba(108, 68, 204, 0.15);
    border: 1px solid var(--color-brand);
    color: var(--color-brand-light);
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: var(--radius-full);
    transition: all 0.2s;
}

.movie-genre-tag:hover {
    background: var(--color-brand);
    color: var(--color-text);
}

.movie-title {
    font-size: 56px;
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.05;
    margin: 0 0 12px;
    background: linear-gradient(135deg, var(--color-text) 0%, var(--color-brand-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.movie-tagline {
    font-size: 18px;
    font-style: italic;
    color: var(--color-text-subtle);
    margin: 0 0 20px;
}

.movie-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    color: var(--color-text-muted);
    font-size: 14px;
    margin-bottom: 24px;
}

.movie-meta-separator {
    color: var(--color-text-subtle);
}

.movie-rating-badge {
    padding: 2px 8px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: 0.5px;
}

.movie-synopsis {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-subtle);
    margin: 0 0 30px;
    max-width: 700px;
}

.movie-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.movie-btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: all 0.2s;
}

.movie-btn-primary {
    background: var(--color-brand);
    color: var(--color-text);
    border: 1px solid var(--color-brand);
}

.movie-btn-primary:hover {
    background: var(--color-brand-light);
    border-color: var(--color-brand-light);
}

.movie-btn-secondary {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
}

.movie-btn-secondary:hover {
    border-color: var(--color-brand);
    background: rgba(108, 68, 204, 0.1);
}

/* Body */
.movie-body {
    padding: 60px 0;
}

.movie-body-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.movie-credits-block {
    margin-bottom: 60px;
}

.movie-section-title {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text-muted);
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}

.movie-credits-subtitle {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-brand-light);
    margin: 20px 0 16px;
}

/* People grid */
.movie-people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 20px;
}

.movie-person-card {
    text-decoration: none;
    color: inherit;
    text-align: center;
    transition: transform 0.2s;
}

.movie-person-card:hover {
    transform: translateY(-4px);
}

.movie-person-card img,
.movie-person-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 10px;
    display: block;
    border: 2px solid var(--color-brand);
    background: var(--color-bg-alt);
}

.movie-person-card span {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
}

/* Companies grid */
.movie-companies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px;
}

.movie-company-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    padding: 16px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all 0.2s;
}

.movie-company-card:hover {
    border-color: var(--color-brand);
    background: rgba(108, 68, 204, 0.05);
}

.movie-company-card img {
    max-width: 120px;
    max-height: 70px;
    object-fit: contain;
    margin-bottom: 10px;
    border-radius: var(--radius-sm);
}


.movie-company-card span {
    font-size: 12px;
    color: var(--color-text);
    font-weight: 600;
}

/* Streaming links */
.movie-streaming-links {
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-text-subtle);
    padding: 20px;
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
}

/* Reviews grid */
.movie-reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.movie-review-card {
    display: block;
    padding: 20px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

.movie-review-card:hover {
    border-color: var(--color-brand);
    transform: translateY(-2px);
}

.movie-review-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--color-text-muted);
}

.movie-review-author {
    font-weight: 600;
}

.movie-review-score {
    color: var(--color-accent);
    font-weight: 700;
}

.movie-review-card h3 {
    font-size: 16px;
    margin: 0 0 8px;
    color: var(--color-text);
    line-height: 1.3;
}

.movie-review-card p {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Responsive */
@media(max-width: 991px) {
    .movie-hero-container {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    .movie-poster {
        max-width: 280px;
        margin: 0 auto;
    }
    
    .movie-title {
        font-size: 40px;
    }
    
    .movie-meta,
    .movie-genres,
    .movie-actions {
        justify-content: center;
    }
}

@media(max-width: 600px) {
    .movie-title {
        font-size: 32px;
    }
    
    .movie-people-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    }
    
    .movie-person-card img,
    .movie-person-placeholder {
        width: 70px;
        height: 70px;
    }
}

/* ============================================================
   TV SHOW SPECIFIC ADDITIONS
   ============================================================ */

.tv-status-badge {
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.tv-status-badge.status-ongoing {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.tv-status-badge.status-ended,
.tv-status-badge.status-cancelled {
    background: rgba(156, 163, 175, 0.15);
    color: var(--color-text-subtle);
    border: 1px solid rgba(156, 163, 175, 0.4);
}

.tv-status-badge.status-hiatus,
.tv-status-badge.status-upcoming {
    background: rgba(255, 200, 87, 0.15);
    color: var(--color-accent);
    border: 1px solid rgba(255, 200, 87, 0.4);
}

.tv-stats {
    display: flex;
    gap: 30px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.tv-stat {
    display: flex;
    flex-direction: column;
}

.tv-stat strong {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1;
}

.tv-stat span:not(strong) {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 4px;
}

@media(max-width: 600px) {
    .tv-stats {
        gap: 20px;
        justify-content: center;
    }
    
    .tv-stat strong {
        font-size: 20px;
    }
}

/* ============================================================
   ARCHIVE PAGES (Listing pages)
   ============================================================ */

.archive-page {
    min-height: 60vh;
}

/* Archive Header */
.archive-header {
    text-align: center;
    padding: 80px 0 60px;
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
}

.archive-header-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.archive-title {
    font-size: 64px;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1.05;
    margin: 0 0 16px;
    background: linear-gradient(135deg, var(--color-text) 0%, var(--color-brand-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.archive-subtitle {
    font-size: 18px;
    color: var(--color-text-subtle);
    margin: 0;
    line-height: 1.5;
}

.archive-body {
    padding: 60px 0;
}

.archive-body-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.archive-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-muted);
    font-size: 16px;
}

/* ============================================================
   REVIEWS GRID
   ============================================================ */

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

.review-card {
    text-decoration: none;
    color: inherit;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}

.review-card:hover {
    border-color: var(--color-brand);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(108, 68, 204, 0.2);
}

.review-card-poster {
    position: relative;
    aspect-ratio: 2/3;
    background: var(--color-bg-alt);
    overflow: hidden;
}

.review-card-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.review-card:hover .review-card-poster img {
    transform: scale(1.05);
}

.review-card-poster-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-brand-dark), var(--color-brand));
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-card-poster-placeholder span {
    font-size: 80px;
    color: rgba(255, 255, 255, 0.3);
}

.review-card-score {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    color: var(--color-accent);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 800;
    border: 1px solid var(--color-accent);
}

.review-card-info {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.review-card-type {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-brand-light);
    margin-bottom: 10px;
}

.review-card-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--color-text);
    line-height: 1.3;
}

.review-card-subject {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0 0 12px;
    font-style: italic;
}

.review-card-excerpt {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-subtle);
    margin: 0 0 16px;
    flex: 1;
}

.review-card-meta {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.review-card-meta-separator {
    margin: 0 8px;
}

/* ============================================================
   PAGINATION
   ============================================================ */

.archive-pagination {
    margin-top: 60px;
    display: flex;
    justify-content: center;
}

.archive-pagination .nav-links {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.archive-pagination .page-numbers {
    display: inline-block;
    padding: 10px 16px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
}

.archive-pagination .page-numbers:hover {
    border-color: var(--color-brand);
    color: var(--color-text);
    background: rgba(108, 68, 204, 0.1);
}

.archive-pagination .page-numbers.current {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-text);
}

.archive-pagination .page-numbers.dots {
    background: transparent;
    border: none;
}

/* Responsive */
@media(max-width: 600px) {
    .archive-title {
        font-size: 40px;
    }
    
    .archive-subtitle {
        font-size: 15px;
    }
    
    .archive-header {
        padding: 50px 0 40px;
    }
    
    .reviews-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 20px;
    }
}

/* ============================================================
   PEOPLE GRID (Talent Database)
   ============================================================ */

.people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 30px;
}

.person-card {
    text-decoration: none;
    color: inherit;
    text-align: center;
    transition: transform 0.2s;
}

.person-card:hover {
    transform: translateY(-4px);
}

.person-card-photo {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 16px;
    border: 3px solid var(--color-brand);
    transition: border-color 0.2s;
    background: var(--color-bg-alt);
}

.person-card:hover .person-card-photo {
    border-color: var(--color-brand-light);
    box-shadow: 0 20px 40px rgba(108, 68, 204, 0.3);
}

.person-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.person-card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-brand-dark), var(--color-brand));
    display: flex;
    align-items: center;
    justify-content: center;
}

.person-card-placeholder span {
    font-size: 64px;
    font-weight: 800;
    color: var(--color-text);
}

.person-card-name {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--color-text);
    line-height: 1.2;
}

.person-card-roles {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-brand-light);
    margin: 0 0 6px;
    font-weight: 600;
}

.person-card-meta {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 0;
}

@media(max-width: 600px) {
    .people-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 20px;
    }
    
    .person-card-name {
        font-size: 14px;
    }
    
    .person-card-roles,
    .person-card-meta {
        font-size: 10px;
    }
}

/* ============================================================
   PODCASTS GRID
   ============================================================ */

.podcasts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.podcast-card {
    text-decoration: none;
    color: inherit;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s;
}

.podcast-card:hover {
    border-color: var(--color-brand);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(108, 68, 204, 0.2);
}

.podcast-card-art {
    position: relative;
    aspect-ratio: 1;
    background: var(--color-bg-alt);
    overflow: hidden;
}

.podcast-card-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.podcast-card:hover .podcast-card-art img {
    transform: scale(1.05);
}

.podcast-card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-brand-dark), var(--color-brand));
    display: flex;
    align-items: center;
    justify-content: center;
}

.podcast-card-placeholder span {
    font-size: 100px;
    font-weight: 800;
    color: var(--color-text);
}

.podcast-card-status {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0.7);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
}

.podcast-card-status.status-active {
    background: rgba(34, 197, 94, 0.85);
    border-color: rgba(34, 197, 94, 0.6);
    color: #ffffff;
}

.podcast-card-status.status-hiatus,
.podcast-card-status.status-upcoming {
    background: rgba(255, 200, 87, 0.85);
    border-color: rgba(255, 200, 87, 0.6);
    color: #000000;
}

.podcast-card-info {
    padding: 20px;
}

.podcast-card-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--color-text);
    line-height: 1.2;
}

.podcast-card-tagline {
    font-size: 14px;
    color: var(--color-text-subtle);
    margin: 0 0 12px;
    line-height: 1.5;
}

.podcast-card-meta {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.podcast-card-meta-separator {
    margin: 0 8px;
}

/* ============================================================
   EPISODES LIST (Archive)
   ============================================================ */

.archive-narrow {
    max-width: 1100px;
}

.episodes-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.episode-list-item {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    padding: 20px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

.episode-list-item:hover {
    border-color: var(--color-brand);
    background: rgba(108, 68, 204, 0.05);
    transform: translateX(4px);
}

.episode-list-thumb {
    position: relative;
    aspect-ratio: 16/9;
    width: 220px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-bg-alt);
}

.episode-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.episode-list-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.85);
    color: var(--color-text);
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
}

.episode-list-info {
    padding: 4px 0;
    display: flex;
    flex-direction: column;
}

.episode-list-meta-top {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.episode-list-podcast {
    color: var(--color-brand-light);
    font-weight: 700;
}

.episode-list-number {
    color: var(--color-text-muted);
    font-weight: 600;
}

.episode-list-type {
    background: rgba(255, 200, 87, 0.15);
    color: var(--color-accent);
    border: 1px solid rgba(255, 200, 87, 0.4);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 700;
}

.episode-list-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--color-text);
    line-height: 1.3;
}

.episode-list-excerpt {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.5;
    flex: 1;
}

.episode-list-date {
    font-size: 12px;
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media(max-width: 768px) {
    .episode-list-item {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .episode-list-thumb {
        width: 100%;
    }
    
    .episode-list-title {
        font-size: 17px;
    }
}

/* ============================================================
   ARTICLES GRID
   ============================================================ */

.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 30px;
}

.article-card {
    text-decoration: none;
    color: inherit;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}

.article-card:hover {
    border-color: var(--color-brand);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(108, 68, 204, 0.2);
}

.article-card-image {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--color-bg-alt);
}

.article-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.article-card:hover .article-card-image img {
    transform: scale(1.05);
}

.article-card-content {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.article-card-type {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-brand-light);
    margin-bottom: 10px;
}

.article-card-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--color-text);
    line-height: 1.25;
}

.article-card-subtitle,
.article-card-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0 0 16px;
    flex: 1;
}

.article-card-subtitle {
    color: var(--color-text-subtle);
    font-weight: 500;
}

.article-card-meta {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}

.article-card-meta-separator {
    margin: 0 8px;
}

@media(max-width: 600px) {
    .articles-grid {
        grid-template-columns: 1fr;
    }
    
    .article-card-title {
        font-size: 18px;
    }
}

/* ============================================================
   CATALOG GRID (Movies / TV Shows)
   ============================================================ */

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 24px;
}

.catalog-card {
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
}

.catalog-card:hover {
    transform: translateY(-4px);
}

.catalog-card-poster {
    position: relative;
    aspect-ratio: 2/3;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-alt);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    margin-bottom: 14px;
    transition: box-shadow 0.2s;
}

.catalog-card:hover .catalog-card-poster {
    box-shadow: 0 20px 50px rgba(108, 68, 204, 0.4);
}

.catalog-card-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.catalog-card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-brand-dark), var(--color-brand));
    display: flex;
    align-items: center;
    justify-content: center;
}

.catalog-card-placeholder span {
    font-size: 80px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.4);
}

.catalog-card-rating {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.85);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.catalog-card-info {
    padding: 0 4px;
}

.catalog-card-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--color-text);
    line-height: 1.3;
}

.catalog-card-meta {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.catalog-card-meta-sep {
    margin: 0 6px;
}

@media(max-width: 600px) {
    .catalog-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 16px;
    }
}

/* ============================================================
   SINGLE PRODUCTION COMPANY PAGE
   ============================================================ */

.company-single-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 60px var(--container-padding) 80px;
}

/* Header */
.company-header {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 60px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--color-border);
}

.company-logo {
    width: 200px;
    height: 200px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.company-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.company-logo-placeholder {
    background: linear-gradient(135deg, var(--color-brand-dark), var(--color-brand));
    padding: 0;
}

.company-logo-placeholder span {
    font-size: 80px;
    font-weight: 800;
    color: var(--color-text);
}

.company-type-badge {
    display: inline-block;
    background: rgba(108, 68, 204, 0.15);
    color: var(--color-brand-light);
    border: 1px solid var(--color-brand);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
}

.company-name {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.05;
    margin: 0 0 20px;
    background: linear-gradient(135deg, var(--color-text) 0%, var(--color-brand-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.company-meta {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--color-text-subtle);
}

.company-meta-item strong {
    color: var(--color-text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 2px;
}

.company-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.company-link {
    padding: 8px 16px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    color: var(--color-text-subtle);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s;
}

.company-link:hover {
    color: var(--color-text);
    border-color: var(--color-brand);
    background: rgba(108, 68, 204, 0.1);
}

/* Section titles */
.company-section-title {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text-muted);
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}

/* Description */
.company-description {
    margin-bottom: 60px;
}

.company-description-content {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text-subtle);
}

.company-description-content p {
    margin: 0 0 20px;
}

/* Key people */
.company-people {
    margin-bottom: 60px;
}

.company-people-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.company-person-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 8px 8px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

.company-person-card:hover {
    border-color: var(--color-brand);
    background: rgba(108, 68, 204, 0.05);
}

.company-person-card img,
.company-person-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-bg-alt);
}

.company-person-card span {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

/* Works sections */
.company-works {
    margin-bottom: 60px;
}

/* Responsive */
@media(max-width: 768px) {
    .company-header {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    .company-logo {
        margin: 0 auto;
    }
    
    .company-name {
        font-size: 36px;
    }
    
    .company-meta,
    .company-links,
    .company-people-grid {
        justify-content: center;
    }
}

/* ============================================================
   COMPANIES GRID (Archive)
   ============================================================ */

.companies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}

.company-card {
    text-decoration: none;
    color: inherit;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}

.company-card:hover {
    border-color: var(--color-brand);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(108, 68, 204, 0.2);
}

.company-card-logo {
    aspect-ratio: 16/10;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-bottom: 1px solid var(--color-border);
}

.company-card-logo img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

.company-card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-brand-dark), var(--color-brand));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.company-card-placeholder span {
    font-size: 64px;
    font-weight: 800;
    color: var(--color-text);
}

.company-card-info {
    padding: 20px;
}

.company-card-name {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--color-text);
    line-height: 1.3;
}

.company-card-type {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-brand-light);
    margin-bottom: 12px;
}

.company-card-meta {
    font-size: 12px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.company-card-meta-sep {
    margin: 0 6px;
}

/* ============================================================
   HOMEPAGE
   ============================================================ */

.home-page {
    /* Override default body margin for full-bleed hero */
}

/* HERO */
.home-hero {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    padding: 80px var(--container-padding);
}

.home-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.home-hero-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(108, 68, 204, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 200, 87, 0.15) 0%, transparent 50%),
        linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
}

.home-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.home-hero-title {
    font-size: 96px;
    font-weight: 800;
    letter-spacing: -3px;
    line-height: 0.95;
    margin: 0 0 24px;
    color: var(--color-text);
}

.home-hero-accent {
    background: linear-gradient(135deg, var(--color-brand-light) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.home-hero-tagline {
    font-size: 20px;
    color: var(--color-text-subtle);
    line-height: 1.5;
    margin: 0 0 36px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.home-hero-cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.home-cta-btn {
    display: inline-block;
    padding: 16px 32px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: all 0.2s;
}

.home-cta-primary {
    background: var(--color-brand);
    color: var(--color-text);
    border: 1px solid var(--color-brand);
}

.home-cta-primary:hover {
    background: var(--color-brand-light);
    border-color: var(--color-brand-light);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(108, 68, 204, 0.4);
}

.home-cta-secondary {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
}

.home-cta-secondary:hover {
    border-color: var(--color-brand);
    background: rgba(108, 68, 204, 0.1);
}

/* HOME SECTIONS */
.home-section {
    padding: 80px 0;
}

.home-section-alt {
    background: var(--color-bg-alt);
}

.home-section-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.home-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
}

.home-section-title {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0;
    color: var(--color-text);
}

.home-section-link {
    color: var(--color-brand-light);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: color 0.2s;
}

.home-section-link:hover {
    color: var(--color-text);
}

.home-talent-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

/* Responsive */
@media(max-width: 768px) {
    .home-hero {
        min-height: 500px;
        padding: 60px var(--container-padding);
    }
    
    .home-hero-title {
        font-size: 64px;
        letter-spacing: -2px;
    }
    
    .home-hero-tagline {
        font-size: 16px;
    }
    
    .home-section {
        padding: 60px 0;
    }
    
    .home-section-title {
        font-size: 24px;
    }
    
    .home-section-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
}

@media(max-width: 480px) {
    .home-hero-title {
        font-size: 48px;
    }
    
    .home-hero-cta {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ============================================================
   SEARCH RESULTS PAGE
   ============================================================ */

.search-results-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-brand-light);
    font-weight: 700;
    margin: 0 0 8px;
}

.search-page-form {
    display: flex;
    gap: 10px;
    max-width: 500px;
    margin: 30px auto 0;
}

.search-page-input {
    flex: 1;
    padding: 14px 20px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 15px;
}

.search-page-input:focus {
    outline: none;
    border-color: var(--color-brand);
}

.search-page-input::placeholder {
    color: var(--color-text-muted);
}

.search-page-submit {
    padding: 14px 28px;
    background: var(--color-brand);
    color: var(--color-text);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: background 0.2s;
}

.search-page-submit:hover {
    background: var(--color-brand-light);
}

/* Results list */
.search-results-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.search-result-item {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

.search-result-item:hover {
    border-color: var(--color-brand);
    background: rgba(108, 68, 204, 0.05);
    transform: translateX(4px);
}

.search-result-thumb {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-bg-alt);
}

.search-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-result-info {
    flex: 1;
    min-width: 0;
}

.search-result-type {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-brand-light);
    margin-bottom: 8px;
}

.search-result-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--color-text);
    line-height: 1.3;
}

.search-result-excerpt {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* Empty state */
.search-empty {
    text-align: center;
    padding: 80px 20px;
}

.search-empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.search-empty h2 {
    font-size: 28px;
    color: var(--color-text);
    margin: 0 0 12px;
}

.search-empty p {
    color: var(--color-text-muted);
    font-size: 16px;
    margin: 0 0 8px;
}

.search-empty-suggestions {
    margin-top: 20px;
}

.search-empty-suggestions a {
    color: var(--color-brand-light);
    text-decoration: none;
}

.search-empty-suggestions a:hover {
    text-decoration: underline;
}

@media(max-width: 600px) {
    .search-result-item {
        flex-direction: column;
    }
    
    .search-result-thumb {
        width: 100%;
        height: 160px;
    }
    
    .search-page-form {
        flex-direction: column;
    }
}

/* ============================================================
   404 ERROR PAGE
   ============================================================ */

.error-404-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px var(--container-padding);
}

.error-404-container {
    max-width: 600px;
    text-align: center;
}

.error-404-code {
    font-size: 140px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -4px;
    background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
}

.error-404-title {
    font-size: 36px;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 16px;
}

.error-404-message {
    font-size: 16px;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0 0 32px;
}

.error-404-search {
    margin: 0 auto 40px;
}

/* Navigation links */
.error-404-links {
    margin-bottom: 40px;
}

.error-404-links-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text-muted);
    margin: 0 0 16px;
    font-weight: 700;
}

.error-404-links-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.error-404-link {
    padding: 8px 16px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    color: var(--color-text-subtle);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
}

.error-404-link:hover {
    border-color: var(--color-brand);
    color: var(--color-text);
    background: rgba(108, 68, 204, 0.1);
}

/* Recent content */
.error-404-recent {
    padding-top: 32px;
    border-top: 1px solid var(--color-border);
}

.error-404-recent-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text-muted);
    margin: 0 0 16px;
    font-weight: 700;
}

.error-404-recent-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.error-404-recent-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all 0.2s;
    text-align: left;
}

.error-404-recent-item:hover {
    border-color: var(--color-brand);
    background: rgba(108, 68, 204, 0.05);
}

.error-404-recent-type {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-brand-light);
    background: rgba(108, 68, 204, 0.15);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
}

.error-404-recent-title {
    font-size: 14px;
    color: var(--color-text);
    font-weight: 600;
}

@media(max-width: 600px) {
    .error-404-code {
        font-size: 100px;
    }
    
    .error-404-title {
        font-size: 28px;
    }
}

/* ============================================================
   TAXONOMY ARCHIVE PAGES
   ============================================================ */

.tax-archive-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-brand-light);
    font-weight: 700;
    margin: 0 0 8px;
}

/* Make role badge links behave like badges */
a.person-role-badge {
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

a.person-role-badge:hover {
    background: var(--color-brand);
    color: var(--color-text);
}

/* ============================================================
   REVIEW INTERACTIVE FEATURES (Phase 2)
   ============================================================ */

/* Action Buttons Row */
.review-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
}

.list-toggle-btn,
.review-like-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    color: var(--color-text-subtle);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.list-toggle-btn:hover,
.review-like-btn:hover {
    border-color: var(--color-brand);
    color: var(--color-text);
}

.list-btn-icon,
.like-btn-icon {
    font-size: 15px;
    line-height: 1;
}

.list-toggle-btn.is-active {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-text);
}

.review-like-btn.is-active {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: #ef4444;
}

.list-toggle-btn.is-loading,
.review-like-btn.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Signed-out state */
.review-actions-signin {
    display: flex;
    align-items: center;
    gap: 16px;
}

.review-like-display {
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 600;
}

.review-signin-prompt {
    color: var(--color-brand-light);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    transition: all 0.2s;
}

.review-signin-prompt:hover {
    border-color: var(--color-brand);
    background: rgba(108, 68, 204, 0.1);
}

/* Interactive Audience Rating Widget */
.audience-rating-widget {
    margin-bottom: 40px;
    padding: 24px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.audience-rating-intro {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0 0 20px;
}

.audience-rating-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    position: relative;
}

.audience-rating-row:last-child {
    border-bottom: none;
}

.audience-rating-label {
    width: 140px;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-subtle);
}

.audience-rating-stars {
    display: flex;
    gap: 4px;
}

.audience-star {
    font-size: 24px;
    color: var(--color-border-strong);
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
    user-select: none;
}

.audience-star:hover {
    transform: scale(1.15);
}

.audience-star.star-hover {
    color: var(--color-accent);
}

.audience-star.star-selected {
    color: var(--color-accent);
}

.audience-rating-saved-msg {
    font-size: 12px;
    font-weight: 700;
    color: #4ade80;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0;
    transition: opacity 0.3s;
    margin-left: auto;
}

.audience-rating-row.rating-saved .audience-rating-saved-msg {
    opacity: 1;
}

.audience-rating-row.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Responsive */
@media(max-width: 600px) {
    .review-actions {
        gap: 8px;
    }
    
    .list-toggle-btn,
    .review-like-btn {
        padding: 8px 14px;
        font-size: 12px;
    }
    
    .audience-rating-row {
        flex-wrap: wrap;
    }
    
    .audience-rating-label {
        width: 100%;
    }
    
    .audience-star {
        font-size: 28px;
    }
}

/* ============================================================
   HOMEPAGE SLIDERS (Phase 2 homepage)
   ============================================================ */

/* Section header with arrows */
.hslider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
    gap: 20px;
}

.hslider-header-left {
    display: flex;
    align-items: baseline;
    gap: 20px;
    flex-wrap: wrap;
}

.hslider-controls {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.hslider-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
    line-height: 1;
}

.hslider-arrow:hover {
    border-color: var(--color-brand);
    background: var(--color-brand);
    color: var(--color-text);
}

.hslider-arrow.is-disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* Slider track */
.hslider-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
}

.hslider-track::-webkit-scrollbar {
    display: none;
}

.hslider-track > * {
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* Slider item widths per type */
.hslider-track .review-card,
.hslider-track .catalog-card {
    width: 240px;
}

.hslider-track .article-card {
    width: 360px;
}

/* ============================================================
   TALENT SPOTLIGHT — Infinite Marquee
   ============================================================ */

.talent-marquee {
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.talent-marquee-track {
    display: flex;
    gap: 30px;
    width: max-content;
    animation: talent-scroll 50s linear infinite;
}

.talent-marquee:hover .talent-marquee-track {
    animation-play-state: paused;
}

@keyframes talent-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.talent-marquee .person-card {
    width: 150px;
    flex-shrink: 0;
}

/* ============================================================
   PODCAST SLIDER (one podcast per slide)
   ============================================================ */

.podcast-slider {
    position: relative;
}

.podcast-slider-viewport {
    position: relative;
    min-height: 300px;
}

.podcast-slide {
    display: none;
}

.podcast-slide.is-active {
    display: block;
    animation: podcast-fade 0.4s ease;
}

@keyframes podcast-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.podcast-slide-inner {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    align-items: start;
}

/* Podcast info card (left) */
.podcast-slide-show {
    text-decoration: none;
    color: inherit;
}

.podcast-slide-cover {
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-alt);
    margin-bottom: 16px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

.podcast-slide-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.podcast-slide-cover-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-brand-dark), var(--color-brand));
    display: flex;
    align-items: center;
    justify-content: center;
}

.podcast-slide-cover-placeholder span {
    font-size: 80px;
    font-weight: 800;
    color: var(--color-text);
}

.podcast-slide-name {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 6px;
    line-height: 1.2;
}

.podcast-slide-tagline {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Episodes column (right) */
.podcast-slide-episodes {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.podcast-slide-ep {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 16px;
    padding: 12px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

.podcast-slide-ep:hover {
    border-color: var(--color-brand);
    background: rgba(108,68,204,0.05);
}

.podcast-slide-ep-thumb {
    width: 120px;
    aspect-ratio: 16/9;
    border-radius: 4px;
    overflow: hidden;
    background: var(--color-bg-alt);
}

.podcast-slide-ep-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.podcast-slide-ep-info {
    min-width: 0;
    align-self: center;
}

.podcast-slide-ep-meta {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-brand-light);
    font-weight: 700;
    margin-bottom: 4px;
}

.podcast-slide-ep-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    line-height: 1.3;
}

/* Podcast slider arrows */
.podcast-slider-controls {
    display: flex;
    gap: 8px;
}

/* Responsive */
@media(max-width: 768px) {
    .podcast-slide-inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .podcast-slide-cover {
        max-width: 220px;
    }
    
    .hslider-track .article-card {
        width: 280px;
    }
    
    .hslider-track .review-card,
    .hslider-track .catalog-card {
        width: 180px;
    }
    
    .talent-marquee-track {
        animation-duration: 35s;
    }
}

/* ============================================================
   HOMEPAGE — REDUCED SECTION PADDING
   ============================================================ */

.home-page .home-section {
    padding: 44px 0;
}

@media(max-width: 768px) {
    .home-page .home-section {
        padding: 32px 0;
    }
}

/* ============================================================
   PRODUCTION COMPANY MARQUEE
   ============================================================ */

.company-marquee-card {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.company-marquee-logo {
    width: 200px;
    height: 120px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-bottom: 12px;
    transition: border-color 0.2s;
}

.company-marquee-card:hover .company-marquee-logo {
    border-color: var(--color-brand);
}

.company-marquee-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.company-marquee-placeholder {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-brand-dark), var(--color-brand));
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.company-marquee-placeholder span {
    font-size: 40px;
    font-weight: 800;
    color: var(--color-text);
}

.company-marquee-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 4px;
    line-height: 1.3;
}

.company-marquee-type {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-brand-light);
    font-weight: 700;
    margin: 0;
}

/* ============================================================
   HOMEPAGE HERO CAROUSEL (Ken Burns)
   ============================================================ */

.hero-carousel {
    position: relative;
    height: 640px;
    overflow: hidden;
    background: var(--color-bg);
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 1;
}

.hero-slide.is-active {
    opacity: 1;
    z-index: 2;
}

/* Backdrop image with Ken Burns zoom */
.hero-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.hero-slide.is-active .hero-slide-bg {
    animation: ken-burns 8s ease-out forwards;
}

@keyframes ken-burns {
    from { transform: scale(1); }
    to   { transform: scale(1.12); }
}

/* Dark gradient overlay so text is readable */
.hero-slide-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(180deg, rgba(10,10,15,0.2) 0%, rgba(10,10,15,0.85) 100%),
        linear-gradient(90deg, rgba(10,10,15,0.8) 0%, transparent 60%);
}

/* Slide content */
.hero-slide-content {
    position: absolute;
    z-index: 3;
    left: 0;
    bottom: 0;
    padding: 0 var(--container-padding) 80px;
    max-width: 700px;
}

.hero-slide-type {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-accent);
    margin-bottom: 12px;
}

.hero-slide-title {
    font-size: 56px;
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.05;
    margin: 0 0 16px;
    color: var(--color-text);
}

.hero-slide-desc {
    font-size: 17px;
    color: var(--color-text-subtle);
    line-height: 1.5;
    margin: 0 0 24px;
}

.hero-slide-btn {
    display: inline-block;
    padding: 14px 30px;
    background: var(--color-brand);
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: all 0.2s;
}

.hero-slide-btn:hover {
    background: var(--color-brand-light);
    transform: translateY(-2px);
}

/* The branded slide (slide 0) reuses the gradient look */
.hero-slide-branded {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-slide-branded .hero-slide-bg {
    background:
        radial-gradient(circle at 20% 30%, rgba(108,68,204,0.4) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255,200,87,0.15) 0%, transparent 50%),
        linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
    animation: none !important;
}

.hero-slide-branded .hero-slide-overlay {
    display: none;
}

.hero-slide-branded .hero-slide-content {
    position: relative;
    bottom: auto;
    left: auto;
    padding: 0 var(--container-padding);
    max-width: 900px;
    text-align: center;
}

.hero-branded-title {
    font-size: 88px;
    font-weight: 800;
    letter-spacing: -3px;
    line-height: 0.95;
    margin: 0 0 20px;
    color: var(--color-text);
}

.hero-branded-accent {
    background: linear-gradient(135deg, var(--color-brand-light) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-branded-tagline {
    font-size: 19px;
    color: var(--color-text-subtle);
    line-height: 1.5;
    margin: 0 auto 32px;
    max-width: 600px;
}

.hero-branded-cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Navigation dots */
.hero-dots {
    position: absolute;
    z-index: 4;
    bottom: 30px;
    right: var(--container-padding);
    display: flex;
    gap: 10px;
}

.hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s;
}

.hero-dot.is-active {
    background: var(--color-accent);
    transform: scale(1.3);
}

/* Arrows */
.hero-arrow {
    position: absolute;
    z-index: 4;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.hero-arrow:hover {
    background: var(--color-brand);
}

.hero-arrow-prev { left: 20px; }
.hero-arrow-next { right: 20px; }

/* Responsive */
@media(max-width: 768px) {
    .hero-carousel {
        height: 480px;
    }
    
    .hero-slide-title {
        font-size: 34px;
    }
    
    .hero-branded-title {
        font-size: 52px;
        letter-spacing: -2px;
    }
    
    .hero-branded-tagline {
        font-size: 16px;
    }
    
    .hero-slide-content {
        padding-bottom: 60px;
    }
    
    .hero-arrow {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
}

/* ============================================================
   COLOR-CODED REVIEW BUTTON (Movie / TV Show)
   ============================================================ */

.movie-btn-review {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text);
}

.review-btn-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

/* Good — green */
.movie-btn-review.rating-good {
    border-color: rgba(34, 197, 94, 0.5);
}
.movie-btn-review.rating-good .review-btn-dot {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}
.movie-btn-review.rating-good:hover {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
}

/* Average — yellow */
.movie-btn-review.rating-average {
    border-color: rgba(255, 200, 87, 0.5);
}
.movie-btn-review.rating-average .review-btn-dot {
    background: var(--color-accent);
    box-shadow: 0 0 8px rgba(255, 200, 87, 0.6);
}
.movie-btn-review.rating-average:hover {
    background: rgba(255, 200, 87, 0.15);
    border-color: var(--color-accent);
}

/* Below average — red */
.movie-btn-review.rating-below {
    border-color: rgba(239, 68, 68, 0.5);
}
.movie-btn-review.rating-below .review-btn-dot {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}
.movie-btn-review.rating-below:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
}

/* ============================================================
   SCRIPT BODY CONTENT
   ============================================================ */

.script-body-content {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text-subtle);
}

.script-body-content p {
    margin: 0 0 20px;
}

/* ============================================================
   PRODUCTION COMPANY — FOUNDERS IN HEADER
   ============================================================ */

.company-founders-row {
    margin-bottom: 60px;
}

.company-founders-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-text-muted);
    font-weight: 700;
    margin: 0 0 10px;
}

.company-founders-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.company-founder-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

.company-founder-chip:hover {
    border-color: var(--color-brand);
    background: rgba(108, 68, 204, 0.05);
}

.company-founder-chip img,
.company-founder-chip .company-founder-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-bg-alt);
    flex-shrink: 0;
}

.company-founder-chip span {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
}

@media(max-width: 768px) {
    .company-founders-list {
        justify-content: center;
    }
}

/* ============================================================
   VIDEO LIGHTBOX
   ============================================================ */

.video-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.video-lightbox-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.video-lightbox-frame {
    position: relative;
    width: 100%;
    max-width: 1100px;
    transform: scale(0.95);
    transition: transform 0.25s ease;
}

.video-lightbox-overlay.is-open .video-lightbox-frame {
    transform: scale(1);
}

.video-lightbox-content {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
    border: 1px solid var(--color-border-strong);
}

.video-lightbox-iframe,
.video-lightbox-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: #000;
}

.video-lightbox-close {
    position: absolute;
    top: -48px;
    right: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.video-lightbox-close:hover {
    background: var(--color-brand);
    border-color: var(--color-brand);
    transform: rotate(90deg);
}

/* Play button overlay on thumbnails */
.video-trigger {
    cursor: pointer;
    position: relative;
    display: block;
}

.video-play-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(108, 68, 204, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 3;
}

.video-trigger:hover .video-play-badge {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--color-brand);
}

.video-play-badge::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 4px;
}

@media(max-width: 600px) {
    .video-lightbox-overlay {
        padding: 20px;
    }
    
    .video-lightbox-close {
        top: -44px;
        width: 36px;
        height: 36px;
        font-size: 20px;
    }
    
    .video-play-badge {
        width: 52px;
        height: 52px;
    }
}

/* ============================================================
   CREDIT TABS (Cast / Crew / Director / etc.)
   ============================================================ */

.credit-tabs {
    margin-bottom: 60px;
}

/* Tab row */
.credit-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 30px;
}

.credit-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    margin-bottom: -1px;
}

.credit-tab:hover {
    color: var(--color-text-subtle);
}

.credit-tab.is-active {
    color: var(--color-text);
    border-bottom-color: var(--color-brand);
}

.credit-tab-count {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    color: var(--color-text-muted);
    font-weight: 600;
}

.credit-tab.is-active .credit-tab-count {
    color: var(--color-brand-light);
}

/* Panels */
.credit-panel {
    display: none;
}

.credit-panel.is-active {
    display: block;
    animation: credit-fade 0.3s ease;
}

@keyframes credit-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media(max-width: 600px) {
    .credit-tab {
        padding: 10px 14px;
        font-size: 11px;
        letter-spacing: 1px;
    }
}

/* ============================================================
   WHERE TO WATCH (compact, in info column)
   ============================================================ */

.watch-where {
    margin-top: 24px;
    position: relative;
}

.watch-where-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-text-muted);
    margin: 0 0 10px;
}

.watch-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.watch-chip {
    display: inline-block;
    padding: 6px 14px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-subtle);
    white-space: nowrap;
}

.watch-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    background: var(--color-brand);
    border: 1px solid var(--color-brand);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
}

.watch-more-btn:hover {
    background: var(--color-brand-light);
}

/* Popout */
.watch-popout {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 10px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: 16px;
    min-width: 240px;
    max-width: 320px;
    z-index: 20;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.watch-popout.is-open {
    display: block;
}

.watch-popout-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-text-muted);
    margin: 0 0 12px;
}

.watch-popout-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.watch-popout-item {
    font-size: 14px;
    color: var(--color-text-subtle);
    padding: 6px 10px;
    background: var(--color-bg-card);
    border-radius: var(--radius-sm);
}

@media(max-width: 991px) {
    .watch-chips {
        justify-content: center;
    }
    
    .watch-popout {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ============================================================
   TV SHOW BINGE PLAYLIST
   ============================================================ */

.tv-playlist {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
    margin-bottom: 60px;
}

/* Player stage */
.tv-playlist-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.tv-playlist-video,
.tv-playlist-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: #000;
}

.tv-playlist-nomedia,
.tv-playlist-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 14px;
}

/* Episode list */
.tv-playlist-list {
    max-height: 480px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
}

.tv-playlist-list::-webkit-scrollbar {
    width: 6px;
}

.tv-playlist-list::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 3px;
}

.tv-playlist-item {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    padding: 8px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.tv-playlist-item:hover {
    border-color: var(--color-brand);
}

.tv-playlist-item.is-playing {
    border-color: var(--color-brand);
    background: rgba(108, 68, 204, 0.12);
}

.tv-playlist-item-thumb {
    position: relative;
    width: 120px;
    aspect-ratio: 16/9;
    border-radius: 4px;
    overflow: hidden;
    background: var(--color-bg-alt);
}

.tv-playlist-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tv-playlist-item-num {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0, 0, 0, 0.85);
    color: var(--color-text);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
}

.tv-playlist-item.is-playing .tv-playlist-now {
    display: block;
}

.tv-playlist-now {
    display: none;
    position: absolute;
    bottom: 4px;
    left: 4px;
    right: 4px;
    background: var(--color-brand);
    color: var(--color-text);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    padding: 2px;
    border-radius: 3px;
}

.tv-playlist-item-info {
    min-width: 0;
    align-self: center;
}

.tv-playlist-item-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 4px;
    line-height: 1.3;
}

.tv-playlist-item-meta {
    font-size: 11px;
    color: var(--color-text-muted);
}

@media(max-width: 991px) {
    .tv-playlist {
        grid-template-columns: 1fr;
    }
    
    .tv-playlist-list {
        max-height: 360px;
    }
}

/* ============================================================
   VERTICAL EPISODE — SINGLE PAGE
   ============================================================ */

.vep-single-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px var(--container-padding) 80px;
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 50px;
    align-items: start;
}

.vep-single-player {
    aspect-ratio: 9 / 16;
    background: #000;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
    position: relative;
}

.vep-single-player video,
.vep-single-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
}

.vep-no-media {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 14px;
}

.vep-single-info {
    padding-top: 10px;
}

.vep-single-show-link {
    color: var(--color-brand-light);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.vep-single-epnum {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 8px 0;
}

.vep-single-title {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.1;
    margin: 0 0 16px;
    color: var(--color-text);
}

.vep-single-synopsis {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-subtle);
    margin: 0 0 20px;
}

.vep-single-content {
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-text-subtle);
    margin-bottom: 24px;
}

/* Vertical catalog cards use a portrait poster */
.vertical-catalog-card .vertical-poster {
    aspect-ratio: 9 / 16;
}

@media(max-width: 768px) {
    .vep-single-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .vep-single-player {
        max-width: 300px;
        margin: 0 auto;
    }
}

/* ============================================================
   VERTICAL SHOW PAGE
   ============================================================ */

.vshow-single-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 60px var(--container-padding) 80px;
}

/* Header */
.vshow-header {
    text-align: center;
    margin-bottom: 50px;
}

.vshow-title {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.05;
    margin: 0 0 12px;
    background: linear-gradient(135deg, var(--color-text) 0%, var(--color-brand-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.vshow-tagline {
    font-size: 18px;
    color: var(--color-text-subtle);
    font-style: italic;
    margin: 0 0 16px;
}

.vshow-synopsis {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-subtle);
    max-width: 700px;
    margin: 0 auto;
}

/* The watch area: player + playlist side by side */
.vshow-watch {
    display: grid;
    grid-template-columns: auto 360px;
    gap: 24px;
    justify-content: center;
    margin-bottom: 40px;
}

/* 9:16 player */
.vshow-player {
    position: relative;
    width: 340px;
    aspect-ratio: 9 / 16;
    background: #000;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.vshow-player video,
.vshow-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
}

.vshow-player-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 14px;
    text-align: center;
    padding: 20px;
}

/* Fullscreen button */
.vshow-fs-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 5;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.vshow-fs-btn:hover {
    background: var(--color-brand);
}

/* Playlist column */
.vshow-playlist {
    display: flex;
    flex-direction: column;
}

.vshow-playlist-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text-muted);
    margin: 0 0 16px;
}

.vshow-playlist-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 540px;
    overflow-y: auto;
    padding-right: 4px;
}

.vshow-playlist-list::-webkit-scrollbar {
    width: 6px;
}

.vshow-playlist-list::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 3px;
}

.vshow-ep {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 12px;
    padding: 8px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.vshow-ep:hover {
    border-color: var(--color-brand);
}

.vshow-ep.is-playing {
    border-color: var(--color-brand);
    background: rgba(108, 68, 204, 0.12);
}

.vshow-ep-thumb {
    position: relative;
    width: 60px;
    aspect-ratio: 9 / 16;
    border-radius: 4px;
    overflow: hidden;
    background: var(--color-bg-alt);
}

.vshow-ep-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vshow-ep-num {
    position: absolute;
    top: 3px;
    left: 3px;
    background: rgba(0,0,0,0.85);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
}

.vshow-ep-info {
    align-self: center;
    min-width: 0;
}

.vshow-ep-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 4px;
    line-height: 1.3;
}

.vshow-ep-now {
    display: none;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-brand-light);
}

.vshow-ep.is-playing .vshow-ep-now {
    display: block;
}

/* ============================================================
   VERTICAL FULL-SCREEN MODULE
   ============================================================ */

.vshow-fs-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.96);
    backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 40px;
}

.vshow-fs-overlay.is-open {
    display: flex;
}

.vshow-fs-player {
    position: relative;
    height: 90vh;
    aspect-ratio: 9 / 16;
    background: #000;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.vshow-fs-player video,
.vshow-fs-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
}

.vshow-fs-playlist {
    width: 320px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vshow-fs-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-strong);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vshow-fs-close:hover {
    background: var(--color-brand);
}

@media(max-width: 991px) {
    .vshow-watch {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    
    .vshow-playlist {
        width: 100%;
        max-width: 400px;
    }
    
    .vshow-fs-overlay {
        flex-direction: column;
        padding: 16px;
    }
    
    .vshow-fs-player {
        height: 70vh;
    }
    
    .vshow-fs-playlist {
        width: 100%;
        max-width: 400px;
        max-height: 20vh;
    }
}

/* ============================================================
   STATIC PAGES (About, Contact, etc.)
   ============================================================ */

.static-page-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 70px var(--container-padding) 90px;
}

.static-page-header {
    margin-bottom: 36px;
}

.static-page-title {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.1;
    margin: 0;
    color: var(--color-text);
}

.static-page-content {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text-subtle);
}

.static-page-content h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text);
    margin: 40px 0 16px;
}

.static-page-content h3 {
    font-size: 21px;
    font-weight: 700;
    color: var(--color-text);
    margin: 30px 0 12px;
}

.static-page-content p {
    margin: 0 0 18px;
}

.static-page-content a {
    color: var(--color-brand-light);
    text-decoration: underline;
}

.static-page-content ul,
.static-page-content ol {
    margin: 0 0 18px;
    padding-left: 24px;
}

.static-page-content li {
    margin-bottom: 8px;
}

.static-page-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

.static-page-content iframe {
    max-width: 100%;
}

/* Jotform embeds */
.static-page-content .jotform-form,
.static-page-content iframe[src*="jotform"] {
    width: 100%;
    border: none;
}

/* ============================================================
   FOOTER — MULTI-COLUMN
   ============================================================ */

.footer-columns {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1fr;
    gap: 50px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--color-border);
}

.footer-col-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text);
    margin: 0 0 18px;
}

/* Fair Use Notice */
.footer-notice-text {
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin: 0;
}

/* Branding column */
.footer-col-branding .footer-logo {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 12px;
}

.footer-col-branding .footer-tagline {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0;
}

/* Menu column */
.footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-menu li {
    margin: 0;
}

.footer-menu a {
    color: var(--color-text-subtle);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.footer-menu a:hover {
    color: var(--color-brand-light);
}

/* Bottom bar */
.footer-bottom {
    padding-top: 28px;
    text-align: center;
}

.footer-copyright {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 0;
}

@media(max-width: 768px) {
    .footer-columns {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

/* ============================================================
   TEAM / PARTNERS PAGE (About page)
   ============================================================ */

#blkscript-team-page .team-section { padding: 20px 0 50px; }
#blkscript-team-page .team-section-header { text-align: center; margin-bottom: 40px; }
#blkscript-team-page .team-section-title {
    font-size: 34px; font-weight: 800; letter-spacing: -0.5px;
    margin: 0 0 8px; color: #fff;
}
#blkscript-team-page .team-section-subtitle { font-size: 15px; color: #aaa; margin: 0; }

#blkscript-team-page {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}
#blkscript-team-page .team-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    gap: 16px;
    justify-content: center;
    align-items: flex-start;
    list-style: none !important;
    max-width: 100%;
}
#blkscript-team-page .team-member {
    text-align: center;
    flex: 0 0 auto !important;
    width: 150px !important;
    margin: 0 !important;
}
#blkscript-team-page .team-member-photo {
    width: 130px !important; height: 130px !important;
    border-radius: 50%; overflow: hidden;
    border: 3px solid #6c44cc;
    margin: 0 auto 14px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s;
}
#blkscript-team-page .team-member:hover .team-member-photo {
    transform: scale(1.07);
    box-shadow: 0 10px 35px rgba(108,68,204,0.4);
}
#blkscript-team-page .team-member-photo img {
    width: 100% !important; height: 100% !important;
    object-fit: cover; display: block;
}
#blkscript-team-page .team-member-name {
    font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 3px;
}
#blkscript-team-page .team-member-role {
    font-size: 11px; color: #8b5cf6; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px;
}
#blkscript-team-page .team-member a { text-decoration: none; }

#blkscript-team-page .partner-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    gap: 16px;
    justify-content: center;
    align-items: stretch;
    max-width: 100%;
    margin: 0 auto;
    list-style: none !important;
}
#blkscript-team-page .partner-card {
    flex: 0 0 200px !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px; padding: 22px;
    margin: 0 !important;
    transition: border-color 0.25s, transform 0.25s;
}
#blkscript-team-page .partner-card:hover {
    border-color: #6c44cc;
    transform: translateY(-4px);
}
#blkscript-team-page .partner-card-logo {
    height: 60px; margin-bottom: 14px;
    display: flex; align-items: center; justify-content: center;
}
#blkscript-team-page .partner-card-logo img {
    max-height: 60px !important; max-width: 150px !important;
    width: auto !important; height: auto !important; object-fit: contain;
}
#blkscript-team-page .partner-card-name {
    font-size: 16px; font-weight: 700; color: #fff;
    margin: 0 0 10px; text-align: center;
}
#blkscript-team-page .partner-card-desc {
    font-size: 12.5px; line-height: 1.6; color: #aaa; margin: 0;
}
#blkscript-team-page .partner-card a { text-decoration: none; }

#blkscript-team-page .team-grid::-webkit-scrollbar,
#blkscript-team-page .partner-grid::-webkit-scrollbar { height: 6px; }
#blkscript-team-page .team-grid::-webkit-scrollbar-thumb,
#blkscript-team-page .partner-grid::-webkit-scrollbar-thumb {
    background: rgba(108,68,204,0.5); border-radius: 3px;
}

/* ============================================================
   HOMEPAGE BANNER AD
   ============================================================ */

.home-banner-ad {
    padding: 30px 0;
}

.home-banner-ad-container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.home-banner-ad-link,
.home-banner-ad img {
    display: block;
}

.home-banner-ad img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

.home-banner-ad-link {
    transition: opacity 0.2s;
}

.home-banner-ad-link:hover {
    opacity: 0.92;
}

/* ============================================================
   TEAM / PARTNERS PAGE — MOBILE
   ============================================================ */

@media (max-width: 767px) {

    /* Let the rows wrap instead of forcing one line */
    #blkscript-team-page .team-grid {
        flex-wrap: wrap !important;
        gap: 28px 20px;
    }

    #blkscript-team-page .partner-grid {
        flex-wrap: wrap !important;
        gap: 20px;
    }

    /* Partner cards take a comfortable width on phones */
    #blkscript-team-page .partner-card {
        flex: 0 0 100% !important;
        max-width: 320px;
    }

    /* Tighten the wider container padding on small screens */
    #blkscript-team-page {
        max-width: 100%;
    }
}

@media (max-width: 380px) {
    /* Very narrow phones — slightly smaller circles so 2 fit per row */
    #blkscript-team-page .team-member {
        width: 130px !important;
    }
    #blkscript-team-page .team-member-photo {
        width: 110px !important;
        height: 110px !important;
    }
}

/* ============================================================
   COMPANIES GRID — MOBILE
   ============================================================ */

@media (max-width: 600px) {

    /* Let the grid go single-column and shrink properly */
    .companies-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* Center each card and cap its width so it doesn't stretch edge to edge */
    .company-card {
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    /* Slightly tighter logo padding on small screens */
    .company-card-logo {
        padding: 16px;
    }

    .company-card-info {
        padding: 16px;
    }
}

/* ============================================================
   MOBILE NAVIGATION
   ============================================================ */

/* Hamburger hidden on desktop */
.menu-toggle {
    display: none;
}

@media (max-width: 900px) {

    /* Show the hamburger */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    /* Hamburger lines */
    .menu-toggle-icon,
    .menu-toggle-icon::before,
    .menu-toggle-icon::after {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--color-text);
        margin: 0 auto;
        transition: transform 0.25s, opacity 0.25s;
        content: '';
    }
    .menu-toggle-icon {
        position: relative;
    }
    .menu-toggle-icon::before {
        position: absolute;
        top: -7px;
        left: 0;
    }
    .menu-toggle-icon::after {
        position: absolute;
        top: 7px;
        left: 0;
    }

    /* Hamburger turns into an X when open */
    .menu-toggle.is-active .menu-toggle-icon {
        background: transparent;
    }
    .menu-toggle.is-active .menu-toggle-icon::before {
        transform: translateY(7px) rotate(45deg);
    }
    .menu-toggle.is-active .menu-toggle-icon::after {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Menu hidden by default on mobile */
    #site-navigation .primary-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-bg-alt);
        border-top: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
        flex-direction: column;
        padding: 10px 0;
        margin: 0;
        list-style: none;
        z-index: 200;
        box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    }

    /* Menu shown when open */
    #site-navigation.is-open .primary-menu {
        display: flex;
    }

    #site-navigation .primary-menu li {
        margin: 0;
    }

    #site-navigation .primary-menu a {
        display: block;
        padding: 14px 24px;
        color: var(--color-text-subtle);
        text-decoration: none;
        font-size: 15px;
        transition: background 0.2s, color 0.2s;
    }

    #site-navigation .primary-menu a:hover {
        background: var(--color-bg-card);
        color: var(--color-text);
    }

    /* The nav needs to be a positioning context for the dropdown */
    #site-navigation {
        position: static;
    }

    .site-header-container {
        position: relative;
    }
}

/* ============================================================
   MOBILE NAV — TAP FIX
   ============================================================ */

@media (max-width: 900px) {

    /* Make sure the toggle sits above everything and receives taps */
    .menu-toggle {
        position: relative;
        z-index: 300;
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    /* The icon spans shouldn't steal the tap from the button */
    .menu-toggle-icon,
    .menu-toggle .screen-reader-text {
        pointer-events: none;
    }

    /* Keep the nav from being overlapped */
    #site-navigation {
        position: static;
        z-index: 250;
    }
}

/* ============================================================
   MOBILE NAV — FORCE TAP THROUGH
   ============================================================ */

@media (max-width: 900px) {

    /* The toggle must be the topmost, tappable thing */
    .menu-toggle {
        position: relative !important;
        z-index: 9999 !important;
        pointer-events: auto !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(108,68,204,0.3);
    }

    /* Inner spans must NOT intercept the tap */
    .menu-toggle * {
        pointer-events: none !important;
    }

    /* Header layout — make sure nothing invisibly overlaps the toggle */
    .site-header-container {
        position: relative;
    }

    /* If header-actions is stretching over the nav, contain it */
    .header-actions {
        position: relative;
        z-index: 1;
    }

    .main-navigation {
        position: relative;
        z-index: 100;
    }
}

/* ============================================================
   MOBILE NAV — ALWAYS-VISIBLE SCROLL STRIP
   ============================================================ */

.menu-toggle-checkbox,
.menu-toggle-label {
    display: none !important;
}

@media (max-width: 900px) {

    /* Header + container: normal flow, grows to fit, nothing positioned */
    .site-header,
    .site-header-container {
        position: static !important;
        height: auto !important;
        overflow: visible !important;
    }

    .site-header-container {
        flex-wrap: wrap;
        padding-bottom: 0;
    }

    .site-branding  { order: 1; }
    .header-actions { order: 2; }

    /* Nav strip: full-width row, IN normal flow (not positioned) */
    #site-navigation {
        order: 3;
        width: 100%;
        margin: 0;
        position: static !important;
    }

    /* The strip — in flow, so page content sits BELOW it */
    #site-navigation .primary-menu {
        display: flex !important;
        position: static !important;
        flex-direction: row;
        flex-wrap: nowrap;
        list-style: none;
        margin: 0;
        padding: 6px 10px;
        gap: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--color-bg-alt);
        border-top: 1px solid var(--color-border);
        scrollbar-width: none;
    }

    #site-navigation .primary-menu::-webkit-scrollbar {
        display: none;
    }

    #site-navigation .primary-menu li {
        margin: 0;
        flex: 0 0 auto;
    }

    /* Smaller pills — more items visible without scrolling */
    #site-navigation .primary-menu a {
        display: block;
        white-space: nowrap;
        padding: 5px 10px;
        font-size: 11px;
        font-weight: 600;
        color: var(--color-text-subtle);
        text-decoration: none;
        border-radius: var(--radius-full);
        background: var(--color-bg-card);
        transition: background 0.2s, color 0.2s;
    }

    #site-navigation .primary-menu a:hover {
        background: var(--color-brand);
        color: var(--color-text);
    }
}

/* ============================================================
   HERO — MOBILE-SPECIFIC BACKDROP
   ============================================================ */

/* Desktop: show desktop backdrop, hide mobile one */
.hero-slide-bg-mobile {
    display: none;
}

@media (max-width: 767px) {

    /* Mobile: hide desktop backdrop, show the mobile one */
    .hero-slide-bg-desktop {
        display: none;
    }

    .hero-slide-bg-mobile {
        display: block;
    }

    /* Mobile backdrop fills the slide without side cropping */
    .hero-slide-bg-mobile {
        background-size: cover;
        background-position: center;
    }
}