/* ==========================================================================
   ASHES - styles
   Mobile first. Every colour and space value comes from variables.css.
   ========================================================================== */

/* ---------- fonts --------------------------------------------------------
   Satoshi, Indian Type Foundry / Fontshare free EULA (commercial web use
   permitted, self-hosted). Licence copy in notes.md. */
@font-face {
  font-family: "Satoshi"; font-style: normal; font-weight: 400;
  src: url("../assets/fonts/Satoshi-Regular.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Satoshi"; font-style: normal; font-weight: 500;
  src: url("../assets/fonts/Satoshi-Medium.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Satoshi"; font-style: normal; font-weight: 700;
  src: url("../assets/fonts/Satoshi-Bold.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Satoshi"; font-style: normal; font-weight: 900;
  src: url("../assets/fonts/Satoshi-Black.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Satoshi"; font-style: italic; font-weight: 900;
  src: url("../assets/fonts/Satoshi-BlackItalic.woff2") format("woff2");
  font-display: swap;
}

/* Sneakers Pro, Neil Summerour / Positype. The band's own display face, the
   one their wordmark is cut from. Supplied by the band, who confirmed they
   hold the licence. Only one weight exists, so it carries display only and
   Satoshi carries everything else. */
@font-face {
  font-family: "Sneakers Pro"; font-style: normal; font-weight: 500;
  src: url("../assets/fonts/SneakersPro-Medium.woff2") format("woff2");
  font-display: swap;
}

/* ---------- reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font);
  font-size: var(--t-base);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg, iframe { display: block; max-width: 100%; }
img, video { height: auto; }

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: inherit; }

ul, ol { list-style: none; padding: 0; }

/* ---------- focus --------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--red-hot);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: var(--s3); top: -100px;
  z-index: var(--z-skip);
  background: var(--red);
  color: var(--on-red);
  padding: var(--s2) var(--s4);
  font-weight: var(--w-black);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  text-decoration: none;
  transition: top var(--fast) var(--ease);
}
.skip-link:focus { top: var(--s3); }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------- layout -------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--s8); }
.band--tight { padding-block: var(--s7); }

@media (min-width: 900px) {
  .band { padding-block: var(--s9); }
  .band--tight { padding-block: var(--s8); }
}

/* ---------- type ---------------------------------------------------------- */
.display {
  font-weight: var(--w-black);
  font-style: italic;
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}

h1, h2, h3, h4 { font-weight: var(--w-black); line-height: var(--lh-heading); }

.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  margin-bottom: var(--s6);
}
.section-head h2 {
  font-size: var(--t-xl);
  font-style: italic;
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  flex: 0 0 auto;
}
/* The rule runs out from the heading and terminates in a leaning red slab cut
   at the wordmark's own oblique. A 3px line cannot express a skew; the slab
   can, so the diagonal reads at every section without shouting. */
.rule {
  position: relative;
  flex: 1 1 auto;
  height: 3px;
  min-width: 3rem;
  margin-right: 1.6rem;
  background: var(--red);
  align-self: center;
}
.rule::after {
  content: "";
  position: absolute;
  right: -1.6rem;
  top: 50%;
  width: 1.15rem;
  height: 1.7rem;
  background: var(--red);
  transform: translateY(-50%) skewX(var(--lean));
}

.lead {
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--bone-2);
  max-width: var(--measure);
}
.body-copy { max-width: var(--measure); color: var(--bone-2); }
.body-copy + .body-copy { margin-top: var(--s3); }

.label {
  font-size: var(--t-xs);
  font-weight: var(--w-black);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--bone-3);
}

/* ---------- buttons ------------------------------------------------------
   Hover fills diagonally on the same lean as the wordmark. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: var(--s2) var(--s5);
  border: 2px solid var(--bone);
  border-radius: var(--radius);
  font-size: var(--t-xs);
  font-weight: var(--w-black);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
  white-space: nowrap;
}
.btn::before {
  content: "";
  position: absolute;
  inset: -2px -30% -2px -30%;
  z-index: -1;
  background: var(--bone);
  transform: skewX(var(--lean)) translateX(-115%);
  transition: transform var(--mid) var(--ease);
}
.btn:hover, .btn:focus-visible { color: var(--ink); }
.btn:hover::before, .btn:focus-visible::before { transform: skewX(var(--lean)) translateX(0); }
.btn:active { transform: translateY(1px); }

.btn--red { border-color: var(--red); background: var(--red); color: var(--on-red); }
.btn--red::before { background: var(--bone); }
.btn--red:hover, .btn--red:focus-visible { color: var(--ink); border-color: var(--bone); }

.btn--ghost { border-color: var(--line-strong); color: var(--bone); }
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--bone); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

/* text link with a red underline that wipes in */
.tlink {
  display: inline-block;
  color: var(--bone);
  text-decoration: none;
  font-weight: var(--w-medium);
  background-image: linear-gradient(var(--red-hot), var(--red-hot));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  transition: background-size var(--fast) var(--ease);
  padding-bottom: 2px;
}
.tlink:hover, .tlink:focus-visible { background-size: 100% 100%; color: var(--ink); }

/* ---------- header --------------------------------------------------------
   The sentinel is a real 70px-tall strip pinned to the top of the document.
   main.js watches it: while any of it is on screen the header is transparent
   over the hero; once it scrolls away the header goes solid. A zero-height
   marker cannot do this job, it never intersects. */
#top-sentinel {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 70px;
  pointer-events: none;
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  height: 68px;
  padding-inline: var(--gutter);
  background: transparent;
  transition: background var(--mid) var(--ease), border-color var(--mid) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(10, 10, 10, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}

/* The hero already carries the wordmark at full size, so the header mark stays
   out of the way until the hero has scrolled off. It keeps its box and its
   place in the tab order the whole time, and focus brings it straight back.

   Hiding it is opt-in: main.js adds .js-hero once it has a sentinel to watch.
   With JavaScript off the mark simply stays visible, which is the correct
   fallback for a link that goes home. */
.brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  line-height: 0;
  flex: 0 0 auto;
  transition: opacity var(--mid) var(--ease);
}
.brand img { width: 118px; height: auto; }
.site-header.js-hero .brand { opacity: 0; }
.site-header.js-hero.is-stuck .brand,
.site-header.js-hero .brand:focus-visible { opacity: 1; }

