:root{
    --void:#03060B; --navy:#0A1524; --cyan:#4FA8D8; --ice:#A8DDF2;
    --gold:#EFC89A; --bone:#F5F3EE; --grey:#9AA6B4;
    --display:'Avenir Next','Avenir','Mulish','Nunito Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    --sans:'Avenir Next','Avenir','Mulish','Nunito Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    --gutter: clamp(20px, 4vw, 56px);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--void);color:var(--bone);font-family:var(--sans);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:var(--gold);text-decoration:none;transition:color .25s}
  a:hover{color:var(--ice)}
  ::selection{background:var(--gold);color:var(--void)}
  img,video{display:block;max-width:100%}

  /* ---------- masthead ---------- */
  header.masthead{
    display:flex;justify-content:space-between;align-items:baseline;gap:16px;
    padding:clamp(20px,3.4vw,30px) var(--gutter) clamp(16px,2.6vw,24px);
  }
  .wordmark{font-family:var(--display);font-weight:300;font-size:clamp(19px,2.6vw,27px);letter-spacing:.24em;text-transform:uppercase;color:var(--bone)}
  .locale{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--grey);white-space:nowrap}

  /* ---------- hero ---------- */
  .hero{position:relative;overflow:hidden;height:clamp(280px,46vw,520px);background:var(--navy)}
  .hero video,.hero .fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .hero .veil{position:absolute;inset:0;background:
    linear-gradient(180deg, rgba(3,6,11,.5) 0%, rgba(3,6,11,0) 26%, rgba(3,6,11,0) 62%, rgba(3,6,11,.94) 100%);}
  .hero .edge{position:absolute;inset:0;box-shadow:inset 0 0 160px 40px rgba(3,6,11,.75)}

  /* ---------- the five ---------- */
  nav.pillars{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    border-top:1px solid rgba(242,240,235,.18);border-bottom:1px solid rgba(242,240,235,.18);
  }
  nav.pillars a{
    padding:clamp(16px,2.2vw,24px) 8px clamp(14px,2vw,22px);
    text-align:center;border-right:1px solid rgba(242,240,235,.12);
    transition:background .3s;
  }
  nav.pillars a:last-child{border-right:0}
  nav.pillars a:hover{background:rgba(79,168,216,.09)}
  nav.pillars .label{display:block;font-family:var(--display);font-weight:400;font-size:clamp(15px,2vw,22px);letter-spacing:.02em;color:var(--bone);transition:color .25s}
  nav.pillars a:hover .label{color:var(--gold)}
  nav.pillars a[aria-current] .label{color:var(--gold)}
  nav.pillars .sub{display:block;font-size:clamp(8px,1.05vw,10px);letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-top:7px}

  /* ---------- statement ---------- */
  .statement{
    display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,5vw,64px);
    padding:clamp(30px,5vw,54px) var(--gutter);
  }
  .statement p{font-size:clamp(16.5px,1.55vw,20px);line-height:1.7;max-width:56ch;color:#F5F3EE;font-weight:400}
  .statement em{font-family:var(--display);font-weight:300;font-style:normal;color:var(--gold)}
  .swatches{display:flex;gap:6px;flex-shrink:0}
  .swatches i{display:block;width:clamp(28px,3.3vw,46px);height:24px}

  /* ---------- decades ---------- */
  .decades{margin:0 var(--gutter);padding:clamp(10px,1.6vw,18px) 0 clamp(40px,6vw,72px);}
  .decades{border-top:1px solid rgba(242,240,235,.18)}
  .row{display:grid;grid-template-columns:clamp(70px,9vw,110px) 1fr;gap:clamp(14px,2.4vw,28px);
    padding:clamp(14px,2vw,20px) 0;border-bottom:1px solid rgba(242,240,235,.12);align-items:baseline}
  .row .yr{font-family:var(--display);font-weight:300;font-size:clamp(17px,2vw,22px);letter-spacing:.02em;color:var(--gold)}
  .row p{font-size:clamp(15px,1.35vw,17px);line-height:1.7;color:#E9E7E2;max-width:74ch;font-weight:400}
  @media(max-width:620px){.row{grid-template-columns:1fr;gap:4px}}

  /* ---------- footer ---------- */
  footer{
    border-top:1px solid rgba(242,240,235,.18);
    padding:clamp(24px,3.4vw,32px) var(--gutter) clamp(30px,4vw,40px);
    display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);
  }
  footer .links{display:flex;gap:clamp(14px,2.4vw,30px);flex-wrap:wrap}
  footer a{color:var(--grey)}
  footer a:hover{color:var(--bone)}

  @media(max-width:700px){
    nav.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
    nav.pillars a{border-bottom:1px solid rgba(242,240,235,.12)}
    nav.pillars a:nth-child(2n){border-right:0}
    nav.pillars a:nth-child(n+3){border-bottom:0}
    .statement{flex-direction:column;align-items:flex-start}
  }
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .hero video{display:none}
  }

