@font-face {
  font-family: "Big Shoulders Display";
  src: url("./assets/fonts/big-shoulders-display-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Garet";
  src: url("./assets/fonts/garet-book.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
}

@font-face {
  font-family: "Garet";
  src: url("./assets/fonts/garet-heavy.woff2") format("woff2");
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
}

:root {
  --after-yellow: #fdd381;
  --after-gold: #cfa55e;
  --ivory: #fff6e8;
  --ivory-muted: #d8d0c4;
  --night: #0b0a09;
  --gold: #cfa55e;
  --line: rgba(255, 246, 232, .22);
  --nav-height: 58px;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  background: var(--night);
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: geometricPrecision;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  overflow-x: hidden;
  color: var(--ivory);
  background: var(--night);
  font-family: "Garet", "Avenir Next", Avenir, "Century Gothic", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-shell {
  width: min(100%, 480px);
  min-height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--night);
}

.page-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: calc(var(--nav-height) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 14px 0;
  border-bottom: 1px solid rgba(253, 211, 129, .46);
  background: rgba(11, 10, 9, .97);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.page-nav a {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--nav-height);
  color: rgba(255, 246, 232, .78);
  font-size: clamp(.69rem, 3.1vw, .82rem);
  font-weight: 700;
  letter-spacing: .055em;
  text-decoration: none;
  text-transform: uppercase;
}

.page-nav a.is-active { color: var(--ivory); }

.page-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 26%;
  right: 26%;
  bottom: 8px;
  height: 3px;
  border-radius: 99px;
  background: var(--after-yellow);
}

.page-nav a:focus-visible,
.primary-cta:focus-visible {
  outline: 3px solid var(--ivory);
  outline-offset: -3px;
}

.page-hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - var(--nav-height));
  overflow: hidden;
  background: var(--night);
}

.scene-photo,
.scene-shade {
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  width: 100%;
}

.scene-photo {
  height: 760px;
  object-fit: cover;
  object-position: center top;
  filter: saturate(.94) contrast(1.06) brightness(.8);
}

.scene-shade {
  z-index: -1;
  height: 940px;
  background:
    linear-gradient(to bottom, rgba(11, 10, 9, .08) 0%, rgba(11, 10, 9, .24) 34%, rgba(11, 10, 9, .88) 75%, var(--night) 96%),
    linear-gradient(90deg, rgba(11, 10, 9, .12), transparent 35%, rgba(11, 10, 9, .08));
}

.experience-hero .scene-photo { height: 720px; object-position: 50% 35%; filter: saturate(.92) contrast(1.05) brightness(.72); }
.experience-hero .scene-shade { height: 840px; background: linear-gradient(to bottom, rgba(11, 10, 9, .18), rgba(11, 10, 9, .63) 44%, var(--night) 91%); }
.reserve-hero .scene-photo { height: 600px; object-position: 50% 32%; filter: saturate(.9) contrast(1.06) brightness(.68); }
.reserve-hero .scene-shade { height: 760px; background: linear-gradient(to bottom, rgba(11, 10, 9, .22), rgba(11, 10, 9, .72) 43%, var(--night) 90%); }

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 38px 24px max(36px, env(safe-area-inset-bottom));
}

.presented-by {
  margin: 0 auto 10px;
  color: var(--ivory);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
}

.after-hours-wordmark {
  display: block;
  width: min(100%, 350px);
  height: auto;
  margin: 0 auto 12px;
  object-fit: contain;
}

.after-hours-wordmark.compact { width: min(82%, 300px); margin-bottom: 4px; }

h1,
.closing-line,
.price-block strong {
  font-family: "Big Shoulders Display", "Arial Narrow", Arial, sans-serif;
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  margin: 12px 0 14px;
  font-size: clamp(2.55rem, 12.5vw, 4rem);
  line-height: .92;
  letter-spacing: .005em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .58);
}

.experience-hero h1 { margin-top: 14px; font-size: clamp(2.35rem, 11vw, 3.65rem); }
.reserve-hero h1 { margin: 12px 0 28px; font-size: clamp(2rem, 9.8vw, 3.15rem); }

.pillars {
  margin: 0 0 30px;
  color: var(--after-yellow);
  font-size: clamp(.84rem, 3.7vw, 1rem);
  font-weight: 700;
  letter-spacing: .065em;
  line-height: 1.55;
  text-align: center;
  text-transform: uppercase;
}

.pillars span { color: var(--gold); }

.feature-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 30px;
}

