/* Kolo sub page styling, shared by /media/ and /show/.
 *
 * WHY A FILE AND NOT INLINE CSS
 * The landing page keeps its CSS inline because it is one page. These are two
 * pages that must look identical to each other and to the landing page. A
 * shared file means a brand change lands once. The tokens below are the same
 * values index.html declares, copied because that page has not been split yet.
 */
:root{
  --navy900:#05070F; --navy800:#0B0F1E; --navy700:#141A2E; --navy600:#232B45;
  --red:#C8102E; --red-lite:#E4344B; --gold:#E8B93A; --gold-lite:#F2CF6E;
  --white:#F5F6FA; --grey:#C9CDDA; --muted:#7C8299;
  --maxw:1200px; --r:20px;
  --pad:clamp(16px,4vw,24px); --navh:74px;
  --shadow:0 30px 80px -30px rgba(0,0,0,.7);
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
/* The header is sticky, so an anchor jump has to leave room for it, and
   text-size-adjust stops iOS inflating body copy in landscape. */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--navh) + 16px);
  -webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--body); color:var(--white); background:var(--navy900);
  line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:var(--display);letter-spacing:-.02em;line-height:1.05;font-weight:800}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-lite);font-weight:700}
.grad-text{background:linear-gradient(100deg,var(--gold-lite),var(--red-lite) 60%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.4rem;border-radius:999px;font-weight:700;font-size:.95rem;cursor:pointer;border:1px solid transparent;transition:transform .2s,box-shadow .2s,background .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 12px 30px -10px rgba(200,16,46,.7)}
.btn-primary:hover{background:var(--red-lite)}
.btn-ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.09)}
section{position:relative}

/* The reveal animation is driven by an IntersectionObserver on each page. If
   the script fails to run the content would stay invisible, so the no script
   fallback below forces it visible rather than leaving a blank page. */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- HEADER ----------
   Deliberately simpler than the landing page header: solid rather than
   scroll reactive, and no burger menu, so a sub page needs no navigation
   JavaScript at all. Links that do not fit a phone are dropped rather than
   hidden behind a menu that would need scripting to open. */
header{position:sticky;top:0;z-index:50;background:rgba(5,7,15,.86);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.07)}
.nav{display:flex;align-items:center;gap:clamp(.6rem,2vw,2rem);height:var(--navh)}
.brand{display:flex;align-items:center;gap:.5rem;flex:none;font-family:var(--display);font-weight:800;font-size:clamp(1.05rem,3.4vw,1.25rem)}
.brand img{width:clamp(30px,7.5vw,38px);height:clamp(30px,7.5vw,38px);border-radius:50%;background:#fff;padding:2px;flex:none}
.nav-links{display:flex;align-items:center;gap:clamp(.8rem,2vw,2rem);margin-left:auto;min-width:0}
.nav-links a{color:var(--grey);font-weight:500;font-size:.92rem;white-space:nowrap;transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:#fff}
.nav-cta{display:flex;align-items:center;gap:.6rem;flex:none}
/* hide-sm used to be scoped to .nav-links a, which meant the "Open Web App"
   button carried the class but was never actually hidden: it kept its full
   width and shoved "Get the app" off the right edge of every phone. It is a
   plain utility now, so anything marked with it really does drop. */
@media(max-width:900px){.hide-sm{display:none}}
/* Below this the row is brand + one button, which is all that honestly fits.
   Matching the note above: a sub page drops the links rather than growing a
   burger menu it would need JavaScript to open. The crumb under the header
   and the footer both still lead everywhere. */
@media(max-width:700px){.nav-links{display:none}.nav-cta{margin-left:auto}}
@media(max-width:620px){:root{--navh:64px}.nav-cta .btn{padding:.7rem 1rem;font-size:.88rem}}
@media(max-width:380px){.nav-cta .btn{padding:.6rem .8rem;font-size:.82rem}}

/* ---------- SECTION HEADS ----------
   h1 is listed alongside h2 because the same block is a section on the
   landing page and the subject of the page here. */
.sec{padding:clamp(48px,7vw,80px) 0}
.sec-head{max-width:44rem;margin-bottom:52px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h1,.sec-head h2{font-size:clamp(2rem,4vw,3.1rem);margin:.8rem 0 1rem}
.sec-head p{color:var(--grey);font-size:1.08rem}
.accent-bar{display:inline-block;width:46px;height:5px;border-radius:3px;background:var(--gold);margin-bottom:.4rem}

/* ---------- BACK LINK ----------
   The header drops most of its links on a phone, so each sub page carries
   its own way back rather than relying on the browser's back button, which
   does nothing useful for somebody who arrived from a shared link. */
.page-crumb{padding:22px 0 0}
.back-home{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:8px;color:var(--muted);font-size:.9rem;font-weight:600;transition:color .2s}
.back-home:hover{color:var(--gold-lite)}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid rgba(255,255,255,.08);padding:60px 0 34px;margin-top:40px}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(auto-fit,minmax(9.5rem,1fr));gap:36px;margin-bottom:40px}
.foot-grid h4{font-family:var(--display);font-size:.95rem;margin-bottom:14px;color:#fff}
.foot-grid a{display:block;color:var(--muted);font-size:.92rem;padding:5px 0;transition:color .2s}
@media(max-width:620px){.foot-grid a{padding:10px 0}}
.foot-grid a:hover{color:var(--gold-lite)}
.foot-brand p{color:var(--muted);font-size:.92rem;margin:14px 0;max-width:24rem}
.foot-place{display:block;color:var(--muted);font-size:.92rem;padding:5px 0}
.socials{display:flex;gap:12px;margin-top:6px}
.socials a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--grey);transition:color .2s,background .2s,transform .2s}
.socials a:hover{color:var(--navy900);background:var(--gold);transform:translateY(-2px)}
.socials svg{width:18px;height:18px}
.foot-bot{border-top:1px solid rgba(255,255,255,.07);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:.86rem}
.foot-bot a{color:var(--muted);text-decoration:none}
.foot-bot a:hover{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

  /* ---------- KOLO MEDIA ---------- */
.media-stage{background:
  radial-gradient(circle at 12% 20%,rgba(232,185,58,.13),transparent 28rem),
  linear-gradient(180deg,rgba(20,26,46,.18),rgba(11,15,30,.82),rgba(20,26,46,.18));
  border-block:1px solid rgba(255,255,255,.06);overflow:hidden}
.media-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,.58fr);gap:40px;align-items:end}
.media-head .sec-head{margin-bottom:0}
.media-note{color:var(--grey);padding-left:22px;border-left:2px solid var(--gold)}
.artist-roster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:46px}
.artist-card{min-width:0;background:linear-gradient(155deg,var(--navy700),var(--navy800));
  border:1px solid rgba(255,255,255,.09);border-radius:24px;overflow:hidden;
  box-shadow:0 24px 55px -38px #000;transition:transform .25s,border-color .25s}
.artist-card:hover{transform:translateY(-5px);border-color:rgba(232,185,58,.45)}
.artist-portrait{position:relative;aspect-ratio:4/5;background:var(--navy600);overflow:hidden}
.artist-portrait::after{content:"";position:absolute;inset:auto 0 0;height:38%;
  background:linear-gradient(transparent,rgba(5,7,15,.82));pointer-events:none}
.artist-portrait img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:transform .45s}
.artist-card:hover .artist-portrait img{transform:scale(1.025)}
.artist-seal{position:absolute;right:16px;bottom:16px;z-index:1;width:72px;height:72px;border-radius:50%;
  display:grid;place-items:center;text-align:center;background:var(--gold);color:var(--navy900);
  border:3px solid var(--navy900);font-family:var(--display);font-size:.62rem;font-weight:800;
  line-height:1.05;letter-spacing:.08em;transform:rotate(-7deg)}
