/* =====================================================================
   VIDEOS / LIVE page. Built only from site.css tokens and components.
   New here: .hero-band--page (smaller page hero), .queue (Most watched
   chart beside the player), .lstrip/.lslot (On-air strip), .series-nav,
   .totc (Talk Of The County panel), .submit-card, .subscribe band.
   ===================================================================== */

/* page hero: same orange band as home, one step smaller */
.hero-band--page h1{font-size:clamp(64px, 8.6vw, 136px)}
.hero-band--page .hero-band__top{padding-bottom:clamp(28px, 3vw, 44px)}

/* player title links inherit; meta link on dark */
.player__title a:hover{color:var(--cream)}
.player__meta .link-more{font-size:14px}

/* ---------- Most watched chart (beside the player) ---------- */
.queue{--jt-depth:var(--juice-deep); align-self:stretch; border-radius:var(--r-lg); overflow:hidden; background:var(--ink-2); box-shadow:var(--frame); color:var(--text); display:flex; flex-direction:column}
.queue__head{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); background:linear-gradient(90deg, rgba(255,93,0,.16), transparent)}
.queue__head h2{font-size:34px}
.queue__head span{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--dim); text-transform:uppercase}
.queue__list{list-style:none; margin:0; padding:6px 0; flex:1; display:flex; flex-direction:column; justify-content:space-around}
.queue__item{position:relative; display:grid; grid-template-columns:30px 112px minmax(0,1fr); gap:12px; align-items:center; padding:12px 20px; transition:background .15s}
.queue__item:hover{background:rgba(255,247,238,.05)}
.queue__item.is-current{background:rgba(255,93,0,.12); box-shadow:inset 3px 0 0 var(--juice)}
.queue__rank{font-family:var(--font-display); font-size:34px; line-height:1; color:transparent; -webkit-text-stroke:1.4px var(--juice); text-align:center}
.queue__item.is-current .queue__rank{color:var(--juice); -webkit-text-stroke:0}
.queue__item .video-card__thumb{border-radius:10px}
.queue__item .video-card__thumb::before{width:32px; height:32px; margin:-16px 0 0 -16px; background-size:15px; box-shadow:0 0 0 4px rgba(255,93,0,.25)}
.queue__item:hover .video-card__thumb::before{opacity:1; transform:scale(1)}
.queue__txt{min-width:0}
.queue__txt b{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:14px; line-height:1.3}
.queue__txt b a::after{content:""; position:absolute; inset:0}
.queue__item:hover b{color:var(--cream)}
.queue__txt span{display:block; margin-top:5px; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--dim)}
.queue__txt .chip{display:inline-flex; margin-top:7px; padding:5px 7px; font-size:10px}
.queue__foot{margin-top:auto; padding:12px 20px 16px; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; color:var(--dim); text-transform:uppercase}

/* ---------- On-air strip ---------- */
.onair-strip{--jt-depth:var(--juice-deep); background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(36px, 4vw, 56px) 0; margin-top:clamp(40px, 4.4vw, 64px)}
.lstrip{display:grid; grid-template-columns:250px minmax(0,1fr) minmax(0,1fr); gap:var(--gap); align-items:stretch}
.lstrip__head{display:flex; flex-direction:column; justify-content:center; gap:12px}
.lstrip__head .fine{font-family:var(--font-mono); letter-spacing:.06em}
.lslot{display:grid; grid-template-columns:118px minmax(0,1fr); grid-template-rows:auto auto; gap:12px 20px; align-content:center; padding:18px; border-radius:var(--r-lg); background:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line)}
.lslot--live{background:radial-gradient(120% 140% at 0% 0%, rgba(40,132,7,.2), transparent 55%), var(--ink-3); box-shadow:inset 0 0 0 1px rgba(67,178,26,.42)}
.lslot--music{background:radial-gradient(120% 140% at 0% 0%, rgba(255,93,0,.2), transparent 55%), var(--ink-3); box-shadow:inset 0 0 0 1px rgba(255,93,0,.4)}
.lslot__thumb{position:relative; display:block; aspect-ratio:4/5; border-radius:12px; overflow:hidden; box-shadow:0 0 0 2px var(--juice); background:var(--ink-4)}
.lslot__thumb img{width:100%; height:100%; object-fit:cover; object-position:50% 30%}
.lslot__tile{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; background:radial-gradient(circle at 1px 1px, rgba(11,11,11,.18) 1px, transparent 1.6px) 0 0/12px 12px, radial-gradient(120% 90% at 20% 0%, var(--juice-bright), var(--juice-deep)); box-shadow:0 0 0 2px var(--ink), 0 0 0 4px var(--juice); --jt-depth:var(--ink)}
.lslot__tile b{font-size:62px; line-height:.8}
.lslot__tile b i{font-style:normal; font-size:.42em; margin-left:2px}
.lslot__tile small{font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink)}
.lslot__thumb .chip{position:absolute; left:6px; bottom:6px; font-size:9.5px; padding:5px 6px}
.lslot .guide__when{margin-bottom:8px}
.lslot--live .guide__when{color:var(--text)}
.lslot h3{font-family:var(--font-display); font-weight:400; font-size:clamp(28px, 2.4vw, 34px); line-height:.95; text-transform:uppercase; margin-bottom:6px}
.lslot p{color:var(--muted); font-size:14px}
.lslot__thumb{grid-row:span 2; align-self:start}
.lslot .guide__acts{grid-column:2; margin-top:0}
.lstrip .is-off{display:none}
[data-live="false"] .lstrip .is-on{display:none}
[data-live="false"] .lstrip .is-off{display:inline}
[data-live="false"] .lslot--live{background:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line)}

