/* =========================================================
   RADIO ILLUMINATI — SHARED CLEAN CANVAS / v0.7
   Header calibrated from the v0.6 HOME pixel-match child.
   ========================================================= */
:root{color-scheme:dark;}
html,body{margin:0;padding:0;background:#000;color:#fff;}
body.radio-illuminati-music{overflow-x:hidden;font-family:Arial,Helvetica,sans-serif;}
*,*::before,*::after{box-sizing:border-box;}
img,video,canvas,iframe{max-width:100%;}
.ri-skip-link{position:fixed;left:12px;top:12px;z-index:100000;padding:10px 14px;background:#fff;color:#000;transform:translateY(-180%);transition:transform .2s ease;text-decoration:none;font-weight:700;}
.ri-skip-link:focus{transform:none;}

/* NAV — same calibrated Radio Illuminati header as HOME v0.6 */
.ri-site-nav{
  position:relative;
  z-index:1000;
  width:100%;
  height:54px;
  min-height:54px;
  display:flex;
  align-items:center;
  padding:0 18px;
  background:#000;
  border-bottom:3px solid #9c0000;
}
.ri-nav-mark{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  color:#fff;
  text-decoration:none;
}
.ri-nav-logo{display:block;width:42px;height:auto;}
.ri-nav-links{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  white-space:nowrap;
}
.ri-nav-links a{
  position:relative;
  color:rgba(255,255,255,.94);
  text-decoration:none;
  font-size:20px;
  font-weight:400;
  line-height:1;
  letter-spacing:.15em;
  text-transform:uppercase;
  transition:color .16s ease;
}
.ri-nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  right:.15em;
  bottom:-10px;
  height:2px;
  background:#9c0000;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .16s ease;
}
.ri-nav-links a:hover,
.ri-nav-links a:focus-visible{color:#9c0000;}
.ri-nav-links a:hover::after,
.ri-nav-links a:focus-visible::after{transform:scaleX(1);}
.ri-nav-links a[aria-current="page"]{color:rgba(255,255,255,.94);}
.ri-nav-links a[aria-current="page"]::after{transform:scaleX(0);}
.ri-nav-mobile{display:none;position:relative;margin-left:auto;}
.ri-nav-mobile summary{list-style:none;cursor:pointer;color:#fff;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;}
.ri-nav-mobile summary::-webkit-details-marker{display:none;}
.ri-nav-mobile-panel{position:absolute;right:0;top:30px;min-width:190px;padding:12px;background:rgba(0,0,0,.96);border:1px solid rgba(255,255,255,.12);}
.ri-nav-mobile-panel a{display:block;padding:10px 8px;color:#fff;text-decoration:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;}
@media(max-width:1280px) and (min-width:768px){
  .ri-nav-links{gap:12px;}
  .ri-nav-links a{font-size:18px;}
}
@media(max-width:767px){
  .ri-site-nav{height:58px;min-height:58px;padding:0 17px;border-bottom-color:rgba(156,0,0,.90);}
  .ri-nav-logo{width:38px;}
  .ri-nav-mark{width:40px;height:44px;}
  .ri-nav-links{display:none;}
  .ri-nav-mobile{display:block;}
}


/* =========================================================
   RADIO ILLUMINATI
   MUSIC JOURNEY → ONE LIVE JUKEBOX → TERMINAL
========================================================= */


/* =========================================================
   MAIN EXPERIENCE
========================================================= */

#ri-music-experience{
  position:relative;

  width:100vw;
  max-width:100vw;

  margin:0;
  margin-left:calc(50% - 50vw);

  padding:0;

  background:#000;

  overflow:visible;
}

#ri-music-experience,
#ri-music-experience *{
  box-sizing:border-box;
}


/* =========================================================
   JOURNEY
========================================================= */

#ri-jukebox-journey{
  position:relative;

  width:100vw;

  height:500vh;

  margin:0;
  padding:0;

  background:#000;

  overflow:visible;
}


/* =========================================================
   JOURNEY CINEMA STAGE

   TRUE 16:9.
========================================================= */

#ri-journey-stage{
  position:absolute;

  left:0;
  top:0;

  width:100vw;
  height:56.25vw;

  margin:0;
  padding:0;

  overflow:hidden;

  background:#000;

  z-index:99999;

  pointer-events:none;

  opacity:1;

  line-height:0;
}


