/* Public site — prototype.
 *
 * Dark, poster-forward. The artwork is the product on a club night listing, so
 * the layout gets out of its way. Everything is theme-fixed dark on purpose:
 * this is a night-time brand, not an app.
 */

:root {
  --bg: #0a0a0c;
  --surface: #131318;
  --surface-2: #1b1b22;
  --line: #2a2a34;
  --text: #f4f4f6;
  --muted: #9a9aa8;
  --accent: #ffcc33;
  --accent-ink: #1a1400;
  --ok: #17c964;
  --warn: #f5a524;
  --bad: #f31260;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* --- header --------------------------------------------------------------- */

header.site {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
  margin-bottom: 40px;
}
header.site .wrap { display: flex; align-items: baseline; gap: 14px; }
header.site .mark {
  font-size: 20px; font-weight: 800; letter-spacing: -0.02em; text-decoration: none;
}
header.site .sub { color: var(--muted); font-size: 14px; }

/* --- prototype banner ----------------------------------------------------- */

.proto {
  background: rgba(245, 165, 36, 0.1);
  border-bottom: 1px solid rgba(245, 165, 36, 0.35);
  color: #ffce7a;
  font-size: 14px;
  padding: 10px 0;
}

/* --- listing -------------------------------------------------------------- */

h1 { font-size: clamp(30px, 5vw, 46px); letter-spacing: -0.03em; margin: 0 0 8px; line-height: 1.1; }
h2 { font-size: 24px; letter-spacing: -0.01em; margin: 44px 0 14px; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em;
     color: var(--muted); margin: 32px 0 12px; font-weight: 700; }

.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.card {
  display: block;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); }

