/*
  Anything Goes — Fri Oct 23 2026 page layer.
  Structure + layout only. All colors/fonts come from theme.css variables;
  visuals are intentionally minimal until the art direction is chosen.
*/

/* width/height attrs are set for CLS; let CSS widths scale height. */
img { height: auto; }

/* Quiet down the old decorative layer (grain, watermark, tilts). */
.page-oct23::before,
.page-oct23 .hero::before { display: none; }
.page-oct23 .kicker,
.page-oct23 .rule-number { color: var(--kicker); }
.page-oct23 .text-link { color: var(--kicker); }
.page-oct23 .text-link:hover,
.page-oct23 .text-link:focus-visible { color: var(--accent); }

.page-oct23 .button-primary {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--button-shadow);
}
.page-oct23 .button-primary:hover,
.page-oct23 .button-primary:focus-visible { color: var(--bg); background: var(--text); border-color: var(--text); }
.page-oct23 .age-gate-panel { box-shadow: var(--card-shadow); }
.page-oct23 .hero h1 { font-size: clamp(76px, 11vw, 168px); line-height: 0.86; }
.page-oct23 .hero h1 span,
.page-oct23 .manifesto-mark { color: var(--accent); text-shadow: none; transform: none; }

.seasonal-kicker {
  margin: 0 0 12px;
  color: var(--accent);
  font-family: var(--font-label);
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- hero ---------- */
.hero-sub {
  margin: 28px 0 6px;
  font-family: var(--font-label);
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 700; letter-spacing: 0.04em; line-height: 1.05;
  text-transform: uppercase;
}
.hero-tagline,
.poster-script {
  margin: 0;
  font-family: var(--font-accent);
  line-height: 1;
  color: var(--kicker);
  text-transform: uppercase;
}
.hero-tagline { font-size: clamp(30px, 4vw, 52px); }
.hero-facts { margin: 22px 0 0; color: var(--muted); font-size: clamp(15px, 1.4vw, 18px); }
.hero-facts strong { color: var(--text); }
.hero-note { margin: 14px 0 0; color: var(--muted); font-size: 13px; }

/* Poster card in normal flow: never clipped, never wider than the viewport. */
.page-oct23 .hero-poster-wall { min-height: 0; }
.page-oct23 .poster-main {
  position: relative;
  inset: auto;
  width: min(430px, 100%);
  margin: 0 auto;
  transform: none;
  filter: none;
}
.page-oct23 .poster-main::before { display: none; }
.page-oct23 .brand-poster {
  min-height: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
}
.page-oct23 .brand-poster::after { display: none; }
.page-oct23 .brand-poster-logo { width: min(140px, 45%) !important; margin: 0 0 28px; }
.brand-poster-season {
  margin: 0 0 8px;
  color: var(--kicker);
  font-family: var(--font-label);
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
}
.page-oct23 .brand-poster-label { color: var(--accent); }
.page-oct23 .brand-poster h2 { color: var(--accent); text-shadow: none; }
.page-oct23 .brand-poster-date { color: var(--text); }
.page-oct23 .brand-poster-year { color: var(--kicker); }
.poster-time,
.poster-price {
  margin: 12px 0 0;
  font-family: var(--font-label);
  font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
}
.poster-time { color: var(--text); font-size: 15px; }
.poster-price { display: inline-block; padding: 8px 12px; color: var(--on-accent); background: var(--accent); font-size: 13px; }
.poster-script { margin-top: 18px; font-size: clamp(26px, 3vw, 36px); }

/* ---------- event details ---------- */
.event-section { border-top: 1px solid var(--line); }
.details-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.detail {
  display: grid; align-content: start; gap: 6px; min-width: 0;
  padding: clamp(22px, 3.5vw, 34px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.detail-wide { grid-column: span 2; }
.detail-label {
  color: var(--kicker);
  font-family: var(--font-label);
  font-size: 11px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase;
}
.detail strong {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px); font-weight: 400; line-height: 1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.detail p { margin: 0; color: var(--muted); font-size: 15px; }
.detail p b { color: var(--text); }
.detail .text-link { justify-self: start; margin-top: 8px; }
.detail-price strong { color: var(--accent); }

/* ---------- tickets ---------- */
.ticket-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: clamp(30px, 6vw, 80px);
  align-items: center;
  padding: clamp(26px, 5vw, 56px);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
}
.ticket-copy h2 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(52px, 7vw, 100px); font-weight: 400; line-height: 0.9;
  text-transform: uppercase;
}
.ticket-copy p:not(.kicker) { margin: 0; color: var(--muted); font-size: 17px; }
.ticket-copy strong { color: var(--text); }
.ticket-action { display: grid; gap: 14px; }
.price-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.price { display: grid; gap: 2px; padding: 16px; background: var(--bg); border: 1px solid var(--line); }
.price span, .price em {
  color: var(--muted);
  font-family: var(--font-label);
  font-size: 11px; font-style: normal; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase;
}
.price strong { font-family: var(--font-display); font-size: 52px; font-weight: 400; line-height: 1; }
.js-price-pre { border-color: var(--accent); }
.js-price-pre strong { color: var(--accent); }
body[data-ticket-state="door"] .js-price-pre { opacity: 0.4; border-color: var(--line); }
body[data-ticket-state="door"] .js-price-pre strong { color: var(--text); text-decoration: line-through; }
body[data-ticket-state="door"] .js-price-door { border-color: var(--accent); }
body[data-ticket-state="door"] .js-price-door strong { color: var(--accent); }
.ticket-note { margin: 0; color: var(--muted); font-size: 13px; }

/* ---------- hosts ---------- */
.hosts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 34px); }
.host-card {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
}
.host-card figure { margin: 0; min-height: 280px; overflow: hidden; background: var(--bg-soft); }
.host-card img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.host-copy { padding: clamp(20px, 3vw, 32px); min-width: 0; }
.host-copy h3 {
  margin: 0 0 14px;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: clamp(38px, 4vw, 58px); font-weight: 400; line-height: 0.9;
  text-transform: uppercase;
}
.host-copy p:not(.kicker) { margin: 0 0 16px; color: var(--muted); font-size: 15px; }

