html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: auto;
}

/* Desktop: grid areas for left panel, image, and caption */
.site {
  grid-template-areas:
    "left image"
    "caption image";
  grid-template-rows: 1fr auto;
}

.left-panel  { grid-area: left; }
.artwork     { grid-area: image; }
.artwork-caption {
  grid-area: caption;
  font-size: 15px;
  line-height: 1.6;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  padding-bottom: 20px;
}

/* Override .artwork from style.css to show image correctly */
.artwork {
  overflow: visible;
  position: relative;
}

.artwork img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Mobile: stack image then caption */
@media (max-width: 768px) {
  html, body {
    overflow-y: auto;
    height: auto;
  }

  .site {
    grid-template-areas: none;
    grid-template-rows: none;
    display: block;
  }

  .artwork {
    height: auto;
    margin-top: 0;
  }

  .artwork img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .artwork-caption {
    padding: 16px;
  }
}