.mini-feature {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  padding: 18px 10px 17px;
  border: 1px solid var(--line);
  background: rgba(11, 10, 9, .66);
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mini-feature h2,
.experience-item h2 {
  margin: 0;
  color: var(--ivory);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1.28;
  text-transform: uppercase;
}

.mini-feature p {
  margin: 7px 0 0;
  color: var(--ivory-muted);
  font-size: .84rem;
  line-height: 1.45;
}

.icon-orbit {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 13px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  background: rgba(11, 10, 9, .62);
}

.icon-orbit svg { width: 25px; height: 25px; stroke-width: 1.65; }

.date-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 20px;
  text-align: center;
  text-transform: uppercase;
}

.date-lockup span { font-size: .77rem; font-weight: 600; letter-spacing: .13em; }
.date-lockup strong { margin: 4px 0 1px; font-family: "Big Shoulders Display", "Arial Narrow", Arial, sans-serif; font-size: 2.9rem; font-weight: 600; line-height: .9; }
.date-lockup em { margin-top: 9px; color: var(--after-yellow); font-size: .75rem; font-style: normal; font-weight: 700; letter-spacing: .13em; }

.hosts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 6px -16px 26px;
  align-items: end;
}

.host-card { min-width: 0; margin: 0; text-align: center; }
.host-card img { display: block; width: 100%; height: clamp(250px, 72vw, 330px); object-fit: contain; object-position: center bottom; }
.host-card figcaption { position: relative; z-index: 1; min-height: 48px; margin-top: -5px; padding: 12px 3px; border-top: 1px solid rgba(253, 211, 129, .5); background: rgba(11, 10, 9, .9); }
.host-card strong { display: block; color: var(--after-yellow); font-family: "Big Shoulders Display", "Arial Narrow", Arial, sans-serif; font-size: clamp(.92rem, 4.1vw, 1.14rem); font-weight: 700; letter-spacing: .025em; line-height: 1.05; text-transform: uppercase; }
.host-card span { display: block; color: var(--ivory-muted); font-size: clamp(.72rem, 3vw, .8rem); line-height: 1.3; }

.venue-lockup { margin-bottom: 22px; text-align: center; }
.venue-lockup > span { display: block; font-family: "Big Shoulders Display", "Arial Narrow", Arial, sans-serif; font-size: 1.9rem; font-weight: 600; line-height: 1.05; text-transform: uppercase; }
.venue-lockup address { margin-top: 9px; color: var(--ivory-muted); font-size: .84rem; font-style: normal; line-height: 1.55; }

.primary-cta {
  display: flex;
  width: 100%;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 18px;
  border: 1px solid var(--after-yellow);
  border-radius: 5px;
  color: var(--night);
  background: var(--after-yellow);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .36);
  font-size: clamp(.78rem, 3.7vw, .95rem);
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .2s ease, background-color .2s ease;
}

.primary-cta svg { flex: 0 0 auto; width: 20px; height: 20px; }
.primary-cta:active { transform: scale(.985); background: var(--after-yellow); opacity: .88; }

.dress-code,
.limited-line { margin: 17px 0 0; color: var(--gold); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-align: center; text-transform: uppercase; }

.experience-list { display: grid; gap: 2px; margin: 28px 0; }
.experience-photo { margin: 22px 0 10px; overflow: hidden; border: 1px solid rgba(207, 165, 94, .55); background: var(--night); }
.experience-photo img { display: block; width: 100%; height: 220px; object-fit: cover; object-position: center 48%; filter: saturate(.88) contrast(1.06) brightness(.78); }
.experience-item { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 15px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255, 246, 232, .1); }
.experience-item:last-child { border-bottom: 0; }
.experience-item .icon-orbit { width: 50px; height: 50px; margin: 0; }
.experience-item h2 { font-size: .82rem; }
.experience-item p { margin: 5px 0 0; color: var(--ivory-muted); font-size: .875rem; line-height: 1.5; }

.bar-note { margin: 6px 0 28px; padding: 16px 18px; border: 1px solid rgba(207, 165, 94, .75); color: var(--gold); background: rgba(11, 10, 9, .75); font-size: .875rem; line-height: 1.5; text-align: center; }
.closing-line { margin: 0 0 22px; font-size: clamp(1.8rem, 8.2vw, 2.6rem); line-height: .98; text-align: center; text-transform: uppercase; }

.organizer-credit {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 28px auto 0;
  padding: 14px 20px 13px;
  border: 1px solid rgba(253, 211, 129, .72);
  border-radius: 4px;
  color: var(--night);
  background: var(--ivory);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
  text-align: center;
}

