:root {
  --bg: #0c0806;
  --ink: #f5efe8;
  --muted: rgba(245, 239, 232, 0.6);
  --amber: #d98a4e;
}

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

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  text-transform: lowercase;
  text-align: center;
  background: var(--bg);
  color: var(--ink);
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Hero */

/* the amber glow lives on main so it bleeds across the hero/intro boundary with no seam */
main {
  background:
    radial-gradient(ellipse 60vw 42vh at 20% 14vh, rgba(201, 106, 46, 0.28), transparent 70%),
    radial-gradient(ellipse 55vw 38vh at 85% 66vh, rgba(201, 106, 46, 0.22), transparent 70%),
    radial-gradient(ellipse 60vw 44vh at 45% 108vh, rgba(160, 60, 30, 0.24), transparent 70%),
    radial-gradient(ellipse 50vw 36vh at 75% 150vh, rgba(201, 106, 46, 0.12), transparent 70%),
    var(--bg);
}

.hero {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
}

.hero-presenter {
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.hero-logo-bae { height: 84px; width: auto; }
.hero-logo-viewcy { height: 22px; width: auto; }

.hero-venue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.venue-mark { height: 48px; width: auto; opacity: 0.9; }

.hero-title {
  font-size: clamp(44px, 9vw, 96px);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.15;
}

.hero-title strong { font-weight: 600; }

.hero-sub {
  font-size: 17px;
  font-weight: 400;
  color: var(--amber);
  margin-top: 28px;
}

/* the hero speaks in the paragraph voice — one font for tag, date, place */
.hero-tag {
  max-width: 720px;
  margin-top: 26px;
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.9;
  color: var(--amber);
}

.hero-when {
  margin-top: 18px;
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.9;
  color: var(--ink);
}

.hero-when + .hero-when { margin-top: 0; }

/* Sections */

.section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 24px;
}

.section-label {
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 400;
  color: var(--amber);
  margin-bottom: 28px;
}

/* Intro: the decompression */

.intro {
  max-width: 660px;
  margin: 0 auto;
  text-align: center;
}

.intro p {
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 300;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

.intro p + p { margin-top: 28px; }

.intro .intro-close {
  margin-top: 36px;
  color: var(--amber);
}

/* Video */

.feature-video,
.sets video {
  width: 100%;
  display: block;
  border-radius: 8px;
  background: #000;
}

/* Portrait story-format clip: cap at native-ish size instead of stretching */
.feature-video {
  width: auto;
  max-width: 100%;
  max-height: 82vh;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
}

.sets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* sets play horizontal — show them horizontal before play too (crop portrait posters) */
.sets video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.sets-full { grid-column: 1 / -1; }

.sc-embed {
  width: 100%;
  height: 320px;
  display: block;
  border: 0;
  border-radius: 8px;
}

/* Stand-in for the SoundCloud player — the real embed is fetched on tap so a
   weak connection never spends its first seconds on someone else's script. */
.sc-facade {
  width: 100%;
  height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(217, 138, 78, 0.35);
  border-radius: 8px;
  background: rgba(217, 138, 78, 0.06);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.sc-facade:hover { background: rgba(217, 138, 78, 0.12); border-color: var(--amber); }
.sc-play { font-size: 28px; color: var(--amber); line-height: 1; }
.sc-name { font-weight: 400; }
.sc-hint { font-size: 13px; color: var(--muted); }

.sets figcaption {
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 12px;
}

@media (max-width: 720px) {
  .sets { grid-template-columns: 1fr; }
}

/* Photo gallery: grid of square tiles, click any for the full image */

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  cursor: zoom-in;
  transition: opacity 0.2s;
}

.gallery img:hover { opacity: 0.85; }

@media (max-width: 1024px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
}

/* Lightbox: full-glory view with skip-through */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 4, 3, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lightbox.open { display: flex; }

.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 4px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.85);
}

