/* Inferna lobby screen. 16:9, designed at 1920 × 1080 where 1rem = 10px, and
   scaled by viewport so it is identical at 1080p and 4K. Kept to opacity
   transitions and flat paint: a TV browser has little GPU to spare.

   These tokens are the only brand decisions on the page. */
:root {
  --basalt: #16120f;
  --stone: #241e19;
  --cave: #2f2219;
  --ember: #8f4a26;
  --sand: #d8c1a2;
  --bone: #f4f4f4;
  --ash: #bdb3a7;
  --dim: #5b4f44;
  --display: "Cormorant Garamond", Georgia, serif;
  --text: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

@font-face { font-family: "Cormorant Garamond"; font-weight: 400; src: url(/assets/fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; src: url(/assets/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 400; src: url(/assets/fonts/montserrat-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; src: url(/assets/fonts/montserrat-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; src: url(/assets/fonts/montserrat-latin-600-normal.woff2) format("woff2"); }

html { font-size: min(calc(100vw / 192), calc(100vh / 108)); background: var(--basalt); }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--basalt); cursor: none; }
h1, h2, p, ol { margin: 0; padding: 0; }
ol { list-style: none; }

.stage {
  position: relative; width: 192rem; height: 108rem; overflow: hidden;
  color: var(--bone); background: var(--basalt);
  font-family: var(--text); font-size: 2.8rem; line-height: 1.3;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}

/* Top line */
.top { position: absolute; top: 5rem; left: 7rem; right: 7rem; display: flex; justify-content: space-between; align-items: baseline; }
.wordmark { font-family: var(--display); font-size: 5.2rem; font-weight: 400; letter-spacing: .02em; color: var(--sand); }
.clock { display: flex; align-items: baseline; gap: 3.2rem; color: var(--ash); }
.clock__time { font-family: var(--display); font-size: 5.2rem; color: var(--bone); }

/* The cave: an opening that rises from the floor. It is the one large gesture
   on the screen, and it holds whatever is happening now. */
.cave {
  position: absolute; left: 7rem; bottom: 0; width: 92rem; height: 87rem;
  border-radius: 46rem 46rem 0 0; background: var(--cave); overflow: hidden;
}
.cave__glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 62% at 50% 100%, var(--ember) 0%, rgba(143, 74, 38, .45) 42%, rgba(143, 74, 38, 0) 74%);
}
.cave__inner {
  position: absolute; inset: 0; padding: 19rem 9rem 7rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: opacity .9s ease;
}
.cave__inner.is-changing { opacity: 0; }

.hero__where { color: var(--sand); font-size: 3rem; }
.hero__format { font-family: var(--display); font-weight: 400; font-size: 21rem; line-height: 1; margin-top: 2.4rem; letter-spacing: -.005em; }
.hero__format.is-long { font-size: 14rem; margin-top: 4.5rem; margin-bottom: 2.5rem; }
.hero__when { font-size: 3.6rem; margin-top: 3.2rem; font-weight: 500; }
.hero__who { color: var(--sand); font-size: 3.2rem; margin-top: 1rem; min-height: 4.2rem; }

.seats { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem; margin-top: auto; }
.seat { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: .25rem solid rgba(216, 193, 162, .4); }
.seat--booked { background: rgba(216, 193, 162, .5); border-color: transparent; }
.seat--in { background: var(--bone); border-color: transparent; }
.hero__count { margin-top: 2.2rem; font-size: 3rem; min-height: 3.9rem; }

/* Right column */
.side { position: absolute; left: 107rem; right: 7rem; top: 17rem; bottom: 6rem; display: flex; flex-direction: column; gap: 4rem; }
.schedule { flex: 1 1 auto; min-height: 0; }
.schedule__title { font-family: var(--display); font-weight: 400; font-size: 4.6rem; line-height: 1.1; color: var(--sand); margin-bottom: 1.2rem; }
.schedule__list + .schedule__title { margin-top: 2.6rem; }
.slot { display: grid; grid-template-columns: 17.5rem 1fr auto; column-gap: 2rem; align-items: baseline; padding: 1.2rem 0; border-top: .15rem solid var(--dim); }
.slot__time { color: var(--ash); font-variant-numeric: tabular-nums lining-nums; }
.slot__class { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot__format { font-weight: 500; }
.slot__who { color: var(--ash); margin-left: 1.4rem; }
.slot__booked { color: var(--ash); }

.promo { position: relative; flex: 0 0 36rem; border-radius: 1.2rem; overflow: hidden; background: var(--stone); transition: opacity .9s ease; }
.promo.is-changing { opacity: 0; }
.promo__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo__image[hidden] { display: none; }
.promo__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 3.2rem 3.6rem; }
.promo--image .promo__text { background: rgba(22, 18, 15, .78); }
.promo__title { font-family: var(--display); font-weight: 500; font-size: 4.8rem; line-height: 1.08; color: var(--bone); }
.promo__body { margin-top: 1rem; color: var(--ash); font-size: 2.6rem; }

.note { position: absolute; right: 7rem; bottom: 1.6rem; color: var(--ash); font-size: 2rem; }
.note[hidden], .promo[hidden] { display: none; }

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

/* A text-only promotion takes the height of its text. */
.promo:not(.promo--image) { flex-basis: auto; }
.promo:not(.promo--image) .promo__text { position: static; }