/* Chinese characters. The site's Sabon and Shipley have no CJK glyphs; add a
   Song (Ming) serif under the same family names, for CJK code points only,
   so Chinese text matches the serif type instead of falling back to sans. */
@font-face { font-family: "Sabon LT Std"; font-weight: 400; src: local("Songti SC"), local("STSongti-SC-Regular"), local("Noto Serif CJK SC"), local("Source Han Serif SC"), local("SimSun"); unicode-range: U+2E80-2FDF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; }
@font-face { font-family: "Sabon LT Std"; font-weight: 700; src: local("Songti SC Bold"), local("STSongti-SC-Bold"), local("Noto Serif CJK SC Bold"), local("Source Han Serif SC Bold"), local("SimSun"); unicode-range: U+2E80-2FDF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; }
@font-face { font-family: "SabonNext LT"; font-weight: 900; font-style: italic; src: local("Songti SC Black"), local("STSongti-SC-Black"), local("Songti SC Bold"), local("SimSun"); unicode-range: U+2E80-2FDF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; }
@font-face { font-family: ShipleyRegular; src: local("Songti SC"), local("STSongti-SC-Regular"), local("Noto Serif CJK SC"), local("SimSun"); unicode-range: U+2E80-2FDF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; }
@font-face { font-family: ShipleyItalic; font-style: italic; src: local("Kaiti SC"), local("STKaiti"), local("KaiTi"), local("Songti SC"); unicode-range: U+2E80-2FDF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; }