#ri-journey-stage.ri-fixed{
  position:fixed !important;

  left:0 !important;
  top:0 !important;

  width:100vw !important;
  height:56.25vw !important;

  margin:0 !important;
  padding:0 !important;

  transform:none !important;
}


/* =========================================================
   JOURNEY FRAMES
========================================================= */

.ri-journey-frame{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  display:block;

  max-width:none !important;

  margin:0 !important;
  padding:0 !important;

  border:0;

  object-fit:cover;
  object-position:center top;

  pointer-events:none;

  user-select:none;
  -webkit-user-select:none;

  will-change:opacity;
}


#ri-frame-a{
  z-index:1;
  opacity:1;
}


#ri-frame-b{
  z-index:2;
  opacity:0;
}


/* =========================================================
   SMALL CINEMATIC VIGNETTE
========================================================= */

#ri-journey-vignette{
  position:absolute;

  inset:0;

  z-index:3;

  pointer-events:none;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 52%,
      rgba(0,0,0,.04) 75%,
      rgba(0,0,0,.15) 100%
    );
}


/* =========================================================
   LIVE JUKEBOX ANCHOR

   The anchor always keeps the exact physical space.
   The real jukebox can temporarily become fixed during
   the 8 → live transition.
========================================================= */

#ri-live-anchor{
  position:relative;

  width:100vw;
  height:56.25vw;

  margin:0;
  padding:0;

  background:#000;

  overflow:visible;
}


/* =========================================================
   THE ONE AND ONLY LIVE JUKEBOX
========================================================= */

#ri-jukebox-stage{
  position:relative;

  width:100vw;
  height:56.25vw;

  margin:0;
  padding:0;

  overflow:hidden;

  background:#000;

  font-family:
    "Arial Narrow",
    Arial,
    Helvetica,
    sans-serif;

  user-select:none;
  -webkit-user-select:none;

  z-index:20;
}


#ri-jukebox-stage.ri-live-fixed{
  position:fixed !important;

  left:0 !important;
  top:0 !important;

  width:100vw !important;
  height:56.25vw !important;

  margin:0 !important;
  padding:0 !important;

  z-index:99998 !important;

  transform:none !important;
}


/* =========================================================
   JUKEBOX BACKGROUND
========================================================= */

#ri-jukebox-bg{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  max-width:none !important;

  margin:0;
  padding:0;

  display:block;

  object-fit:cover;
  object-position:center top;

  z-index:0;

  pointer-events:none;
}


/* =========================================================
   SONG COLUMNS
========================================================= */

#ri-jukebox-stage .ri-column{
  position:absolute;

  top:22.55%;
  height:36.15%;

  display:grid;

  grid-template-rows:
    repeat(7,1fr);

  z-index:10;
}


#ri-column-a{
  left:30.50%;
  width:10.53%;
}


#ri-column-b{
  left:45.22%;
  width:10.71%;
}


#ri-column-c{
  left:60.11%;
  width:10.35%;
}


/* =========================================================
   TRACK
========================================================= */

#ri-jukebox-stage .ri-track{
  position:relative;

  width:100%;
  height:100%;

  margin:0;

  border:0;

  padding:
    0
    19%
    0
    2%;

  background:transparent;

  color:#171006;

  cursor:pointer;

  display:flex;

  align-items:center;
  justify-content:center;

  text-align:center;

  overflow:visible;

  font-family:
    "Arial Narrow",
    Arial,
    Helvetica,
    sans-serif;

  transition:
    filter .16s ease,
    text-shadow .16s ease,
    transform .08s ease;
}


#ri-jukebox-stage .ri-track:hover{
  filter:brightness(1.08);
}


#ri-jukebox-stage .ri-track:active{
  transform:scale(.99);
}


