:root { color-scheme: dark; background: #050203; color: #e4bc7b; font-family: Georgia, serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; }
.landing { position: relative; width: 100%; max-width: min(680px, calc(100svh * .65349464)); aspect-ratio: 532.598130841 / 815; overflow: hidden; }
picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.artwork { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.landing nav { position: absolute; inset: 0; }
.hotspot { position: absolute; display: grid; place-items: center; border-radius: 4px; color: #f9e2b5; text-decoration: none; transition: background-color 160ms ease, box-shadow 160ms ease; }
.hotspot:hover { background-color: rgb(226 177 99 / 12%); box-shadow: inset 0 0 0 1px rgb(226 177 99 / 60%); }
.hotspot:focus-visible { outline: 2px solid #ffe4a6; outline-offset: -2px; background-color: rgb(226 177 99 / 20%); }
.hotspot span, .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Artwork coordinates mapped through the centered 532.598130841 / 815 crop.
   Keep these percentages and the frame aspect ratio in sync. */
.vip { left: 28.01182%; top: 81.65888%; width: 43.97636%; height: 5.25701%; }
.exclusive { left: 28.01182%; top: 87.85047%; width: 43.97636%; height: 5.25701%; }
.instagram { left: 34.17924%; top: 93.75%; width: 9.9215%; height: 6.25%; }
.throne { left: 44.10074%; top: 93.75%; width: 11.79854%; height: 6.25%; }
.x { left: 55.89928%; top: 93.75%; width: 10.81532%; height: 6.25%; }
@media (prefers-reduced-motion: reduce) { .hotspot { transition: none; } }