/* ==========================================================================
   aard.stream.css
   Custom theme for shows.theaardvark.co.uk — theaardvark live streaming hub
   Part of the aardCSS framework (gitlab.com/theaardvark/aardcss)

   Palette: deep purple-black / fuchsia-violet / warm orange
   Fonts: Syne (display) + DM Mono (mono/labels)
   Mode: dark by default; light mode variables included for future toggle
   Copyright 2026 Paul Taylor / Aardvark Web
   ========================================================================== */

/* --------------------------------------------------------------------------
   Google Fonts
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=DM+Mono:wght@300;400&display=swap');


/* --------------------------------------------------------------------------
   DARK MODE (default — html has data-theme="dark" hardcoded for now)
   When the toggle is wired up in the Hugo version, this block stays as-is.
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
    color-scheme: dark;

    /* Page chrome */
    --aard-background-color:        #0e0818;
    --aard-card-background-color:   #160d28;
    --aard-color:                   #f0ebff;
    --aard-muted-color:             #9b8fc0;
    --aard-muted-border-color:      rgba(212, 78, 255, 0.15);

    /* Headings — light in dark mode */
    --aard-h1-color:                #f0ebff;
    --aard-h2-color:                #e8e0ff;
    --aard-h3-color:                #ddd4ff;
    --aard-h4-color:                #cfc5f5;
    --aard-h5-color:                #c2b8e8;
    --aard-h6-color:                #9b8fc0;

    /* Primary — fuchsia/violet */
    --aard-primary:                 #d44eff;
    --aard-primary-hover:           #c030f0;
    --aard-primary-focus:           rgba(212, 78, 255, 0.35);
    --aard-primary-inverse:         #ffffff;
    --aard-primary-background:      rgba(212, 78, 255, 0.12);
    --aard-primary-hover-background:rgba(212, 78, 255, 0.20);
    --aard-primary-underline:       rgba(212, 78, 255, 0.40);

    /* Secondary — mid violet (UI chrome, borders, muted actions) */
    --aard-secondary:               #6e62c8;
    --aard-secondary-hover:         #5a4fb8;
    --aard-secondary-focus:         rgba(110, 98, 200, 0.35);
    --aard-secondary-inverse:       #ffffff;
    --aard-secondary-background:    rgba(110, 98, 200, 0.12);
    --aard-secondary-hover-background: rgba(110, 98, 200, 0.20);
    --aard-secondary-underline:     rgba(110, 98, 200, 0.40);

    /* Tertiary — deep surface purple (for nested cards etc.) */
    --aard-tertiary:                #2a1f4a;
    --aard-tertiary-hover:          #342860;
    --aard-tertiary-focus:          rgba(42, 31, 74, 0.35);
    --aard-tertiary-inverse:        #f0ebff;
    --aard-tertiary-background:     rgba(42, 31, 74, 0.50);
    --aard-tertiary-hover-background: rgba(42, 31, 74, 0.70);
    --aard-tertiary-underline:      rgba(42, 31, 74, 0.40);

    /* Contrast — warm orange (energy, live badge accents) */
    --aard-contrast:                #ff6b35;
    --aard-contrast-hover:          #e55520;
    --aard-contrast-focus:          rgba(255, 107, 53, 0.35);
    --aard-contrast-inverse:        #ffffff;
    --aard-contrast-background:     rgba(255, 107, 53, 0.12);
    --aard-contrast-hover-background: rgba(255, 107, 53, 0.20);
    --aard-contrast-underline:      rgba(255, 107, 53, 0.40);

    /* Accent — gradient midpoint pink (decorative highlights) */
    --aard-accent:                  #ff4bce;
    --aard-accent-hover:            #e030b5;
    --aard-accent-focus:            rgba(255, 75, 206, 0.35);
    --aard-accent-inverse:          #ffffff;
    --aard-accent-background:       rgba(255, 75, 206, 0.12);
    --aard-accent-hover-background: rgba(255, 75, 206, 0.20);
    --aard-accent-underline:        rgba(255, 75, 206, 0.40);

    /* Semantic roles — kept legible on dark backgrounds */
    --aard-success:                 #4ade80;
    --aard-success-hover:           #22c55e;
    --aard-success-focus:           rgba(74, 222, 128, 0.35);
    --aard-success-inverse:         #0a2e18;
    --aard-success-background:      rgba(74, 222, 128, 0.12);
    --aard-success-hover-background:rgba(74, 222, 128, 0.20);
    --aard-success-underline:       rgba(74, 222, 128, 0.40);

    --aard-info:                    #52aad8;
    --aard-info-hover:              #3a90c0;
    --aard-info-focus:              rgba(82, 170, 216, 0.35);
    --aard-info-inverse:            #ffffff;
    --aard-info-background:         rgba(82, 170, 216, 0.12);
    --aard-info-hover-background:   rgba(82, 170, 216, 0.20);
    --aard-info-underline:          rgba(82, 170, 216, 0.40);

    --aard-warning:                 #fbbf24;
    --aard-warning-hover:           #f59e0b;
    --aard-warning-focus:           rgba(251, 191, 36, 0.35);
    --aard-warning-inverse:         #1a1000;
    --aard-warning-background:      rgba(251, 191, 36, 0.12);
    --aard-warning-hover-background:rgba(251, 191, 36, 0.20);
    --aard-warning-underline:       rgba(251, 191, 36, 0.40);

    --aard-error:                   #f87171;
    --aard-error-hover:             #ef4444;
    --aard-error-focus:             rgba(248, 113, 113, 0.35);
    --aard-error-inverse:           #ffffff;
    --aard-error-background:        rgba(248, 113, 113, 0.12);
    --aard-error-hover-background:  rgba(248, 113, 113, 0.20);
    --aard-error-underline:         rgba(248, 113, 113, 0.40);

    /* Pop — lighter fuchsia (derives from accent) */
    --aard-pop:                     #f09fff;
    --aard-pop-hover:               #e080ff;
    --aard-pop-focus:               rgba(240, 159, 255, 0.35);
    --aard-pop-inverse:             #1a0028;
    --aard-pop-background:          rgba(240, 159, 255, 0.10);
    --aard-pop-hover-background:    rgba(240, 159, 255, 0.18);
    --aard-pop-underline:           rgba(240, 159, 255, 0.40);

    /* Spark — lighter orange (derives from contrast) */
    --aard-spark:                   #ffaa80;
    --aard-spark-hover:             #ff8855;
    --aard-spark-focus:             rgba(255, 170, 128, 0.35);
    --aard-spark-inverse:           #2a0e00;
    --aard-spark-background:        rgba(255, 170, 128, 0.10);
    --aard-spark-hover-background:  rgba(255, 170, 128, 0.18);
    --aard-spark-underline:         rgba(255, 170, 128, 0.40);

    /* Typography */
    --aard-font-family:             'Syne', system-ui, sans-serif;
    --aard-font-family-monospace:   'DM Mono', 'Courier New', monospace;

    /* Borders & radius */
    --aard-border-radius:           0.375rem;
    --aard-border-width:            0.0625rem;

    /* Code blocks */
    --aard-code-background-color:   rgba(110, 98, 200, 0.15);
    --aard-code-color:              #d44eff;
    --aard-code-kbd-background-color: #2a1f4a;
    --aard-code-kbd-color:          #f0ebff;
}


/* --------------------------------------------------------------------------
   LIGHT MODE
   Not active until the toggle is wired up. Variables are defined here so
   the Hugo version only needs to add the JS toggle and button.
   -------------------------------------------------------------------------- */
[data-theme="light"],
:root:not([data-theme="dark"]) {
    color-scheme: light;

    /* Page chrome */
    --aard-background-color:        #f5f0ff;
    --aard-card-background-color:   #ffffff;
    --aard-color:                   #1a1030;
    --aard-muted-color:             #5a4f80;
    --aard-muted-border-color:      rgba(110, 62, 180, 0.20);

    /* Headings */
    --aard-h1-color:                #1a1030;
    --aard-h2-color:                #2a1f50;
    --aard-h3-color:                #3a2f68;
    --aard-h4-color:                #4a3f7a;
    --aard-h5-color:                #5a4f90;
    --aard-h6-color:                #6a5fa0;

    /* Primary — deeper violet for light bg contrast */
    --aard-primary:                 #7c22cc;
    --aard-primary-hover:           #6010b8;
    --aard-primary-focus:           rgba(124, 34, 204, 0.30);
    --aard-primary-inverse:         #ffffff;
    --aard-primary-background:      rgba(124, 34, 204, 0.08);
    --aard-primary-hover-background:rgba(124, 34, 204, 0.14);
    --aard-primary-underline:       rgba(124, 34, 204, 0.35);

    /* Secondary */
    --aard-secondary:               #5a3fa0;
    --aard-secondary-hover:         #4a2f90;
    --aard-secondary-focus:         rgba(90, 63, 160, 0.30);
    --aard-secondary-inverse:       #ffffff;
    --aard-secondary-background:    rgba(90, 63, 160, 0.08);
    --aard-secondary-hover-background: rgba(90, 63, 160, 0.14);
    --aard-secondary-underline:     rgba(90, 63, 160, 0.35);

    /* Tertiary */
    --aard-tertiary:                #ede8ff;
    --aard-tertiary-hover:          #e0d8ff;
    --aard-tertiary-focus:          rgba(110, 80, 200, 0.20);
    --aard-tertiary-inverse:        #1a1030;
    --aard-tertiary-background:     rgba(110, 80, 200, 0.06);
    --aard-tertiary-hover-background: rgba(110, 80, 200, 0.12);
    --aard-tertiary-underline:      rgba(110, 80, 200, 0.30);

    /* Contrast — orange still works on light bg */
    --aard-contrast:                #cc4400;
    --aard-contrast-hover:          #b03800;
    --aard-contrast-focus:          rgba(204, 68, 0, 0.30);
    --aard-contrast-inverse:        #ffffff;
    --aard-contrast-background:     rgba(204, 68, 0, 0.08);
    --aard-contrast-hover-background: rgba(204, 68, 0, 0.14);
    --aard-contrast-underline:      rgba(204, 68, 0, 0.35);

    /* Accent */
    --aard-accent:                  #c0008a;
    --aard-accent-hover:            #a80078;
    --aard-accent-focus:            rgba(192, 0, 138, 0.30);
    --aard-accent-inverse:          #ffffff;
    --aard-accent-background:       rgba(192, 0, 138, 0.08);
    --aard-accent-hover-background: rgba(192, 0, 138, 0.14);
    --aard-accent-underline:        rgba(192, 0, 138, 0.35);

    /* Semantic */
    --aard-success:                 #16803c;
    --aard-success-hover:           #0f6030;
    --aard-success-focus:           rgba(22, 128, 60, 0.30);
    --aard-success-inverse:         #ffffff;
    --aard-success-background:      rgba(22, 128, 60, 0.08);
    --aard-success-hover-background:rgba(22, 128, 60, 0.14);
    --aard-success-underline:       rgba(22, 128, 60, 0.35);

    --aard-info:                    #0369a1;
    --aard-info-hover:              #025080;
    --aard-info-focus:              rgba(3, 105, 161, 0.30);
    --aard-info-inverse:            #ffffff;
    --aard-info-background:         rgba(3, 105, 161, 0.08);
    --aard-info-hover-background:   rgba(3, 105, 161, 0.14);
    --aard-info-underline:          rgba(3, 105, 161, 0.35);

    --aard-warning:                 #b45309;
    --aard-warning-hover:           #924208;
    --aard-warning-focus:           rgba(180, 83, 9, 0.30);
    --aard-warning-inverse:         #ffffff;
    --aard-warning-background:      rgba(180, 83, 9, 0.08);
    --aard-warning-hover-background:rgba(180, 83, 9, 0.14);
    --aard-warning-underline:       rgba(180, 83, 9, 0.35);

    --aard-error:                   #dc2626;
    --aard-error-hover:             #b91c1c;
    --aard-error-focus:             rgba(220, 38, 38, 0.30);
    --aard-error-inverse:           #ffffff;
    --aard-error-background:        rgba(220, 38, 38, 0.08);
    --aard-error-hover-background:  rgba(220, 38, 38, 0.14);
    --aard-error-underline:         rgba(220, 38, 38, 0.35);

    --aard-pop:                     #a020d0;
    --aard-pop-hover:               #8810b8;
    --aard-pop-focus:               rgba(160, 32, 208, 0.30);
    --aard-pop-inverse:             #ffffff;
    --aard-pop-background:          rgba(160, 32, 208, 0.08);
    --aard-pop-hover-background:    rgba(160, 32, 208, 0.14);
    --aard-pop-underline:           rgba(160, 32, 208, 0.35);

    --aard-spark:                   #d44400;
    --aard-spark-hover:             #b83800;
    --aard-spark-focus:             rgba(212, 68, 0, 0.30);
    --aard-spark-inverse:           #ffffff;
    --aard-spark-background:        rgba(212, 68, 0, 0.08);
    --aard-spark-hover-background:  rgba(212, 68, 0, 0.14);
    --aard-spark-underline:         rgba(212, 68, 0, 0.35);

    /* Typography — same fonts, both modes */
    --aard-font-family:             'Syne', system-ui, sans-serif;
    --aard-font-family-monospace:   'DM Mono', 'Courier New', monospace;

    /* Borders & radius */
    --aard-border-radius:           0.375rem;
    --aard-border-width:            0.0625rem;

    /* Code */
    --aard-code-background-color:   rgba(124, 34, 204, 0.08);
    --aard-code-color:              #7c22cc;
    --aard-code-kbd-background-color: #1a1030;
    --aard-code-kbd-color:          #f5f0ff;
}


