/* ═══════════════════════════════════════════════════════════════════
   TESAH — cherry-black artist site
   Palette and type sampled from PHOTO-2026-07-23-15-35-22.jpg
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --black:      #060506;
  --panel:      #0c0a0b;
  --panel-2:    #121011;
  --line:       rgba(255,255,255,.075);
  --line-warm:  rgba(192,17,40,.28);

  --cherry:     #c01128;
  --cherry-lit: #e0273f;
  --cherry-deep:#7e0a18;
  --glow:       rgba(192,17,40,.42);

  --text:       #ded7d8;
  --muted:      #948a8c;
  --dim:        #6d6467;

  --chrome-1:   #ffffff;
  --chrome-2:   #d8d3d6;
  --chrome-3:   #8e888c;
  --chrome-4:   #efeced;

  --serif:  "Bodoni Moda", "Didot", "Playfair Display", Georgia, serif;
  --sans:   "Jost", "Futura", "Avenir Next", system-ui, -apple-system, sans-serif;
  --script: "Parisienne", "Snell Roundhand", cursive;

  --pad:     clamp(1.25rem, 4vw, 4.5rem);
  --gap:     clamp(1.5rem, 3vw, 3rem);
  --maxw:    1440px;
  --ease:    cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--black);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(.94rem,.55vw + .8rem,1rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* fine film grain over the whole page */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9;
  pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0 0 .8em; }

.sr,.skip{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip:focus{
  position:fixed; top:.6rem; left:.6rem; width:auto; height:auto;
  clip:auto; margin:0; padding:.6rem 1rem; z-index:100;
  background:var(--cherry); color:#fff; border-radius:2px;
}

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

/* ─────────────────────────────────────────────────────── shared bits */

.eyebrow{
  display:block;
  font-size:.62rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted); font-weight:400;
}
.eyebrow--dim{ color:var(--dim); }

.star{
  width:.5em; height:.5em; flex:none;
  fill:var(--cherry); vertical-align:.35em; margin-left:.55em;
}

.h-sec{
  display:flex; align-items:center;
  font-family:var(--serif);
  font-size:clamp(1.5rem,2.4vw,2.15rem);
  letter-spacing:.05em; text-transform:uppercase;
  color:#f2eeef;
  margin:0 0 clamp(1.5rem,3vw,2.5rem);
}
.h-sec--center{ justify-content:center; text-align:center; }

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.9rem;
  font-family:var(--sans); font-size:.72rem; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase;
  border:1px solid transparent; border-radius:2px;
  cursor:pointer; transition:.35s var(--ease);
}
.btn svg{ width:1.05em; height:1.05em; fill:currentColor; }
.btn--sm{ padding:.7rem 1.5rem; font-size:.66rem; }

.btn--fill{ background:var(--cherry-deep); color:#fff; border-color:var(--cherry-deep); }
.btn--fill:hover{ background:var(--cherry); border-color:var(--cherry); box-shadow:0 0 28px var(--glow); }

.btn--ghost{ color:var(--text); border-color:rgba(255,255,255,.32); }
.btn--ghost:hover{ border-color:var(--cherry); color:#fff; background:rgba(192,17,40,.1); }

.link-ul{
  display:inline-block; margin-top:.6rem;
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--text); padding-bottom:.3rem;
  border-bottom:1px solid var(--cherry);
  transition:.3s var(--ease);
}
.link-ul:hover{ color:var(--cherry-lit); }

/* ─────────────────────────────────────────────────────────────── nav */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease),
             border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(6,5,6,.88);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.nav__in{
  max-width:var(--maxw); margin-inline:auto;
  padding:1.05rem var(--pad);
  display:flex; align-items:center; gap:var(--gap);
}

.nav__mark{
  font-family:var(--serif); font-weight:500;
  font-size:1.06rem; letter-spacing:.42em;
  color:var(--cherry); flex:none;
}

