/* ==========================================================================
   Wastedland
   Monochrome. The photography carries the site; everything else gets out of
   its way. Orange exists in the logo and on interaction — nowhere else.
   ========================================================================== */

:root{
  /* grounds — the photos are on true black and near-white, so the site is too */
  --black:#000000;
  --paper:#F4F4F2;
  --bone:#EDEDEA;
  --ember:#FF6A00;          /* interaction only */

  --face:"Archivo", system-ui, -apple-system, sans-serif;

  /* rhythm — 4/8 */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem;   --s7:3rem;   --s8:4.5rem;
  --s9:6.5rem; --s10:9rem;

  --gut:clamp(1.25rem, 5vw, 4.5rem);
  --max:82rem;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* defaults, overridden per slab */
  --bg:var(--black);
  --fg:var(--bone);
  --dim:#8B8B88;
  --rule:rgba(237,237,234,.16);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--black);
  color:var(--bone);
  font-family:var(--face);
  font-weight:300;
  font-size:clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }

h1,h2,h3{
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.03em;
  margin:0;
}

a{ color:inherit; }

/* the one place colour is allowed to appear */
:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }

.u-sr{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:var(--s4); top:-5rem; z-index:200;
  background:var(--ember); color:#140800;
  padding:var(--s3) var(--s5);
  font-size:.8125rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.18em;
  text-decoration:none;
  transition:top .18s var(--ease);
}
.skip:focus{ top:var(--s4); }

.wrap{
  width:100%; max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* ── slabs — the alternating grounds ──────────────────────────────────── */

.slab{
  background:var(--bg);
  color:var(--fg);
  padding-block:var(--s9);
}
.slab--dark{
  --bg:var(--black); --fg:var(--bone);
  --dim:#8B8B88; --rule:rgba(237,237,234,.16);
}
.slab--light{
  --bg:var(--paper); --fg:#0B0B0A;
  --dim:#5C5C58; --rule:rgba(11,11,10,.18);
}
.slab--tight{ padding-block:var(--s8); }

/* ── section furniture ────────────────────────────────────────────────── */

.eyebrow{
  font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.24em;
  color:var(--dim);
  margin:0 0 var(--s4);
}

.sec__head{ max-width:44ch; margin-bottom:var(--s8); }

.sec__hed{
  font-size:clamp(2rem, 1.3rem + 3.4vw, 4rem);
  text-transform:uppercase;
}

.sec__sub{
  color:var(--dim);
  margin:var(--s5) 0 0;
  max-width:56ch;
}

.lede{
  font-size:clamp(1.125rem, 1rem + .7vw, 1.5rem);
  font-weight:300;
  line-height:1.55;
  letter-spacing:-.01em;
  max-width:34ch;
  margin:0;
}

/* ── links and buttons ────────────────────────────────────────────────── */

.link{
  display:inline-flex; align-items:center; gap:var(--s3);
  min-height:44px;
  font-size:.8125rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.2em;
  text-decoration:none;
  color:inherit;
  transition:color .2s var(--ease);
}
.link::after{
  content:""; width:1.75rem; height:1px;
  background:currentColor;
  transition:width .25s var(--ease);
}
.link:hover{ color:var(--ember); }
.link:hover::after{ width:2.75rem; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px;
  padding:var(--s3) var(--s6);
  font-size:.8125rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.2em;
  text-decoration:none; cursor:pointer;
  background:none;
  border:1px solid var(--rule);
  color:inherit;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover{ border-color:var(--ember); color:var(--ember); }

/* ── header ───────────────────────────────────────────────────────────── */

.head{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s5);
  padding:var(--s4) var(--gut);
  background:linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,0));
  transition:background-color .3s var(--ease);
}
.head.is-stuck{
  background:rgba(0,0,0,.94);
  border-bottom:1px solid rgba(237,237,234,.12);
  backdrop-filter:blur(10px);
}

