/* ==================================================================
   DiamondStar
   Dark, flat, typographic. No panels, no glass, no drop shadows.
   Structure comes from hairlines, space and side-by-side columns.
   ================================================================== */

:root{
  --ground:#0a0b0e;
  --ink:#eceae6;
  --muted:rgba(236,234,230,0.64);
  /* 0.52 keeps this quiet while clearing WCAG AA at 4.9:1. At the old
     0.40 it measured 3.34:1, which fails for text this size. */
  --faint:rgba(236,234,230,0.52);
  --rule:rgba(236,234,230,0.14);
  --rule2:rgba(236,234,230,0.08);

  /* Both pulled from the Be Strong script, which runs warm to cool. */
  --amber:#e9a76a;
  --lilac:#b9a6d4;

  /* Artwork treatment. The corners are deliberately uneven: one soft, the
     rest nearly square, so covers read as objects rather than tiles. */
  --art-radius:4px 4px 22px 4px;
  --art-shadow:0 28px 64px rgba(0,0,0,.62), 0 6px 18px rgba(0,0,0,.45);

  --max:1280px;
  --f:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Faint film grain. Sits above the background, below everything else. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

.wrap{
  position:relative;
  z-index:1;
  display:block;
  max-width:var(--max);
  margin:0 auto;
  padding:0 34px;
}

.kicker{
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:700;
  margin:0;
}

.skipLink{
  position:absolute;
  top:10px;
  left:10px;
  z-index:9999;
  padding:10px 14px;
  background:var(--ground);
  border:1px solid var(--rule);
  color:var(--ink);
  font-size:12px;
  transform:translateY(-160%);
  transition:transform .12s ease;
}
.skipLink:focus{ transform:translateY(0); }

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */

/*
 * Overlaid on the hero rather than stacked above it, so the translucency
 * actually shows the artwork through. A gradient instead of a flat panel
 * keeps the nav legible over bright covers without drawing a hard edge
 * across the image.
 */
.siteHeader{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:5;
  background:linear-gradient(180deg, rgba(10,11,14,.82) 0%, rgba(10,11,14,.42) 60%, transparent 100%);
}

.hIn{
  max-width:var(--max);
  margin:0 auto;
  padding:12px 34px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

/* Sized by width with height following, so if the header runs short of
   room the logo scales down whole instead of being squeezed narrower. */
.hIn > a:first-child{ flex:0 1 auto; min-width:0; }
.brandLogo{
  display:block;
  width:196px;
  max-width:100%;
  height:auto;
}

.headerNav{
  display:flex;
  gap:24px;
  align-items:center;
  flex-wrap:wrap;
}

.navLink{
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.navLink:hover{ color:var(--ink); border-bottom-color:var(--amber); }
.navEmphasis{ color:var(--amber); }

/* Menu button. Hidden until the nav would start wrapping. */
.navToggle{
  display:none;
  align-items:center;
  gap:9px;
  background:none;
  border:0;
  padding:6px 0;
  cursor:pointer;
  color:var(--muted);
  font-family:inherit;
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  transition:color .15s ease;
}
.navToggle:hover{ color:var(--ink); }
.navToggleBars{ display:block; width:20px; }
.navToggleBars span{
  display:block;
  height:1.6px;
  background:currentColor;
  border-radius:2px;
  margin:4px 0;
}
.navToggle[aria-expanded="true"]{ color:var(--amber); }

/* ------------------------------------------------------------------ */
/* Hero: full bleed, content over the image                            */
/* ------------------------------------------------------------------ */

.hero{
  position:relative;
  z-index:1;
  width:100vw;
  margin-left:calc(50% - 50vw);
  min-height:clamp(500px,72vh,700px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}

.hero .bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 58%;
}

.veil{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(10,11,14,.90) 0%, rgba(10,11,14,.66) 42%, rgba(10,11,14,.16) 78%, rgba(10,11,14,.40) 100%),
    linear-gradient(0deg,  rgba(10,11,14,.92) 0%, rgba(10,11,14,.20) 46%, transparent 70%);
}

.heroInner{
  position:relative;
  max-width:var(--max);
  margin:0 auto;
  padding:120px 34px 56px;
  width:100%;
}

/* With an upcoming release, the cover fills what was dead space on the
   right and gives the hero something to balance against. */
.heroInner.withArt{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(300px,32vw,460px);
  gap:clamp(36px,5vw,72px);
  align-items:center;
}
.heroArt img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:var(--art-radius);
  box-shadow:var(--art-shadow);
}

/*
 * Home page: the background carries on past the bottom of the hero and
 * fades into the page behind the Releases section, so there is no hard
 * edge where the hero ends. The main content paints over the overflow.
 */
.homeHero{ overflow:visible; }
.homeHero .bg,
.homeHero .veil{
  bottom:auto;
  height:calc(100% + 420px);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 calc(100% - 640px), transparent 100%);
          mask-image:linear-gradient(180deg, #000 0%, #000 calc(100% - 640px), transparent 100%);
}
/* Only the side darkening for the text; the mask does the fade at the
   bottom, so the old bottom band would just draw the edge back in. */
.homeHero .veil{
  background:
    linear-gradient(90deg, rgba(10,11,14,.90) 0%, rgba(10,11,14,.66) 42%, rgba(10,11,14,.16) 78%, rgba(10,11,14,.40) 100%),
    linear-gradient(180deg, rgba(10,11,14,.35) 0%, transparent 22%);
}

/* The cut-out photo stands taller than the cover did and runs down behind
   the Releases heading, where its own soft bottom edge fades it out. */
/* A wider column than the cover had, so the group fills the right side.
   Tablets keep the narrower column from the 1000px rule below. */
@media (min-width:1001px){
  .homeHero .heroInner.withArt:has(.heroPeople){
    grid-template-columns:minmax(500px,1fr) clamp(360px,40vw,640px);
    gap:clamp(24px,3vw,48px);
  }
}
.homeHero .hLinks{ column-gap:22px; }

/* The one solid button on the page, so it reads as the main action. */
.btn{
  display:inline-block;
  margin:0 0 28px;
  padding:15px 26px 14px;
  background:var(--amber);
  color:var(--ground);
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  border-radius:3px 3px 14px 3px;
  box-shadow:0 10px 30px -12px rgba(233,167,106,.55);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover{
  background:#f3bd88;
  transform:translateY(-1px);
  box-shadow:0 14px 34px -12px rgba(233,167,106,.7);
}
.btn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.heroPeople{
  align-self:end;
  margin:-120px 0 -350px;
  pointer-events:none;
}
.heroPeople img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  border-radius:0;
  box-shadow:none;
}

.comingSoon{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:22px;
}
.comingSoon .pulse{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 0 4px rgba(233,167,106,.18);
}
.comingSoon .kicker{ color:var(--amber); }

/* The album's own script logo, used in place of set type. */
.heroScript{
  display:block;
  height:auto;
  width:clamp(280px,34vw,430px);
  margin:0 0 8px -6px;
}

/* Typed fallback, for when the hero is a normal release. */
.heroTitle{
  font-size:clamp(36px,6vw,74px);
  font-weight:800;
  font-stretch:92%;
  line-height:.95;
  letter-spacing:-.025em;
  text-transform:uppercase;
  margin:0 0 16px;
  max-width:15ch;
}

/* One line on the record itself, between the title and the intro. */
.heroTagline{
  margin:2px 0 22px;
  font-size:clamp(15px,1.5vw,18px);
  line-height:1.45;
  color:rgba(236,234,230,0.88);
  font-weight:500;
  max-width:34ch;
}

.heroBlurb{
  margin:0 0 30px;
  color:var(--muted);
  font-size:14px;
  line-height:1.75;
  max-width:50ch;
}

.hLinks{ display:flex; gap:26px; flex-wrap:wrap; }

.lk{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  padding-bottom:5px;
  border-bottom:1px solid var(--rule);
  color:var(--muted);
  transition:color .15s ease, border-color .15s ease;
}
.lk:hover{ color:var(--ink); border-bottom-color:var(--ink); }
.lk.g{ color:var(--amber); border-bottom-color:var(--amber); }

/* ------------------------------------------------------------------ */
/* Section heads: label, rule, optional caption. No boxes.             */
/* ------------------------------------------------------------------ */

.sh{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:26px;
}
.sh .kicker{ color:var(--faint); white-space:nowrap; }
.sh .r{ flex:1; height:1px; background:var(--rule); }

/* The gold separator from the artwork, used once, in the Releases head,
   where it marks the start of the catalogue. Drawn in CSS from the icon's
   star so it stays sharp at any width. */
.shStar .r{
  position:relative;
  height:20px;
  background:linear-gradient(90deg,
      transparent 0%, rgba(208,166,99,.30) 8%,
      rgba(214,174,110,.85) 50%,
      rgba(208,166,99,.30) 92%, transparent 100%)
    center/100% 1px no-repeat;
}
.shStar .r::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:19px;
  height:19px;
  transform:translate(-50%,-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23d0a663' fill-rule='evenodd' d='M256 74C266 211 283 241 426 256C283 271 266 301 256 438C246 301 229 271 86 256C229 241 246 211 256 74Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.shLink{
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--muted);
  white-space:nowrap;
  transition:color .15s ease;
}
.shLink:hover{ color:var(--amber); }

/* ------------------------------------------------------------------ */
/* Releases: a row of albums, then a grid of singles                  */
/* ------------------------------------------------------------------ */

.releases{ padding:48px 0 0; }

/* A row of album squares over a tighter grid of singles. Side by side left
   the albums column running far longer than the singles beside it. */
.rowLabel{
  margin:0 0 16px;
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--faint);
}

