.stage {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
  padding: calc(var(--safe) + 1vmin) 18vw 8.5vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
}

.frame {
  position: absolute;
  inset: var(--frame);
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--gold) 62%, transparent);
  box-shadow: inset 0 0 0 0.5vmin color-mix(in srgb, var(--gold) 22%, transparent);
}

.frame::before {
  content: "";
  position: absolute;
  inset: 1.05vmin;
  border: 1px solid color-mix(in srgb, var(--gold-bright) 38%, transparent);
}

.corner {
  position: absolute;
  width: 4.2vmin;
  height: 4.2vmin;
  border: 1.4px solid var(--gold);
}

.corner--tl { top: -0.35vmin; left: -0.35vmin; border-right: 0; border-bottom: 0; }
.corner--tr { top: -0.35vmin; right: -0.35vmin; border-left: 0; border-bottom: 0; }
.corner--bl { bottom: -0.35vmin; left: -0.35vmin; border-right: 0; border-top: 0; }
.corner--br { bottom: -0.35vmin; right: -0.35vmin; border-left: 0; border-top: 0; }

.diamond {
  position: absolute;
  width: 1.05vmin;
  height: 1.05vmin;
  background: var(--gold-bright);
  transform: rotate(45deg);
  box-shadow: 0 0 1.1vmin var(--gold);
}

.diamond--tl { top: -0.5vmin; left: -0.5vmin; }
.diamond--tr { top: -0.5vmin; right: -0.5vmin; }
.diamond--bl { bottom: -0.5vmin; left: -0.5vmin; }
.diamond--br { bottom: -0.5vmin; right: -0.5vmin; }

.masthead {
  text-align: center;
}

.logo-slot {
  width: 9.6vmin;
  height: 9.6vmin;
  margin: 0 auto 0.8vmin;
}

.logo-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 1.4vmin color-mix(in srgb, var(--gold) 50%, transparent));
}

.eyebrow {
  margin: 0;
  font-size: clamp(1rem, 1.55vmin, 1.9rem);
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  text-transform: uppercase;
  color: var(--gold);
}

.masthead h1 {
  margin: 0.8vmin 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vmin, 6.4rem);
  letter-spacing: 0.12em;
  line-height: 1.05;
  text-transform: uppercase;
}

.slogan {
  min-height: 3.2vmin;
  margin: 1.2vmin 0 0;
  font-size: clamp(1.1rem, 2vmin, 2.4rem);
  letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--ivory) 78%, var(--gold));
  transition: opacity 0.7s ease;
}

.slogan.is-fading {
  opacity: 0;
}

.countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.6vmin;
  padding: 1vmin 0;
}

.unit {
  width: 21vmin;
  height: 21vmin;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  position: relative;
  background:
    radial-gradient(circle at 50% 38%, rgba(75, 20, 104, 0.28), #08050c 68%);
  border: 1.6px solid var(--gold);
  box-shadow:
    0 0 0 0.45vmin color-mix(in srgb, var(--gold) 28%, transparent),
    0 0 3.5vmin rgba(98, 28, 140, 0.45),
    inset 0 0 2.4vmin rgba(0, 0, 0, 0.45);
}

.unit::before {
  content: "";
  position: absolute;
  top: 1.1vmin;
  left: 50%;
  width: 3.4vmin;
  height: 1.7vmin;
  translate: -50% 0;
  background: repeating-conic-gradient(
    from -90deg at 50% 100%,
    var(--gold) 0deg 8deg,
    transparent 8deg 16deg
  );
  mask-image: radial-gradient(ellipse at 50% 100%, black 10%, transparent 72%);
}

.unit .value {
  font-family: var(--font-numbers);
  font-size: clamp(2.8rem, 8.6vmin, 9.4rem);
  font-weight: 700;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  color: var(--gold-bright);
  text-shadow: 0 0 2vmin color-mix(in srgb, var(--gold) 50%, transparent);
}

.unit .label {
  display: block;
  margin-top: 0.5vmin;
  font-size: clamp(0.8rem, 1.35vmin, 1.45rem);
  letter-spacing: 0.38em;
  text-indent: 0.38em;
  color: var(--gold);
}

.celebration {
  display: none;
  justify-content: center;
}

.medallion {
  width: min(46vmin, 42vw);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  border: 2px solid var(--gold);
  background: radial-gradient(circle at 50% 40%, rgba(75, 20, 104, 0.35), #08050c 70%);
  box-shadow:
    0 0 0 0.55vmin color-mix(in srgb, var(--gold) 30%, transparent),
    0 0 6vmin rgba(98, 28, 140, 0.55);
}

.celebration-kicker {
  margin: 0;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--gold);
  font-size: clamp(1rem, 1.6vmin, 1.8rem);
}

.celebration-title {
  margin: 0.6vmin 0 0;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 8vmin, 9rem);
  letter-spacing: 0.1em;
}

body.is-live .countdown,
body.is-live .masthead .slogan {
  display: none;
}

body.is-live .celebration {
  display: flex;
}

.event-meta {
  text-align: center;
  z-index: 1;
}

.event-meta p {
  margin: 0;
  font-size: clamp(0.95rem, 1.55vmin, 1.8rem);
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--gold);
}

@media (max-aspect-ratio: 4/5) {
  .stage {
    padding: 3vh 6vw 8vh;
  }

  .plume {
    opacity: 0.28;
    width: 22vw;
  }

  .countdown {
    flex-wrap: wrap;
    gap: 2vmin;
  }

  .unit {
    width: 28vw;
    height: 28vw;
  }
}

body.show-cursor,
body.show-cursor * {
  cursor: auto;
}