.shell {
  width: min(100% - 3rem, var(--shell));
  margin-inline: auto;
}

.site-head {
  border-bottom: 1px solid var(--line);
  background: rgb(255 255 255 / 96%);
}

.head-line {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  min-height: min(780px, calc(100vh - 73px));
  padding-block: clamp(4rem, 8vw, 8rem);
}

.hero::before {
  position: absolute;
  z-index: -1;
  inset: 0 50% 0 calc(50% - 50vw);
  background-image:
    linear-gradient(rgb(0 51 102 / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(0 51 102 / 5%) 1px, transparent 1px);
  background-size: 32px 32px;
  content: "";
  mask-image: linear-gradient(90deg, #000 40%, transparent 100%);
}

.hero-copy,
.instrument,
.compare-side,
.step > div {
  min-width: 0;
}

.dek {
  max-width: 65ch;
}

.dek p {
  margin-bottom: 0.65rem;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.55;
}

.content-grid {
  display: grid;
  gap: clamp(4rem, 8vw, 8rem);
  padding-bottom: clamp(4rem, 8vw, 8rem);
}

.chapter {
  scroll-margin-top: 2rem;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(120px, 0.25fr) minmax(0, 0.75fr);
  column-gap: 2rem;
  max-width: 960px;
  margin-bottom: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.section-code {
  grid-row: span 2;
}

.section-head h2,
.section-head .caption {
  grid-column: 2;
}

.prose {
  max-width: var(--measure);
  margin-left: min(25%, 240px);
}

.prose p,
.prose li {
  margin-bottom: 1rem;
}

.prose ul {
  padding-left: 1.25rem;
}

.site-foot {
  border-top: 1px solid #53616a;
  background: var(--charcoal);
  color: var(--paper);
}

.site-foot .shell {
  display: flex;
  min-height: 120px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.site-foot p {
  max-width: 60ch;
  margin: 0;
  color: var(--paper);
  font-size: 1rem;
}

.site-foot a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--paper);
  font-size: 1rem;
}

.not-found {
  min-height: calc(100vh - 193px);
  padding-block: clamp(5rem, 12vw, 10rem);
}

.not-found > p:not(.kicker) {
  max-width: 52ch;
  font-size: 1.125rem;
}

@media (max-width: 767px) {
  .shell {
    width: min(100% - 2rem, var(--shell));
  }

  .head-line {
    min-height: 64px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding-block: 0.5rem;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
    gap: 2.5rem;
    padding-block: 3.5rem 4.5rem;
  }

  .hero::before {
    inset: 0 calc(50% - 50vw);
    mask-image: linear-gradient(#000 45%, transparent 100%);
  }

  .section-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }

  .section-code,
  .section-head h2,
  .section-head .caption {
    grid-column: 1;
    grid-row: auto;
  }

  .prose {
    margin-left: 0;
  }

  .site-foot .shell {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding-block: 1.5rem;
  }
}