.albumRow{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,2.6vw,38px);
  margin-bottom:60px;
}
.albumRow img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--art-radius); transition:opacity .22s ease; }

.singles{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:30px 24px;
}
/* Square, matching the albums. The distributor supplies square art for
   every release; forcing it into 16:9 either bakes in pillarbox bars or
   crops the wordmark off the top and the title off the bottom. */
.singles img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--art-radius); transition:opacity .22s ease; }

.card:hover img{ opacity:.78; }

/* Sits below the card as its own link. The card is already a link to the
   release page, and a link inside a link is invalid and trips up screen
   readers. */
.cardBuy{
  display:inline-block;
  margin-top:12px;
  padding-bottom:4px;
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--amber);
  border-bottom:1px solid var(--amber);
  transition:color .15s ease, border-color .15s ease;
}
.cardBuy:hover{ color:var(--ink); border-bottom-color:var(--ink); }

/* The pre-order price, under the card's link and beside the one in the
   Merch row. Quiet: the link is the thing to click, this is the reason. */
.cardNote,
.cdNote{
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--faint);
}
.cardNote{ margin:8px 0 0; }
.ct{
  font-size:14.5px;
  font-weight:600;
  line-height:1.25;
  margin:11px 0 5px;
  transition:color .15s ease;
}
.card:hover .ct{ color:var(--amber); }
.cm{
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint);
  margin:0;
  font-weight:600;
}
.soonInline{ color:var(--amber); }

