/* HOME — one photograph holds the screen, everything else
   hangs off it. Nothing on this page sits in a card. */

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

.hero{
  position:relative;
  height:clamp(600px,92svh,960px);
  overflow:hidden;
  background:var(--ink);
}
.hero__img{ position:absolute; inset:0; }
.hero__img img{
  width:100%; height:100%; object-fit:cover;
  object-position:64% 48%;
  animation:heroSettle 2.4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes heroSettle{ from{ transform:scale(1.09); } to{ transform:none; } }

.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(11,10,10,.94) 0%, rgba(11,10,10,.78) 26%, rgba(11,10,10,.28) 52%, rgba(11,10,10,0) 70%),
    linear-gradient(to top, rgba(11,10,10,.92) 0%, rgba(11,10,10,0) 42%);
}

.hero__copy{
  position:absolute;
  left:0; right:0; bottom:clamp(40px,7vh,86px);
  padding-inline:var(--gutter);
  max-width:1560px;
  margin-inline:auto;
}
.hero__eyebrow{ margin-bottom:clamp(14px,2vw,22px); }
.hero__eyebrow a{ color:var(--bone); text-decoration:none; }
.hero__eyebrow a:hover{ color:var(--ember); }

.hero__name{
  font-family:var(--display);
  font-variation-settings:"wdth" 62,"wght" 860;
  text-transform:uppercase;
  font-size:clamp(3.1rem,13.2vw,11.5rem);
  line-height:.8;
  letter-spacing:-.018em;
  margin:0;
  color:var(--bone);
}
.hero__name .l{ display:block; }
.hero__name .l:nth-child(2){ color:var(--bone); }
.hero__name .dot{ color:var(--blood); }

.hero__line{ display:block; overflow:hidden; }
.hero__line > span{ display:block; animation:heroRise 1.05s cubic-bezier(.16,1,.3,1) both; }
.hero__line:nth-child(1) > span{ animation-delay:.05s; }
.hero__line:nth-child(2) > span{ animation-delay:.14s; }
.hero__line:nth-child(3) > span{ animation-delay:.23s; }
@keyframes heroRise{ from{ transform:translateY(102%); } to{ transform:none; } }

.hero__sub{
  margin:clamp(18px,2.6vw,30px) 0 0;
  display:flex; flex-wrap:wrap; align-items:center;
  gap:10px 22px;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  font-variation-settings:"wdth" 100,"wght" 600;
  color:#CFC7C0;
}
.hero__sub .sep{ color:var(--blood); }

.hero__acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(22px,3vw,34px); }

.hero__scroll{
  position:absolute;
  right:calc(var(--gutter) - 4px);
  bottom:clamp(40px,7vh,86px);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ash);
  writing-mode:vertical-rl;
}
.hero__scroll::after{
  content:""; width:1px; height:64px;
  background:linear-gradient(var(--blood),transparent);
}

/* ---------- red ticker ---------- */

.ticker{
  background:var(--blood);
  color:#fff;
  border-block:1px solid #7E1418;
  overflow:hidden;
  padding-block:11px;
}
.ticker__track{
  display:flex; width:max-content;
  animation:slideLeft 34s linear infinite;
}
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker span{
  font-size:.76rem; letter-spacing:.26em; text-transform:uppercase;
  font-variation-settings:"wdth" 100,"wght" 700;
  padding-inline:.9em; white-space:nowrap;
}
.ticker .star{ color:#2B0406; }
@keyframes slideLeft{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){
  .ticker__track{ animation:none; }
}

/* ---------- latest release ---------- */

.rel{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,80px);
  align-items:center;
}
.rel__art{ position:relative; }
.rel__art img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.rel__art::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(239,233,227,.12);
  pointer-events:none;
}
.rel__stamp{
  position:absolute;
  /* the artwork is transformed by .zoom, which paints it above any
     untransformed sibling — the stamp has to be lifted explicitly. */
  z-index:2;
  top:-14px; left:-14px;
  background:var(--blood); color:#fff;
  padding:9px 15px;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  font-variation-settings:"wdth" 100,"wght" 700;
}
.rel__title{
  font-variation-settings:"wdth" 64,"wght" 850;
  text-transform:uppercase;
  font-size:clamp(2.8rem,8.4vw,7.4rem);
  line-height:.82;
  margin:.16em 0 0;
}
.rel__meta{ margin:22px 0 0; display:flex; flex-wrap:wrap; gap:8px 20px; }
.rel__note{ margin:22px 0 0; max-width:44ch; }
.rel__acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

/* recent strip */
.strip{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(10px,1.6vw,22px);
  margin-top:clamp(40px,6vw,80px);
}
.strip a{ display:block; text-decoration:none; position:relative; }
.strip img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  filter:grayscale(.28) contrast(1.02);
  transition:filter .4s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.strip a:hover img{ filter:none; transform:translateY(-6px); }
.strip .cap{
  display:block; padding-top:10px;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ash);
  transition:color .3s ease;
}
.strip a:hover .cap{ color:var(--bone); }

/* ---------- featured video band ---------- */