.nav-desktop { display: none; }
.nav-desktop a {
  position: relative;
  font-size: var(--t-xs);
  font-weight: var(--w-black);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  text-decoration: none;
  padding-block: var(--s2);
  color: var(--bone);
}
.nav-desktop a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  background: var(--red);
  transform: skewX(var(--lean)) scaleX(0);
  transform-origin: left;
  transition: transform var(--fast) var(--ease);
}
.nav-desktop a:hover::after,
.nav-desktop a:focus-visible::after,
.nav-desktop a[aria-current="page"]::after { transform: skewX(var(--lean)) scaleX(1); }

.menu-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px; height: 48px;
  align-items: flex-end;
  padding: 0;
  flex: 0 0 auto;
}
.menu-btn span {
  display: block;
  width: 26px; height: 2px;
  background: var(--bone);
  transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.menu-btn span:nth-child(2) { width: 18px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(-11deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { width: 26px; transform: translateY(-7px) rotate(11deg); }

/* Desktop swap. Declared after both rules so source order cannot undo it. */
@media (min-width: 940px) {
  .nav-desktop { display: flex; align-items: center; gap: var(--s5); }
  .menu-btn { display: none; }
}

/* mobile drawer */
.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s2);
  padding: 6rem var(--gutter) var(--s7);
  background: var(--ink);
  overflow-y: auto;
}
.nav-mobile[hidden] { display: none; }
.nav-mobile a {
  font-size: clamp(2rem, 11vw, 3.25rem);
  font-weight: var(--w-black);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  line-height: 1.12;
  text-decoration: none;
  padding-block: var(--s1);
  width: max-content;
  max-width: 100%;
}
.nav-mobile a:hover, .nav-mobile a:focus-visible { color: var(--red-hot); }
.nav-mobile .nav-mobile__meta {
  margin-top: var(--s5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}
.nav-mobile .nav-mobile__meta a {
  font-size: var(--t-xs);
  font-style: normal;
  letter-spacing: var(--tr-label);
  color: var(--bone-2);
}

/* ---------- hero ---------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--ink-deep);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.hero__media video { position: absolute; inset: 0; }
/* scrim: keeps the wordmark and copy legible over any frame of the loop */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* pins the lower-left, where the wordmark and buttons sit, dark on every
       frame of the loop including the daylight shots */
    linear-gradient(to top right, rgba(5,5,5,0.95) 0%, rgba(5,5,5,0.72) 26%, rgba(5,5,5,0.10) 62%),
    linear-gradient(to top, rgba(5,5,5,0.92) 0%, rgba(5,5,5,0.55) 30%, rgba(5,5,5,0.18) 58%, rgba(5,5,5,0.45) 100%);
}
.hero__inner {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(3rem, 9vh, 6rem);
}
.hero__mark {
  width: min(100%, 760px);
  height: auto;
  margin-bottom: var(--s4);
}
.hero__line {
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  font-weight: var(--w-medium);
  color: var(--bone);
  max-width: 40ch;
  margin-bottom: var(--s5);
  text-wrap: balance;
}
/* The band's own line gets its own measure so it never breaks mid-phrase. */
.hero__line b {
  display: block;
  font-weight: var(--w-black);
  font-style: italic;
  color: var(--red-hot);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: var(--s2);
  text-wrap: balance;
}

/* Time-based entrance. Pure CSS, runs on load, finishes on its own. It never
   waits on an observer and never depends on JavaScript, so a blocked script or
   a slow network cannot leave the hero blank. */
.hero__mark,
.hero__line,
.hero__cta { animation: rise var(--slow) var(--ease) both; }
.hero__line { animation-delay: 90ms; }
.hero__cta  { animation-delay: 180ms; }
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ---------- live / shows ledger ------------------------------------------- */
.shows { border-top: 1px solid var(--line); }
.show {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s1);
  padding: var(--s4) 0 var(--s4) var(--s4);
  border-bottom: 1px solid var(--line);
  transition: padding-left var(--mid) var(--ease);
}
/* the slab: a leaning red block that grows out of the row's left edge */
.show::before {
  content: "";
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 6px;
  background: var(--red);
  transform: skewX(var(--lean)) scaleY(0);
  transform-origin: center;
  transition: transform var(--mid) var(--ease);
}
.show:hover::before, .show:focus-within::before { transform: skewX(var(--lean)) scaleY(1); }
.show:hover, .show:focus-within { padding-left: var(--s5); }