/* --------------------------------------------------------------------------
   SITE-SPECIFIC CUSTOM PROPERTIES
   Not aardCSS framework variables — stream site layout extras.
   These live here so they can be overridden per-theme.
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
    /* Platform brand colours */
    --stream-owncast:    #9b59b6;
    --stream-mixcloud:   #52aad8;
    --stream-twitch:     #9147ff;
    --stream-slipmat:    #ff6b35;
    --stream-kofi:       #ff5e5b;
    --stream-patreon:    #ff424d;

    /* Decorative gradients */
    --stream-gradient-text:  linear-gradient(125deg, #e060ff 0%, #ff4bce 55%, #ff8c42 100%);
    --stream-glow-top:       radial-gradient(ellipse at 50% 0%, rgba(212,78,255,0.10) 0%, rgba(255,75,206,0.04) 40%, transparent 70%);
    --stream-glow-art:       radial-gradient(ellipse, rgba(255,75,206,0.16) 0%, transparent 70%);

    /* Embed surfaces */
    --stream-embed-border:   rgba(145, 71, 255, 0.25);
    --stream-surface-alt:    #160d28;
}

[data-theme="light"],
:root:not([data-theme="dark"]) {
    /* Platform brand colours — same, they're brand not UI */
    --stream-owncast:    #7c22cc;
    --stream-mixcloud:   #0369a1;
    --stream-twitch:     #6030cc;
    --stream-slipmat:    #cc4400;
    --stream-kofi:       #cc2020;
    --stream-patreon:    #cc2030;

    /* Lighter gradients for light mode */
    --stream-gradient-text:  linear-gradient(125deg, #8800cc 0%, #cc008a 55%, #cc4400 100%);
    --stream-glow-top:       radial-gradient(ellipse at 50% 0%, rgba(124,34,204,0.08) 0%, rgba(192,0,138,0.03) 40%, transparent 70%);
    --stream-glow-art:       radial-gradient(ellipse, rgba(192,0,138,0.12) 0%, transparent 70%);

    --stream-embed-border:   rgba(124, 34, 204, 0.20);
    --stream-surface-alt:    #ede8ff;
}


/* --------------------------------------------------------------------------
   STREAM SITE LAYOUT STYLES
   Component styles specific to shows.theaardvark.co.uk.
   These will move to a Hugo partial or page-level style block later.
   -------------------------------------------------------------------------- */

/* Force background, text and font — belt and braces over aard.css variable cascade */
body {
    background-color: var(--aard-background-color);
    color: var(--aard-color);
    font-family: 'Syne', system-ui, sans-serif;
}

/* Decorative background glow */
.stream-glow-top {
    position: fixed;
    top: -30vh;
    left: 50%;
    transform: translateX(-50%);
    width: 160vw;
    height: 90vh;
    background: var(--stream-glow-top);
    pointer-events: none;
    z-index: 0;
}

/* Subtle film grain overlay */
.stream-grain {
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
}

/* Site wrapper — everything above the grain/glow */
.stream-wrap {
    position: relative;
    z-index: 1;
}

/* ── NAV ── */
.stream-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 0;
    position: relative;
    padding: 1.25rem var(--aard-spacing);
    border-bottom: var(--aard-border-width) solid var(--aard-muted-border-color);
    max-width: 1100px;
    margin: 0 auto;
}

