@font-face {
  font-family: 'Inter';
  font-weight: 800;
  src: url('./fonts/inter-extrabold.woff2') format('woff2');
  font-display: swap;
}

/* ==========================================================================
   CSS Variables
   ========================================================================== */

:root {
  /* Colors */
  --color-bg: #0E1531;
  --color-text: #F5F5F0;
  --color-accent: #BA9C75;
  --color-accent-hover: #A68B66;
  --color-accent-active: #957A5A;

  /* Spacing */
  --spacing-base: 1rem;
  --border-radius: 10px;

  /* Typography */
  --font-weight-normal: 800;
  --font-weight-bold: 800;
  --font-weight-heavy: 800;
  --letter-spacing-tight: -0.03em;
  --letter-spacing-normal: 0.01em;
  --letter-spacing-wide: 0.05em;

  /* Transitions */
  --transition-duration: 0.2s;
  --transition-easing: ease;

  /* Focus outline */
  --outline-width: 3px;
  --outline-offset: 2px;

  /* Layout */
  --container-max-width: 600px;
  --cta-links-max-width-base: 250px;
  --cta-links-max-width-tablet: 290px;
  --cta-links-max-width-desktop: 310px;

  /* Viewport-based spacing */
  --padding-top-mobile: 12vh;
  --padding-top-base: 15vh;
  --padding-top-tablet: 18vh;
}

html {
  hyphens: auto;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(var(--spacing-base) * 2);
  padding-top: var(--padding-top-base);
}

main.container {
  width: 100%;
  max-width: var(--container-max-width);
}

.content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing-base) * 0.5);
}

.title-number,
.title-text {
  font-size: 2.2rem;
  font-weight: var(--font-weight-normal);
  line-height: 1;
  color: var(--color-accent);
}

.title-number {
  letter-spacing: var(--letter-spacing-tight);
}

.title-text {
  letter-spacing: var(--letter-spacing-normal);
}

.subtitle,
span.separator {
  font-size: 2rem;
}

.subtitle {
  font-weight: var(--font-weight-normal);
  color: var(--color-accent);
  margin-top: calc(var(--spacing-base) * 5);
  white-space: nowrap;
}

nav.cta-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing-base) * 2);
  width: 75%;
  max-width: var(--cta-links-max-width-base);
  margin-top: calc(var(--spacing-base) * 3);
}


.cta-link {
  display: block;
  width: 100%;
  padding: 1.025rem 2.25rem;
  background-color: var(--color-accent);
  color: var(--color-bg);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: var(--font-weight-heavy);
  font-size: 1.7rem;
  letter-spacing: var(--letter-spacing-wide);
  border-radius: var(--border-radius);
  transition: background-color var(--transition-duration) var(--transition-easing);
  cursor: pointer;
  box-sizing: border-box;
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}

.cta-link:hover {
  background-color: var(--color-accent-hover);
}

.cta-link:focus {
  outline: var(--outline-width) solid var(--color-text);
  outline-offset: var(--outline-offset);
}

.cta-link:active {
  background-color: var(--color-accent-active);
}

span.separator {
  font-weight: var(--font-weight-bold);
  font-style: italic;
  color: var(--color-accent);
  margin: 0;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Small phones (max-width: 480px) */
@media (max-width: 480px) {
  body {
    padding: calc(var(--spacing-base) * 1.5);
    padding-top: var(--padding-top-mobile);
  }

  .title-number,
  .title-text {
    font-size: 1.875rem;
  }

  .subtitle,
  span.separator {
    font-size: 1.75rem;
  }

  .subtitle {
    margin-top: calc(var(--spacing-base) * 4);
    white-space: normal;
  }

  .cta-link {
    padding: 0.95rem 1.5rem;
    font-size: 1.2rem;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
  }

  nav.cta-links {
    width: 70%;
    max-width: 70%;
    margin-top: calc(var(--spacing-base) * 2.5);
    gap: calc(var(--spacing-base) * 1.5);
  }
}

/* Tablet (min-width: 768px) */
@media (min-width: 768px) {
  body {
    padding-top: var(--padding-top-tablet);
  }

  .title-number,
  .title-text {
    font-size: 2.5rem;
  }

  .subtitle,
  span.separator {
    font-size: 2.125rem;
  }

  .subtitle {
    margin-top: calc(var(--spacing-base) * 6);
  }

  .cta-link {
    padding: 1.25rem 2.75rem;
    font-size: 1.625rem;
  }

  nav.cta-links {
    max-width: var(--cta-links-max-width-tablet);
    margin-top: calc(var(--spacing-base) * 3.5);
  }
}

/* Desktop (min-width: 1024px) */
@media (min-width: 1024px) {
  .title-number,
  .title-text {
    font-size: 3rem;
  }

  .subtitle,
  span.separator {
    font-size: 2.25rem;
  }

  .subtitle {
    margin-top: calc(var(--spacing-base) * 7);
  }

  .cta-link {
    font-size: 1.75rem;
  }

  nav.cta-links {
    max-width: var(--cta-links-max-width-desktop);
    margin-top: calc(var(--spacing-base) * 4);
  }

  .content {
    gap: calc(var(--spacing-base) * 4);
  }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .cta-link {
    border: var(--outline-offset) solid var(--color-bg);
  }

  .cta-link:focus {
    outline: calc(var(--outline-width) + 1px) solid var(--color-text);
  }
}