/* =====================================================
   YALLA VAMOS 2030 — SHARED BRAND SYSTEM
   Single source of truth for the whole portal:
   index.php (home), News/ (archive + reader), live/ (live TV).
   Page-specific rules live in each page, never here.
   ===================================================== */

/* =====================================================
   1. DESIGN TOKENS
   ===================================================== */
:root {
    /* Surfaces */
    --ink-900: #04070f;
    --ink-800: #070d1c;
    --ink-700: #0b1428;
    --ink-600: #101d38;

    /* Brand accents, sampled from the Yalla Vamos emblem */
    --gold:        #d4af37;
    --gold-light:  #f4d97b;
    --gold-deep:   #a8821f;
    --flag-red:    #e30613;
    --flag-green:  #04a64b;
    --flag-yellow: #ffdd00;

    /* Type */
    --text:        #f5f8ff;
    --text-soft:   #b6c2d9;
    --text-muted:  #7b8aa6;
    --hairline:    rgba(255, 255, 255, 0.10);

    --font-main: 'Montserrat', system-ui, -apple-system, sans-serif;
    --font-heading: 'Playfair Display', Georgia, serif;

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layout */
    --shell: 1180px;
    --gutter: clamp(1.25rem, 4vw, 3rem);
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-main);
    background: var(--ink-900);
    color: var(--text);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    position: relative;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

html.is-locked, html.is-locked body { overflow: hidden; }

::selection { background: rgba(212, 175, 55, 0.32); color: #fff; }

:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 3px;
    border-radius: 6px;
}

/* =====================================================
   2. ANIMATED BACKDROP
   ===================================================== */
.fx {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(115% 85% at 50% -12%, #16295a 0%, #0a1330 42%, var(--ink-900) 100%);
}

/* Drifting colour orbs in the emblem's palette */
.fx__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
    will-change: transform;
}
.fx__orb--gold {
    width: 46vw; height: 46vw; min-width: 340px; min-height: 340px;
    background: var(--gold);
    /* Kept low — gold over navy turns olive fast. */
    opacity: 0.12;
    top: -10%; left: -8%;
    animation: orbDrift 26s var(--ease-out) infinite alternate;
}
.fx__orb--green {
    width: 40vw; height: 40vw; min-width: 300px; min-height: 300px;
    background: var(--flag-green);
    opacity: 0.13;
    bottom: -14%; right: -6%;
    animation: orbDrift 32s var(--ease-out) infinite alternate-reverse;
}
.fx__orb--red {
    width: 32vw; height: 32vw; min-width: 240px; min-height: 240px;
    background: var(--flag-red);
    opacity: 0.10;
    top: 45%; left: 55%;
    animation: orbDrift 38s var(--ease-out) 1.5s infinite alternate;
}

@keyframes orbDrift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(9vw, 7vh, 0) scale(1.22); }
}

/* Slow stadium-floodlight sweep */
.fx__sweep {
    position: absolute;
    top: 50%; left: 50%;
    width: 190vmax; height: 190vmax;
    margin: -95vmax 0 0 -95vmax;
    background: conic-gradient(from 0deg,
        rgba(255, 255, 255, 0) 0deg,
        rgba(244, 217, 123, 0.055) 18deg,
        rgba(255, 255, 255, 0) 40deg,
        rgba(255, 255, 255, 0) 180deg,
        rgba(244, 217, 123, 0.035) 200deg,
        rgba(255, 255, 255, 0) 224deg,
        rgba(255, 255, 255, 0) 360deg);
    animation: sweepSpin 48s linear infinite;
    will-change: transform;
}
@keyframes sweepSpin {
    to { transform: rotate(360deg); }
}

/* Perspective pitch grid along the bottom edge */
.fx__pitch {
    position: absolute;
    left: -25%; right: -25%; bottom: -6vh;
    height: 62vh;
    background-image:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0 1px, transparent 1px 84px),
        repeating-linear-gradient(0deg,  rgba(255,255,255,0.12) 0 1px, transparent 1px 84px);
    background-position: 0 0;
    transform: perspective(560px) rotateX(72deg);
    transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 78%);
            mask-image: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 78%);
    animation: pitchScroll 12s linear infinite;
}
@keyframes pitchScroll {
    to { background-position: 0 84px, 0 84px; }
}

/* Cursor-tracked warm spotlight */
.fx__spot {
    position: absolute;
    top: 0; left: 0;
    width: 760px; height: 760px;
    margin: -380px 0 0 -380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 217, 123, 0.10) 0%, rgba(244, 217, 123, 0) 62%);
    transform: translate3d(50vw, 34vh, 0);
    transition: opacity 0.6s ease;
    opacity: 0;
    will-change: transform;
}
.fx__spot.is-live { opacity: 1; }

