body {
  margin: 0;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
}

.sidebar, main { padding: 16px; }
.sidebar { overflow-y: auto; }
.sidebar summary { display: none; }
nav ul { list-style: none; padding: 0; margin: 2em 0; }
main { min-width: 0; overflow: auto; }
.page > :first-child, .text-block > :first-child { margin-top: 0; }

.gallery {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }
.artwork { flex: 0 0 auto; margin: 0; }
.artwork img {
  display: block;
  width: auto;
  height: auto;
  max-height: 65vh;
  max-height: 65dvh;
}
figcaption { margin-top: 8px; max-width: 30em; overflow-wrap: anywhere; }
.text-block { flex: 0 0 260px; }

@media (max-width: 600px) {
  body { grid-template-columns: auto minmax(0, 1fr); }
  .sidebar { border-right: 1px solid; padding: 8px; }
  .sidebar[open] { width: min(240px, 70vw); }
  .sidebar summary {
    display: block;
    list-style: none;
    color: LinkText;
    text-decoration: underline;
    cursor: pointer;
  }
  .sidebar summary::-webkit-details-marker { display: none; }
  .sidebar[open] summary { text-align: right; }
  .sidebar .collapse, .sidebar[open] .expand { display: none; }
  .sidebar[open] .collapse { display: inline; }
  main { padding: 16px 8px; }
}

/* Keep desktop navigation visible after resizing a collapsed mobile menu. */
@media (min-width: 601px) {
  .sidebar::details-content { content-visibility: visible; }
  .sidebar:not([open]) > nav { display: block; }
}