.nav__links{
  display:flex; gap:clamp(.9rem,1.9vw,2rem);
  margin-inline:auto;
}
.nav__links a{
  position:relative;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); padding:.4rem 0;
  transition:color .3s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--cherry);
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__links a:hover,.nav__links a.is-active{ color:#fff; }
.nav__links a:hover::after,.nav__links a.is-active::after{ transform:scaleX(1); }

.nav__social{ display:flex; gap:.85rem; flex:none; }
.nav__social a{ color:var(--muted); transition:.3s var(--ease); }
.nav__social svg{ width:16px; height:16px; fill:currentColor; display:block; }
.nav__social a:hover{ color:var(--cherry-lit); transform:translateY(-2px); }

.nav__burger{
  display:none; flex-direction:column; gap:4px;
  background:none; border:0; padding:.4rem; cursor:pointer;
}
.nav__burger span{
  width:22px; height:1px; background:var(--text);
  transition:.3s var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* ────────────────────────────────────────────────────────────── hero */

.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
}
/* cherry bloom behind the type */
.hero::before{
  content:""; position:absolute; z-index:-2;
  width:70vw; height:70vw; max-width:900px; max-height:900px;
  left:-14vw; top:8%;
  background:radial-gradient(circle, rgba(192,17,40,.20), transparent 62%);
  pointer-events:none;
}

.hero__photo{
  position:absolute; inset:0 0 0 42%;
  z-index:-1;
}
.hero__photo img{
  width:100%; height:100%; object-fit:cover; object-position:50% 22%;
}
/* feather the photo into the page on the left and bottom */
.hero__photo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--black) 0%, rgba(6,5,6,.86) 20%, rgba(6,5,6,0) 62%),
    linear-gradient(0deg,  var(--black) 0%, rgba(6,5,6,0) 34%),
    linear-gradient(180deg, rgba(6,5,6,.6) 0%, rgba(6,5,6,0) 20%);
}

.hero__copy{
  grid-column:1;
  padding:8rem var(--pad) 4rem;
  max-width:46rem;
}

.wordmark{
  position:relative;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(3.6rem,11.5vw,10rem);
  line-height:.92; letter-spacing:.055em;
  margin:0 0 .1em;
  background:linear-gradient(168deg,
    var(--chrome-1) 0%, var(--chrome-3) 26%, var(--chrome-4) 44%,
    var(--chrome-1) 56%, var(--chrome-3) 74%, var(--chrome-2) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 3px 26px rgba(255,255,255,.16));
}
.spark{
  position:absolute; fill:#fff; opacity:.9;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.85));
  animation:twinkle 3.4s var(--ease) infinite;
}
.spark--a{ width:clamp(14px,2.4vw,30px); left:2%;  top:-6%; }
.spark--b{ width:clamp(10px,1.7vw,22px); left:47%; top:-14%; animation-delay:1.3s; }
@keyframes twinkle{
  0%,100%{ opacity:.25; transform:scale(.75) rotate(0deg); }
  50%    { opacity:1;   transform:scale(1) rotate(20deg); }
}

.tagline{
  font-family:var(--script);
  font-size:clamp(1.9rem,5vw,4rem);
  line-height:1.1; color:var(--cherry);
  margin:0 0 clamp(1.8rem,4vw,2.8rem);
  text-shadow:0 0 34px rgba(192,17,40,.55);
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:clamp(2.4rem,6vw,4.5rem); }

.hero__single-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.1rem,4.6vw,3.4rem);
  letter-spacing:.2em; color:var(--cherry);
  margin:.15em 0 .1em; line-height:1;
}

.hero__scroll{
  position:absolute; right:var(--pad); bottom:2.2rem;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-size:.6rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); text-align:center; line-height:1.6;
}
.hero__scroll svg{
  width:16px; height:26px; fill:none;
  stroke:var(--cherry); stroke-width:1.4;
  animation:bob 2.2s var(--ease) infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.55; } 50%{ transform:translateY(7px); opacity:1; } }

/* ───────────────────────────────────────────────────────────── bands */

.band{ max-width:var(--maxw); margin-inline:auto; }

.band--split{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
}
.band--split > .panel + .panel{ border-left:1px solid var(--line); }
.band--tourgal{ grid-template-columns:minmax(0,.68fr) minmax(0,1fr); }

.panel{ padding:clamp(2.6rem,5.5vw,5rem) var(--pad); background:var(--panel); }
.panel--about{ background:var(--panel-2); }

.band--pad{
  padding:clamp(3.2rem,7vw,6.5rem) var(--pad);
  border-top:1px solid var(--line);
}