.stream-nav-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--aard-color);
}

.stream-nav-logo img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.stream-nav-logo-text {
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
    background: var(--stream-gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stream-nav-radio {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--aard-font-family-monospace);
    font-size: 0.9375rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--aard-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--aard-transition);
}

.stream-nav-radio:hover {
    color: var(--aard-accent);
}

.stream-nav-home {
    font-family: var(--aard-font-family-monospace);
    font-size: 0.6875rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    color: var(--aard-muted-color);
    text-decoration: none;
    transition: color var(--aard-transition);
}

.stream-nav-home:hover {
    color: var(--aard-primary);
}

@media (max-width: 600px) {
    .stream-nav-radio {
        position: static;
        transform: none;
        flex-basis: 100%;
        text-align: center;
        padding: 0.25rem 0;
        border-top: var(--aard-border-width) solid var(--aard-muted-border-color);
        margin-top: 0.25rem;
    }
}

/* ── HERO ── */
.stream-hero {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3.5rem var(--aard-spacing) 2rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
}

.stream-hero-content {}

.stream-eyebrow {
    font-family: var(--aard-font-family-monospace);
    font-size: 0.625rem;
    font-weight: 400;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--aard-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.stream-eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--aard-primary);
    flex-shrink: 0;
}

.stream-hero h1 {
    font-size: clamp(2.75rem, 7vw, 5.5rem);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.035em;
    margin-bottom: 1.25rem;
}