.band{
  position:relative;
  height:clamp(440px,78vh,840px);
  overflow:hidden;
  display:block;
  text-decoration:none;
  color:var(--bone);
}
.band img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s cubic-bezier(.16,1,.3,1);
}
.band:hover img{ transform:scale(1.045); }
.band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(11,10,10,.9),rgba(11,10,10,.18) 55%,rgba(11,10,10,.5));
}
.band__copy > span{ display:block; }
.band__copy .meta{ display:block; }
.band__copy{
  position:absolute; z-index:2;
  left:0; right:0; bottom:clamp(34px,6vw,76px);
  padding-inline:var(--gutter);
  max-width:1560px; margin-inline:auto;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
}
.band__title{
  display:block;
  font-variation-settings:"wdth" 64,"wght" 830;
  text-transform:uppercase;
  font-size:clamp(2.4rem,8vw,7rem);
  line-height:.84;
  margin:.1em 0 0;
}
.band__play{
  display:flex; align-items:center; gap:14px;
  font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  font-variation-settings:"wdth" 100,"wght" 700;
}
.band__play i{
  width:58px; height:58px; flex:none;
  border:1px solid var(--bone);
  border-radius:50%;
  display:grid; place-items:center;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.band__play i::before{
  content:""; width:0;height:0;
  border-left:13px solid currentColor;
  border-block:8px solid transparent;
  margin-left:4px;
}
.band:hover .band__play i{ background:var(--blood); border-color:var(--blood); color:#fff; }

/* ---------- tour block ---------- */

.tourblock{
  background:var(--ink-2);
  border-block:1px solid var(--ink-3);
  position:relative;
  overflow:hidden;
}
.tourblock__grid{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(30px,5vw,72px);
  align-items:start;
}
.tourblock__poster{ position:relative; }
.tourblock__poster img{ width:100%; }
.tourblock__poster::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(239,233,227,.1);
}

.dates{ list-style:none; margin:26px 0 0; padding:0; }
.dates li{ border-top:1px solid var(--ink-3); }
.dates li:last-child{ border-bottom:1px solid var(--ink-3); }
.daterow{
  display:grid;
  grid-template-columns:104px minmax(0,1fr) auto;
  gap:18px 22px;
  align-items:center;
  padding-block:20px;
  transition:padding-left .35s ease;
}
.dates li:hover .daterow{ padding-left:12px; }
.daterow .d{
  font-variation-settings:"wdth" 100,"wght" 700;
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blood);
}
.daterow .city{
  font-variation-settings:"wdth" 78,"wght" 750;
  text-transform:uppercase;
  font-size:clamp(1.3rem,2.9vw,2.15rem);
  line-height:1;
}
.daterow .venue{
  display:block; margin-top:6px;
  font-size:.73rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ash);
  font-variation-settings:"wdth" 100,"wght" 500;
}
.daterow .acts{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- press ---------- */

.quotes{ display:grid; gap:0; }
.quote{
  border-top:1px solid var(--ink-3);
  padding-block:clamp(30px,4.4vw,56px);
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:clamp(20px,3vw,52px);
  align-items:start;
  text-decoration:none;
}
.quotes .quote:last-child{ border-bottom:1px solid var(--ink-3); }
.quote__logo{
  width:88px; height:88px;
  object-fit:contain;
  background:var(--bone);
  padding:10px;
  filter:grayscale(1);
  transition:filter .35s ease, transform .35s ease;
}
.quote:hover .quote__logo{ filter:none; transform:translateY(-3px); }
.quote__text{
  font-family:var(--serif);
  font-size:clamp(1.3rem,3.1vw,2.5rem);
  line-height:1.24;
  margin:0;
  color:var(--bone);
  text-wrap:pretty;
}
.quote:hover .quote__text{ color:var(--ember); }
.quote__src{ margin:16px 0 0; display:flex; gap:10px 18px; flex-wrap:wrap; }

/* ---------- socials as type ---------- */

.connect{ border-top:1px solid var(--ink-3); }
.soclist{ list-style:none; margin:0; padding:0; }
.soclist li{ border-bottom:1px solid var(--ink-3); }
.soclist a{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px;
  padding-block:clamp(16px,2.4vw,26px);
  text-decoration:none;
  font-variation-settings:"wdth" 70,"wght" 800;
  text-transform:uppercase;
  font-size:clamp(1.9rem,6.6vw,5rem);
  line-height:1;
  color:var(--bone);
  transition:color .3s ease, padding-left .35s ease;
}
.soclist a:hover{ color:var(--blood); padding-left:14px; }
.soclist .handle{
  font-variation-settings:"wdth" 100,"wght" 500;
  font-size:.74rem; letter-spacing:.16em;
  color:var(--ash);
  white-space:nowrap;
  text-transform:none;
}

/* ---------- responsive ---------- */

@media (max-width:1000px){
  .rel{ grid-template-columns:1fr; }
  .rel__art{ max-width:520px; }
  .tourblock__grid{ grid-template-columns:1fr; }
  .tourblock__poster{ max-width:460px; }
  .strip{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .strip a:nth-child(n+4){ display:none; }
}
@media (max-width:860px){
  .hero__img img{ object-position:70% 22%; }
  .hero__scroll{ display:none; }
  .quote{ grid-template-columns:1fr; }
  .quote__logo{ width:62px; height:62px; }
}
@media (max-width:640px){
  /* the stamp hangs off the artwork; at phone width that would push it
     past the page gutter, so it sits flush with the art instead. */
  .rel__stamp{ top:-12px; left:0; }
  .daterow{ grid-template-columns:1fr; gap:10px; }
  .daterow .acts{ margin-top:4px; }
  .soclist a{ flex-direction:column; gap:6px; }
  .strip{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .strip a:nth-child(n+3){ display:none; }
}