.organizer-credit span {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.organizer-credit img {
  display: block;
  width: min(45vw, 160px);
  height: auto;
  object-fit: contain;
}

.event-details { display: grid; gap: 0; margin: 0 0 32px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.event-details > div { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 4px; }
.event-details dt { color: var(--gold); }
.event-details dt svg { width: 23px; height: 23px; stroke-width: 1.7; }
.event-details dd { margin: 0; font-size: .875rem; line-height: 1.5; }
.event-details dd strong { font-weight: 700; text-transform: uppercase; }

.price-block { display: flex; flex-direction: column; align-items: center; margin-bottom: 30px; text-align: center; text-transform: uppercase; }
.price-block > span { margin-bottom: 3px; font-family: "Big Shoulders Display", "Arial Narrow", Arial, sans-serif; font-size: 1.5rem; font-weight: 600; }
.price-block strong { display: flex; align-items: flex-start; font-size: clamp(4.1rem, 20vw, 6rem); line-height: .92; letter-spacing: -.04em; }
.price-block small { margin: .11em .08em 0 0; font-size: .5em; }

.ticket-includes { margin-bottom: 26px; }
.ticket-includes h2 { margin: 0 0 18px; color: var(--after-yellow); font-size: 1rem; letter-spacing: .075em; text-align: center; text-transform: uppercase; }
.ticket-includes ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.ticket-includes li { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 12px; align-items: center; font-size: .875rem; line-height: 1.4; }
.ticket-includes li svg { width: 23px; height: 23px; color: var(--after-yellow); fill: rgba(253, 211, 129, .14); stroke-width: 2; }

.limited-line { margin: 2px 0 20px; line-height: 1.5; }
.limited-line span { color: var(--after-yellow); }
.checkout-cta { cursor: pointer; }
.purchase-disclosure {
  margin: 0 0 16px;
  padding: 15px 16px;
  border: 1px solid rgba(253, 211, 129, .52);
  border-radius: 5px;
  background: rgba(11, 10, 9, .82);
  box-shadow: inset 3px 0 0 var(--after-yellow);
}
.purchase-disclosure strong { color: var(--after-yellow); font-size: .78rem; letter-spacing: .075em; text-transform: uppercase; }
.purchase-disclosure p { margin: 7px 0 0; color: var(--ivory-muted); font-size: .78rem; line-height: 1.55; }
.purchase-disclosure a { color: var(--ivory); font-weight: 600; text-underline-offset: 3px; }
.policy-consent { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 13px; color: var(--ivory); font-size: .78rem; font-weight: 500; line-height: 1.5; cursor: pointer; }
.policy-consent input { width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--after-yellow); }
.policy-consent input:focus-visible { outline: 3px solid var(--ivory); outline-offset: 3px; }
.checkout-cta:disabled { border-color: var(--after-gold); color: var(--after-gold); background: rgba(11, 10, 9, .78); cursor: not-allowed; opacity: 1; box-shadow: none; }
.checkout-cta:disabled:active { transform: none; background: rgba(11, 10, 9, .78); }
.checkout-consent-note { margin: 9px 0 0; color: var(--ivory-muted); font-size: .68rem; line-height: 1.45; text-align: center; }
.reserve-close { margin: 28px 0 12px; }
.closing-wordmark { display: block; width: min(64%, 250px); height: auto; margin: 0 auto; }

.site-footer {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 20px 24px max(20px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(253, 211, 129, .24);
  background: #080706;
}
.site-footer a,
.site-footer button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  border: 0;
  color: var(--ivory-muted);
  background: transparent;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .055em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.site-footer a:focus-visible,
.site-footer button:focus-visible { outline: 2px solid var(--after-yellow); outline-offset: 4px; }

.analytics-consent {
  position: fixed;
  z-index: 2000;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  left: max(12px, env(safe-area-inset-left));
  width: min(calc(100% - 24px), 456px);
  margin: 0 auto;
  padding: 18px;
  border: 1px solid rgba(253, 211, 129, .7);
  border-radius: 8px;
  background: rgba(11, 10, 9, .98);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .58);
}
.analytics-consent strong { display: block; color: var(--after-yellow); font-family: "Big Shoulders Display", "Arial Narrow", Arial, sans-serif; font-size: 1.3rem; font-weight: 600; }
.analytics-consent p { margin: 8px 0 14px; color: var(--ivory-muted); font-size: .73rem; line-height: 1.5; }
.analytics-consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 12px; }
.analytics-consent__actions button { min-height: 38px; padding: 8px 13px; border: 1px solid var(--after-yellow); border-radius: 4px; color: var(--night); background: var(--after-yellow); font-size: .67rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; cursor: pointer; }
.analytics-consent__actions button[data-consent="decline"] { color: var(--ivory); background: transparent; }
.analytics-consent__actions a { color: var(--ivory-muted); font-size: .67rem; text-underline-offset: 3px; }
.analytics-consent__actions button:focus-visible,
.analytics-consent__actions a:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }

.policy-page { background: radial-gradient(circle at 80% 0%, rgba(253, 211, 129, .08), transparent 34%), var(--night); }
.policy-main { padding: 32px 24px 44px; }
.policy-header { padding: 0 0 30px; border-bottom: 1px solid var(--line); text-align: center; }
.policy-header .after-hours-wordmark { margin-top: 28px; }
.policy-back { display: inline-flex; align-items: center; gap: 8px; color: var(--ivory-muted); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.policy-back svg { width: 17px; height: 17px; }
.policy-kicker { margin: 14px 0 0; color: var(--after-yellow); font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.policy-header h1 { margin: 14px 0; font-size: clamp(2.5rem, 12vw, 3.6rem); }
.policy-effective { margin: 0; color: var(--ivory-muted); font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; }
.policy-summary { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; margin: 28px 0; padding: 20px; border: 1px solid rgba(253, 211, 129, .58); border-radius: 5px; background: rgba(253, 211, 129, .08); }
.policy-summary > svg { width: 30px; height: 30px; color: var(--after-yellow); }
.policy-summary h2 { margin: 0; color: var(--after-yellow); font-size: .84rem; letter-spacing: .08em; text-transform: uppercase; }
.policy-summary p { margin: 7px 0 0; font-size: 1rem; line-height: 1.55; }
.policy-sections { display: grid; }
.policy-sections section { position: relative; padding: 25px 0 25px 44px; border-top: 1px solid rgba(255, 246, 232, .13); }
.policy-sections section:first-child { border-top: 0; }
.policy-sections section > span { position: absolute; top: 27px; left: 0; color: var(--after-yellow); font-family: "Big Shoulders Display", "Arial Narrow", Arial, sans-serif; font-size: 1rem; font-weight: 700; }
.policy-sections h2 { margin: 0 0 10px; font-family: "Big Shoulders Display", "Arial Narrow", Arial, sans-serif; font-size: 1.72rem; font-weight: 600; line-height: 1.1; }
.policy-sections p,
.policy-sections address { margin: 10px 0 0; color: var(--ivory-muted); font-size: .86rem; font-style: normal; line-height: 1.7; }
.policy-sections a { color: var(--after-yellow); overflow-wrap: anywhere; text-underline-offset: 3px; }
.policy-note { margin: 8px 0 28px; padding: 18px 20px; border-left: 3px solid var(--after-yellow); background: rgba(255, 255, 255, .045); }
.policy-note strong { color: var(--ivory); font-family: "Big Shoulders Display", "Arial Narrow", Arial, sans-serif; font-size: 1.3rem; font-weight: 600; }
.policy-note p { margin: 7px 0 0; color: var(--ivory-muted); font-size: .8rem; line-height: 1.55; }

.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 32px;
  visibility: hidden;
  opacity: 0;
  color: var(--ivory);
  background: var(--night);
  text-align: center;
  transition: opacity .28s ease, visibility .28s ease;
}

.loading-screen.is-visible { visibility: visible; opacity: 1; }
.loading-screen img { position: relative; z-index: 2; width: min(82vw, 360px); height: auto; }
.loading-screen strong { margin-top: 34px; font-size: .75rem; letter-spacing: .22em; }
.loading-screen p { margin: 10px 0 0; color: var(--ivory-muted); font-size: .88rem; }
.loader-rule { position: relative; width: min(72vw, 300px); height: 2px; margin-bottom: 30px; overflow: hidden; background: rgba(255, 246, 232, .15); }
.loader-rule span { position: absolute; inset: 0; width: 45%; background: var(--after-yellow); animation: loader-slide 1.2s ease-in-out infinite; }

@keyframes loader-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(250%); } }

.reveal { opacity: 1; transform: none; }

@media (min-width: 481px) {
  body { background: #15130f; }
  .page-shell { box-shadow: 0 0 0 1px rgba(255, 246, 232, .08), 0 28px 90px rgba(0, 0, 0, .55); }
}

@media (hover: hover) {
  .page-nav a:hover { color: var(--ivory); background: rgba(255, 255, 255, .04); }
  .primary-cta:hover { transform: translateY(-1px); background: var(--after-yellow); opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .loader-rule span { animation: none; width: 100%; }
}