@charset "UTF-8";
/* =========================================================
   Low Tide Sessions — top.css (index.html sections)
   PC values = Figma 14:673 px / 10 ; SP (<=1023) = Figma 14:1188 px / 10
   ========================================================= */

/* ---------- shared section head ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: flex-start; }
.sec-title {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: var(--fs-sec-title);
  letter-spacing: var(--ls-sec-title);
  line-height: 1.2;
  white-space: nowrap;
}
.sec-lead { margin-top: 4.44rem; font-size: var(--fs-lead); line-height: var(--lh-lead); }

@media (max-width: 1023px) {
  .sec-head { flex-direction: column; }
  .sec-lead { margin-top: 1.36rem; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  background: var(--color-teal) url("../img/hero-bg_pc.webp") center top / cover no-repeat;
  color: var(--color-cream);
}
.hero__inner {
  position: relative;
  min-height: 99.61rem;
  padding: 6.55rem 0 0 9.6rem;
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.84rem;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  line-height: normal;
  color: var(--color-mint);
}
.hero__title {
  margin-top: -0.1rem;
  font-family: var(--ff-display);
  font-weight: 900;
  line-height: 1.2;
}
.hero__title span { display: block; width: max-content; }
.hero__title-low { font-size: 16.128rem; letter-spacing: -0.08064rem; }
.hero__title-tide { font-size: 16.116rem; letter-spacing: -0.08064rem; color: var(--color-orange); margin-top: -5.81rem; }
.hero__title-sessions { font-size: 12.58rem; letter-spacing: 0.2516rem; margin-top: -5.14rem; }

/* turntable illustration (one composited image) + HTML controls */
.deck {
  position: absolute;
  left: 74.56rem;
  top: 18.68rem;
  width: 63.95rem;
}
.deck__img { width: 100%; height: auto; }
.deck__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-mono);
  font-weight: 700;
  line-height: 1;
}
.deck__btn--stop {
  left: 8.5rem; top: 47.39rem; width: 5.7rem; height: 3.11rem;
  background: var(--color-ink); color: var(--color-cream);
  font-size: 1.0171rem; letter-spacing: 0.08261rem;
}
.deck__btn--33 {
  left: 14.92rem; top: 47.46rem; width: 3.25rem; height: 2.98rem;
  background: var(--color-ink); color: var(--color-yellow);
  font-size: 0.929rem;
}
.deck__btn--45 {
  left: 18.895rem; top: 47.455rem; width: 3.25rem; height: 2.98rem;   /* stroke 1.5 centred: outer 32.5x29.8 = same as 33 */
  border: 0.15rem solid var(--color-ink); color: var(--color-ink);
  font-size: 0.929rem;
}

.hero__date { display: flex; align-items: flex-start; margin-top: -1.88rem; }
.hero__date-num {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 14.36rem;
  line-height: 1.2;
  color: var(--color-yellow);
}
.hero__date-rule {
  flex: none;
  width: 0.2rem;
  height: 11.23rem;
  margin: 3.05rem 1.6rem 0 1.74rem;
  background: var(--color-yellow);
}
.hero__date-day, .hero__date-time {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  line-height: normal;
}
.hero__date-day { margin-top: 3.2rem; }
.hero__date-month {
  margin-top: 2.09rem;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 3.39rem;
  line-height: normal;
}
.hero__date-time { margin-top: 1.84rem; }
.hero__lead {
  width: 38rem;
  margin-top: -0.35rem;
  font-size: 2rem;
  line-height: 3.1rem;
  color: var(--color-cream-88);
}
.hero__actions { display: flex; gap: 1.4rem; margin-top: 2.8rem; }
.btn--hero { height: 5.61rem; padding: 0 2.2rem; font-size: 1.296rem; letter-spacing: 0.104rem; }

