body.landing{ height:100vh; height:100dvh; overflow:hidden; }

.landing-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem clamp(1.4rem,4vw,3rem);
  pointer-events:none;
}
.landing-header .mark{
  font-family:var(--f-display); font-weight:800; font-size:1rem;
  letter-spacing:.06em; text-transform:uppercase;
  pointer-events:auto;
}
.landing-header .mark img{ display:block; height:20px; width:auto; }
.landing-header .tag{
  font-family:var(--f-black); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--white-dim); pointer-events:auto;
}
.landing-header .tag span{ color:var(--cobalt); }

.desk{
  height:100vh; height:100dvh; width:100%;
  display:flex;
}

.channel{
  position:relative;
  flex:1;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:6.5rem 1.6rem 3rem;
  overflow:hidden;
  cursor:pointer;
  transition:flex .7s var(--ease), background .7s var(--ease);
  background:radial-gradient(120% 100% at 50% 100%, var(--tint,#151519) 0%, var(--black) 62%);
}
.channel:last-child{ border-right:none; }

/* ambient per-channel identity tint, subtle, cobalt stays the unifying accent */
.channel[data-ch="01"]{ --tint:#151a24; }
.channel[data-ch="02"]{ --tint:#1c1516; }
.channel[data-ch="03"]{ --tint:#12141f; }

.desk.has-hover .channel{ flex:1; }
.desk.has-hover .channel.is-active{ flex:1.35; }
.desk.has-hover .channel:not(.is-active){ flex:0.85; }
.desk.has-hover .channel:not(.is-active) .ch-title{ opacity:.35; }
.desk.has-hover .channel:not(.is-active) .fader-cap{ opacity:.3; }

.channel::before{
  /* cobalt wash that appears on activation */
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 0%, rgba(38,71,255,0.16) 100%);
  opacity:0; transition:opacity .6s var(--ease);
  pointer-events:none;
}
.channel.is-active::before{ opacity:1; }

.ch-top{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--f-black); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--white-dim);
}
.ch-top .ch-id{ color:var(--cobalt); font-weight:700; }

.ch-meter{
  display:flex; gap:3px; align-items:flex-end; height:14px;
}
.ch-meter span{
  width:3px; background:var(--line-strong); height:30%;
  transition:height .25s var(--ease), background .25s var(--ease);
}
.channel.is-active .ch-meter span{ background:var(--cobalt); }

.ch-mid{
  flex:1; display:flex; align-items:center;
  position:relative;
}
.ch-title{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.9rem, 5.6vw, 3.6rem);
  line-height:1;
  letter-spacing:-.01em;
  text-transform:uppercase;
  transition:opacity .5s var(--ease), transform .6s var(--ease);
  writing-mode:horizontal-tb;
}

.ch-desc{
  max-width:22em;
  font-size:.9rem;
  color:var(--white-dim);
  margin-top:1.1rem;
  opacity:0; transform:translateY(8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.channel.is-active .ch-desc{ opacity:1; transform:translateY(0); }

.ch-bottom{
  display:flex; align-items:center; justify-content:space-between;
}
.ch-enter{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--f-black); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--white);
}
.ch-enter .arrow{ transition:transform .35s var(--ease); }
.channel.is-active .ch-enter .arrow{ transform:translateX(6px); }

/* vertical fader track — signature mixing-desk detail */
.fader{
  position:absolute; right:1.4rem; top:6rem; bottom:5.5rem;
  width:2px; background:var(--line);
}
.fader-cap{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:22%;
  width:22px; height:10px;
  background:var(--white-dim);
  border-radius:2px;
  transition:bottom .6s var(--ease), background .4s var(--ease), opacity .4s var(--ease), box-shadow .4s var(--ease);
}
.channel.is-active .fader-cap{
  bottom:68%;
  background:var(--cobalt);
  box-shadow:0 0 22px rgba(38,71,255,0.7);
}

/* keyboard access: focus behaves like hover/active */
.channel:focus-visible{ outline:2px solid var(--cobalt); outline-offset:-4px; }
.channel:focus-visible .ch-desc{ opacity:1; transform:translateY(0); }
.channel:focus-visible .fader-cap{ bottom:68%; background:var(--cobalt); }

/* mobile: stack as tall bands instead of side-by-side columns */
@media (max-width:820px){
  body.landing{ height:auto; overflow:auto; }
  .desk{ flex-direction:column; height:auto; min-height:100dvh; }
  .landing-header{
    flex-direction:column;
    align-items:flex-start;
    gap:.5rem;
    padding-top:1.2rem;
    padding-bottom:1.2rem;
  }
  .landing-header .tag{ font-size:.65rem; }
  .channel{
    border-right:none; border-bottom:1px solid var(--line);
    min-height:32vh;
    padding:2rem 1.4rem;
    flex:none !important;
  }
  .desk.has-hover .channel:not(.is-active) .ch-title{ opacity:1; }
  .ch-desc{ opacity:1; transform:none; }
  .fader{ display:none; }
  .ch-mid{ padding:1.2rem 0; }
  .landing-header{
    position:sticky; top:0; z-index:60;
    background:var(--black);
    border-bottom:1px solid var(--line);
  }
}