#ri-jukebox-stage .ri-track.is-active{
  text-shadow:
    0 0 5px
    rgba(255,225,155,.35);
}


/* =========================================================
   TRACK TITLE
========================================================= */

#ri-jukebox-stage .ri-track-title{
  display:-webkit-box;

  width:100%;

  overflow:hidden;

  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;

  font-size:
    clamp(
      5px,
      .66vw,
      12px
    );

  line-height:1.02;

  font-weight:800;

  letter-spacing:.01em;

  text-transform:uppercase;

  pointer-events:none;
}


#ri-jukebox-stage .ri-track.long-track .ri-track-title{
  font-size:
    clamp(
      4.8px,
      .59vw,
      11px
    );
}


#ri-jukebox-stage .ri-track.very-long-track .ri-track-title{
  font-size:
    clamp(
      4.4px,
      .53vw,
      10px
    );
}


#ri-jukebox-stage .ri-track-artist{
  display:none;
}


/* =========================================================
   TRACK LAMP MASK
========================================================= */

#ri-jukebox-stage .ri-track-lamp{
  position:absolute;

  right:-2.2%;
  top:50%;

  width:
    clamp(
      13px,
      2.05vw,
      39px
    );

  aspect-ratio:1;

  transform:translateY(-50%);

  border-radius:50%;

  pointer-events:none;

  z-index:4;

  background:
    radial-gradient(
      circle at 50% 50%,

      rgba(4,2,1,.99) 0%,
      rgba(7,2,1,.98) 36%,
      rgba(14,4,2,.94) 48%,
      rgba(8,2,1,.73) 59%,
      rgba(0,0,0,.34) 68%,
      rgba(0,0,0,0) 76%
    );

  opacity:1;

  transition:opacity .18s ease;
}


/* Reveal baked red lamp */

#ri-jukebox-stage .ri-track.is-active .ri-track-lamp{
  opacity:0;
}


/* =========================================================
   CENTER NOW PLAYING DISPLAY
========================================================= */

#ri-now-playing{
  position:absolute;

  left:38.64%;
  top:62.17%;

  width:22.19%;
  height:10.31%;

  z-index:20;

  overflow:hidden;

  text-align:center;

  pointer-events:none;

  background:
    radial-gradient(
      ellipse at center,

      rgba(10,2,1,.97) 0%,
      rgba(2,0,0,.99) 72%,
      #000 100%
    );

  border-radius:3%;
}


/* =========================================================
   NOW PLAYING LABEL
========================================================= */

#ri-now-label{
  position:absolute;

  top:4%;
  left:5%;

  width:90%;

  color:#e51d14;

  font-size:
    clamp(
      6px,
      .72vw,
      14px
    );

  line-height:1;

  font-weight:800;

  letter-spacing:.07em;

  text-transform:uppercase;

  text-shadow:
    0 0 4px
    rgba(255,25,10,.48);
}


/* =========================================================
   NOW PLAYING TITLE
========================================================= */

#ri-now-title{
  position:absolute;

  left:4%;
  top:23%;

  width:92%;

  color:#fff;

  font-size:
    clamp(
      8px,
      1.08vw,
      20px
    );

  line-height:1.03;

  font-weight:800;

  letter-spacing:.025em;

  text-transform:uppercase;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;

  text-shadow:
    0 0 4px rgba(255,255,255,.18),
    0 1px 3px rgba(0,0,0,.96);
}


#ri-now-title.long-title{
  font-size:
    clamp(
      7px,
      .92vw,
      17px
    );
}


#ri-now-title.very-long-title{
  font-size:
    clamp(
      6.2px,
      .80vw,
      15px
    );
}


/* =========================================================
   NOW PLAYING ARTIST
========================================================= */

#ri-now-artist{
  position:absolute;

  left:5%;
  top:47%;

  width:90%;
  height:22%;

  display:flex;

  justify-content:center;
  align-items:flex-start;

  color:#f2eee5;

  font-size:
    clamp(
      5.5px,
      .64vw,
      12px
    );

  line-height:1.10;

  font-weight:600;

  letter-spacing:.02em;

  text-transform:uppercase;

  text-align:center;

  white-space:normal;

  overflow:hidden;

  opacity:.96;

  text-shadow:
    0 1px 3px
    rgba(0,0,0,.98);
}