.lb-btn {
  position: absolute;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(217, 138, 78, 0.45);
  background: rgba(18, 12, 9, 0.75);
  color: #f5efe8;
  font-size: 26px;
  line-height: 1;
  font-family: inherit;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.lb-btn:hover { background: #d98a4e; color: #0c0806; }

.lb-close { top: 20px; right: 20px; font-size: 17px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }

@media (max-width: 720px) {
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
}

@media (max-width: 720px) {
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* Lineup */

.lineup { list-style: none; }

.lineup li {
  padding: 24px 0;
  border-bottom: 1px solid rgba(245, 239, 232, 0.12);
}

.lineup li:first-child { border-top: 1px solid rgba(245, 239, 232, 0.12); }

.lineup h3 {
  font-size: 20px;
  font-weight: 600;
}

.lineup p {
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  margin-top: 4px;
}

/* Topbar */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 26px;
  background: rgba(12, 8, 6, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(217, 138, 78, 0.18);
}

.topbar .tb-brand {
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--ink);
  text-decoration: none;
  font-weight: 400;
  text-transform: uppercase;
}
.topbar .tb-brand strong { font-weight: 600; }

.topbar .tb-cta {
  background: var(--amber);
  color: #140903;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 6px;
  transition: background 0.2s;
}
.topbar .tb-cta:hover { background: #e8a069; }

/* Tickets: a tarot-card button opens the viewcy checkout in a frame */

/* No `perspective` here, however much the card's spin wants it: a non-none
   perspective makes this element a containing block for fixed-position
   descendants — the same rule that makes `transform` do it — and that pinned
   the phone's full-screen checkout inside this 640px box, under the header.
   The depth lives in the card's own keyframe instead, where it reaches the
   card and nothing else. */
.checkout-frame { max-width: 640px; margin: 30px auto 0; }

.ticket-card {
  display: block;
  width: 216px;
  aspect-ratio: 340 / 583;
  margin: 8px auto 0;
  padding: 0;
  border: 1px solid rgba(217, 138, 78, 0.55);
  border-radius: 14px;
  background: linear-gradient(160deg, #1c110a, #0e0805 55%, #170d07);
  box-shadow: 0 26px 60px -24px rgba(0, 0, 0, 0.9);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.ticket-card[hidden] { display: none; }

/* chosen: the card spins and fades, and the checkout takes its place */
.ticket-card.vanish {
  animation: card-vanish 0.7s ease forwards;
  pointer-events: none;
}

@keyframes card-vanish {
  from { transform: perspective(900px) rotateY(0) scale(1); opacity: 1; }
  to { transform: perspective(900px) rotateY(540deg) scale(0.7); opacity: 0; }
}

.ticket-card:hover, .ticket-card:focus-visible {
  transform: translateY(-10px);
  box-shadow: 0 36px 70px -24px rgba(0, 0, 0, 0.95), 0 0 40px -10px rgba(217, 138, 78, 0.35);
}

.ticket-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(217, 138, 78, 0.3);
  border-radius: 9px;
}

.ticket-card .tc-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-family: "Montserrat", sans-serif;
}

.ticket-card .tc-glyph { font-size: 34px; color: var(--amber); }

.ticket-card .tc-label {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}

.ticket-card .tc-foot {
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
}

/* the checkout expands inline, where the card was: the card spins away and
   viewcy takes its place. No close control of our own — the checkout draws its
   own X in the frame, and two exits in one corner would be a puzzle. */
.cf-wrap {
  position: relative;
  width: min(520px, 94vw);
  margin: 8px auto 0;
  animation: cf-appear 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  transform-origin: 50% 20%;
}

.cf-wrap[hidden] { display: none !important; }

/* the frame opens out rather than snapping in — a small bloom, timed against
   the card's spin so the two read as one object changing state. Starting it at
   the card's actual width (216 of 520) would scale the checkout's type up from
   a blur, so the growth is slight and the fade does the rest. */
@keyframes cf-appear {
  from { opacity: 0; transform: scale(0.88); }
  to { opacity: 1; transform: scale(1); }
}

/* holds the frame while viewcy loads — a card-back breathing in the dark */
.cf-loading {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: #141414;
  border-radius: 14px;
  transition: opacity 0.6s ease;
}

.cf-loading.done { opacity: 0; pointer-events: none; }

.cf-loading .constellation {
  position: relative;
  width: 220px;
  height: 150px;
}

.cf-loading .constellation i {
  position: absolute;
  font-style: normal;
  color: var(--amber);
  opacity: 0.15;
  animation: twinkle 2.8s ease-in-out infinite;
}

.cf-loading .constellation i:nth-child(1) { top: 12%; left: 16%; font-size: 15px; animation-delay: 0s; }
.cf-loading .constellation i:nth-child(2) { top: 62%; left: 8%; font-size: 11px; animation-delay: 0.4s; }
.cf-loading .constellation i:nth-child(3) { top: 30%; left: 46%; font-size: 26px; animation-delay: 0.8s; }
.cf-loading .constellation i:nth-child(4) { top: 8%; left: 74%; font-size: 12px; animation-delay: 1.2s; }
.cf-loading .constellation i:nth-child(5) { top: 70%; left: 62%; font-size: 17px; animation-delay: 1.6s; }
.cf-loading .constellation i:nth-child(6) { top: 46%; left: 86%; font-size: 11px; animation-delay: 2s; }
.cf-loading .constellation i:nth-child(7) { top: 82%; left: 34%; font-size: 13px; animation-delay: 2.4s; }

.cf-loading p { font-size: 14px; font-weight: 400; color: var(--muted); }

@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
}

.cf-wrap iframe {
  display: block;
  width: 100%;
  height: min(700px, calc(100vh - 120px));
  border: 0;
  border-radius: 14px;
  background: #141414;
  color-scheme: dark;
}

/* the top-bar cta has nothing left to do once the checkout is open */
body.checkout-open .topbar .tb-cta { display: none; }

/* Phones: the checkout takes the whole screen, over the header, the way it does
   on viewcy's own event pages. Inline it could only ever be wrong here — the
   section's 24px of side padding clipped a 100vw frame, the fixed topbar sat on
   top of it, and a fixed pixel height left dead ground under the continue bar.
   Fixed to the viewport in dvh answers all three, and moves with the browser's
   own chrome as it hides and returns. */
@media (max-width: 720px) {
  .cf-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100dvh;
    width: auto;
    margin: 0;
    z-index: 200; /* over .topbar's 90 */
    /* full-bleed already — a scale-up would show the page around its edges */
    animation-name: cf-fade;
    overscroll-behavior: contain;
  }

  .cf-wrap iframe { border-radius: 0; height: 100%; }
  .cf-loading { border-radius: 0; }

  /* nothing behind it should move while it is up */
  body.checkout-open { overflow: hidden; }
}

@keyframes cf-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-wrap { animation: none; transform: none; }
  .cf-loading .constellation i { animation: none; opacity: 0.6; }
}

