/* ===========================================================
   BIG Sport™ landing page
   Colors sampled from source design:
     background  #191919
     cream       #FCFBEC
     pink        #EA418D
   =========================================================== */

:root {
  --bg: #191919;
  --cream: #fcfbec;
  --pink: #ea418d;
  /* The whole composition lives in one column that represents the PSD canvas.
     Every child is sized in container units (cqw) = % of this column, exactly
     matching the PSD. The column scales up to fill the viewport (the design is
     portrait, so it's bound by height: col = height x PSD aspect 0.702), which
     makes desktop large while mobile fills the screen — same proportions. */
  --col: min(94vw, 100svh * 0.702, 720px);
  /* Width tied to font-size (em): reproduces the PSD's exact line breaks —
     paragraph 1 wraps to 2 lines after "around", paragraph 2 fits on 1 line.
     Valid window is [24.09em, 25.44em); 24.8em sits mid-range. */
  --copy-max: 24.8em;
}

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

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

/* Exact PSD font: self-hosted Helvetica Neue Condensed (licensed).
   Regular = Helvetica Neue Condensed; Bold = Helvetica Neue 67 Medium
   Condensed (heaviest condensed face supplied) for "supercharged"/"Brandco". */
@font-face {
  font-family: "HelveticaNeueCondensed";
  src: url("assets/fonts/HelveticaNeueCondensed-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HelveticaNeueCondensed";
  src: url("assets/fonts/HelveticaNeueCondensed-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  /* HelveticaNeueCondensed = self-hosted woff2 (above) when present — exact.
     Arial Narrow is the fallback: a regular+bold condensed grotesque installed
     on virtually all Macs and Windows, so the regular/bold contrast is kept.
     (Stock macOS has no regular-weight Helvetica Neue Condensed face.) */
  font-family: "HelveticaNeueCondensed", "Arial Narrow", "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Fixed-width column, centered in the viewport. container-type makes cqw
   units resolve against this column so every child scales with it — the
   composition looks identical from desktop down to mobile. */
.page {
  min-height: 100vh;
  min-height: 100svh;
  max-width: var(--col);
  margin-inline: auto;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3cqw 0;
}

/* All sizes/gaps below are the PSD's measurements as % of canvas width (cqw). */

/* --- Ball icon --- */
.ball-icon {
  width: 9.68cqw;
  height: auto;
  display: block;
}

/* --- Wordmark --- */
.wordmark {
  margin: 24.03cqw 0 0; /* PSD gap: icon -> wordmark */
  width: 100%;
  display: flex;
  justify-content: center;
}

.wordmark img {
  width: 74.17cqw; /* PSD: wordmark is 74.2% of canvas width */
  height: auto;
  display: block;
}

/* --- Body copy --- */
.copy {
  margin-top: 9.91cqw; /* PSD gap: wordmark -> copy */
  width: 100%;
  max-width: var(--copy-max); /* 24.8em == 68.5cqw at this font: PSD width + 3-line break */
  margin-inline: auto;
  /* PSD-exact 2.76cqw on desktop; floored on small screens so it stays legible.
     The floor is em-based via max-width:24.8em, so the 3-line break still holds. */
  font-size: max(2.76cqw, 0.82rem);
  line-height: 1.6;
  color: var(--cream);
}

.copy p {
  margin: 0;
}

.copy p + p {
  margin-top: 1.6em;
}

.copy strong {
  font-family: "HelveticaNeueCondensed", "Arial Narrow", "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  font-weight: 700;
}

/* --- Footer / brand lockup --- */
.footer {
  margin-top: 28.94cqw; /* PSD gap: copy -> Brandco pill */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brandco {
  display: inline-block;
  line-height: 0;
  transition: transform 0.18s ease, filter 0.18s ease;
}

.brandco img {
  width: 18cqw; /* PSD: pill is 17.5% of canvas width */
  height: auto;
  display: block;
}

.brandco:hover,
.brandco:focus-visible {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 14px rgba(234, 65, 141, 0.45));
}

.brandco:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 6px;
  border-radius: 999px;
}

.legal {
  margin: 0;
  font-size: max(1.85cqw, 0.625rem); /* PSD size on desktop; floored to stay legible on mobile */
  letter-spacing: 0.06em;
  color: var(--cream);
  opacity: 0.92;
}

.legal:first-of-type {
  margin-top: 3.01cqw; /* PSD gap: pill -> trademark text */
}

.legal + .legal {
  margin-top: 1.25cqw;
}

/* --- Mobile: pin icon to top, footer to bottom, center middle group --- */
@media (max-width: 640px) {
  .page {
    /* Override desktop's center alignment so children can spread vertically */
    justify-content: flex-start;
    padding-block: 6cqw;
  }

  /* Auto margins absorb the free space: equal slice above the wordmark and
     above the footer => icon stays at top, footer at bottom, wordmark+copy
     centered between them. */
  .wordmark,
  .footer {
    margin-top: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brandco {
    transition: none;
  }
}