/* ============ interior pages ============ */
.page{margin:0 var(--gutter)}
.pagehead{
  border-top:1px solid rgba(242,240,235,.18);
  padding:clamp(28px,4.4vw,54px) 0 clamp(20px,3vw,34px);
}
.pagehead h1{
  font-family:var(--display);font-weight:200;
  font-size:clamp(30px,5.4vw,66px);line-height:1.05;letter-spacing:-.02em;
  max-width:18ch;
}
.pagehead .eyebrow{
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
  margin-bottom:clamp(14px,2vw,22px);
}

.portraitband{position:relative;overflow:hidden;aspect-ratio:1600/901;max-height:min(72vh,700px);background:var(--navy);margin-bottom:clamp(28px,4vw,48px)}
.portraitband img{width:100%;height:100%;object-fit:cover;object-position:56% 30%}
.portraitband .veil{position:absolute;inset:0;background:
  linear-gradient(180deg, rgba(3,6,11,.42) 0%, rgba(3,6,11,0) 34%, rgba(3,6,11,.86) 100%)}

.lede{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,3.4vw,44px);
  padding-bottom:clamp(34px,5vw,62px)}
.lede .col{grid-column:span 6;display:flex;flex-direction:column;gap:clamp(14px,1.8vw,20px)}
.lede p{font-size:clamp(16px,1.5vw,19px);line-height:1.75;color:#F5F3EE;font-weight:400}
.lede p.first{font-size:clamp(17px,1.8vw,23px);line-height:1.6;color:var(--bone)}
.lede em{font-style:normal;color:var(--gold)}
@media(max-width:760px){.lede .col{grid-column:span 12}}

/* ============ timeline ============ */
.timeline{padding:clamp(30px,4.4vw,54px) 0 clamp(50px,7vw,90px);border-top:1px solid rgba(242,240,235,.18)}
.timeline .caption{
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);
  margin-bottom:clamp(26px,4vw,46px);
}
.track{position:relative;padding-left:clamp(30px,5vw,64px)}
/* the spine: warm at the beginning of the life, cool at the end */
.track::before{
  content:"";position:absolute;left:clamp(7px,1.3vw,17px);top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--gold) 0%,#C9A98E 22%,#8FA6B6 52%,var(--cyan) 78%,var(--ice) 100%);
  opacity:.85;border-radius:2px;
}
.node{position:relative;padding:0 0 clamp(26px,3.6vw,44px) 0}
.node:last-child{padding-bottom:0}
.node::before{
  content:"";position:absolute;left:calc(-1 * clamp(30px,5vw,64px) + clamp(2px,.55vw,12px));top:clamp(7px,1vw,12px);
  width:12px;height:12px;border-radius:50%;
  background:var(--void);border:2px solid var(--dot,var(--cyan));
  box-shadow:0 0 0 4px var(--void), 0 0 18px 2px var(--glow,rgba(79,168,216,.55));
}
.node .yr{
  display:block;font-family:var(--display);font-weight:300;
  font-size:clamp(20px,2.6vw,30px);letter-spacing:.02em;color:var(--dot,var(--cyan));line-height:1;
}
.node h3{
  font-family:var(--display);font-weight:400;font-size:clamp(15px,1.5vw,19px);
  letter-spacing:.01em;color:var(--bone);margin:clamp(6px,.9vw,10px) 0 clamp(4px,.6vw,7px);
}
.node p{font-size:clamp(15px,1.35vw,17px);line-height:1.7;color:#E9E7E2;max-width:62ch;font-weight:400}
.node .tag{
  display:inline-block;margin-top:10px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:#8E98A6;border:1px solid rgba(242,240,235,.2);border-radius:999px;padding:5px 11px;
}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

.closing{
  border-top:1px solid rgba(242,240,235,.18);
  padding:clamp(30px,4.6vw,56px) 0 clamp(40px,6vw,72px);
}
.closing p{
  font-family:var(--display);font-weight:200;
  font-size:clamp(20px,3vw,38px);line-height:1.3;letter-spacing:-.01em;max-width:26ch;color:var(--bone);
}
.closing span{color:var(--gold)}

@media(min-width:880px){
  .node{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:clamp(24px,3.4vw,48px);align-items:start}
  .node .when{padding-top:2px}
  .node h3{margin-top:8px}
}
.node .when h3{margin-bottom:0}
.node .what p{margin-bottom:0}

@media(max-width:700px){
  nav.pillars a{padding-left:10px;padding-right:10px}
  nav.pillars .sub{letter-spacing:.1em;font-size:8.5px}
}

/* ---------- Soundscapes ---------- */
.lede .cta{margin-top:clamp(16px,2vw,22px)}
.btn{display:inline-block;border:1px solid rgba(79,168,216,.5);color:var(--ice);text-decoration:none;
  padding:11px 20px;border-radius:999px;font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  transition:border-color .25s,background .25s,color .25s}
.btn:hover{border-color:var(--cyan);background:rgba(79,168,216,.12);color:#fff}

.releases{padding:clamp(28px,5vw,64px) var(--gutter) clamp(60px,8vw,110px)}
.releases .caption{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);
  margin-bottom:clamp(22px,3vw,34px)}
.releases .grid{display:grid;gap:clamp(20px,3vw,38px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}

.rel{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.rel.in{opacity:1;transform:none}

.rel .art{display:block;position:relative;width:100%;padding:0;border:0;background:var(--navy);
  border-radius:4px;overflow:hidden;cursor:pointer;aspect-ratio:1/1;
  box-shadow:0 18px 44px rgba(0,0,0,.5)}
.rel .art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.3,1),filter .5s;filter:saturate(1.02)}
.rel .art:hover img,.rel .art:focus-visible img{transform:scale(1.045);filter:saturate(1.12) brightness(1.04)}
.rel .art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,6,11,0) 45%,rgba(3,6,11,.55) 100%);
  opacity:0;transition:opacity .45s}
