/* ============================================================
   MARK TAIWO — TROUBLE
   Art direction: tabloid newsprint. Cream, ink, one red.
   ============================================================ */

:root{
  --cream:      #F4F1E7;
  --cream-2:    #E9E4D5;
  --ink:        #101010;
  --ink-2:      #1C1C1C;
  --red:        #E11B22;
  --red-deep:   #B3202A;
  --grey:       #8A867B;
  --rule:       rgba(16,16,16,.16);

  --display:    'Anton', 'Arial Narrow', Impact, sans-serif;
  --serif:      'Playfair Display', 'Times New Roman', serif;
  --mono:       'JetBrains Mono', ui-monospace, 'Courier New', monospace;
  --body:       'Newsreader', Georgia, 'Times New Roman', serif;

  --gap:        clamp(3.5rem, 9vw, 8rem);
  --ease:       cubic-bezier(.22,.61,.36,1);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem, .95rem + .3vw, 1.125rem);
  line-height:1.65;
  font-weight:300;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0 0 1.1em; }
ul,ol{ margin:0; padding:0; list-style:none; }

.wrap{ width:min(1240px, 90vw); margin-inline:auto; }

.sr-only{
  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:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--cream); padding:.8rem 1.2rem;
  font-family:var(--mono); font-size:.75rem; text-decoration:none;
}
.skip:focus{ left:0; }

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

/* ---- paper grain over everything ---- */
.grain,
body::after{
  content:'';
  position:fixed; inset:0; z-index:120; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain{ position:absolute; z-index:3; }

/* ============================================================
   TYPE PRIMITIVES
   ============================================================ */

.kicker{
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--red); margin:0 0 1.1rem;
  display:flex; align-items:center; gap:.7rem;
}
.kicker::before{
  content:''; width:9px; height:9px; background:currentColor; flex:none;
}
.kicker--light{ color:var(--cream); }
.kicker--cream{ color:var(--cream); }
.kicker--red{ color:var(--red); }
.dot{ width:5px; height:5px; background:currentColor; border-radius:50%; display:inline-block; }

.h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.6rem, 6.2vw, 5rem);
  line-height:.92; letter-spacing:-.01em; text-transform:uppercase;
  margin:0 0 1.4rem;
}
.h2--serif{
  font-family:var(--serif); font-weight:900; letter-spacing:-.02em;
  text-transform:none; font-size:clamp(2.8rem, 7vw, 5.6rem);
}
.lede{
  font-family:var(--serif); font-style:italic; font-weight:700;
  font-size:clamp(1.2rem, 1.05rem + .8vw, 1.6rem);
  line-height:1.35; margin-bottom:1.2rem;
}

/* ---- the signature (traced from the artwork, inherits currentColor) ---- */
.sig{
  display:block; fill:currentColor;
  /* an <svg> with no width/height attrs defaults to 300x150 — pin the real ratio */
  aspect-ratio:2400 / 798;
}
.sig--hero{
  width:clamp(210px, 30vw, 380px); height:auto;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.45));
}
.sig--tracks{ width:clamp(130px, 16vw, 175px); height:auto; }
.sig--footer{ width:clamp(190px, 24vw, 265px); height:auto; }