.stream-hero h1 .stream-hero-the {
    color: var(--aard-muted-color);
    font-weight: 400;
    -webkit-text-fill-color: var(--aard-muted-color);
}

.stream-hero h1 .stream-hero-name {
    background: var(--stream-gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stream-tagline {
    font-family: var(--aard-font-family-monospace);
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.75;
    color: var(--aard-muted-color);
    border-left: 2px solid var(--aard-muted-border-color);
    padding-left: 1rem;
}

/* Hero artwork — the DJ aardvark PNG used as logo/identity */
.stream-hero-art {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
}

.stream-hero-art img {
    width: auto;
    height: 180px;
    object-fit: contain;
    mix-blend-mode: screen;
}

[data-theme="light"] .stream-hero-art img {
    mix-blend-mode: multiply;
}

.stream-hero-art::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 40%;
    background: var(--stream-glow-art);
    pointer-events: none;
    z-index: -1;
}

/* ── MAIN CONTENT AREA ── */
.stream-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--aard-spacing) 3rem;
}

/* ── LIVE EMBED ──
   Break out of the max-width container to use full viewport width.
   Negative margin + full width trick — content below stays contained.
   ─────────────────────────────────────────────────────────────────── */
.stream-embed-section {
    margin-left: calc(-1 * var(--aard-spacing));
    margin-right: calc(-1 * var(--aard-spacing));
    margin-bottom: 2.5rem;
    padding: 0 var(--aard-spacing);
}