/* ---------- series ---------- */
.series-nav{margin-bottom:clamp(32px, 3.6vw, 48px)}
.series-nav a b{font-weight:700; color:var(--juice); margin-left:6px}
.series-nav a:hover b,.series-nav a[aria-current="true"] b{color:var(--ink)}
.video-card .story-card__label{margin-right:6px}
.shelf .cta-strip{margin-top:14px}

/* Talk Of The County panel */
.totc{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr); gap:var(--gap); align-items:center; padding:clamp(20px, 2.4vw, 32px); border-radius:var(--r-lg); background:radial-gradient(90% 120% at 0% 0%, rgba(255,93,0,.18), transparent 60%), var(--ink-3); box-shadow:inset 0 0 0 1px var(--line)}
.totc__info{display:flex; flex-direction:column; gap:16px; align-items:flex-start}
.totc__info p{color:var(--muted); font-size:15px; max-width:44ch}
.totc__info p b{color:var(--text)}
.totc__info .inline-form{width:100%; flex-wrap:wrap}
.totc__info .form-msg{flex-basis:100%}

/* ---------- submit your music ---------- */
/* The real form is taller than the static demo: keep the copy pinned to the top of the card, as it reads on the static page. */
.submit .keys-grid{align-items:start}
.submit .lede{margin:18px 0 22px}
.submit .steps{margin-bottom:28px}
.submit .steps li{background:rgba(255,247,238,.05); font-size:15px}
.replays{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px}
.replays .kicker{grid-column:1/-1; color:var(--dim)}
.replays .guide__replay{grid-template-columns:104px 1fr}
.submit-card{--jt-depth:var(--juice-deep); position:relative; padding:clamp(22px, 2.6vw, 34px); border-radius:var(--r-lg); background:var(--ink-2); box-shadow:var(--frame), 0 40px 90px -40px rgba(255,93,0,.7)}
.submit-card__head{display:flex; align-items:center; gap:14px; margin-bottom:20px}
.submit-card__head img{width:54px; height:54px; border-radius:50%; box-shadow:0 0 0 2px var(--ink), 0 0 0 4px var(--juice); flex:none}
.submit-card__head p{font-size:13px; color:var(--muted); margin-top:4px}
.submit-card .btn{grid-column:1/-1; height:58px; font-size:16px}
.submit-card .fine{grid-column:1/-1}

/* ---------- subscribe band ---------- */
.subscribe{overflow:hidden}
.subscribe::before{content:"PRESS PLAY · PRESS PLAY · PRESS PLAY · PRESS PLAY"; position:absolute; left:-2%; top:6px; white-space:nowrap; font-family:var(--font-display); font-size:clamp(120px, 15vw, 230px); line-height:1; color:rgba(0,0,0,.07); pointer-events:none}
.sub-grid{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px, 5vw, 72px); align-items:center}
.sub-grid > div > p{margin-top:18px; max-width:48ch; font-size:17px; font-weight:500; color:var(--on-orange-muted)}
.sub-grid > div > p b{color:var(--ink)}
.sub-stats{display:flex; gap:clamp(20px, 3vw, 40px); margin:28px 0; padding:18px 0; border-top:2px solid rgba(11,11,11,.18); border-bottom:2px solid rgba(11,11,11,.18)}
.sub-stats b{display:block; font-family:var(--font-display); font-weight:400; font-size:clamp(40px, 4vw, 56px); line-height:.9; color:var(--ink)}
.sub-stats span{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--on-orange-muted)}
.sub-stack{position:relative; aspect-ratio:1.1/1; max-width:600px; width:100%; justify-self:end}
.sub-card{position:absolute; width:74%; aspect-ratio:16/9; border-radius:18px; overflow:hidden; box-shadow:var(--frame); background:var(--ink)}
.sub-card img{width:100%; height:100%; object-fit:cover}
.sub-card:nth-child(1){left:0; top:4%; transform:rotate(-7deg); animation:subFloat 7s ease-in-out infinite}
.sub-card:nth-child(2){right:0; top:30%; transform:rotate(5deg); animation:subFloat 8s ease-in-out -2s infinite}
.sub-card:nth-child(3){left:9%; bottom:2%; transform:rotate(-2deg); animation:subFloat 6.5s ease-in-out -4s infinite}
@keyframes subFloat{50%{translate:0 -10px}}
.sub-badge{position:absolute; z-index:3; right:6%; top:2%; width:clamp(96px, 10vw, 132px); aspect-ratio:1; border-radius:50%; background:var(--ink); color:var(--cream); display:grid; place-items:center; text-align:center; box-shadow:0 0 0 4px var(--cream), 8px 8px 0 4px var(--ink); transform:rotate(10deg); font-family:var(--font-display); font-size:clamp(22px, 2.2vw, 28px); line-height:.9}
.sub-badge svg{width:34%; height:auto; margin:0 auto 4px; color:var(--juice)}

