/* Subroom Agency - the page.
   Every act is a TV channel: footage on "screens" with the main site's grain,
   scanlines and green VT323 labels. Everything rests in its final state; the
   motion (assets/js) runs from a start state back to it, so without
   JavaScript, with reduced motion (html.motion-off) or before a clip loads,
   the page still looks finished. */

/* ------------------------------------------------------------- screens -- */

.screen{ position:relative; overflow:hidden; isolation:isolate; background:var(--ink-3); }
.screen::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:url(../img/noise.png) repeat; mix-blend-mode:screen; opacity:.1;
}
.screen::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.26) 0,rgba(0,0,0,.26) 1px,transparent 1px,transparent 3px);
  box-shadow:inset 0 0 120px rgba(0,0,0,.55);
}
.clip{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.osd{
  position:absolute; z-index:3; top:.6rem; left:.85rem;
  font-family:var(--osd); font-size:1.35rem; line-height:1; letter-spacing:.06em;
  color:var(--accent); text-shadow:0 1px 6px rgba(0,0,0,.9);
}
.live{
  position:absolute; z-index:3; top:.65rem; right:.85rem;
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--osd); font-size:1.1rem; line-height:1; color:var(--fg); text-shadow:0 1px 6px rgba(0,0,0,.9);
}
.live i{ width:.55em; height:.55em; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.25; } }

/* ----------------------------------------------------------------- nav -- */

.nav{
  position:fixed; inset:0 0 auto; z-index:50;
  background:linear-gradient(rgba(5,5,6,.75),rgba(5,5,6,0));
  transition:background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.is-solid{ background:var(--ink); box-shadow:0 1px 0 var(--line-soft); }
.nav__inner{ display:flex; align-items:center; gap:1.5rem; height:4.25rem; }
.brand{ display:flex; align-items:center; gap:.7rem; margin-right:auto; }
.brand img{ width:auto; height:1.35rem; }
.brand__agency{ font-size:.7rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); }
.nav__links{ display:none; gap:1.75rem; }
.nav__links a, .nav__phone{ font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim); transition:color .2s; }
.nav__links a:hover, .nav__phone:hover{ color:var(--fg); }
.nav__end{ display:flex; align-items:center; gap:1.25rem; }
.lang{ display:flex; border:1px solid var(--line); border-radius:var(--radius); }
.lang a{ padding:.45em .7em; font-size:.7rem; font-weight:700; letter-spacing:.12em; color:var(--muted); }
.lang a[aria-current]{ background:var(--fg); color:var(--ink); }
.nav__phone, .nav__cta{ display:none; }
.nav__cta{ padding:.85em 1.5em; font-size:.72rem; }
@media (min-width:768px){ .nav__phone, .nav__cta{ display:inline-flex; } }
@media (min-width:1100px){ .nav__links{ display:flex; } }

/* ---------------------------------------------------------------- hero -- */

.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink); }
.wall{ position:absolute; inset:0; display:grid; grid-template-columns:1fr; }
.wall .channel{ grid-area:1/1; opacity:0; transition:opacity .2s steps(2); }
.wall .channel.is-on{ opacity:1; }
.wall::after{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,6,.55) 0,rgba(5,5,6,0) 28%,rgba(5,5,6,.25) 52%,rgba(5,5,6,.94) 100%);
}
.channel__name{
  position:absolute; z-index:3; left:.85rem; bottom:.85rem; display:none;
  font-family:var(--display); font-weight:800; font-size:.85rem; letter-spacing:.06em; color:var(--fg);
}
@media (min-width:768px){
  .wall{ grid-template-columns:repeat(4,1fr); gap:6px; }
  .wall .channel{ grid-area:auto; opacity:1; }
  .channel__name{ display:block; }
  .wall::after{ background:linear-gradient(180deg,rgba(5,5,6,.5) 0,rgba(5,5,6,0) 30%,rgba(5,5,6,.35) 55%,rgba(5,5,6,.96) 100%); }
}
.wall .osd, .wall .live{ top:5rem; }
.static{
  position:absolute; inset:0; z-index:5; width:100%; height:100%;
  pointer-events:none; opacity:0; image-rendering:pixelated;
}
.static.is-burst{ opacity:.85; }
.intro{ position:absolute; inset:0; z-index:6; display:none; background:var(--ink); pointer-events:none; }
.intro.is-playing{ display:block; }
.intro.is-done{ opacity:0; transition:opacity .2s; }
.hero__text{ position:relative; z-index:7; padding-block:7rem 6.5rem; }
.hero__text .display{ max-width:14ch; }
.hero__text .lead{ max-width:52ch; color:var(--fg); margin-top:1.25rem; }
.hero__text .btn-row{ margin-top:2rem; }
@media (min-width:768px){ .hero__text{ padding-bottom:4.5rem; } }


