.wordmark {
   height: 25px;
}

.yak {
   height: 100px;
}

*, *::before, *::after {
   box-sizing: border-box;
}

body {
   margin: 0;
}

a {
   text-decoration: none;
   color: inherit;
}

em {
   font-weight: 550;
   font-style: normal;
}

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

h1, h2, h3 {
   margin: 0;
   letter-spacing: -.05ch;
}

ol,
ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

.faq summary {
   list-style: none;
   cursor: pointer;
}

.faq summary::-webkit-details-marker {
   display: none;
}

.faq {
   overflow: hidden;
}

.faq__icon {
   flex-shrink: 0;
   transition: transform 250ms ease;
}

.faq[open]:not(.is-closing) .faq__icon {
   transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {

   .faq__icon {
      transition: none;
   }
}

@media (prefers-reduced-motion: no-preference) {
   html {
      scroll-behavior: smooth;
   }
}

figure {
   margin: 0;
}

.fg-italic {
   font-style: italic;
}

.fg-check {
   flex-shrink: 0;
}

.fg-photo {
   align-self: start;
}

.fg-overlay {
   position: absolute;
   inset: auto 0 0 0;
   background: linear-gradient(transparent, hsla(0, 0%, 0%, .6));
}

.fg-layers {
   display: grid;
   grid-template-columns: 1fr 1fr;
}

.fg-grid,
.fg-types {
   display: grid;
   gap: 2rem 1.5rem;
}

.fg-types {
   gap: 1.25rem;
}

@media (min-width: 768px) {
   .fg-grid {
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "photo chars" "side side";
   }

   .fg-types {
      grid-template-columns: 1fr 1fr;
   }

   .fg-photo {
      grid-area: photo;
   }

   .fg-chars {
      grid-area: chars;
   }

   .fg-side {
      grid-area: side;
   }

}

@media (min-width: 1280px) {
   .fg-grid {
      grid-template-columns: 1.3fr 1fr 1fr;
      grid-template-areas: "photo chars side";
   }

   .fg-types {
      grid-template-columns: repeat(4, 1fr);
   }
}

.bar {
   height: 8px;
   border: none !important;
   background: var(--ink1);
}

.bar__fill {
   width: var(--val);
   height: 100%;
}

.pack img {
   width: 80px;
}

.pack img + img {
   margin-left: -24px;
}

@media (min-width: 768px) {
   .pack img {
      width: 120px;
   }

   .pack img + img {
      margin-left: -36px;
   }
}