/* Fine film grain to kill banding and add texture */
.fx__grain {
    position: absolute;
    inset: -200%;
    width: 500%; height: 500%;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grainShift 0.9s steps(4) infinite;
}
@keyframes grainShift {
    0%   { transform: translate3d(0, 0, 0); }
    25%  { transform: translate3d(-2%, 1%, 0); }
    50%  { transform: translate3d(1%, -2%, 0); }
    75%  { transform: translate3d(-1%, -1%, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* Vignette to focus the centre of the stage */
.fx__vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 80% at 50% 40%, transparent 40%, rgba(2, 4, 10, 0.72) 100%);
}

/* =====================================================
   3. SHARED PRIMITIVES
   ===================================================== */
.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.glass {
    background: linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
    border: 1px solid var(--hairline);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 1rem 0.45rem 0.75rem;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-soft);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--hairline);
}

.pulse-dot {
    position: relative;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--flag-green);
    flex: none;
}
.pulse-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--flag-green);
    animation: pulseRing 2.2s ease-out infinite;
}
@keyframes pulseRing {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(3.6); opacity: 0; }
}

/* Recolour the dot and its ring together — setting the background inline
   would leave the ::after ring stuck on green. */
.pulse-dot--red,
.pulse-dot--red::after { background: var(--flag-red); }
.pulse-dot--gold,
.pulse-dot--gold::after { background: var(--gold); }

/* --- Buttons ------------------------------------------------ */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 100px;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.35s var(--ease-out),
                box-shadow 0.35s var(--ease-out),
                background-color 0.35s var(--ease-out),
                border-color 0.35s var(--ease-out),
                color 0.35s var(--ease-out);
}

.btn--primary {
    padding: 1.05rem 2.3rem;
    color: #0a0d16;
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 45%, var(--gold-deep) 100%);
    box-shadow: 0 14px 34px -12px rgba(212, 175, 55, 0.65),
                inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 46px -14px rgba(212, 175, 55, 0.8),
                inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.btn--primary:active { transform: translateY(-1px) scale(0.99); }

/* Light sweeping across the primary button */
.btn--primary::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-18deg);
    animation: btnShine 4.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes btnShine {
    0%, 62%  { left: -60%; }
    88%, 100% { left: 130%; }
}

.btn--ghost {
    padding: 0.72rem 1.5rem;
    color: var(--text-soft);
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--hairline);
    font-size: 0.75rem;
}
.btn--ghost:hover {
    color: #fff;
    background: rgba(212, 175, 55, 0.14);
    border-color: rgba(212, 175, 55, 0.45);
    transform: translateY(-2px);
}

.btn__icon { width: 16px; height: 16px; flex: none; }

/* =====================================================
   4. TOP BAR
   ===================================================== */
.topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    padding: 1rem 0;
    border-bottom: 1px solid transparent;
    transition: background-color 0.4s ease, border-color 0.4s ease, padding 0.4s ease;
    animation: dropIn 0.9s var(--ease-out) both;
}
.topbar.is-stuck {
    background: rgba(6, 10, 22, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom-color: var(--hairline);
    padding: 0.6rem 0;
}
@keyframes dropIn {
    from { opacity: 0; transform: translateY(-24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    text-decoration: none;
    color: var(--text);
}
.brand__flags {
    display: flex;
    gap: 3px;
    padding: 5px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--hairline);
}
.brand__flags i {
    display: block;
    width: 4px;
    height: 18px;
    border-radius: 2px;
    transform-origin: bottom;
    animation: barWave 2.6s ease-in-out infinite;
}
.brand__flags i:nth-child(1) { background: var(--flag-red);    animation-delay: 0s; }
.brand__flags i:nth-child(2) { background: var(--flag-yellow); animation-delay: 0.18s; }
.brand__flags i:nth-child(3) { background: var(--flag-green);  animation-delay: 0.36s; }
@keyframes barWave {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(0.55); }
}

.brand__text {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
}
.brand__text em {
    font-style: normal;
    color: var(--gold);
}

/* =====================================================
   5. HERO
   ===================================================== */
main {
    position: relative;
    z-index: 10;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero {
    padding: clamp(1.5rem, 4vh, 3rem) 0 clamp(1.5rem, 3vh, 2.5rem);
}

.hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
}

/* --- Copy column -------------------------------------------- */
.hero__copy > * + * { margin-top: 1.6rem; }

h1 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.02em;
    font-size: clamp(2.6rem, 6.2vw, 4.6rem);
}
.h1__line {
    display: block;
    color: #fff;
}
.h1__word {
    display: inline-block;
    animation: wordRise 1s var(--ease-out) both;
    animation-delay: calc(0.28s + var(--i) * 0.09s);
}
@keyframes wordRise {
    from { opacity: 0; transform: translateY(0.5em) rotate(2deg); filter: blur(8px); }
    to   { opacity: 1; transform: translateY(0) rotate(0); filter: blur(0); }
}