/* ---------------------------------------------------------------- bands -- */
/* A section over a darkened clip. */

.band{ position:relative; isolation:isolate; padding-block:var(--section); overflow:hidden; }
.band__bg{ position:absolute; inset:0; z-index:-1; }
.band__bg::after{ content:""; position:absolute; inset:0; background:rgba(5,5,6,.82); }

/* ---------------------------------------------------------------- proof -- */

.stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 1.5rem; }
@media (min-width:1024px){ .stats{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.stat__value{
  margin:0 0 .35rem; font-family:var(--display); font-weight:800;
  font-size:clamp(2.2rem,5vw,3.75rem); line-height:1; letter-spacing:-.03em; color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.stat__value .hash{ color:var(--accent); }
.stat__label{ margin:0; font-size:.9rem; color:var(--fg-dim); max-width:26ch; }
.ticker{ margin-top:clamp(2.5rem,5vw,4rem); }
.ticker__label{ margin:0 0 .85rem; font-size:.75rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.ticker__window{ overflow:hidden; border-block:1px solid var(--line-soft); padding-block:1rem; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.track{ display:flex; width:max-content; animation:tick 40s linear infinite; }
.ticker.is-off .track{ animation-play-state:paused; }
.track__set{ display:flex; align-items:center; gap:1.75rem; padding-right:1.75rem; }
.track span, .fade span{ font-family:var(--display); font-weight:800; font-size:clamp(1.1rem,2.2vw,1.6rem); text-transform:uppercase; white-space:nowrap; color:var(--fg); }
.track i{ font-style:normal; color:var(--accent); }
@keyframes tick{ to{ transform:translateX(-50%); } }
/* radio and TV: a group of names at a time, crossfading (motion.js). The
   groups share one cell, so the strip is as tall as the tallest and never
   jumps. Only opacity changes, so it runs with reduced motion too. */
.ticker--fade .ticker__window{ mask-image:none; }
.fade{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.fade__group{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem 1.75rem; }
.fade span:not(:last-child)::after{ content:"·"; margin-left:1.75rem; color:var(--accent); } /* the dot stays at a line's end */
.fade.is-on .fade__group{ grid-area:1/1; align-self:center; opacity:0; transition:opacity .9s var(--ease); }
.fade.is-on .fade__group.is-shown{ opacity:1; }

/* --------------------------------------------------------------- events -- */

.tiles{ display:grid; gap:1rem; margin-top:clamp(2rem,4vw,3rem); }
@media (min-width:640px){ .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .tiles{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.tile{ aspect-ratio:4/5; display:flex; align-items:flex-end; border-radius:var(--radius); }
.tile .clip{ filter:saturate(.9); }
.tile::after{ background:linear-gradient(180deg,rgba(5,5,6,0) 35%,rgba(5,5,6,.92) 100%), repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0,rgba(0,0,0,.22) 1px,transparent 1px,transparent 3px); }
.tile__text{ position:relative; z-index:3; padding:1.25rem; }
.tile__text p{ margin:0; font-size:.92rem; }
.tile--light .light{
  position:absolute; inset:-40%; z-index:1;
  background:
    radial-gradient(closest-side,rgba(29,191,106,.55),transparent 70%) 20% 30%/60% 60% no-repeat,
    radial-gradient(closest-side,rgba(29,191,106,.25),transparent 70%) 80% 70%/70% 70% no-repeat;
  animation:sweep 9s ease-in-out infinite alternate;
}
@keyframes sweep{ to{ transform:translate(18%,-12%) rotate(12deg); } }
html.motion-off .tile--light .light{ animation:none; }

/* -------------------------------------------------------------- artists -- */

.cards{ display:grid; gap:1.25rem; margin-top:clamp(2rem,4vw,3rem); align-items:start; }
@media (min-width:900px){ .cards{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.card{ display:flex; flex-direction:column; background:var(--ink-2); border:1px solid var(--line-soft); border-radius:var(--radius); }
.card__media{ aspect-ratio:4/5; }
.card__media .clip{ filter:grayscale(1) contrast(1.05); transition:filter .6s var(--ease); }
.card.is-live .card__media .clip{ filter:none; }
@media (hover:hover){ .card:hover .card__media .clip{ filter:none; } }
.card__body{ display:flex; flex-direction:column; gap:.85rem; padding:1.5rem; }
.card__body > *{ margin:0; }
.card__body .btn{ align-self:flex-start; margin-top:.35rem; }
.card__name{ font-size:clamp(1.4rem,2.4vw,1.9rem); text-transform:uppercase; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.tag{ font-family:var(--text); font-size:.62rem; letter-spacing:.2em; padding:.4em .7em; border:1px solid var(--accent); color:var(--accent); border-radius:var(--radius); }
.card__genres{ font-family:var(--osd); font-size:1.15rem; line-height:1.2; color:var(--accent); }
.card__line{ color:var(--fg); }
.formats{ list-style:none; padding:0; display:grid; gap:.4rem; font-size:.92rem; }
.formats b{ color:var(--fg); }
.tour{
  align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:.55em .85em; background:var(--tour); color:#fff; border-radius:var(--radius);
}
@media (min-width:900px){
  .card[data-slug="2xm"]{ grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); }
  .card[data-slug="2xm"] .card__media{ aspect-ratio:auto; min-height:26rem; }
  .card[data-slug="2xm"] .card__body{ padding:2.25rem; }
  .card[data-slug="2xm"] .more{ grid-column:1/-1; }
}
.more{ border-top:1px solid var(--line-soft); }
.more summary{
  list-style:none; cursor:pointer; padding:1rem 1.5rem;
  font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--fg);
  display:flex; justify-content:space-between;
}
.more summary::-webkit-details-marker{ display:none; }
.more summary::after{ content:"+"; color:var(--accent); transition:transform .3s var(--ease); }
.more[open] summary::after{ transform:rotate(45deg); }
.more__body{ display:grid; gap:1.25rem; padding:0 1.5rem 1.5rem; }
@media (min-width:900px){ .card[data-slug="2xm"] .more__body{ grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); } }
.more__media{ aspect-ratio:16/10; border-radius:var(--radius); }
.more__text p{ font-size:.95rem; }
.more__label{ margin:1.25rem 0 .5rem; font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.links{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; font-size:.88rem; }
.links a{ color:var(--fg); border-bottom:1px solid var(--accent-dim); transition:border-color .2s; }
.links a:hover{ border-color:var(--accent); }

/* ---------------------------------------------------------------- night -- */

.night .lead{ max-width:60ch; }
.timeline{ position:relative; margin:clamp(2rem,4vw,3rem) 0 2rem; }
.blocks{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
@media (min-width:768px){ .blocks{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.block{
  padding:1.6rem 1rem; text-align:center;
  font-family:var(--display); font-weight:800; font-size:clamp(.95rem,1.6vw,1.2rem); letter-spacing:.04em; color:var(--fg);
  background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:var(--radius);
  transition:transform .6s var(--ease), opacity .6s var(--ease);
}
.block--finale{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
html.motion-on .timeline:not(.is-in) .block{ opacity:0; transform:translateY(16px); }
.timeline.is-in .block:nth-child(2){ transition-delay:.12s; }
.timeline.is-in .block:nth-child(3){ transition-delay:.24s; }
.timeline.is-in .block:nth-child(4){ transition-delay:.36s; }
.playhead{
  position:absolute; top:-10px; bottom:calc(1.6rem + 10px); left:calc(var(--p,1) * 100%); width:2px;
  background:var(--fg); box-shadow:0 0 12px var(--accent); display:none;
}
@media (min-width:768px){ .playhead{ display:block; } }
.timeline__note{ margin:.9rem 0 0; font-family:var(--osd); font-size:1.1rem; color:var(--muted); }

/* --------------------------------------------------------- promo, steps -- */

.promo__grid{ display:grid; gap:3rem; align-items:center; }
@media (min-width:1024px){ .promo__grid{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); } }
.steps{ position:relative; list-style:none; padding:0 0 0 1.6rem; margin:2rem 0 0; display:grid; gap:1.75rem; }
.steps__line{ position:absolute; left:0; top:.4rem; bottom:.4rem; width:2px; background:var(--line); }
.steps__line::after{ content:""; position:absolute; inset:0; background:var(--accent); transform-origin:top; transform:scaleY(var(--p,1)); }
.step{ position:relative; transition:opacity .5s var(--ease); }
.step::before{
  content:""; position:absolute; left:calc(-1.6rem - 5px); top:.35rem; width:12px; height:12px; border-radius:50%;
  background:var(--ink); border:2px solid var(--accent);
}
.step.is-on::before{ background:var(--accent); box-shadow:0 0 12px var(--accent); }
html.motion-on .steps .step:not(.is-on){ opacity:.45; }
.step > *{ margin:0 0 .35rem; }
.step p:last-child{ margin:0; }
.step__when, .step__n{ font-family:var(--osd); font-size:1.25rem; line-height:1; color:var(--accent); }
.steps--row{ padding:2.25rem 0 0; }
.steps--row .steps__line{ top:0; bottom:auto; left:0; right:0; width:auto; height:2px; }
.steps--row .steps__line::after{ transform-origin:left; transform:scaleX(var(--p,1)); }
.steps--row .step::before{ left:0; top:calc(-2.25rem - 5px); }
@media (min-width:900px){ .steps--row{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:2rem; } }
.phone{ margin:0 auto; width:min(19rem,80vw); }
.phone__screen{
  position:relative; aspect-ratio:9/19; overflow:hidden; background:var(--ink-3);
  border:10px solid #16161c; border-radius:2.4rem; box-shadow:0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px var(--line);
}
.phone figcaption{ margin-top:1rem; text-align:center; font-size:.85rem; color:var(--muted); }

/* -------------------------------------------------------------- booking -- */

.booking__grid{ display:grid; gap:2.5rem; align-items:start; }
@media (min-width:1024px){ .booking__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); } }
.callbox{ margin-top:2rem; padding:1.25rem 1.4rem; border:1px solid var(--line); border-radius:var(--radius); display:grid; gap:.3rem; }
.callbox p{ margin:0; }
.callbox__q{ font-size:.75rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.callbox__who{ font-family:var(--display); font-weight:800; color:var(--fg); font-size:1.15rem; }
.callbox a{ color:var(--fg); }
.form{ position:relative; padding:clamp(1.25rem,3vw,2.25rem); background:rgba(11,11,15,.94); border:1px solid var(--line); border-radius:var(--radius); }
.fgrid{ display:grid; gap:1rem; }
@media (min-width:640px){ .fgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .field.full{ grid-column:1/-1; } }
.field label{ display:block; margin-bottom:.4rem; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); }
.req{ color:var(--accent); }
.opt{ text-transform:none; letter-spacing:0; font-weight:400; color:var(--muted); }
.field input, .field select, .field textarea{
  width:100%; padding:.8rem .9rem; font:inherit; color:var(--fg);
  background:var(--ink); border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); }
.field select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%); background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%; background-size:5px 5px; background-repeat:no-repeat; padding-right:2.2rem; }
.hint{ margin:.4rem 0 0; font-size:.8rem; color:var(--muted); }
.trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.consent{ display:flex; gap:.7rem; align-items:flex-start; margin:1.25rem 0; font-size:.85rem; }
.consent input{ margin-top:.25rem; accent-color:var(--accent); }
.consent a{ color:var(--accent); }
.btn--send{ gap:.8em; }
.onair{ width:.6em; height:.6em; border-radius:50%; background:var(--accent-ink); box-shadow:0 0 0 2px rgba(4,20,12,.35); }
.form.is-sending .onair{ animation:pulse .7s ease-in-out infinite; background:#fff; }
.form.is-sent .onair{ background:#fff; box-shadow:0 0 12px #fff; }
.form__note{ margin:.85rem 0 0; font-size:.82rem; color:var(--muted); }
.form__status{ margin:0 0 .85rem; font-weight:600; }
.form__status:empty{ display:none; }
.form__status.is-ok, .flash--ok{ color:var(--accent); }
.form__status.is-err, .flash--err{ color:#ff7a8c; }
.flash{ margin:0 0 1.25rem; padding:.9rem 1rem; border:1px solid currentColor; border-radius:var(--radius); font-weight:600; }
.form .static{ z-index:4; }

/* ------------------------------------------------------------------ faq -- */

.faq-item{ border-bottom:1px solid var(--line-soft); }
.faq-item summary{
  list-style:none; cursor:pointer; padding:1.25rem 2rem 1.25rem 0; position:relative;
  font-family:var(--display); font-weight:700; font-size:clamp(1rem,1.6vw,1.2rem); color:var(--fg);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; position:absolute; right:0; top:1.2rem; color:var(--accent); font-size:1.3rem; transition:transform .3s var(--ease); }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ margin:0 0 1.4rem; }
.faq-item[open] p{ animation:faq-in .35s var(--ease); }
@keyframes faq-in{ from{ opacity:0; transform:translateY(-6px); } }

/* --------------------------------------------------------------- footer -- */

.footer{ padding-block:clamp(3rem,6vw,5rem) clamp(6rem,10vw,5rem); border-top:1px solid var(--line-soft); font-size:.92rem; }
.footer__grid{ display:grid; gap:2rem; align-items:start; }
@media (min-width:900px){ .footer__grid{ grid-template-columns:auto 1fr 1.4fr; gap:3rem; } }
.footer__tv{ width:11rem; aspect-ratio:16/9; border-radius:var(--radius); }
.footer__who{ margin:0 0 .3rem; font-family:var(--display); font-weight:800; color:var(--fg); }
.footer a{ color:var(--fg); }
.footer .links{ margin:1rem 0; }
.footer__legal{ color:var(--muted); font-size:.82rem; }

/* ----------------------------------------------------------- mobile bar -- */

.mobile-bar{
  position:fixed; inset:auto 0 0; z-index:40; display:grid; grid-template-columns:1.4fr 1fr; gap:.5rem;
  padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(5,5,6,.94); border-top:1px solid var(--line-soft); backdrop-filter:blur(8px);
}
.mobile-bar .btn{ padding:1em 1em; }
@media (min-width:768px){ .mobile-bar{ display:none; } }

/* -------------------------------------------------------- cookie banner -- */
/* views/cookies.php, run by assets/js/consent.js. Above the phone's bottom
   bar; reject is one tap, like accept. */

.cookies{
  position:fixed; z-index:60; left:var(--gutter); right:var(--gutter);
  bottom:calc(.75rem + env(safe-area-inset-bottom)); max-width:36rem;
  padding:1.25rem 1.35rem; display:grid; gap:.85rem;
  background:rgba(11,11,15,.97); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.9);
}
.cookies[hidden], .cookies [hidden]{ display:none !important; }
.cookies p{ margin:0; }
.cookies__title{ font-family:var(--display); font-weight:800; color:var(--fg); }
.cookies__text{ font-size:.85rem; }
.cookies a{ color:var(--accent); }
.cookies__choices{ display:grid; gap:.6rem; padding-block:.25rem; border-block:1px solid var(--line-soft); }
.cookies__cat{ display:flex; gap:.7rem; align-items:flex-start; font-size:.85rem; }
.cookies__cat input{ margin-top:.2rem; accent-color:var(--accent); }
.cookies__cat b{ color:var(--fg); }
.cookies__buttons{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; }
.cookies__buttons .btn{ flex:1 1 auto; padding:.9em 1.2em; font-size:.72rem; }
.cookies__more{ font-size:.8rem; color:var(--muted); text-decoration:underline; padding:.5rem .25rem; }
.cookies__more:hover{ color:var(--fg); }
.link{ font-size:inherit; color:inherit; text-decoration:underline; text-underline-offset:.15em; padding:0; }
.link:hover{ color:var(--fg); }

/* --------------------------------------------------------------- reveal -- */

html.motion-on .reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
html.motion-on .reveal.is-in{ opacity:1; transform:none; }

/* ------------------------------------------------- reduced motion, stills -- */

html.motion-off .track{ animation:none; flex-wrap:wrap; width:auto; }
html.motion-off .track__set{ flex-wrap:wrap; row-gap:.4rem; }
html.motion-off .track__set > i:last-child{ display:none; }
html.motion-off .track__set + .track__set{ display:none; }
html.motion-off .ticker__window{ mask-image:none; }
html.motion-off .live i{ animation:none; }
@media (prefers-reduced-motion: reduce){
  .track{ animation:none; flex-wrap:wrap; width:auto; }
  .track__set{ flex-wrap:wrap; row-gap:.4rem; }
  .track__set > i:last-child{ display:none; }
  .track__set + .track__set{ display:none; }
  .ticker__window{ mask-image:none; }
}

/* typed headline: words never break inside */
[data-type] .w{ display:inline-block; white-space:nowrap; }
html.motion-on [data-type] .ch{ opacity:0; transition:opacity .08s steps(1); }
html.motion-on [data-type] .ch.is-in{ opacity:1; }

/* sent: a flicker of static, then a tick on the button */
.form.is-sent .btn--send::after{ content:"✓"; font-size:1.1em; }
html.motion-on .form.is-sent .btn--send{ animation:flick .3s steps(3); }
@keyframes flick{ 33%{ opacity:.35; filter:contrast(2) saturate(0); } 66%{ opacity:.8; } }
.btn:disabled{ cursor:default; opacity:.75; transform:none; }

/* anchors and ?artist= land below the fixed top bar */
[id]{ scroll-margin-top:4.5rem; }

/* ------------------------------------------------------- privacy policy -- */

.policy{ padding-top:7rem; }
.policy h2{ margin-top:2.25rem; }
.policy a{ color:var(--accent); }
.policy code{ font-family:var(--osd); font-size:1.1em; color:var(--fg); }
.policy__back{ font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.policy__updated{ color:var(--muted); font-size:.85rem; }

/* iOS in Low Power Mode will not autoplay and draws its own play button over
   the clip; the poster shows clean instead. */
.clip::-webkit-media-controls-start-playback-button{ display:none !important; -webkit-appearance:none; }
.clip::-webkit-media-controls{ display:none !important; }

/* -------------------------------------------------------- short form -- */

.chips{ border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.chips legend{ display:block; margin-bottom:.5rem; padding:0; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); }
.chip{ position:relative; cursor:pointer; }
.chip input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.chip span{
  display:inline-block; padding:.65em 1.05em; font-size:.85rem; color:var(--fg-dim);
  border:1px solid var(--line); border-radius:999px; transition:all .2s var(--ease);
}
.chip:hover span{ border-color:var(--fg-dim); color:var(--fg); }
.chip input:checked + span{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600; }
.chip input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:3px; }
.chips .hint{ flex-basis:100%; margin:.15rem 0 0; }
.more-msg summary{ cursor:pointer; list-style:none; font-size:.85rem; font-weight:600; color:var(--accent); }
.more-msg summary::-webkit-details-marker{ display:none; }
.more-msg[open] summary{ margin-bottom:.6rem; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.form__note a{ color:var(--accent); }
.field .chip{ display:inline-block; margin:0; font-size:inherit; font-weight:400; letter-spacing:0; text-transform:none; color:inherit; }