@font-face{
  font-family:'Marcellus fallback'; src:local('Georgia');
  size-adjust:96%; ascent-override:92%; descent-override:24%; line-gap-override:0%;
}
@font-face{
  font-family:'Spectral fallback'; src:local('Georgia');
  size-adjust:99%; ascent-override:95%; descent-override:26%; line-gap-override:0%;
}
:root{
  --black:#000000;
  --off:#0F0C0D;
  --bone:#F2EDE6;
  --dim:#8C8079;
  --blood:#B0121A;
  --blood-deep:#6B0C12;
  --hair:rgba(242,237,230,.14);
  --display:'Marcellus','Marcellus fallback',Georgia,serif;
  --mono:'DM Mono',ui-monospace,Menlo,monospace;
  --wordmark:'Marcellus','Marcellus fallback',Georgia,serif;
  --body:'Spectral','Spectral fallback',Georgia,serif;
  --pad:clamp(1.1rem,4vw,3.5rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--black); color:var(--bone);
  font-family:var(--body); font-weight:300; line-height:1.65;
  font-size:clamp(1rem,1.05vw,1.12rem);
  overflow-x:hidden;
}
a{color:inherit}
img{display:block; max-width:100%}
::selection{background:var(--blood); color:var(--bone)}

.wrap{padding-inline:var(--pad); max-width:96rem; margin-inline:auto}
.rule{height:1px; background:var(--hair); border:0; margin:0}

