/* Ambush black + red with the pumpkin orange from the event poster. */

@font-face {
  font-family: 'Edo';
  src: url('assets/edo.ttf') format('truetype');
  font-display: swap;
}

:root {
  --pumpkin: #ff7a1a;
  --pumpkin-glow: rgba(255, 122, 26, 0.35);
  --ambush-red: #b91c1c;
  --ink: #f5f5f4;
  --ink-soft: #b9b4ae;
  --surface: #1a1715;
  --line: rgba(255, 255, 255, 0.12);
  --danger: #ff6b61;
  --display: 'Edo', Impact, 'Arial Narrow Bold', sans-serif;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #0b0908;
  color: var(--ink);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 3px solid var(--pumpkin);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -100px;
  z-index: 10;
  padding: 0.5rem 0.75rem;
  border-radius: 0.35rem;
  background: var(--pumpkin);
  color: #1a0d00;
  font-weight: 700;
}

.skip-link:focus {
  top: 0.5rem;
}

.wrap {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 100dvh;
  display: grid;
  /* One column that is never wider than the screen, whatever is inside it. */
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  justify-items: center;
  padding: 2rem 1rem 4rem;
}

.fog {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, var(--pumpkin-glow), transparent 70%),
    radial-gradient(ellipse 40% 30% at 10% 60%, rgba(215, 51, 41, 0.18), transparent 70%),
    radial-gradient(ellipse 50% 35% at 90% 85%, rgba(130, 60, 200, 0.16), transparent 70%);
  /* Fade the glow in from the top so it never shows a hard edge where the
     hero image ends. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18rem);
  mask-image: linear-gradient(180deg, transparent 0, #000 18rem);
  animation: drift 14s ease-in-out infinite alternate;
}

@keyframes drift {
  to {
    transform: translateY(-2%) scale(1.05);
  }
}

/* ---------- Top bar ---------- */

:root {
  --topbar-h: 3.5rem;
  /* The artwork is 1672 px wide: never show it wider than that. */
  --art-w: min(100vw, 1672px);
  --art-h: calc(var(--art-w) * 0.5628);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--topbar-h);
  background: rgba(11, 9, 8, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  height: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.topbar-logo {
  flex: none;
  height: 2.4rem;
  width: auto;
}

.topbar-cta {
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ambush-red), var(--pumpkin));
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  /* Last resort on huge text sizes: shorten with "..." rather than push the page wider. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 22rem) {
  .topbar-cta {
    padding: 0.5rem 0.9rem;
  }

  .topbar-cta-more {
    display: none;
  }
}

/* ---------- Hero ---------- */

.hero-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  justify-items: center;
  align-items: start;
  min-height: calc(100vh - var(--topbar-h));
  min-height: calc(100svh - var(--topbar-h));
  padding: clamp(2rem, 7vh, 4.5rem) 1rem 3.5rem;
  text-align: center;
}

/* Phones: a portrait crop of the artwork (tires, blue wall, kneeling player). */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('assets/hero-mobile.webp') center bottom / cover no-repeat;
}

/* The soft glow of the picture that fills the sides on wide screens. */
.hero-blur {
  display: none;
}

/* Wide screens: show the artwork at natural size (never stretched), centred,
   with a blurred copy of the same picture filling whatever is left over. */
@media (min-aspect-ratio: 4/5) {
  .hero-band {
    height: min(calc(100vh - var(--topbar-h)), var(--art-h));
    height: min(calc(100svh - var(--topbar-h)), var(--art-h));
    min-height: 34rem;
  }

  .hero-blur {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -4;
    background: url('assets/hero-blur.webp') center / cover no-repeat;
    filter: blur(30px) brightness(0.5) saturate(1);
    transform: scale(1.25);
  }

  .hero-bg {
    left: 50%;
    right: auto;
    width: var(--art-w);
    transform: translateX(-50%);
    background-image: url('assets/hero-1600.webp');
    background-position: center top;
  }
}

/* Wider than the artwork itself: fade its edges into the glow, and fade the
   glow itself out into the page colour so it reads as a vignette. */
@media (min-width: 1673px) {
  .hero-band::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      #0b0908 0%,
      rgba(11, 9, 8, 0.6) 14%,
      rgba(11, 9, 8, 0) 32%,
      rgba(11, 9, 8, 0) 68%,
      rgba(11, 9, 8, 0.6) 86%,
      #0b0908 100%
    );
  }

  .hero-bg {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  }
}

/* Shade where the text sits, keep the picture vivid below, and fade the
   bottom into the page colour. */
.hero-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(11, 9, 8, 0.62) 0%,
    rgba(11, 9, 8, 0.5) 38%,
    rgba(11, 9, 8, 0.1) 58%,
    rgba(11, 9, 8, 0) 78%,
    #0b0908 100%
  );
}

@media (min-aspect-ratio: 1/1) {
  .hero-band::after {
    background: linear-gradient(
      180deg,
      rgba(11, 9, 8, 0.55) 0%,
      rgba(11, 9, 8, 0.3) 38%,
      rgba(11, 9, 8, 0) 60%,
      rgba(11, 9, 8, 0) 84%,
      #0b0908 100%
    );
  }
}