/* ------------------------------------------------------------------ */
/* Band: featured video beside the project text                        */
/* ------------------------------------------------------------------ */

.band{
  padding:70px 0 0;
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:52px;
  align-items:start;
}

.videoRatio{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#111;
}
.videoRatio iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.about p{
  color:var(--muted);
  font-size:13.5px;
  line-height:1.75;
  margin:0 0 14px;
}
.about img{ width:100%; height:auto; margin-bottom:18px; border-radius:var(--art-radius); }
.note{
  border-left:2px solid var(--amber);
  padding-left:16px;
  color:var(--ink) !important;
}

/* ------------------------------------------------------------------ */
/* Merch                                                               */
/* ------------------------------------------------------------------ */

.merch{ padding:70px 0 0; }

.merchGrid{
  display:grid;
  grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(32px,5vw,64px);
  align-items:center;
}

/* Shown as a product card: rounded and lifted off the dark page. */
.merchArt img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:var(--art-radius);
  box-shadow:var(--art-shadow);
  transition:transform .25s ease;
}
.merchArt:hover img{ transform:translateY(-3px); }

.merchHeading{
  margin:0 0 14px;
  font-size:clamp(30px,4vw,48px);
  font-weight:800;
  font-stretch:92%;
  line-height:.98;
  letter-spacing:-.025em;
  text-transform:uppercase;
}

.merchCds{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:12px 22px;
  margin-top:34px;
  padding-top:22px;
  border-top:1px solid var(--rule2);
}
.merchCds .kicker{ color:var(--faint); }

.merchText{
  margin:0 0 28px;
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
  max-width:42ch;
}

/* ------------------------------------------------------------------ */
/* Listen: icons kept, buttons gone                                    */
/* ------------------------------------------------------------------ */

.listen{ padding:70px 0 0; }

/* Service buttons under the hero links: the badge people look for, with
   its name beside it. Outlined, so the one solid button on the site stays
   the merch call to action. */
.svcRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.svcBtn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 15px 9px 11px;
  border:1px solid var(--rule);
  border-radius:3px 3px 12px 3px;
  background:rgba(10,11,14,.42);
  color:var(--muted);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:color .15s ease, border-color .15s ease, transform .15s ease;
}
.svcBtn img{ width:20px; height:20px; border-radius:4px; object-fit:cover; }
.svcBtn:hover{
  color:var(--ink);
  border-color:var(--amber);
  transform:translateY(-1px);
}
.svcBtn:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }

/* On a release page this is the main way out to the services, so the rows
   are roomier than the compact strip on the home page. */
.relListen .plat{ padding:16px 0; }
.relListen .plat img{ width:34px; height:34px; }
.relListen .plat b{ font-size:14.5px; }

.strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:2px 30px;
  border-top:1px solid var(--rule);
  padding-top:14px;
}

.plat{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 0;
  transition:opacity .15s ease;
}
.plat:hover{ opacity:.72; }
.plat img{ width:26px; height:26px; object-fit:cover; border-radius:5px; flex:0 0 auto; }
.plat b{ display:block; font-size:13.5px; font-weight:600; }
.plat i{
  display:block;
  font-style:normal;
  font-size:9.5px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--faint);
  margin-top:3px;
  font-weight:600;
}

/* ------------------------------------------------------------------ */
/* Social                                                              */
/* ------------------------------------------------------------------ */

/* Compact icon row in the header, on every page. */
.socialRow{
  display:flex;
  align-items:center;
  gap:14px;
}

.socialLink{
  display:block;
  color:var(--muted);
  transition:color .15s ease, transform .15s ease;
}
.socialLink svg{ width:20px; height:20px; display:block; }
.socialLink:hover{ color:var(--amber); transform:translateY(-1px); }

/* Labelled row under Listen, for people actually looking to follow. */
.followSec{ padding:56px 0 0; }

.followRow{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:2px 30px;
  border-top:1px solid var(--rule);
  padding-top:14px;
}

.follow{
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px 0;
  color:var(--ink);
  transition:color .15s ease;
}
.follow svg{ width:26px; height:26px; flex:0 0 auto; color:var(--muted); transition:color .15s ease; }
.follow span{ font-size:14px; font-weight:600; }
.follow:hover{ color:var(--amber); }
.follow:hover svg{ color:var(--amber); }

/* ------------------------------------------------------------------ */
/* Release pages                                                       */
/* ------------------------------------------------------------------ */

/*
 * The cover does double duty: sharp on the right, and blurred hard behind
 * everything as the page's colour. Blurring matters. Unblurred it would be
 * the same picture twice, one of them badly cropped, since a square cover
 * in a wide band loses the wordmark off the top and the title off the
 * bottom. Blurred, it reads as the record's palette instead.
 */
.relHero{ min-height:clamp(420px,54vh,560px); }

.relHero .bg{
  transform:scale(1.15);
  /* Scaled well past the frame on purpose. At natural size a light blur
     just looks like a soft copy of the cover sitting beside it; zoomed in
     this far you get one region of the artwork, which reads as texture and
     colour instead. Brightness stays near normal because pulling it down
     was what made the whole thing look black on darker covers. */
  /* Light touch: enough softening that text stays readable over it, but
     the artwork is still legible as a picture. */
  object-position:center;
  filter:blur(5px) saturate(1.2) brightness(.9);
  opacity:.92;
}

/*
 * Heavy on the left where the text sits, clearing to nothing across the
 * middle so the colour actually reads. The vertical pass must reach
 * transparent, or it dims the whole band and the artwork disappears.
 */
.relHero .veil{
  background:
    linear-gradient(90deg, rgba(10,11,14,.93) 0%, rgba(10,11,14,.80) 32%, rgba(10,11,14,.34) 62%, rgba(10,11,14,.20) 100%),
    linear-gradient(0deg,  rgba(10,11,14,.78) 0%, transparent 46%),
    linear-gradient(180deg, rgba(10,11,14,.70) 0%, transparent 34%);
}

.relHero .heroInner{ padding-top:124px; padding-bottom:54px; }

.relTitle{
  margin:14px 0 12px;
  font-size:clamp(30px,4.6vw,60px);
  max-width:18ch;
}

.relMeta{
  margin:0 0 28px;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:600;
}

.relWatch{ padding:54px 0 0; }

.tracks{ padding:64px 0 0; }

/*
 * Column flow, not grid. A two-column grid fills across, so a 13 track
 * album reads 1,2 / 3,4 / 5,6 and the numbers zigzag. Columns run the list
 * down the first before starting the second, which is how a sleeve reads:
 * 1 to 7 on the left, 8 to 13 on the right.
 */
