/* ════════════════════════════════════════════════════════════════════════
   index.html (the coming-soon page): one screen after dark. Loads after styles.css (logo,
   buttons, Request info, footer) and only adds the page's own layout.
   ════════════════════════════════════════════════════════════════════════ */

body.soon-page {
  --ink: var(--ink-night);
  background: radial-gradient(120% 80% at 50% 0%, var(--wine-dusk) 0%, var(--night) 55%, var(--late-night) 100%) fixed;
  background-color: var(--night);
  color: var(--ink-night);
  min-height: 100svh;
  display: flex; flex-direction: column;
}
.soon-page :focus-visible { outline-color: var(--gold); }

.soon {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  gap: clamp(.9rem, 2.2vh, 1.4rem);
  padding: clamp(36px, 7vh, 72px) var(--gutter) clamp(40px, 7vh, 72px);
}

/* the logo, a little smaller than the main page's ending so the pour fits on one screen */
.soon__logo { margin: 0; height: clamp(96px, 13vh, 140px); font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 500; }
.soon__logo .reveal__half { height: clamp(96px, 13vh, 140px); }

.soon__line {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.25; letter-spacing: -0.01em;
  max-width: 22em; text-wrap: balance;
}
.soon__line em { color: var(--gold); }

/* The highlight: the v7 pour, in the night colours. */
.soon__pour {
  width: min(400px, 84vw, 46svh);
  margin: clamp(.4rem, 1.5vh, 1rem) 0;
  /* pour-wait.js reads its colours from these app token names */
  --surface: #33101A; --ink: #F6E7C8; --sage-deep: #F1C763; --peach-deep: #F2576F;
  --pw-vine: #50C878; --pw-vine-strength: 1.75;   /* emerald, drawn bold enough to pop against the burgundy */
  border-radius: 22px;
  box-shadow: 0 0 0 1px rgb(241 199 99 / .18), 0 40px 80px -30px rgb(0 0 0 / .8), 0 0 90px -20px rgb(242 87 111 / .22);
}
.soon__pour .pw { max-width: none; border-radius: 22px; }
.soon__pour .pw-pill { display: none; }   /* no percent here: it's a mood, not a progress bar */

.soon__when {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--gold);
  letter-spacing: -0.01em;
}

.soon-page .foot { background: transparent; }