.hero {
  width: 100%;
  max-width: 44rem;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
}

.eyebrow {
  margin: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pumpkin);
}

.hero > * {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* On phones, place and date stack as two lines with no separator, and the
   letter spacing tightens so each usually fits on one line. They still wrap if
   the phone's text size is turned up, instead of running off the screen. */
@media (max-width: 40rem) {
  .eyebrow {
    letter-spacing: 0.1em;
  }

  .eyebrow span:not(.eyebrow-sep) {
    display: block;
  }

  .eyebrow-sep {
    display: none;
  }
}

.title,
.tagline,
.section-title,
.card-title,
.success-title {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.05;
}

.title {
  margin: 0;
  font-size: clamp(3rem, 11vw, 5.5rem);
  color: #fff;
  text-shadow:
    0 2px 18px rgba(0, 0, 0, 0.85),
    0.05em 0.05em 0 var(--ambush-red);
}

.tagline {
  margin: 0;
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}

.cta,
.submit {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ambush-red), var(--pumpkin));
  color: #fff;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 0 1.25rem var(--pumpkin-glow);
  cursor: pointer;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease;
}

.cta {
  display: inline-block;
  padding: 1rem 1.75rem;
}

.cta:hover,
.submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 2rem var(--pumpkin-glow);
}

.hero .cta-note {
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.cta-note,
.muted,
.section-note {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

/* ---------- Sections ---------- */

.section {
  width: 100%;
  max-width: 62rem;
  display: grid;
  gap: 1rem;
}

.section-title,
.card-title {
  margin: 0;
  font-size: 2.25rem;
  color: #fff;
}

.detail-list {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  overflow: hidden;
}

.detail-row {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--line);
}

.detail-row:last-child {
  border-bottom: 0;
}

@media (min-width: 40rem) {
  .detail-row {
    grid-template-columns: 9rem 1fr;
    gap: 1rem;
  }
}

.detail-row dt {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pumpkin);
}

.detail-row dd {
  margin: 0;
}

/* ---------- Key facts ---------- */

.factbar {
  width: 100%;
  max-width: 62rem;
  position: relative;
  z-index: 2;
  /* On top of the page's own top padding: clear space below the hero image. */
  margin-top: 1.5rem;
}

.factbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10.5rem, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  overflow: hidden;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.5);
}

@media (min-width: 52rem) {
  .factbar ul {
    grid-template-columns: 1.05fr 0.85fr 2.1fr 0.85fr;
  }
}

/* Phones: date + gates share a row; the address and ages get the full width. */
@media (max-width: 51.99rem) {
  .factbar li:nth-child(n + 3) {
    grid-column: 1 / -1;
  }
}

.factbar li {
  display: grid;
  gap: 0.15rem;
  padding: 0.9rem 1rem;
  background: rgba(20, 16, 14, 0.94);
}

.factbar span {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pumpkin);
}

.factbar strong {
  font-size: 1.0625rem;
}

/* ---------- Schedule ---------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.25rem;
  display: grid;
  gap: 0.5rem;
  border-left: 2px solid rgba(255, 122, 26, 0.4);
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 6rem) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.3);
}

@media (min-width: 40rem) {
  .tl-item {
    grid-template-columns: 7.5rem 1fr;
  }
}

/* Very narrow screens or very large text: time above the activity. */
@media (max-width: 20rem) {
  .tl-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }
}

.tl-item::before {
  content: '';
  position: absolute;
  left: calc(-1.25rem - 6px);
  top: 1.05rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pumpkin);
}

.tl-item time {
  font-weight: 700;
  color: var(--pumpkin);
  font-variant-numeric: tabular-nums;
}

.tl-match {
  padding-block: 0.9rem;
  border-color: rgba(255, 122, 26, 0.5);
  background: rgba(255, 122, 26, 0.12);
}

.tl-match strong {
  margin-right: 0.6rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.4rem;
  color: #fff;
}

.tl-break {
  padding-block: 0.35rem;
  border-style: dashed;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.tl-break::before {
  width: 6px;
  height: 6px;
  left: calc(-1.25rem - 4px);
  top: 0.85rem;
  background: var(--ink-soft);
}

.tl-award {
  border-color: var(--pumpkin);
  background: linear-gradient(135deg, rgba(185, 28, 28, 0.4), rgba(255, 122, 26, 0.28));
}

.tl-award strong {
  font-size: 1.1rem;
}

/* ---------- Long-form pages (privacy notice) ---------- */

.prose .section {
  max-width: 46rem;
  gap: 0.75rem;
}

/* The Edo display face has no colon glyph, so this title uses the body font
   to show "Reservations: Privacy Notice" exactly as written. */
.prose .section-title {
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(1.6rem, 5vw, 2.25rem);
  line-height: 1.15;
}

.prose h2 {
  margin: 1.5rem 0 0;
  font-size: 1.25rem;
  color: #fff;
}

.prose p,
.prose li {
  margin: 0;
  line-height: 1.65;
  color: var(--ink);
}

.prose ul {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.4rem;
}

.prose .meta {
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.prose a {
  color: var(--pumpkin);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ---------- Tickets ---------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: 0.6rem;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding: 0.8rem 1rem 0.8rem 3.25rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  color: var(--ink);
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0.9rem;
  top: 0.85rem;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pumpkin);
  color: #1a0d00;
  font-weight: 700;
  font-size: 0.85rem;
}

.steps strong {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 1.05rem;
  color: #fff;
}

.price-list {
  margin: 0.5rem 0 0;
  display: grid;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  overflow: hidden;
  text-align: left;
}

.price-list div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1rem;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--line);
}

