/* ==========================================================================
   Toolbox Music — site styles
   Design language: monospace type, pure black/white chrome, 1px hairline
   outlined buttons, square corners. Colour comes only from artwork.
   ========================================================================== */

:root{
  --grey:#a8adb5; --dim:#6e747d;
  --line:rgba(255,255,255,.30); --hair:rgba(255,255,255,.13);
  --mono:"Roboto Mono","droid-sans-mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --shell:1560px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:#000;color:#fff;font-family:var(--mono);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:#fff;color:#000}
.shell{max-width:var(--shell);margin:0 auto;padding:0 34px}
@media(max-width:760px){.shell{padding:0 18px}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:400;background:#fff;color:#000;padding:12px 18px;
  font-size:13px;text-transform:uppercase;letter-spacing:.1em}
.skip:focus{left:0}

/* ---------- header ---------- */
header.site{position:fixed;top:0;left:0;right:0;z-index:300;padding:20px 0;transition:.3s}
header.site.solid{background:rgba(0,0,0,.93);padding:12px 0;backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:24px}
.mark{display:block;background:url(../img/brand/wordmark.png) no-repeat center/contain}
.brand .mark{height:25px;width:100px}
nav.main{display:flex;align-items:center;gap:26px}
nav.main a{font-size:14.5px;font-weight:500;position:relative;padding:3px 0;white-space:nowrap}
nav.main a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:#fff;
  transform:scaleX(0);transform-origin:left;transition:transform .28s}
nav.main a:hover::after,nav.main a.on::after{transform:scaleX(1)}
.burger{display:none;background:none;border:0;color:#fff;cursor:pointer;font-family:var(--mono);
  font-size:12px;text-transform:uppercase;letter-spacing:.14em;padding:6px}
@media(max-width:1150px){
  .brand .mark{height:20px;width:80px}
  /* backdrop-filter on the header makes it the containing block for fixed
     children, which collapsed this panel to the header's height and left the
     bottom of the menu painted over every page. Drop it on mobile and pin the
     panel to explicit viewport dimensions instead of inset:0. */
  header.site.solid{backdrop-filter:none;background:#000}
  nav.main{position:fixed;inset:auto;top:0;left:0;width:100%;height:100svh;min-height:100vh;
    background:#000;flex-direction:column;justify-content:center;gap:6px;padding:0 18px;
    transform:translateY(-101%);transition:transform .45s cubic-bezier(.6,0,.2,1);z-index:290;
    visibility:hidden}
  nav.main.open{transform:none;visibility:visible}
  nav.main a{font-size:21px;padding:12px 20px;text-align:center}
  .burger{display:block;position:relative;z-index:300;padding:11px 4px}
  .brand{position:relative;z-index:300;padding:12px 0;margin:-12px 0}
}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--mono);font-size:13px;font-weight:500;text-transform:uppercase;
  letter-spacing:.09em;background:transparent;color:#fff;border:1px solid #fff;border-radius:0;
  padding:11px 22px;cursor:pointer;transition:background .22s,color .22s}