.checkout-done {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.9;
  color: var(--amber);
}

/* names that are a brand identity keep their own casing (e.g. DRĖĖĖMY) */
.brand-name { text-transform: none; }

.intro-link { color: var(--amber); text-decoration: none; border-bottom: 1px solid rgba(217, 138, 78, 0.45); }
.intro-link:hover { border-bottom-color: var(--amber); }

.oracle-copy {
  max-width: 560px;
  margin: 0 auto;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.9;
}

/* The place: venue + map */

.map-wrap { max-width: 860px; margin: 34px auto 0; }

.map-embed {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
  border-radius: 14px;
  /* dark-mode the light Google embed: invert + rotate hues back */
  filter: invert(0.9) hue-rotate(180deg) grayscale(0.25) contrast(0.92) brightness(0.92);
}

.map-cta { margin-top: 18px; }

.map-cta a {
  color: var(--amber);
  text-decoration: none;
  font-size: 17px;
  font-weight: 400;
  border-bottom: 1px solid rgba(217, 138, 78, 0.45);
}

/* Footer */

.footer {
  text-align: center;
  padding: 72px 24px 56px;
  border-top: 1px solid rgba(245, 239, 232, 0.12);
  margin-top: 40px;
}

.footer p { font-size: 14px; font-weight: 400; color: var(--muted); }

.footer p + p { margin-top: 8px; }

.footer .hero-sub { margin: 0 0 12px; }

.footer a { color: var(--ink); }

.footer .powered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 52px;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  text-decoration: none;
}

.footer .powered img { height: 30px; width: auto; opacity: 0.9; }

.footer .powered:hover img { opacity: 1; }