/* ---- buttons ---- */
.btn{
  --bg:var(--ink); --fg:var(--cream); --bd:var(--ink);
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--bg); color:var(--fg); border:1.5px solid var(--bd);
  padding:.85rem 1.5rem;
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; transition:transform .2s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn--lg{ padding:1.05rem 2rem; font-size:.76rem; }
.btn--red{ --bg:var(--red); --fg:#fff; --bd:var(--red); }
.btn--red:hover{ --bg:var(--ink); --bd:var(--ink); }
.btn--ink{ --bg:var(--ink); --fg:var(--cream); --bd:var(--ink); }
.btn--ink:hover{ --bg:var(--red); --bd:var(--red); --fg:#fff; }
.btn--ghost{ --bg:transparent; --fg:var(--cream); --bd:rgba(244,241,231,.55); }
.btn--ghost:hover{ --bg:var(--cream); --fg:var(--ink); --bd:var(--cream); }

/* ---- brand marks ---- */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.socials{ display:flex; align-items:center; gap:.85rem; }

.ico{
  display:inline-flex; align-items:center; justify-content:center;
  color:currentColor; text-decoration:none;
  transition:color .22s var(--ease), transform .22s var(--ease), opacity .22s;
}
.ico__svg{ width:19px; height:19px; fill:currentColor; display:block; }
.ico:hover{ transform:translateY(-2px); }
.ico[aria-disabled="true"]{ opacity:.35; cursor:default; }
.ico[aria-disabled="true"]:hover{ transform:none; }

.ico[data-brand="spotify"]:hover{ color:#1DB954; }
.ico[data-brand="apple"]:hover{ color:#FA243C; }
.ico[data-brand="instagram"]:hover{ color:#E4405F; }
.ico[data-brand="tiktok"]:hover{ color:var(--red); }
.ico[data-brand="youtube"]:hover{ color:#FF0000; }

/* logo tiles — the big listen-on buttons */
.tile{
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px;
  border:1.5px solid var(--ink); color:var(--ink); background:transparent;
  text-decoration:none;
  transition:background .22s var(--ease), color .22s var(--ease),
             border-color .22s var(--ease), transform .22s var(--ease);
}
.tile__svg{ width:24px; height:24px; fill:currentColor; display:block; }
.tile:hover{ transform:translateY(-3px); background:var(--ink); color:var(--cream); }
.tile[data-brand="spotify"]:hover{ background:#1DB954; border-color:#1DB954; color:#fff; }
.tile[data-brand="apple"]:hover{ background:#FA243C; border-color:#FA243C; color:#fff; }
.tile[data-brand="youtube"]:hover{ background:#FF0000; border-color:#FF0000; color:#fff; }
.tile[aria-disabled="true"]{ opacity:.3; cursor:default; }
.tile[aria-disabled="true"]:hover{ transform:none; background:transparent; color:var(--ink); border-color:var(--ink); }

/* ---- torn paper edges ---- */
.torn{ position:absolute; left:0; width:100%; height:40px; z-index:4; }
.torn--top{ top:-39px; transform:scaleY(-1); }

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

/* ============================================================
   NAV
   ============================================================ */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; gap:2rem;
  padding:1.1rem clamp(1rem, 5vw, 3rem);
  transition:background .35s var(--ease), border-color .35s, padding .35s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(244,241,231,.975);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--rule);
  padding-block:.75rem;
}
.nav__mark{
  text-decoration:none; margin-right:auto; display:flex; align-items:center;
  color:var(--cream); transition:color .35s;
}
.nav.is-stuck .nav__mark{ color:var(--ink); }
.nav__name{
  font-family:var(--display); font-size:1.05rem; letter-spacing:.12em;
  color:inherit;
}

.nav__links{ display:flex; gap:1.8rem; }
.nav__links a{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color:var(--cream); position:relative; padding-block:.3rem;
  transition:color .35s;
}
.nav.is-stuck .nav__links a{ color:var(--ink); }
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--red); transition:width .3s var(--ease);
}
.nav__links a:hover::after{ width:100%; }
.nav__joinMobile{ display:none; }

.nav__social{ color:var(--cream); transition:color .35s; }
.nav.is-stuck .nav__social{ color:var(--ink); }

.nav__burger{
  display:none; background:none; border:0; cursor:pointer;
  width:34px; height:26px; padding:0; position:relative;
}
.nav__burger span{
  position:absolute; left:0; width:100%; height:2px; background:var(--cream);
  transition:transform .3s var(--ease), background .35s, opacity .2s;
}
.nav.is-stuck .nav__burger span{ background:var(--ink); }
.nav__burger span:nth-child(1){ top:7px; }
.nav__burger span:nth-child(2){ top:16px; }
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(4.5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ transform:translateY(-4.5px) rotate(-45deg); }

@media (max-width: 880px){
  .nav__burger{ display:block; order:3; }
  .nav__cta{ display:none; }
  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--ink); padding:0 clamp(1rem,5vw,3rem);
    max-height:0; overflow:hidden; transition:max-height .4s var(--ease), padding .4s var(--ease);
  }
  .nav.is-open .nav__links{ max-height:340px; padding-block:1.2rem 1.6rem; }
  .nav__links a,
  .nav.is-stuck .nav__links a{ color:var(--cream); font-size:.9rem; padding-block:.75rem; }
  .nav__joinMobile,
  .nav.is-stuck .nav__joinMobile{
    display:block; color:var(--red); margin-top:.6rem;
    padding-top:1.1rem; border-top:1px solid rgba(244,241,231,.16);
  }
  /* socials stay in the header bar on mobile — tighten to make room */
  .nav{ gap:1rem; }
  .nav__social{ gap:.85rem; margin-left:auto; }
  .nav__social .ico__svg{ width:18px; height:18px; }
}

@media (max-width: 420px){
  .nav{ gap:.7rem; }
  .nav__name{ font-size:.92rem; letter-spacing:.08em; }
  .nav__social{ gap:.7rem; }
  .nav__social .ico__svg{ width:17px; height:17px; }
}

/* ============================================================
   HERO — full image
   ============================================================ */

.hero{
  position:relative; min-height:100svh; height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden; background:var(--ink);
}
/* Two art-directed sources (see <picture> in the markup):
   hero-tall  below 760px — portrait crop framed on him
   hero-wide  from 760px  — he sits right of centre, leaving the left clear
                            for the wordmark and signature */
.hero picture{ position:absolute; inset:0; display:block; }
.hero__img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 40%;
  animation:heroIn 2.4s var(--ease) both;
}
@media (min-width: 760px){
  .hero__img{ object-position:50% 22%; }
}
@keyframes heroIn{ from{ transform:scale(1.07); } to{ transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .hero__img{ animation:none; } }

.hero__scrim{
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(to top, rgba(8,8,8,.88) 0%, rgba(8,8,8,.52) 34%, rgba(8,8,8,.10) 62%, rgba(8,8,8,.42) 100%),
    linear-gradient(to right, rgba(8,8,8,.55) 0%, rgba(8,8,8,0) 55%);
}

.hero__body{
  position:relative; z-index:5;
  width:min(1240px, 90vw); margin:0 auto;
  padding-bottom:clamp(5rem, 12vh, 8.5rem);
  color:var(--cream);
}
.hero__title{
  font-family:var(--display); font-weight:400;
  /* capped a little under the old 15rem so the wordmark clears his face
     on the wide crop even if Anton falls back to a wider face */
  font-size:clamp(4.2rem, 16vw, 14rem);
  line-height:.8; letter-spacing:-.02em; text-transform:uppercase;
  margin:0 0 .35rem;
  text-shadow:0 8px 40px rgba(0,0,0,.35);
}
.hero__by{ margin:.9rem 0 2.4rem; color:var(--cream); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; }

.hero__scroll{
  position:absolute; z-index:5; right:clamp(1rem,5vw,3rem); bottom:clamp(5rem,12vh,8.5rem);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  color:var(--cream); text-decoration:none;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
}
.hero__scroll svg{ animation:bob 2.2s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.5 } 50%{ transform:translateY(6px); opacity:1 } }
@media (max-width: 700px){ .hero__scroll{ display:none; } }

/* ============================================================
   TICKER
   ============================================================ */

.ticker{
  background:var(--ink); color:var(--cream);
  overflow:hidden; padding:.85rem 0; position:relative; z-index:6;
}
.ticker__track{
  display:flex; align-items:center; gap:1.6rem; width:max-content;
  animation:slide 46s linear infinite;
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; white-space:nowrap;
}
.ticker__track i{ width:8px; height:8px; background:var(--red); flex:none; }
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-33.333%) } }
@media (prefers-reduced-motion: reduce){ .ticker__track{ animation:none } }