@media (max-width: 1023px) {
  /* hero-bg_sp (14:1191) split into its two decorations so they keep SP size above 390px */
  .hero {
    background:
      url("../img/hero-bg-circle_sp.webp") right top / 18.1rem 15.7rem no-repeat,
      url("../img/hero-bg-012_sp.webp") left bottom / 16.2rem 8.7rem no-repeat,
      #224e5b;
  }
  .hero__inner {
    max-width: 39rem;
    min-height: 112.99rem;
    margin: 0 auto;
    padding: 3.75rem 1.8rem 0;
  }
  .hero__meta { row-gap: 1.2rem; }
  .hero__meta li:nth-child(3) { flex-basis: 100%; }
  .hero__title-low { font-size: 8.964rem; letter-spacing: -0.04485rem; margin-top: 0.551rem; }
  .hero__title-tide { font-size: 8.97rem; letter-spacing: -0.04485rem; margin-top: -3.23rem; }
  .hero__title-sessions { font-size: 6.997rem; letter-spacing: 0.13993rem; margin-top: -2.93rem; }
  .deck { position: relative; left: auto; top: auto; width: 36.9rem; margin-left: -0.6rem; }
  .deck__btn--stop { left: 4.92rem; top: 27.27rem; width: 3.28rem; height: 1.77rem; font-size: 0.6116rem; letter-spacing: 0.04758rem; }
  .deck__btn--33 { left: 8.62rem; top: 27.34rem; width: 1.8rem; height: 1.64rem; font-size: 0.535rem; }
  .deck__btn--45 { left: 10.835rem; top: 27.335rem; width: 1.8rem; height: 1.64rem; border-width: 0.086rem; font-size: 0.535rem; }
  .hero__date { margin-top: 3.84rem; }
  .hero__date-num { font-size: 9.539rem; }
  .hero__date-rule { height: 7.49rem; margin: 2rem 1.6rem 0 1.76rem; }
  .hero__date-day { margin-top: 2.15rem; }
  .hero__date-month { margin-top: 0.22rem; }
  .hero__date-time { margin-top: 0.075rem; }
  .hero__lead { width: 32.3rem; margin-top: 0.62rem; font-size: 1.7rem; line-height: 2.635rem; }
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 1.41rem; margin-top: 2.815rem; }
}

/* =========================================================
   TICKER (static per Figma — motion spec pending)
   ========================================================= */
.ticker {
  height: 9rem;
  background: var(--color-orange);
  border-top: 0.2rem solid var(--color-ink);
  border-bottom: 0.2rem solid var(--color-ink);
  overflow: hidden;
}
.ticker__list {
  display: flex;
  align-items: center;
  gap: 6.35rem;
  height: 100%;
  white-space: nowrap;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 4rem;
  line-height: 1.2;
  color: var(--color-ink);
}
.ticker__list li { flex: none; }
@media (max-width: 1023px) {
  .ticker { height: 6.83rem; }
  .ticker__list { gap: 4.15rem; font-size: 2.58rem; }
  .ticker__pc { display: none; }
}

/* =========================================================
   LINER NOTES
   ========================================================= */
.liner {
  display: grid;
  grid-template-columns: 57.04rem 67.76rem;
  align-items: start;
  align-content: start;
  min-height: 81.35rem;
  padding: 14rem var(--gutter) 0;
}
.tags { display: flex; gap: 1rem; }
.tags li {
  display: flex;
  align-items: center;
  height: 3.4rem;
  padding: 0 1.03rem;
  border: 0.2rem solid var(--color-ink);
  font-family: var(--ff-mono);
  font-size: 1.19rem;
  letter-spacing: var(--ls-mono);
  line-height: normal;
  white-space: nowrap;
}
.liner__title {
  margin-top: 2.76rem;
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 9.504rem;
  letter-spacing: -0.04752rem;
  line-height: 0.84;
}
.liner__title em { position: relative; top: -0.115rem; color: var(--color-orange); font-size: 9.3181rem; }   /* Figma 14:693: smaller run sits top-aligned in its line */
.liner__body { margin-top: -0.02rem; }
.liner__cols { display: grid; grid-template-columns: 31.88rem 31.88rem; column-gap: 4rem; }
.liner__col p { font-size: 1.7rem; line-height: 2.635rem; }
.liner__col p + p { margin-top: 1.705rem; }
.dropcap {
  float: left;
  width: 4.42rem;
  height: 8.5rem;
  margin-top: -1.57rem;
  font-size: 1.7rem;
  line-height: normal;
}
.spec { margin-top: 3.62rem; border-top: 0.3rem solid var(--color-ink); }
.spec__row {
  display: grid;
  grid-template-columns: 16.6rem 1fr;
  align-items: center;
  height: calc(5.03rem + 1px);
  border-bottom: 1px solid var(--color-ink-25);
}
.spec dt { font-family: var(--ff-mono); font-size: 1.1rem; letter-spacing: 0.088rem; line-height: normal; }
.spec dd { font-size: 1.7rem; line-height: normal; }

@media (max-width: 1023px) {
  .liner {
    grid-template-columns: 1fr;
    max-width: 39rem;
    min-height: 130.19rem;
    margin: 0 auto;
    padding-top: 7.2rem;
  }
  .liner__title { margin-top: 2.765rem; font-size: 5.2rem; letter-spacing: -0.026rem; }
  .liner__title em { top: 0; font-size: inherit; }
  .liner__body { margin-top: 3.205rem; }
  .liner__cols { grid-template-columns: 1fr; row-gap: 1.705rem; }
  .dropcap { width: 4.43rem; margin-top: -1.56rem; }
  .spec { margin-top: 5.31rem; }
  .spec__row { display: block; height: auto; padding: 1.8rem 0 1.24rem; }
  .spec dd { margin-top: 0.37rem; font-size: 1.6rem; line-height: 2.48rem; }
}