.show__date {
  font-size: var(--t-xs);
  font-weight: var(--w-black);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--red-hot);
}
.show__city {
  font-size: clamp(1.35rem, 3.6vw, 2rem);
  font-weight: var(--w-black);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  line-height: 1.08;
}
.show__venue { color: var(--bone-2); font-size: var(--t-sm); }
.show__act { margin-top: var(--s2); }

@media (min-width: 800px) {
  .show {
    grid-template-columns: 12rem 1fr auto;
    align-items: center;
    gap: var(--s5);
    padding-block: var(--s5);
  }
  .show__act { margin-top: 0; }
}

/* empty state: honest, and it still gives the visitor something to do */
.shows-empty {
  border: 2px solid var(--line-strong);
  padding: var(--s6) var(--s5);
  display: grid;
  gap: var(--s4);
  justify-items: start;
}
.shows-empty p { color: var(--bone-2); max-width: 46ch; }
.shows-empty strong {
  display: block;
  font-size: var(--t-lg);
  font-weight: var(--w-black);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  color: var(--bone);
  line-height: var(--lh-display);
}

/* ---------- out now / the record ------------------------------------------ */
.record {
  display: grid;
  gap: var(--s6);
  align-items: start;
}
@media (min-width: 940px) {
  .record {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}
.record__art { position: relative; }
.record__art img { width: 100%; height: auto; }
/* leaning flag, same oblique as the mark */
.flag {
  position: absolute;
  left: -0.6rem; top: var(--s4);
  background: var(--red);
  color: var(--on-red);
  padding: var(--s2) var(--s4);
  font-size: var(--t-xs);
  font-weight: var(--w-black);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  transform: skewX(var(--lean));
}
.flag > span { display: block; transform: skewX(calc(var(--lean) * -1)); }

.record__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s4);
  margin-top: var(--s3);
  color: var(--bone-3);
  font-size: var(--t-xs);
  font-weight: var(--w-black);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