.head__mark{ display:block; flex:none; }
.head__mark img{ width:clamp(104px, 13vw, 132px); height:auto; }

.head__toggle{
  display:grid; place-items:center;
  width:48px; height:48px;
  background:none; border:0; cursor:pointer; color:var(--bone);
}
.head__bars{ display:grid; gap:6px; width:22px; }
.head__bars i{
  display:block; height:1px; background:currentColor;
  transition:transform .22s var(--ease);
}
.head__toggle[aria-expanded="true"] .head__bars i:first-child{ transform:translateY(3.5px) rotate(45deg); }
.head__toggle[aria-expanded="true"] .head__bars i:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.nav{
  position:fixed; inset:0 0 0 auto; z-index:-1;
  width:min(22rem, 86vw);
  display:flex; flex-direction:column; justify-content:center;
  gap:var(--s1);
  padding:var(--s9) var(--s7);
  background:var(--black);
  border-left:1px solid rgba(237,237,234,.12);
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .34s var(--ease), visibility .34s;
}
.nav.is-open{ transform:translateX(0); visibility:visible; }

.nav a{
  display:flex; align-items:center;
  min-height:48px;
  font-size:.875rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.22em;
  text-decoration:none; color:var(--bone);
  transition:color .18s var(--ease);
}
.nav a:hover{ color:var(--ember); }

/* current page — marked by weight and a rule, not colour */
.nav a[aria-current="page"]{ position:relative; }
.nav a[aria-current="page"]::before{
  content:""; position:absolute; left:-1rem; top:50%;
  width:.5rem; height:1px; background:currentColor;
}

.nav__soc{
  display:flex; flex-wrap:wrap; gap:var(--s4);
  margin-top:var(--s5);
  padding-top:var(--s5);
  border-top:1px solid rgba(237,237,234,.14);
}
.nav__soc a{
  min-height:44px; min-width:44px;
  justify-content:center;
  font-size:.6875rem; letter-spacing:.14em;
}

/* ── hero ─────────────────────────────────────────────────────────────── */

.hero{
  position:relative;
  min-height:100svh;
  display:grid; align-content:end;
  padding:var(--s10) var(--gut) var(--s8);
  isolation:isolate;
  overflow:hidden;
  background:var(--black);
}

/* PHOTO SLOT — band-black.jpg. The shot is already faces-out-of-black with
   a huge empty field above, so it needs no scrim, only a floor fade. */
.hero__plate{ position:absolute; inset:0; z-index:-2; }
.hero__plate img{
  width:100%; height:100%; object-fit:cover;
  object-position:center 42%;
}
.hero__plate::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,.75) 78%, var(--black) 100%);
}

.hero__body{ width:100%; max-width:var(--max); margin-inline:auto; }

/* Nothing sits over the faces — no wordmark, no headline. The header
   already carries the logo and the photograph is stronger left alone.
   Only the standing line at the very bottom. */
.hero__meta{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--s3) var(--s5);
  font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.24em;
  color:var(--dim);
  margin:0;
}
.hero__meta span{ display:inline-flex; align-items:center; gap:var(--s5); }
.hero__meta span::after{
  content:""; width:1px; height:.75rem;
  background:currentColor; opacity:.5;
}
.hero__meta span:last-child::after{ display:none; }

/* ── index — the way into the site ────────────────────────────────────
   Big type rows that cross-fade a photograph behind them on hover or focus.
   Reachable by keyboard, and readable with the images never loading. */

.index{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.index__screen{ position:absolute; inset:0; z-index:-2; }
.index__frame{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0;
  transition:opacity .6s var(--ease);
}
.index__frame.is-on{ opacity:.42; }
.index__screen::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to right, var(--black) 6%, rgba(0,0,0,.72) 55%, rgba(0,0,0,.5));
}

.index__list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.index__list li{ border-bottom:1px solid var(--rule); }