/* =========================================================
   STATS
   ========================================================= */
.stats { min-height: 28.92rem; padding: 0 var(--gutter); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 0.3rem solid var(--color-ink); }
.stats__cell { height: 14.63rem; }
.stats__cell + .stats__cell { padding-left: 2rem; border-left: 1px solid var(--color-ink-25); }
.stats__num {
  margin-top: 1.34rem;
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 11.52rem;
  line-height: 1;
  color: var(--color-teal);
}
.stats__num--accent { color: var(--color-orange); }
.stats__label {
  margin-top: -0.17rem;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  line-height: normal;
}
@media (max-width: 1023px) {
  .stats { max-width: 39rem; min-height: 35.2rem; margin: 0 auto; }
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .stats__cell { height: 15rem; }
  .stats__cell + .stats__cell { padding-left: 0; border-left: 0; }
  .stats__cell:nth-child(even) { padding-left: 2rem; border-left: 1px solid var(--color-ink-25); }
  .stats__cell:nth-child(n+3) { height: calc(12.6rem + 1px); border-top: 1px solid var(--color-ink-25); }
  .stats__num { margin-top: 1.675rem; font-size: 6.35rem; }
  .stats__label { margin-top: -0.375rem; line-height: 2.48rem; }
}

/* =========================================================
   LINE-UP (Side A / Side B)
   ========================================================= */
.lineup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 95.49rem;
  overflow-x: clip;
}
.side { position: relative; }
.side--a { background: var(--color-teal); color: var(--color-cream); }
.side--b { background: var(--color-orange); color: var(--color-ink); }
.side__inner { position: relative; height: 100%; padding: 11.545rem 5.76rem 0; }
.side__letter {
  position: absolute;
  top: -11.16rem;
  left: 53.94rem;
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 43.2rem;
  line-height: 1.2;
  pointer-events: none;
  user-select: none;
}
.side--a .side__letter { color: var(--color-teal-deep); }
.side--b .side__letter { left: 54.18rem; color: var(--color-orange-letter); }
.side__body { position: relative; }
.side__title {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 8.047rem;
  letter-spacing: -0.04032rem;
  line-height: 6.77rem;
}
.side__title span { display: block; }
.side__meta {
  margin-top: 1.135rem;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  line-height: 1.8rem;
}
.side--a .side__meta { color: var(--color-mint); }
.tracks { margin-top: 4.05rem; border-top: 0.2rem solid currentColor; }
.track {
  display: grid;
  grid-template-columns: 7.2rem 1fr auto;
  align-items: start;
  padding: 1.25rem 0 1.52rem;
  border-bottom: 0.2rem solid currentColor;
}
.track__no { margin-top: 2.7rem; font-family: var(--ff-mono); font-weight: 700; font-size: 1.329rem; line-height: normal; }
.track__name { font-family: var(--ff-display); font-weight: 800; font-size: 4.032rem; line-height: 1.2; }
.track__desc { margin-top: -0.158rem; font-weight: 500; font-size: 1.5rem; line-height: 2rem; }
.track__time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 2.7rem;
  font-family: var(--ff-mono);
  font-size: 1.272rem;
  line-height: normal;
}
.track__dur { margin-top: 0.51rem; font-size: 1.095rem; }
.side__note { display: flex; align-items: flex-start; margin-top: 3.53rem; }
.side__note-img { flex: none; width: 13.66rem; height: auto; margin-left: 0.36rem; }
.side__note-text {
  margin: 4.56rem 0 0 1.14rem;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  line-height: 1.8rem;
}
.side--b .side__note { margin-top: 3.71rem; }
.side--b .side__note-img { width: 12.71rem; margin-left: -0.15rem; }
.side--b .side__note-text { margin: 7.31rem 0 0 2.6rem; }

