/* Keep inline illustrations within both the page width and screen height. */
.concept-sketch > .sketch-image,
.concept-sketch > .sketch-scene {
  width: 100%;
  max-width: 104vh;
  max-width: 104svh;
  margin-inline: auto;
}

.sketch-viewer {
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
}
.viewer-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--line);
}
.viewer-brand { display: block; flex: 0 0 7rem; }
.viewer-brand img { display: block; width: 100%; height: auto; }
.viewer-nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.875rem; }
.viewer-nav a { padding: 0.2rem 0; }
.viewer-main {
  display: flex;
  flex: 1;
  min-height: 0;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0.75rem 1rem 1rem;
}
.sketch-view {
  display: none;
  flex: 1;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
}
.sketch-view:target, #overview { display: grid; }
.sketch-view:target ~ #overview { display: none; }
.sketch-view h1 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); margin: 0; }
.viewer-frame { min-width: 0; min-height: 0; }
.viewer-frame svg { display: block; width: 100%; height: 100%; }
.viewer-caption { font-size: 0.875rem; color: var(--muted); }
.viewer-caption p { margin: 0 0 0.3rem; }
.viewer-actions { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
@media (max-width: 40rem) {
  .viewer-header { gap: 0.25rem 0.75rem; }
  .viewer-brand { flex-basis: 5rem; }
  .viewer-nav { gap: 0.25rem 0.75rem; }
}
@media (max-height: 28rem) {
  .viewer-header { padding-block: 0.25rem; }
  .viewer-brand { flex-basis: 4rem; }
  .viewer-main { padding-block: 0.5rem; }
  .sketch-view { gap: 0.4rem; }
}