/* ───────────────────────────────────────────────────────────── music */

.release{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.2rem,3vw,2.4rem); align-items:center; }

/* the sleeve takes 78% of the column; the record peeks into the rest, so it can
   never reach the tracklist no matter how the column resizes */
.release__art{ position:relative; padding-right:22%; }
.release__art img{
  position:relative; z-index:2; width:100%;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 50px rgba(0,0,0,.7);
}

/* vinyl drawn in CSS — the mockup crop was 66px wide and unusable.
   Sized off the sleeve height and hung just past its right edge, so it stays
   inside the column gap and never reaches the tracklist. */
.vinyl{
  position:absolute; z-index:1;
  top:50%; right:0;
  height:92%; width:auto; aspect-ratio:1; border-radius:50%;
  transform:translateY(-50%);
  background:
    repeating-radial-gradient(circle at 50% 50%,
      #141313 0 1px, #201d1e 1px 2px, #0b0a0a 2px 3.4px),
    radial-gradient(circle at 68% 26%, rgba(255,255,255,.22), transparent 42%),
    radial-gradient(circle at 30% 74%, rgba(192,17,40,.16), transparent 44%),
    #0a0909;
  box-shadow:0 14px 40px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.1);
  transition:transform 1.1s var(--ease);
}
.release:hover .vinyl{ transform:translateY(-50%) translateX(7%) rotate(22deg); }
.vinyl__label{
  position:absolute; inset:35%; border-radius:50%;
  background:radial-gradient(circle at 40% 34%, #c9c4c6, #7d7679 62%, #4a4547);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);
}
.vinyl__label::after{
  content:""; position:absolute; inset:44%;
  border-radius:50%; background:#0a0909;
}

.release__meta{ position:relative; z-index:3; }
.release__title{
  font-family:var(--serif); font-size:clamp(1.5rem,2.6vw,2.1rem);
  letter-spacing:.24em; color:var(--cherry); margin:0;
}
.release__artist{
  font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--text); margin:.25rem 0 1.5rem;
}

.tracks{ list-style:none; margin:0 0 1.8rem; padding:0; counter-reset:t; }
.tracks li{
  counter-increment:t;
  display:flex; gap:.85rem; align-items:baseline;
  padding:.5rem 0; border-bottom:1px solid var(--line);
  font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); transition:color .3s var(--ease);
}
.tracks li::before{ content:counter(t) "."; color:var(--dim); flex:none; }
.tracks li:hover{ color:#fff; }

/* ───────────────────────────────────────────────────────────── about */

.about{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(1.2rem,3vw,2.4rem); align-items:center; }
.about__text p{ color:var(--muted); }
.quote{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1rem,1.5vw,1.2rem);
  color:var(--cherry); margin-bottom:1.4rem;
}
.about__photo{ margin:0; }
.about__photo img{
  width:100%; border:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 46px rgba(0,0,0,.65);
}

/* ──────────────────────────────────────────────────────────── videos */

.videos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); }
.vid a{ display:block; position:relative; }
.vid__shot{
  display:block; position:relative; overflow:hidden;
  aspect-ratio:16/10; border:1px solid var(--line);
}
.vid__shot img{
  width:100%; height:100%; object-fit:cover; object-position:50% 26%;
  filter:grayscale(.35) contrast(1.05);
  transition:transform .8s var(--ease), filter .5s var(--ease);
}
.vid a:hover .vid__shot img{ transform:scale(1.06); filter:grayscale(0) contrast(1.1); }

.vid__play{
  position:absolute; top:calc(50% - 1.6rem); left:50%;
  transform:translate(-50%,-50%);
  width:3.4rem; height:3.4rem; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(192,17,40,.85);
  transition:.4s var(--ease);
}
.vid__play svg{ width:1.2rem; height:1.2rem; fill:#fff; margin-left:2px; }
.vid a:hover .vid__play{ background:var(--cherry-lit); box-shadow:0 0 34px var(--glow); }

.vid__meta{ display:block; padding-top:1rem; }
.vid__meta strong{
  display:block; font-weight:400;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:#f2eeef;
}
.vid__meta em{
  font-style:normal; font-size:.64rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--dim);
}

/* ────────────────────────────────────────────────────────────── tour */

