a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-underline-offset linear var(--transition-duration-fast);
}

a:hover {
  text-underline-offset: 0.1em;
}

a:focus-visible {
  outline: 2px solid;
  outline-offset: 2px;
}

img,
iframe {
  display: block;
  height: auto;
  max-width: 100%;
}

ul,
ol {
  padding-inline-start: 0.95em;
}

ul:not([class]) li::marker {
  color: var(--color-brand-pink);
}

blockquote {
  hanging-punctuation: first last;
  margin-inline: 0;
}

/**
 * text for screen-readers only.
 * @see https://www.tpgi.com/the-anatomy-of-visually-hidden/
 */
.visually-hidden:not(:focus):not(:active) {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.header {
  background: var(--color-brand-blue-dark);
  color: var(--color-brand-pink-tint);
  padding-block-start: clamp(1rem, 2vw, 3.75rem);
  padding-block-end: clamp(1rem, 2vw, 3.75rem);
}

.logo {
  display: block;
  font-size: clamp(1.25rem, 5vw, 3rem);
  font-weight: var(--font-weight-bold);
  margin-bottom: -0.25em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

@media (max-width: 37.5em) {
  .header {
  }
}

.nav {
  margin-bottom: -0.25em;
  overflow: auto;
  padding-block: clamp(0.5rem, 2vw, 0.875rem);
  text-align: center;
}

.nav a {
  color: var(--color-brand-pink);
  display: inline-block;
  font-weight: var(--font-weight-semibold);
  padding: 1rem;
  text-decoration: none;
}

/* 48em = 768px */
@media (max-width: 48em) {
  .nav a {
    padding: 0.5rem;
  }
}

.nav a:hover {
  text-decoration: underline;
}

.nav a[aria-current] {
  text-decoration: underline;
}

.main {
}

@media (max-width: 37.5em) {
  .main {
  }
}

.main p,
.main ul,
.main ol {
  max-width: 60ch;
}

.footer {
  background: var(--color-brand-pink);
  color: var(--color-brand-pink-tint);
  padding-block: 2.875rem;
}

.footer a {
  color: currentColor;
  display: inline-block;
  font-weight: var(--font-weigh-semibold);
  text-decoration: none;
}

.footer a:hover,
.footer a[aria-current] {
  text-decoration: underline;
}

@media (max-width: 37.5em) {
  .footer {
  }
}

.footer nav {
  margin-block-end: 1.4375rem;
}

.footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* 48em = 768px */
@media screen and (max-width: 48em) {
  .footer nav a {
    width: 100%;
  }
}

.contact-cta {
  border-top: 1px solid var(--color-brand-blue);
  background-color: var(--color-brand-pink-tint);
  margin-block-start: 2.875rem;
  padding-block: 2.875rem;
}

/** Typography */
:where(.main :is(h1, h2, h3, h4, h5, h6)) {
  color: var(--color-heading);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: 1.2;
  margin-block: 1em;
  text-wrap: balance;
}

:where(.main :is(h1, h2, h3, h4, h5, h6):not(:first-child)),
:where(.main :is(h1, h2, h3, h4, h5, h6):has(.h2)) {
  margin-block-start: 1.5em;
}

:where(.main h1) {
  font-size: clamp(2rem, 7vw, 3.75rem);
  line-height: 1.2;
  margin-block-end: 0.5em;
  margin-block-start: 1.5em;
}

@supports (text-wrap: pretty) {
  :where(.main h1) {
    text-wrap: pretty;
  }
}

@media (max-width: 25em) {
  :where(.main h1) {
    margin-block-start: 1.2em;
  }
}

:where(.main p) {
  margin-block: 1em;
}

:where(.main h1 + p) {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  line-height: 1.3;
}

/* .hero {
  margin-block-start: 5rem;
} */

.hero h1 {
  color: var(--color-brand-blue);
  /* font-size: clamp(1.8rem, 9vw, 5.8rem); */
  line-height: 0.98;
}

.hero p {
  max-width: 50ch;
}