:root {
  --ink: #100f0d;
  --ink-soft: #171411;
  --paper: #d8b98d;
  --paper-light: #e4c89d;
  --cream: #e2c69d;
  --orange: #d34a09;
  --orange-deep: #9f3307;
  --line: rgba(226,198,157,.42);
  --max: 1480px;
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
  --body: "Courier New", Courier, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  color: var(--cream);
  background:
    radial-gradient(circle at 17% 12%, rgba(211,74,9,.075), transparent 19%),
    repeating-linear-gradient(3deg, rgba(255,255,255,.012) 0 1px, transparent 1px 7px),
    var(--ink);
  font-family: var(--body);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

.screen-grit {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  opacity: .085;
  mix-blend-mode: screen;
  background:
    repeating-radial-gradient(circle at 0 0, transparent 0 3px, rgba(255,255,255,.12) 4px 4.5px),
    repeating-linear-gradient(92deg, transparent 0 13px, rgba(255,255,255,.05) 14px 14.5px);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
  min-height: 74px;
  padding: 11px clamp(18px, 4vw, 64px);
  background: rgba(16,15,13,.95);
  border-bottom: 1px solid rgba(226,198,157,.22);
  backdrop-filter: blur(8px);
}
.wordmark {
  display: block;
  width: clamp(205px, 23vw, 325px);
  text-decoration: none;
  transform: rotate(-.6deg);
  flex: 0 0 auto;
}
.wordmark img { width: 100%; height: auto; }
nav { display: flex; gap: clamp(11px, 2vw, 31px); flex-wrap: wrap; justify-content: flex-end; }
nav a {
  font-family: var(--display);
  font-weight: 900;
  text-decoration: none;
  letter-spacing: .055em;
  font-size: 14px;
}
nav a:hover { color: var(--orange); }

main > section { scroll-margin-top: 88px; }
.eyebrow, .section-label {
  color: var(--orange);
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.hero h1, h2, .member h3, .year-card h3 {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
}

.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(34px, 5vw, 74px) clamp(18px, 5vw, 74px) clamp(78px, 7vw, 112px);
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(560px, 1.18fr);
  gap: clamp(30px, 4vw, 72px);
  align-items: center;
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(104deg, transparent 0 62%, rgba(211,74,9,.04) 62% 65%, transparent 65%),
    radial-gradient(circle at 72% 12%, rgba(226,198,157,.035), transparent 24%);
}
.hero::after {
  content: "";
  position: absolute;
  left: -4%; right: -4%; bottom: -1px; height: 35px;
  background: var(--paper);
  clip-path: polygon(0 48%, 4% 16%, 9% 50%, 15% 22%, 22% 51%, 28% 13%, 35% 44%, 42% 18%, 49% 48%, 57% 12%, 64% 52%, 72% 21%, 80% 46%, 87% 15%, 94% 42%, 100% 20%, 100% 100%, 0 100%);
}
.hero h1 {
  font-size: clamp(78px, 8.5vw, 146px);
  line-height: .8;
  letter-spacing: -.045em;
  transform: rotate(-1deg);
}
.hero h1 span { color: var(--orange); }
.strap {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(24px, 2.8vw, 42px);
  margin: 24px 0;
  letter-spacing: .012em;
}
.show-card {
  border: 2px solid var(--cream);
  transform: rotate(.25deg);
  box-shadow: 8px 8px 0 rgba(211,74,9,.14);
}
.show-card div { display: grid; grid-template-columns: 100px 1fr; border-bottom: 1px solid var(--line); }
.show-card div:last-child { border: 0; }
.show-card small, .show-card strong { padding: 12px 14px; }
.show-card small {
  color: var(--orange);
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: .08em;
  border-right: 1px solid var(--line);
}
.show-card strong { font-size: clamp(15px, 1.35vw, 21px); }
.hero-note { max-width: 42ch; line-height: 1.55; margin-top: 22px; }

.hero-art {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, .42fr);
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  min-width: 0;
}
.promo-frame, .poster-frame {
  margin: 0;
  position: relative;
  background: #0d0c0b;
  border: 1px solid rgba(226,198,157,.36);
}
.promo-frame {
  transform: rotate(-1.05deg);
  padding: 8px;
  box-shadow: -14px 18px 0 rgba(211,74,9,.1), 14px 18px 32px rgba(0,0,0,.48);
}
.poster-frame {
  transform: rotate(3.1deg) translateY(16px);
  padding: 6px;
  box-shadow: 10px 16px 28px rgba(0,0,0,.55);
}
.promo-frame::before, .promo-frame::after, .poster-frame::before, .poster-frame::after,
.story-photo::before, .story-photo::after {
  content: "";
  position: absolute;
  background: rgba(214,185,141,.74);
  width: 78px;
  height: 21px;
  z-index: 2;
}
.promo-frame::before { left: 18px; top: -8px; transform: rotate(-5deg); }
.promo-frame::after { right: 15px; bottom: -9px; transform: rotate(5deg); }
.poster-frame::before { left: -14px; top: 26px; transform: rotate(-8deg); }
.poster-frame::after { right: -13px; bottom: 32px; transform: rotate(10deg); }