/* ============ masthead ============ */
.top{
  position:fixed; inset:0 0 auto; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(.62rem,1.6vw,.9rem) var(--pad);
  background:var(--bone); border-bottom:1px solid rgba(26,5,7,.22);
}
  .mark{
  font-family:var(--wordmark); font-weight:400; text-transform:uppercase;
  font-size:clamp(.8rem,1.15vw,1.02rem);
  letter-spacing:.5em; text-indent:.5em;   /* tracking as measured off the cover */
  color:var(--blood); text-decoration:none; white-space:nowrap;
}
.burger{background:none; border:0; padding:.4rem; cursor:pointer; display:grid; gap:5px}
.burger i{display:block; width:24px; height:1.5px; background:#1A0507}
@media(min-width:56rem){ .burger{display:none} }
.nav{display:none}
@media(min-width:56rem){
  .nav{display:flex; gap:clamp(1.2rem,2.6vw,2.4rem)}
  .nav a{font-family:var(--mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
         text-decoration:none; color:#1A0507; transition:color .2s}
  .nav a:hover{color:var(--blood)}
}
body.menu-open .nav{
  display:flex; position:fixed; inset:0; z-index:55; background:var(--black);
  flex-direction:column; align-items:flex-start; justify-content:center;
  gap:clamp(.6rem,2vw,1rem); padding:var(--pad);
}
body.menu-open .nav a{color:var(--bone); font-family:var(--display); font-size:clamp(2.4rem,11vw,5rem); letter-spacing:0; text-transform:uppercase; line-height:1.02}

/* ============ hero: as originally designed ============ */
  .hero{
    position:relative; height:100svh; min-height:34rem;
    background:var(--black); overflow:hidden;
    display:flex; align-items:flex-end;
  }
  .hero picture{position:absolute; inset:0; display:block}
  .hero-img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:50% 0%;
    transform-origin:74% 50%;
    
  }
  .hero::before{
    content:""; position:absolute; inset:0; z-index:1;
    background:
      radial-gradient(120% 90% at 88% 52%, rgba(196,38,44,.13), transparent 58%),
      linear-gradient(88deg, #000 6%, rgba(0,0,0,.9) 30%, rgba(0,0,0,.25) 58%, rgba(0,0,0,.55) 100%);
  }
  .hero::after{
    content:""; position:absolute; z-index:2; left:0; right:0; bottom:0; height:34%;
    background:linear-gradient(to top, var(--black), transparent);
  }
  .hero-type{
    position:relative; z-index:3; width:100%;
    padding:0 clamp(1.1rem,4vw,3rem) clamp(.25rem,.8vw,.7rem);
  }
  .hero-type h1{
    margin:0; line-height:.79; letter-spacing:-.022em;
    font-size:clamp(2.4rem,11.6vw,11rem);
    text-transform:uppercase;
  }
  .hero-type h1{opacity:0; animation:fadeIn 2.6s ease-out .25s forwards}
  .hero-type h1 span{display:block; white-space:nowrap}
  .hero-type h1 span:nth-child(2){margin-left:0}
  .hero-type h1 span:nth-child(3){
    margin-left:0;
    color:var(--blood);
  }
  .hero-sub{
    margin:clamp(.9rem,2.4vw,1.5rem) 0 0; max-width:none;
    color:rgba(239,231,220,.7); line-height:1.7;
    font-size:clamp(.82rem,3.5vw,1.45rem);
    white-space:nowrap;
    opacity:0; animation:fadeIn 2.6s ease-out 1.1s forwards;
  }
@media(prefers-reduced-motion:reduce){
  .hero-type h1,.hero-sub{opacity:1; animation:none}
  .hero-img{animation:none}
}
.hero-type h1,.band h2,.page-head h1{overflow-wrap:break-word}
@media(min-width:54rem){
  .hero-type{padding-left:clamp(3rem,5vw,6rem); padding-right:clamp(3rem,5vw,6rem)}
  .hero-img{object-position:50% 30%}
  .hero-type h1{font-size:clamp(3.6rem,7.4vw,7rem)}
}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}

  .hero-type h1{font-family:var(--display); font-weight:400}
  .hero-sub{font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase;
            font-size:clamp(.62rem,2.6vw,.86rem); color:var(--dim);
            margin:clamp(1rem,3vw,1.6rem) 0 0}

/* ============ numbered sections ============ */
section{padding:clamp(3.6rem,10vw,8rem) 0; border-top:1px solid var(--hair)}
.sec-head{
  display:grid; gap:.6rem clamp(1rem,4vw,3rem); align-items:baseline;
  margin-bottom:clamp(2rem,5vw,3.2rem);
}

.sec-head h2{
  margin:0; font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2rem,7.5vw,4.4rem); line-height:.92; letter-spacing:-.025em;
}

/* ============ release ============ */
.release{display:grid; gap:clamp(1.6rem,5vw,3.5rem)}
@media(min-width:52rem){ .release{grid-template-columns:minmax(0,26rem) 1fr; align-items:start} }
.art{width:100%; height:auto; border:1px solid var(--hair)}
.art-link{display:block; line-height:0}
.art-link:hover .art,.art-link:focus-visible .art{border-color:var(--bone)}
.art-link:focus-visible{outline:2px solid var(--blood); outline-offset:3px}

.status{
  display:inline-block; font-family:var(--mono); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--blood); border:1px solid var(--blood);
  padding:.3rem .6rem; margin-bottom:1rem;
}
.plat{
  display:flex; justify-content:flex-start; align-items:baseline;
  gap:clamp(.7rem,2vw,1.2rem); flex-wrap:wrap;
  padding:1.1rem 0; border-top:1px solid var(--hair); text-decoration:none;
  font-family:var(--display); text-transform:uppercase; font-size:clamp(1.3rem,3.4vw,2rem);
  transition:color .2s;
}
.plat:hover{color:var(--blood)}
.plat b{font-family:var(--mono); font-weight:400; font-size:.76rem; letter-spacing:.12em; color:var(--dim)}

/* ============ the played list, set as a register ============ */
.played{margin:clamp(2.4rem,6vw,3.6rem) 0 0}
.played-head{font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin:0 0 .7rem}
.played-note{margin:0 0 1.6rem; max-width:34rem; font-size:1rem; line-height:1.6; color:rgba(242,237,230,.72)}
.reg{list-style:none; margin:0; padding:0; border-top:1px solid var(--hair)}
.reg li{border-bottom:1px solid var(--hair)}
.reg a{
  display:grid; gap:.15rem; padding:clamp(1rem,2.6vw,1.4rem) 0; text-decoration:none;
  transition:padding-left .25s, color .25s;
}
@media(min-width:44rem){
  .reg a{grid-template-columns:1fr auto; gap:1.6rem; align-items:baseline}
}
.reg a:hover{color:var(--blood); padding-left:.5rem}
.reg strong{font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(1.15rem,3vw,1.7rem); letter-spacing:-.01em}
.reg span{font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; color:var(--dim)}

/* ============ about ============ */
.about{display:grid; gap:clamp(1.6rem,5vw,3rem)}
@media(min-width:52rem){ .about{grid-template-columns:1fr minmax(0,34rem)} }
.about p{margin:0 0 1.3rem; max-width:40rem}