.tracks { border-top: 1px solid var(--line); margin-block: var(--s5); }
.track {
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  align-items: baseline;
  gap: var(--s3);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
}
.track__n {
  font-size: var(--t-xs);
  font-weight: var(--w-black);
  color: var(--bone-3);
  font-variant-numeric: tabular-nums;
}
.track__t {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: var(--w-bold);
}
.track__d {
  font-size: var(--t-sm);
  color: var(--bone-3);
  font-variant-numeric: tabular-nums;
}

.player {
  border: 1px solid var(--line);
  background: var(--ink-raise);
}
.player iframe { width: 100%; border: 0; }

/* streaming buttons carry the service's own name, nothing invented */
.streams { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.streams .btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- merch --------------------------------------------------------- */
.merch {
  position: relative;
  overflow: hidden;
  background: var(--ink-deep);
}
.merch__bg { position: absolute; inset: 0; }
.merch__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.merch__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(5,5,5,0.96) 0%, rgba(5,5,5,0.90) 44%, rgba(5,5,5,0.55) 100%);
}
.merch__inner { position: relative; z-index: var(--z-base); }
.merch__panel { max-width: 46rem; }
.merch__panel h2 {
  font-size: var(--t-xl);
  font-style: italic;
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  margin-bottom: var(--s4);
}

/* ---------- video facade -------------------------------------------------- */
.videos { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .videos { grid-template-columns: 1fr; max-width: 1050px; } }

.vfacade {
  border: 1px solid var(--line);
  background: var(--ink-raise);
  overflow: hidden;
}
.vfacade__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  cursor: pointer;
}
.vfacade__thumb { position: relative; display: block; aspect-ratio: 16 / 9; }
.vfacade__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vfacade__thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(5,5,5,0.34);
  transition: background var(--mid) var(--ease);
}
.vfacade__btn:hover .vfacade__thumb::after,
.vfacade__btn:focus-visible .vfacade__thumb::after { background: rgba(5,5,5,0.12); }

/* play control: a skewed slab, not a circle. Radius stays 0 across the site. */
.vfacade__play {
  position: absolute;
  left: 50%; top: 50%;
  z-index: var(--z-raise);
  width: 88px; height: 62px;
  transform: translate(-50%, -50%) skewX(var(--lean));
  background: var(--red);
  display: grid;
  place-items: center;
  transition: transform var(--mid) var(--ease), background var(--mid) var(--ease);
}
.vfacade__btn:hover .vfacade__play,
.vfacade__btn:focus-visible .vfacade__play {
  transform: translate(-50%, -50%) skewX(var(--lean)) scale(1.08);
  background: var(--red-hot);
}
.vfacade__play::before {
  content: "";
  width: 0; height: 0;
  border-left: 20px solid var(--on-red);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  transform: skewX(calc(var(--lean) * -1)) translateX(2px);
}
.vfacade__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s4);
  padding: var(--s4);
}
.vfacade__cap h3 {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: var(--w-black);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
}
.vfacade iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* ---------- the band ------------------------------------------------------ */
.about-grid { display: grid; gap: var(--s6); }
@media (min-width: 940px) {
  .about-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
}
.about-grid img { width: 100%; height: auto; }

.roster { border-top: 1px solid var(--line); margin-top: var(--s6); }
.roster li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--s3);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
}
.roster .name {
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  font-weight: var(--w-black);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
}
.roster .role {
  font-size: var(--t-xs);
  font-weight: var(--w-black);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--bone-3);
  text-align: right;
}

blockquote.pull {
  border-left: 4px solid var(--red);
  padding-left: var(--s4);
  margin-block: var(--s5);
  font-size: var(--t-lg);
  font-weight: var(--w-medium);
  line-height: 1.32;
  color: var(--bone);
  max-width: 34ch;
}
blockquote.pull cite {
  display: block;
  margin-top: var(--s3);
  font-size: var(--t-xs);
  font-style: normal;
  font-weight: var(--w-black);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--bone-3);
}