@media (max-width: 1023px) {
  .lineup { grid-template-columns: 1fr; min-height: 0; }
  .side--a { min-height: 85.64rem; }
  .side--b { min-height: 87.76rem; }
  .side__inner { max-width: 39rem; margin: 0 auto; padding: 6.385rem 2rem 0; }
  .side__letter { top: -5.93rem; left: 29.39rem; font-size: 23rem; }
  .side--b .side__letter { left: 29.51rem; }
  .side__title { font-size: 4.76rem; letter-spacing: -0.024rem; line-height: 4.03rem; }
  .side__meta { margin-top: 1.165rem; }
  .track { grid-template-columns: 5.6rem 1fr; padding: 1.725rem 0 2.12rem; }
  .track__no { margin-top: 1.325rem; }
  .track__name { font-size: 3rem; line-height: 2.85rem; }
  .track__desc { margin-top: 0.66rem; line-height: 1.43rem; }
  .track__time { grid-column: 2; flex-direction: row; align-items: center; gap: 0.85rem; margin-top: 0.805rem; line-height: 1.5rem; }
  .track__dur { margin-top: 0; }
  .side__note { margin-top: 3.49rem; }
  .side__note-img { width: 11.72rem; margin-left: 0.28rem; }
  .side__note-text { margin: 3.55rem 0 0 1.2rem; }
  .side--b .side__note { margin-top: 3.6rem; }
  .side--b .side__note-img { width: 10.88rem; margin-left: -0.1rem; }
  .side--b .side__note-text { max-width: 21.8rem; margin: 5.02rem 0 0 2.42rem; }
}

/* =========================================================
   THE RESIDENTS
   ========================================================= */
.residents {
  min-height: 87.48rem;
  padding: var(--sec-pad-top) var(--gutter) 0;
  background: var(--color-yellow);
}
.residents__lead { width: 38.08rem; }
.rcards {
  display: grid;
  grid-template-columns: repeat(4, 29.65rem);
  column-gap: 2.35rem;
  margin-top: 11.73rem;
}
.rcard__media { position: relative; width: 29.65rem; height: 29.65rem; }
.rcard__record { position: absolute; left: 2.27rem; top: -2.15rem; width: 24.19rem; height: auto; }
.rcard__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.rcard__icon { position: absolute; height: auto; }
.rcard--1 .rcard__icon { left: 10.79rem; top: 3.17rem; width: 16.45rem; }
.rcard--2 .rcard__icon { left: 10.99rem; top: 3.28rem; width: 16.2rem; }
.rcard--3 .rcard__icon { left: 10.99rem; top: 3.27rem; width: 16.3rem; }
.rcard--4 .rcard__icon { left: 10.34rem; top: 2.62rem; width: 16.7rem; }
.rcard__no {
  position: absolute;
  left: 1.99rem; top: 2.24rem;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 1.098rem;
  letter-spacing: 0.088rem;
  line-height: normal;
}
.rcard__name {
  position: absolute;
  left: 1.99rem; top: 18.36rem;
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 5.184rem;
  line-height: 4.36rem;
}
.rcard--1 .rcard__no, .rcard--1 .rcard__name { color: var(--color-ink); }
.rcard--2 .rcard__no, .rcard--2 .rcard__name { color: var(--color-cream); }
.rcard--3 .rcard__no, .rcard--3 .rcard__name { color: var(--color-teal); }
.rcard--4 .rcard__no, .rcard--4 .rcard__name { color: var(--color-yellow); }
.rcard__genre { margin-top: 0.72rem; font-family: var(--ff-display); font-weight: 800; font-size: 2.187rem; line-height: normal; }
.rcard__since { margin-top: 0.25rem; font-size: 1.5rem; line-height: normal; }

@media (max-width: 1023px) {
  .residents { max-width: none; min-height: 89.42rem; }
  .residents > * { max-width: 35.4rem; margin-inline: auto; }
  .residents__lead { width: auto; }
  .rcards { grid-template-columns: repeat(2, 17.55rem); column-gap: 0.85rem; row-gap: 5.83rem; margin-top: 5.76rem; }
  .rcard__media { width: 17.55rem; height: 17.5rem; }
  .rcard__record { left: 1.36rem; top: -1.28rem; width: 14.28rem; }
  .rcard--1 .rcard__icon { left: 6.38rem; top: 1.84rem; width: 10.05rem; }
  .rcard--2 .rcard__icon { left: 6.53rem; top: 1.89rem; width: 9.85rem; }
  .rcard--3 .rcard__icon { left: 6.48rem; top: 1.94rem; width: 10rem; }
  .rcard--4 .rcard__icon { left: 6.13rem; top: 1.54rem; width: 9.95rem; }
  .rcard__no { left: 1.19rem; top: 1.29rem; font-size: 0.891rem; letter-spacing: 0.072rem; }
  .rcard__name { left: 1.19rem; top: 11.255rem; font-size: 2.8rem; line-height: 2.35rem; }
  .rcard__genre { margin-top: 1.25rem; line-height: 2.2rem; }
  .rcard__since { margin-top: 0.3rem; }
}

/* =========================================================
   TOUR DATES
   ========================================================= */