.index__row{
  display:flex; align-items:baseline; gap:var(--s5);
  width:100%;
  min-height:88px;
  padding:var(--s5) 0;
  text-decoration:none;
  color:var(--fg);
  transition:padding-left .35s var(--ease), color .25s var(--ease);
}
.index__row:hover{ padding-left:var(--s5); color:var(--ember); }

.index__no{
  flex:none;
  font-size:.75rem; font-weight:500;
  letter-spacing:.2em;
  font-variant-numeric:tabular-nums;
  opacity:.5;
}
.index__name{
  font-size:clamp(1.75rem, 1.1rem + 3vw, 3.75rem);
  font-weight:600;
  line-height:1;
  letter-spacing:-.03em;
  text-transform:uppercase;
}
.index__note{
  margin-left:auto;
  flex:none;
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.55;
}

/* ── film cards ───────────────────────────────────────────────────────── */

.films{ display:grid; gap:var(--s7); grid-template-columns:1fr; }

.film__plate{
  position:relative; display:block;
  overflow:hidden;
  background:#111;
  aspect-ratio:16/9;
}
/* thumbnails keep their own colour — only the page furniture is monochrome */
.film__plate img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease), filter .4s var(--ease);
}
.film__plate:hover img{ transform:scale(1.03); filter:brightness(1.08); }

.film__play{
  position:absolute; inset:auto auto var(--s4) var(--s4);
  display:grid; place-items:center;
  width:56px; height:56px;
  padding-left:3px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  background:rgba(0,0,0,.45);
  color:#fff;
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.film__plate:hover .film__play{ background:var(--ember); border-color:var(--ember); color:#140800; }

.film__name{
  font-size:clamp(1.25rem, 1.05rem + .6vw, 1.625rem);
  text-transform:uppercase;
  margin:var(--s4) 0 var(--s1);
}
.film__meta{
  font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.2em;
  color:var(--dim);
  margin:0;
}

/* ── listen strip ─────────────────────────────────────────────────────── */

.listen__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:0 var(--s7);
  border-top:1px solid var(--rule);
}
.listen__list li{ border-bottom:1px solid var(--rule); flex:1 1 12rem; }
.listen__list a{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4);
  min-height:64px;
  font-size:.875rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.18em;
  text-decoration:none;
  transition:color .2s var(--ease);
}
.listen__list a::after{ content:"\2197"; opacity:.45; font-weight:300; }
.listen__list a:hover{ color:var(--ember); }
.listen__list a:hover::after{ opacity:1; }

/* ── gallery ──────────────────────────────────────────────────────────── */

.shots{ display:grid; gap:var(--s5); grid-template-columns:1fr; }

.shot{ margin:0; }
.shot img{ width:100%; height:auto; }
.shot figcaption{
  font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.2em;
  color:var(--dim);
  margin-top:var(--s3);
}

/* ── about ────────────────────────────────────────────────────────────── */

.bio{ display:grid; gap:var(--s8); align-items:start; }
.bio__copy p{ margin:0 0 var(--s5); max-width:62ch; }
.bio__copy p:last-child{ margin-bottom:0; }

.roster{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.roster li{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s3);
  padding:var(--s4) 0;
  border-bottom:1px solid var(--rule);
}
.roster b{
  font-weight:500; font-size:1rem;
  text-transform:uppercase; letter-spacing:.1em;
}
.roster span{
  font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.2em;
  color:var(--dim);
}