.kit{list-style:none; margin:1.8rem 0 0; padding:0; max-width:32rem; border-top:1px solid var(--hair)}
.kit li{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.85rem 0; border-bottom:1px solid var(--hair); color:var(--dim);
}

/* ============ forms ============ */
.forms{display:grid; gap:clamp(2rem,6vw,4rem)}
@media(min-width:52rem){ .forms{grid-template-columns:1fr 1fr} }
label{display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-bottom:.5rem}
input,textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid rgba(242,237,230,.3);
  color:var(--bone); font-family:var(--body); font-size:1.05rem; padding:.6rem 0 .7rem;
  margin-bottom:1.6rem; border-radius:0;
}
input:focus,textarea:focus{outline:0; border-bottom-color:var(--blood)}
.btn{
  background:var(--blood); color:var(--bone); border:0; cursor:pointer;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.95rem 1.6rem;
}

/* ============ the archive block ============ */
.arch-lede{
  max-width:46rem; font-size:clamp(1.2rem,2.6vw,1.55rem); line-height:1.45;
  margin:0 0 clamp(1rem,2.5vw,1.5rem);
}
.arch{position:relative; max-width:52rem; padding-block:clamp(1.6rem,4vw,2.6rem)}
.arch-bg{
  display:block; justify-self:center; align-self:center;
  width:100%; max-width:400px; height:auto;
  margin:clamp(3.4rem,9vw,4.6rem) auto 0;
  opacity:.5; pointer-events:none;
}
.arch>*{position:relative; z-index:1}
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.6rem,5vw,3rem)}
@media(min-width:44rem){ .stats{grid-template-columns:repeat(4,1fr)} }
.stats b{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(3.2rem,13vw,6.5rem); line-height:.84; letter-spacing:-.03em;
}
.stats span{display:block; margin-top:.7rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim)}
.go{
  display:inline-block; margin-top:clamp(2rem,5vw,3rem); text-decoration:none;
  font-family:var(--display); text-transform:uppercase; font-size:clamp(1.6rem,5vw,2.8rem);
  border-bottom:3px solid var(--blood); padding-bottom:.15rem; transition:color .2s;
}
.go:hover{color:var(--blood)}

/* ============ foot ============ */
footer{padding:clamp(2.4rem,6vw,3.6rem) 0; border-top:1px solid var(--hair)}
.foot{display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}

/* the bar is solid, so the hero starts beneath it */
.hero{padding-top:0}
body.menu-open .top{background:transparent; border-bottom:0}
body.menu-open .mark{color:var(--bone)}
body.menu-open .burger i{background:var(--bone)}

/* ---- Marcellus as the display face: size does the work, not weight ---- */
h1{letter-spacing:-.012em; line-height:.84}
.sec-head h2{
  text-transform:none; letter-spacing:-.008em;
  font-size:clamp(2.2rem,8vw,4.8rem); line-height:.96;
}
.reg strong{text-transform:none; letter-spacing:0; font-size:clamp(1.2rem,3.1vw,1.8rem)}
.plat{text-transform:none; letter-spacing:0}

.plat{justify-content:space-between; align-items:center; gap:clamp(1rem,3vw,2rem); flex-wrap:nowrap}
.plat-txt{display:flex; flex-direction:column; align-items:flex-start; gap:.35rem; min-width:0; flex:1 1 auto}
.plat .rel-seal{margin:0; width:clamp(78px,21vw,116px)}
.plat:hover .rel-seal{opacity:1}
.stats b{letter-spacing:-.015em}
.go{text-transform:none; letter-spacing:0}
body.menu-open .nav a{letter-spacing:-.01em}

.rel-head{
  display:flex; align-items:center; justify-content:flex-start;
  gap:clamp(.9rem,2.4vw,1.5rem); margin:0 0 1.4rem;
}
.rel-title{
  font-family:var(--display); font-weight:400; text-transform:none;
  font-size:clamp(2rem,6vw,3.4rem); line-height:.98; letter-spacing:-.008em;
  margin:0;
}
.rel-seal{
  width:clamp(48px,7.5vw,74px); height:auto; flex:0 0 auto; opacity:.92;
}
/* ================================================================
   ASYMMETRY · two breaks, not five. The rest holds the grid.
   ================================================================ */
