* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #1b2947; }
body { margin: 0; background: #1b2947; overflow-x: hidden; font-family: Helvetica, Arial, sans-serif; }
.site { width: 100%; }
.page { position: relative; width: 100%; aspect-ratio: 960 / 540; line-height: 0; }
.page img { display: block; width: 100%; height: auto; max-width: none; }
/* Invisible hit areas laid exactly over the words drawn in the page artwork.
   Positions come from layout.json (generated with the artwork) and are in % of the 960x540 page. */
.nav-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.nav-overlay a, .hotspot { position: absolute; pointer-events: auto; color: transparent; font-size: 1px; line-height: 1; text-decoration: none; overflow: hidden; white-space: nowrap; outline-offset: 3px; }
.nav-overlay a::after, .hotspot::after { content: ""; position: absolute; inset: -8px -6px; }
.hotspot { z-index: 2; }
.nav-overlay a:focus-visible, .hotspot:focus-visible { outline: 1px solid rgba(255,255,255,.9); }
.language-control { position: fixed; z-index: 20; top: 18px; left: 18px; }
.language-control select { appearance: none; border: 0; border-radius: 0; background: rgba(16,35,71,.88); color: #fff; font: 10px/1 Helvetica, Arial, sans-serif; padding: 6px 22px 6px 7px; cursor: pointer; }
.language-control select:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
.visually-hidden { 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) { .language-control { top: 10px; left: 10px; } .language-control select { font-size: 9px; padding: 5px 20px 5px 6px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }