html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
}

body::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 88px 88px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent 72%);
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  transform: translateY(-200%);
  padding: 0.75rem 1rem;
  border: 1px solid rgba(0, 242, 255, 0.35);
  background: rgba(5, 5, 5, 0.96);
  color: #ffffff;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.material-symbols-outlined {
  display: inline-block;
  font-variation-settings: "FILL" 0, "wght" 220, "GRAD" 0, "opsz" 24;
  line-height: 1;
}

.serif-italic {
  font-family: "Newsreader", serif;
  font-style: italic;
}

.fine-border {
  border-color: rgba(255, 255, 255, 0.075);
}

.advisory-lane-card {
  box-shadow: inset 0 0 0 1px rgba(0, 242, 255, 0.18);
}

.hero-photo::after {
  background:
    linear-gradient(to top, rgba(5, 5, 5, 0.72), transparent 44%),
    linear-gradient(to right, rgba(5, 5, 5, 0.2), transparent 38%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.hero-title {
  letter-spacing: 0;
}

h1,
h2,
h3,
.font-headline,
.font-label,
a,
button {
  text-wrap: balance;
}

p,
li,
.hero-intro {
  text-wrap: balance;
}

@media (min-width: 1024px) {
  .hero-title {
    line-height: 0.94;
  }

  .hero-intro {
    max-width: 48rem;
  }
}

@media (min-width: 1536px) {
  .hero-title {
    max-width: 62rem;
  }
}

input,
select,
textarea {
  border-radius: 0;
}

select option {
  background: #050505;
  color: #ffffff;
}

::selection {
  color: #ffffff;
}

@media (prefers-reduced-motion: no-preference) {
  a,
  button {
    transition-property: background-color, border-color, color, opacity, transform;
  }

  .hero-photo img {
    transition: transform 900ms ease;
  }

  .hero-photo:hover img {
    transform: scale(1.015);
  }
}

@media (max-width: 640px) {
  body::before {
    background-size: 56px 56px;
  }
}