:root {
  --bg: #0a0a0a;
  --bg-raised: #131311;
  --ink: #f5f2ea;
  --ink-dim: #8f897a;
  --ink-faint: #55504a;
  --line: rgba(245, 242, 234, 0.14);
  --line-strong: rgba(245, 242, 234, 0.28);
  --accent: #3dc5ff;
  --accent-2: #ff4d2e;
  --tier1-size: clamp(3.2rem, 10vw, 8.5rem);
  --tier2-size: clamp(2.4rem, 6.5vw, 5.2rem);
  --tier3-size: clamp(1.8rem, 4.5vw, 3.4rem);
  font-size: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  overflow-x: hidden;
  position: relative;
}

::selection {
  background: var(--accent);
  color: #0a0a0a;
}

a { color: inherit; }

/* ---------- Texture layers ---------- */

.halftone {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(245, 242, 234, 0.09) 1px, transparent 1.3px);
  background-size: 15px 15px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, black 0%, transparent 75%);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Masthead ---------- */

.masthead {
  position: relative;
  z-index: 2;
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem) 0;
}

.masthead-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
}

.wordmark {
  font-family: 'Anton', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.wordmark span {
  color: var(--accent);
}

.masthead-meta {
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
}

.masthead-meta-right { margin-left: auto; }

.masthead-label {
  color: var(--ink-faint);
}

.masthead-rule {
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    var(--ink) 0, var(--ink) 6px,
    transparent 6px, transparent 10px
  );
  opacity: 0.5;
}

main {
  position: relative;
  z-index: 2;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: min(88vh, 780px);
  display: flex;
  align-items: flex-end;
  padding: clamp(3rem, 9vw, 5rem) clamp(1.2rem, 4vw, 3rem) clamp(2.4rem, 5vw, 3.4rem);
  text-align: left;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: var(--bg);
}

.hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: grayscale(1) contrast(1.15) brightness(0.65);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hero-img[src]:not([src=""]) { opacity: 1; }

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.55) 45%, rgba(10,10,10,0.97) 92%),
    linear-gradient(90deg, rgba(10,10,10,0.75) 0%, rgba(10,10,10,0.15) 55%);
}

.hero-halftone {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(245, 242, 234, 0.5) 1px, transparent 1.3px);
  background-size: 6px 6px;
  opacity: 0.05;
  mix-blend-mode: overlay;
}

.hero-content {
  position: relative;
  max-width: 640px;
}

.hero-credit {
  position: absolute;
  right: clamp(1.2rem, 4vw, 3rem);
  bottom: 1rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  color: var(--accent);
  margin: 0 0 1.2rem;
  font-weight: 700;
}

.eyebrow .rule {
  height: 1px;
  width: clamp(20px, 6vw, 50px);
  background: var(--line-strong);
}
.eyebrow .rule:last-child { display: none; }

.hero-title {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 0.94;
  margin: 0;
  letter-spacing: 0.005em;
  color: var(--ink);
  text-transform: uppercase;
}

.hero-sub {
  max-width: 480px;
  margin: 1.2rem 0 0;
  color: var(--ink-dim);
  font-size: 0.98rem;
  line-height: 1.5;
}

.hero-featuring {
  margin: 1.6rem 0 0;
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hero-featuring strong {
  color: var(--accent);
  font-weight: 700;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.4rem;
  padding: 0.75rem 1.4rem;
  border: 1px solid var(--line-strong);
  text-decoration: none;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.hero-cta:hover {
  border-color: var(--accent);
  background: rgba(215, 255, 61, 0.08);
}
.arrow-down { display: inline-block; animation: bob 2s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* ---------- Lineup / poster tiers ---------- */

.lineup {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem clamp(1.2rem, 4vw, 3rem) 4rem;
  border-bottom: 1px solid var(--line);
}

.tier-row {
  display: grid;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: 1fr;
}

.tier-row[data-tier-row="2"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 3rem);
}

.tier-row[data-tier-row="2"] .event-card {
  max-width: 400px;
}

.event-card {
  position: relative;
  min-width: 0;
  border-top: 1px solid var(--line);
  padding: clamp(1.6rem, 3.2vw, 2.4rem) 0;
  transition: background 0.2s ease;
  display: flex;
  flex-direction: column;
}

.event-card:hover {
  background: rgba(245, 242, 234, 0.02);
}

.event-card[data-tier="1"] {
  padding-block: clamp(2rem, 4.5vw, 3.2rem);
  border-top: 3px solid var(--ink);
  display: grid;
  grid-template-columns: minmax(220px, 30%) 1fr;
  column-gap: clamp(1.6rem, 3.5vw, 3rem);
  align-items: stretch;
}

.card-media {
  position: relative;
  overflow: hidden;
  background: var(--bg-raised);
}

.card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.9) contrast(1.08);
  transition: filter 0.4s ease, transform 0.5s ease;
}

.event-card:hover .card-media img {
  filter: grayscale(0);
  transform: scale(1.03);
}

.event-card[data-tier="1"] .card-media { aspect-ratio: 3 / 4; min-height: 320px; }
.event-card[data-tier="2"] .card-media { aspect-ratio: 16 / 9; margin-bottom: 1.3rem; }

.card-credit {
  position: absolute;
  right: 0.5rem;
  bottom: 0.4rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.03em;
  color: rgba(245, 242, 234, 0.75);
  background: rgba(10, 10, 10, 0.45);
  padding: 0.15rem 0.4rem;
}