#ri-now-artist.long-artist{
  font-size:
    clamp(
      5px,
      .56vw,
      10.5px
    );
}


#ri-now-artist.very-long-artist{
  font-size:
    clamp(
      4.5px,
      .49vw,
      9px
    );
}


/* =========================================================
   NOW PLAYING RED DIODE
========================================================= */

#ri-now-led{
  position:absolute;

  left:50%;
  top:70%;

  width:
    clamp(
      4px,
      .40vw,
      8px
    );

  aspect-ratio:1;

  transform:translateX(-50%);

  border-radius:50%;

  background:
    radial-gradient(
      circle at 34% 28%,

      rgba(255,255,255,.14) 0%,
      #370604 48%,
      #130100 100%
    );

  border:
    1px solid
    rgba(75,5,3,.9);

  opacity:.45;

  box-shadow:
    inset
    0 0 3px
    rgba(0,0,0,.95);

  transition:
    opacity .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}


#ri-now-led.is-on{
  opacity:1;

  background:
    radial-gradient(
      circle at 32% 27%,

      #ffd7d0 0%,
      #ff6558 12%,
      #ef2118 32%,
      #a90805 70%,
      #4b0201 100%
    );

  box-shadow:
    0 0 3px rgba(255,55,40,1),
    0 0 7px rgba(255,20,10,.85),
    0 0 12px rgba(255,0,0,.42);
}


/* =========================================================
   EQUALIZER
========================================================= */

#ri-equalizer{
  position:absolute;

  left:25%;
  bottom:4%;

  width:50%;
  height:18%;

  display:flex;

  align-items:flex-end;
  justify-content:center;

  gap:3%;
}


#ri-equalizer span{
  display:block;

  width:6%;
  height:16%;

  min-height:2px;

  background:#9c0000;

  opacity:.22;

  transform-origin:bottom center;
}


#ri-equalizer.is-on span{
  opacity:1;

  animation:
    ri-eq-wave
    .62s
    ease-in-out
    infinite
    alternate;

  box-shadow:
    0 0 3px
    rgba(210,0,0,.52);
}


#ri-equalizer.is-on span:nth-child(2){
  animation-delay:-.37s;
}

#ri-equalizer.is-on span:nth-child(3){
  animation-delay:-.13s;
}

#ri-equalizer.is-on span:nth-child(4){
  animation-delay:-.46s;
}

#ri-equalizer.is-on span:nth-child(5){
  animation-delay:-.21s;
}

#ri-equalizer.is-on span:nth-child(6){
  animation-delay:-.55s;
}

#ri-equalizer.is-on span:nth-child(7){
  animation-delay:-.29s;
}

#ri-equalizer.is-on span:nth-child(8){
  animation-delay:-.08s;
}

#ri-equalizer.is-on span:nth-child(9){
  animation-delay:-.42s;
}

#ri-equalizer.is-on span:nth-child(10){
  animation-delay:-.18s;
}

#ri-equalizer.is-on span:nth-child(11){
  animation-delay:-.50s;
}

#ri-equalizer.is-on span:nth-child(12){
  animation-delay:-.25s;
}


@keyframes ri-eq-wave{

  0%{
    height:15%;
  }

  30%{
    height:36%;
  }

  65%{
    height:88%;
  }

  100%{
    height:27%;
  }

}


/* =========================================================
   LEFT RECORD PANEL
========================================================= */

#ri-record-panel{
  position:absolute;

  left:2.15%;
  top:80.10%;

  width:11.95%;
  height:12.45%;

  z-index:20;

  pointer-events:none;

  overflow:hidden;

  text-align:center;

  background:
    radial-gradient(
      ellipse at center,

      #050201 0%,
      #010000 72%,
      #000 100%
    );

  border-radius:4%;
}


