/* =========================================================
   01-vintage-radio-console
   SuperTraxs.com One-Page Radio Landing Page
   v1.00.02 — reset build using correct vintage radio background.
   ========================================================= */

:root{
  --black:#030303;
  --paper:#2a1605;
  --paper-hot:#4b2408;
  --cream:#f4dcae;
  --red:#b40808;
}

*{box-sizing:border-box}

html{
  min-height:100%;
}

body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:var(--black);
  font-family:Inter,Arial,sans-serif;
  color:#fff;
}

.page-shell{
  min-height:100vh;
  display:grid;
  place-items:start center;
  padding:0;
  background:var(--black);
}

.artboard{
  position:relative;
  width:min(100vw,1672px);
  line-height:0;
  isolation:isolate;
}

.site-art{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  pointer-events:none;
}

/* Live text placed inside the tan NOW PLAYING plate */
.now-playing-live{
  position:absolute;
  z-index:3;
  left:50%;
  top:60%;
  width:45%;
  transform:translate(-50%,-50%);
  text-align:center;
  pointer-events:none;
  line-height:1;
}

.now-playing-live h1{
  margin:0;
  font:400 clamp(32px,3.2vw,26px)/.95 "Rubik Dirt","Bebas Neue",Impact,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#111;
  text-shadow:
    0 1px 0 rgba(255,255,255,.25),
    0 0 1px rgba(0,0,0,.95);
  white-space:pre-line;
}

#now-playing-title{
  display:block;
  white-space:pre-line;
}

.stream-status{
  margin:10px 0 0;
  font:800 clamp(9px,.85vw,13px)/1 Inter,Arial,sans-serif;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:#2b1708;
  opacity:.85;
}

/* Invisible click/tap target over the POWER button */
.listen-button {
    position: absolute;
    z-index: 5;
    left: 88.1%;
    top: 87%;
    width: 2.5%;
    height: 4.5%;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

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

.listen-button:focus-visible{
  outline:3px solid rgba(244,220,174,.92);
  outline-offset:4px;
  box-shadow:0 0 18px rgba(244,220,174,.65);
}

.is-playing .listen-button {
    box-shadow: 0 0 24px rgb(180 8 8);
}

.is-off-air #now-playing-title{
  color:#7b0909;
}

@media (max-width:700px){
  .now-playing-live{
    top:57.1%;
    width:50%;
  }

  .now-playing-live h1{
    font-size:clamp(18px,4.7vw,31px);
    letter-spacing:.13em;
  }

  .stream-status{
    font-size:8px;
    letter-spacing:.18em;
    margin-top:6px;
  }

  .listen-button{
    left:86.8%;
    top:83.2%;
    width:10%;
    height:10%;
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}