.btn:hover{background:#fff;color:#000}
.btn--sm{padding:7px 15px;font-size:11.5px}
.inv .btn,.btn--inv{color:#000;border-color:#000}
.inv .btn:hover,.btn--inv:hover{background:#000;color:#fff}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;padding:96px 0 40px}
.hero__bg{position:absolute;inset:-8%;background-size:cover;background-position:center;
  filter:blur(46px) saturate(.5) brightness(.34);transform:scale(1.2);
  animation:kb 30s ease-in-out infinite alternate;will-change:transform}
@keyframes kb{0%{transform:scale(1.2) translate3d(0,0,0)}100%{transform:scale(1.34) translate3d(-2%,-1.5%,0)}}
.hero__veil{position:absolute;inset:0;background:
  radial-gradient(ellipse at 50% 40%,rgba(0,0,0,.25),rgba(0,0,0,.86) 78%),
  linear-gradient(180deg,rgba(0,0,0,.86) 0%,transparent 22%,transparent 72%,#000 100%)}
.hero__poster{position:relative;z-index:3;width:100%;padding:0 34px;margin-bottom:38px; transform:translateZ(0);will-change:transform;backface-visibility:hidden}
.hero__poster .inner{max-width:min(1180px,calc((100svh - 360px) * 1.7778));margin:0 auto;border:1px solid var(--hair);overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.75)}
.hero__in{position:relative;z-index:3;width:100%;padding:0 34px}
.hero__in .shell{padding:0;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.hero__strap{font-size:11px;text-transform:uppercase;letter-spacing:.38em;margin-bottom:22px;
  text-shadow:0 2px 20px rgba(0,0,0,.9)}
.hero h1{font-size:clamp(30px,4.6vw,58px);line-height:1;letter-spacing:-.02em;font-weight:700;
  text-shadow:0 3px 30px rgba(0,0,0,.9)}
.hero h1 em{font-style:normal;display:block;font-size:.4em;letter-spacing:.16em;font-weight:500;
  margin-top:12px;text-transform:uppercase;color:var(--grey)}
.hero__meta{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);margin-top:16px;
  text-shadow:0 2px 16px rgba(0,0,0,.9)}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0}
.hero__cta .btn{padding:13px 30px;background:rgba(0,0,0,.32);backdrop-filter:blur(4px)}
.hero__cta .btn:hover{background:#fff}
@media(max-width:760px){.hero{min-height:auto;padding:104px 0 44px}.hero__poster{padding:0 18px;margin-bottom:26px}.hero__poster .inner{max-width:100%}.hero__in{padding:0 18px}.hero__cta{width:100%}.hero__cta .btn{flex:1;text-align:center;padding:15px 18px}}
/* Landscape phones: the viewport-derived poster cap would collapse to nothing. */
@media(max-height:520px){.hero{min-height:auto;padding:96px 0 40px}.hero__poster .inner{max-width:min(1180px,72vw)}}

/* ---------- marquee ---------- */
.marq{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);overflow:hidden;
  padding:15px 0;white-space:nowrap}
.marq__t{display:inline-block;animation:slide 42s linear infinite;font-size:13px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--grey)}
.marq__t span{color:#fff;padding:0 3px}
.marq:hover .marq__t{animation-play-state:paused}
@keyframes slide{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.sec{padding:100px 0;border-top:1px solid var(--hair)}
.sec--flush{padding:0;border:0}
.sec.inv{background:#fff;color:#000;border-top-color:rgba(0,0,0,.14)}
.sec.inv .eyebrow,.sec.inv .lead{color:#444}
@media(max-width:760px){.sec{padding:64px 0}}
.eyebrow{font-size:10.5px;text-transform:uppercase;letter-spacing:.34em;color:var(--grey);margin-bottom:15px}
h1,h2,h3,h4{font-family:var(--mono);font-weight:600;letter-spacing:-.01em;line-height:1.1}
h2.title{font-size:clamp(29px,5.2vw,62px);margin-bottom:18px;text-transform:uppercase}
h3{font-size:clamp(17px,2.2vw,23px);text-transform:uppercase;letter-spacing:.02em}
.lead{font-size:15.5px;line-height:1.75;color:var(--grey);max-width:68ch}
.sec p+p{margin-top:14px}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:40px;flex-wrap:wrap}

/* ---------- cover grid ---------- */
.covers{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px}
.cov{position:relative;aspect-ratio:1;overflow:hidden;background:#0c0c0e;display:block}
.cov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.cov:hover img{transform:scale(1.09)}
.cov__ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.9) 100%);
  opacity:0;transition:opacity .38s;display:flex;flex-direction:column;justify-content:flex-end;padding:18px}
.cov:hover .cov__ov,.cov:focus-within .cov__ov{opacity:1}
.cov__c{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);margin-bottom:6px}
.cov__t{font-size:13.5px;font-weight:600;line-height:1.3}
.cov__a{font-size:11.5px;color:var(--grey);margin-top:3px}
.cov__play{position:absolute;top:12px;right:12px;width:36px;height:36px;border:1px solid rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);
  opacity:0;transform:translateY(-4px);transition:.3s;z-index:3;cursor:pointer;padding:0}
.cov:hover .cov__play,.cov__play:focus-visible{opacity:1;transform:none}
.cov__play svg{width:11px;height:11px;fill:#fff}
@media(max-width:640px){.covers{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
  .cov__play{opacity:1;transform:none;width:44px;height:44px}}

/* ---------- filters ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.fbtn{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;
  background:transparent;color:var(--grey);border:1px solid var(--hair);padding:8px 15px;cursor:pointer;transition:.22s}
.fbtn:hover{color:#fff;border-color:var(--line)}
.fbtn.on{background:#fff;color:#000;border-color:#fff}

/* ---------- player drawer ---------- */
.player{position:fixed;left:0;right:0;bottom:0;z-index:320;background:#000;border-top:1px solid var(--line);
  transform:translateY(100%);transition:transform .4s cubic-bezier(.5,0,.2,1)}
.player.open{transform:none}
.player__bar{display:flex;align-items:center;gap:16px;padding:10px 20px;max-width:var(--shell);margin:0 auto}
.player__meta{flex:1;min-width:0}
.player__t{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player__a{font-size:11.5px;color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player__x{background:none;border:1px solid var(--hair);color:#fff;font-family:var(--mono);font-size:11px;
  padding:6px 12px;cursor:pointer;text-transform:uppercase;letter-spacing:.12em}
.player__x:hover{background:#fff;color:#000}
.player iframe{width:100%;height:130px;border:0;display:block;background:#000}

/* ---------- feature ---------- */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:2px;align-items:stretch}
.feat__img{position:relative;min-height:340px;overflow:hidden;background:#0c0c0e}
.feat__img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.feat__b{border:1px solid var(--hair);padding:44px;display:flex;flex-direction:column;justify-content:center}
.feat__b h3{font-size:clamp(21px,3vw,34px);margin-bottom:16px}
.feat__b p{color:var(--grey);font-size:14.5px;line-height:1.75}
@media(max-width:860px){.feat{grid-template-columns:1fr}.feat__b{padding:30px}}

/* ---------- events ---------- */
.ecard{border:1px solid var(--hair);display:flex;flex-direction:column;transition:border-color .3s;overflow:hidden}
.ecard:hover{border-color:var(--line)}
.ecard__mw{overflow:hidden}
.ecard__mw img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.ecard:hover .ecard__mw img{transform:scale(1.05)}
.ecard__b{padding:22px 22px 24px}
.ecard__d{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);margin-bottom:11px}
.ecard__b h3{font-size:18px;margin-bottom:10px}
.ecard__l{font-size:12.5px;color:var(--grey);line-height:1.68}
.ecard__f{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;flex-wrap:wrap}
.price{font-size:12.5px;letter-spacing:.1em}
.ecard.past{opacity:.55}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px}
.per{position:relative;aspect-ratio:4/5;overflow:hidden;background:#0c0c0e;display:block}
.per img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;
  filter:grayscale(1) contrast(1.05);transition:transform .8s cubic-bezier(.2,.7,.3,1),filter .5s}
.per:hover img{transform:scale(1.07);filter:grayscale(0) contrast(1)}
.per__o{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.92) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:18px}
.per__n{font-size:14px;font-weight:600}
.per__r{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-top:5px}

/* ---------- cards ---------- */
.grid{display:grid;gap:2px}
.g2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}
.card{border:1px solid var(--hair);padding:26px 24px;display:flex;flex-direction:column;
  transition:background .28s,border-color .28s;min-height:100%}
.card:hover{background:rgba(255,255,255,.04);border-color:var(--line)}
.inv .card{border-color:rgba(0,0,0,.15)}
.card__no{font-size:10.5px;letter-spacing:.26em;color:var(--grey);text-transform:uppercase;margin-bottom:12px}
.card h3{margin-bottom:11px}
.card p{font-size:13.5px;color:var(--grey);line-height:1.7;flex:1}
.card .btn{align-self:flex-start;margin-top:20px}
.card--img{padding:0;overflow:hidden}
.card--img img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.card--img:hover img{transform:scale(1.06)}
.card--img .card__x{padding:22px 24px 26px}

/* ---------- release rows ---------- */
.rel{display:grid;grid-template-columns:62px 104px 1fr auto;gap:18px;align-items:center;padding:14px 4px;
  border-bottom:1px solid var(--hair);transition:background .25s}
.rel:hover{background:rgba(255,255,255,.04)}
.rel:first-of-type{border-top:1px solid var(--hair)}
.rel img{width:62px;height:62px;object-fit:cover;background:#0c0c0e}
.rel__cat{font-size:11px;letter-spacing:.14em;color:var(--grey)}
.rel__t{font-size:14.5px;font-weight:500;display:block}
.rel__a{font-size:12.5px;color:var(--grey);margin-top:3px;display:block}
.rel__d{font-size:11.5px;letter-spacing:.12em;color:var(--grey);text-align:right;white-space:nowrap}
@media(max-width:700px){.rel{grid-template-columns:54px 1fr;gap:14px}.rel__cat,.rel__d{display:none}
  .rel img{width:54px;height:54px}}

/* ---------- timeline / stats / radio ---------- */
.tl{position:relative;padding-left:28px}
.tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:rgba(0,0,0,.16)}
.tl__i{position:relative;margin-bottom:30px}
.tl__i::before{content:"";position:absolute;left:-27px;top:7px;width:11px;height:11px;border:1px solid #000;background:#fff}
.tl__y{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;margin-bottom:6px}
.tl__b{font-size:14px;color:#444;line-height:1.72;max-width:64ch}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:2px}
.stat{border:1px solid var(--hair);padding:30px 22px;text-align:center}
.stat b{display:block;font-size:32px;font-weight:600;line-height:1}
.stat span{display:block;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);margin-top:11px}
.rad{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--hair)}
.rad:first-of-type{border-top:1px solid var(--hair)}
.rad h3{font-size:17px;margin-bottom:7px}
.rad p{font-size:13px;color:var(--grey)}
.rad__w{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
@media(max-width:700px){.rad{grid-template-columns:1fr;gap:9px}}

/* ---------- embeds ---------- */
.scw{border:1px solid var(--hair);background:#0c0c0e}
.scw iframe{width:100%;height:450px;display:block;border:0}
.iggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2px}
.igw{border:1px solid var(--hair);background:#0c0c0e;overflow:hidden}
.igw iframe{width:100%;height:560px;display:block;border:0;background:#fff}
@media(max-width:640px){.scw iframe{height:380px}}

/* ---------- forms ---------- */
.form{display:flex;max-width:540px;flex-wrap:wrap}
.form input{flex:1;min-width:210px;background:transparent;border:1px solid #fff;border-right:0;color:#fff;
  font-family:var(--mono);font-size:14px;padding:12px 16px;border-radius:0;outline:none}
.form input::placeholder{color:var(--dim)}
.form input:focus{background:rgba(255,255,255,.07)}
@media(max-width:520px){.form input{border-right:1px solid #fff;margin-bottom:-1px}}
.dform{display:grid;gap:2px;max-width:720px}
.dform label{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);margin-bottom:8px}
.dform .fld{border:1px solid var(--hair);padding:18px 20px}
.dform input,.dform select,.dform textarea{width:100%;background:transparent;border:0;color:#fff;
  font-family:var(--mono);font-size:14px;outline:none;resize:vertical}
.dform input::placeholder,.dform textarea::placeholder{color:var(--dim)}
.dform select{cursor:pointer}
.dform select option{background:#000;color:#fff}
.dform .fld:focus-within{border-color:var(--line);background:rgba(255,255,255,.03)}
.dform .btn{justify-self:start;margin-top:18px}
.fmsg{font-size:13px;margin-top:14px;color:var(--grey)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:36px}}
.dl{display:grid;grid-template-columns:auto 1fr;gap:9px 24px;font-size:13.5px}
.dl dt{color:var(--grey);text-transform:uppercase;font-size:10.5px;letter-spacing:.2em;padding-top:4px}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--hair);padding:52px 0 30px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
.fcol h4{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--grey);margin-bottom:14px;font-weight:500}
.fcol a{display:block;font-size:13px;padding:5px 0;opacity:.8;transition:opacity .2s}
.fcol a:hover{opacity:1}
.fcol .mark{height:21px;width:84px;margin-bottom:16px}
.fcol p{font-size:12.5px;color:var(--grey);line-height:1.72}
.fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;
  border-top:1px solid var(--hair);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}

/* ---------- routing / motion / a11y ---------- */
.page{display:none}.page.live{display:block}
.page:not(.home){padding-top:104px}
.rv{opacity:0;transform:translateY(20px);transition:opacity .75s ease,transform .75s ease}
.rv.in{opacity:1;transform:none}
.note{font-size:11.5px;color:var(--dim);margin-top:11px}
.tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.tag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--hair);padding:4px 8px;color:var(--grey)}
.dead{opacity:.45}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid #fff;outline-offset:3px}
.inv a:focus-visible,.inv button:focus-visible{outline-color:#000}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

.logomark{display:block;max-width:760px;margin:44px 0 0}
.logomark img{width:100%;height:auto}
@media(max-width:760px){.logomark{margin-top:30px}}

/* ---------- touch targets ----------
   Everything tappable clears 44px on a phone. Negative margins keep the
   visual rhythm identical to desktop while the hit area grows. */
@media(hover:none),(max-width:1150px){
  .fcol a{padding:11px 0}
  .rad__w{padding:10px 0}
  .tag{padding:7px 10px}
  .fbtn{padding:12px 18px}
  .btn--sm{padding:11px 18px}
}