#ri-record-label{
  position:absolute;

  left:5%;
  top:25%;

  width:90%;

  color:#86a01d;

  font-size:
    clamp(
      6px,
      .80vw,
      15px
    );

  line-height:1;

  font-weight:800;

  letter-spacing:.03em;

  text-transform:uppercase;

  text-shadow:
    0 0 4px
    rgba(130,170,30,.20);
}


#ri-record-state{
  position:absolute;

  left:10%;
  top:55%;

  width:80%;

  display:flex;

  justify-content:center;
  align-items:center;

  gap:9%;
}


#ri-record-playing{
  color:#510604;

  font-size:
    clamp(
      6px,
      .84vw,
      16px
    );

  font-weight:900;

  line-height:1;

  letter-spacing:.03em;

  opacity:.36;

  transition:
    color .18s ease,
    opacity .18s ease,
    text-shadow .18s ease;
}


#ri-record-playing.is-on{
  color:#ff2418;

  opacity:1;

  text-shadow:
    0 0 5px rgba(255,35,20,.60),
    0 0 10px rgba(255,0,0,.28);
}


#ri-record-dot{
  display:block;

  width:
    clamp(
      5px,
      .55vw,
      11px
    );

  aspect-ratio:1;

  border-radius:50%;

  background:#340302;

  opacity:.35;

  box-shadow:
    inset
    0 0 3px
    rgba(0,0,0,.95);
}


#ri-record-dot.is-on{
  opacity:1;

  background:
    radial-gradient(
      circle at 30% 25%,

      #ffe0d8 0%,
      #ff6f60 13%,
      #fa2418 37%,
      #9e0703 72%,
      #410100 100%
    );

  box-shadow:
    0 0 4px rgba(255,40,25,1),
    0 0 9px rgba(255,10,0,.80),
    0 0 14px rgba(255,0,0,.38);
}


/* =========================================================
   RIGHT SYSTEM PANEL
========================================================= */

#ri-system-panel{
  position:absolute;

  left:85.75%;
  top:80.10%;

  width:11.75%;
  height:12.45%;

  z-index:20;

  pointer-events:none;

  overflow:hidden;

  text-align:center;

  background:
    radial-gradient(
      ellipse at center,

      #050201 0%,
      #010000 72%,
      #000 100%
    );

  border-radius:4%;
}


#ri-system-label{
  position:absolute;

  left:5%;
  top:25%;

  width:90%;

  color:#86a01d;

  font-size:
    clamp(
      5px,
      .67vw,
      13px
    );

  line-height:1;

  font-weight:800;

  letter-spacing:.04em;
}


#ri-system-state{
  position:absolute;

  left:5%;
  top:55%;

  width:90%;

  color:#c9b899;

  font-size:
    clamp(
      5px,
      .73vw,
      14px
    );

  line-height:1;

  font-weight:800;

  letter-spacing:.04em;

  text-transform:uppercase;

  transition:
    color .18s ease,
    text-shadow .18s ease;
}


#ri-system-state.ready{
  color:#cfb98b;
}


#ri-system-state.loading{
  color:#ef9517;

  text-shadow:
    0 0 6px
    rgba(255,125,10,.35);
}


#ri-system-state.playing{
  color:#ff2418;

  text-shadow:
    0 0 7px
    rgba(255,25,10,.55);
}


#ri-system-state.paused{
  color:#a36d45;
}


/* =========================================================
   SOUNDCLOUD
========================================================= */

#ri-soundcloud-shell{
  position:absolute;

  left:-10000px;
  top:-10000px;

  width:1px;
  height:1px;

  overflow:hidden;

  opacity:0;

  pointer-events:none;
}


#ri-soundcloud-player{
  width:100px;
  height:100px;

  border:0;
}


/* =========================================================
   TERMINAL
========================================================= */

