:root {
  --black: #030000;
  --black-soft: #080101;
  --red-deep: #2a0000;
  --red-blood: #880000;
  --red-glow: #ff0000;
  --red-hot: #ff2b22;
  --gold: #b2874a;
  --gold-soft: rgba(178, 135, 74, 0.48);
  --white: #f7eee6;
  --muted: #c6aaa2;
  --dim: #8f706b;
  --line: rgba(255, 0, 0, 0.2);
  --line-gold: rgba(178, 135, 74, 0.24);
  --max: 1180px;
  --pad: clamp(1.25rem, 3vw, 3rem);
  --anton: "Anton", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--black);
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 20% 8%, rgba(255, 0, 0, 0.18), transparent 30rem),
    radial-gradient(circle at 82% 20%, rgba(136, 0, 0, 0.28), transparent 28rem),
    linear-gradient(180deg, #080000 0%, #030000 40%, #060101 100%);
  color: var(--white);
  font-family: var(--sans);
  line-height: 1.6;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

img, svg { max-width: 100%; }

a {
  color: inherit;
  text-decoration: none;
}

p {
  margin: 0;
  color: var(--muted);
}

p + p { margin-top: 1rem; }

h1, h2, h3 {
  margin: 0;
  line-height: 1.04;
  overflow: visible;
}

h2 {
  font-family: var(--anton);
  font-size: clamp(2.08rem, 5.6vw, 5.2rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--white);
  padding-block: 0.04em;
}

h3 {
  font-size: 0.88rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--white);
  padding-block: 0.03em;
}

button, input, textarea, select { font: inherit; }

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 999;
  background: var(--white);
  color: var(--black);
  padding: 0.65rem 0.9rem;
  transform: translateY(-180%);
  transition: transform 180ms ease;
}

.skip-link:focus { transform: translateY(0); }

.section-pad {
  width: min(var(--max), calc(100% - var(--pad) * 2));
  margin: 0 auto;
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem clamp(1rem, 3vw, 2.5rem);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.26), transparent);
  transition: background 220ms ease, border-color 220ms ease;
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: rgba(3, 0, 0, 0.84);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 0, 0, 0.12);
}

.brand { display: inline-flex; }

.wordmark {
  display: inline-block;
  font-family: var(--anton);
  font-weight: 400;
  color: var(--red-glow);
  line-height: 0.92;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: normal;
  font-kerning: normal;
  font-feature-settings: normal;
  text-shadow: 0 0 0.5rem rgba(255, 0, 0, 0.18), 0 0 1.8rem rgba(255, 0, 0, 0.14);
  padding-bottom: 0.03em;
}

.wordmark--nav {
  font-size: 3rem;
  transform: none !important;
}

.wordmark--hero {
  /* Proportions matched to the reference banner: large VEIL wordmark,
     with the subtitle much smaller and only slightly wider below it. */
  font-size: clamp(7rem, 20.5vw, 17.35rem);
  margin: 0;
  transform: none !important;
}

.wordmark--footer { font-size: clamp(2.5rem, 6vw, 4.5rem); }

.site-nav {
  display: flex;
  gap: clamp(1rem, 3vw, 2.4rem);
  align-items: center;
}

.site-nav a {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 238, 230, 0.82);
  transition: color 160ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible { color: var(--red-hot); }

.nav-toggle {
  display: none;
  border: 1px solid var(--line);
  color: var(--white);
  background: rgba(0, 0, 0, 0.28);
  padding: 0.7rem 0.75rem;
  cursor: pointer;
}

.nav-toggle__line {
  display: block;
  width: 1.35rem;
  height: 1px;
  background: currentColor;
  margin: 0.28rem 0;
}

.nav-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.hero {
  min-height: 100svh;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(255, 0, 0, 0.16);
  background: #120000;
}

.hero-radial {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, #ff0000 0%, #b70000 17%, #5a0000 43%, #320101 74%, #070000 100%);
}

.hero-radial::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.24) 27%, transparent 58%);
}

.hero-radial::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 0%, transparent 34%, rgba(0, 0, 0, 0.68) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.64), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.64));
}

.hero-curtain {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
  transform-origin: top center;
  filter:
    sepia(1)
    saturate(10)
    hue-rotate(312deg)
    brightness(0.34)
    contrast(1.82);
  opacity: 0.78;
  mix-blend-mode: multiply;
}

.hero-curtain--back {
  z-index: 1;
}

.hero-curtain--ghost {
  z-index: 2;
  opacity: 0.38;
}

.hero-curtain--front {
  z-index: 5;
}

