/* Baked by Alfie — shared styles */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper, #f1e2c0);
  font-family: Georgia, 'Times New Roman', serif;
}

/* Landscape pages: letterbox-fit the artwork in the viewport */
.viewport {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stage {
  position: relative;
  width: min(100vw, calc(100vh * var(--ratio)));
  aspect-ratio: var(--ratio);
}
.stage > img.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  user-select: none;
  -webkit-user-drag: none;
}

/* Portrait pages: full-width scroll */
.scroll-page {
  position: relative;
  width: 100%;
  max-width: var(--maxw, 1024px);
  margin: 0 auto;
}
.scroll-page > img.bg {
  width: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Hotspots */
.spots { position: absolute; inset: 0; z-index: 6; }
.spot {
  position: absolute;
  display: block;
  cursor: pointer;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 18px;
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.spot:hover,
.spot:focus-visible {
  background: radial-gradient(ellipse closest-side, rgba(150, 110, 45, 0.15), rgba(150, 110, 45, 0) 80%);
  outline: none;
}
.spot:focus-visible { box-shadow: 0 0 0 2px rgba(115, 84, 32, 0.3); }
.spot.round { border-radius: 50%; }