.h1__year {
    display: block;
    margin-top: 0.08em;
    font-size: 1.22em;
    font-weight: 700;
    letter-spacing: 0.01em;
    /* Playfair defaults to old-style figures, which makes "2030"
       read as "2o3o". Force full-height lining numerals. */
    font-variant-numeric: lining-nums;
    font-feature-settings: 'lnum' 1, 'onum' 0;
    background: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold-light) 32%, #fffdf3 46%, var(--gold-light) 60%, var(--gold-deep) 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--gold);
    animation: yearIn 1.1s var(--ease-spring) 0.62s both,
               yearSheen 7s ease-in-out 1.8s infinite;
}
@keyframes yearIn {
    from { opacity: 0; transform: translateY(0.3em) scale(0.92); filter: blur(10px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes yearSheen {
    0%, 100% { background-position: 100% 0; }
    50%      { background-position: 0% 0; }
}

.hero__eyebrow { animation: fadeUp 0.9s var(--ease-out) 0.12s both; }
.tagline {
    max-width: 46ch;
    font-size: clamp(1rem, 1.15vw, 1.12rem);
    color: var(--text-soft);
    animation: fadeUp 0.9s var(--ease-out) 0.78s both;
}
.hero__hosts { animation: fadeUp 0.9s var(--ease-out) 0.9s both; }
.hero__actions { animation: fadeUp 0.9s var(--ease-out) 1.02s both; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Host chips --------------------------------------------- */
.hosts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    list-style: none;
}
.hosts li {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 1.05rem 0.5rem 0.85rem;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--text-soft);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--hairline);
    transition: transform 0.3s var(--ease-out), border-color 0.3s ease, color 0.3s ease;
}
.hosts li:hover {
    transform: translateY(-3px);
    color: #fff;
    border-color: rgba(212, 175, 55, 0.4);
}
.hosts .flag {
    width: 21px;
    height: 14px;
    flex: none;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.1rem 1.6rem;
}
.hint {
    font-size: 0.76rem;
    color: var(--text-muted);
    letter-spacing: 0.03em;
}
kbd {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    margin: 0 0.15rem;
    font-family: var(--font-main);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-soft);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--hairline);
    border-bottom-width: 2px;
    border-radius: 5px;
}

