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

:root {
  --maroon: #3c1d25;
  --maroon-deep: #2a1419;
  --white: #ffffff;
}

html { height: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--maroon);
  color: var(--white);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

main { flex: 1 0 auto; }

.stage {
  display: flex;
  justify-content: center;
  padding: clamp(3rem, 11vh, 7rem) 1rem clamp(2rem, 6vh, 4rem);
}

.brand {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.75rem, 2.5vw, 1.5rem);
}

.wordmark {
  display: block;
  width: min(70vw, 560px);
  height: auto;
}

.fund {
  font-weight: 800;
  font-size: clamp(1rem, 4.2vw, 2.25rem);
  letter-spacing: 0.32em;
  margin-right: -0.32em;
  text-transform: uppercase;
  line-height: 1;
}

.ads {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem) clamp(3rem, 8vw, 6rem);
}

.ads video,
.video-placeholder {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}

/* Tablet and up: everything fits in one screen, no scroll. The video takes
   whatever height is left and sizes itself from the box it sits in
   (container query units), so it never pushes the footer off screen.
   Phones keep the scrolling layout above. */
@media (min-width: 768px) {
  body {
    height: 100dvh;
    overflow: hidden;
  }

  main {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .stage {
    flex: none;
    padding: clamp(1.5rem, 6dvh, 4rem) 1rem clamp(1rem, 3.5dvh, 2.5rem);
  }

  .wordmark {
    width: auto;
    height: min(24dvh, 38vw, 300px);
  }

  .fund { font-size: min(4.2vw, 4.5dvh, 2.25rem); }

  .ads {
    flex: 1;
    min-height: 0;
    width: 100%;
    container-type: size;
    display: flex;
    justify-content: center;
    padding-bottom: clamp(1.5rem, 5dvh, 3.5rem);
  }

  .ads video,
  .video-placeholder {
    width: min(100cqw, 100cqh * 16 / 9);
    height: auto;
  }
}

.video-placeholder {
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 0.35);
  font-size: clamp(0.85rem, 2.4vw, 1.1rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.footer {
  width: 100%;
  flex: none;
  background: var(--maroon-deep);
  padding: clamp(0.6rem, 2.4vw, 1.4rem);
}

.disclaimer {
  max-width: 60rem;
  margin: 0 auto;
  border: 1px solid var(--white);
  padding: clamp(0.5rem, 2.2vw, 1.1rem) clamp(0.6rem, 2.6vw, 1.6rem);
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: clamp(0.7rem, 2.3vw, 0.9rem);
  line-height: 1.5;
}

.disclaimer p { margin: 0.25em 0; }