/* Keep the page above its decoration with explicit layers, including in Safari. */
.nav-main,
body > .container.content {
  position: relative;
  z-index: 1;
}

.minimal-surface-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

@media print {
  .minimal-surface-background {
    display: none;
  }
}

/* Keep the existing navigation within the phone viewport. */
@media (max-width: 38rem) {
  .nav-main ul {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-main li a {
    padding-right: clamp(.4rem, 2.1vw, .85rem);
    padding-left: clamp(.4rem, 2.1vw, .85rem);
  }
}

.drawing-artwork {
  margin: 0;
  min-height: 100vh;
  background: #faf9f6;
  color: #484848;
  font-family: "Source Sans Pro", sans-serif;
}

.drawing-caption {
  position: fixed;
  z-index: 1;
  bottom: 1.5rem;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 2rem);
  transform: translateX(-50%);
  padding: .8rem 1.2rem;
  border-radius: .25rem;
  background: rgba(250, 249, 246, .9);
  font-family: Georgia, 'Times New Roman', serif;
  text-align: center;
}

.drawing-caption h1 {
  margin: 0 0 .35rem;
  font-size: 1.1rem;
  font-weight: normal;
}

.drawing-caption p {
  margin: 0 0 .75rem;
  font-size: .85rem;
  color: #777;
}

.drawing-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  font: .75rem/1.4 system-ui, sans-serif;
}

.drawing-controls button,
.drawing-controls a {
  padding: .35rem 0;
  border: 0;
  border-bottom: 1px solid #b6b4af;
  background: none;
  color: #555;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.drawing-controls :focus-visible {
  outline: 2px solid #555;
  outline-offset: 4px;
}