/* Import Apfel font */
@font-face {
  font-family: "Apfel";
  src: url("/fonts/ApfelGrotezk-Regular.woff2") format("woff2"),
    url("/fonts/ApfelGrotezk-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
/* Import Feature Deck TRIAL font */
@font-face {
  font-family: "FeatureDeck";
  src: url("/fonts/FeatureDeck-Light-Trial.woff2") format("woff2"),
    url("/fonts/FeatureDeck-Light-Trial.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* Global variables */
:root {
  /* Color styles */
  --light: #fafafa;
  --dark: #285049;
  --primary: #55b186;
  --secondary: #fe9a93;
  --accent: #80aee4;
  /* Transitions */
  --easeinout: all 0.25s ease-in-out;
  /* Rows rise into place as they arrive. Shared by the scroll entrance and by
     anything that plays on load, so everything on the site arrives alike. */
  --enter-distance: 80px;
  --enter-duration: 1100ms;
  --enter-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --enter-delay: 300ms;
  /* What the fixed nav takes up: one line of h2 between the page margin,
     doubled. Anything that has to clear it or sit against it measures from
     here rather than carrying its own copy of the number. */
  --nav-height: calc(1rem + 60px);
}

@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(var(--enter-distance));
  }
}

/* For anything that arrives with the page rather than being scrolled to: the
   page titles, which have nothing above them to bring them into view. Done in
   CSS rather than through the shared action so it is already held back on the
   first paint, with nothing to flash before scripting catches up. */
.entrance {
  animation: enter var(--enter-duration) var(--enter-ease) var(--enter-delay) both;
}

@media (prefers-reduced-motion: reduce) {
  .entrance {
    animation: none;
  }
}

body {
  -webkit-font-smoothing: antialiased;
  background-color: var(--light);
  color: var(--dark);
  font-family: apfel, sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6rem;
  margin: 0;
  padding: 0;
}

::selection {
  background-color: var(--dark);
  color: var(--primary);
}

/* Global typography styles */
/* The same fluid sizing as the name on the home page, so the two behave alike
   at every width. Spacing around it belongs to whatever is laying it out. */
.display {
  -webkit-font-smoothing: antialiased;
  font-family: "obviously-compressed", sans-serif;
  font-size: 38vw;
  font-style: normal;
  font-weight: 700;
  line-height: 20vw;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

h1,
.h1 {
  -webkit-font-smoothing: antialiased;
  font-family: FeatureDeck, sans-serif;
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.6rem;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  h1,
  .h1 {
    font-size: 4rem;
    line-height: 4.5rem;
  }
}

h2,
.h2 {
  -webkit-font-smoothing: antialiased;
  font-family: apfel, sans-serif;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.02rem;
  line-height: 1rem;
  margin-top: 0;
  padding: 0;
  text-transform: uppercase;
}

p,
.p {
  -webkit-font-smoothing: antialiased;
  font-family: apfel, sans-serif;
  font-size: 1.1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem;
  margin-top: 0;
  margin: 0;
  padding-bottom: 0;
}
p + p,
.p + .p {
  padding-top: 10px;
}

a,
a:link,
a:active,
a:visited {
  border-bottom: 0.15rem solid var(--primary);
  color: inherit;
  padding-bottom: 0.1rem;
  text-decoration: none;
  transition: var(--easeinout);
}
a:hover {
  border-color: var(--secondary);
}