.rel .art:hover::after,.rel .art:focus-visible::after,.rel.playing .art::after{opacity:1}

.rel .play{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;
  border-radius:50%;background:rgba(3,6,11,.55);border:1px solid rgba(168,221,242,.55);
  backdrop-filter:blur(6px);opacity:0;transform:scale(.86);
  transition:opacity .35s,transform .35s}
.rel .play::before{content:"";position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--ice)}
.rel .art:hover .play,.rel .art:focus-visible .play{opacity:1;transform:scale(1)}
.rel.playing .play{opacity:1;transform:scale(1);border-color:var(--cyan);
  background:rgba(79,168,216,.3)}
.rel.playing .art{outline:1px solid rgba(79,168,216,.6);outline-offset:2px}

.rel .meta{padding-top:14px}
.rel .meta h3{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(17px,1.5vw,20px);
  letter-spacing:-.005em;color:var(--bone)}
.rel .meta .sub{display:block;margin-top:5px;font-size:12.5px;letter-spacing:.05em;color:var(--grey)}

.player{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:linear-gradient(180deg,rgba(3,6,11,0) 0%,rgba(3,6,11,.92) 34%,rgba(3,6,11,.98) 100%);
  padding:26px var(--gutter) 16px}
.player .pwrap{position:relative;max-width:900px;margin:0 auto}
.player iframe{width:100%;height:80px;border:0;border-radius:12px;display:block}
.pclose{position:absolute;right:-6px;top:-26px;width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(168,221,242,.35);background:rgba(3,6,11,.8);color:var(--ice);
  font-size:17px;line-height:1;cursor:pointer;transition:border-color .25s,color .25s}