/* --- Emblem medallion --------------------------------------- */
.emblem {
    position: relative;
    justify-self: center;
    width: min(100%, 360px);
    aspect-ratio: 1;
    perspective: 900px;
    animation: emblemIn 1.4s var(--ease-out) 0.1s both;
}
@keyframes emblemIn {
    from { opacity: 0; transform: translateY(34px) scale(0.9); filter: blur(14px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Rotating conic halo behind the plate */
.emblem__halo {
    position: absolute;
    inset: -14%;
    border-radius: 50%;
    background: conic-gradient(from 90deg,
        var(--flag-red), var(--flag-yellow), var(--flag-green),
        var(--gold-light), var(--flag-red));
    filter: blur(52px);
    opacity: 0.32;
    animation: haloSpin 18s linear infinite;
    will-change: transform;
}
@keyframes haloSpin {
    to { transform: rotate(360deg); }
}

/* Soft floodlight cone hitting the plate from above */
.emblem__beam {
    position: absolute;
    left: 50%;
    top: -30%;
    width: 72%;
    height: 92%;
    margin-left: -36%;
    background: linear-gradient(to bottom, rgba(255, 253, 240, 0.15), rgba(255, 253, 240, 0));
    clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
    /* Fade the narrow end out so the cone has no hard top edge. */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%);
            mask-image: linear-gradient(to bottom, transparent, #000 45%);
    filter: blur(16px);
    animation: beamFlicker 5.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes beamFlicker {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* The plate itself — a light medallion so the emblem's black
   wordmark stays legible against the dark stage. */
.emblem__plate {
    position: absolute;
    inset: 6%;
    display: grid;
    place-items: center;
    padding: 11%;
    border-radius: 34px;
    background:
        radial-gradient(120% 120% at 30% 12%, #ffffff 0%, #fbf7ec 58%, #f1e9d5 100%);
    box-shadow:
        0 40px 80px -30px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(212, 175, 55, 0.55),
        0 0 0 9px rgba(212, 175, 55, 0.07),
        inset 0 2px 4px rgba(255, 255, 255, 0.9);
    overflow: hidden;
    transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    /* Tilt is smoothed in JS, so only the shadow is transitioned here. */
    transition: box-shadow 0.45s var(--ease-out);
    animation: emblemFloat 7s ease-in-out infinite;
}
@keyframes emblemFloat {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -12px; }
}
.emblem:hover .emblem__plate {
    box-shadow:
        0 48px 90px -28px rgba(0, 0, 0, 0.9),
        0 0 0 1px rgba(212, 175, 55, 0.85),
        0 0 0 12px rgba(212, 175, 55, 0.1),
        inset 0 2px 4px rgba(255, 255, 255, 0.9);
}

/* Glare sweeping diagonally across the plate */
.emblem__plate::after {
    content: '';
    position: absolute;
    top: -60%; bottom: -60%;
    left: -80%;
    width: 46%;
    z-index: 2; /* rides over the emblem, not under it */
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: skewX(-20deg);
    animation: plateGlare 6.5s ease-in-out 1.6s infinite;
    pointer-events: none;
}
@keyframes plateGlare {
    0%, 55%   { left: -80%; }
    85%, 100% { left: 150%; }
}

.emblem__logo {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.55s var(--ease-spring);
}
.emblem:hover .emblem__logo { transform: scale(1.05); }

/* Orbiting accent bead — reads as a ball circling the crest */
.emblem__orbit {
    position: absolute;
    inset: -2%;
    border-radius: 50%;
    border: 1px dashed rgba(212, 175, 55, 0.22);
    animation: haloSpin 24s linear infinite;
    pointer-events: none;
}
.emblem__orbit::before {
    content: '';
    position: absolute;
    top: -6px; left: 50%;
    width: 11px; height: 11px;
    margin-left: -5.5px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow: 0 0 14px 3px rgba(244, 217, 123, 0.75);
}

/* =====================================================
   6. COUNTDOWN
   ===================================================== */
.countdown {
    margin-top: clamp(1.75rem, 4vh, 2.75rem);
    padding: clamp(1.4rem, 2.5vw, 2rem);
    border-radius: 26px;
    /* Pure-CSS entrance, timed to land just after the headline
       finishes staggering. Never depends on JS being alive. */
    animation: fadeUp 1s var(--ease-out) 1.15s both;
}

.countdown__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem 1rem;
    margin-bottom: 1.4rem;
}
.countdown__title {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
}
.countdown__note {
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

.countdown__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.5rem, 1.4vw, 1rem);
}

.cd-cell {
    position: relative;
    padding: 1.15rem 0.5rem 0.95rem;
    text-align: center;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
    border: 1px solid var(--hairline);
    overflow: hidden;
    transition: border-color 0.35s ease, transform 0.35s var(--ease-out);
}
.cd-cell:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 175, 55, 0.35);
}
.cd-cell::before {
    content: '';
    position: absolute;
    top: 0; left: 15%; right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.7), transparent);
}

.cd-cell__num {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 4.6vw, 3.1rem);
    font-weight: 700;
    line-height: 1;
    color: #fff;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: 'lnum' 1, 'onum' 0, 'tnum' 1;
    text-shadow: 0 0 26px rgba(244, 217, 123, 0.22);
}
.cd-cell__unit {
    display: block;
    margin-top: 0.55rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* =====================================================
   7. TRI-COLOUR TICKER
   ===================================================== */
.ticker {
    position: relative;
    z-index: 10;
    margin-top: clamp(2rem, 5vh, 3.5rem);
    padding: 0.85rem 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track {
    display: flex;
    width: max-content;
    animation: tickerRun 34s linear infinite;
    will-change: transform;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes tickerRun {
    to { transform: translateX(-50%); }
}
.ticker__group {
    display: flex;
    align-items: center;
    flex: none;
}
.ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}
.ticker__item b { color: var(--text-soft); font-weight: 700; }
.ticker__dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--gold);
    flex: none;
}
.ticker__item:nth-child(3n+2) .ticker__dot { background: var(--flag-red); }
.ticker__item:nth-child(3n)   .ticker__dot { background: var(--flag-green); }

/* =====================================================
   8. FOOTER
   ===================================================== */