.tour {
  min-height: 140.45rem;
  padding: var(--sec-pad-top) var(--gutter) 0;
  background: var(--color-cream);
}
.tour__sub {
  width: max-content;
  margin-top: 8.72rem;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  line-height: 1.8rem;
}
.dates { margin-top: 4.27rem; }
.date {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1.088fr 1fr 2.228fr auto;   /* Figma: date / day / info / button */
  align-items: center;
  height: 15.93rem;
  border-top: 0.3rem solid var(--color-ink);
}
.date:last-child { height: 16.23rem; border-bottom: 0.3rem solid var(--color-ink); }
.date--current { border-top-color: var(--color-teal); color: var(--color-cream); }
.date--current::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -5.6rem; right: -5.6rem;
  top: -0.3rem; bottom: 0;
  background: var(--color-teal);
}
.date__num {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 14.36rem;
  line-height: 1;
  color: var(--color-orange);
}
.date--current .date__num { color: var(--color-yellow); }
.date__day { display: flex; flex-direction: column; padding-top: 1.2rem; }
.date__wd { font-family: var(--ff-mono); font-size: 1.158rem; letter-spacing: var(--ls-mono); line-height: normal; }
.date__month { font-family: var(--ff-display); font-weight: 800; font-size: 3.72rem; line-height: normal; }
.date__tagline { display: flex; align-items: center; gap: 0.81rem; }
.badge, .date__code {
  font-family: var(--ff-mono);
  font-size: 1.586rem;
  letter-spacing: 0.096rem;
  line-height: normal;
}
.badge { display: inline-block; padding: 0.55rem 0.7rem; color: var(--color-cream); }
.badge--home-current { background: var(--color-orange); color: var(--color-ink); }
.badge--home { background: var(--color-ink); }
.badge--away { background: var(--color-teal); }
.date__venue { margin-top: -0.35rem; font-family: var(--ff-display); font-weight: 800; font-size: 3.44rem; line-height: 1.2; }
.date__desc { font-size: 1.6rem; line-height: normal; }
.btn--date { height: 4.66rem; padding: 0 1.675rem; font-size: 1.185rem; letter-spacing: 0.096rem; }
.btn--date.btn--dashed { padding: 0 1.8rem; font-size: 1.2rem; }
.u-strike { position: relative; display: inline-block; }
.u-strike::after { content: ""; position: absolute; left: 0; right: 0; height: 0.4rem; }
.u-strike--num::after { top: 59.3%; background: rgba(255, 91, 34, 0.5); }
.u-strike--venue::after { top: 57.8%; background: rgba(23, 25, 27, 0.5); }

/* Figma: info block sits 1.15px above the row centre (14:846 tag top 4442.4) */
@media (min-width: 1024px) {
  .date__info { margin-bottom: 0.226rem; }
}

@media (max-width: 1023px) {
  .tour { min-height: 194.87rem; }
  .tour > * { max-width: 35.4rem; margin-inline: auto; }
  .tour__sub { margin-top: 1.36rem; margin-left: 0; }
  .dates { margin-top: 3.65rem; }
  .date {
    grid-template-columns: auto 1fr;
    grid-template-areas: "num day" "info info" "btn btn";
    column-gap: 1.8rem;
    align-items: start;
    height: auto;
    padding: 1.25rem 0 2.2rem;
  }
  .date:last-child { height: auto; }
  .date--current::before { left: calc(50% - 50vw); right: calc(50% - 50vw); }
  .date__num { grid-area: num; font-size: 8.4rem; }
  .date__day { grid-area: day; padding-top: 1.5rem; }
  .date__month { font-size: 2.775rem; }
  .date__info { grid-area: info; margin-top: 0.1rem; }
  .date__venue { margin-top: -0.3rem; font-size: 2.6rem; }
  .date__desc { margin-top: -0.24rem; line-height: 2.48rem; }
  .date .btn { grid-area: btn; justify-self: start; margin-top: 1.04rem; }
}

/* =========================================================
   TICKETS
   ========================================================= */
