/* Basic reset and variables */
@font-face {
  font-family: 'Youth';
  src: url('/fonts/allcaps/youth/Youth-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Youth';
  src: url('/fonts/allcaps/youth/Youth-Medium.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/fontshare/manrope/Manrope-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/fontshare/manrope/Manrope-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: 'Youth', Arial, sans-serif; color: var(--brand); background-color: var(--bg);}

:root {
  --bg: #EFEBE7;
  --brand: #0B1957;
  --pink: #FF79AB;
}

/* Layout */
.splash {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;
  padding: 0;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: var(--brand);
  color: var(--bg);
  padding: 12px 13px;

  @media (max-width: 980px) {
    .tagline:nth-child(5),
    .tagline:nth-child(6) {
      display: none;
    }
  }

  .tagline {
    font-size: 12px;
    font-weight: 500;
  }
}

.brand-text { display: grid; gap: 2px; }
.site-title { margin: 0; font-size: 18px; color: var(--fg); }
.tagline { font-size: 14px; }

.hero {
  margin: 8svh 0 6svh;
  text-align: center;
}

.headline {
  margin: 0 0 10px;
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  color: var(--brand);
  margin-bottom: 33px;
}

svg {
  margin-bottom: 33px;
}

.subhead {
  margin: 0 auto 26px;
  color: var(--brand);
  max-width: 60ch;
  font-family: 'Manrope', Arial, sans-serif;
  font-weight: 400;
  font-size: 1.5em;
}

.cta-row { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.button {

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 35px;
  border-radius: 22px;
  background: var(--pink);
  color: var(--brand);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.1em;
  transition: transform 0.08s ease, filter 0.2s ease;
}

.button:hover { filter: brightness(0.95); }

.button.primary { border-color: transparent; }