:root {
  --night: #140e16;
  --ink: #f6ead8;
  --muted: #c9b09c;
  --gold: #e8c07a;
  --ember: #ff7a3c;
  --ticket: #24182a;
  --ticket-edge: rgba(232, 192, 122, 0.42);
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: var(--night);
  font-family: Fraunces, "Times New Roman", serif;
  overflow-x: hidden;
}

::selection {
  background: var(--ember);
  color: var(--night);
}

.wash {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 50% at 12% -10%, rgba(255, 122, 60, 0.22), transparent 55%),
    radial-gradient(ellipse 55% 45% at 100% 100%, rgba(92, 28, 110, 0.45), transparent 58%),
    radial-gradient(ellipse 40% 30% at 70% 20%, rgba(232, 192, 122, 0.08), transparent 50%);
  pointer-events: none;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.top, main, footer {
  position: relative;
  z-index: 1;
}

.top {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1.35rem 1.6rem 0;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: Syne, system-ui, sans-serif;
  font-weight: 600;
}

.dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ember);
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(40rem, calc(100% - 2.4rem));
  margin: 0 auto;
  padding: 3.5rem 0 2rem;
}

.hello {
  margin: 0;
  font-family: Syne, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

h1 {
  margin: 0.15em 0 0;
  font-family: Syne, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(4.4rem, 18vw, 8.4rem);
  line-height: 0.82;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.tag {
  margin: 0.15em 0 2.6rem;
  font-size: clamp(1.85rem, 5vw, 2.55rem);
  font-weight: 400;
  font-style: italic;
  color: var(--gold);
  letter-spacing: -0.02em;
}

.tickets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 28rem;
}

.ticket {
  --tilt: -0.4deg;
  display: grid;
  grid-template-columns: 1fr 4.6rem;
  text-decoration: none;
  color: inherit;
  background: var(--ticket);
  border: 1px solid var(--ticket-edge);
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transform: rotate(var(--tilt));
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.ticket:nth-child(2) { --tilt: 0.7deg; }

.ticket:hover,
.ticket:focus-visible {
  --tilt: 0deg;
  border-color: var(--gold);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.42);
  outline: none;
}

.ticket-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.15rem 1.25rem 1.2rem;
  min-width: 0;
}

.ticket-kicker {
  font-family: Syne, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.ticket-title {
  font-family: Syne, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.55rem, 4vw, 1.9rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-top: 0.2rem;
}

.ticket-meta {
  margin-top: 0.35rem;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--muted);
}

.ticket-stub {
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px dashed rgba(232, 192, 122, 0.4);
  background:
    radial-gradient(circle at 0 0, var(--night) 7px, transparent 7.5px),
    radial-gradient(circle at 0 100%, var(--night) 7px, transparent 7.5px);
  font-family: Syne, system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

footer {
  padding: 0 1.6rem 1.7rem;
}

footer a {
  color: var(--muted);
  text-decoration: none;
  font-family: Syne, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

footer a span { font-weight: 600; letter-spacing: 0.08em; }

footer a:hover,
footer a:focus-visible {
  color: var(--gold);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .ticket { transition: none; }
}