.pclose:hover{border-color:var(--cyan);color:#fff}
body.has-player footer{padding-bottom:140px}

@media(prefers-reduced-motion:reduce){
  .rel{opacity:1;transform:none;transition:none}
  .rel .art img{transition:none}
}

/* ---------- Video / Film ---------- */
.films{padding:clamp(24px,4vw,48px) var(--gutter) clamp(20px,3vw,40px)}
.film{margin-bottom:clamp(64px,9vw,132px);opacity:0;transform:translateY(20px);
  transition:opacity .8s ease,transform .8s ease}
.film.in,.alsolist.in{opacity:1;transform:none}
.film:last-child{margin-bottom:0}

.filmhead{display:flex;gap:clamp(16px,2.4vw,30px);align-items:baseline;
  padding-bottom:clamp(18px,2.4vw,28px);margin-bottom:clamp(20px,3vw,34px);
  border-bottom:1px solid rgba(154,166,180,.22)}
.filmhead .no{font-size:12px;letter-spacing:.22em;color:var(--gold);padding-top:6px;flex:0 0 auto}
.filmhead h2{margin:0;font-family:var(--display);font-weight:300;
  font-size:clamp(28px,4.4vw,54px);line-height:1.05;letter-spacing:-.02em;color:var(--bone)}
.filmhead .credit{margin-top:10px;font-size:13px;letter-spacing:.05em;color:var(--grey)}
.filmhead .credit em{color:var(--ice);font-style:italic}

.frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:4px;overflow:hidden;
  box-shadow:0 26px 70px rgba(0,0,0,.6);margin-bottom:clamp(24px,3.4vw,42px)}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}

.filmbody{display:grid;gap:clamp(22px,3.4vw,54px)}
@media(min-width:880px){
  .filmbody{grid-template-columns:1fr 1fr}
  .filmbody.split{grid-template-columns:minmax(220px,320px) 1fr;align-items:start}
}
.filmbody p{margin:0 0 1em;font-size:clamp(15.5px,1.35vw,17.5px);line-height:1.72;color:#E9E7E2}
.filmbody .pull{font-family:var(--display);font-weight:300;color:var(--ice);
  font-size:clamp(20px,2.2vw,27px);line-height:1.3;letter-spacing:-.01em;margin-bottom:.85em}
.filmbody em{color:var(--ice);font-style:italic}

.poster img{width:100%;height:auto;display:block;border-radius:3px;
  box-shadow:0 22px 56px rgba(0,0,0,.6);transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.poster a:hover img{transform:translateY(-4px)}

.facts{list-style:none;margin:0 0 clamp(18px,2.4vw,26px);padding:0;
  border-top:1px solid rgba(154,166,180,.2)}
.facts li{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid rgba(154,166,180,.14);
  font-size:14.5px;color:#E9E7E2}
.facts li span{flex:0 0 108px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);padding-top:3px}

.alsolist{padding:clamp(40px,6vw,80px) var(--gutter) clamp(60px,8vw,110px);
  opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.alsolist .caption{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);
  margin-bottom:clamp(16px,2.2vw,24px)}
.alsolist ul{list-style:none;margin:0;padding:0;border-top:1px solid rgba(154,166,180,.2)}
.alsolist li{display:flex;gap:clamp(14px,2.6vw,34px);align-items:baseline;padding:15px 0;
  border-bottom:1px solid rgba(154,166,180,.14)}
.alsolist .y{flex:0 0 58px;font-size:13px;letter-spacing:.1em;color:var(--gold)}
.alsolist .t{flex:1 1 auto;font-family:var(--display);font-weight:400;
  font-size:clamp(16px,1.5vw,19px);color:var(--bone)}
.alsolist .r{flex:0 0 auto;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}

@media(prefers-reduced-motion:reduce){
  .film,.alsolist{opacity:1;transform:none;transition:none}
  .poster img{transition:none}
}
.cta2{display:flex;flex-wrap:wrap;gap:10px}