/* the gallery beside it is taller, so the date rows share out the slack
   instead of leaving the column half empty */
#tour{ display:flex; flex-direction:column; }
.tour{ list-style:none; margin:0 0 2rem; padding:0; flex:1; display:flex; flex-direction:column; }
.tour li{
  display:flex; align-items:center; gap:1rem;
  flex:1; min-height:3.2rem;
  padding:.95rem 0; border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--ease);
}
.tour li:hover{ padding-left:.5rem; }
.tour__city{
  flex:1; font-size:.76rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text);
}
.tour__date{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cherry); border-bottom:1px solid var(--line-warm);
}

/* ─────────────────────────────────────────────────────────── gallery */

.grid-gal{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.6rem;
}
.tile{
  padding:0; border:0; background:none; cursor:pointer;
  overflow:hidden; position:relative; aspect-ratio:4/5;
}
.tile img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease), filter .5s var(--ease); }
.tile::after{
  content:""; position:absolute; inset:0;
  background:rgba(192,17,40,0); transition:background .4s var(--ease);
}
.tile:hover img{ transform:scale(1.07); }
.tile:hover::after{ background:rgba(192,17,40,.14); }

/* ───────────────────────────────────────────────────────────── store */

.shop{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap); align-items:start; }
.prod{ text-align:center; }
/* flex, not grid: max-height:100% on the image is what keeps every shot box a
   true square regardless of the product's own aspect ratio */
.prod__shot{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:1; padding:1.2rem; overflow:hidden;
  background:linear-gradient(180deg, #100d0e, #080707);
  border:1px solid var(--line);
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.prod__shot img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain;
  transition:transform .6s var(--ease);
}
.prod:hover .prod__shot{ border-color:var(--line-warm); box-shadow:0 0 40px rgba(192,17,40,.14); }
.prod:hover .prod__shot img{ transform:scale(1.06); }
.prod h3{
  margin:1rem 0 .2rem; font-family:var(--sans); font-weight:400;
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--text);
}
.prod__price{ font-size:.72rem; letter-spacing:.16em; color:var(--cherry); margin:0; }
.shop__cta{ text-align:center; margin-top:clamp(2rem,4vw,3rem); }

/* ─────────────────────────────────────────────────────── cherry club */

.club{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center; gap:clamp(1.5rem,4vw,3.5rem);
  padding:clamp(2.4rem,5vw,4rem) var(--pad);
  max-width:var(--maxw); margin-inline:auto;
  background:var(--panel-2);
  border-top:1px solid var(--line);
  overflow:hidden;
}
.club__cherry{ width:clamp(70px,9vw,132px); }
.club__copy p{ color:var(--muted); }
.club__copy .h-sec{ margin-bottom:1rem; }

.club__form{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
.club__form input{
  flex:1 1 15rem; min-width:0;
  padding:.85rem 1.1rem;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.16);
  border-radius:2px; color:var(--text);
  font-family:var(--sans); font-size:.78rem; letter-spacing:.12em;
  transition:border-color .3s var(--ease);
}
.club__form input::placeholder{ color:var(--dim); text-transform:uppercase; letter-spacing:.2em; font-size:.68rem; }
.club__form input:focus{ border-color:var(--cherry); outline:none; }
.club__note{
  flex:1 1 100%; margin:.2rem 0 0; min-height:1.2em;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cherry-lit);
}

.club__sig{
  font-family:var(--script); font-size:clamp(2rem,4.5vw,3.6rem);
  color:var(--cherry); margin:0; line-height:1;
  text-shadow:0 0 30px rgba(192,17,40,.5);
}
.club__lips{ width:clamp(120px,17vw,250px); }

/* ─────────────────────────────────────────────────────────── contact */

.contact{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); text-align:center; }
.contact__mail{
  display:inline-block; margin-top:.7rem;
  font-family:var(--serif); font-size:clamp(.95rem,1.5vw,1.2rem);
  color:#f2eeef; border-bottom:1px solid var(--line-warm);
  padding-bottom:.25rem; transition:color .3s var(--ease);
}
.contact__mail:hover{ color:var(--cherry-lit); }
.contact__handles{ margin-top:.7rem; display:grid; gap:.35rem; }
.contact__handles a{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); transition:color .3s var(--ease);
}
.contact__handles a:hover{ color:var(--cherry-lit); }

