/* A painted village, with independent full scenes and transparent foregrounds. */
html, body { overflow: clip; }
.atlas-container { isolation: isolate; overflow: visible; }
.atlas-viewport { position: absolute; inset: 0; overflow: hidden; outline: none; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.atlas-viewport:focus-visible { outline: 1px dashed var(--red); outline-offset: -6px; }
.atlas-viewport.is-dragging { cursor: grabbing; }
.atlas-world { position: absolute; inset: 0; will-change: opacity; }
.atlas-overview { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.atlas-overview [data-place] { cursor: pointer; }
#light-range { appearance: none; -webkit-appearance: none; background: transparent; height: 22px; margin: 0; }
#light-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #dace9e, #d5a85e 35%, #bd7756 68%, #5c6d89); }
#light-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border: 3px solid var(--paper-light); border-radius: 50%; background: var(--red); box-shadow: 0 0 0 1px #9b7d61; }
#light-range::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #dace9e, #d5a85e 35%, #bd7756 68%, #5c6d89); }
#light-range::-moz-range-thumb { width: 10px; height: 10px; border: 3px solid var(--paper-light); border-radius: 50%; background: var(--red); box-shadow: 0 0 0 1px #9b7d61; }
.light-presets { display: flex; justify-content: space-between; margin: 0 -5px 12px; }
.light-presets button { font-size: 10px; color: #81735e; min-height: 32px; padding: 0 5px; border-bottom: 1px solid transparent; }
.light-presets button[aria-pressed="true"] { color: var(--red); border-bottom-color: var(--red); }
.light-presets button:hover { color: var(--red); }
.light-presets button:focus-visible, #light-range:focus-visible { outline: 1px solid var(--red); outline-offset: 3px; }
.atlas-route { opacity: 0; pointer-events: none; transition: opacity .4s; }
.atlas-route.is-visible { opacity: .8; }
.atlas-route path { fill: none; stroke: #9b4934; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3 12; }

/* A place name is legible before the visitor chooses it. */
.atlas-marker,
.atlas-marker:hover:not(.is-active):not(:focus-visible) { border-radius: 3px; padding: 6px 10px; min-height: 33px; height: auto; background: #faf5e9f5; border: 1px solid #bca785; box-shadow: 0 3px 10px #43331e1c; color: #51432f; transition: background .18s, color .18s, opacity .25s; }
.atlas-marker .marker-number { font-size: 15px; min-width: 18px; color: #9d543e; }
.atlas-marker .marker-label,
.atlas-marker:hover:not(.is-active):not(:focus-visible) .marker-label { max-width: 150px; opacity: 1; margin-left: 5px; font-family: var(--story); font-size: 14px; letter-spacing: .6px; }
.atlas-marker:after { height: 14px; border-left: 1px solid #8f573b; }
.atlas-marker:before { top: calc(100% + 12px); background: #9b5039; border: 2px solid #f7f1e3; width: 7px; height: 7px; }
.atlas-marker:hover, .atlas-marker.is-hovered, .atlas-marker.is-active { background: #fffaf0; color: #8c4532; border-color: #9c6e50; box-shadow: 0 4px 12px #43331e26; }
.atlas-marker.is-active .marker-number { color: #9d543e; }
.atlas-marker:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; }

.atlas-detail { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.atlas-scene-art { position: absolute; inset: 45px 5% 58px; }
.atlas-scene-frame { position: absolute; left: 50%; top: 50%; width: var(--scene-width); height: var(--scene-height); transform: translate(-50%, -50%); overflow: hidden; background: #d8d4b9; box-shadow: 0 12px 32px #4d3b2512; }
.atlas-scene-frame:after { content: ''; position: absolute; inset: 0; border: 1px solid #5b51241c; pointer-events: none; }
.atlas-scene-grade, .atlas-foreground-grade { position: absolute; inset: 0; }
.atlas-foreground-grade { z-index: 3; pointer-events: none; }
.atlas-painting, .atlas-foreground, .atlas-life-art, .atlas-life-emission { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: center; will-change: transform; pointer-events: none; }
.atlas-life-art { z-index: 1; }
.atlas-life-emission { z-index: 2; }
.atlas-foreground { z-index: 1; }
.atlas-scene-frame.is-outgoing { pointer-events: none; z-index: 2; }
.atlas-scene-caption { position: absolute; bottom: 9px; left: 5%; right: 5%; border-top: 1px solid #b9ac9270; padding-top: 10px; color: #7d725e; pointer-events: auto; cursor: auto; touch-action: pan-y; }
.atlas-scene-number { font-family: Cormorant, Georgia, serif; font-size: 22px; color: var(--red); }
.atlas-scene-name { font-family: var(--story); font-size: 13px; letter-spacing: 1px; }
.atlas-scene-note { margin-left: auto; font-size: 10px; color: #8c806c; letter-spacing: .4px; }
.atlas-back { position: absolute; top: 13px; left: 5%; z-index: 31; font-size: 12px; letter-spacing: .4px; padding: 8px 0; color: #77634b; }
.atlas-back:hover { color: var(--red); }
.atlas-container.has-paper-grain .atlas-viewport:after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .012; background-image: radial-gradient(#555e40 .45px, transparent .6px); background-size: 4px 4px; }
.atlas-status { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 33; background: var(--paper-light); padding: 10px 16px; max-width: 90%; width: max-content; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.atlas-error { position: absolute; inset: 20%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 15px; text-align: center; z-index: 30; }
.atlas-error p { font-family: var(--story); font-size: 24px; margin: 0; }
.atlas-error span, .atlas-error button { font-size: 12px; line-height: 1.8; }
.atlas-error button { color: var(--red); border-bottom: 1px solid var(--red); padding: 8px; }
.atlas-container.motion-off * { animation: none !important; transition: none !important; }
.place-open .map-instruction, .place-open .map-coordinate { display: none; }
#place-title:focus, #archive-title:focus { outline: none; }
@media (max-width: 760px) {
  .atlas-marker, .atlas-marker:hover:not(.is-active):not(:focus-visible) { min-height: 30px; padding: 5px 7px; }
  .atlas-marker .marker-number { font-size: 13px; min-width: 14px; }
  .atlas-marker .marker-label, .atlas-marker:hover:not(.is-active):not(:focus-visible) .marker-label { font-size: 12px; letter-spacing: 0; margin-left: 4px; }
  .atlas-scene-art { inset: 43px 12px 36px; }
  .atlas-back { left: 16px; top: 1px; font-size: 11px; padding: 6px 0; }
  .atlas-scene-caption { left: 16px; right: 16px; bottom: 1px; padding-top: 5px; gap: 7px; }
  .atlas-scene-number { font-size: 18px; }
  .atlas-scene-name { font-size: 11px; letter-spacing: .3px; }
  .atlas-scene-note { font-size: 9px; letter-spacing: 0; }
  .atlas-error { inset: 15% 8%; }
  .place-open .map-tools, .touring .map-tools { top: 47px; bottom: auto; right: 15px; flex-direction: row; gap: 6px; }
  .place-open .map-tools .icon-button { width: 32px; height: 32px; }
  .place-open .zoom-controls { display: flex; }
  .place-open .zoom-controls .icon-button + .icon-button { border-top: 1px solid #cfc5b1; border-left: 0; }
  .place-open .scene-settings, .touring .scene-settings { top: 85px; bottom: auto; right: 15px; }
  .place-panel .panel-head .icon-button { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .atlas-container * { animation: none !important; transition: none !important; } }
.archive-drawing img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.chapter-art { overflow: hidden; }
.chapter-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.chapter-card:hover .chapter-art img { transform: scale(1.025); }
@media (min-width: 761px) {
  .place-open .village { bottom: 45px; }
  .place-open .atlas-scene-art { inset: 65px 4.5% 45px; }
  .place-open .atlas-scene-caption { bottom: 0; }
  .touring .village { bottom: 235px; }
  .place-open .map-tools { top: 46px; bottom: auto; flex-direction: row; gap: 6px; }
  .place-open .map-topline { top: 12px; }
  .place-open .zoom-controls { display: flex; }
  .place-open .zoom-controls .icon-button + .icon-button { border-top: 1px solid #cfc5b1; border-left: 0; }
  .place-open .scene-settings { top: 92px; }
}
@media (max-width: 760px) {
  .tour-controls > .icon-button { width: 36px; height: 36px; }
  .tour-controls > .quiet-button { min-height: 36px; font-size: 11px; }
  .tour-next { min-height: 36px; font-size: 11px; }
  .tour-controls { gap: 7px; }
}
@media (max-width: 760px) {
  .archive h1 { font-size: clamp(28px, 8.4vw, 34px); line-height: 1.5; }
}
@media (min-width: 761px) {
  .experience:not(.is-exploring):not(.place-open):not(.directory-open) .village { left: 30%; }
}

/* An illustrated day is scrubbed, never played on an autonomous loop. */
.atlas-time-heading { display: flex; align-items: baseline; gap: 16px; min-height: 23px; }
.atlas-scene-time { color: #9a573d; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.atlas-scene-story { font-family: var(--story); font-size: 14px; line-height: 1.5; color: #75664e; }
.atlas-dayline { display: flex; gap: 13px; align-items: center; }
.atlas-time-end { flex: 0 0 auto; color: #8a795f; font-size: 11px; min-height: 32px; padding: 0 2px; }
.atlas-time-end:hover { color: var(--red); }
.atlas-time-end:focus-visible, #scene-time-range:focus-visible { outline: 1px solid var(--red); outline-offset: 3px; }
#scene-time-range { flex: 1; min-width: 0; appearance: none; -webkit-appearance: none; background: transparent; height: 32px; margin: 0; cursor: ew-resize; touch-action: none; }
#scene-time-range::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg,#d5c98e,#d4aa68 35%,#c27e59 68%,#67758a); }
#scene-time-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6.5px; border: 3px solid var(--paper-light); border-radius: 50%; background: #9a573d; box-shadow: 0 0 0 1px #ad8d68; }
#scene-time-range::-moz-range-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg,#d5c98e,#d4aa68 35%,#c27e59 68%,#67758a); }
#scene-time-range::-moz-range-thumb { width: 10px; height: 10px; border: 3px solid var(--paper-light); border-radius: 50%; background: #9a573d; box-shadow: 0 0 0 1px #ad8d68; }
.atlas-time-hint { display: block; font-size: 9px; color: #94866f; text-align: center; letter-spacing: .8px; }
.place-open .atlas-scene-art { bottom: 100px; }
.story-fold { display: none; }
@media (max-width: 760px) {
  .place-open .village { bottom: 239px; }
  .place-open .place-panel { height: 190px; }
  .place-open .atlas-scene-art { bottom: 86px; }
  .atlas-time-heading { gap: 9px; align-items: flex-start; }
  .atlas-scene-time { padding-top: 2px; font-size: 10px; }
  .atlas-scene-story { font-size: 12px; min-height: 36px; line-height: 1.5; }
  .atlas-dayline { gap: 10px; }
  .atlas-time-hint { display: none; }
  .atlas-scene-caption { padding-top: 7px; }
  .place-open .panel-scroll { padding: 13px 18px; }
  .touring .village { bottom: 307px; }
  .touring .place-panel { height: 145px; bottom: 150px; }
  .story-fold { display: block; margin-left: auto; padding: 10px; color: #946344; font-size: 11px; }
  .place-open .place-panel .panel-head { display: flex; }
  .place-open .place-panel { height: 260px; }
  .place-open .village { bottom: 309px; }
  .story-folded.place-open .place-panel { height: 110px; }
  .story-folded.place-open .panel-scroll { display: none; }
  .story-folded .panel-bottom { margin-top: auto; }
  .story-folded.place-open .village { bottom: 159px; }
  .touring.place-open .place-panel { height: 205px; }
  .touring.place-open .village { bottom: 367px; }
  .touring.story-folded.place-open .place-panel { height: 110px; }
  .touring.story-folded.place-open .village { bottom: 272px; }
}