/* ---- tokens ---- */
:root {
  --bg:        #0b1120;
  --bg-raised: #111a2e;
  --border:    #1e293b;
  --text:      #f8fafc;
  --text-dim:  #94a3b8;
  --text-mute: #64748b;
  --accent:    #3b82f6;
  --accent-hi: #60a5fa;
  --radius:    12px;
  --maxw:      880px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/*
  Single-viewport layout: everything fits without scrolling.
  100dvh (dynamic viewport height) is what makes this hold on mobile, where the
  collapsing URL bar makes 100vh taller than the space actually visible. 100vh
  is declared first as the fallback for browsers without dvh.
*/
html, body { height: 100%; }

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  background-image: radial-gradient(
    ellipse 80% 50% at 50% -10%,
    rgba(59, 130, 246, 0.18),
    transparent 70%
  );
  background-repeat: no-repeat;
}

/* ---- brand bar (inside the centred stack, so logo + copy centre together) ---- */
.brandbar {
  flex: none;
  display: flex;
  justify-content: center;
  margin-bottom: clamp(8px, 2.4vh, 26px);
}

/* White plate behind the logo: its grey wordmark fails contrast on the navy. */
.logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: clamp(9px, 1.6vh, 16px);
  padding: clamp(7px, 1.3vh, 16px) clamp(13px, 2.4vh, 28px);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.75);
}

.logo-chip img {
  display: block;
  height: clamp(30px, 7.2vh, 76px);
  width: auto;
  max-width: 100%;
}

/* ---- hero: the flexible middle that absorbs whatever height is left ---- */
.hero {
  flex: 1 1 auto;
  min-height: 0;              /* lets the player actually shrink */
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(10px, 2vh, 24px) clamp(12px, 4vw, 24px);
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 1.1vh, 14px);
}

.eyebrow {
  flex: none;
  margin: 0;
  font-size: clamp(0.6rem, min(2.6vw, 1.5vh), 0.8rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-hi);
}

h1 {
  flex: none;
  margin: 0;
  font-size: clamp(1.15rem, min(5.6vw, 4.4vh), 3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.lede {
  flex: none;
  margin: 0 auto;
  max-width: 46ch;
  color: var(--text-dim);
  font-size: clamp(0.78rem, min(3.2vw, 1.95vh), 1.05rem);
}

/* ---- player ----
   .player is the only element allowed to grow/shrink. aspect-ratio keeps it
   16:9 while max-width/max-height let whichever axis is tighter win, so the
   video is never cropped and never pushes the buttons off-screen. */
.player {
  flex: 0 1 auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  max-height: 100%;
  max-width: 100%;
  margin: clamp(2px, 0.6vh, 8px) auto;

  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
}

video {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  object-fit: contain;
}

.fallback { padding: 18px; color: var(--text-dim); }
.fallback a { color: var(--accent-hi); }

/* ---- buttons ---- */
.actions {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(7px, 1.2vh, 12px);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: clamp(7px, 1.3vh, 12px) clamp(13px, 3.2vw, 22px);
  border-radius: 10px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: clamp(0.78rem, min(3.4vw, 1.9vh), 0.95rem);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              transform 0.15s ease;
}

.btn:active { transform: translateY(1px); }

.btn:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hi); }

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn-ghost:hover { border-color: var(--text-mute); background: rgba(255,255,255,0.04); }

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the play/pause glyphs are solid shapes, not strokes */
#playIcon { fill: currentColor; stroke: none; }

/* ---- meta ---- */
.meta {
  flex: none;
  margin: 0;
  color: var(--text-mute);
  font-size: clamp(0.66rem, min(2.7vw, 1.5vh), 0.85rem);
}

/*
  Short viewports (landscape phones, small laptops). Drop the least essential
  lines so the video keeps a usable size instead of everything being squeezed.
*/
@media (max-height: 620px) {
  .lede { display: none; }
}

@media (max-height: 460px) {
  .eyebrow, .meta { display: none; }
  .brandbar { margin-bottom: 8px; }
}

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