/* ---------- frames (horizontal film strip) -------------------------------- */
.strip {
  display: flex;
  gap: var(--s3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--s3);
  scrollbar-color: var(--line-strong) transparent;
}
.strip > li {
  /* the cards are 4:5 prints, so the width has to come down or a single card
     stands taller than the viewport on a phone */
  flex: 0 0 min(68vw, 380px);
  scroll-snap-align: start;
}
.strip img { width: 100%; height: auto; }
.strip-hint {
  margin-top: var(--s3);
  font-size: var(--t-xs);
  color: var(--bone-3);
}

/* ---------- forms --------------------------------------------------------- */
.duo { display: grid; gap: var(--s7); }
@media (min-width: 940px) { .duo { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem); } }

.field { display: grid; gap: var(--s1); margin-bottom: var(--s4); }
.field label {
  font-size: var(--t-xs);
  font-weight: var(--w-black);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--bone-2);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 50px;
  padding: var(--s2) var(--s3);
  background: var(--ink-panel);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--bone);
  font-size: var(--t-base);
  transition: border-color var(--fast) var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--bone-3); opacity: 1; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--bone-3); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  border-color: var(--red-hot);
  outline: 3px solid var(--red-hot);
  outline-offset: 2px;
}
.field .help { font-size: var(--t-sm); color: var(--bone-3); }

.honey {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-note { font-size: var(--t-sm); color: var(--bone-3); margin-top: var(--s3); max-width: 48ch; }
.form-note a { color: var(--bone-2); }

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.consent input {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  min-height: 0;
  margin-top: 2px;
  accent-color: var(--red);
}
.consent label {
  font-size: var(--t-sm);
  font-weight: var(--w-regular);
  letter-spacing: 0;
  text-transform: none;
  color: var(--bone-2);
  line-height: 1.45;
}

/* ---------- contact ledger ------------------------------------------------ */
.contacts { border-top: 1px solid var(--line); }
.contacts li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--s3);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
}
.contacts .who {
  font-size: var(--t-xs);
  font-weight: var(--w-black);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--bone-3);
}
.contacts a { font-weight: var(--w-medium); word-break: break-word; }

/* ---------- footer -------------------------------------------------------- */
.site-footer {
  background: var(--ink-deep);
  border-top: 1px solid var(--line);
  padding-block: var(--s7) var(--s6);
}
.footer-top {
  display: grid;
  gap: var(--s6);
  margin-bottom: var(--s6);
}
@media (min-width: 800px) {
  .footer-top { grid-template-columns: auto 1fr; align-items: start; gap: var(--s7); }
}
.footer-mark img { width: 190px; height: auto; }

.social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px; min-height: 48px;
  border: 1px solid var(--line-strong);
  color: var(--bone-2);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.social a:hover, .social a:focus-visible { color: var(--on-red); background: var(--red); border-color: var(--red); }
.social svg { width: 20px; height: 20px; }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--bone-3);
}
.footer-legal nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--bone-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}
.footer-legal a:hover, .footer-legal a:focus-visible { color: var(--bone); border-bottom-color: var(--red); }
.footer-legal p { margin: 0; }

/* ---------- interior pages ------------------------------------------------ */
.page-head {
  padding-top: calc(68px + var(--s7));
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--line);
}
.page-head h1 {
  font-size: var(--t-mega);
  font-style: italic;
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}
.page-head .lead { margin-top: var(--s4); }

/* long-form legal / prose pages */
.prose { max-width: 68ch; }
.prose h2 {
  font-size: var(--t-lg);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
  margin-top: var(--s6);
  margin-bottom: var(--s3);
}
.prose h3 {
  font-size: var(--t-md);
  font-weight: var(--w-bold);
  margin-top: var(--s5);
  margin-bottom: var(--s2);
}
.prose p, .prose li { color: var(--bone-2); }
.prose p + p { margin-top: var(--s3); }
.prose ul { list-style: disc; padding-left: 1.35rem; margin-top: var(--s3); display: grid; gap: var(--s1); }
.prose a { color: var(--bone); border-bottom: 1px solid var(--red); text-decoration: none; }
.prose a:hover, .prose a:focus-visible { color: var(--red-hot); }
.prose .updated {
  font-size: var(--t-xs);
  font-weight: var(--w-black);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--bone-3);
  margin-bottom: var(--s5);
}