footer {
    position: relative;
    z-index: 10;
    padding: 2rem 0 2.4rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem 1.5rem;
}
footer a {
    position: relative;
    color: var(--gold);
    text-decoration: none;
    transition: color 0.25s ease;
}
footer a::after {
    content: '';
    position: absolute;
    left: 0; bottom: -3px;
    width: 100%; height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease-out);
}
footer a:hover { color: #fff; }
footer a:hover::after { transform: scaleX(1); }

.footer__link-btn {
    font: inherit;
    color: var(--gold);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* =====================================================
   9. MODAL
   ===================================================== */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(3, 6, 14, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s;
}
.modal.is-open {
    opacity: 1;
    visibility: visible;
}

.modal__box {
    position: relative;
    width: 100%;
    max-width: 500px;
    max-height: calc(100dvh - 2.5rem);
    overflow-y: auto;
    padding: 2.75rem 2.4rem 2.4rem;
    border-radius: 26px;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--ink-700), var(--ink-700)) padding-box,
        linear-gradient(145deg, rgba(212,175,55,0.65), rgba(4,166,75,0.3) 42%, rgba(227,6,19,0.42) 100%) border-box;
    box-shadow: 0 44px 90px -28px rgba(0, 0, 0, 0.9);
    transform: translateY(26px) scale(0.94);
    opacity: 0;
    transition: transform 0.5s var(--ease-out), opacity 0.4s ease;
}
.modal.is-open .modal__box {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.modal__close {
    position: absolute;
    top: 1rem; right: 1rem;
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hairline);
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.25s ease, transform 0.3s var(--ease-out), background-color 0.25s ease;
}
.modal__close:hover {
    color: #fff;
    background: rgba(227, 6, 19, 0.22);
    transform: rotate(90deg);
}

.modal__badge {
    width: 54px; height: 54px;
    margin: 0 auto 1.15rem;
    display: grid;
    place-items: center;
    border-radius: 17px;
    color: var(--gold-light);
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.32);
}
.modal__badge svg { width: 24px; height: 24px; }

.modal__title {
    font-family: var(--font-heading);
    font-size: 1.9rem;
    font-weight: 700;
    text-align: center;
    color: #fff;
    margin-bottom: 0.5rem;
}
.modal__desc {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1.9rem;
}

/* --- Floating-label fields ---------------------------------- */
.field {
    position: relative;
    margin-bottom: 1.3rem;
}
.field__input {
    width: 100%;
    padding: 1.45rem 1.1rem 0.6rem;
    font-family: var(--font-main);
    font-size: 0.95rem;
    color: #fff;
    background: rgba(4, 7, 15, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
textarea.field__input {
    resize: vertical;
    min-height: 132px;
    line-height: 1.55;
    /* Leaves room for the character counter in the bottom corner. */
    padding-bottom: 1.75rem;
}
.field__label {
    position: absolute;
    left: 1.15rem;
    top: 1.05rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    pointer-events: none;
    transform-origin: left top;
    transition: transform 0.22s var(--ease-out), color 0.22s ease;
}
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label {
    transform: translateY(-0.72rem) scale(0.72);
    color: var(--gold);
}
.field__input:focus {
    border-color: rgba(212, 175, 55, 0.75);
    background: rgba(4, 7, 15, 0.9);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15);
}
.field__input[aria-invalid="true"] {
    border-color: rgba(239, 68, 68, 0.75);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14);
    animation: shake 0.4s ease;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}
.field__counter {
    position: absolute;
    /* Offset to clear the textarea's native resize grip. */
    right: 1.6rem;
    bottom: 0.55rem;
    font-size: 0.68rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* Honeypot — hidden from humans, tempting for bots */
.hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    opacity: 0;
}

.btn--submit {
    width: 100%;
    padding: 1.05rem;
    border-radius: 14px;
    color: #0a0d16;
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 45%, var(--gold-deep) 100%);
    box-shadow: 0 12px 26px -10px rgba(212, 175, 55, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn--submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -10px rgba(212, 175, 55, 0.7),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn--submit:disabled {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-muted);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}
.btn--submit:disabled::after { display: none; }

.spinner {
    width: 17px; height: 17px;
    border: 2.5px solid rgba(255, 255, 255, 0.25);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.85s linear infinite;
    display: none;
    flex: none;
}
.is-loading .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.feedback {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.85rem;
    line-height: 1.45;
    text-align: center;
    display: none;
    animation: fadeUp 0.4s var(--ease-out) both;
}
.feedback.is-error {
    display: block;
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.32);
}

/* --- Success state ------------------------------------------ */
.sent {
    display: none;
    text-align: center;
    padding: 1rem 0 0.5rem;
}
.modal__box.is-sent .sent { display: block; animation: fadeUp 0.5s var(--ease-out) both; }
.modal__box.is-sent #contactForm,
.modal__box.is-sent .modal__badge,
.modal__box.is-sent .modal__title,
.modal__box.is-sent .modal__desc { display: none; }

