:root { color-scheme: light; font-family: "Courier New", Courier, monospace; color: #444; background: #f4fff826; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 5vh 5vw; padding: 5dvh 5vw; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, summary:focus-visible { outline: 2px solid #8d2828; outline-offset: 4px; }
[hidden] { display: none !important; }
.experience { width: min(90vw, calc(90vh * 901.5 / 450.8)); width: min(90vw, calc(90dvh * 901.5 / 450.8)); margin: 0; }
.stage { width: 100%; aspect-ratio: 901.5 / 450.8; position: relative; container-type: inline-size; border: 1px solid #eee; }
.panel { position: absolute; inset: 0; width: 100%; height: 100%; background: white; box-shadow: 0 3px 12px rgba(71, 85, 105, .05), 0 1px 3px rgba(71, 85, 105, .03); }
.fullscreen-button { position: absolute; top: 4px; right: 4px; z-index: 2; width: 30px; height: 30px; padding: 7px; border: 0; background: transparent; color: #999; opacity: .6; }
.fullscreen-button:hover, .fullscreen-button:focus-visible { color: #555; opacity: 1; }
.fullscreen-button svg { display: block; width: 100%; height: 100%; }
.fullscreen-button .fullscreen-contract { display: none; }
.fullscreen-button[aria-pressed="true"] .fullscreen-expand { display: none; }
.fullscreen-button[aria-pressed="true"] .fullscreen-contract { display: block; }
.picture-area { position: absolute; left: 2%; top: 4%; width: calc(200% / 3 - 4%); height: 92%; background: #fbf9f9; overflow: hidden; touch-action: pinch-zoom; }
.picture-layer { position: absolute; inset: 0; }
.scene-picture { position: absolute; display: block; inset: 0; width: 100%; height: 100%; padding: 4px; object-fit: contain; }
.scene-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.text-layer { position: relative; min-height: 100%; }
.slide-outgoing { position: absolute; inset: 0; pointer-events: none; }
.placeholder { position: absolute; inset: 0; margin: 0; padding: 16%; display: grid; align-content: center; font-size: 1.1cqw; line-height: 1.65; color: #666; text-align: center; }
.writing { position: absolute; left: calc(200% / 3 - 2% + 30px); top: calc(7.05% + 60px); width: calc(100% / 3 - 2% - 30px); height: max(0px, calc(74.5% - 120px)); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }
.scene-text { margin: 0; color: #666; font-size: 1.2cqw; line-height: 1.55; white-space: pre-wrap; }
.reset-visits { position: absolute; right: max(4px, env(safe-area-inset-right, 0px)); bottom: max(4px, env(safe-area-inset-bottom, 0px)); z-index: 4; display: grid; place-items: center; width: 28px; height: 28px; padding: 6px; border: 0; background: transparent; color: #aaa; }
.reset-visits:hover, .reset-visits:focus-visible { color: #666; }
.reset-visits svg { display: block; width: 16px; height: 16px; }
.direction { position: absolute; width: 2%; aspect-ratio: 1; border: 0; background: transparent; padding: 0; display: grid; place-items: center; }
.direction::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 25px; height: 15px; border-radius: 0 0 50% 50%;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(150, 150, 150, .3); border-top: 0; pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--navigation-rounding, 0deg));
}
.direction.down { --navigation-rounding: 180deg; }
.direction.left { --navigation-rounding: -90deg; }
.direction.right { --navigation-rounding: 90deg; }
.direction span { position: relative; width: 18px; height: 4px; background: #c6c6c6; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.direction:hover span { background: #aaa; }
.direction:disabled { visibility: hidden; }
.scene-navigation { display: contents; }
.up { left: calc(100% / 3 - 1%); top: 0; }
.up span { transform: rotate(180deg); }
.down { left: calc(100% / 3 - 1%); bottom: 0; }
.left { left: 0; top: 48%; }
.left span { transform: rotate(90deg); }
.right { left: calc(200% / 3 - 2%); top: 48%; }
.right span { transform: rotate(-90deg); }
/* The current location stays centred within the fading map window. */
.map-viewport { position: absolute; left: 91.69102961%; top: 78.5%; width: 16.93547863%; aspect-ratio: 1; transform: translate(-50%, -50%); overflow: visible; opacity: .25; z-index: 3; pointer-events: none; --map-paper: #fff; }
.map-window {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  --map-fade: min(40px, 45%);
}
.map-window::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, var(--map-paper), transparent var(--map-fade), transparent calc(100% - var(--map-fade)), var(--map-paper)),
    linear-gradient(to bottom, var(--map-paper), transparent var(--map-fade), transparent calc(100% - var(--map-fade)), var(--map-paper));
}
.map { position: absolute; left: 50%; top: 50%; width: calc(var(--map-columns, 6) * 100% / 11); aspect-ratio: 1; display: grid; grid-template-columns: repeat(var(--map-columns, 6), 1fr); }
.map-connections { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map-connections line { stroke: #888; stroke-width: .65px; vector-effect: non-scaling-stroke; }
.map-connections line.visited { stroke: #444; stroke-width: .8px; }
.map button { position: relative; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; pointer-events: auto; }
.map button::before { content: ""; position: absolute; left: 30.875%; top: 30.875%; width: 38.25%; height: 38.25%; border: .5px solid #fff; background: #ccc; }
.map button:hover::before { background: #aaa; }
.map button.vacant::before { background: white; border-color: #aaa; }
.map button.visited::before { background: #777; }
.map button.vacant.visited::before { background: white; border-color: #555; }
.map button[aria-current="location"]::before { background: #333; border: 1px solid #cc0000; }
.map button.missing::after { content: ""; position: absolute; width: 38.25%; height: 1px; background: #999; top: 50%; left: 30.875%; transform: rotate(-45deg); }
.experience:fullscreen { width: 100vw; height: 100vh; height: 100dvh; margin: 0; padding: 5vh 5vw; padding: 5dvh 5vw; background: #f4f3ef; overflow: auto; display: flex; align-items: center; justify-content: center; }
.experience:fullscreen .stage { width: min(90vw, calc(90vh * 901.5 / 450.8)); width: min(90vw, calc(90dvh * 901.5 / 450.8)); flex-shrink: 0; }
/* Mobile portrait: fixed image, text and map regions, independent of content. */
@media (max-width: 1024px) and (orientation: portrait) {
  body { padding: 10px; overflow: hidden; }
  .experience { width: calc(100vw - 20px); height: calc(100vh - 20px); height: calc(100dvh - 20px); margin: 0; }
  .experience:fullscreen { width: 100vw; height: 100vh; height: 100dvh; padding: 10px; display: block; overflow: hidden; }
  .stage, .experience:fullscreen .stage { width: 100%; height: 100%; aspect-ratio: auto; padding: 0; }
  .panel {
    position: relative; inset: auto; width: 100%; height: 100%; min-height: 0;
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) clamp(100px, 18vh, 160px) 150px;
    grid-template-rows: minmax(0, 1fr) clamp(100px, 18dvh, 160px) 150px;
    gap: 12px; box-shadow: none;
    padding: max(30px, env(safe-area-inset-top, 0px)) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  }
  .picture-area {
    position: relative; inset: auto; grid-column: 1; grid-row: 1;
    width: 100%; height: 100%; min-height: 0; aspect-ratio: auto;
    background: #fbf9f9;
  }
  .scene-picture {
    left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important;
    padding: 3px; object-fit: contain;
  }
  .scene-video { inset: 0; width: 100%; height: 100%; object-fit: contain; }
  .writing {
    position: relative; inset: auto; grid-column: 1; grid-row: 2;
    width: 100%; height: 100%; min-height: 0; max-height: none;
    padding: 0 8px 4px; margin: 0; overflow-x: hidden; overflow-y: auto;
  }
  .text-layer { min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
  .scene-text { font-size: clamp(13px, calc(2.2vw - 2px), 16px); line-height: 1.65; color: #666; overflow-wrap: break-word; flex-shrink: 0; }
  .placeholder { font-size: 13px; padding: 10%; }
  .scene-navigation { display: contents; }
  .directions {
    position: relative; display: block; grid-column: 1; grid-row: 1;
    width: 100%; height: 100%; min-height: 0; z-index: 1; pointer-events: none;
  }
  .direction { position: absolute; width: 40px; height: 40px; pointer-events: auto; opacity: .65; }
  .direction:hover, .direction:focus-visible { opacity: 1; }
  .direction span, .direction:hover span {
    width: 12px; height: 8px; clip-path: none;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M1 1H17L9 11Z' fill='%23aaa' stroke='%23fff' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .up { left: 50%; top: 0; bottom: auto; transform: translateX(-50%); align-items: start; padding-top: 6px; }
  .left { left: 0; top: 50%; transform: translateY(-50%); justify-items: start; padding-left: 6px; }
  .right { left: auto; right: 0; top: 50%; transform: translateY(-50%); justify-items: end; padding-right: 6px; }
  .down { left: 50%; top: auto; bottom: 0; transform: translateX(-50%); align-items: end; padding-bottom: 6px; }
  .up::before { top: 10px; }
  .down::before { top: auto; bottom: 10px; transform: translate(-50%, 50%) rotate(var(--navigation-rounding)); }
  .left::before { left: 10px; }
  .right::before { left: auto; right: 10px; transform: translate(50%, -50%) rotate(var(--navigation-rounding)); }
  .map-viewport {
    position: relative; inset: auto; grid-column: 1; grid-row: 3;
    align-self: end; justify-self: end; width: 150px; height: 150px;
    margin: 0; transform: translateY(6px); opacity: .55;
  }
  .map-window { --map-fade: 28px; }
  .reset-visits { left: 0; right: auto; bottom: 0; }
  .fullscreen-button { top: max(8px, env(safe-area-inset-top, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); width: 28px; height: 28px; }
}
/* Mobile landscape retains the desktop composition, with more readable type. */
@media (orientation: landscape) and (max-width: 1024px), (orientation: landscape) and (pointer: coarse) {
  body { padding: 3px; overflow: hidden; }
  .experience { width: calc(100vw - 6px); height: calc(100vh - 6px); height: calc(100dvh - 6px); margin: 0; }
  .experience:fullscreen { width: 100vw; height: 100vh; height: 100dvh; padding: 3px; display: block; overflow: hidden; }
  .stage, .experience:fullscreen .stage { width: 100%; height: 100%; aspect-ratio: auto; }
  .picture-area { left: 3px; top: 3px; width: calc(55% - 6px); height: calc(100% - 6px); }
  .scene-picture { padding: 3px; }
  .writing { left: calc(55% + 20px); right: 10px; width: auto; bottom: 156px; height: auto; }
  .scene-text { font-size: calc(clamp(12px, 1.4cqw, 20px) + 1px); }
  .directions { position: absolute; left: 3px; top: 3px; width: calc(55% - 6px); height: calc(100% - 6px); pointer-events: none; }
  .direction { width: 30px; height: 30px; pointer-events: auto; }
  .up { left: 50%; top: 0; transform: translateX(-50%); }
  .down { left: 50%; bottom: 0; transform: translateX(-50%); }
  .left { left: 0; top: 50%; transform: translateY(-50%); }
  .right { left: auto; right: 0; top: 50%; transform: translateY(-50%); }
  .map-viewport { left: auto; top: auto; right: 3px; bottom: 3px; width: 150px; height: 150px; transform: none; }
  .fullscreen-button { top: 3px; right: 3px; }
  .reset-visits { left: 55%; right: auto; bottom: 3px; }
}
@media (orientation: landscape) and (min-height: 600px) and (max-width: 1024px), (orientation: landscape) and (min-height: 600px) and (pointer: coarse) {
  .picture-area, .directions { width: calc(70% - 6px); }
  .writing { top: calc(7.05% + 160px); left: calc(70% + 20px); }
  .scene-text { font-size: calc(clamp(12px, 1.4cqw, 20px) - 2px); }
  .reset-visits { left: 70%; }
}
/* Phone-only dark theme; tablets retain the normal colours in both orientations. */
@media (max-width: 599px) and (orientation: portrait), (max-height: 599px) and (orientation: landscape) and (max-width: 1024px), (max-height: 599px) and (orientation: landscape) and (pointer: coarse) {
  :root { color-scheme: dark; color: #fff; background: #000; }
  body, .panel, .experience:fullscreen, .picture-area { background: #000; color: #fff; box-shadow: none; }
  .scene-text { color: #e5e5e5; }
  .placeholder { color: #bbb; }
  .fullscreen-button, .reset-visits { color: #bbb; }
  .fullscreen-button:hover, .fullscreen-button:focus-visible,
  .reset-visits:hover, .reset-visits:focus-visible { color: #fff; }
  .map-viewport { opacity: .8; --map-paper: #000; }
  .map-connections line { stroke: #777; }
  .map-connections line.visited { stroke: #ccc; }
  .map button::before { background: #888; border-color: #000; }
  .map button:hover::before { background: #ddd; }
  .map button.vacant::before { background: #000; border-color: #777; }
  .map button.visited::before { background: #ddd; }
  .map button.vacant.visited::before { background: #000; border-color: #ddd; }
  .map button[aria-current="location"]::before,
  .map button.vacant[aria-current="location"]::before { background: #fff; border: 1px solid #cc0000; }
  .map button.missing::after { background: #bbb; }
  button:focus-visible { outline-color: #ddd; }
}