/* Cusp home splash — dark F1 landing (issue #1 + UX tokens) */
:root {
  --bg-edge: #121926;
  --bg-center: #2d3541;
  --wordmark: #b5b8bc;
  --tagline: #f5f7fa;
  --subtext: #85939f;
  --food-coral: #e48672;
  --vitals-teal: #6b808b;
  --motion-gold: #d1a777;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  min-height: 100dvh;
  min-height: 100vh;
  background: radial-gradient(
    ellipse 90% 80% at 50% 45%,
    var(--bg-center) 0%,
    var(--bg-edge) 100%
  );
  background-color: var(--bg-edge);
  color: var(--tagline);
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/*
  Spacing rhythm as % of viewport height (portrait phone–first).
  Top air ~20% · lockup · gap 6–7% · three-beat · gap 4% · divider · gap 3.5% · subtext · bottom ~22%.
  Stack optically centered as a unit.
*/
.splash {
  min-height: 100dvh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 20vh 5vw 22vh;
  box-sizing: border-box;
}

.lockup {
  display: block;
  /* unit width ~41% of frame; mark height guided by aspect (~28% frame tall) */
  width: min(41vw, 18rem);
  height: auto;
  max-height: 28vh;
  object-fit: contain;
  margin: 0;
}

.three-beat {
  /* gap lockup → tagline ~6–7% */
  margin: 6.5vh 0 0;
  padding: 0;
  /* ~13% tall block: 3 lines with ~2.4% between */
  font-size: clamp(1rem, 2.6vh, 1.35rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--tagline);
}

.three-beat span {
  display: block;
}

.three-beat span + span {
  margin-top: 2.4vh;
}

.divider {
  /* ~9% of frame wide, 2px / hairline soft gradient */
  width: 9vw;
  min-width: 2.75rem;
  max-width: 5.5rem;
  height: 2px;
  margin: 4vh 0 0;
  border: 0;
  border-radius: 1px;
  background: linear-gradient(
    90deg,
    var(--food-coral) 0%,
    var(--vitals-teal) 50%,
    var(--motion-gold) 100%
  );
  opacity: 0.92;
}

.subtext {
  /* conditions subtext; gap divider → subtext ~3.5% */
  margin: 3.5vh 0 0;
  padding: 0;
  max-width: 22rem;
  font-size: clamp(0.75rem, 1.8vh, 0.9rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--subtext);
}

/* Portrait phone: keep order + relative gaps; shrink lockup, don’t restack */
@media (max-width: 480px) and (orientation: portrait) {
  .lockup {
    width: min(41vw, 12.5rem);
    max-height: 26vh;
  }
}