.trackList{
  list-style:none;
  margin:0;
  padding:0;
  columns:2;
  column-gap:46px;
}
.trackList.oneCol{ columns:1; }
.trackItem{ break-inside:avoid; }

.trackItem a{
  display:flex;
  align-items:center;
  gap:16px;
  padding:13px 0;
  border-bottom:1px solid var(--rule2);
  transition:color .15s ease;
}
.trackItem a:hover{ color:var(--amber); }

.trackNum{
  flex:0 0 auto;
  width:24px;
  text-align:right;
  color:var(--faint);
  font-size:11px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.trackName{
  flex:1 1 auto;
  min-width:0;
  font-size:14px;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.trackPlay{
  flex:0 0 auto;
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint);
  font-weight:700;
}

.backLink{
  display:inline-block;
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--muted);
  transition:color .15s ease;
}
.backLink:hover{ color:var(--amber); }

.notFound{ padding:170px 0 60px; }
.notFound h1{
  font-size:clamp(28px,4vw,46px);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.02em;
  margin:0 0 14px;
}
.notFound p{ color:var(--muted); font-size:15px; line-height:1.7; margin:0 0 26px; max-width:52ch; }

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

.siteFooter{
  margin-top:64px;
  border-top:1px solid var(--rule);
  padding:24px 0 54px;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint);
  display:flex;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  font-weight:600;
}
.siteFooter a:hover{ color:var(--amber); }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

/*
 * The nav collapses at 960, not at the phone breakpoint. With five links
 * plus four social icons, "Our Process" starts wrapping to a second line
 * well before tablet width.
 */
@media (max-width:960px){
  .navToggle{ display:flex; }

  .headerNav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:4px 34px 16px;
    background:var(--ground);
    border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);
  }
  .headerNav.open{ display:flex; }

  .navLink{
    padding:15px 2px;
    font-size:12px;
    border-bottom:1px solid var(--rule2);
  }
  .navLink:last-child{ border-bottom:0; }
  .navLink:hover{ color:var(--amber); border-bottom-color:var(--rule2); }
}

@media (max-width:1000px){
  .band{ grid-template-columns:1fr; gap:40px; }
  .merchGrid{ grid-template-columns:minmax(0,260px) minmax(0,1fr); }
  .albumRow{ gap:24px; margin-bottom:44px; }
  .heroInner.withArt{ grid-template-columns:minmax(0,1fr) 280px; gap:36px; }

  /* Singles hold four across on tablets; they only drop to two on phones. */
  .singles{ gap:24px 18px; }
  .strip{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .followRow{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trackList{ columns:1; }
}

@media (max-width:700px){
  .wrap, .hIn, .heroInner{ padding-left:20px; padding-right:20px; }
  .hIn{ gap:16px; }
  .socialRow{ gap:16px; }
  .hero{ min-height:auto; }
  .heroInner.withArt{ grid-template-columns:1fr; gap:32px; }
  .headerNav{ padding-left:20px; padding-right:20px; }
  .navToggleText{ display:none; }

  /* Stacked, the home page cover lands directly above the albums row where
     the same artwork is the first card, so it reads as a duplicate. Release
     pages keep theirs: it is the only copy on the page. */
  .hero:not(.relHero) .heroArt{ display:none; }
  .relHero .heroArt{ max-width:300px; }

  /* With the cover gone there is nothing on the right to align against, so
     the column sits better centred. Release pages keep their left edge,
     since their cover is still there to line up with. */
  .hero:not(.relHero) .heroInner{ text-align:center; }
  .hero:not(.relHero) .heroScript{ margin:0 auto 10px; }
  .hero:not(.relHero) .heroTitle,
  .hero:not(.relHero) .heroTagline,
  .hero:not(.relHero) .heroBlurb{ margin-left:auto; margin-right:auto; }
  .hero:not(.relHero) .hLinks{ justify-content:center; }
  .heroInner{ padding-top:190px; padding-bottom:42px; }
  .albumRow{ grid-template-columns:1fr; gap:30px; }
  .singles{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 18px; }
  .brandLogo{ width:150px; }
  /* Section captions are decoration; on a phone they push past the edge. */
  .sh .r ~ .kicker{ display:none; }
  .strip{ gap:2px 18px; }
  .plat i{ letter-spacing:.08em; }
  .merchGrid{ grid-template-columns:1fr; }
  .merchArt{ max-width:300px; }
  .followRow{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .siteFooter{ justify-content:center; text-align:center; }
}