:root{
    /* typefaces carried over from The ANICETO Collection */
    --collection-display:'Cormorant Garamond',Georgia,serif;
    --collection-body:'EB Garamond',Georgia,serif;
    --void:#000;
    --ink:#0C0809;
    --ember:#8D0F14;
    --ember-lit:#A81A20;
    --bone:#EFE7DC;
    --dim:#8B7D75;
    --hair:rgba(239,231,220,.13);
  }
  *{box-sizing:border-box; min-width:0}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip}
  html,body{width:100%; max-width:100%}
  body{
    margin:0; background:var(--ink); color:var(--bone);
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
    font-family:"Spectral",Georgia,serif; font-weight:300;
    font-size:1.0625rem; line-height:1.78; overflow-x:clip;
  }
  h1,h2,h3,.mark,.nav a,.btn,.plat{font-family:"Marcellus",Georgia,serif; font-weight:400}
  a{color:inherit}
  img{display:block; max-width:100%}
  ::selection{background:var(--ember); color:var(--bone)}

  /* ============ masthead ============ */
  .top{
    position:fixed; z-index:40; top:0; left:0; right:0;
    display:flex; align-items:center; justify-content:space-between;
    gap:1.5rem; padding:1.15rem clamp(1.1rem,4vw,3rem);
  }
  .top::before{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,0));
  }
  .mark{
    position:relative; z-index:50;
    font-size:clamp(.9rem,1.15vw,1.32rem); letter-spacing:.42em; text-indent:.42em;
    text-decoration:none; color:var(--bone); white-space:nowrap;
  }

  /* --- burger, phones only --- */
  .burger{
    position:relative; z-index:50;
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:2.5rem; height:2.5rem; margin-right:-.55rem;
    padding:0; border:0; background:none; cursor:pointer;
  }
  .burger span{
    display:block; height:1px; width:1.45rem; margin-left:auto; background:var(--bone);
    transition:transform .34s cubic-bezier(.19,1,.22,1), opacity .2s;
  }
  .burger:focus-visible{outline:2px solid var(--ember); outline-offset:2px}
  body.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.menu-open .burger span:nth-child(2){opacity:0}
  body.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  /* --- the menu --- */
  .nav{
    position:fixed; inset:0; z-index:30;
    padding-top:5rem;
    display:flex; flex-direction:column; justify-content:center;
    gap:.15rem; padding:0 clamp(1.6rem,7vw,3rem);
    background:var(--void);
    opacity:0; visibility:hidden;
    transition:opacity .34s ease, visibility .34s;
  }
  .nav::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(80% 60% at 100% 78%, rgba(141,15,20,.42), transparent 62%);
  }
  body.menu-open .nav{opacity:1; visibility:visible}
  .nav a{
    position:relative; text-decoration:none; color:var(--bone);
    font-family:"Marcellus",Georgia,serif;
    font-size:clamp(1.9rem,8.5vw,2.9rem); line-height:1.62;
    letter-spacing:.005em;
    opacity:0; transform:translateY(.4em);
  }
  body.menu-open .nav a{animation:menuIn .55s cubic-bezier(.19,1,.22,1) forwards}
  body.menu-open .nav a:nth-child(1){animation-delay:.06s}
  body.menu-open .nav a:nth-child(2){animation-delay:.12s}
  body.menu-open .nav a:nth-child(3){animation-delay:.18s}
  body.menu-open .nav a:nth-child(4){animation-delay:.24s}
  @keyframes menuIn{to{opacity:1; transform:none}}
  .nav a[aria-current]{color:var(--ember-lit)}
  .nav a:focus-visible{outline:2px solid var(--ember); outline-offset:6px}
  body.menu-open{overflow:hidden}

  /* --- desktop: burger gone, plain row --- */
  @media (min-width:54rem){
    .burger{display:none}
    .nav{
      position:static; inset:auto; flex-direction:row; align-items:center;
      gap:2rem; padding:0; background:none; opacity:1; visibility:visible;
      font-size:.78rem; letter-spacing:.16em;
    }
    .nav::before{display:none}
    .nav a{
      font-family:"Spectral",Georgia,serif; font-weight:300;
      font-size:clamp(.78rem,.95vw,1.02rem); letter-spacing:.16em; line-height:1;
      opacity:.66; transform:none; animation:none!important;
      padding-block:.4rem; transition:opacity .25s;
    }
    .nav a:hover,.nav a:focus-visible{opacity:1}
    .nav a[aria-current]{opacity:1; color:var(--ember-lit)}
    body.menu-open{overflow:auto}
  }

  /* ============ hero ============ */
  .hero{
    position:relative; height:100svh; min-height:34rem;
    background:var(--void); 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%;
    animation:breathe 26s ease-in-out infinite;
    will-change:transform;
  }
  @keyframes breathe{
    0%,100%{transform:scale(1.02)}
    50%{transform:scale(1.10)}
  }
  .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(--ink), transparent);
  }
  .hero-type{
    position:relative; z-index:3; width:100%;
    padding:0 clamp(1.1rem,4vw,3rem) clamp(2.2rem,7vw,4.5rem);
  }
  .hero-type h1{
    margin:0; line-height:.79; letter-spacing:-.022em;
    font-size:clamp(2.55rem,14.2vw,13rem);
    text-transform:uppercase;
  }
  .hero-type h1{opacity:0; animation:fadeIn 2.6s ease-out .25s forwards}
  .hero-type h1 span{display:block}
  .hero-type h1 span:nth-child(2){margin-left:.04em}
  .hero-type h1 span:nth-child(3){
    margin-left:.075em;
    color:var(--ember-lit);
  }
  @keyframes fadeIn{from{opacity:0} to{opacity:1}}
  .hero-sub{
    margin:clamp(1.4rem,4vw,2.4rem) 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;
  }

  /* ============ compas ============ */
  /* Twelve beats of the solea. Accents fall on 3, 6, 8, 10 and 12. */
  .compas{
    display:flex; align-items:flex-end; gap:.55rem; height:1.5rem;
    margin:0 0 clamp(2rem,5vw,3.25rem);
  }
  .compas i{display:block; width:2px; height:.7rem; background:rgba(239,231,220,.42)}
  .compas i.on{height:1.5rem; width:2px; background:var(--ember-lit)}

  /* ============ bands ============ */
  .band{padding:clamp(4rem,11vw,8.5rem) clamp(1.1rem,5vw,6rem); position:relative}
  .wrap{max-width:66rem; margin:0 auto}
  .band h2{
    margin:0 0 1.9rem; line-height:1.02; letter-spacing:-.015em;
    font-size:clamp(2.1rem,6.4vw,4rem);
  }
  .band p{margin:0 0 1.15rem; max-width:36rem; font-size:clamp(.95rem,1.35vw,1.16rem); line-height:1.72}
  .band p:last-of-type{margin-bottom:0}
  .lede{font-size:clamp(1.08rem,2.2vw,1.28rem); line-height:1.6; color:var(--bone); max-width:26rem}

  /* ============ release ============ */
  .release{display:grid; gap:clamp(2rem,5vw,3.5rem); grid-template-columns:1fr}
  .art{
    width:100%; height:auto; display:block;
    border:1px solid var(--hair); background:var(--void);
  }
  .kicker{margin:0 0 .55rem; color:var(--ember-lit); font-size:.76rem; letter-spacing:.24em}
  .rel-title{margin:0 0 2.2rem; font-size:clamp(2.1rem,6vw,3.4rem); line-height:1.02; letter-spacing:-.015em}
  .plats{list-style:none; margin:0; padding:0}
  .plats li{border-top:1px solid var(--hair)}
  .plats li:last-child{border-bottom:1px solid var(--hair)}
  .plat{
    display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
    padding:1.15rem .1rem; text-decoration:none; letter-spacing:.04em;
    font-size:clamp(1.18rem,1.5vw,1.55rem); transition:color .25s, padding-left .25s;
  }
  .plat:hover,.plat:focus-visible{color:var(--ember-lit); padding-left:.7rem}
  .plat b{font-family:"Spectral",serif; font-weight:300; font-size:clamp(.94rem,1.1vw,1.14rem); letter-spacing:.02em; color:rgba(239,231,220,.75)}

  /* ============ about, lit from the side ============ */
  .lit{background:var(--void); overflow:hidden}
  .lit::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(75% 120% at 108% 50%, rgba(141,15,20,.4), transparent 62%);
  }
  .lit .wrap{position:relative}

  /* ============ archive bridge ============ */
  .bridge{background:var(--void); overflow:hidden}
  .bridge::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(85% 75% at 6% 12%, rgba(141,15,20,.46), transparent 60%);
  }
  .bridge .wrap{position:relative}

  .tally{
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:clamp(.75rem,3vw,2.5rem);
    margin:clamp(2.5rem,6vw,4rem) 0 0;
    border-top:1px solid var(--hair); padding-top:clamp(1.75rem,4vw,2.5rem);
  }
  .tally div{display:flex; flex-direction:column; gap:.35rem}
  .tally b{
    font-family:"Marcellus",Georgia,serif; font-weight:400;
    font-size:clamp(2.9rem,11vw,5.5rem); line-height:.86;
    letter-spacing:-.02em; color:var(--bone);
  }
  .tally span{
    font-size:clamp(.92rem,1.15vw,1.12rem); line-height:1.4;
    letter-spacing:.04em; color:rgba(239,231,220,.78);
  }
  .go{
    display:inline-block; margin-top:1.8rem; padding:.75rem 0 .3rem;
    font-family:"Marcellus",serif; font-size:1.05rem; letter-spacing:.05em;
    text-decoration:none; border-bottom:1px solid var(--ember);
    transition:color .25s, border-color .25s;
  }
  .go:hover,.go:focus-visible{color:var(--ember-lit); border-color:var(--ember-lit)}

  /* ============ forms ============ */
  .forms{display:grid; gap:clamp(2.75rem,7vw,5rem); grid-template-columns:1fr}
  .forms h2{font-size:clamp(1.7rem,4.4vw,2.5rem)}
  .forms > div > p{color:rgba(239,231,220,.8); margin-bottom:2rem}
  form{max-width:32rem}
  label{display:block; margin:0 0 .5rem; font-size:.95rem; letter-spacing:.04em; color:rgba(239,231,220,.86)}
  input,textarea{
    width:100%; margin:0 0 1.5rem; padding:.75rem 0;
    background:transparent; color:var(--bone);
    border:0; border-bottom:1px solid rgba(239,231,220,.34); border-radius:0;
    font-family:inherit; font-size:clamp(1.04rem,1.2vw,1.2rem); transition:border-color .25s;
  }
  input::placeholder,textarea::placeholder{color:rgba(239,231,220,.4)}
  input:focus,textarea:focus{outline:0; border-bottom-color:var(--ember)}
  textarea{min-height:7rem; resize:vertical}
  .btn{
    padding:.85rem 2.4rem; border:1px solid var(--ember); border-radius:0; cursor:pointer;
    background:transparent; color:var(--bone);
    font-size:1rem; letter-spacing:.1em; transition:background .3s, border-color .3s;
  }
  .btn:hover{background:var(--ember)}
  .btn:focus-visible{outline:2px solid var(--bone); outline-offset:3px}

  a:focus-visible{outline:2px solid var(--ember); outline-offset:3px}

  @media (min-width:54rem){
    .release{grid-template-columns:minmax(0,19rem) 1fr; align-items:start}
    .forms{grid-template-columns:1fr 1fr}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important; transition:none!important}
    .compas i{opacity:.42!important; transform:none!important}
    .compas i.on{opacity:.72!important}
    .hero-type h1 span,.hero-sub{opacity:1}
    html{scroll-behavior:auto}
  }