/* ──────────────────────────────────────────────────────────── footer */

.foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--gap);
  max-width:var(--maxw); margin-inline:auto;
  padding:1.8rem var(--pad);
  border-top:1px solid var(--line);
}
.foot__mark{
  display:flex; align-items:center;
  font-family:var(--serif); font-size:.9rem; letter-spacing:.4em; color:var(--cherry);
}
.foot__links{ display:flex; gap:1.8rem; margin-inline:auto; }
.foot__links a{
  font-size:.64rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); transition:color .3s var(--ease);
}
.foot__links a:hover{ color:#fff; }
.foot__copy{ margin:0; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }

/* ───────────────────────────────────────────────────────── lightbox */

.lb{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center; padding:var(--pad);
  background:rgba(4,3,4,.94); backdrop-filter:blur(8px);
  animation:fade .3s var(--ease);
}
.lb[hidden]{ display:none; }
.lb img{ max-width:min(100%,900px); max-height:88vh; object-fit:contain; border:1px solid var(--line); }
.lb__x{
  position:absolute; top:1.2rem; right:1.6rem;
  background:none; border:0; color:var(--text);
  font-size:2.4rem; line-height:1; cursor:pointer;
  transition:color .3s var(--ease);
}
.lb__x:hover{ color:var(--cherry-lit); }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }

/* ────────────────────────────────────────────── reveal on scroll */

.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; }
  .spark,.hero__scroll svg{ animation:none; }
}

/* ═══════════════════════════════════════════════════════ responsive */

@media (max-width:1080px){
  .nav__links{ gap:.9rem; }
  .nav__links a{ font-size:.6rem; letter-spacing:.16em; }
  .videos{ gap:1.2rem; }
}

@media (max-width:900px){
  .nav__in{ gap:1rem; }
  .nav__burger{ display:flex; order:3; }
  .nav__social{ order:2; margin-left:auto; }
  .nav__links{
    position:fixed; inset:0 0 auto; top:100%;
    flex-direction:column; align-items:center; gap:0;
    margin:0; padding:1rem 0 2rem;
    background:rgba(6,5,6,.97); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden;
    transition:max-height .45s var(--ease), padding .45s var(--ease);
  }
  .nav__links.is-open{ max-height:70vh; }
  .nav__links a{ padding:.85rem 0; font-size:.78rem; letter-spacing:.24em; }

  .hero{ grid-template-columns:1fr; min-height:auto; }
  .hero__photo{ position:relative; inset:auto; order:2; aspect-ratio:4/5; }
  .hero__photo::after{
    background:
      linear-gradient(0deg, var(--black) 0%, rgba(6,5,6,0) 42%),
      linear-gradient(180deg, var(--black) 0%, rgba(6,5,6,0) 26%);
  }
  .hero__copy{ order:1; padding:7rem var(--pad) 2.5rem; max-width:none; }
  .hero__scroll{ display:none; }

  .band--split,.band--tourgal{ grid-template-columns:1fr; }
  .band--split > .panel + .panel{ border-left:0; border-top:1px solid var(--line); }

  .videos{ grid-template-columns:1fr; }
  .shop{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .contact{ grid-template-columns:1fr; gap:2rem; }

  .club{ grid-template-columns:auto minmax(0,1fr); }
  .club__sig{ grid-column:1; }
  .club__lips{ grid-column:2; justify-self:end; }
}

@media (max-width:560px){
  /* wordmark + 5 icons + burger overflow a phone width; the icons are already
     repeated in the Contact section, so drop them from the bar */
  .nav__social{ display:none; }
  .nav__burger{ margin-left:auto; }
  .release,.about{ grid-template-columns:1fr; }
  .release__art{ max-width:20rem; margin-inline:auto; }
  .about__photo{ max-width:20rem; margin-inline:auto; }
  .grid-gal{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .shop{ grid-template-columns:1fr; }
  .club{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .club__sig,.club__lips{ grid-column:1; justify-self:center; }
  .h-sec{ justify-content:center; }
  .club__form{ justify-content:center; }
  .foot{ justify-content:center; text-align:center; }
  .foot__links{ margin-inline:0; }
}