[data-page-contents] nav.page-contents {
  display: none;
}

@media (min-width: 768px) {
  [data-page-contents="guide"] {
    --guide-prose-width: 680px;
  }

  [data-page-contents="guide"] .hero-copy p:not(.eyebrow),
  [data-page-contents="guide"] article.content p {
    max-width: var(--guide-prose-width);
  }
}

@media (min-width: 1101px) {
  [data-page-contents] {
    --contents-top: 96px;
  }

  [data-page-contents] h2[id] {
    scroll-margin-top: var(--contents-top);
  }

  [data-page-contents="guide"],
  [data-page-contents="article"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    column-gap: 40px;
  }

  [data-page-contents] > .hero,
  [data-page-contents] > article.content {
    grid-column: 1;
    min-width: 0;
  }

  [data-page-contents] nav.page-contents {
    display: block;
    border-left: 1px solid var(--rule-strong);
    background: var(--bg-cream);
  }

  [data-page-contents] > .page-contents {
    grid-area: 1 / 2 / span 2;
    align-self: start;
    position: sticky;
    top: var(--contents-top);
    margin-block: 24px;
    max-height: calc(100dvh - var(--contents-top) - 24px);
    overflow-y: auto;
  }

  [data-page-contents="applications"] .glass-sidebar:has(.page-contents) {
    top: var(--contents-top);
    max-height: calc(100dvh - var(--contents-top) - 24px);
    overflow-y: auto;
    padding-inline: 14px 4px;
    margin-bottom: 24px;
  }

  [data-page-contents="applications"] .page-contents {
    margin-top: 24px;
  }

  .page-contents ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  [data-page-contents] .page-contents a {
    display: block;
    padding: 8px 12px;
    border: 0;
    font: 400 14px/1.4 var(--font-sans);
    letter-spacing: normal;
    text-transform: none;
  }

  .page-contents a:hover {
    text-decoration: underline;
  }

  [data-page-contents] .page-contents a[aria-current="location"] {
    background: var(--surface-paper);
    box-shadow: inset 3px 0 var(--vichor-red);
    font-weight: 600;
  }
}