/* ============================================================
   RELEASE
   ============================================================ */

.release{ padding:var(--gap) 0; }
.release__grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(2.5rem, 6vw, 6rem); align-items:center;
}
.release__art img{
  width:100%; border:1px solid var(--rule);
  box-shadow:0 30px 70px -30px rgba(16,16,16,.45);
  transform:rotate(-1.1deg);
}
.release__copy p{ max-width:52ch; }
.release__date{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--red); font-weight:500;
  border-top:1.5px solid var(--red); padding-top:1.1rem; margin-top:1.8rem;
}
.release__links{
  display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; margin-top:1.5rem;
}
.release__listen{
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--grey);
  margin-right:.4rem;
}

@media (max-width: 880px){
  .release__grid{ grid-template-columns:1fr; }
  /* artwork leads on narrow screens — it sets up the copy that follows */
  .release__art{ max-width:460px; margin-inline:auto; margin-bottom:.5rem; }
}

/* ============================================================
   TRACKLIST
   ============================================================ */

.tracks{ padding:0 0 var(--gap); }
.tracks__head{ margin-bottom:2.5rem; }
.tracks__list{ border-top:2px solid var(--red); }

.track{
  display:grid;
  grid-template-columns:clamp(3.6rem,7vw,6rem) 1fr auto auto;
  align-items:center; gap:1.2rem;
  border-bottom:1.5px solid var(--red);
  padding:1.05rem 0;
  transition:background .35s var(--ease), padding-left .35s var(--ease);
}
.track:hover{ background:var(--cream-2); padding-left:1rem; }