#ri-music-terminal{
  position:relative;

  width:100vw;

  min-height:72vh;

  margin:0;
  padding:0;

  display:flex;

  align-items:center;
  justify-content:center;

  overflow:hidden;

  background:
    linear-gradient(
      to bottom,
      #000 0%,
      rgba(0,0,0,.78) 18%,
      rgba(0,0,0,.20) 52%,
      #000 100%
    ),
    radial-gradient(
      ellipse at 50% 42%,

      #100303 0%,
      #050101 34%,
      #000 72%
    );

  color:#fff;

  font-family:
    "Arial Narrow",
    Arial,
    Helvetica,
    sans-serif;
}


#ri-music-terminal::before{
  content:"";

  position:absolute;

  left:12%;
  right:12%;

  top:50%;

  height:1px;

  background:
    linear-gradient(
      90deg,

      transparent,
      rgba(156,0,0,.20),
      rgba(255,35,25,.72),
      rgba(156,0,0,.20),
      transparent
    );

  box-shadow:
    0 0 18px
    rgba(180,0,0,.24);
}


#ri-music-terminal::after{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  opacity:.10;

  background:
    repeating-linear-gradient(
      to bottom,

      transparent 0,
      transparent 3px,
      rgba(255,255,255,.055) 4px
    );
}


#ri-terminal-core{
  position:relative;

  z-index:2;

  width:min(760px,86vw);

  padding:
    clamp(34px,5vw,72px)
    clamp(24px,5vw,60px);

  text-align:center;

  background:
    linear-gradient(
      180deg,

      rgba(8,8,8,.82),
      rgba(0,0,0,.92)
    );

  border:
    1px solid
    rgba(155,0,0,.36);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.025),
    0 0 45px rgba(130,0,0,.11),
    inset 0 0 50px rgba(0,0,0,.86);
}


#ri-terminal-light{
  width:9px;
  height:9px;

  margin:
    0 auto 20px;

  border-radius:50%;

  background:#ff2818;

  box-shadow:
    0 0 7px rgba(255,35,22,.9),
    0 0 16px rgba(190,0,0,.55);

  animation:
    ri-terminal-pulse
    2.2s
    ease-in-out
    infinite;
}


@keyframes ri-terminal-pulse{

  0%,
  100%{
    opacity:.55;
  }

  50%{
    opacity:1;
  }

}


#ri-terminal-status{
  margin:0 0 14px;

  color:#d51a12;

  font-size:
    clamp(
      10px,
      .82vw,
      13px
    );

  font-weight:800;

  letter-spacing:.32em;

  text-transform:uppercase;
}


#ri-terminal-title{
  margin:0;

  color:#fff;

  font-size:
    clamp(
      27px,
      3.1vw,
      52px
    );

  line-height:1;

  font-weight:800;

  letter-spacing:.08em;

  text-transform:uppercase;
}


#ri-terminal-subtitle{
  margin:
    17px auto 0;

  color:#8f8f8f;

  font-size:
    clamp(
      10px,
      .86vw,
      14px
    );

  line-height:1.5;

  font-weight:600;

  letter-spacing:.20em;

  text-transform:uppercase;
}


#ri-terminal-nav{
  margin-top:
    clamp(
      34px,
      5vw,
      58px
    );

  display:flex;

  justify-content:center;

  gap:
    clamp(
      12px,
      2vw,
      24px
    );

  flex-wrap:wrap;
}


#ri-terminal-nav a{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  min-width:
    min(
      270px,
      78vw
    );

  padding:
    17px 24px;

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

  background:
    rgba(0,0,0,.58);

  color:#d7d7d7;

  text-decoration:none;

  font-size:
    clamp(
      11px,
      .94vw,
      15px
    );

  font-weight:800;

  letter-spacing:.15em;

  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}


#ri-terminal-nav a:hover{
  color:#fff;

  border-color:
    rgba(185,20,12,.80);

  box-shadow:
    0 0 18px
    rgba(140,0,0,.15);
}


#ri-terminal-nav .ri-forward{
  border-color:
    rgba(155,0,0,.66);

  background:
    rgba(70,0,0,.20);
}


#ri-terminal-nav .ri-forward:hover{
  border-color:#dc2117;

  background:
    rgba(100,0,0,.27);
}