.tickets {
  min-height: 131.52rem;
  padding: var(--sec-pad-top) var(--gutter) 0;
  background: var(--color-teal);
  color: var(--color-cream);
}
.tickets__lead { width: 39.98rem; color: var(--color-mint); }
.tcards {
  display: grid;
  grid-template-columns: 60.6rem 60.6rem;
  gap: 3.6rem;
  margin-top: 4.27rem;
}
.tcard {
  --main-bg: var(--color-cream);
  --stub-bg: var(--color-yellow);
  --stub-color: var(--color-ink);
  --perf: rgba(23, 25, 27, 0.4);
  --bullet: var(--color-orange-soft);
  position: relative;
  display: flex;
  height: 39.08rem;
  background: var(--main-bg);   /* card sheet spans under the stub (Figma: stub is layered on the sheet) */
  color: var(--color-ink);
}
.tcard--1 {
  --main-bg: rgba(236, 228, 210, 0.62);
  --stub-bg: rgba(255, 197, 61, 0.62);
  --stub-color: rgba(23, 25, 27, 0.62);
  --perf: rgba(23, 25, 27, 0.248);
  --bullet: rgba(236, 103, 56, 0.62);
}
.tcard--2 {
  --main-bg: var(--color-orange-soft);
  --stub-bg: var(--color-ink);
  --stub-color: var(--color-yellow);
  --bullet: var(--color-ink);
}
/* PC only: semicircle notches at the perforation (bg colour) */
.tcard::before, .tcard::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50.05rem;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background: var(--color-teal);
}
.tcard::before { top: -1.35rem; }
.tcard::after { bottom: -1.35rem; }
.tcard__main { flex: 1; min-width: 0; padding: 2.95rem 3rem 0; }
.tcard__top {
  display: flex;
  justify-content: space-between;
  column-gap: 1.2rem;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  line-height: normal;
}
.tcard__price {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-top: 0.05rem;
  font-family: var(--ff-display);
  font-weight: 900;
}
.tcard__cur { margin-top: 1.89rem; font-size: 4.234rem; line-height: normal; }
.tcard__amount { margin-left: 0.13rem; font-size: 9.967rem; line-height: 1.2; }
.tcard__strike { position: absolute; left: -0.4rem; top: 5.28rem; width: 11.39rem; height: auto; }
.tcard__name { margin-top: -0.84rem; font-family: var(--ff-display); font-weight: 800; font-size: 3.39rem; line-height: normal; }
.tcard--1 .tcard__name { margin-top: -0.27rem; }
.tcard__perks { margin-top: 0.42rem; }
.tcard__perks li {
  position: relative;
  padding: 0.1975rem 0 0.1975rem 1.8rem;
  font-size: 1.5rem;
  line-height: 2.33rem;
}
.tcard__perks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.9625rem;
  width: 0.8rem; height: 0.8rem;
  background: var(--bullet);
}
.tcard__btn { margin-top: 2.41rem; }
.tcard__btn.btn--ink { height: 5.61rem; padding: 0 2.2rem; font-size: 1.3rem; letter-spacing: 0.104rem; }
.tcard__btn.btn--dashed { height: 4.65rem; padding: 0 1.8rem; font-size: 1.2rem; letter-spacing: 0.096rem; }
.tcard__stub {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9.2rem;
  background: var(--stub-bg);
  color: var(--stub-color);
}
.tcard__stub::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0.3rem;
  background: repeating-linear-gradient(180deg, var(--perf) 0 0.6rem, transparent 0.6rem 0.895rem);
}
.tcard__stub span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.084rem;
  line-height: 1;
  white-space: nowrap;
}
.tickets__notes {
  display: flex;
  gap: 2.85rem;
  margin-top: 3.55rem;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  line-height: normal;
  color: var(--color-mint);
}

@media (max-width: 1023px) {
  .tickets { min-height: 203.62rem; }
  .tickets > * { max-width: 35.4rem; margin-inline: auto; }
  .tickets__lead { width: auto; }
  .tcards { grid-template-columns: 1fr; gap: 2rem; margin-top: 3.64rem; }
  .tcard { height: auto; }
  .tcard::before, .tcard::after { display: none; }
  .tcard__main { padding: 2.15rem 2rem 2.2rem; }
  .tcard__top { line-height: 1.8rem; }
  .tcard__price { margin-top: 0.2rem; }
  .tcard__cur { margin-top: 1.58rem; font-size: 3.195rem; }
  .tcard__amount { margin-left: 0.27rem; font-size: 7.899rem; }
  .tcard__strike { left: -0.45rem; top: 4.3rem; width: 9.4rem; }
  .tcard__name { margin-top: -0.35rem; }
  .tcard--1 .tcard__name { margin-top: 0.13rem; }
  .tcard--2 { --main-bg: var(--color-orange); }   /* SP 14:1472 = #FF5B22 (PC stays #EC6738) */
  .tcard__perks { margin-top: 0.29rem; }
  .tcard--1 .tcard__perks { margin-top: 0.42rem; }
  .tcard__btn { margin-top: 2.46rem; }
  .tcard__stub { width: 6.4rem; }
  .tickets__notes { flex-direction: column; gap: 1rem; margin-top: 3.35rem; line-height: 1.8rem; }
}

/* =========================================================
   VENUE
   ========================================================= */