/* ── NEXT SHOW COUNTDOWN ─────────────────────────────────────────── */
.stream-next-show {
    font-family: var(--aard-font-family-monospace);
    font-size: 1.125rem;
    color: var(--aard-muted-color);
    margin-bottom: 0.75rem;
    padding: 0 var(--aard-spacing);
}

.stream-next-show.countdown-hidden {
    display: none;
}

.countdown-digits {
    font-size: 1.375rem;
    font-variant-numeric: tabular-nums;
    color: var(--aard-primary);
    letter-spacing: 0.05em;
}

.countdown-live {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--aard-contrast);
    letter-spacing: 0.1em;
    animation: countdown-pulse 1s ease-in-out infinite;
}

@keyframes countdown-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}

.stream-section-label {
    font-family: var(--aard-font-family-monospace);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--aard-primary);
    margin-bottom: 0.875rem;
}

/* Live badge — pulsing dot + label */
.stream-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-family: var(--aard-font-family-monospace);
    font-size: 0.5625rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--stream-owncast);
    margin-bottom: 0.625rem;
}

.stream-live-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--stream-owncast);
    box-shadow: 0 0 8px var(--stream-owncast);
    animation: stream-pulse 1.8s ease-in-out infinite;
}

@keyframes stream-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

/* Embed grid: video left, chat right */
.stream-embed-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 0.75rem;
    align-items: stretch;
    height: 70vh;
    min-height: 400px;
    max-height: 700px;
}

.stream-embed-grid iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: var(--aard-border-width) solid var(--stream-embed-border);
    border-radius: var(--aard-border-radius);
    background: var(--stream-surface-alt);
}

.stream-embed-video {
    /* height comes from the grid, not aspect-ratio */
}

.stream-embed-chat {
    /* height comes from the grid */
}

/* Offline status text */
.stream-status {
    font-family: var(--aard-font-family-monospace);
    font-size: 0.6875rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--aard-muted-color);
    border-left: 2px solid var(--aard-muted-border-color);
    padding-left: 1rem;
    margin-bottom: 1.5rem;
}

/* ── PLATFORM LINKS ── */
.stream-platforms {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 2.5rem;
}

/* Individual platform link — styled as aardCSS card variant */
/* ── Platform accordions ──
   <details> = accordion container, <summary> = clickable header.
   Native HTML — no JS. aardCSS resets the default marker;
   we add our own open/closed indicator via ::after on summary.
   ───────────────────────────────────────────────────────────── */
.stream-platform {
    background: var(--aard-card-background-color);
    border: var(--aard-border-width) solid rgba(255,255,255,0.06);
    border-radius: var(--aard-border-radius);
    color: var(--aard-color);
    transition: border-color var(--aard-transition), background var(--aard-transition);
    overflow: hidden;
}

[data-theme="light"] .stream-platform {
    border-color: var(--aard-muted-border-color);
}

/* Summary row — mimics the old link card layout */
.stream-platform summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.125rem 1.375rem;
    cursor: pointer;
    list-style: none; /* hide default triangle */
    color: var(--aard-color);
    transition: background var(--aard-transition);
}

.stream-platform summary::-webkit-details-marker { display: none; }

/* Open/closed chevron on the right */
.stream-platform summary::after {
    content: '›';
    font-size: 1.25rem;
    color: var(--aard-muted-color);
    margin-left: auto;
    transition: transform var(--aard-transition), color var(--aard-transition);
    flex-shrink: 0;
}

.stream-platform[open] summary::after {
    transform: rotate(90deg);
}