#ri-terminal-system{
  margin-top:34px;

  color:#4e4e4e;

  font-size:
    clamp(
      8px,
      .65vw,
      11px
    );

  font-weight:700;

  letter-spacing:.23em;

  text-transform:uppercase;
}



/* =========================================================
   MOBILE JUKEBOX — SEPARATE DIRECTOR'S CUT

   Desktop keeps the full corridor journey + live physical
   jukebox. Mobile skips the 500vh corridor and goes directly
   to a large jukebox portrait + touch-friendly track bank.
========================================================= */

#ri-mobile-jukebox{
  display:none;
}


#ri-mobile-jukebox-hero{
  position:relative;

  width:100vw;
  aspect-ratio:1 / 1;

  overflow:hidden;

  background:#000;

  border-bottom:
    1px solid
    rgba(185,0,0,.72);
}


#ri-mobile-jukebox-image{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
  object-position:center 52%;

  max-width:none !important;

  margin:0 !important;
  padding:0 !important;

  pointer-events:none;

  user-select:none;
  -webkit-user-select:none;
}


#ri-mobile-jukebox-hero::after{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.04) 0%,
      rgba(0,0,0,0) 58%,
      rgba(0,0,0,.34) 100%
    ),
    radial-gradient(
      ellipse at center,
      transparent 58%,
      rgba(0,0,0,.18) 100%
    );
}


#ri-mobile-player{
  position:relative;

  width:100%;

  padding:
    24px
    16px
    30px;

  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(62,5,3,.22) 0%,
      rgba(9,2,1,.96) 38%,
      #000 78%
    );

  color:#fff;

  font-family:
    "Arial Narrow",
    Arial,
    Helvetica,
    sans-serif;
}


#ri-mobile-player-status{
  margin:0;

  color:#b4160f;

  font-size:10px;

  line-height:1;

  font-weight:800;

  letter-spacing:.25em;

  text-align:center;

  text-transform:uppercase;
}


#ri-mobile-now{
  width:min(100%,560px);

  margin:
    15px
    auto
    0;

  padding:
    18px
    16px
    16px;

  text-align:center;

  background:
    linear-gradient(
      180deg,
      rgba(10,4,2,.92),
      rgba(0,0,0,.96)
    );

  border:
    1px solid
    rgba(120,20,12,.34);

  box-shadow:
    inset
    0 0 30px
    rgba(0,0,0,.78),
    0 0 24px
    rgba(80,0,0,.08);
}


#ri-mobile-now-label{
  color:#777;

  font-size:9px;

  font-weight:800;

  letter-spacing:.23em;

  text-transform:uppercase;
}


#ri-mobile-now-title{
  margin-top:8px;

  color:#fff;

  font-size:
    clamp(
      20px,
      6vw,
      28px
    );

  line-height:1.04;

  font-weight:800;

  letter-spacing:.035em;

  text-transform:uppercase;
}


#ri-mobile-now-artist{
  margin:
    8px
    auto
    0;

  max-width:92%;

  color:#c9b899;

  font-size:
    clamp(
      10px,
      2.8vw,
      13px
    );

  line-height:1.35;

  font-weight:700;

  letter-spacing:.045em;

  text-transform:uppercase;
}


#ri-mobile-play-state{
  display:inline-flex;

  align-items:center;

  gap:7px;

  margin-top:12px;

  color:#696969;

  font-size:9px;

  font-weight:800;

  letter-spacing:.18em;

  text-transform:uppercase;
}


#ri-mobile-play-dot{
  display:block;

  width:7px;
  height:7px;

  border-radius:50%;

  background:#3a0302;

  box-shadow:
    inset
    0 0 3px
    rgba(0,0,0,.9);
}


#ri-mobile-play-state.is-playing{
  color:#e52218;
}


#ri-mobile-play-state.is-playing
#ri-mobile-play-dot{
  background:#ff2c1e;

  box-shadow:
    0 0 5px
    rgba(255,40,28,.9),
    0 0 10px
    rgba(210,0,0,.45);
}


#ri-mobile-banks{
  width:min(100%,560px);

  margin:
    18px
    auto
    0;

  display:grid;

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

  gap:8px;
}


