.site-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: var(--header-height);
  border-block-end: 1px solid var(--line);
  background: var(--panel-bg);
}

.shell {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  min-block-size: calc(100dvh - var(--header-height));
}

.index-pane {
  position: sticky;
  top: var(--header-height);
  display: flex;
  flex-direction: column;
  block-size: calc(100dvh - var(--header-height));
  overflow: hidden;
  border-inline-end: 1px solid var(--line);
  background: var(--panel-bg);
  padding: 1rem;
}

@media (max-width: 760px) and (orientation: portrait) {
  .shell {
    grid-template-columns: 1fr;
  }

  .index-pane {
    block-size: var(--mobile-index-height);
    border-block-end: 1px solid var(--line);
    border-inline-end: 0;
  }
}

@media (max-width: 960px) and (orientation: landscape) {
  .shell {
    grid-template-columns: 12rem minmax(0, 1fr);
  }

  .index-pane {
    block-size: calc(100dvh - var(--header-height));
  }

  .article-pane:has(.article:target) .article:target,
  .article-pane:has(.article :target) .article:has(:target),
  .article[id],
  .article h2[id],
  .article h3[id],
  .code-details summary[id],
  .media-details summary[id],
  .block-footer[id] {
    scroll-margin-top: calc(var(--header-height) + 1rem);
  }
}

@media (orientation: landscape) {
  .index-pane .index-list {
    flex: 1 1 0;
    max-block-size: max-content;
  }

  .index-pane .index-list:has(> .index-item:nth-child(2)) {
    min-block-size: 4.375rem;
  }

  .index-section-lists {
    flex: 2 1 0;
    min-block-size: 4.25rem;
  }
}

@media (min-width: 961px) and (orientation: landscape) {
  .index-pane .index-list:has(> .index-item:nth-child(2)) {
    min-block-size: 5.625rem;
  }
}

@media (max-height: 480px) and (orientation: landscape) {
  .index-section-lists {
    margin-block-start: 0.4rem;
    padding-block-start: 0.4rem;
  }
}

@media (max-width: 360px) and (orientation: portrait),
       (max-height: 330px) and (orientation: landscape) {
  .index-footer p:nth-child(2),
  .index-footer p:nth-child(3) {
    display: none;
  }
}