* { box-sizing: border-box; }
html { color-scheme: dark; background: #0b2432; }
body { margin: 0; color: #f5e8ce; font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; }
.artwork { position: relative; width: 100%; }
.artwork img { display: block; width: 100%; height: auto; }
.hotspot { position: absolute; display: block; cursor: pointer; border-radius: 4px; }
a:focus-visible { outline: 3px solid #f3cd7f; outline-offset: 3px; box-shadow: 0 0 0 6px #102b3a; }
.hotspot:focus-visible { background: rgb(231 191 114 / 18%); outline-offset: 0; box-shadow: inset 0 0 0 2px #102b3a, 0 0 0 2px #102b3a; }
.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; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 10; padding: 12px; background: #0b2432; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.mobile-nav { display: none; }
.coming-soon { background: #030e20; min-height: 100vh; }
.return-home { margin: 0; padding: 12px 16px 28px; text-align: center; }
.return-home a { display: inline-block; padding: 12px; font-size: 1rem; text-underline-offset: 4px; }
@media (max-width: 767px) {
  .mobile-nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 4px; padding: 4px 6px; border-bottom: 1px solid #64716f; background: #0b2432; }
  .mobile-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px; font-size: .875rem; line-height: 1.25; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .mobile-nav a[aria-current="page"] { color: #ffdc96; font-weight: 700; }
}
@media (forced-colors: active) { a:focus-visible { outline: 3px solid LinkText; } }