.hero-curtain--left-a,
.hero-curtain--right-a,
.hero-curtain--left-b,
.hero-curtain--right-b {
  top: -9%;
  height: 124%;
  width: auto;
}

.hero-curtain--left-a {
  left: -6%;
  opacity: 0.76;
  animation: heroPanelLeftA 18s ease-in-out infinite alternate;
}

.hero-curtain--right-a {
  right: -6%;
  opacity: 0.76;
  animation: heroPanelRightA 19s ease-in-out infinite alternate;
}

.hero-curtain--left-b {
  left: 8%;
  filter:
    sepia(1)
    saturate(12)
    hue-rotate(314deg)
    brightness(0.46)
    contrast(1.5);
  mix-blend-mode: color-burn;
  animation: heroPanelLeftB 26s ease-in-out infinite alternate;
}

.hero-curtain--right-b {
  right: 8%;
  opacity: 0.24;
  filter:
    sepia(1)
    saturate(12)
    hue-rotate(314deg)
    brightness(0.46)
    contrast(1.5);
  mix-blend-mode: color-burn;
  animation: heroPanelRightB 25s ease-in-out infinite alternate;
}

.hero-curtain--center-narrow {
  top: -8%;
  height: 122%;
  width: auto;
  left: 50%;
  opacity: 0.28;
  filter:
    sepia(1)
    saturate(11)
    hue-rotate(314deg)
    brightness(0.36)
    contrast(1.9);
  transform: translateX(-50%);
  animation: heroNarrowMid 22s ease-in-out infinite alternate;
}

@keyframes heroPanelLeftA {
  from { transform: translateX(-4%) scale(1.1) skewX(-0.7deg); }
  to   { transform: translateX(4%) scale(1.16) skewX(0.7deg); }
}

@keyframes heroPanelRightA {
  from { transform: translateX(4%) scale(1.1) skewX(0.7deg); }
  to   { transform: translateX(-4%) scale(1.16) skewX(-0.7deg); }
}

@keyframes heroPanelLeftB {
  from { transform: translateX(5%) scale(1.18); }
  to   { transform: translateX(-5%) scale(1.25); }
}

@keyframes heroPanelRightB {
  from { transform: translateX(-5%) scale(1.18); }
  to   { transform: translateX(5%) scale(1.25); }
}

@keyframes heroNarrowMid {
  from { transform: translateX(-58%) scale(1.12) skewX(-0.6deg); }
  to   { transform: translateX(-42%) scale(1.2) skewX(0.6deg); }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.68), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.68)),
    radial-gradient(ellipse at center, transparent 0%, transparent 44%, rgba(0, 0, 0, 0.58) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.28) 62%, rgba(0,0,0,0.78));
}

.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: 0.13;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}

.hero__content {
  position: relative;
  z-index: 4;
  padding-top: 7rem;
  padding-bottom: 4rem;
  text-align: center;
}

.eyebrow,
.section-kicker {
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero__identity {
  display: inline-grid;
  justify-items: center;
  align-items: center;
  margin: 0.1rem auto 0.2rem;
  transform: none !important;
  width: fit-content;
  max-width: 94vw;
}

.tagline {
  font-family: var(--anton);
  /* Reference banner ratio: subtitle is about 0.28–0.32x the VEIL height,
     not a full-width second hero headline. */
  font-size: clamp(2.25rem, 4.15vw, 4.4rem);
  line-height: 0.96;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--red-glow);
  width: auto;
  max-width: 92vw;
  margin: -0.08em auto 0;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 0 1.6rem rgba(255, 0, 0, 0.18);
  padding-bottom: 0.04em;
}