.venue {
  display: grid;
  grid-template-columns: 68.6rem 49rem;
  column-gap: 7.2rem;
  align-items: start;
  align-content: start;
  min-height: 103.53rem;
  padding: 14rem var(--gutter) 0;
  background: var(--color-cream);
}
.venue__map {
  position: relative;
  height: 48.2rem;
  background: var(--color-mint);
  border: 0.3rem solid var(--color-ink);
  box-shadow: 1rem 1rem 0 var(--color-ink);
}
.venue__map img { width: 100%; height: auto; }
.venue__caption {
  position: absolute;
  left: 0; bottom: 0;
  padding: 0.8rem 1.25rem 0.8rem 1.2rem;
  background: var(--color-ink);
  color: var(--color-cream);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  line-height: 1.8rem;
}
.venue__body { margin-top: 0.15rem; }
.venue__label { font-family: var(--ff-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono); line-height: normal; }
.venue__title {
  margin-top: 1.58rem;
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 9.216rem;
  letter-spacing: -0.04608rem;
  line-height: 7.74rem;
}
.venue__address { margin-top: 2.2rem; font-family: var(--ff-display); font-weight: 800; font-size: 2.8rem; line-height: 2.94rem; }
.access { margin-top: 2.67rem; border-top: 0.2rem solid var(--color-ink); }
.access__row {
  display: grid;
  grid-template-columns: 10rem 1fr;
  align-items: start;
  padding: 1.36rem 0 1.44rem;
  border-bottom: 0.2rem solid var(--color-ink);
}
.access dt { margin-top: 0.54rem; font-family: var(--ff-mono); font-weight: 700; font-size: 1.183rem; letter-spacing: var(--ls-mono); line-height: normal; }
.access dd { font-size: 1.6rem; line-height: 2.48rem; }
.venue__note { margin-top: 2.19rem; font-size: var(--fs-small); line-height: var(--lh-small); }

@media (max-width: 1023px) {
  .venue { grid-template-columns: 35.4rem; justify-content: center; min-height: 123.91rem; padding-top: 7.2rem; }
  .venue__map { height: 24.96rem; }
  .venue__caption { right: 0; padding: 0.8rem 1.2rem; }
  .venue__body { margin-top: 3.35rem; }
  .venue__title { margin-top: 1.615rem; font-size: 5.17rem; letter-spacing: -0.026rem; line-height: 4.37rem; }
  .venue__address { margin-top: 2.165rem; }
  .access__row { display: block; padding: 1.9rem 0 1.44rem; }
  .access dt { margin-top: 0; }
  .access dd { margin-top: 0.61rem; }
}

/* =========================================================
   MERCH TABLE
   ========================================================= */
.merch {
  min-height: 112.86rem;
  padding: var(--sec-pad-top) var(--gutter) 0;
  background: var(--color-orange);
}
.merch__lead { width: 34.27rem; }
.mcards {
  display: grid;
  grid-template-columns: 68.73rem 52.87rem;
  grid-template-rows: 31.44rem 33.66rem;
  gap: 3.2rem;
  margin-top: 4.27rem;
}
.mcard { position: relative; display: flex; overflow: hidden; background: var(--color-cream); color: var(--color-ink); }
.mcard__circle { position: absolute; border-radius: 50%; opacity: 0.95; background: var(--color-yellow); }
.mcard__img { position: absolute; height: auto; }
.mcard__text { position: relative; }
.mcard__no { font-family: var(--ff-mono); font-size: 1.183rem; letter-spacing: var(--ls-mono); line-height: normal; }
.mcard__name { margin-top: 0.84rem; font-family: var(--ff-display); font-weight: 800; font-size: 3.73rem; line-height: normal; }
.mcard__desc { margin-top: 0.35rem; font-size: var(--fs-small); line-height: var(--lh-small); }
.mcard__buy { display: flex; justify-content: space-between; align-items: center; margin-top: 1.215rem; }
.mcard__price { font-family: var(--ff-display); font-weight: 900; font-size: 4.4rem; line-height: 1.2; }
.btn--merch { height: 4.3rem; margin-right: -0.1rem; padding: 0 1.431rem; font-size: 1.09rem; letter-spacing: 0.088rem; }

.mcard--hoodie { grid-row: 1 / 3; align-items: flex-end; background: var(--color-teal); color: var(--color-cream); }
.mcard--hoodie .mcard__circle { left: 10.31rem; top: 3.26rem; width: 48.11rem; height: 48.11rem; background: var(--color-teal-deep); }
.mcard--hoodie .mcard__img { left: 15.36rem; top: 4rem; width: 39rem; }
.mcard--hoodie .mcard__text { flex: 1; padding: 0 2.7rem 2.11rem 2.6rem; }

