@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0d0d0e;
  --ink: #f2efe8;
  --muted: #8f8b84;
  --line: rgb(255 255 255 / 0.07);
  --accent: #f2b544;
  --pad: clamp(1rem, 4vw, 2rem);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  overflow-x: hidden;
  font-family: 'Montserrat', system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(ellipse 55% 45% at 50% 0%, rgb(242 181 68 / 0.13), transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 52%, rgb(242 181 68 / 0.06), transparent 70%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Faint column lines, like a page still on the drafting table. */
.grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--line) calc(25% - 1px) 25%);
}
@media (max-width: 40rem) {
  .grid { background: repeating-linear-gradient(90deg, transparent 0 calc(50% - 1px), var(--line) calc(50% - 1px) 50%); }
}

.bar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem var(--pad);
  border-bottom: 1px solid var(--line);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.clock { color: var(--muted); }
.clock time { color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; margin-left: 0.35em; }

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem var(--pad);
  text-align: center;
}

.seats { width: min(9.5rem, 40vw); margin-bottom: 2rem; }
.seats rect { fill: rgb(255 255 255 / 0.12); }
.seats .row-back rect { fill: rgb(255 255 255 / 0.07); }
.seats .stage { fill: var(--accent); }
.seats .row-front rect { fill: var(--accent); filter: drop-shadow(0 0 4px rgb(242 181 68 / 0.55)); }

.wordmark {
  font-size: clamp(2.6rem, 10vw, 5.75rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.status {
  margin-top: 1.5rem;
  padding-left: 0.42em; /* balances the trailing letter-spacing so the line stays centred */
  font-size: clamp(0.85rem, 2.6vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--accent);
}

.lede {
  max-width: 28rem;
  margin-top: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--muted);
}

.ticker {
  position: relative;
  overflow: hidden;
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.track { display: inline-flex; animation: ticker 40s linear infinite; }
.track span { padding-right: 0.25em; }
@keyframes ticker { to { transform: translateX(-50%); } }

.hero > * { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero > :nth-child(2) { animation-delay: 0.08s; }
.hero > :nth-child(3) { animation-delay: 0.16s; }
.hero > :nth-child(4) { animation-delay: 0.24s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  .track, .hero > * { animation: none; }
}