.price-list div:last-child {
  border-bottom: 0;
}

.price-list dd {
  margin: 0;
  font-weight: 700;
  color: var(--pumpkin);
}

.price-note {
  color: var(--ink-soft);
  font-size: 0.875rem;
}

.price-tbd {
  margin: 0.5rem 0 0;
  padding: 0.6rem 1rem;
  border: 1px dashed var(--line);
  border-radius: 0.5rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* ---------- Questions ---------- */

.faq {
  display: grid;
  gap: 0.5rem;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.3);
}

.faq-item summary {
  overflow-wrap: break-word;
  padding: 0.85rem 1rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}

.faq-item summary::marker {
  color: var(--pumpkin);
}

.faq-item p {
  margin: 0;
  padding: 0 1rem 0.9rem;
  color: var(--ink-soft);
}

/* ---------- Reservation card ---------- */

/* After a successful reservation only the confirmation is shown. */
.card.is-reserved .before-reserve {
  display: none;
}

.card {
  width: 100%;
  max-width: 34rem;
  display: grid;
  gap: 0.75rem;
  padding: 1.5rem;
  border: 1px solid rgba(255, 122, 26, 0.35);
  border-top: 4px solid var(--pumpkin);
  border-radius: 0.65rem;
  background: var(--surface);
  box-shadow:
    0 1.5rem 3rem rgba(0, 0, 0, 0.5),
    0 0 3rem rgba(255, 122, 26, 0.08);
  scroll-margin-top: 1rem;
}

.form {
  display: grid;
  gap: 1rem;
}

.name-row {
  display: grid;
  gap: 1rem;
}

@media (min-width: 30rem) {
  .name-row {
    grid-template-columns: 1fr 1fr;
  }
}

.field {
  display: grid;
  gap: 0.5rem;
}

.field > label {
  font-size: 0.9375rem;
  font-weight: 500;
}

.optional {
  font-weight: 400;
  color: var(--ink-soft);
}

/* 16px text: anything smaller makes iOS Safari zoom on focus. */
input[type='text'],
input[type='email'],
input[type='password'],
select {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 2px solid transparent;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: 1rem;
}

[aria-invalid='true'] {
  border-color: var(--danger) !important;
}

.field-error {
  margin: 0;
  font-size: 0.875rem;
  color: var(--danger);
}

.error-summary {
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 2px solid var(--danger);
  background: rgba(255, 107, 97, 0.12);
  color: #fff;
}

.checkbox-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.9375rem;
  cursor: pointer;
}

.checkbox-row input {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.1rem;
  accent-color: var(--pumpkin);
}

.submit {
  min-height: 3.25rem;
  padding: 0.75rem 1.25rem;
}

.submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Share with a friend: secondary, so it never competes with Reserve. */
.share-block {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--line);
}

.share-button {
  min-height: 2.75rem;
  padding: 0.6rem 1.5rem;
  border: 1px solid var(--pumpkin);
  border-radius: 999px;
  background: transparent;
  color: var(--pumpkin);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms ease;
}

.share-button:hover {
  background: rgba(255, 122, 26, 0.12);
}

.share-status {
  margin: 0;
  min-height: 1.25rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-align: center;
  overflow-wrap: anywhere;
}

.consent-block {
  display: grid;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
}

.fineprint {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.fineprint p {
  margin: 0;
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.success {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  text-align: center;
  padding: 1rem 0;
}

.success-icon {
  margin: 0;
  font-size: 3rem;
  animation: bob 2.4s ease-in-out infinite;
}

@keyframes bob {
  50% {
    transform: translateY(-6px) rotate(-6deg);
  }
}

.success-title {
  margin: 0;
  font-size: 2.25rem;
  color: var(--pumpkin);
}

.success-list {
  width: 100%;
  max-width: 26rem;
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.4rem;
  text-align: left;
  font-size: 0.9375rem;
  color: var(--ink);
}

.success .price-list {
  width: 100%;
  max-width: 26rem;
}

.success-body {
  margin: 0;
  color: var(--ink-soft);
}

.footer {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
}

.social a {
  display: inline-block;
  padding: 0.35rem 0;
  color: var(--pumpkin);
  font-weight: 700;
  text-decoration: none;
}

.social a:hover {
  text-decoration: underline;
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .fog,
  .success-icon {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
  .cta,
  .submit {
    transition: none;
  }
}