/* The painting and its time rail form one page of the field journal. */
.atlas-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 4.5% 14px;
}
.place-open .atlas-scene-art {
  position: relative;
  inset: auto;
  width: 100%;
  height: var(--scene-height, 1px);
  flex: 0 0 auto;
}
.atlas-scene-frame {
  top: 0;
  transform: translateX(-50%);
  box-shadow: 0 0 0 5px #f5f0e5, 0 0 0 6px #b8a98f50, 0 14px 30px #4d3b2510;
}
.place-open .atlas-scene-caption {
  position: relative;
  inset: auto;
  width: min(100%, max(320px, var(--scene-width, 100%)));
  max-width: 100%;
  margin: 16px auto 0;
  padding: 12px 0 0;
  border-top: 0;
  flex: 0 0 auto;
}
.atlas-time-heading {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  min-height: 42px;
}
.atlas-scene-time {
  display: block;
  padding: 3px 0 0;
  color: #8b4f39;
  font-size: 12px;
  letter-spacing: .4px;
  line-height: 1.6;
}
.atlas-scene-story {
  font-family: var(--story);
  color: #625b4b;
  font-size: 16px;
  line-height: 1.7;
  min-height: 0;
}
.atlas-dayline { gap: 12px; }
.atlas-time-end {
  width: 28px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #9c7b4f;
  border-radius: 50%;
}
.atlas-time-end:last-child { color: #66738b; }
.atlas-time-end svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.atlas-time-end:hover { background: #dfd5c244; }
#scene-time-range { height: 32px; }
#scene-time-range::-webkit-slider-runnable-track { height: 2px; }
#scene-time-range::-moz-range-track { height: 2px; }
#scene-time-range::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -6px; box-shadow: 0 0 0 1px #a68a65, 0 0 0 5px #c9ad7d20; }
#scene-time-range::-moz-range-thumb { width: 8px; height: 8px; box-shadow: 0 0 0 1px #a68a65, 0 0 0 5px #c9ad7d20; }
#scene-time-range:focus-visible { outline: 1px dashed #a88362; outline-offset: 2px; border-radius: 3px; }
.atlas-time-presets { display: flex; justify-content: space-between; margin: -1px 37px 0; }
.atlas-time-presets button { min-height: 28px; padding: 3px 2px; font-size: 11px; letter-spacing: 1px; color: #847762; border-bottom: 1px solid transparent; }
.atlas-time-presets button[aria-pressed="true"] { color: #8a4937; border-bottom-color: #ac7861; }
.atlas-time-presets button:hover { color: #8a4937; }
.atlas-time-presets button:focus-visible { outline: 1px solid var(--red); outline-offset: 2px; }

/* One quiet toolbar, with controls named for the current view. */
.map-tools { gap: 0; padding: 3px; background: #f5f0e5ed; border: 1px solid #c9bda8; border-radius: 4px; box-shadow: 0 3px 10px #5b49300a; }
.map-tools .icon-button { width: 35px; height: 35px; background: transparent; border: 0; border-radius: 2px; }
.map-tools .zoom-controls .icon-button { border: 0; }
.map-tools .icon-button:hover, .map-tools .icon-button[aria-expanded="true"] { background: #e3dac7; color: #8b4d37; }
.map-tools .icon-button:active { background: #d9cbb4; }
.place-open .map-tools { gap: 0; }
.viewing-painting #reset-camera { display: none; }
.place-open .zoom-controls { border-right: 1px solid #c9bda880; padding-right: 3px; margin-right: 3px; }
.place-open .zoom-controls .icon-button + .icon-button { border: 0; }
.atlas-back { min-height: 36px; display: inline-flex; align-items: center; border-bottom: 1px solid transparent; }
.atlas-back:hover { border-bottom-color: #b49a78; }
.scene-settings { padding: 18px 20px 10px; border-color: #c5b69b; border-radius: 3px; box-shadow: 0 12px 35px #49331b1c; }
.setting-title { font-family: var(--story); font-size: 18px; margin-bottom: 20px; }
.scene-settings label { font-size: 12px; }
.light-presets { margin: 1px -5px 13px; }
.light-presets button { font-size: 12px; min-height: 36px; }
.setting-toggle { min-height: 46px; font-size: 12px; }
.toggle-track { width: 29px; height: 16px; }
.toggle-track:after { width: 12px; height: 12px; }
.setting-toggle[aria-pressed="true"] .toggle-track:after { transform: translateX(13px); }

/* Reading margins, source disclosure, and restrained interaction feedback. */
.place-heading .place-number { font-style: italic; font-size: 29px; color: #ae765a; }
.place-heading h2 { letter-spacing: .8px; }
.place-observation { border-left-width: 1px; padding-left: 15px; color: #7d694d; }
.place-tags { gap: 7px; }
.place-tags span { border: 0; margin: 0; padding: 4px 8px; background: #e9e1d055; border-radius: 2px; }
.place-sources summary { min-height: 30px; align-items: center; }
.place-sources summary span { font-size: 0; width: 16px; height: 16px; display: grid; place-items: center; }
.place-sources summary span:after { content: '+'; font-size: 18px; font-weight: 300; }
.place-sources[open] summary span:after { content: '−'; }
.place-sources[open] { padding-bottom: 5px; }
.place-sources a:hover { color: var(--red); }
.panel-head .icon-button { border-radius: 50%; }
.save-place { border-radius: 2px; }
.next-place .icon { transition: transform .18s; }
.next-place:hover .icon { transform: translateX(3px); }
.nav-link:hover { color: var(--red); }
.journal-button:hover .icon { stroke: var(--red); }
.story-dismiss { display: none; }

@media (min-width: 761px) {
  .place-panel { top: 65px; bottom: auto; max-height: calc(100% - 110px); }
  .place-panel .panel-scroll { min-height: 0; }
  .place-panel .panel-bottom { margin-top: 0; }
  .place-open .map-topline { top: 13px; }
  .place-open .map-tools { top: 48px; }
  .place-open .scene-settings { top: 96px; }
  .place-intro { margin: 16px 0 20px; }
}
@media (max-width: 760px) {
  .atlas-detail { padding: 46px 18px 6px; }
  .atlas-scene-frame { box-shadow: 0 0 0 4px #f5f0e5, 0 0 0 5px #b8a98f40, 0 9px 18px #4d3b250a; }
  .place-open .atlas-scene-caption { width: 100%; padding-top: 3px; }
  .atlas-time-heading { grid-template-columns: 86px minmax(0, 1fr); gap: 10px; min-height: 36px; }
  .atlas-scene-time { font-size: 11px; padding-top: 2px; letter-spacing: 0; }
  .atlas-scene-story { font-size: 13px; line-height: 1.4; }
  .atlas-dayline { gap: 8px; }
  .atlas-time-end { width: 24px; }
  .atlas-time-end svg { width: 16px; height: 16px; }
  .atlas-time-presets { margin: -3px 29px 0; }
  .atlas-time-presets button { min-height: 25px; font-size: 10px; letter-spacing: .5px; }
  .map-tools .icon-button, .place-open .map-tools .icon-button { width: 32px; height: 32px; }
  .place-open .map-tools, .touring .map-tools { top: 44px; right: 15px; gap: 0; }
  .place-open .scene-settings, .touring .scene-settings { top: 89px; right: 15px; }
  .atlas-back { min-height: 36px; padding: 5px 0; }
  .place-open .panel-head .icon-button { width: 34px; height: 34px; }
  .place-panel .panel-bottom { padding: 8px 13px; }
  .place-sources a { overflow-wrap: anywhere; }
  .reading-story.place-open .village { bottom: 159px; }
  .reading-story.touring.place-open .village { bottom: 272px; }
  .reading-story.place-open .place-panel { height: min(500px, calc(100dvh - 180px)); border-radius: 7px 7px 0 0; box-shadow: 0 -12px 36px #45372020; }
  .reading-story.touring.place-open .place-panel { height: min(445px, calc(100dvh - 290px)); bottom: 150px; }
  .reading-story .panel-head { padding-top: 10px; padding-bottom: 9px; }
  .reading-story .panel-scroll { padding: 20px 22px 24px; }
  .reading-story .story-dismiss { display: block; position: absolute; inset: 0; z-index: 38; background: #51462d28; cursor: default; }
  .reading-story .place-panel { z-index: 40; }
  .reading-story .tour-bar { z-index: 40; }
}
@media (prefers-reduced-motion: reduce) {
  .next-place:hover .icon { transform: none; }
}