.contact{ margin:0; }
.contact a{
  display:inline-block;
  font-size:clamp(1.25rem, .9rem + 1.5vw, 2.25rem);
  font-weight:600;
  letter-spacing:-.02em;
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:var(--s2);
  overflow-wrap:anywhere;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.contact a:hover{ color:var(--ember); border-bottom-color:currentColor; }

/* anything still waiting on real content announces itself */
.todo{
  border:1px dashed var(--rule);
  padding:var(--s5);
  color:var(--dim);
  font-size:.9375rem;
}
.todo b{
  display:block;
  font-size:.6875rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.22em;
  margin-bottom:var(--s2);
}

/* ── voices / press — waveform ────────────────────────────────────────── */

.vx__stage{ display:grid; gap:var(--s7); }
.vx__deck{ display:none; }
.vx.is-live .vx__stage{ min-height:14rem; gap:0; }
.vx.is-live .vx__deck{ display:flex; }

.vx__panel{ margin:0; }
.vx.is-live .vx__panel{
  grid-area:1 / 1;
  opacity:0; visibility:hidden;
}
.vx.is-live .vx__panel.is-on{ opacity:1; visibility:visible; }
.vx.is-ready .vx__panel{ transition:opacity .34s var(--ease), visibility .34s; }

.vx__text{
  margin:0 0 var(--s5);
  font-size:clamp(1.375rem, 1rem + 1.7vw, 2.5rem);
  font-weight:300;
  line-height:1.24;
  letter-spacing:-.02em;
  color:var(--fg);
  max-width:26ch;
  overflow-wrap:anywhere;
}
.vx__text::before{ content:"\201C"; }
.vx__text::after{ content:"\201D"; }

.vx__by{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s1) var(--s4); }
.vx__name{
  font-size:.8125rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.18em;
  overflow-wrap:anywhere;
}
.vx__src{
  font-size:.6875rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.22em;
  color:var(--dim);
}

.vx__deck{ align-items:center; gap:var(--s3); margin-top:var(--s8); }

.vx__step{
  flex:none;
  display:grid; place-items:center;
  width:44px; height:44px;
  background:none; border:1px solid var(--rule); color:inherit;
  cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.vx__step:hover{ border-color:var(--ember); color:var(--ember); }

.vx__wave{ position:relative; flex:1 1 auto; min-width:0; }

.vx__bars{ display:flex; align-items:center; gap:2px; height:4.5rem; }
.vx__bars i{
  flex:1 1 0; min-width:0;
  height:var(--h, 40%);
  background:currentColor; opacity:.2;
  transition:opacity .35s var(--ease);
}
.vx__bars i.is-lit{ opacity:.62; }

.vx__marks{ position:absolute; inset:0; }

.vx__mark{
  position:absolute; top:50%; left:var(--at, 50%);
  transform:translate(-50%,-50%);
  display:grid; place-items:center;
  width:44px; height:44px;
  padding:0; background:none; border:0; cursor:pointer;
  font-size:.625rem; font-weight:500; letter-spacing:.1em;
  color:var(--dim);
}
.vx__mark span{
  display:grid; place-items:center;
  width:26px; height:26px;
  border:1px solid currentColor;
  border-radius:50%;
  background:var(--bg);
  transition:transform .22s var(--ease), color .22s var(--ease),
             border-color .22s var(--ease), background-color .22s var(--ease);
}
.vx__mark:hover{ color:var(--ember); }
.vx__mark[aria-selected="true"]{ color:var(--fg); }
.vx__mark[aria-selected="true"] span{
  transform:scale(1.15);
  background:currentColor;
  border-color:currentColor;
}
.vx__mark[aria-selected="true"] span::after{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--bg);
}
.vx__mark[aria-selected="true"] span{ font-size:0; }

/* ── mailing list ─────────────────────────────────────────────────────── */

.form{ max-width:32rem; }
.field{ margin-bottom:var(--s5); }