.hero__copy {
  max-width: 760px;
  margin: 1.25rem auto 0;
  color: rgba(247, 238, 230, 0.84);
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.hero__actions {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.85rem 1.25rem;
  border: 1px solid var(--red-glow);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.button:hover,
.button:focus-visible { transform: translateY(-1px); }

.button--primary {
  background: var(--red-glow);
  color: #130000;
  box-shadow: 0 0 1.4rem rgba(255, 0, 0, 0.18);
}

.button--primary:hover,
.button--primary:focus-visible { background: var(--white); border-color: var(--white); }

.button--ghost {
  background: rgba(0, 0, 0, 0.32);
  color: var(--white);
}

.button--ghost:hover,
.button--ghost:focus-visible { border-color: var(--gold); color: var(--gold); }

.intro,
.experience,
.etiquette,
.tickets,
.faq,
.site-footer {
  padding-top: clamp(4.5rem, 10vw, 8rem);
  padding-bottom: clamp(4.5rem, 10vw, 8rem);
}

.intro {
  border-bottom: 1px solid rgba(255, 0, 0, 0.12);
}

.intro__grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.82fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.intro__copy {
  font-size: clamp(1.02rem, 1.45vw, 1.22rem);
}

.statement {
  color: var(--red-hot);
  font-weight: 800;
}

.section-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 2.5rem;
}

.section-heading h2 { margin-top: 0.7rem; }

.cards {
  display: grid;
  gap: 1px;
  background: linear-gradient(90deg, transparent, var(--line), var(--line-gold), transparent);
  border: 1px solid rgba(255, 0, 0, 0.1);
}

.cards--four { grid-template-columns: repeat(4, 1fr); }

.card {
  min-height: 18rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background:
    linear-gradient(180deg, rgba(255, 0, 0, 0.06), rgba(0, 0, 0, 0.1)),
    rgba(8, 1, 1, 0.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.card h3 { margin-top: 1.2rem; }
.card p { margin-top: 0.9rem; color: rgba(247, 238, 230, 0.68); }

.icon {
  width: 3rem;
  height: 3rem;
  position: relative;
}

.icon--glow {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,0,0,0.95) 0 16%, transparent 17% 100%);
  box-shadow: 0 0 2rem rgba(255, 0, 0, 0.42);
}

.icon--glow::before,
.icon--glow::after {
  content: "";
  position: absolute;
  inset: 0.4rem;
  border: 1px solid rgba(255,0,0,0.7);
  border-radius: 50%;
}

.icon--glow::after { inset: 0.9rem; }

.icon--curtain {
  background: repeating-linear-gradient(90deg, rgba(255,0,0,0.9) 0 2px, transparent 2px 7px);
  transform: skewX(-8deg);
}

.icon--eye::before {
  content: "";
  position: absolute;
  inset: 0.85rem 0.2rem;
  border: 2px solid rgba(255,0,0,0.9);
  border-radius: 50% / 55%;
}

.icon--eye::after {
  content: "";
  position: absolute;
  width: 0.52rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--red-glow);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 1rem rgba(255,0,0,0.55);
}

.icon--bag {
  border: 2px solid rgba(255,0,0,0.88);
  border-radius: 0.2rem 0.2rem 0.5rem 0.5rem;
  width: 2.6rem;
  height: 2.7rem;
  margin-top: 0.2rem;
}

.icon--bag::before {
  content: "";
  position: absolute;
  width: 1.2rem;
  height: 0.7rem;
  border: 2px solid rgba(255,0,0,0.88);
  border-bottom: 0;
  border-radius: 1rem 1rem 0 0;
  left: 0.7rem;
  top: -0.7rem;
}

.etiquette {
  position: relative;
  border-top: 1px solid rgba(178, 135, 74, 0.16);
  border-bottom: 1px solid rgba(178, 135, 74, 0.16);
}

.etiquette__content {
  max-width: 980px;
  margin: 0 auto;
}

.etiquette__content h2 { margin-top: 0.7rem; }

.rules {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255,0,0,0.15);
  border: 1px solid rgba(255,0,0,0.16);
}

.rules article {
  padding: 1.35rem;
  background: rgba(6, 0, 0, 0.9);
}

.rule-number {
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--red-hot);
  letter-spacing: 0.16em;
  margin-bottom: 0.8rem;
}

.rules p { margin-top: 0.75rem; color: rgba(247,238,230,0.66); }

.tickets {
  background:
    linear-gradient(180deg, transparent, rgba(136,0,0,0.11), transparent),
    radial-gradient(circle at 88% 36%, rgba(255,0,0,0.18), transparent 20rem);
}

.ticket-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: clamp(1.4rem, 4vw, 3rem);
  border: 1px solid rgba(255, 0, 0, 0.2);
  background:
    linear-gradient(90deg, rgba(255,0,0,0.11), rgba(178,135,74,0.06), rgba(0,0,0,0.38)),
    rgba(9, 1, 1, 0.78);
  box-shadow: 0 0 3rem rgba(0,0,0,0.32);
}

.ticket-card h2 {
  margin-top: 0.55rem;
  font-size: clamp(1.92rem, 4.4vw, 4.16rem);
}

.ticket-card p { max-width: 620px; margin-top: 1rem; }

.fine-print {
  color: var(--dim) !important;
  font-size: 0.82rem;
}

.accordion {
  max-width: 920px;
  margin: 0 auto;
  border-top: 1px solid rgba(255,0,0,0.18);
}

details {
  border-bottom: 1px solid rgba(255,0,0,0.18);
  background: rgba(0,0,0,0.16);
}

summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 0;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}

summary::-webkit-details-marker { display: none; }