.artist-copy{padding:24px}
.artist-copy h3{font-size:1.55rem;margin-bottom:.65rem}
.artist-bio{color:var(--grey);font-size:.94rem;min-height:4.5em}
.artist-socials{margin-top:18px;padding:14px;border-radius:14px;background:rgba(255,255,255,.035)}
.artist-social-label{display:block;margin-bottom:9px;color:var(--muted);font-size:.69rem;
  font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.artist-social-links{display:flex;flex-wrap:wrap;gap:7px}
.artist-social-link{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:.42rem .7rem;
  border:1px solid rgba(255,255,255,.12);border-radius:999px;color:var(--grey);font-size:.78rem;
  font-weight:600;transition:color .15s,border-color .15s,background .15s}
.artist-social-link:hover{color:var(--navy900);border-color:var(--gold);background:var(--gold)}
.artist-social-link:focus-visible{outline:2px solid var(--gold-lite);outline-offset:2px}
.artist-social-link span{font-size:.8rem}
.artist-rating{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.rating-label{display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.12em;font-weight:700;margin-bottom:3px}
.rating-score{font-family:var(--display);font-size:1.18rem;font-weight:700}
.rating-count{color:var(--muted);font-size:.78rem}
.stars{display:flex;gap:2px}
.star{width:36px;height:40px;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;
  color:var(--navy600);font-size:1.38rem;line-height:1;cursor:pointer;transition:color .15s,background .15s,transform .15s}
.star:hover,.star.hovered,.star.selected{color:var(--gold)}
.star:hover{background:rgba(232,185,58,.1);transform:translateY(-1px)}
.star:focus-visible{outline:2px solid var(--gold-lite);outline-offset:2px}
.star:disabled{cursor:wait;opacity:.65}
.media-status{min-height:1.6em;margin-top:18px;color:var(--grey);text-align:center}
.media-status.error{color:var(--red-lite)}
.artist-empty{grid-column:1/-1;padding:42px;border:1px dashed rgba(255,255,255,.16);
  border-radius:20px;text-align:center;color:var(--grey)}
.artist-skeleton{min-height:510px;border-radius:24px;background:linear-gradient(100deg,var(--navy800) 20%,
  var(--navy700) 42%,var(--navy800) 64%);background-size:300% 100%;animation:mediaShimmer 1.5s infinite}
@keyframes mediaShimmer{to{background-position:-150% 0}}
/* ---------- KOLO SHOW ---------- */
.show-stage{position:relative;background:linear-gradient(135deg,#130811 0%,var(--navy900) 44%,#121b38 100%);overflow:hidden}
.show-stage::before{content:"ON AIR";position:absolute;right:-.04em;top:-.18em;color:rgba(232,185,58,.035);
  font-family:var(--display);font-size:clamp(8rem,22vw,22rem);font-weight:900;letter-spacing:-.08em;pointer-events:none}
.show-grid{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(22rem,1.2fr);gap:56px;align-items:start}
.show-copy{position:sticky;top:110px}
.show-badge{display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;padding:.48rem .8rem;border-radius:999px;
  background:rgba(200,16,46,.16);border:1px solid rgba(255,99,126,.35);color:#ff9aae;font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.show-badge::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--red-lite);box-shadow:0 0 0 6px rgba(200,16,46,.18)}
/* The 3rem floor overflowed a 320px screen on the longest word in these
   headings; 2.3rem is the largest that still fits one. */
.show-copy :is(h1,h2){font-size:clamp(2.3rem,7vw,6.5rem);line-height:.88;letter-spacing:-.055em;margin-bottom:24px;overflow-wrap:break-word}
.show-copy :is(h1,h2) em{display:block;color:var(--gold);font-style:normal}
.show-lede{max-width:34rem;color:var(--grey);font-size:1.1rem}
.show-free{display:flex;gap:14px;margin:28px 0;padding:18px 0;border-block:1px solid rgba(255,255,255,.1)}
.show-free strong{color:var(--gold);font-family:var(--display);font-size:2.15rem;line-height:1}
.show-free span{color:var(--grey);font-size:.88rem}
.show-watch{display:inline-flex;align-items:center;gap:9px;color:var(--white);font-weight:700}
.show-watch:hover{color:var(--gold)}
.show-form{position:relative;background:rgba(9,13,28,.88);border:1px solid rgba(232,185,58,.23);border-radius:28px;padding:34px;
  box-shadow:0 36px 90px -45px #000;backdrop-filter:blur(16px)}
.show-form-head{display:flex;justify-content:space-between;gap:18px;margin-bottom:26px}
.show-form-head h3{font-size:1.75rem;margin-bottom:5px}.show-form-head p{color:var(--muted);font-size:.88rem}
.show-form-step{color:var(--gold);font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.show-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.show-field{min-width:0}.show-field.wide{grid-column:1/-1}
.show-field label{display:block;margin-bottom:7px;color:var(--grey);font-size:.8rem;font-weight:700}
.show-field input,.show-field select,.show-field textarea{width:100%;border:1px solid rgba(255,255,255,.14);border-radius:12px;
  background:rgba(255,255,255,.045);color:var(--white);font:inherit;padding:.84rem .9rem;outline:none}
.show-field select{color-scheme:dark}.show-field textarea{min-height:112px;resize:vertical}
.show-field input:focus,.show-field select:focus,.show-field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,185,58,.12)}
.show-field small{display:block;margin-top:6px;color:var(--muted);font-size:.73rem}
.show-consent{grid-column:1/-1;display:flex;gap:11px;align-items:flex-start;color:var(--grey);font-size:.82rem}
.show-consent input{width:18px;height:18px;margin-top:1px;accent-color:var(--gold);flex:0 0 auto}
.show-submit{grid-column:1/-1;width:100%;border:0;border-radius:13px;padding:1rem 1.2rem;background:var(--red);color:#fff;
  font:800 1rem var(--body);cursor:pointer;transition:background .15s,transform .15s}
.show-submit:hover{background:var(--red-lite);transform:translateY(-1px)}.show-submit:disabled{cursor:wait;opacity:.62;transform:none}
.show-form-status{grid-column:1/-1;min-height:1.5em;color:var(--grey);font-size:.88rem}.show-form-status.error{color:#ff8da3}.show-form-status.success{color:var(--gold-lite)}
.show-hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
@media(prefers-reduced-motion:reduce){.show-submit{transition:none}}
@media(max-width:900px){.show-grid{grid-template-columns:1fr}.show-copy{position:static}.show-copy :is(h1,h2){max-width:12ch}}
@media(max-width:620px){.show-form{padding:24px 18px}.show-fields{grid-template-columns:1fr}.show-field.wide,.show-consent,.show-submit,.show-form-status{grid-column:1}.show-form-head{display:block}.show-form-step{display:block;margin-top:10px}}
@media(max-width:960px){
  .media-head{grid-template-columns:1fr}
  .artist-roster{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .artist-roster{grid-template-columns:1fr}
  .artist-bio{min-height:0}
  .artist-rating{align-items:flex-start;flex-direction:column}
  .star{width:43px;height:44px}
}

/* Moved with the roster from the landing page, where this sat in a rule
   shared with the download modal. Somebody who has asked the operating
   system for less motion gets the cards without the hover lift, the slow
   zoom, or the loading shimmer. */
@media(prefers-reduced-motion:reduce){
  .artist-card,.artist-portrait img{animation:none;transition:none}
  .artist-skeleton{animation:none}
}