.field__label{
  display:block;
  font-size:.6875rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.22em;
  margin-bottom:var(--s3);
}
.field__input{
  display:block; width:100%;
  min-height:56px;
  padding:var(--s3) 0;
  background:none;
  border:0; border-bottom:1px solid var(--rule);
  color:inherit;
  font-family:var(--face); font-size:1.0625rem; font-weight:300;
  transition:border-color .2s var(--ease);
}
.field__input::placeholder{ color:var(--dim); opacity:.7; }
.field__input:hover{ border-bottom-color:currentColor; }
.field__input:focus{ border-bottom-color:var(--ember); outline:none; }
.field__input:focus-visible{ outline:none; }
.field__input[aria-invalid="true"]{ border-bottom-color:#E4553A; }

.field__help,.field__err{ font-size:.8125rem; margin:var(--s2) 0 0; }
.field__help{ color:var(--dim); }
.field__err{ color:#E4553A; min-height:1.25rem; }
.field__err:empty{ min-height:0; margin:0; }

.form__done{
  font-size:.8125rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.18em;
  color:var(--ember);
  margin:var(--s5) 0 0;
}
.form__done:empty{ margin:0; }

/* ── footer ───────────────────────────────────────────────────────────── */

.foot{
  background:var(--black); color:var(--bone);
  --dim:#8B8B88; --rule:rgba(237,237,234,.16);
  border-top:1px solid var(--rule);
  padding-block:var(--s8) var(--s7);
}
.foot__inner{ display:grid; gap:var(--s7); }
.foot__mark{ width:120px; height:auto; }

.foot__col h2{
  font-size:.6875rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.22em;
  color:var(--dim);
  margin:0 0 var(--s4);
  letter-spacing:.22em;
}
.foot__col ul{ list-style:none; margin:0; padding:0; }
.foot__col a{
  display:inline-flex; align-items:center;
  min-height:40px;
  font-size:.875rem;
  text-decoration:none;
  transition:color .18s var(--ease);
}
.foot__col a:hover{ color:var(--ember); }

.foot__fine{
  font-size:.75rem; letter-spacing:.06em;
  color:var(--dim);
  margin:0;
  padding-top:var(--s6);
  border-top:1px solid var(--rule);
}

/* ── breakpoints ──────────────────────────────────────────────────────── */

/* On a phone the wave is too narrow to seat six 44px targets: their hit
   areas overlap and cause mis-taps. Give the marks their own full-width
   row, which keeps every quote one tap away. */
@media (max-width:599px){
  .vx.is-live .vx__deck{ display:block; margin-top:var(--s7); }
  .vx__step{ display:none; }
  .vx__bars{ height:3.5rem; }

  .vx__marks{
    position:static;
    display:flex; justify-content:space-between;
    margin-top:var(--s4);
  }
  .vx__mark{
    position:static;
    left:auto; top:auto;
    transform:none;
  }
}

@media (min-width:768px){
  .films{ grid-template-columns:repeat(2,1fr); }
  .film--lead{ grid-column:1 / -1; }
  .shots{ grid-template-columns:repeat(2,1fr); }
  .shot--wide{ grid-column:1 / -1; }
  .bio{ grid-template-columns:1.4fr 1fr; }
  .foot__inner{ grid-template-columns:repeat(3,1fr); }
  .foot__fine{ grid-column:1 / -1; }
}

@media (min-width:1024px){
  .head__toggle{ display:none; }

  .nav{
    position:static; z-index:auto;
    width:auto;
    flex-direction:row; align-items:center;
    gap:var(--s6);
    padding:0;
    background:none; border-left:0;
    transform:none; visibility:visible;
  }
  .nav a{ min-height:44px; font-size:.75rem; letter-spacing:.2em; }
  .nav a[aria-current="page"]::before{
    left:0; top:auto; bottom:.5rem;
    width:100%; height:1px;
  }
  .nav__soc{
    margin:0 0 0 var(--s4);
    padding:0 0 0 var(--s6);
    border-top:0;
    border-left:1px solid rgba(237,237,234,.16);
  }
  .foot__inner{ grid-template-columns:1.5fr 1fr 1fr 1fr; }
}

/* ── reduced motion — opacity only ────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .film__plate:hover img{ transform:none; }
  .vx__mark[aria-selected="true"] span{ transform:translate(0,0) scale(1); }
}