.track__no{
  font-family:var(--serif); font-weight:900;
  font-size:clamp(2rem, 4.6vw, 3.4rem); line-height:1;
}
.track__title{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.35rem, 3.2vw, 2.4rem); line-height:1.05;
}
.track__feat{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grey); white-space:nowrap;
}
.track__listen{
  display:flex; align-items:center; gap:.9rem;
  justify-self:end; color:var(--ink);
}
.track__listen em{
  font-family:var(--mono); font-size:.62rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; font-style:normal;
  color:var(--grey); margin-right:.1rem;
}
.track__listen em::after{ content:':'; }

.tracks__foot{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; margin-top:2.4rem;
}
.barcode{ display:flex; flex-direction:column; align-items:flex-end; gap:.35rem; color:var(--ink); }
.barcode svg{ width:120px; height:34px; }
.barcode em{ font-family:var(--mono); font-size:.6rem; letter-spacing:.3em; font-style:normal; }

@media (max-width: 700px){
  .track{ grid-template-columns:2.8rem 1fr auto; gap:.5rem .9rem; }
  .track__feat{ grid-column:2 / -1; grid-row:2; margin-top:-.2rem; white-space:normal; }
  .track__listen{ grid-column:3; grid-row:1; gap:.8rem; }
  .track__listen em{ display:none; }
}

/* ============================================================
   LAUNCH PARTY
   ============================================================ */

.party{
  position:relative; background:var(--ink); color:var(--cream);
  padding:calc(var(--gap) + 1rem) 0 var(--gap);
  margin-top:40px;
}
.party .torn--top{ fill:var(--ink); }

.party__grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.8fr);
  gap:clamp(2.5rem, 6vw, 5.5rem); align-items:center;
}
.party__h2{ color:var(--cream); margin-bottom:2rem; }
.party__h2 span{ color:var(--red); }

.party__facts{ margin:0 0 1.8rem; display:grid; gap:.1rem; }
.party__facts div{
  display:grid; grid-template-columns:7.5rem 1fr; gap:1rem;
  padding:.7rem 0; border-top:1px solid rgba(244,241,231,.16);
}
.party__facts dt{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--grey);
}
.party__facts dd{
  margin:0; font-family:var(--mono); font-size:.86rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--cream);
}
.party__note{ max-width:46ch; color:rgba(244,241,231,.78); }

.countdown{ display:flex; gap:.6rem; margin:2rem 0; }
.countdown div{
  flex:1; max-width:110px; text-align:center;
  border:1px solid rgba(244,241,231,.2); padding:.8rem .4rem;
}
.countdown strong{
  display:block; font-family:var(--display); font-size:clamp(1.6rem,4vw,2.4rem);
  line-height:1; font-weight:400; color:var(--red);
  font-variant-numeric:tabular-nums;
}
.countdown span{
  display:block; margin-top:.4rem;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--grey);
}
.countdown.is-past{ display:none; }