.paper {
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 20%, rgba(0,0,0,.07), transparent 18%),
    repeating-linear-gradient(5deg, rgba(0,0,0,.022) 0 1px, transparent 1px 9px),
    var(--paper);
}
.band-section { padding: clamp(62px, 7vw, 108px) clamp(18px, 5vw, 76px); }
.band-section > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.band-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(36px, 6vw, 86px);
  align-items: center;
}
.band-grid h2, .section-head h2, .archive-head h2 {
  font-size: clamp(48px, 6vw, 92px);
  line-height: .88;
  letter-spacing: -.025em;
}
.band-copy { position: relative; z-index: 1; }
.band-grid p { line-height: 1.58; max-width: 72ch; }
.last-line { font-weight: 900; color: var(--orange-deep); }
.story-photo {
  margin: 0;
  position: relative;
  transform: rotate(1.8deg);
  padding: 8px;
  background: var(--ink);
  box-shadow: 14px 18px 0 rgba(16,15,13,.16);
}
.story-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.story-photo::before { left: 20px; top: -10px; transform: rotate(-4deg); }
.story-photo::after { right: 18px; bottom: -10px; transform: rotate(5deg); }

.dark-section { max-width: 100%; padding: clamp(58px, 6vw, 90px) clamp(18px, 5vw, 76px); }
.dark-section > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.section-head { margin-bottom: 34px; }
.lineup-head h2 {
  letter-spacing: .015em;
  word-spacing: .06em;
}
.lineup-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.member {
  border: 1px solid rgba(226,198,157,.6);
  background: #191714;
  padding: 8px;
  box-shadow: 6px 8px 0 rgba(211,74,9,.18);
}
.member img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; }
.member div { padding: 10px 5px 5px; }
.member h3 { color: var(--orange); font-size: 26px; letter-spacing: .01em; }
.member p { margin: 5px 0; font-weight: 700; font-size: 12px; line-height: 1.3; }
.card-tilt-0 { transform: rotate(-1deg); }
.card-tilt-1 { transform: rotate(.8deg) translateY(7px); }
.card-tilt-2 { transform: rotate(-.4deg) translateY(-5px); }

.archive-section { padding: clamp(62px, 6vw, 94px) clamp(18px, 5vw, 76px); }
.archive-section > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.archive-head { display: grid; grid-template-columns: 1fr 2fr; gap: 12px 45px; margin-bottom: 36px; align-items: end; }
.archive-head .eyebrow, .archive-head h2 { grid-column: 1; }
.archive-head > p:last-child { grid-column: 2; grid-row: 1 / 3; align-self: center; line-height: 1.5; max-width: 52ch; }
.years { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.year-card { background: var(--ink); color: var(--cream); padding: 11px; position: relative; box-shadow: 10px 12px 0 rgba(16,15,13,.17); }
.year-shift-0 { transform: rotate(-.7deg); }
.year-shift-1 { transform: rotate(.65deg) translateY(12px); }
.year-shift-2 { transform: rotate(-.35deg); }
.year {
  position: absolute;
  left: 15px;
  top: -20px;
  z-index: 2;
  margin: 0;
  padding: 5px 10px;
  background: var(--orange);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 900;
  font-size: 26px;
}
.year-card figure { margin: 0 0 16px; overflow: hidden; border: 1px solid rgba(226,198,157,.4); }
.year-card figure img { width: 100%; height: 260px; object-fit: cover; }
.year-card h3 { color: var(--orange); font-size: 30px; }
.year-note { min-height: 92px; line-height: 1.45; }
details { border-top: 1px dashed var(--line); padding-top: 12px; }
summary { cursor: pointer; color: var(--orange); font-family: var(--display); font-weight: 900; letter-spacing: .06em; }
ol { padding-left: 22px; }
ol li { margin: 9px 0; }
ol li span { display: block; font-size: .88em; opacity: .9; }

.photos-section {
  position: relative;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}
.photos-head { padding: 0 clamp(18px, 5vw, 76px); }
.photos-head > * { max-width: var(--max); }
.gallery-shell { position: relative; max-width: none !important; margin: 0; }
.gallery {
  display: flex;
  gap: clamp(13px, 1.4vw, 22px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--orange) #211d18;
  padding: 16px clamp(60px, 7vw, 110px) 34px;
  margin: 0;
}
.gallery::-webkit-scrollbar { height: 9px; }
.gallery::-webkit-scrollbar-track { background: #211d18; }
.gallery::-webkit-scrollbar-thumb { background: var(--orange); }
.gallery-item {
  flex: 0 0 clamp(260px, 32vw, 500px);
  height: clamp(300px, 36vw, 520px);
  margin: 0;
  overflow: hidden;
  scroll-snap-align: center;
  border: 1px solid rgba(226,198,157,.45);
  background: #1a1815;
  padding: 6px;
  box-shadow: 8px 10px 0 rgba(211,74,9,.15);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}
.g-0 { flex-basis: clamp(360px, 46vw, 680px); transform: rotate(-.55deg); }
.g-1 { flex-basis: clamp(240px, 27vw, 390px); transform: rotate(.5deg) translateY(5px); }
.g-2 { flex-basis: clamp(280px, 34vw, 500px); transform: rotate(-.35deg); }
.g-3 { flex-basis: clamp(260px, 30vw, 440px); transform: rotate(.3deg) translateY(-5px); }
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 44px;
  height: 44px;
  border: 1px solid var(--cream);
  background: rgba(16,15,13,.9);
  color: var(--cream);
  font: 900 23px/1 var(--body);
  cursor: pointer;
  box-shadow: 5px 6px 0 rgba(211,74,9,.3);
}
.gallery-prev { left: 12px; }
.gallery-next { right: 12px; }
.gallery-arrow:hover { background: var(--orange); color: var(--ink); }

.contact-section { padding: clamp(46px, 5vw, 72px) clamp(18px, 5vw, 76px); }
.contact-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr);
  gap: clamp(30px, 6vw, 90px);
  align-items: end;
}
.contact-section h2 {
  font-size: clamp(40px, 4.5vw, 66px);
  line-height: .9;
  letter-spacing: -.015em;
}
.contact-details { border-left: 2px solid rgba(16,15,13,.65); padding-left: clamp(22px, 3vw, 42px); }
.email {
  display: inline-block;
  font-family: var(--body);
  font-weight: 900;
  font-size: clamp(20px, 2.45vw, 38px);
  color: var(--orange-deep);
  text-decoration: none;
  border-bottom: 2px solid var(--orange-deep);
  overflow-wrap: anywhere;
}
.contact-details p { margin: 16px 0 0; font-weight: 900; letter-spacing: .02em; }
.contact-line { font-size: .88rem; }

footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px clamp(18px, 5vw, 76px) 44px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 11px;
  opacity: .8;
}
footer a { color: var(--orange); font-weight: 900; }

@media (max-width: 1120px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { max-width: 760px; }
  .hero-art { max-width: 900px; width: 100%; margin: 6px auto 0; grid-template-columns: minmax(0, 1fr) minmax(190px, .38fr); }
  .lineup-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .band-grid { grid-template-columns: 1fr .75fr; }
}

@media (max-width: 760px) {
  .topbar { position: relative; align-items: flex-start; flex-direction: column; gap: 9px; padding-top: 9px; padding-bottom: 11px; }
  .wordmark { width: min(245px, 72vw); }
  nav { justify-content: flex-start; gap: 10px 18px; }
  nav a { font-size: 13px; }
  .hero { padding-top: 34px; padding-bottom: 74px; }
  .hero h1 { font-size: clamp(70px, 24vw, 110px); }
  .show-card div { grid-template-columns: 82px 1fr; }
  .hero-art { grid-template-columns: 1fr; gap: 30px; max-width: 600px; }
  .promo-frame { width: 100%; transform: rotate(-.7deg); }
  .poster-frame { width: min(66%, 330px); justify-self: end; transform: rotate(2.8deg); }
  .band-grid { grid-template-columns: 1fr; }
  .story-photo { max-width: 560px; width: 100%; justify-self: center; transform: rotate(1deg); }
  .lineup-grid { grid-template-columns: repeat(2, 1fr); }
  .archive-head { display: block; }
  .years { grid-template-columns: 1fr; gap: 42px; }
  .year-card { transform: none; }
  .year-note { min-height: auto; }
  .gallery { padding-left: 38px; padding-right: 38px; }
  .gallery-item { flex-basis: 78vw; height: 68vw; max-height: 460px; min-height: 310px; transform: none; }
  .g-0, .g-1, .g-2, .g-3 { flex-basis: 78vw; transform: none; }
  .gallery-arrow { width: 38px; height: 38px; font-size: 20px; }
  .gallery-prev { left: 6px; }
  .gallery-next { right: 6px; }
  .contact-inner { grid-template-columns: 1fr; gap: 24px; }
  .contact-details { border-left: 0; border-top: 2px solid rgba(16,15,13,.65); padding-left: 0; padding-top: 20px; }
  footer { flex-direction: column; }
}

@media (max-width: 460px) {
  .lineup-grid { grid-template-columns: 1fr; }
  .member { display: grid; grid-template-columns: 42% 1fr; align-items: center; gap: 10px; transform: none; }
  .member img { aspect-ratio: 4 / 5; }
  .poster-frame { width: 74%; }
}