@font-face{font-family:"Barlow Condensed";src:url("./barlow-condensed-700-latin.3787a5a419.woff2") format("woff2");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("./barlow-condensed-800-latin.2515494e8c.woff2") format("woff2");font-style:normal;font-weight:800;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url("./atkinson-hyperlegible-next-latin.18b2a1a39a.woff2") format("woff2");font-style:normal;font-weight:400 700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("./ibm-plex-mono-600-latin.0d1f0b8d07.woff2") format("woff2");font-style:normal;font-weight:600;font-display:swap}

:root{
  --receiver:#070a0a;--raised:#111616;--rule:#303737;--rule-strong:#697171;
  --paper:#f1eddf;--muted:#b7b4a9;--focus-inner:#070a0a;--focus-outer:#f1eddf;
  --gutter:clamp(2rem,3.333vw,3rem);--max:90rem;
  color-scheme:dark;font-synthesis:none;text-rendering:optimizeLegibility
}
*{box-sizing:border-box}
html{background:var(--receiver);scroll-behavior:smooth}
body{margin:0;min-width:320px;overflow-x:hidden;background:var(--receiver);color:var(--paper);font-family:"Atkinson Hyperlegible Next","Segoe UI","Noto Sans",sans-serif;font-size:1.125rem;line-height:1.5}
a{color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--paper);color:var(--receiver)}

.page-grid{position:fixed;z-index:0;inset:0;pointer-events:none;opacity:.52;background-image:linear-gradient(to right,transparent calc(100% - 1px),var(--rule) 1px);background-size:calc((100vw - 2 * var(--gutter))/8 + 3px) 100%;background-position:var(--gutter) 0;mask-image:linear-gradient(to bottom,transparent 0,#000 9rem,#000 85%,transparent 100%)}
.masthead,main,footer{position:relative;z-index:1;width:min(100%,var(--max));margin-inline:auto;padding-inline:var(--gutter)}
.skip-link{position:fixed;z-index:20;top:0;left:var(--gutter);min-height:44px;padding:.65rem 1rem;transform:translateY(-130%);background:var(--paper);color:var(--receiver);font-weight:700;text-decoration:none}
.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:2px solid var(--focus-inner);outline-offset:2px;box-shadow:0 0 0 5px var(--focus-outer)}
main:focus{outline:0;box-shadow:none}

.masthead{display:flex;min-height:6.75rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule)}
.brand,.footer-brand{display:inline-flex;min-height:44px;align-items:center;padding:.25rem}
.brand img{width:13.625rem;height:auto}
.masthead nav a,.footer-links a{display:inline-flex;min-height:44px;align-items:center;padding:.5rem .25rem;font-family:"IBM Plex Mono","Cascadia Mono",monospace;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-transform:uppercase}
.masthead nav a:hover,.footer-links a:hover{text-decoration-color:var(--paper)}

.signal-stage{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:1.5rem;align-items:start;padding-block:clamp(3rem,6vh,5.25rem) 3rem;min-height:calc(100vh - 6.75rem)}
.intro{grid-column:1/span 3;align-self:center;padding-block:1rem}
.receiver-label,.live-marker,.metadata{font-family:"IBM Plex Mono","Cascadia Mono","Liberation Mono",monospace;font-size:.75rem;font-weight:600;line-height:1.25;letter-spacing:.12em;text-transform:uppercase}
.receiver-label{margin:0 0 1.5rem;color:var(--muted)}
.intro h1,.empty-state h1,.not-found h1{max-width:9ch;margin:0;overflow-wrap:anywhere;font-family:"Barlow Condensed","Arial Narrow","Liberation Sans Narrow",sans-serif;font-size:clamp(3.5rem,6.1vw,5.5rem);font-weight:800;line-height:.86;letter-spacing:-.035em;text-transform:uppercase;text-wrap:balance}
.promise{max-width:32rem;margin:1.75rem 0 0;color:var(--muted);text-wrap:pretty}

.channel{display:grid;grid-column:4/-1;grid-template-columns:minmax(0,1.45fr) minmax(14rem,.65fr);grid-template-areas:"media heading" "media heading" "link summary";border-top:1px solid var(--channel-accent);border-right:1px solid var(--channel-accent);background:var(--raised);transform:translateX(clamp(0px,2vw,2rem));animation:acquire 240ms cubic-bezier(.16,1,.3,1) both}

