@layer editorial-pages {
  .editorial-page {
    --editorial-page-bg: #f7f8f8;
    --editorial-page-line: #c9d1d5;
    --editorial-page-accent: #086a9c;
    --editorial-page-jump-bg: rgba(247, 248, 248, 0.96);
  }

  .editorial-page .site-shell {
    overflow: clip;
  }

  .editorial-page-eyebrow,
  .editorial-page-section-head > span {
    display: block;
    font-size: var(--gt-text-micro);
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  .editorial-page-hero .editorial-page-eyebrow {
    color: #64b8e6;
  }

  .editorial-page-section-head > span {
    grid-column: 1 / -1;
    color: var(--editorial-page-accent);
  }

  .editorial-page-jump {
    position: sticky;
    top: var(--gt-header-height);
    z-index: 90;
    width: var(--gt-page);
    min-height: var(--gt-jump-height);
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--editorial-page-line);
    background: var(--editorial-page-jump-bg);
    box-shadow: 0 0 0 100vmax var(--editorial-page-jump-bg);
    clip-path: inset(0 -100vmax);
    backdrop-filter: blur(14px) saturate(1.04);
  }

  .editorial-page-jump a {
    min-height: max(44px, var(--gt-jump-height));
    padding-inline: 22px;
    display: inline-flex;
    align-items: center;
    border-left: 1px solid #d7dde0;
    color: #394951;
    font-size: var(--gt-text-small);
    font-weight: 730;
    letter-spacing: 0.015em;
    white-space: nowrap;
    transition:
      color 0.18s ease,
      background 0.18s ease,
      box-shadow 0.18s ease;
  }

  .editorial-page-jump a:last-child {
    border-right: 1px solid #d7dde0;
  }

  .editorial-page-jump a:hover,
  .editorial-page-jump a:focus-visible,
  .editorial-page-jump a[aria-current="location"] {
    color: var(--editorial-page-accent);
    background: #eef4f6;
  }

  .editorial-page-jump a[aria-current="location"] {
    box-shadow: inset 0 -2px 0 var(--editorial-page-accent);
  }

  .editorial-page-jump a:focus-visible {
    outline: 2px solid var(--editorial-page-accent);
    outline-offset: -3px;
  }

  .editorial-page-section {
    width: var(--gt-page);
    margin-inline: auto;
    scroll-margin-top: 0;
    border-bottom: 1px solid var(--editorial-page-line);
  }

  .editorial-page-section-head {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.55fr);
    column-gap: clamp(28px, 5vw, 72px);
    row-gap: 18px;
    align-items: end;
    margin-bottom: clamp(30px, 3vw, 46px);
  }

  .editorial-page-section-head h2 {
    margin: 0;
    max-width: 17ch;
    font-size: var(--gt-title-section);
    font-weight: 740;
    letter-spacing: var(--gt-title-tracking);
    line-height: var(--gt-title-leading);
    text-wrap: balance;
  }

  .editorial-page-section-head > p {
    margin: 0;
    max-width: 50ch;
    color: #59676e;
    font-size: 15px;
    line-height: 1.7;
    text-wrap: pretty;
  }

  @media (max-width: 980px) {
    .editorial-page-section-head {
      grid-template-columns: 1fr;
      gap: 22px;
    }

    .editorial-page-section-head > span {
      grid-column: auto;
    }

    .editorial-page-section-head > p {
      max-width: 46ch;
    }
  }

  @media (max-width: 900px) {
    .editorial-page-jump {
      top: var(--gt-header-height);
      width: 100%;
      min-height: var(--gt-jump-height);
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-inline: contain;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .editorial-page-jump::-webkit-scrollbar {
      display: none;
    }

    .editorial-page-jump a {
      flex: 0 0 auto;
      min-height: var(--gt-jump-height);
      padding-inline: 18px;
    }
  }

  @media (max-width: 820px) {
    .editorial-page-section {
      width: auto;
      margin-left: max(20px, env(safe-area-inset-left));
      margin-right: max(20px, env(safe-area-inset-right));
      scroll-margin-top: 0;
    }

    .editorial-page-section-head {
      display: block;
      margin-bottom: 32px;
    }

    .editorial-page-section-head h2 {
      margin-top: 20px;
      max-width: 17ch;
      font-size: var(--gt-title-section);
      line-height: var(--gt-title-leading);
    }

    .editorial-page-section-head > p {
      margin-top: 18px;
      max-width: 36ch;
      font-size: 0.94rem;
      line-height: 1.62;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .editorial-page-jump {
      background: var(--editorial-page-bg);
      box-shadow: 0 0 0 100vmax var(--editorial-page-bg);
      backdrop-filter: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .editorial-page-jump,
    .editorial-page-jump a {
      scroll-behavior: auto;
      transition: none;
    }
  }
}