.sent__mark {
    width: 76px; height: 76px;
    margin: 0 auto 1.4rem;
}
.sent__mark circle, .sent__mark path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.sent__mark circle {
    stroke: rgba(4, 166, 75, 0.55);
    stroke-width: 3;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: drawCircle 0.7s var(--ease-out) 0.05s forwards;
}
.sent__mark path {
    stroke: var(--flag-green);
    stroke-width: 5;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: drawCheck 0.4s var(--ease-out) 0.55s forwards;
}
@keyframes drawCircle { to { stroke-dashoffset: 0; } }
@keyframes drawCheck  { to { stroke-dashoffset: 0; } }

.sent__title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: #fff;
    margin-bottom: 0.5rem;
}
.sent__text {
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 32ch;
    margin: 0 auto;
}

/* Confetti particles fired on a successful send */
.confetti {
    position: fixed;
    inset: 0;
    z-index: 1200;
    pointer-events: none;
    overflow: hidden;
}
.confetti i {
    position: absolute;
    width: 8px; height: 14px;
    border-radius: 2px;
    will-change: transform, opacity;
}

/* =====================================================
   10. NO-SCRIPT NOTICE
   ===================================================== */
.noscript-note {
    position: relative;
    z-index: 20;
    margin: 1rem auto;
    max-width: var(--shell);
    padding: 0.85rem 1.1rem;
    border-radius: 12px;
    font-size: 0.85rem;
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.3);
    text-align: center;
}

/* =====================================================
   11. RESPONSIVE
   ===================================================== */
@media (max-width: 960px) {
    .hero__grid {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 2.5rem;
    }
    .hero__copy { order: 2; }
    .emblem     { order: 1; width: min(78%, 320px); }
    .tagline    { margin-inline: auto; }
    .hosts      { justify-content: center; }
    .hero__actions { justify-content: center; }
    .countdown__head { justify-content: center; text-align: center; }
}

@media (max-width: 560px) {
    .brand__text { letter-spacing: 0.12em; font-size: 0.7rem; }
    .countdown__grid { grid-template-columns: repeat(2, 1fr); }
    .modal__box { padding: 2.4rem 1.4rem 1.9rem; border-radius: 22px; }
    .btn--primary { width: 100%; }
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hint { text-align: center; }
}

/* =====================================================
   12. REDUCED MOTION
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .fx__spot, .fx__grain { display: none; }
}

/* =====================================================
   13. NEWS HUB PORTAL
   ===================================================== */
.news-hub {
    padding: clamp(3rem, 8vh, 6rem) 0 clamp(2rem, 5vh, 4rem);
    position: relative;
    z-index: 10;
}
.news-hub__header {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 3rem;
    text-align: center;
}
.news-hub__title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 700;
    color: #fff;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}
.news-hub__title em {
    font-style: normal;
    color: var(--gold);
}
.news-hub__subtitle {
    font-size: 0.95rem;
    color: var(--text-soft);
    max-width: 60ch;
    margin: 0 auto;
}

/* Tabs Filter */
.news-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-bottom: 3rem;
}
.news-tab-btn {
    padding: 0.65rem 1.6rem;
    border-radius: 100px;
    font-family: var(--font-main);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--hairline);
    color: var(--text-soft);
    cursor: pointer;
    transition: transform 0.3s var(--ease-out),
                background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease,
                box-shadow 0.3s var(--ease-out);
}
.news-tab-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}
.news-tab-btn.is-active {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: #04070f;
    border-color: var(--gold);
    box-shadow: 0 10px 24px -8px rgba(212, 175, 55, 0.6);
    transform: translateY(-2px);
}

/* News Grid */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2.2rem;
    transition: opacity 0.35s ease;
}

.news-card {
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    overflow: hidden;
    transition: transform 0.4s var(--ease-out),
                border-color 0.4s ease,
                box-shadow 0.4s ease;
}
.news-card:hover {
    transform: translateY(-8px);
    border-color: rgba(212, 175, 55, 0.35);
    box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.85);
}