.channel-heading{grid-area:heading;display:flex;min-width:0;flex-direction:column;padding:1.5rem;background:var(--channel-surface)}
.live-marker{display:flex;align-items:center;gap:.75rem;color:var(--channel-accent)}
.live-marker span{width:.5rem;height:.5rem;flex:0 0 auto;background:var(--channel-accent)}
.channel h2{margin:auto 0 0;font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-size:clamp(2rem,3vw,3rem);font-weight:800;line-height:.95;letter-spacing:-.025em;text-transform:uppercase;text-wrap:balance}
.metadata{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-top:1rem;color:var(--muted)}
.metadata span+span::before{content:"·";margin-right:1rem;color:var(--channel-accent)}
.channel-media{grid-area:media;min-width:0;background:var(--raised)}
.media-fallback,.game-media{position:relative;aspect-ratio:16/10;min-height:100%;margin:0;overflow:hidden;border-bottom:1px solid var(--channel-accent);background-color:var(--raised);background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:12.5% 25%}
.media-fallback{display:grid;place-items:center;color:var(--paper);font-family:"IBM Plex Mono",monospace;font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-align:center}
.media-fallback::before,.media-fallback::after{content:"";position:absolute;width:1.5rem;height:1.5rem;border-color:var(--channel-accent);opacity:.9}
.media-fallback::before{top:1rem;left:1rem;border-top:2px solid var(--channel-accent);border-left:2px solid var(--channel-accent)}
.media-fallback::after{right:1rem;bottom:1rem;border-right:2px solid var(--channel-accent);border-bottom:2px solid var(--channel-accent)}
.fallback-marker{position:absolute;top:49%;left:50%;width:2.25rem;height:2.25rem;transform:translate(-50%,-50%) rotate(45deg);border:1px solid var(--rule-strong)}
.game-media img{width:100%;height:100%;object-fit:cover;object-position:var(--focal-x,62%) var(--focal-y,65%)}
.media-fallback--error{display:none;position:absolute;inset:0}
.game-media.is-error>picture{display:none}.game-media.is-error>.media-fallback--error{display:grid}
.play-link{grid-area:link;display:flex;min-height:56px;align-items:center;justify-content:space-between;gap:1.5rem;padding:1rem 1.25rem;background:var(--channel-accent);color:var(--channel-on-accent);font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-size:1.25rem;font-weight:700;line-height:1;text-decoration:none;text-transform:uppercase;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);transition:background-color 120ms cubic-bezier(.2,.8,.2,1)}
.play-link>span:first-child{min-width:0;overflow-wrap:anywhere}
.play-link:hover{background:color-mix(in srgb,var(--channel-accent) 75%,white)}
.play-link .arrow{font-family:"Atkinson Hyperlegible Next",sans-serif;transition:transform 120ms cubic-bezier(.2,.8,.2,1)}
.play-link:hover .arrow{transform:translate(4px,-4px)}
.play-link:active span{transform:translateY(1px)}
.play-link:focus-visible{position:relative;z-index:2;clip-path:none}
.channel-summary{grid-area:summary;align-self:center;margin:0;padding:1rem 1.5rem;color:var(--muted);font-size:1rem}

.channel--unavailable{grid-template-areas:"media heading";border-color:var(--rule-strong)}
.channel--unavailable .channel-heading{justify-content:end}
.channel--unavailable h2{margin:0}
.channel--unavailable h3{margin:auto 0 .5rem;font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-size:2rem;line-height:1;text-transform:uppercase}
.channel--unavailable p{margin:0;color:var(--muted)}
.channel--unavailable .media-fallback,.channel--unavailable .game-media{border-color:var(--rule-strong)}