.card-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.event-card[data-tier="2"] .card-content { flex: 1; }

.card-top {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: 'Space Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: var(--ink-dim);
  margin-bottom: 1rem;
}

.card-index {
  color: var(--accent);
  font-weight: 700;
}

.event-genre {
  margin-left: auto;
  color: var(--ink-faint);
}

.event-headliner {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.96;
  margin: 0 0 0.7rem;
  letter-spacing: 0.002em;
  color: var(--ink);
}

.event-card[data-tier="1"] .event-headliner { font-size: var(--tier1-size); }
.event-card[data-tier="2"] .event-headliner { font-size: var(--tier2-size); min-height: 1.92em; }

.event-support {
  font-family: 'Space Mono', monospace;
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 1.2rem;
}

.card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  margin-bottom: 1rem;
  border-top: 1px solid var(--line);
}

.event-meta {
  font-size: 0.92rem;
  color: var(--ink-dim);
}

.event-venue { color: var(--ink); font-weight: 600; }
.meta-sep { margin: 0 0.5rem; color: var(--ink-faint); }

.event-note {
  color: var(--ink-dim);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
  max-width: 60ch;
}

.ticket-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  text-decoration: none;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: var(--accent);
  border: 1px solid var(--accent);
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.ticket-btn:hover {
  background: transparent;
  color: var(--accent);
}
.ticket-btn .arrow {
  transition: transform 0.15s ease;
}
.ticket-btn:hover .arrow {
  transform: translateX(3px);
}

/* ---------- More shows list ---------- */

.more-shows {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 3rem) 4rem;
}

.more-shows-heading {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.6rem;
  padding: 0 0 1.2rem;
  font-family: 'Space Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.7rem;
  color: var(--ink-faint);
}

.more-shows-count {
  color: var(--ink-dim);
  letter-spacing: 0.05em;
}

.show-list {
  border-top: 1px solid var(--line);
}

.show-row {
  display: grid;
  grid-template-columns: 3.4rem 1fr 1.4fr 11rem auto;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  transition: background 0.15s ease;
}
.show-row:hover {
  background: rgba(245, 242, 234, 0.03);
}

.show-date {
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--accent);
}

.show-headliner {
  font-weight: 700;
  color: var(--ink);
}

.show-venue {
  color: var(--ink-dim);
}

.show-genre {
  font-family: 'Space Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.show-ticket {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.show-ticket:hover { text-decoration: underline; }
.show-ticket .arrow { transition: transform 0.15s ease; }
.show-ticket:hover .arrow { transform: translateX(2px); }

.show-more { border: none; }

.show-more summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.1rem 0;
  cursor: pointer;
  font-family: 'Space Mono', monospace;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  list-style: none;
}
.show-more summary::-webkit-details-marker { display: none; }
.show-more summary:hover { color: var(--ink); }

.show-more .chevron {
  display: inline-block;
  transition: transform 0.2s ease;
  color: var(--accent);
}
.show-more[open] .chevron { transform: rotate(180deg); }

.show-more-rows .show-row:last-child { border-bottom: 1px solid var(--line); }

@media (max-width: 720px) {
  .show-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date genre"
      "headliner headliner"
      "venue ticket";
    row-gap: 0.35rem;
  }
  .show-date { grid-area: date; }
  .show-genre { grid-area: genre; text-align: right; }
  .show-headliner { grid-area: headliner; }
  .show-venue { grid-area: venue; }
  .show-ticket { grid-area: ticket; justify-self: end; }
}

/* ---------- Subscribe ---------- */

.subscribe {
  max-width: 640px;
  margin: 0 auto;
  padding: 3rem clamp(1.2rem, 4vw, 3rem) 4.5rem;
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.subscribe-title {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: 0.005em;
  margin: 0 0 0.6rem;
  color: var(--ink);
}

.subscribe-sub {
  color: var(--ink-dim);
  font-size: 0.95rem;
  margin: 0 0 1.8rem;
}

.subscribe-form {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  flex-wrap: wrap;
}

.subscribe-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.subscribe-input {
  flex: 1 1 280px;
  max-width: 340px;
  padding: 0.85rem 1.1rem;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.92rem;
}

.subscribe-input::placeholder {
  color: var(--ink-faint);
}

.subscribe-input:focus {
  outline: none;
  border-color: var(--accent);
}

.subscribe-btn {
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #0a0a0a;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.subscribe-btn:hover {
  background: transparent;
  color: var(--accent);
}

.subscribe-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.subscribe-message {
  min-height: 1.2em;
  margin: 1rem 0 0;
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
}

.subscribe-message.is-success { color: var(--accent); }
.subscribe-message.is-error { color: var(--accent-2); }

.subscribe-message.is-banner {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.9rem 1.1rem;
  border: 1px solid currentColor;
}

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

.site-footer {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 1.2rem 3rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.footer-rule {
  max-width: 1100px;
  margin: 0 auto 1.5rem;
  height: 1px;
  background: var(--line);
}

@media (max-width: 640px) {
  .card-bottom { flex-direction: column; align-items: flex-start; }
  .event-genre { margin-left: 0; }
  .card-top { flex-wrap: wrap; }
}

@media (max-width: 720px) {
  .event-card[data-tier="1"] {
    grid-template-columns: 1fr;
    row-gap: 1.4rem;
  }
  .event-card[data-tier="1"] .card-media {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .hero { align-items: flex-end; min-height: 92vh; }
  .hero-content { max-width: 100%; }
}