/* 404 */
.oops {
  min-height: 78svh;
  min-height: 78dvh;
  display: grid;
  align-content: center;
  gap: var(--s4);
  padding-top: 68px;
}
.oops h1 {
  font-size: var(--t-mega);
  font-style: italic;
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}

/* ---------- scroll reveal ------------------------------------------------
   Transform only, and opt-in: the offset applies only once main.js has ARMED
   an element, and main.js only arms what is currently below the fold. So with
   JavaScript off, with IntersectionObserver missing, or with the script
   blocked by CSP, nothing is ever displaced and nothing is ever hidden.
   main.js also clears every armed element on a timer as a backstop. */
.reveal.is-armed { transform: translate3d(0, 22px, 0); transition: transform var(--slow) var(--ease); }
.reveal.is-armed.is-in { transform: none; }

/* ---------- reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal.is-armed { transform: none; }
  .show:hover { padding-left: var(--s4); }
}

/* ---------- print --------------------------------------------------------- */
@media print {
  .site-header, .nav-mobile, .hero__media, .strip, #dgb-concept-bar { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   ADDITIONS -- update pass, 2026-08-03
   ========================================================================== */

/* ---------- display face routes through one variable ---------------------
   Everything set in the display voice reads --font-display, so swapping in
   the band's own face later is a one-line change in variables.css. */
/* One weight, no italic, and the letterforms already lean. Anything set in the
   display face drops the synthetic italic and loosens tracking to suit it. */
.display, .section-head h2, .page-head h1, .show__city, .shows-empty strong,
.merch__panel h2, .vfacade__cap h3, .roster .name, .oops h1, .prose h2,
.nav-mobile a, .popup h2, .record__art + div h3, .hero__line b {
  font-style: normal;
  letter-spacing: 0.005em;
}

.display,
.section-head h2,
.page-head h1,
.hero__line b,
.show__city,
.record__art + div h3,
.shows-empty strong,
.merch__panel h2,
.vfacade__cap h3,
.roster .name,
.oops h1,
.prose h2,
.nav-mobile a,
.popup h2 { font-family: var(--font-display); }

/* ---------- LIVE, now that there is a real date --------------------------
   The section carries a real photograph of a real room instead of sitting on
   flat black, because there is finally something to put behind it. */
.live-band {
  position: relative;
  overflow: hidden;
  background: var(--ink-deep);
}
.live-band__bg { position: absolute; inset: 0; }
.live-band__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.live-band__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(5,5,5,0.90) 0%, rgba(5,5,5,0.72) 42%, rgba(5,5,5,0.92) 100%);
}
.live-band__inner { position: relative; z-index: var(--z-base); }

/* a confirmed date, laid out as a ledger row rather than a card */
.show--next { border-top: 1px solid var(--line); }
.show__ticket { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* rooms the band has actually played: credibility, not decoration */
.rooms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s5);
}
.rooms li {
  border: 1px solid var(--line-strong);
  padding: var(--s2) var(--s3);
  font-size: var(--t-xs);
  font-weight: var(--w-black);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--bone-2);
}
/* --bone-3 is the dimmest token on the site and measured 3.73:1 against the
   brighter parts of the Capitol Theatre photograph. Labels sitting on
   photography step up a level. */
.rooms-label {
  font-size: var(--t-xs);
  font-weight: var(--w-black);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--bone-2);
  margin-top: var(--s6);
  width: max-content;
}

/* ---------- album art becomes a link -------------------------------------- */
.record__art a {
  display: block;
  position: relative;
  outline-offset: 4px;
}
.record__art a img { transition: transform var(--slow) var(--ease); }
.record__art a:hover img,
.record__art a:focus-visible img { transform: scale(1.015); }
.record__art { overflow: hidden; }

/* ---------- popup ---------------------------------------------------------
   Deliberately NOT a full-screen interstitial: it is a bounded panel pinned to
   the lower-left on desktop and the bottom on mobile, so it never covers the
   main content. That keeps it clear of Google's intrusive-interstitial rule
   and clear of the reason people hate these. */