.brand-statement{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:1.5rem;align-items:start;padding-block:4rem;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.brand-statement .receiver-label{grid-column:1/span 2;margin:.5rem 0 0}
.brand-statement h2{grid-column:4/span 2;margin:0;font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-size:clamp(1.5rem,2.2vw,2.25rem);line-height:1.05;text-transform:uppercase}
.brand-statement>p:last-child{grid-column:6/-1;max-width:32rem;margin:0;color:var(--muted)}
.signal-index{padding-block:4rem;border-bottom:1px solid var(--rule)}
.signal-index>h2{margin:0;font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-size:clamp(2rem,3vw,3rem);line-height:.95;text-transform:uppercase}
.signal-index>ul{margin:2rem 0 0;padding:0;list-style:none;border-top:1px solid var(--rule-strong)}
.signal-index-item{display:flex;min-height:6rem;align-items:center;justify-content:space-between;gap:2rem;padding:1rem 0;border-bottom:1px solid var(--rule)}
.signal-index-item .receiver-label{margin:0 0 .35rem}.signal-index-item h3{margin:0;font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-size:1.5rem;line-height:1;text-transform:uppercase}
.signal-index-item>a{display:inline-flex;min-height:44px;align-items:center;padding:.5rem .25rem;font-family:"IBM Plex Mono",monospace;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-underline-offset:5px}
.signal-index-item>p{margin:0;color:var(--muted)}
footer{display:flex;min-height:7.5rem;align-items:center;justify-content:space-between;gap:2rem}
.footer-brand img{width:8.25rem;height:auto}
.footer-links{display:flex;gap:1rem}

.empty-state{min-height:calc(100vh - 6.75rem);padding-block:clamp(4rem,12vh,8rem)}
.empty-state h1{max-width:11ch}.empty-state>p:last-child{max-width:36rem;color:var(--muted)}
.not-found{display:flex;min-height:100vh;flex-direction:column;align-items:flex-start;justify-content:center}
.not-found>img{margin-bottom:3rem}.not-found h1{max-width:10ch}.not-found>p:not(.receiver-label){color:var(--muted)}
.neutral-link{display:inline-flex;min-height:52px;align-items:center;margin-top:1rem;padding:.75rem 1rem;border:2px solid var(--paper);font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-size:1.25rem;font-weight:700;text-transform:uppercase;text-decoration:none}

@keyframes acquire{from{opacity:.72;transform:translateX(clamp(0px,2vw,2rem)) scale(.98)}to{opacity:1;transform:translateX(clamp(0px,2vw,2rem)) scale(1)}}

@media (max-width:1023px){
  .page-grid{background-size:calc((100vw - 2 * var(--gutter))/4 + 5px) 100%}
  .signal-stage{display:block;min-height:auto;padding-block:3rem}
  .intro{max-width:42rem;margin-bottom:2.5rem}
  .intro h1{font-size:clamp(3rem,8vw,4.5rem);line-height:.88}
  .channel{transform:none;grid-template-columns:minmax(0,1fr);grid-template-areas:"heading" "media" "link" "summary"}
  .channel-heading{min-height:10rem}.channel h2{margin:2.5rem 0 0}
  .channel-media{max-width:48rem}
  .channel--unavailable{grid-template-areas:"heading" "media"}
  .brand-statement{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
  .brand-statement .receiver-label{grid-column:1}.brand-statement h2{grid-column:2/span 2}.brand-statement>p:last-child{grid-column:2/-1}
}

@media (max-width:767px){
  :root{--gutter:1.25rem}
  body{font-size:1rem}
  .masthead{min-height:4.25rem;border-bottom:0}.brand img{width:10.5rem}.masthead nav{display:none}
  .signal-stage{padding-block:.75rem 2.5rem}
  .intro{margin-bottom:1rem;padding:0}
  .receiver-label{margin-bottom:.5rem;font-size:.6875rem}
  .intro h1{font-size:clamp(2.625rem,13vw,4rem);line-height:.9}
  .promise{max-width:35ch;margin-top:.6rem;line-height:1.35}
  .channel{border-right:0;background:transparent}
  .channel-heading{min-height:0;padding:.75rem 0;background:transparent}
  .channel h2{margin:.35rem 0 0;font-size:2rem;line-height:1}
  .metadata{gap:.35rem .65rem;margin-top:.25rem;font-size:.625rem}
  .metadata span+span::before{margin-right:.65rem}
  .live-marker{font-size:.6875rem}
  .channel-media{width:min(100%,15.625rem);justify-self:end;border-right:1px solid var(--channel-accent);border-left:1px solid var(--channel-accent)}
  .media-fallback,.game-media{aspect-ratio:4/5;background-size:25% 20%}
  .play-link{width:100%;min-height:52px;margin-top:.75rem;font-size:1.125rem}
  .channel-summary{padding:.65rem 0 0;font-size:.875rem;line-height:1.35}
  .channel--unavailable .channel-heading{padding-bottom:1.25rem}.channel--unavailable h3{margin:1.5rem 0 .5rem}
  .brand-statement{display:block;padding-block:2.5rem}.brand-statement h2{font-size:1.5rem}.brand-statement>p:last-child{margin-top:.75rem}
  .signal-index{padding-block:2.5rem}.signal-index-item{align-items:flex-start;flex-direction:column;gap:.5rem}
  footer{min-height:auto;align-items:flex-start;flex-direction:column;padding-block:1.5rem}.footer-links{flex-direction:column}
}

@media (max-width:359px){.brand img,.footer-brand img{width:2.5rem;height:2.5rem}.channel-media{width:min(100%,17.5rem)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .channel{animation:none;transform:none}.play-link:hover .arrow{transform:none}
}

@media (forced-colors:active){.live-marker span{border:1px solid currentColor}.play-link{border:2px solid ButtonText}.media-fallback{border:2px solid CanvasText}}

.channel-id-cyberpunk-sky-raid{--channel-accent:#5EEBFF;--channel-on-accent:#070A0A;--channel-surface:#0B171A}