/* ---------- rules ---------- */
.page-oct23 .rules-grid article { min-height: 0; background: transparent; }

/* ---------- sponsor ---------- */
.sponsor-section {
  display: grid; justify-items: center; gap: 16px; text-align: center;
  padding-top: clamp(50px, 7vw, 90px) !important;
  padding-bottom: clamp(50px, 7vw, 90px) !important;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sponsor-logo img { width: min(320px, 80vw); height: auto; }
.page-oct23 .site-footer img { width: 110px; height: auto; }

/* ---------- sticky mobile buy bar ---------- */
.sticky-buy { display: none; }

@media (max-width: 980px) {
  .page-oct23 .poster-main { left: auto; transform: none; }
  .details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-wide { grid-column: 1 / -1; }
  .ticket-panel, .hosts-grid { grid-template-columns: 1fr; }
  .page-oct23 .rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .page-oct23 .hero h1 { font-size: clamp(64px, 22vw, 120px); }
  .page-oct23 .hero-poster-wall { min-height: 0; }
  .page-oct23 .brand-poster { padding: 26px; }
  .details-grid, .page-oct23 .rules-grid { grid-template-columns: 1fr; }
  .host-card { grid-template-columns: 1fr; }
  .host-card figure { min-height: 0; aspect-ratio: 4 / 3; }
  .price strong { font-size: 44px; }

  body.page-oct23 { padding-bottom: 76px; }
  .sticky-buy {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 900;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    border-top: 1px solid var(--line);
  }
  .sticky-buy-link {
    display: grid; justify-items: center; gap: 2px;
    padding: 10px 12px;
    color: var(--on-accent);
    background: var(--accent);
    text-align: center; text-decoration: none;
  }
  .sticky-buy-link strong {
    font-family: var(--font-label);
    font-size: 15px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.1;
    text-transform: uppercase;
  }
  .sticky-buy-link span { font-size: 11px; opacity: 0.9; line-height: 1.2; }
  body.age-gate-open .sticky-buy { display: none; }
}

/* ---------- presale payment options ---------- */
.pay-block { display: grid; gap: 12px; }
.pay-block[hidden] { display: none; }
.pay-title {
  margin: 4px 0 0;
  font-family: var(--font-label);
  font-size: 16px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pay-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pay-option {
  display: grid; gap: 2px; align-content: center;
  min-height: 64px;
  padding: 12px 14px;
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.pay-option:hover,
.pay-option:focus-visible { color: var(--bg); background: var(--text); border-color: var(--text); }
.pay-name {
  font-family: var(--font-label);
  font-size: 15px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.1;
  text-transform: uppercase;
}
.pay-handle { font-size: 13px; opacity: 0.92; overflow-wrap: anywhere; }
.pay-copy { background: transparent; color: var(--text); border-color: var(--accent); }
.pay-copy-hint {
  font-family: var(--font-label);
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--kicker);
}
.pay-option:hover .pay-copy-hint,
.pay-option:focus-visible .pay-copy-hint { color: inherit; }
.pay-instructions { margin: 0; color: var(--muted); font-size: 14px; }
.pay-instructions strong { color: var(--text); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 420px) {
  .pay-options { grid-template-columns: 1fr; }
  .pay-option { min-height: 56px; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; }
  .pay-handle { text-align: right; }
  .pay-copy-hint { grid-column: 1 / -1; text-align: right; }
}