/* Per-platform hover and open states */
.stream-platform--owncast:hover,
.stream-platform--owncast[open]  { border-color: var(--stream-owncast);  }
.stream-platform--mixcloud:hover,
.stream-platform--mixcloud[open] { border-color: var(--stream-mixcloud); }
.stream-platform--twitch:hover,
.stream-platform--twitch[open]   { border-color: var(--stream-twitch);   }
.stream-platform--slipmat:hover,
.stream-platform--slipmat[open]  { border-color: var(--stream-slipmat);  }

.stream-platform--owncast summary:hover  { background: rgba(155, 89, 182, 0.08); }
.stream-platform--mixcloud summary:hover { background: rgba(82, 170, 216, 0.08); }
.stream-platform--twitch summary:hover   { background: rgba(145, 71, 255, 0.08); }
.stream-platform--slipmat summary:hover  { background: rgba(255, 107, 53, 0.08); }

.stream-platform--owncast[open]  summary::after { color: var(--stream-owncast);  }
.stream-platform--mixcloud[open] summary::after { color: var(--stream-mixcloud); }
.stream-platform--twitch[open]   summary::after { color: var(--stream-twitch);   }
.stream-platform--slipmat[open]  summary::after { color: var(--stream-slipmat);  }

/* Colour dot */
.stream-platform-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.stream-platform--owncast  .stream-platform-dot { background: var(--stream-owncast);  box-shadow: 0 0 7px var(--stream-owncast); }
.stream-platform--mixcloud .stream-platform-dot { background: var(--stream-mixcloud); box-shadow: 0 0 7px var(--stream-mixcloud); }
.stream-platform--twitch   .stream-platform-dot { background: var(--stream-twitch);   box-shadow: 0 0 7px var(--stream-twitch); }
.stream-platform--slipmat  .stream-platform-dot { background: var(--stream-slipmat);  box-shadow: 0 0 7px var(--stream-slipmat); }

.stream-platform-info {
    flex: 1;
    min-width: 0;
}

.stream-platform-name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.125rem;
}

.stream-platform-url {
    font-family: var(--aard-font-family-monospace);
    font-size: 0.625rem;
    font-weight: 300;
    color: var(--aard-muted-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Accordion body — the revealed content */
.stream-platform-body {
    padding: 0 1.375rem 1.25rem;
    border-top: var(--aard-border-width) solid var(--aard-muted-border-color);
}

.stream-platform-body p {
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--aard-muted-color);
    margin-bottom: 0.75rem;
}

.stream-platform-body p strong {
    color: var(--aard-color);
}

.stream-platform-body a {
    font-family: var(--aard-font-family-monospace);
    font-size: 0.75rem;
    font-weight: 400;
    text-underline-offset: 3px;
}

.stream-platform--owncast  .stream-platform-body a { color: var(--stream-owncast);  }
.stream-platform--mixcloud .stream-platform-body a { color: var(--stream-mixcloud); }
.stream-platform--twitch   .stream-platform-body a { color: var(--stream-twitch);   }
.stream-platform--slipmat  .stream-platform-body a { color: var(--stream-slipmat);  }

/* ── NEWSLETTER SECTION ── */
.stream-newsletter {
    margin-top: 1rem;
    margin-bottom: 2.5rem;
}

.stream-newsletter-card {
    background: var(--aard-card-background-color);
    border: var(--aard-border-width) solid var(--aard-muted-border-color);
    border-radius: var(--aard-border-radius);
    padding: 1.75rem;
}

.stream-newsletter-intro h2 {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

.stream-newsletter-intro p {
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--aard-muted-color);
    margin-bottom: 1.25rem;
}

.stream-newsletter-form label {
    display: block;
    font-family: var(--aard-font-family-monospace);
    font-size: 0.625rem;
    font-weight: 400;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--aard-muted-color);
    margin-bottom: 0.5rem;
}

.stream-newsletter-row {
    display: flex;
    gap: 0.625rem;
}

.stream-newsletter-row input[type="email"] {
    flex: 1;
    min-width: 0;
    padding: 0.625rem 0.875rem;
    background: var(--aard-background-color);
    border: var(--aard-border-width) solid var(--aard-muted-border-color);
    border-radius: var(--aard-border-radius);
    color: var(--aard-color);
    font-family: var(--aard-font-family-monospace);
    font-size: 0.8125rem;
    font-weight: 300;
    transition: border-color var(--aard-transition);
}