.popup {
  position: fixed;
  z-index: var(--z-menu);
  right: var(--gutter);
  bottom: calc(var(--s5) + 58px);
  width: min(24rem, calc(100vw - (var(--gutter) * 2)));
  background: var(--ink-raise);
  border: 2px solid var(--red);
  padding: var(--s5) var(--s5) var(--s4);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.popup[hidden] { display: none; }
.popup h2 {
  font-size: var(--t-lg);
  font-style: italic;
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  margin-bottom: var(--s2);
}
.popup .popup__when {
  font-size: var(--t-xs);
  font-weight: var(--w-black);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--red-hot);
  margin-bottom: var(--s1);
}
.popup p { color: var(--bone-2); font-size: var(--t-sm); margin-bottom: var(--s4); }
.popup .btn-row { gap: var(--s2); }
.popup .btn { padding-inline: var(--s4); }
.popup__close {
  position: absolute;
  top: 6px; right: 6px;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  color: var(--bone-3);
  font-size: 22px;
  line-height: 1;
}
.popup__close:hover, .popup__close:focus-visible { color: var(--bone); }

/* enters on a timer, not on an observer, and only when motion is welcome */
.popup.is-in { animation: popIn var(--mid) var(--ease) both; }
@keyframes popIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .popup {
    left: var(--s3); right: var(--s3);
    width: auto;
    bottom: calc(var(--s3) + 64px);
    padding: var(--s4);
  }
}
/* the hero owns the first screen; the panel enters from the right */
@keyframes popIn {
  from { opacity: 0; transform: translate3d(14px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .popup.is-in { animation: none; }
}

/* ==========================================================================
   FLIP CARDS -- the photo strip turns over to show the back of the print

   The markup ships as the plain photo strip it has always been. main.js
   upgrades each item into a flip card, so with JavaScript off there is no
   dead button and no half-built widget: the strip is exactly what it is today.
   Same opt-in pattern as the scroll reveals and the header wordmark.
   ========================================================================== */
.strip .flip {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 1400px;
  -webkit-tap-highlight-color: transparent;
}
.strip .flip:focus-visible { outline: 3px solid var(--red-hot); outline-offset: 4px; }

.flip__inner {
  /* built as a <span>, so it must be blockified before width and
     aspect-ratio mean anything */
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  transform-style: preserve-3d;
  transition: transform 700ms var(--ease);
}
.flip[aria-pressed="true"] .flip__inner { transform: rotateY(180deg); }

.flip__face {
  display: block;
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}
.flip__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flip__back { transform: rotateY(180deg); }

@media (prefers-reduced-motion: reduce) {
  .flip__inner { transition: none; }
}

/* ---------- mobile drawer close ------------------------------------------
   The hamburger already morphs into an X, but a drawer this full-bleed needs
   an unmistakable way out. */
.nav-mobile__close {
  position: absolute;
  top: 10px; right: max(var(--s3), calc(var(--gutter) - 12px));
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  font-size: 34px;
  line-height: 1;
  color: var(--bone);
  background: none;
  border: 0;
}
.nav-mobile__close:hover,
.nav-mobile__close:focus-visible { color: var(--red-hot); }

/* ---------- singles ledger, now with sleeves ------------------------------
   Same ledger row as the shows list, with the artwork leading it. */
.single { grid-template-columns: 1fr; }
.single__art { display: block; width: 96px; }
.single__art img { width: 100%; height: auto; display: block; }

@media (min-width: 800px) {
  .single { grid-template-columns: 96px 11rem 1fr auto; align-items: center; }
}

/* ---------- carousel controls --------------------------------------------
   Auto-advancing content needs a manual stop, so the pause control is a real
   button rather than a decoration. It sits with the caption, not over the
   photographs, so it never covers a card. */
.strip-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s3);
}
.strip-foot .strip-hint { margin: 0; }

/* Hidden until main.js takes control of the strip. With JavaScript off the
   strip is a plain scroller and a pause button would do nothing. */
.carousel-toggle { display: none; }
.carousel-toggle.is-live {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 0 var(--s3);
  border: 1px solid var(--line-strong);
  color: var(--bone-2);
  font-size: var(--t-xs);
  font-weight: var(--w-black);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  background: none;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.carousel-toggle:hover,
.carousel-toggle:focus-visible { color: var(--bone); border-color: var(--bone); }
.carousel-toggle .glyph {
  width: 9px; height: 11px;
  background: currentColor;
  clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);
}
.carousel-toggle[aria-pressed="true"] .glyph {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  width: 11px;
}