#ri-mobile-banks button{
  min-height:42px;

  padding:
    0
    12px;

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

  background:
    rgba(0,0,0,.70);

  color:#8d8d8d;

  font-family:
    "Arial Narrow",
    Arial,
    Helvetica,
    sans-serif;

  font-size:11px;

  font-weight:900;

  letter-spacing:.16em;

  cursor:pointer;
}


#ri-mobile-banks button.is-active{
  color:#fff;

  border-color:
    rgba(200,24,15,.72);

  background:
    rgba(82,4,2,.34);

  box-shadow:
    inset
    0 0 18px
    rgba(100,0,0,.16);
}


#ri-mobile-track-list{
  width:min(100%,560px);

  margin:
    10px
    auto
    0;

  display:flex;

  flex-direction:column;

  gap:7px;
}


#ri-mobile-track-list .ri-mobile-track{
  position:relative;

  width:100%;

  min-height:58px;

  padding:
    9px
    14px
    9px
    54px;

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

  background:
    linear-gradient(
      180deg,
      rgba(15,15,15,.84),
      rgba(2,2,2,.94)
    );

  color:#fff;

  cursor:pointer;

  text-align:left;

  font-family:
    "Arial Narrow",
    Arial,
    Helvetica,
    sans-serif;

  transition:
    border-color .16s ease,
    background .16s ease,
    transform .08s ease;
}


#ri-mobile-track-list .ri-mobile-track:active{
  transform:scale(.992);
}


#ri-mobile-track-list .ri-mobile-track.is-active{
  border-color:
    rgba(198,23,14,.72);

  background:
    linear-gradient(
      180deg,
      rgba(53,6,3,.82),
      rgba(8,1,1,.96)
    );

  box-shadow:
    inset
    0 0 22px
    rgba(130,0,0,.09);
}


#ri-mobile-track-list .ri-mobile-track.is-playing{
  border-color:#d72217;
}


.ri-mobile-track-code{
  position:absolute;

  left:13px;
  top:50%;

  transform:
    translateY(-50%);

  width:28px;

  color:#d21b13;

  font-size:11px;

  font-weight:900;

  letter-spacing:.08em;

  text-align:center;
}


.ri-mobile-track-title{
  display:block;

  color:#f5f5f5;

  font-size:
    clamp(
      12px,
      3.65vw,
      15px
    );

  line-height:1.08;

  font-weight:900;

  letter-spacing:.025em;

  text-transform:uppercase;
}


.ri-mobile-track-artist{
  display:block;

  margin-top:4px;

  color:#737373;

  font-size:
    clamp(
      8px,
      2.35vw,
      10px
    );

  line-height:1.2;

  font-weight:700;

  letter-spacing:.035em;

  text-transform:uppercase;
}


#ri-mobile-help{
  margin:
    14px
    auto
    0;

  color:#4e4e4e;

  font-size:8px;

  line-height:1.4;

  font-weight:700;

  letter-spacing:.16em;

  text-align:center;

  text-transform:uppercase;
}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

  /*
     MOBILE DOES NOT RUN THE 500vh CORRIDOR.
     It goes directly to the large jukebox cut.
  */

  #ri-jukebox-journey,
  #ri-live-anchor{
    display:none !important;
  }


  #ri-mobile-jukebox{
    display:block;
  }


  #ri-music-terminal{
    min-height:76vh;
  }


  #ri-terminal-core{
    width:88vw;
  }


  #ri-terminal-nav{
    flex-direction:column;
    align-items:center;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  #ri-equalizer.is-on span{
    animation:none;
    height:50%;
  }

  #ri-terminal-light{
    animation:none;
  }

}


/* =========================================================
   TABLET / TALL SCREEN JUKEBOX SCENE

   Keep the physical jukebox in true 16:9,
   but reserve one full viewport for the scene
   so the terminal cannot appear underneath it.
========================================================= */

@media (min-width:701px) and (max-aspect-ratio:16/9){

  #ri-live-anchor{
    height:100vh;
    min-height:100vh;
    background:#000;
  }

}