@media(min-width:60rem){

  /* 01 · the cover runs off the left edge. The one structural break. */
  #listen .wrap{padding-left:0}
  .release{grid-template-columns:minmax(0,36%) minmax(0,1fr); gap:clamp(2.5rem,5vw,4.5rem)}
  .release .art{border-left:0}
  #listen .sec-head{padding-left:var(--pad)}
  .played{max-width:none}

  /* 02 · the heading holds while the prose moves past it. The one temporal break. */
  #about .wrap{display:grid; grid-template-columns:minmax(0,19rem) minmax(0,1fr); gap:0 clamp(2.5rem,5vw,4rem)}
  #about .sec-head h2{font-size:clamp(1.9rem,3.1vw,2.9rem); line-height:1.02}
  #about .sec-head{grid-column:1; margin-bottom:0; position:sticky; top:5.5rem; align-self:start; will-change:transform}
  #about .about{grid-column:2; grid-template-columns:1fr; gap:0}
  #about .about p{max-width:40rem}
}

/* ---- the remate: strings drawn once, struck in compás ---- */
/* the remate sits under the prose, at the same width */
.remate{
  position:relative; max-width:40rem;
  margin:clamp(1.8rem,4vw,2.6rem) 0 0;
}
.loop{display:block; width:100%; height:clamp(62px,7vw,104px)}
/* the remate, played: a head sweeps the waveform and lights it as it passes */
.loop .wipe{animation:wipe 5.4s cubic-bezier(.28,0,.22,1) .2s forwards; animation-play-state:paused}
@keyframes wipe{
  0%  {width:0}
  92% {width:1600px}
  100%{width:1600px}
}
.remate.playing .wipe,.remate.playing .head{animation-play-state:running}
.loop .head{
  transform:translateX(0);
  animation:head 5.4s cubic-bezier(.28,0,.22,1) .2s forwards; animation-play-state:paused;
}
@keyframes head{
  0%  {transform:translateX(0); opacity:0}
  2%  {opacity:1}
  92% {transform:translateX(1596px); opacity:1}
  99% {transform:translateX(1596px); opacity:0}
  100%{transform:translateX(1596px); opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .loop .head{animation:none; opacity:0}
  .loop .wipe{animation:none; width:1600px}
}

/* ---- the hero scrolls with the page. Only the masthead is locked. ---- */
.hero{position:relative; z-index:0}
.hero picture{position:absolute; inset:0}
.hero::before,.hero::after{position:absolute}
.hero-type{position:relative; z-index:3}
section,footer{position:relative; z-index:2; background:var(--black)}
/* ---- the headline arrives a line at a time, weighted to the last word ---- */
.hero-type h1{animation:none; opacity:1}
.hero-type h1 span{opacity:0; animation:lift 1.5s cubic-bezier(.16,1,.3,1) forwards}
.hero-type h1 span:nth-child(1){animation-delay:.30s}
.hero-type h1 span:nth-child(2){animation-delay:.62s}
.hero-type h1 span:nth-child(3){animation-delay:1.02s}
@keyframes lift{
  from{opacity:0; transform:translateY(.24em)}
  to  {opacity:1; transform:none}
}
/* a hairline draws itself under the headline once it has landed */
.hero-type::after{
  content:""; display:block; height:1px; background:var(--blood);
  width:0; margin-top:clamp(.7rem,1.8vw,1.2rem);
  animation:draw 1.6s cubic-bezier(.16,1,.3,1) 1.5s forwards;
}
@keyframes draw{to{width:min(22rem,62%)}}
/* on a phone the rule was stopping short of the subline above it */
@media(max-width:53.99rem){
  @keyframes draw{to{width:82%}}
  .hero-type::after{width:0}
}
@media(prefers-reduced-motion:reduce){
  .hero-type h1 span{opacity:1; animation:none}
  .hero-type::after{width:min(22rem,62%); animation:none}
  @media(max-width:53.99rem){ .hero-type::after{width:82%} }
  .hero-img{animation:none}
}

/* the archive: text left, the soundhole to its right */
@media(min-width:62rem){
  .arch-grid{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,400px);
    gap:clamp(2.5rem,6vw,5rem); align-items:center;
  }
  .arch-grid .arch-bg{margin:0}
}