:root {
  --page-max: 1122px;
  --focus: #d91016;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #0a0d12; color: #fff; font-family: Arial, Helvetica, sans-serif; }
body { display: flex; justify-content: center; }
.site-shell { width: 100%; max-width: var(--page-max); background: #fff; }
.page-frame { position: relative; width: 100%; margin: 0 auto; background: #fff; }
.page-frame img.page-art { display: block; width: 100%; height: auto; user-select: none; }
a.hotspot {
  position: absolute;
  display: block;
  text-decoration: none;
  border-radius: 6px;
  z-index: 5;
}
a.hotspot:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 2px;
  background: rgba(217,16,22,.14);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 600px) {
  .site-shell { max-width: 100%; }
}

.upcoming-note-overlay {
  position: absolute;
  left: 18%;
  top: 61.8%;
  width: 64%;
  z-index: 4;
  text-align: center;
  color: #0a1424;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(16px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.35;
  pointer-events: none;
}
.upcoming-note-overlay strong {
  color: #d91016;
}