.party__partners{
  margin-top:1.6rem; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--grey);
}
.party__partners strong{ color:var(--cream); font-weight:500; }

.party__poster img{
  width:100%; border:1px solid rgba(244,241,231,.14);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
  transform:rotate(1.4deg);
}

/* ---- recent shows ---- */
.shows{ margin-top:clamp(3rem,7vw,5rem); border-top:1px solid rgba(244,241,231,.16); padding-top:2rem; }

.shows__head,
.show{
  display:grid; grid-template-columns:11rem minmax(0,1.4fr) minmax(0,1fr); gap:1.5rem;
  align-items:baseline;
}
.shows__head{
  font-family:var(--mono); font-size:.58rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--grey);
  padding-bottom:.9rem; border-bottom:1px solid rgba(244,241,231,.22);
}
.show{
  padding:1.1rem 0; border-bottom:1px solid rgba(244,241,231,.1);
  font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  transition:padding-left .3s var(--ease);
}
.show:hover{ padding-left:.6rem; }
.show__date{ color:var(--red); font-weight:700; white-space:nowrap; }
.show__event{ color:var(--cream); }
.show__venue{ color:var(--grey); }
.show__lbl{ display:none; }

@media (max-width: 880px){
  .party__grid{ grid-template-columns:1fr; }
  .party__poster{ max-width:420px; margin-inline:auto; }
}

@media (max-width: 720px){
  .shows__head{ display:none; }
  .show{ grid-template-columns:1fr; gap:.55rem; padding:1.3rem 0; }
  .show__lbl{
    display:block; font-size:.54rem; letter-spacing:.26em;
    color:rgba(244,241,231,.38); margin-bottom:.2rem; font-weight:500;
  }
}

/* ============================================================
   ABOUT
   ============================================================ */

.about{ padding:var(--gap) 0; }
.about__grid{
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(2.5rem, 6vw, 6rem); align-items:center;
}
.about__photo{ margin:0; }
.about__photo img{
  width:100%; filter:contrast(1.04) saturate(.92);
  border:1px solid var(--rule);
}
.about__photo figcaption{
  margin-top:.8rem; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--grey);
}
.about__copy p{ max-width:56ch; }

@media (max-width: 880px){
  .about__grid{ grid-template-columns:1fr; }
  .about__photo{ max-width:380px; }
}

/* ============================================================
   SUBSCRIBE — the mailing list
   ============================================================ */

.subscribe{
  position:relative; background:var(--red); color:var(--cream);
  padding:calc(var(--gap) + 1rem) 0 var(--gap); margin-top:40px;
}
.subscribe .torn--top{ fill:var(--red); }

.subscribe__inner{ max-width:860px; text-align:center; }
.subscribe__inner .kicker{ justify-content:center; }
.subscribe__h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.8rem, 8vw, 6.5rem); line-height:.88;
  text-transform:uppercase; letter-spacing:-.015em;
  margin:0 0 1.4rem; color:#fff;
}
.subscribe__sub{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.1rem,1rem+.6vw,1.4rem);
  max-width:46ch; margin:0 auto 2.6rem; color:rgba(255,255,255,.9);
}

.form__row{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.form input[type=email],
.form input[type=text]{
  flex:1 1 260px; min-width:0;
  background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.5);
  color:#fff; padding:1.05rem 1.2rem;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.06em;
  transition:border-color .25s, background .25s;
}
.form input[type=text]{ flex:0 1 190px; }
.form input::placeholder{ color:rgba(255,255,255,.62); text-transform:uppercase; font-size:.72rem; letter-spacing:.14em; }
.form input:focus{ outline:none; border-color:#fff; background:rgba(255,255,255,.18); }
.form input.is-invalid{ border-color:var(--ink); background:rgba(16,16,16,.14); }
.form .btn{ flex:0 0 auto; }
.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }

.form__error{
  margin:1rem 0 0; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
}
.form__legal{
  margin:1.6rem auto 0; max-width:56ch;
  font-family:var(--mono); font-size:.62rem; line-height:1.9;
  letter-spacing:.08em; color:rgba(255,255,255,.72);
}
.form__legal a{ color:#fff; }

.form__done{ animation:fadeUp .6s var(--ease) both; }
.form__done .kicker{ justify-content:center; }
.form__done h3{
  font-family:var(--display); font-size:clamp(2.2rem,6vw,4rem);
  text-transform:uppercase; line-height:.95; margin:0 0 1rem; color:#fff;
}
.form__done p{ max-width:44ch; margin-inline:auto; color:rgba(255,255,255,.9); }
.form__done .btn{ margin-top:1rem; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }

/* ============================================================
   MAILING LIST MODAL
   ============================================================ */

.modal{
  position:fixed; inset:0; z-index:150;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem, 4vw, 2rem);
  overflow-y:auto;
}
.modal[hidden]{ display:none; }

.modal__backdrop{
  position:absolute; inset:0;
  background:rgba(10,10,10,.78);
  backdrop-filter:blur(4px);
  opacity:0; transition:opacity .26s var(--ease);
}
.modal.is-open .modal__backdrop{ opacity:1; }

.modal__panel{
  position:relative; z-index:1;
  width:min(520px, 100%);
  background:var(--red); color:var(--cream);
  border:1.5px solid rgba(255,255,255,.22);
  padding:clamp(2rem, 5vw, 3rem) clamp(1.5rem, 5vw, 3rem) clamp(1.75rem, 4vw, 2.5rem);
  text-align:center;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  opacity:0; transform:translateY(20px) scale(.98);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.modal.is-open .modal__panel{ opacity:1; transform:none; }

.modal__panel .kicker{ justify-content:center; }

.modal__x{
  position:absolute; top:.7rem; right:.7rem;
  width:38px; height:38px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer;
  color:var(--cream); opacity:.75;
  transition:opacity .2s, transform .2s var(--ease);
}
.modal__x svg{ width:20px; height:20px; }
.modal__x:hover{ opacity:1; transform:rotate(90deg); }

.modal__h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.9rem, 6vw, 2.7rem); line-height:.95;
  text-transform:uppercase; letter-spacing:-.005em;
  margin:0 0 .9rem; color:#fff;
}
.modal__sub{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1rem, .95rem + .3vw, 1.15rem); line-height:1.4;
  max-width:34ch; margin:0 auto 1.8rem; color:rgba(255,255,255,.9);
}

.form--modal input[type=email]{ flex:1 1 100%; width:100%; text-align:center; }
.form--modal .btn{ width:100%; justify-content:center; margin-top:.7rem; }
.form--modal .form__legal{ margin-top:1.2rem; }

@media (prefers-reduced-motion: reduce){
  .modal__backdrop, .modal__panel{ transition:none; }
  .modal__panel{ opacity:1; transform:none; }
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer{ background:var(--ink); color:var(--cream); padding:clamp(3rem,7vw,5rem) 0 2rem; }
.footer__grid{
  display:grid; grid-template-columns:1.6fr repeat(3, 1fr);
  gap:2.5rem; padding-bottom:3rem;
  border-bottom:1px solid rgba(244,241,231,.16);
}
.footer__brand p{
  margin-top:.7rem; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--grey);
}
.footer h4{
  font-family:var(--mono); font-size:.64rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--red);
  margin:0 0 1.1rem;
}
.footer li{ margin-bottom:.6rem; }
.footer li a{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.08em;
  text-decoration:none; color:rgba(244,241,231,.82);
  transition:color .2s;
}
.footer li a:hover{ color:var(--red); }

.footer__bar{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  padding-top:1.6rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--grey);
}
.footer__bar a{ color:var(--grey); text-decoration:none; }
.footer__bar a:hover{ color:var(--cream); }

@media (max-width: 780px){
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
  .footer__bar{ flex-direction:column; gap:.5rem; }
}