/* Category Badges */
.news-card__tag {
    display: inline-block;
    align-self: flex-start;
    padding: 0.35rem 0.9rem;
    border-radius: 50px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 2;
    margin-bottom: 0.8rem;
}
.news-card__tag--la-liga { background: var(--flag-red); color: #fff; }
.news-card__tag--bundesliga { background: #1c1917; color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
.news-card__tag--ligue-1 { background: #1e3a8a; color: #60a5fa; border: 1px solid rgba(96,165,250,0.3); }
.news-card__tag--eredivisie { background: #ea580c; color: #fff; }
.news-card__tag--primeira-liga { background: var(--flag-green); color: #fff; }

.news-card__body {
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.news-card__meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.news-card__title {
    font-family: var(--font-main);
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.45;
    color: #fff;
    margin-bottom: 0.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}
.news-card:hover .news-card__title {
    color: var(--gold-light);
}
.news-card__excerpt {
    font-size: 0.86rem;
    color: var(--text-soft);
    line-height: 1.6;
    margin-bottom: 1.6rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card__footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.news-card__readmore {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.3s ease;
}
.news-card:hover .news-card__readmore {
    color: var(--gold-light);
}
.news-card__readmore svg {
    width: 14px;
    height: 14px;
    transition: transform 0.35s var(--ease-out);
}
.news-card:hover .news-card__readmore svg {
    transform: translateX(4px);
}

/* Hand-off row at the bottom of the quick-read modal */
.news-modal__actions {
    display: flex;
    justify-content: center;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hairline);
}
.news-modal__actions .btn--primary {
    padding: 0.9rem 1.9rem;
    font-size: 0.78rem;
}

/* News Modal Metas */
.news-modal__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--hairline);
}

/* =====================================================
   14. PORTAL NAVIGATION
   Shared by every page so the top bar never shifts
   between Home, News and Live TV.
   ===================================================== */
.topbar__inner {
    gap: 1rem 1.5rem;
}

.nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    padding: 0.25rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--hairline);
}

.nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.15rem;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: var(--font-main);
    transition: color 0.3s ease, background-color 0.3s ease,
                border-color 0.3s ease, transform 0.3s var(--ease-out);
}
.nav__link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-1px);
}
.nav__link.is-active {
    color: var(--gold-light);
    background: rgba(212, 175, 55, 0.13);
    border-color: rgba(212, 175, 55, 0.32);
}
.nav__link svg {
    width: 14px;
    height: 14px;
    flex: none;
}

/* Red dot marking the Live TV entry as always-on */
.nav__live {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--flag-red);
    flex: none;
    animation: navLivePulse 2s ease-out infinite;
}
@keyframes navLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(227, 6, 19, 0.65); }
    70%  { box-shadow: 0 0 0 7px rgba(227, 6, 19, 0); }
    100% { box-shadow: 0 0 0 0 rgba(227, 6, 19, 0); }
}

/* Burger only ever appears once the pill nav no longer fits */
.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    color: var(--text-soft);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--hairline);
    cursor: pointer;
    transition: color 0.25s ease, background-color 0.25s ease;
}
.nav-toggle:hover { color: #fff; background: rgba(212, 175, 55, 0.14); }
.nav-toggle svg { width: 19px; height: 19px; }

@media (max-width: 900px) {
    .nav-toggle { display: grid; }
    .topbar__inner { position: relative; }
    .nav {
        position: absolute;
        top: calc(100% + 0.75rem);
        right: 0;
        left: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        margin-left: 0;
        padding: 0.6rem;
        border-radius: 20px;
        background: rgba(7, 13, 28, 0.97);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 32px 64px -22px rgba(0, 0, 0, 0.9);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.3s var(--ease-out), visibility 0.3s;
    }
    .nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .nav__link { justify-content: flex-start; padding: 0.8rem 1rem; }
}

/* =====================================================
   15. INTERIOR PAGE HEADER
   The scaled-down cousin of the home hero, so News and
   Live TV open with the same rhythm as the landing page.
   ===================================================== */
.page-head {
    padding: clamp(1.75rem, 5vh, 3rem) 0 clamp(1.25rem, 3vh, 2rem);
}
.page-head__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    animation: fadeUp 0.8s var(--ease-out) both;
}
.page-head--center .page-head__inner {
    align-items: center;
    text-align: center;
}
.page-head__title {
    font-family: var(--font-heading);
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.015em;
    color: #fff;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}
.page-head__title em {
    font-style: normal;
    background: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold-light) 34%, #fffdf3 48%, var(--gold-light) 62%, var(--gold-deep) 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--gold);
    animation: yearSheen 7s ease-in-out infinite;
}
.page-head__lede {
    max-width: 62ch;
    font-size: clamp(0.92rem, 1.1vw, 1.02rem);
    color: var(--text-soft);
}

/* Breadcrumb trail */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.crumbs a {
    color: var(--text-soft);
    text-decoration: none;
    transition: color 0.25s ease;
}
.crumbs a:hover { color: var(--gold); }
.crumbs li::after {
    content: "/";
    margin-left: 0.5rem;
    color: rgba(255, 255, 255, 0.2);
}
.crumbs li:last-child { color: var(--gold); }
.crumbs li:last-child::after { content: none; }