/* ============ interior pages ============ */
.page-head{
  position:relative; background:var(--void);
  padding:clamp(7rem,15vw,11rem) clamp(1.1rem,4vw,3rem) clamp(3rem,7vw,5rem);
  overflow:hidden;
}
.page-head::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 130% at 104% 40%, rgba(141,15,20,.34), transparent 60%);
}
.page-head .wrap{position:relative}
.page-head h1{
  margin:0; line-height:.98; letter-spacing:-.02em;
  font-size:clamp(2.6rem,8.5vw,5.5rem);
}
.page-head .standfirst{
  margin:1.5rem 0 0; max-width:36rem;
  font-size:clamp(1.1rem,2.3vw,1.32rem); line-height:1.65; color:rgba(239,231,220,.74);
}
.top.solid::before{background:linear-gradient(to bottom, var(--void) 40%, rgba(0,0,0,0))}

.facts{list-style:none; margin:0; padding:0; display:grid; gap:0}
.facts li{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.35rem 1.5rem;
  padding:1.05rem .1rem; border-bottom:1px solid var(--hair);
}
.facts li:first-child{border-top:1px solid var(--hair)}
.facts dfn{font-style:normal; font-family:"Marcellus",serif; font-size:1.05rem}

/* nothing may exceed the viewport */
.hero-type h1,.band h2,.page-head h1{overflow-wrap:break-word}