.mcard--crate .mcard__circle, .mcard--12inch .mcard__circle { left: 1.59rem; width: 23.26rem; height: 23.26rem; }
.mcard--crate .mcard__circle { top: 3.46rem; }
.mcard--12inch .mcard__circle { top: 4.52rem; }
.mcard--crate .mcard__img { left: 2.8rem; top: 6.44rem; width: 21.53rem; }
.mcard--12inch .mcard__img { left: 3.15rem; top: 5.99rem; width: 21.08rem; }
.mcard--crate, .mcard--12inch { align-items: flex-end; }
.mcard--crate .mcard__text, .mcard--12inch .mcard__text { width: 23.84rem; margin-left: 29.03rem; padding: 0 2.7rem 2.2rem 0; }

@media (max-width: 1023px) {
  .merch { min-height: 191.63rem; }
  .merch > * { max-width: 35.4rem; margin-inline: auto; }
  .merch__lead { width: 32.3rem; margin-left: 0; }
  .mcards { grid-template-columns: 1fr; grid-template-rows: none; gap: 1.8rem; margin-top: 3.64rem; }
  .mcard { display: block; }
  .mcard--hoodie { grid-row: auto; }
  .mcard__name { margin-top: 0.83rem; font-size: 2.8rem; }
  .mcard__desc { margin-top: 0.5rem; }
  .mcard .mcard__text { width: auto; margin-left: 0; padding: 0 2.7rem 2.1rem 2.6rem; }
  .mcard--hoodie .mcard__text { padding-top: 35.47rem; }
  .mcard--crate .mcard__text { padding-top: 28.06rem; padding-bottom: 2.2rem; }
  .mcard--12inch .mcard__text { padding-top: 31.32rem; padding-bottom: 2.2rem; }
  .mcard--hoodie .mcard__circle { left: 5.31rem; top: 10.5rem; width: 24.78rem; height: 24.78rem; }
  .mcard--hoodie .mcard__img { left: 5.16rem; top: 4.01rem; width: 26.18rem; }
  .mcard--crate .mcard__circle, .mcard--12inch .mcard__circle { left: 7.79rem; width: 19.82rem; height: 19.82rem; }
  .mcard--crate .mcard__circle { top: 4.34rem; }
  .mcard--12inch .mcard__circle { top: 5.32rem; }
  .mcard--crate .mcard__img { left: 2.7rem; top: 3.1rem; width: 21.95rem; }
  .mcard--12inch .mcard__img { left: 3.15rem; top: 3.15rem; width: 21.45rem; }
}

/* =========================================================
   GET ON THE LIST
   ========================================================= */
.signup {
  position: relative;
  min-height: 52.97rem;
  overflow: hidden;
  background: var(--color-ink);
  color: var(--color-cream);
}
.signup__grooves { position: absolute; right: 0; top: 0; width: 48.96rem; height: 52.96rem; }
.signup__inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 var(--gutter);
}
.signup__title {
  margin-top: 15.51rem;
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 12.96rem;
  letter-spacing: -0.0648rem;
  line-height: 10.88rem;
  white-space: nowrap;
}
.signup__form {
  width: 52.8rem;
  margin-top: 14rem;
  padding: 3.75rem 3.6rem 3.61rem;
  border: 0.3rem solid var(--color-cream);
}
.signup__label { display: block; font-family: var(--ff-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono); line-height: normal; color: var(--color-mint); }
.signup__row { display: flex; margin-top: 1.25rem; }
.signup__input {
  width: 30.06rem;
  height: 5.99rem;
  padding: 0 1.6rem;
  border: 0;
  background: var(--color-cream);
  color: var(--color-ink);
  font-size: 1.794rem;
}
.signup__input::placeholder { color: var(--color-placeholder); opacity: 1; }
.signup__btn {
  width: 14.94rem;
  height: 5.99rem;
  background: var(--color-orange);
  border: 0.2rem solid var(--color-orange);
  color: var(--color-ink);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 1.293rem;
  letter-spacing: 0.104rem;
  transition: background-color .2s ease, border-color .2s ease;
}
.signup__btn:hover { background: var(--color-yellow); border-color: var(--color-yellow); }
.signup__note { margin-top: 1.39rem; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--color-cream-75); }

@media (max-width: 1023px) {
  .signup { min-height: 57.99rem; }
  .signup__grooves { top: 18.86rem; width: 13.26rem; height: 20.28rem; }
  .signup__inner { flex-direction: column; align-items: stretch; max-width: 39rem; margin: 0 auto; }
  .signup__title { margin-top: 7.2rem; font-size: 6.4rem; letter-spacing: -0.032rem; line-height: 5.38rem; }
  .signup__form { width: auto; margin-top: 3.19rem; padding: 2.35rem 2.2rem 2.21rem; }
  .signup__row { flex-direction: column; align-items: flex-start; }
  .signup__input { width: 100%; }
  .signup__btn { height: 5.15rem; }
}