/* Caption for the dot scene in a field close-up (tools/runtime/dl-scenes.js). */
.dl-scene-caption {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 6px);
  max-width: min(520px, calc(100vw - 32px));
  font-family: ShipleyItalic, "Sabon LT Std", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-align: center;
  color: rgba(44, 34, 24, 0.78);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease, transform 1.2s ease;
  z-index: 40;
}
.dl-scene-caption.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* The crossing between the two maps, in 3D (tools/runtime/dl-voyage.js). */
.dl-voyage {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
}
.dl-voyage.is-playing { visibility: visible; pointer-events: auto; }
.dl-voyage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
}
.dl-voyage__text {
  position: absolute;
  left: 50%;
  bottom: max(48px, 9vh);
  width: min(560px, calc(100vw - 32px));
  transform: translate(-50%, 6px);
  text-align: center;
  color: #585858;
  opacity: 0;
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.dl-voyage.has-text .dl-voyage__text { opacity: 1; transform: translate(-50%, 0); }
/* Set like the map's own labels: spaced capitals in pencil grey, then the
   italic caption line the close-ups use. */
.dl-voyage__kicker {
  margin: 0 0 14px;
  font-family: "Sabon LT Std", Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #8c887d;
}
.dl-voyage__title {
  margin: 0 0 14px;
  font-family: "Sabon LT Std", Georgia, serif;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  line-height: 1.35;
  color: #585858;
}
.dl-voyage__note {
  margin: 0 auto;
  max-width: 460px;
  font-family: ShipleyItalic, "Sabon LT Std", Georgia, serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: #585858;
}
.dl-voyage__skip {
  position: absolute;
  right: max(32px, 4vw);
  top: 34px;
  padding: 6px 0 8px;
  border: 0;
  background: none;
  color: #363832;
  font-family: "Sabon LT Std", Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.dl-voyage__skip::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 8px;
  background: currentColor;
  opacity: 0.6;
}
.dl-voyage.has-text .dl-voyage__skip { opacity: 0.85; }
.dl-voyage__skip:hover, .dl-voyage__skip:focus-visible { opacity: 1; }
@media (max-width: 640px) {
  .dl-voyage__text { bottom: 56px; }
  .dl-voyage__title { letter-spacing: 0.22em; }
  .dl-voyage__skip { right: 16px; top: 24px; }
}

/* 1900 / Today switch on the New York map (tools/runtime/dl-era.js). */
.dl-era {
  position: fixed;
  top: 34px;
  left: 50%;
  transform: translate(-50%, 0);
  margin-top: 54px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
.dl-era.is-visible { opacity: 1; pointer-events: auto; }
/* Out of the way while a chapter's close-up is open. */
.dl-in-field .dl-era.is-visible { opacity: 0; pointer-events: none; }
.dl-era button {
  appearance: none;
  border: 0;
  background: none;
  padding: 4px 2px;
  font-family: "Sabon LT Std", Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(36, 28, 22, 0.55);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.dl-era button:hover { color: rgba(36, 28, 22, 0.9); }
.dl-era button.is-active { color: #a8322d; border-bottom-color: #a8322d; }
.dl-era button:focus-visible { outline: 1px solid #a8322d; outline-offset: 4px; }
.dl-era__rule { width: 28px; height: 1px; background: rgba(36, 28, 22, 0.35); }
.dl-era__note {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 300px;
  margin: 10px 0 0 -150px;
  font-family: ShipleyItalic, "Sabon LT Std", Georgia, serif;
  font-style: italic;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  color: rgba(36, 28, 22, 0.7);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.dl-era:hover .dl-era__note { opacity: 1; transform: none; }
@media (max-width: 600px) {
  .dl-era {
    top: auto;
    bottom: 86px;
    margin-top: 0;
    padding: 6px 14px;
    background: rgba(246, 239, 222, 0.88);
    box-shadow: 0 2px 14px rgba(36, 28, 22, 0.12);
  }
  .dl-era__note { display: none; }
}

/* Chapter narration control (tools/runtime/dl-narration.js). */
.dl-narration {
  position: fixed;
  top: 104px;
  left: 40px;
  z-index: 45;
  display: grid;
  grid-template-columns: 28px auto auto;
  grid-template-rows: auto 1px;
  column-gap: 10px;
  row-gap: 6px;
  align-items: center;
  color: #241c16;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.dl-narration.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.dl-narration__button {
  appearance: none;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(36, 28, 22, 0.45);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
  grid-row: 1 / span 2;
}
.dl-narration__button::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 8px;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #241c16;
}
.dl-narration.is-playing .dl-narration__button::before {
  left: 9px;
  top: 8px;
  width: 3px;
  height: 11px;
  border: 0;
  border-left: 3px solid #241c16;
  border-right: 3px solid #241c16;
  box-sizing: content-box;
}
.dl-narration__button:hover { border-color: #a8322d; }
.dl-narration__button:focus-visible { outline: 1px solid #a8322d; outline-offset: 3px; }
.dl-narration__label {
  font-family: "Sabon LT Std", Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.dl-narration__time {
  font-family: ShipleyItalic, "Sabon LT Std", Georgia, serif;
  font-style: italic;
  font-size: 12px;
  opacity: 0.7;
}
.dl-narration__bar {
  grid-column: 2 / span 2;
  height: 1px;
  background: rgba(36, 28, 22, 0.2);
  overflow: hidden;
}
.dl-narration__fill {
  display: block;
  height: 100%;
  background: #a8322d;
  transform-origin: 0 50%;
  transform: scaleX(0);
}
@media (max-width: 600px) {
  /* Under the menu: the bottom of a phone screen belongs to the photo caption. */
  .dl-narration { top: 76px; left: 16px; }
}

/* Picture viewer (tools/runtime/dl-zoom.js). */
.dl-zoom {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
  touch-action: none;
}
.dl-zoom.is-open, .dl-zoom.is-closing { visibility: visible; }
.dl-zoom.is-open { pointer-events: auto; }
.dl-zoom__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(255, 245, 221, 0.58);
  -webkit-backdrop-filter: blur(18px) saturate(0.85);
  backdrop-filter: blur(18px) saturate(0.85);
  opacity: 0;
  transition: opacity 0.55s ease;
}
.dl-zoom.is-open .dl-zoom__backdrop { opacity: 1; }
.dl-zoom__img {
  position: absolute;
  transform-origin: 0 0;
  will-change: transform;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
  box-shadow: 0 28px 70px rgba(54, 56, 50, 0.16), 0 2px 8px rgba(54, 56, 50, 0.08);
  cursor: zoom-in;
  transition: opacity 0.4s ease;
}
.dl-zoom.is-zoomed .dl-zoom__img { cursor: grab; }
.dl-zoom.is-dragging .dl-zoom__img { cursor: grabbing; }
.dl-zoom__hint, .dl-zoom__caption {
  position: absolute;
  left: 50%;
  width: min(640px, calc(100vw - 32px));
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s ease 0.15s;
  pointer-events: none;
}
.dl-zoom.is-open .dl-zoom__hint, .dl-zoom.is-open .dl-zoom__caption { opacity: 1; }
.dl-zoom.is-zoomed .dl-zoom__caption, .dl-zoom.is-zoomed .dl-zoom__hint { opacity: 0; }
.dl-zoom__hint {
  top: 30px;
  font-family: "Sabon LT Std", Georgia, serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #8c887d;
}
.dl-zoom__caption {
  bottom: 34px;
  font-family: ShipleyItalic, "Sabon LT Std", Georgia, serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: #585858;
}
.dl-zoom__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.dl-zoom.is-open .dl-zoom__close { opacity: 0.8; }
.dl-zoom__close:hover, .dl-zoom__close:focus-visible { opacity: 1; outline: none; }
.dl-zoom__close::before, .dl-zoom__close::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 19px;
  width: 22px;
  height: 1px;
  background: #363832;
  transform: rotate(45deg);
}
.dl-zoom__close::after { transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .dl-zoom__backdrop, .dl-zoom__hint, .dl-zoom__caption { transition: none; }
}