/* Back-to-home pill, reused on every interior page */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.68rem 1.4rem;
    border-radius: 100px;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-soft);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--hairline);
    cursor: pointer;
    font-family: var(--font-main);
    transition: color 0.3s ease, background-color 0.3s ease,
                border-color 0.3s ease, transform 0.3s var(--ease-out);
}
.back-link:hover {
    color: #fff;
    background: rgba(212, 175, 55, 0.14);
    border-color: rgba(212, 175, 55, 0.45);
    transform: translateX(-3px);
}
.back-link svg {
    width: 15px;
    height: 15px;
    flex: none;
    transition: transform 0.3s var(--ease-out);
}
.back-link:hover svg { transform: translateX(-3px); }

/* =====================================================
   16. LIVE TV PROMO BAND
   Sits on the home page and points at the @Live module.
   ===================================================== */
.tv-promo {
    position: relative;
    z-index: 10;
    padding: 0 0 clamp(2.5rem, 7vh, 5rem);
}
.tv-promo__card {
    position: relative;
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    align-items: center;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    padding: clamp(1.9rem, 4vw, 3.2rem);
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid transparent;
    background:
        linear-gradient(150deg, rgba(11, 20, 40, 0.92), rgba(4, 7, 15, 0.92)) padding-box,
        linear-gradient(145deg, rgba(212, 175, 55, 0.6), rgba(4, 166, 75, 0.28) 46%, rgba(227, 6, 19, 0.4) 100%) border-box;
    box-shadow: 0 40px 80px -34px rgba(0, 0, 0, 0.9);
}
/* Faint floodlight wash behind the copy */
.tv-promo__card::before {
    content: "";
    position: absolute;
    top: -55%;
    right: -10%;
    width: 60%;
    height: 210%;
    background: radial-gradient(circle at center, rgba(212, 175, 55, 0.16), transparent 62%);
    pointer-events: none;
}
.tv-promo__copy {
    position: relative;
    z-index: 1;
}
.tv-promo__copy > * + * { margin-top: 1.15rem; }
.tv-promo__title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.6vw, 2.7rem);
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}
.tv-promo__title em { font-style: normal; color: var(--gold); }
.tv-promo__text {
    max-width: 52ch;
    font-size: 0.95rem;
    color: var(--text-soft);
}
.tv-promo__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    list-style: none;
}
.tv-promo__stats li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--hairline);
}

/* Stylised TV set drawn in CSS — no image dependency */
.tv-promo__screen {
    position: relative;
    z-index: 1;
    aspect-ratio: 16 / 10;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(140deg, #0d1a33 0%, #050a16 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.8),
                0 24px 50px -22px rgba(212, 175, 55, 0.35);
    display: grid;
    place-items: center;
}
/* Pitch markings inside the screen */
.tv-promo__screen::before {
    content: "";
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    background:
        linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(255,255,255,0.14) calc(50% - 0.5px), rgba(255,255,255,0.14) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        radial-gradient(circle at center, transparent 16%, rgba(255,255,255,0.14) 16%, rgba(255,255,255,0.14) calc(16% + 1px), transparent calc(16% + 1px));
}
/* Scanline sheen sweeping the screen */
.tv-promo__screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, transparent 30%);
    animation: tvSweep 5s ease-in-out infinite;
}
@keyframes tvSweep {
    0%, 100% { transform: translateY(-8%); opacity: 0.5; }
    50%      { transform: translateY(8%);  opacity: 1; }
}
.tv-promo__badge {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 1.1rem;
    border-radius: 100px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(227, 6, 19, 0.85);
    box-shadow: 0 10px 26px -8px rgba(227, 6, 19, 0.8);
}
.tv-promo__badge i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    animation: beamFlicker 1.6s ease-in-out infinite;
}

@media (max-width: 860px) {
    .tv-promo__card { grid-template-columns: 1fr; }
    .tv-promo__screen { order: -1; }
}

/* =====================================================
   17. SHARED UTILITIES
   ===================================================== */
.is-hidden,
[hidden] { display: none !important; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Brand scrollbars, applied portal-wide */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ink-600) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--ink-600);
    border-radius: 100px;
}
::-webkit-scrollbar-thumb:hover { background: #1a2d54; }

/* =====================================================
   18. STORY LINK LIST
   Compact article links used by the News rail and the 404
   page. Shared so the two can never drift apart.
   ===================================================== */
.rail__list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.rail__item {
    display: block;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--hairline);
    transition: transform 0.3s var(--ease-out),
                background-color 0.3s ease, border-color 0.3s ease;
}
.rail__item:hover {
    transform: translateX(4px);
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.3);
}
.rail__item.is-current {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.4);
}
.rail__item-cat {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.4rem;
}
.rail__item-title {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}
.rail__item:hover .rail__item-title { color: var(--gold-light); }
.rail__item-date {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.68rem;
    color: var(--text-muted);
}