.site-contents {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 20;
  color: #162d43;
  font-family: "Jost", "Avenir Next", Avenir, sans-serif;
  font-size: 17px;
  line-height: 1.4;
}

.site-contents > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #c9c7bd;
  border-radius: 24px;
  background: #f7f3ea;
  box-shadow: 0 2px 10px rgb(22 45 67 / 7%);
  list-style: none;
  cursor: pointer;
}

.site-contents > summary::-webkit-details-marker { display: none; }
.site-contents > summary:hover { background: #eeeadf; }
.site-contents[open] > summary { border-color: #162d43; }
.site-contents .contents-close-icon { display: none; }
.site-contents[open] .contents-list-icon { display: none; }
.site-contents[open] .contents-close-icon { display: block; }

.site-contents > summary:focus-visible,
.site-contents a:focus-visible {
  outline: 2px solid #162d43;
  outline-offset: 4px;
}

.contents-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(344px, calc(100vw - 32px));
  max-height: calc(100dvh - 98px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  border: 1px solid #d2cec4;
  border-radius: 12px;
  background: #f7f3ea;
  box-shadow: 0 12px 36px rgb(22 45 67 / 14%);
}

.contents-panel ol {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contents-panel a {
  display: block;
  padding: 11px 12px;
  border-radius: 5px;
  color: #162d43;
  text-decoration: none;
}

.contents-panel a:hover { background: #eeeadf; }
.contents-panel a[aria-current="location"] {
  background: #e8e8dd;
  box-shadow: inset 2px 0 #162d43;
}

.contents-secondary {
  display: grid;
  gap: 2px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #d2cec4;
  font-size: 16px;
}

.contents-secondary a { text-decoration: underline; text-underline-offset: 0.18em; }

.lab-story h2,
#welcome-heading,
#the-polder-way { scroll-margin-top: 24px; }

@media (max-width: 700px) {
  .site-contents {
    top: auto;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    font-size: 16px;
  }
  .contents-panel {
    top: auto;
    bottom: calc(100% + 10px);
    max-height: calc(100dvh - 106px - env(safe-area-inset-bottom));
  }
  .site-contents > summary { padding: 10px 15px; }
}

@media print {
  .site-contents { display: none; }
}