.instruments{margin-top:clamp(2rem,5vw,3rem); max-width:34rem}
.instruments li{padding-block:.85rem}
.instruments dfn{font-size:clamp(1.15rem,3vw,1.45rem)}

/* ---- the archive section speaks in the archive's own typefaces ---- */
.bridge .kicker,
.bridge h2,
.bridge p,
.bridge .tally span,
.bridge .go{font-family:var(--collection-body)}
.bridge h2{font-family:var(--collection-display); font-weight:300; letter-spacing:.02em}
.bridge .tally b{font-family:var(--collection-display); font-weight:300}
.bridge p{font-size:1.08rem}

/* ---- the collection page reads entirely in the archive's typefaces ---- */
/* ---- The ANICETO Collection identity, carried across verbatim ---- */
:root{--gold:#DDB268; --parchment:#F5F0E8}

.brandline{display:flex; align-items:center; gap:clamp(.6rem,2vw,1rem); flex-wrap:wrap}
.brandline h1,.brandline h2{margin:0}
.brandmark{flex:0 0 auto; width:clamp(46px,11vw,84px); color:var(--gold); display:block}
.brandmark svg{display:block; width:100%; height:auto; fill:currentColor}
.brandmark path{stroke:currentColor; stroke-width:200; stroke-linejoin:round; stroke-linecap:round; paint-order:stroke fill}

.tagline{
  font-family:var(--collection-display); font-style:italic; font-weight:300;
  font-size:clamp(1.05rem,3vw,1.35rem); color:var(--parchment);
  margin:clamp(1.1rem,3vw,1.6rem) 0 0; padding-top:clamp(1rem,2.5vw,1.4rem);
  border-top:1px solid rgba(221,178,104,.45); max-width:26ch;
}

/* gold replaces red wherever the archive speaks */
.bridge .kicker{color:var(--gold)}
.bridge::before{background:radial-gradient(85% 75% at 6% 12%, rgba(221,178,104,.16), transparent 62%)}
.bridge .go{border-bottom-color:var(--gold)}
.bridge .go:hover,.bridge .go:focus-visible{color:var(--gold); border-color:var(--gold)}
.bridge .tally b{color:var(--parchment)}
/* ---- exact lockup, matching the archive's nav-brand ---- */
.brandline{display:inline-flex; align-items:center; gap:10px; flex-wrap:nowrap; max-width:100%}
.brandwords{
  font-family:var(--collection-display); font-weight:300;
  letter-spacing:.08em; color:var(--parchment);
  font-size:clamp(1.18rem,4.9vw,2.9rem); line-height:1.1; white-space:nowrap;
  min-width:0; overflow:hidden;
}
.brandmark{width:clamp(40px,9vw,72px)}
.bridge .kicker,.archive-lede{font-size:clamp(1.05rem,2.6vw,1.28rem); line-height:1.7; max-width:38rem}
.tally{grid-template-columns:repeat(2,1fr)}
@media(min-width:40rem){.tally{grid-template-columns:repeat(4,1fr)}}

.also{
  font-family:"Spectral",Georgia,serif; font-weight:300; font-style:italic;
  font-size:clamp(1rem,1.25vw,1.18rem); color:rgba(239,231,220,.72);
  margin:0 0 clamp(1.6rem,4vw,2.4rem);
  padding-bottom:clamp(1.1rem,3vw,1.5rem);
  border-bottom:1px solid var(--hair); max-width:38rem;
}


/* ---- footer, matching The ANICETO Collection exactly ---- */
footer{
  background:#2E2C28;
  border-top:1px solid rgba(196,145,58,.15);
  padding:clamp(32px,5vw,48px) clamp(1.1rem,4vw,3rem);
}
.footer-bottom{
  max-width:1200px; margin:0 auto;
  border-top:1px solid rgba(196,145,58,.1); padding-top:20px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
}
.footer-legal{
  font-family:'Montserrat',system-ui,sans-serif;
  font-size:14px; color:rgba(245,240,232,.25); letter-spacing:0;
}

/* ---- what was played, and where it is documented ---- */
.played{margin-top:clamp(2.25rem,5vw,3rem)}
.played-head{
  font-family:'Montserrat',system-ui,sans-serif;
  font-size:clamp(.76rem,.95vw,.88rem); font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin:0 0 .9rem;
}
.played-list{list-style:none; margin:0; padding:0; border-top:1px solid rgba(221,178,104,.22)}
.played-list li{border-bottom:1px solid rgba(221,178,104,.22)}
.played-list a{
  display:grid; grid-template-columns:1fr; gap:.2rem;
  padding:1.05rem .1rem; text-decoration:none;
  transition:color .25s, padding-left .25s;
}
@media(min-width:41rem){
  .played-list a{grid-template-columns:minmax(0,11rem) 1fr; gap:1.5rem; align-items:baseline}
  .played-list b{text-align:right}
}
.played-list a:hover,.played-list a:focus-visible{color:var(--gold); padding-left:.6rem}
.played-list dfn{
  font-style:normal; font-family:var(--collection-display);
  font-weight:300; font-size:clamp(1.22rem,1.55vw,1.62rem); letter-spacing:.03em;
}
.played-list b{
  font-family:var(--collection-body); font-weight:400;
  font-size:clamp(1rem,1.18vw,1.22rem); color:rgba(239,231,220,.78); letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media(max-width:40.94rem){.played-list b{white-space:normal}}

/* header gains a ground once the hero is behind it */
.top{transition:background .3s, border-color .3s}
body.scrolled .top{
  background:#0C0809;
  border-bottom:1px solid var(--hair);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
body.scrolled .top::before{opacity:0}
[id]{scroll-margin-top:4.5rem}

.played-sub{
  font-family:var(--collection-body); font-size:clamp(.96rem,1.15vw,1.14rem);
  color:rgba(239,231,220,.78); margin:.1rem 0 1.15rem; line-height:1.65;
}

/* the bar sits on the open menu, not under it */
body.menu-open .top{background:none; border-bottom:0; -webkit-backdrop-filter:none; backdrop-filter:none}
body.menu-open .top::before{opacity:0}
.nav a{-webkit-tap-highlight-color:transparent}
@media (min-width:54rem){
  .nav{padding-top:0}
  .mark,.burger{z-index:1}
}


/* wide screens: give the columns room and let the reading size grow */
@media (min-width:70rem){
  .hero-type{padding-left:clamp(3rem,5vw,6rem); padding-right:clamp(3rem,5vw,6rem)}
  .top{padding-left:clamp(3rem,5vw,6rem); padding-right:clamp(3rem,5vw,6rem)}
  .lede{font-size:1.42rem; max-width:32rem}
  .instruments{max-width:40rem}
  .instruments dfn{font-size:1.5rem}
  .archive-lede{max-width:44rem}
}

/* About: the sun sits left of the text, and the block keeps the page's left edge */
.about-grid{display:grid; grid-template-columns:1fr; gap:clamp(1.75rem,4vw,3rem); align-items:start}
.about-sun{width:clamp(88px,22vw,150px); max-width:100%; height:auto; opacity:.92; justify-self:start}
@media (min-width:62rem){
  .about-grid{grid-template-columns:clamp(180px,20vw,290px) minmax(0,1fr); gap:clamp(2.5rem,5vw,4.5rem)}
  .about-sun{width:100%; margin-top:.35rem}
  .about-body p,.about-body .lede{max-width:34rem}
  .about-body .instruments{max-width:34rem}
}

/* wide screens see the whole sweep, so the original framing holds there */
@media (min-width:54rem){
  .hero-img{object-position:50% 30%}
}

/* laptop and up: hold the headline back so the photograph has room */
@media (min-width:54rem){
  .hero-type h1{font-size:clamp(4.4rem,9.4vw,9rem)}
}


/* ---- compas keeps time: twelve beats of the solea, then a rest ---- */
/* 12 beats at ~0.42s, then a pause. Accents on 3, 6, 8, 10, 12. */
.compas i{
  transform-origin:bottom center;
  animation:beat 5.04s linear 3 both;
  animation-play-state:paused;
}
.compas i:nth-child(1){animation-delay:0s}
.compas i:nth-child(2){animation-delay:.42s}
.compas i:nth-child(3){animation-delay:.84s}
.compas i:nth-child(4){animation-delay:1.26s}
.compas i:nth-child(5){animation-delay:1.68s}
.compas i:nth-child(6){animation-delay:2.10s}
.compas i:nth-child(7){animation-delay:2.52s}
.compas i:nth-child(8){animation-delay:2.94s}
.compas i:nth-child(9){animation-delay:3.36s}
.compas i:nth-child(10){animation-delay:3.78s}
.compas i:nth-child(11){animation-delay:4.20s}
.compas i:nth-child(12){animation-delay:4.62s}

/* an unaccented beat lifts a little */
@keyframes beat{
  0%      {opacity:.42; transform:scaleY(1)}
  2.3%    {opacity:.85; transform:scaleY(1.35)}
  10%     {opacity:.42; transform:scaleY(1)}
  100%    {opacity:.42; transform:scaleY(1)}
}
/* an accented beat strikes harder and holds a fraction longer */
.compas i.on{animation-name:beatAccent}
@keyframes beatAccent{
  0%      {opacity:.72; transform:scaleY(1)}
  2.3%    {opacity:1;   transform:scaleY(1.22)}
  14%     {opacity:.72; transform:scaleY(1)}
  100%    {opacity:.72; transform:scaleY(1)}
}

.compas.playing i{animation-play-state:running}