/* ---------- data-driven hub (JU.videos) ---------- */
.player__title{max-width:24ch; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.vtools{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; margin:-8px 0 clamp(24px, 2.6vw, 32px)}
.vtools__count{font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim)}
.vtools__count b{color:var(--text)}
.vtools__search{position:relative; width:min(340px, 100%)}
.vtools__search .input{height:46px; padding-left:44px; border-radius:999px; font-size:15px}
.vtools__search svg{position:absolute; left:16px; top:50%; width:18px; height:18px; margin-top:-9px; color:var(--dim); pointer-events:none}
.vtools__search .input::-webkit-search-cancel-button{filter:invert(1)}
.vgrid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(28px, 2.6vw, 36px) var(--gap)}
.vgrid .story-card__kicker{margin-bottom:-6px}
.vmore{display:flex; justify-content:center; margin-top:clamp(32px, 3.4vw, 44px)}
.vempty{padding:48px 0; text-align:center; color:var(--muted)}
.vempty b{color:var(--text)}
.series-nav a{cursor:pointer}
.queue__item .video-card__thumb img{aspect-ratio:16/9; object-fit:cover}
.replays .guide__replay .video-card__thumb img{aspect-ratio:16/9; object-fit:cover}
@media (max-width:1180px){ .vgrid{grid-template-columns:repeat(3, minmax(0,1fr))} }
@media (max-width:860px){ .vgrid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:560px){
  .vgrid{grid-template-columns:1fr}
  .vtools__search{width:100%}
}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .lstrip{grid-template-columns:1fr 1fr}
  .lstrip__head{grid-column:1/-1; flex-direction:row; align-items:flex-end; justify-content:space-between}
  .totc{grid-template-columns:1fr}
}
@media (max-width:980px){
  .sub-grid{grid-template-columns:1fr}
  .sub-stack{justify-self:center; max-width:520px}
  .replays{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hero-band--page h1{font-size:clamp(64px, 20vw, 88px)}
  .queue__item{grid-template-columns:24px 104px minmax(0,1fr); padding:12px 16px; gap:10px}
  .queue__head{padding:14px 16px}
  .queue__head h2{font-size:28px}
  .lstrip{grid-template-columns:1fr}
  .lstrip__head{flex-direction:column; align-items:flex-start}
  .lslot{grid-template-columns:92px minmax(0,1fr); gap:14px; padding:14px; align-items:start}
  .lslot__thumb{grid-row:auto}
  .lslot .guide__acts{grid-column:1/-1; margin-top:2px}
  .lslot .guide__acts .btn{flex:1}
  .totc .grid--2{grid-template-columns:1fr 1fr; gap:12px}
  .totc .video-card__title{font-size:14px}
  .submit-card .form-grid{grid-template-columns:1fr}
  .sub-stats{gap:18px}
  .sub-stack{max-width:340px}
  .player__clips a:nth-child(n+3){display:none}
  .queue__item:nth-child(n+6){display:none}
  .lslot__tile b{font-size:50px}
  .sub-stats b{font-size:40px}
  .sub-badge{font-size:20px}
}
@media (prefers-reduced-motion: reduce){
  .sub-card{animation:none!important}
}

/* ---------- app only: the real track form (SubmitMusicForm, also on /promote) inside .submit-card ---------- */
.submit-card .form-grid > .field--full:first-child{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.submit-card textarea.input{height:auto; min-height:120px; padding:14px 16px; line-height:1.5; resize:vertical}
.submit-card .inq-done{text-align:left}
.submit-card .inq-done h3{margin:14px 0 14px}
.submit-card .inq-done p{color:var(--muted)}
.submit-card .inq-done dl{display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:22px 0; padding:18px 20px; border-radius:var(--r); background:rgba(255,247,238,.04); box-shadow:inset 0 0 0 1px var(--line); font-size:14px}
.submit-card .inq-done dt{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); padding-top:2px}
.submit-card .inq-done dd{margin:0; font-weight:600}
.submit-card .inq-done dd.ref{font-family:var(--font-mono); color:var(--cream)}
.submit-card .inq-done .btn{height:auto}
@media (max-width:760px){ .submit-card .inq-done dl{grid-template-columns:1fr; gap:2px} .submit-card .inq-done dd{margin-bottom:8px} }
/* video cards and the Most watched / replay rows are links here (buttons in the static demo) */
a.video-card__thumb{color:inherit}