summary::after {
  content: "+";
  color: var(--red-hot);
  font-size: 1.2rem;
  line-height: 1;
}

details[open] summary::after { content: "–"; }

details p {
  padding: 0 0 1.1rem;
  max-width: 760px;
}

.site-footer {
  border-top: 1px solid rgba(255,0,0,0.16);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2rem;
  align-items: end;
}

.site-footer p:nth-child(2) {
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
}

@media (max-width: 880px) {
  .nav-toggle { display: block; z-index: 52; }
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 51;
    display: grid;
    place-content: center;
    gap: 1.4rem;
    background: rgba(4, 0, 0, 0.96);
    transform: translateY(-100%);
    transition: transform 220ms ease;
  }
  .site-nav a { font-size: 1.1rem; text-align: center; }
  body.nav-open .site-nav { transform: translateY(0); }
  .intro__grid,
  .ticket-card,
  .site-footer { grid-template-columns: 1fr; }
  .cards--four { grid-template-columns: repeat(2, 1fr); }
  .ticket-card .button { width: 100%; }
  .site-footer { align-items: start; }
}

@media (max-width: 560px) {
  :root { --pad: 1rem; }
  .hero__content { padding-top: 6.5rem; }
  .wordmark--nav { font-size: 2.25rem; }
  .wordmark--hero { font-size: clamp(5.4rem, 24vw, 8.6rem); }
  .tagline { font-size: clamp(1.55rem, 7.4vw, 2.35rem); width: auto; margin: -0.04em auto 0; white-space: nowrap; }
  .hero__actions { flex-direction: column; }
  .button { width: 100%; }
  .cards--four,
  .rules { grid-template-columns: 1fr; }
  .card { min-height: 14rem; }
  summary { font-size: 0.82rem; letter-spacing: 0.045em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}


/* v9 mobile curtain reliability fix
   The hero curtain assets are now pre-tinted red. This avoids relying on CSS filter colorization,
   which can fail or render inconsistently on mobile Firefox.
*/
.hero-curtain {
  display: block;
  max-width: none !important;
  object-fit: contain;
  filter: none !important;
  backface-visibility: hidden;
  transform-style: flat;
}

.hero-curtain--left-a,
.hero-curtain--right-a,
.hero-curtain--left-b,
.hero-curtain--right-b,
.hero-curtain--center-narrow {
  max-width: none !important;
}

.hero-curtain--left-a,
.hero-curtain--right-a {
  opacity: 0.82;
}

.hero-curtain--left-b {
  opacity: 0.44;
}

.hero-curtain--right-b {
  opacity: 0.30;
}

.hero-curtain--center-narrow {
  opacity: 0.34;
}

/* Mobile Firefox was rendering the PNGs like normal page images when the older CSS was cached.
   This mobile block makes the hero layers explicit, keeps them inside the hero, and reduces layer complexity.
*/
@media (max-width: 700px) {
  .hero {
    min-height: 100svh;
    max-height: none;
    overflow: hidden;
  }

  .hero-curtain {
    position: absolute !important;
    top: -6svh !important;
    height: 112svh !important;
    width: auto !important;
    max-width: none !important;
  }

  .hero-curtain--left-a {
    left: -78vw !important;
    right: auto !important;
    opacity: 0.72;
  }

  .hero-curtain--right-a {
    right: -78vw !important;
    left: auto !important;
    opacity: 0.72;
  }

  .hero-curtain--left-b {
    left: -52vw !important;
    right: auto !important;
    opacity: 0.28;
  }

  .hero-curtain--right-b {
    right: -50vw !important;
    left: auto !important;
    opacity: 0.24;
  }

  .hero-curtain--center-narrow {
    left: 50% !important;
    top: -4svh !important;
    height: 108svh !important;
    opacity: 0.20;
  }

  .hero__content {
    z-index: 4;
  }

  .hero__scrim {
    z-index: 6;
  }

  .hero__grain {
    z-index: 7;
  }
}



/* v10 mobile nav fix
   On mobile Firefox, the transform-hidden full-screen nav could leak into the top of the hero while scrolling.
   This version removes the closed nav from layout/paint entirely and only displays it when body.nav-open is present.
*/
@media (max-width: 880px) {
  .site-header {
    overflow: visible;
  }

  .site-nav {
    display: none !important;
    position: fixed;
    inset: 0;
    z-index: 51;
    place-content: center;
    gap: 1.4rem;
    min-height: 100svh;
    background: rgba(4, 0, 0, 0.97);
    transform: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  body.nav-open .site-nav {
    display: grid !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .site-nav a {
    display: block;
    font-size: 1.1rem;
    text-align: center;
  }
}