:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; }
body { background: #e8e8e5; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.navigator { position: relative; width: 100vw; height: 100dvh; min-height: 460px; isolation: isolate; background: #e8e8e5; }
.stage { position: absolute; inset: 0; overflow: hidden; background: #e9e9e6; }
.stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 47%, rgba(52, 57, 53, .08) 130%); pointer-events: none; z-index: 3; }
.portrait, .gesture, .scene { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; pointer-events: none; }
.portrait { z-index: 0; }
.scene { z-index: 1; opacity: 0; transition: opacity 1100ms cubic-bezier(.22,1,.36,1); }
.gesture { z-index: 1; width: 108%; height: 108%; object-fit: contain; opacity: 0; will-change: opacity, transform; transition: opacity 260ms cubic-bezier(.22,.61,.36,1), transform 260ms cubic-bezier(.22,.61,.36,1); }
/* Each canvas is anchored at the shoulder-side end of the forearm. */
.gesture--top-left { left: -16%; top: -13%; }
.gesture--top-right { left: 9%; top: -14%; }
.gesture--bottom-left { left: -10%; top: auto; bottom: 0; }
.gesture--bottom-right { left: 20%; top: 12%; }
.gesture--top-left { transform: translate(3%, 3%); }
.gesture--top-right { transform: translate(-3%, 3%); }
.gesture--bottom-left { transform: translate(3%, -3%); }
.gesture--bottom-right { transform: translate(-3%, -3%); }
.navigator[data-active="top-left"] .scene--top-left,
.navigator[data-active="top-right"] .scene--top-right,
.navigator[data-active="bottom-left"] .scene--bottom-left,
.navigator[data-active="bottom-right"] .scene--bottom-right { opacity: 1; }
.hotspots { position: absolute; inset: 0; z-index: 4; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.hotspot { position: relative; display: flex; align-items: flex-start; padding: clamp(1.15rem, 3vw, 3.25rem); color: #173e3a; text-decoration: none; outline: none; -webkit-tap-highlight-color: transparent; }
.hotspot:nth-child(even) { justify-content: flex-end; text-align: right; }
.hotspot:nth-child(n+3) { align-items: flex-end; }
.hotspot span { opacity: .82; font-size: clamp(1.25rem, 2.25vw, 2.15rem); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; transform: translateY(5px); transition: opacity 180ms ease, transform 180ms ease; text-shadow: 0 1px 10px rgba(255,255,255,.7); }
.hotspot span b { font-weight: 800; letter-spacing: .02em; }.hotspot span em { display:block; margin-top:.4rem; font-size:.42em; font-style:normal; font-weight:600; letter-spacing:.14em; opacity:.64; }
.hotspot span i { display:inline-grid; place-items:center; width:1.35em; height:1.35em; margin-right:.42em; border:2px solid currentColor; border-radius:50%; font-family:Georgia,serif; font-size:.76em; font-style:normal; font-weight:700; vertical-align:.12em; }
.hotspot:hover span, .hotspot:focus-visible span, .hotspot.is-selected span { opacity: .88; transform: translateY(0); }
.hotspot:focus-visible::after { content: ""; position: absolute; inset: .75rem; border: 1px solid rgba(23,62,58,.48); border-radius: .4rem; }
.hint { position: absolute; z-index: 5; left: 50%; bottom: 1.25rem; margin: 0; transform: translateX(-50%); color: rgba(23,62,58,.4); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }
@media (max-aspect-ratio: 4/3) { .portrait, .gesture { object-position: 50% 42%; } }
@media (max-width: 700px) { .navigator { min-height: 0; } .portrait, .gesture { object-position: 50% 45%; } .gesture { width: 112%; height: 112%; } .gesture--top-left { left:-20%; top:-11%; } .gesture--top-right { left:2%; top:-12%; } .gesture--bottom-left { left:-14%; top:auto; bottom:0; } .gesture--bottom-right { left:14%; top:10%; } .hotspot { padding: 1.1rem; } .hotspot span { font-size: .66rem; letter-spacing: .12em; } .hint { bottom: .7rem; font-size: .58rem; } }
@media (prefers-reduced-motion: reduce) { .gesture, .hotspot span { transition-duration: 1ms; } }