.stream-newsletter-row input[type="email"]:focus {
    outline: none;
    border-color: var(--aard-primary);
    box-shadow: 0 0 0 3px var(--aard-primary-focus);
}

.stream-newsletter-row input[type="email"]::placeholder {
    color: var(--aard-muted-color);
    opacity: 0.5;
}

.stream-newsletter-row button {
    flex-shrink: 0;
    padding: 0.625rem 1.25rem;
    background: var(--aard-primary);
    border: none;
    border-radius: var(--aard-border-radius);
    color: var(--aard-primary-inverse);
    font-family: var(--aard-font-family);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--aard-transition);
}

.stream-newsletter-row button:hover {
    background: var(--aard-primary-hover);
}

.stream-newsletter-archive {
    margin-top: 1rem;
    font-family: var(--aard-font-family-monospace);
    font-size: 0.625rem;
    font-weight: 300;
    color: var(--aard-muted-color);
}

.stream-newsletter-archive a {
    color: var(--aard-muted-color);
    text-underline-offset: 3px;
    transition: color var(--aard-transition);
}

.stream-newsletter-archive a:hover {
    color: var(--aard-primary);
}

@media (max-width: 480px) {
    .stream-newsletter-row {
        flex-direction: column;
    }

    .stream-newsletter-row button {
        width: 100%;
    }
}

/* ── SUPPORT SECTION ── */
.stream-support {
    margin-bottom: 2.5rem;
}

.stream-support-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* Using aardCSS <article> card pattern */
.stream-support-cards article {
    margin: 0;
}

.stream-support-cards article header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
}

.stream-support-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.stream-support-dot--kofi    { background: var(--stream-kofi);    box-shadow: 0 0 6px var(--stream-kofi); }
.stream-support-dot--paypal  { background: #003087;                box-shadow: 0 0 6px #003087; }

.stream-support-cards article footer {
    padding-top: 0.75rem;
}

/* Patreon coming-soon state */
.stream-coming-soon {
    opacity: 0.55;
    cursor: default;
}

/* ── FEDIVERSE / FOLLOW NUDGE ── */
.stream-fedi {
    margin-bottom: 2.5rem;
}

/* ── FOOTER ── */
.stream-footer {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem var(--aard-spacing) 2.5rem;
    border-top: var(--aard-border-width) solid var(--aard-muted-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.stream-footer-home {
    font-family: var(--aard-font-family-monospace);
    font-size: 0.625rem;
    font-weight: 300;
    color: var(--aard-muted-color);
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: color var(--aard-transition);
}

.stream-footer-home:hover { color: var(--aard-primary); }

.stream-footer-meta {
    font-family: var(--aard-font-family-monospace);
    font-size: 0.625rem;
    font-weight: 300;
    color: var(--aard-muted-color);
    letter-spacing: 0.04em;
    text-align: right;
}

.stream-footer-meta a {
    color: var(--aard-primary);
    text-decoration: none;
    opacity: 0.75;
    transition: opacity var(--aard-transition);
}

.stream-footer-meta a:hover { opacity: 1; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .stream-hero {
        grid-template-columns: 1fr;
        padding-top: 2rem;
    }

    .stream-hero-art {
        display: none;
    }

    .stream-embed-grid {
        grid-template-columns: 1fr;
        height: auto;
        max-height: none;
    }

    .stream-embed-video {
        height: 56vw; /* 16:9 ratio of viewport width */
        min-height: 200px;
    }

    .stream-embed-chat {
        height: 300px;
    }

    .stream-support-cards {
        grid-template-columns: 1fr;
    }

    .stream-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .stream-footer-meta {
        text-align: left;
    }
}

@media (max-width: 400px) {
    .stream-hero h1 {
        font-size: 2.75rem;
    }
}