.section-shell {
  width: min(100% - 2rem, var(--container-page));
  margin-inline: auto;
}

.section-shell--content {
  width: min(100% - 2rem, var(--container-content));
  margin-inline: auto;
}

.section-shell--narrow {
  width: min(100% - 2rem, var(--container-narrow));
  margin-inline: auto;
}

.section-kicker,
.eyebrow {
  margin: 0;
  color: var(--color-sage-deep);
  font-family: var(--font-interface);
  font-size: var(--text-xs);
  font-weight: 650;
  line-height: var(--leading-ui);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
}

.editorial-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 350;
  line-height: var(--leading-title);
}

.editorial-copy {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-md);
  line-height: var(--leading-copy);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: var(--leading-ui);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
}

.link-arrow::after {
  content: "→";
  transform: translateX(0);
  transition: transform var(--transition-base);
}

.link-arrow:hover::after,
.link-arrow:focus-visible::after {
  transform: translateX(3px);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 40rem) {
  .section-shell,
  .section-shell--content,
  .section-shell--narrow {
    width: min(100% - 1.25rem, var(--container-page));
  }
}