.card .art {
  aspect-ratio: 1 / 1.414;             /* poster proportions */
  background: linear-gradient(150deg, #241d33, #10121c 60%);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
}
/* Padding belongs to the fallback, not the frame — otherwise real artwork
   sits inset inside a border of background colour. */
.card .art .fallback { padding: 22px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.card .art img { width: 100%; height: 100%; object-fit: cover; }
.card .art .fallback span { display: block; font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }

.card .body { padding: 16px 18px 20px; }
.card .brand { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; }
.card .title { font-size: 20px; font-weight: 750; margin: 6px 0 4px; letter-spacing: -0.01em; }
.card .meta { color: var(--muted); font-size: 14px; }

.pill {
  display: inline-block; margin-top: 12px; padding: 5px 11px; border-radius: 99px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
}
.pill.on   { background: rgba(23,201,100,0.14);  color: #4ade80; }
.pill.soon { background: rgba(245,165,36,0.14);  color: #fbbf24; }
.pill.off  { background: rgba(154,154,168,0.12); color: var(--muted); }
.pill.gone { background: rgba(243,18,96,0.14);   color: #fb7185; }

/* --- event page ----------------------------------------------------------- */

.event { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) {
  .event { grid-template-columns: 400px minmax(0, 1fr); align-items: start; }
  /* Artwork stays put while the details scroll — two-column layout only.
     Sticky is bounded by the whole grid, not the poster's own row, so in one
     column it slid down over the ticket list and covered the buy buttons. */
  .poster { position: sticky; top: 24px; }
}

.poster {
  border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(150deg, #241d33, #10121c 60%);
  aspect-ratio: 1 / 1.414;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.poster img { width: 100%; height: 100%; object-fit: cover; }
.poster .fallback { padding: 30px; font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.poster .fallback span { display: block; margin-top: 14px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

.brandline { color: var(--accent); font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 10px; }
.tagline { color: var(--muted); font-size: 19px; margin: 0 0 26px; }

.facts { display: grid; gap: 2px; margin: 0 0 8px; }
.fact { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.fact dt { flex: 0 0 108px; color: var(--muted); font-size: 14px; margin: 0; }
.fact dd { margin: 0; }

.lineup { display: flex; flex-wrap: wrap; gap: 9px; }
.artist {
  padding: 9px 15px; border: 1px solid var(--line); border-radius: 99px;
  background: var(--surface); font-weight: 650;
}
.artist.head { border-color: var(--accent); color: var(--accent); }
.artist small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }

/* --- tickets -------------------------------------------------------------- */

.tickets { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 6px 18px 18px; }

.tier { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.tier:last-of-type { border-bottom: 0; }
.tier .info { flex: 1 1 auto; min-width: 0; }
.tier .name { font-weight: 700; }
.tier .desc { color: var(--muted); font-size: 14px; }
.tier .price { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tier .left { font-size: 13px; color: var(--muted); white-space: nowrap; }
.tier .left.low { color: var(--warn); font-weight: 700; }
.tier.soldout .name, .tier.soldout .price { opacity: 0.45; }

.tier .admits {
  display: inline-block; margin-left: 7px; padding: 2px 8px; border-radius: 99px;
  background: rgba(255, 204, 51, 0.16); color: var(--accent);
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; vertical-align: 2px;
}
.tier .price .each { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }

/* On a phone the name and description get their own row, with the picker and
   price beneath. Squeezed into one row the name wrapped a word per line. */
@media (max-width: 560px) {
  .tier { flex-wrap: wrap; row-gap: 10px; }
  .tier .info { flex-basis: 100%; }
  .tier .price { margin-left: auto; text-align: right; }
}

.qty { display: flex; align-items: center; gap: 4px; }
.qty button {
  width: 38px; height: 38px; border-radius: 10px; font-size: 19px; line-height: 1;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text); cursor: pointer;
}
.qty button:disabled { opacity: 0.35; cursor: not-allowed; }
.qty output {
  min-width: 26px; text-align: center; font-weight: 750;
  font-variant-numeric: tabular-nums; font-size: 17px;
}

.basket { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.basket .line { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; font-size: 15px; }
.basket .line.discount { color: var(--ok); }
.basket .line.total { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line);
                      font-size: 19px; font-weight: 750; }
.basket .saving { margin-top: 10px; padding: 9px 12px; border-radius: 9px;
                  background: rgba(23,201,100,0.12); color: #4ade80; font-size: 14px; font-weight: 650; }
.basket .nudge  { margin-top: 10px; padding: 9px 12px; border-radius: 9px;
                  background: rgba(255,204,51,0.1); color: var(--accent); font-size: 14px; font-weight: 650; }
.basket .err { color: var(--bad); font-size: 14px; }

.buy {
  display: block; width: 100%; margin-top: 18px; padding: 17px;
  font: inherit; font-weight: 750; font-size: 18px;
  border: 0; border-radius: 12px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
}
.buy[disabled] { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }

.notice { margin-top: 14px; font-size: 14px; color: var(--muted); text-align: center; }

/* --- mailing list --------------------------------------------------------- */

.signup { margin: 56px 0; padding: 26px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--surface); }
.signup h3 { margin-top: 0; }
.signup form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.signup input {
  flex: 1 1 240px; min-height: 52px; padding: 0 15px; font-size: 17px;
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 11px;
}
.signup button {
  min-height: 52px; padding: 0 24px; font: inherit; font-weight: 700;
  border: 0; border-radius: 11px; background: var(--accent); color: var(--accent-ink);
  cursor: pointer;
}
.signup .consent { font-size: 13px; color: var(--muted); margin-top: 12px; }
.signup .result { margin-top: 12px; font-weight: 650; }
.signup .result.ok  { color: var(--ok); }
.signup .result.err { color: var(--bad); }

footer.site { border-top: 1px solid var(--line); margin-top: 70px; padding: 26px 0 60px;
  color: var(--muted); font-size: 14px; }

.empty { color: var(--muted); padding: 40px 0; }
.back { display: inline-block; margin-bottom: 22px; color: var(--muted);
  text-decoration: none; font-size: 15px; }
.back:hover { color: var(--text); }

/* --- checkout ------------------------------------------------------------ */

/* The checkout form and the Buy button both set display, which beats the
   browser's own [hidden] rule — without this both would always show. */
.checkout[hidden], .buy[hidden] { display: none; }

.basket .line.fee { color: var(--muted); }

.checkout { margin-top: 18px; display: grid; gap: 14px; }
.checkout .field { display: grid; gap: 6px; }
.checkout .field label { font-size: 14px; font-weight: 650; }
.checkout .field label .muted { font-weight: 400; }
.checkout input:not([type=checkbox]) {
  font: inherit; font-weight: 400; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
}
.checkout .check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.checkout .check input { margin-top: 2px; width: 18px; height: 18px; flex: none; }
.checkout .buy { margin-top: 4px; }
.checkout .err { color: var(--bad); font-weight: 650; margin: 0; }
.checkout .notice { margin-top: 0; }
.warn-box { padding: 10px 14px; border-radius: 10px; background: var(--surface-2); color: var(--text); text-align: left; }