@font-face {
    font-family: "Tee Franklin";
    src: url("tee franklin heavy.eot");
    src:
        url("tee franklin heavy.eot?#iefix") format("embedded-opentype"),
        url("tee franklin heavy.ttf") format("truetype"),
        url("tee franklin heavy.svg#TeeFranklin") format("svg");
}

:root{
    --bg:#0d0d0d;
    --text:#ece7da;
    --accent:#9da76f;
    --muted:#9b988e;
}

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

html,
body{
    width:100%;
    min-height:100%;
    overflow-x:hidden;
    background:#000;
    font-family:"Tee Franklin", monospace;
    color:var(--text);
}

/* =========================
   Background Video
========================= */

.video-container{
    position:fixed;
    inset:0;
    overflow:hidden;
    z-index:0;
}

.video-container video{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* =========================
   Overlay
========================= */

.overlay{
    position:fixed;
    inset:0;
    background:linear-gradient(
        rgba(0,0,0,.08),
        rgba(0,0,0,.18)
    );
    z-index:1;
}

/* =========================
   Noise
========================= */

.noise{
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.04;
    background-image:
        radial-gradient(circle,#fff 1px,transparent 1px);
    background-size:5px 5px;
    mix-blend-mode:overlay;
    z-index:2;
}

/* =========================
   Layout
========================= */

.container{
    position:relative;
    z-index:3;

    width:min(1200px,90vw);
    min-height:100%;

    margin:auto;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    padding:50px 0;
}

/* =========================
   Header
========================= */

header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    color:var(--muted);

    font-size:.85rem;
    letter-spacing:.15em;
}

.station{
    text-transform:uppercase;
}

.status{
    display:flex;
    align-items:center;
    gap:10px;
}

.dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#c43838;
    animation:pulse 1.2s infinite;
}

@keyframes pulse{
    50%{
        opacity:.2;
    }
}

/* =========================
   Main Hero
========================= */

main{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:25px;
}

h1{
    font-size:clamp(4rem,9vw,8rem);
    font-weight:400;
    letter-spacing:.10em;
    color:var(--text);
}

.tagline{
    color:var(--muted);
    letter-spacing:.25em;
    text-transform:uppercase;
    font-size:.8rem;
}

/* =========================
   Button
========================= */

.play{
    display:inline-block;

    padding:18px 42px;

    border:1px solid rgba(255,255,255,.15);

    color:var(--text);

    text-decoration:none;

    transition:.35s;

    backdrop-filter:blur(1px);
}

.play:hover{
    background:rgba(255,255,255,.08);
    transform:translateY(-2px);
}

/* =========================
   Broadcast Panel
========================= */

.broadcast{

    margin-top:80px;

    width:min(850px,100%);
    margin-left:auto;
    margin-right:auto;

    border:1px solid rgba(255,255,255,.08);

    padding:40px;

    backdrop-filter:blur(1px);

    background: rgba(12,12,12,.35);
backdrop-filter: blur(1px);
border:1px solid rgba(255,255,255,.08);

}

.broadcast-header{

    font-size:12px;

    letter-spacing:4px;

    color:#999;

    margin-bottom:35px;

    text-transform:uppercase;

}

.broadcast-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

}

.item{

    border-left:1px solid rgba(255,255,255,.08);

    padding-left:18px;

}

.item .label{

    display:block;

    margin-bottom:10px;

    font-size:11px;

    letter-spacing:3px;

    text-transform:uppercase;

    opacity:.55;

}

.item p{

    font-size:18px;

    line-height:1.7;

}

.wide{

    grid-column:span 2;

}

.live-dot{

    display:inline-block;

    width:8px;
    height:8px;

    margin-right:8px;

    border-radius:50%;

    background:#ff613d;

    animation:blink 1.4s infinite;

}

@keyframes blink{

    0%{
        opacity:1;
    }

    50%{
        opacity:.2;
    }

    100%{
        opacity:1;
    }

}

/* =========================
   Navigation
========================= */

nav{

    display:flex;

    justify-content:center;

    gap:50px;

}

nav a{

    color:var(--muted);

    text-decoration:none;

    transition:.3s;

}

nav a:hover{

    color:var(--accent);

}

/* =========================
   Mobile
========================= */

@media (max-width:700px){

    nav{

        gap:20px;
        flex-wrap:wrap;

    }

    h1{

        font-size:3rem;

    }

    .broadcast{

        padding:25px;

    }

    .broadcast-grid{

        grid-template-columns:1fr;

    }

    .wide{

        grid-column:span 1;
        
   /* ==========================================
   BROADCAST CONSOLE
========================================== */

broadcast-console{

width:min(760px,90vw);

margin:70px auto 0;

padding:35px;

background:rgba(12,12,12,.28);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.08);

box-shadow:
0 0 80px rgba(0,0,0,.35);

}

.console-header{

text-align:center;

font-size:.72rem;

letter-spacing:.45em;

text-transform:uppercase;

color:#9d9d9d;

margin-bottom:35px;

}

.console-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:22px 40px;

margin-bottom:35px;

}

.console-item{

border-left:1px solid rgba(255,255,255,.08);

padding-left:16px;

display:flex;

flex-direction:column;

gap:8px;

}

.console-item .label{

font-size:.62rem;

letter-spacing:.35em;

text-transform:uppercase;

color:#707070;

}

.console-item .value{

font-size:1.05rem;

color:#ece7da;

}

.console-message{

border-top:1px solid rgba(255,255,255,.08);

padding-top:28px;

text-align:center;

}

.console-message .label{

display:block;

font-size:.62rem;

letter-spacing:.35em;

text-transform:uppercase;

color:#707070;

margin-bottom:14px;

}

.console-message p{

color:#d7d2c6;

font-size:1rem;

line-height:1.8;

}

.standby{

display:flex;

align-items:center;

gap:10px;

}

.live-dot{

width:8px;

height:8px;

border-radius:50%;

background:#ff613d;

box-shadow:0 0 10px #ff613d;

animation:blink 1.3s infinite;

}

@keyframes blink{

0%{opacity:1;}

50%{opacity:.25;}

100%{opacity:1;}

}

@media(max-width:700px){

.console-grid{

grid-template-columns:1fr;

}

.broadcast-console{

padding:25px;

}

}     

    }

}