@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:wght@400;500;600;700&family=Pacifico&display=swap");


/* =================================
   COLOURS
================================= */

:root {
  --black: #101010;
  --soft-black: #181818;
  --panel-black: #202020;

  --white: #ffffff;
  --soft-white: #eeeeea;
  --grey: #a9a9a4;

  --green: #7ac142;
  --dark-green: #528d28;
  --blue: #bde7f5;
}


/* =================================
   BASIC PAGE SETUP
================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;

  background: var(--black);
  color: var(--white);

  font-family:
    "DM Sans",
    Arial,
    sans-serif;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}


/* =================================
   NAVIGATION
================================= */

.topbar {
  width: 100%;

  display: flex;
  align-items: center;
  gap: 16px;

  padding: 14px 24px;

  border-bottom: 1px solid #393939;
  background: var(--black);
}

.logo {
  flex-shrink: 0;

  padding: 10px 17px;

  border: 2px solid var(--white);

  border-radius:
    54% 46% 49% 51% /
    43% 57% 43% 57%;

  color: var(--white);

  font-family:
    "Archivo Black",
    Arial,
    sans-serif;

  font-size: 0.92rem;
  letter-spacing: 0.05em;
  text-decoration: none;
}

.nav-links {
  flex: 1;

  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 14px;

  min-height: 45px;
  padding: 8px 24px;

  border-radius:
    28px 17px 26px 20px /
    18px 30px 19px 27px;

  background: var(--white);
}

.nav-links a {
  color: var(--black);

  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-decoration: none;
  text-transform: uppercase;

  transition:
    color 150ms ease,
    transform 150ms ease;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--dark-green);
  transform: translateY(-2px);
}

.nav-links a[aria-current="page"] {
  color: var(--dark-green);

  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}


/* =================================
   SHARED INNER-PAGE HERO
================================= */

.inner-hero {
  position: relative;

  width: 100%;
  min-height: 650px;

  padding: 30px 3vw 0;

  overflow: hidden;

  border-bottom: 1px solid #404040;
  background: var(--black);
}

.inner-meta {
  position: relative;
  z-index: 6;

  display: flex;
  justify-content: space-between;
  gap: 30px;

  color: var(--soft-white);

  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}


/* =================================
   SHARED TYPOGRAPHY
================================= */

.page-kicker {
  margin: 0 0 18px;

  color: var(--dark-green);

  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.large-intro {
  font-size: clamp(1.15rem, 2vw, 1.55rem) !important;
  font-weight: 600;
  line-height: 1.5 !important;
}

.section-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 35px;

  margin-bottom: 50px;
}

.section-number {
  margin: 0;

  color: var(--green);

  font-family:
    "Archivo Black",
    Arial,
    sans-serif;

  font-size: clamp(3rem, 7vw, 7rem);
  line-height: 1;
}

.section-heading-row h2 {
  margin: 0;

  font-family:
    "Archivo Black",
    Arial,
    sans-serif;

  font-size: clamp(2.6rem, 5.8vw, 6rem);
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.story-label {
  margin: 0 0 22px;

  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}


/* =================================
   SHARED BUTTON
================================= */

.outline-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;

  min-width: min(100%, 290px);

  margin-top: 22px;
  padding: 14px 18px;

  border: 2px solid currentColor;

  border-radius:
    23px 15px 25px 17px /
    16px 26px 15px 24px;

  color: var(--white);

  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;

  transition:
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.outline-link:hover,
.outline-link:focus-visible {
  background: var(--green);
  color: var(--black);

  transform: translateY(-3px);
}

.light-outline-link {
  color: var(--black);
}

.light-outline-link:hover,
.light-outline-link:focus-visible {
  background: var(--black);
  color: var(--white);
}


/* =================================
   FOOTER
================================= */

footer {
  display: flex;
  justify-content: space-between;
  gap: 25px;

  padding: 25px 4vw;

  background: var(--black);
  color: var(--grey);

  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

footer p {
  margin: 0;
}


/* =================================
   SHARED RESPONSIVE STYLES
================================= */

@media (max-width: 900px) {
  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .logo {
    width: max-content;
  }

  .nav-links {
    justify-content: flex-start;
  }

  .inner-hero {
    min-height: 600px;
  }
}

@media (max-width: 620px) {
  .topbar {
    padding: 12px;
  }

  .nav-links {
    display: grid;
    grid-template-columns: 1fr 1fr;

    padding: 14px;
  }

  .nav-links a {
    font-size: 0.65rem;
  }

  .inner-hero {
    min-height: 540px;
    padding: 24px 14px 0;
  }

  .inner-meta {
    font-size: 0.55rem;
  }

  .inner-meta span:nth-child(2) {
    display: none;
  }

  .section-heading-row {
    gap: 15px;
  }

  .section-number {
    font-size: 3rem;
  }

  footer {
    flex-direction: column;
    gap: 8px;
  }
}