.editorial-page {
  --ig-editorial-ivory: #fcfbf7;
  --ig-editorial-ink: #101713;
  --ig-editorial-forest: #0c2118;
  --ig-editorial-lime: #91e100;
  --ig-editorial-eagle-blue: #153b74;
  --ig-editorial-light-blue: #85b2ff;
  --ig-editorial-navy: #060b12;
  --ig-editorial-line: color-mix(in srgb, currentColor 16%, transparent);
  --ig-editorial-space: clamp(1rem, 2.5vw, 2rem);
  --ig-editorial-measure: 68ch;
}

.editorial-page .editorial-shell {
  width: min(1180px, calc(100% - 2rem));
  margin-inline: auto;
}

.editorial-page .editorial-masthead {
  display: grid;
  gap: var(--ig-editorial-space);
  align-items: end;
  padding-block: clamp(3rem, 8vw, 7rem);
}

.editorial-page .editorial-masthead h1,
.editorial-page .editorial-band h2,
.editorial-page .editorial-card h2,
.editorial-page .editorial-card h3 {
  font-family: Newsreader, Georgia, serif;
  text-wrap: balance;
}

.editorial-page .editorial-band {
  padding-block: clamp(3rem, 7vw, 6rem);
}

.editorial-page .editorial-band--ivory {
  color: var(--ig-editorial-ink);
  background: var(--ig-editorial-ivory);
}

.editorial-page .editorial-band--forest {
  color: var(--ig-editorial-ivory);
  background: var(--ig-editorial-forest);
}

.editorial-page .editorial-band--navy {
  color: var(--ig-editorial-ivory);
  background: var(--ig-editorial-navy);
}

.editorial-page .editorial-card {
  border: 1px solid var(--ig-editorial-line);
  padding: clamp(1rem, 2.5vw, 1.75rem);
  background: color-mix(in srgb, currentColor 3%, transparent);
}

.editorial-page .editorial-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.editorial-page .editorial-media {
  overflow: hidden;
  border: 1px solid var(--ig-editorial-line);
  background: var(--ig-editorial-navy);
}

.editorial-page .editorial-media img {
  display: block;
  width: 100%;
  height: auto;
}

.editorial-page .editorial-copy {
  max-width: var(--ig-editorial-measure);
}

.editorial-page :focus-visible {
  outline: 3px solid var(--ig-editorial-lime);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .editorial-page *,
  .editorial-page *::before,
  .editorial-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  .editorial-page .editorial-card,
  .editorial-page .editorial-media {
    border: 1px solid CanvasText;
  }
}