:root {
  color-scheme: light;
  --shell-bg: #223034; --shell-bg-deep: #1b272b; --shell-text: #eeeae1; --shell-muted: #b6c1c2; --shell-line: #465357;
  --paper: #f3f0e8; --paper-soft: #eae6dc; --surface: var(--paper); --ink: #202322; --muted: #606563;
  --line: #d7d5cc; --accent: #8b3f35; --accent-dark: #70332b; --accent-soft: #eee0d9;
  --stone-blue: #526a6e; --slate: var(--stone-blue); --slate-soft: #e3e9e6; --review: #775b37; --review-bg: #f1ece2;
  --published: #3e645b; --published-bg: #e8efeb; --map-bg: #e7ebe8;
  --font-body: "Microsoft YaHei", "PingFang SC", sans-serif;
  --font-title: "Noto Serif SC", "Source Han Serif SC", SimSun, serif;
}
* { box-sizing: border-box; }
body { margin: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--shell-bg-deep); color: var(--ink); font: 15px/1.8 var(--font-body); }
.masthead { flex: none; display: flex; align-items: center; gap: 32px; padding: 16px 28px; border-bottom: 1px solid var(--shell-line); background: var(--shell-bg); color: var(--shell-text); }
.identity { display: block; }
h1, h2, h3 { line-height: 1.5; }
h1 { font: 600 25px/1.4 var(--font-title); letter-spacing: .1em; margin: 0; white-space: nowrap; }
.english-title { display: block; margin-top: 3px; font-size: 10px; letter-spacing: .18em; color: var(--shell-muted); }
.tagline { margin: 0; padding-left: 28px; border-left: 1px solid var(--shell-line); color: var(--shell-muted); font-size: 13px; }
.edition { margin-left: auto; color: var(--shell-muted); font-size: 10px; letter-spacing: .06em; }
main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(390px, 33vw, 550px); gap: 14px; padding: 12px 16px 10px; }
.map-section { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--shell-bg); }
.map-heading { position: absolute; z-index: 1; top: 16px; left: 16px; max-width: min(340px, calc(100% - 156px)); padding: 13px 17px; background: var(--paper); border: 1px solid var(--line); border-top: 2px solid var(--accent); box-shadow: 0 2px 5px #18242812; }
.map-heading h2 { font: 600 17px/1.6 var(--font-title); margin: 0 0 5px; }
#load-status { margin: 0; color: var(--muted); font-size: 12px; }
.map-frame { flex: 1; min-height: 240px; position: relative; isolation: isolate; border: 1px solid var(--shell-line); }
#map { height: 100%; width: 100%; background: var(--map-bg); z-index: 0; }
/* Keep native OSM tile colors and resolution. No filters or custom scaling. */
button { font: inherit; cursor: pointer; color: var(--ink); }
#reset-view { position: absolute; top: 14px; right: 14px; z-index: 1; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 7px 12px; font-size: 12px; box-shadow: 0 1px 3px #26302c10; }
#reset-view span { font-size: 20px; line-height: 1; color: var(--accent); }
#reset-view:hover { border-color: var(--accent); }
button:disabled { opacity: .55; cursor: default; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.map-footer { flex: none; min-height: 0; padding: 8px 0 0; color: var(--shell-text); }
.index-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 42%); align-items: center; gap: 12px; margin-bottom: 6px; }
.index-controls { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(120px, .7fr); gap: 6px; }
.index-controls input, .index-controls select { width: 100%; min-width: 0; height: 30px; padding: 4px 9px; border: 1px solid var(--shell-line); border-radius: 2px; background: var(--shell-bg-deep); color: var(--shell-text); font: 12px/1.4 var(--font-body); }
.index-controls input::placeholder { color: var(--shell-muted); }
.index-controls select { color-scheme: dark; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.index-scroll { height: 154px; max-height: 154px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--shell-muted) var(--shell-bg); border-top: 1px solid var(--shell-line); border-bottom: 1px solid var(--shell-line); }
#place-list { display: block; }
.index-card { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(90px, auto); align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 36px; padding: 5px 9px; border: 0; border-bottom: 1px solid var(--shell-line); border-left: 2px solid transparent; background: var(--shell-bg-deep); text-align: left; color: var(--shell-text); }
.index-card:last-child { border-bottom: 0; }
.index-card:hover { border-color: var(--shell-muted); }
.index-card[aria-pressed="true"] { color: var(--ink); background: var(--paper); border-left-color: var(--accent); }
.index-empty { margin: 0; padding: 11px 10px; color: var(--shell-muted); font-size: 12px; }
.unmapped-section { margin-bottom: 6px; }
.unmapped-disclosure > summary { cursor: pointer; color: var(--shell-muted); font-size: 12px; padding: 4px 9px; }
.unmapped-disclosure > summary:focus-visible { outline: 2px solid var(--shell-text); outline-offset: -2px; }
.unmapped-count { margin-left: 10px; font-size: 11px; }
#unmapped-list { display: block; border: 1px solid var(--shell-line); }

.index-meta { display: flex; justify-content: space-between; gap: 12px; min-height: 19px; padding-top: 3px; }
.map-note { font-size: 11px; color: var(--muted); margin: 3px 0; }
#details { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #aeb8b3 var(--paper); padding: 28px 34px 36px; border: 1px solid var(--line); background: var(--paper); overflow-wrap: anywhere; }
#details::-webkit-scrollbar { width: 6px; }
#details::-webkit-scrollbar-thumb { background: #c4ccca; border-radius: 6px; }
.eyebrow { font-size: 11px; letter-spacing: .13em; color: var(--slate); margin: 0 0 22px; }
.eyebrow span { font-size: 9px; margin-left: 10px; }
#details h2 { font: 600 27px/1.55 var(--font-title); margin: 0 0 16px; }
#details > p:not(.eyebrow) { margin: 18px 0; }
.metadata { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.theme, .badge { display: inline-block; padding: 2px 7px; border-radius: 2px; font-size: 11px; line-height: 1.8; }
.theme { color: var(--slate); background: var(--slate-soft); }
.badge { color: var(--review); background: var(--review-bg); }
.badge.published { color: var(--published); background: var(--published-bg); }
.addresses { border-left: 2px solid var(--line); padding-left: 12px; margin: 20px 0; color: var(--muted); font-size: 13px; }
.addresses p { margin: 5px 0; }
.introduction { font-size: 15px; line-height: 2; }
.archive-section { margin-top: 24px; }
#details .archive-section > h2 { font: 600 15px/1.7 var(--font-body); margin: 0 0 12px; }
.archive-section > p { margin: 0; }
.introduction p { color: var(--ink); font-size: 14px; line-height: 1.9; }
.history { border-top: 1px solid var(--line); padding-top: 20px; }
.history-description, .person-description { white-space: pre-line; font-size: 15px; line-height: 2; }
.history-preview { font-size: 14px; line-height: 2; }
.history-expansion > summary { min-height: 44px; width: fit-content; max-width: 100%; margin-top: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 3px; font-size: 13px; }
.history-expansion[open] > summary { margin-bottom: 12px; }
.history-expansion > .history-description { margin: 0; }
.persons { border-top: 1px solid var(--line); padding-top: 20px; }
.person + .person { margin-top: 20px; }
.person h3 { margin: 0 0 8px; font: 600 18px/1.6 var(--font-title); }
.person p { margin: 6px 0 0; }
.site-info, .photos, .events, .sources { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 20px; }
.site-info h3, .photos > h3, .basis h3, .sources h3, #details .events > h2 { font: 600 13px/1.7 var(--font-body); margin: 0 0 12px; }
.photo-empty { margin: 0; }
.photo-primary, .photo-thumbnail { margin: 0; background: var(--paper-soft); }
.photo-primary img, .photo-thumbnail img { display: block; width: 100%; height: auto; object-fit: cover; background: var(--slate-soft); }
.photo-primary img { max-height: 320px; }
.photo-primary figcaption { padding: 12px 14px 14px; }
.photo-thumbnails { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.photo-thumbnail img { aspect-ratio: 4 / 3; }
.photo-thumbnail figcaption { padding: 9px 10px 11px; }
.photo-caption, .photo-description, .photo-credit { margin: 0; }
.photo-caption { font: 600 14px/1.7 var(--font-title); }
.photo-description { margin-top: 5px; font-size: 12px; line-height: 1.8; }
.photo-credit { clear: both; padding-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.photo-type { float: right; margin: 2px 0 3px 8px; padding: 1px 6px; border-radius: 2px; color: var(--slate); background: var(--slate-soft); font-size: 10px; line-height: 1.8; }
.photo-type.historical_photo { color: var(--accent-dark); background: var(--accent-soft); }
dl { display: grid; grid-template-columns: 84px 1fr; gap: 8px 14px; font-size: 12px; margin: 0; }
dt { color: var(--muted); } dd { margin: 0; }
.basis { margin-top: 20px; background: var(--slate-soft); padding: 14px 16px; color: var(--slate); font-size: 12px; }
.basis h3 { margin-bottom: 6px; }
.basis p { margin: 0; line-height: 1.9; }
.event { padding: 16px 18px; background: var(--paper-soft); border-left: 2px solid var(--accent); margin-top: 12px; }
.event h3 { font: 600 18px/1.6 var(--font-title); margin: 2px 0 9px; }
.event p { font-size: 13px; line-height: 1.9; }
.event-date { color: var(--accent-dark); }
.event .event-date { margin: 0 0 10px; }
.event .event-description { font-size: 14px; }
.event .event-role { margin-bottom: 0; }
.detail-disclosure { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 16px; }
.detail-disclosure > summary { font: 600 13px/1.8 var(--font-body); }
#details summary { cursor: pointer; color: var(--slate); }
#details summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.detail-disclosure[open] > summary { margin-bottom: 16px; }
.event-notes, .source-assessment { margin-top: 10px; font-size: 12px; }
.source-details .sources:first-of-type { margin-top: 16px; padding-top: 0; border-top: 0; }
.site-info .addresses { margin-top: 0; }

.muted { color: var(--muted); font-size: 12px; }
.source-list { padding-left: 18px; font-size: 12px; }
.source-list li + li { margin-top: 15px; }
.source-list p { margin: 6px 0; }
a { color: var(--accent-dark); text-underline-offset: 3px; }
#map-error { position: absolute; bottom: 32px; left: 12px; right: 12px; z-index: 1; margin: 0; padding: 8px 12px; background: var(--review-bg); color: var(--review); font-size: 12px; }
.place-marker { background: transparent; border: 0; border-radius: 50%; }
.place-marker span { position: absolute; inset: 5px; border: 1px solid var(--accent); background: var(--surface); border-radius: 50%; box-shadow: 0 0 0 2px #fdfdfba6; }
.place-marker span::after { content: ""; position: absolute; inset: 5px; background: var(--accent); border-radius: 50%; }
.place-marker:hover span, .place-marker:focus-visible span { border-width: 2px; background: var(--accent-soft); }
.place-marker.is-selected span { inset: 3px; border: 2px solid var(--accent-dark); background: var(--paper); box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--accent); }
.place-marker.is-selected span::after { inset: 5px; background: var(--accent-dark); }
#map .leaflet-bar { border: 1px solid var(--line); box-shadow: 0 1px 3px #26302c10; }
#map .leaflet-bar a { color: var(--ink); background: var(--surface); border-bottom-color: var(--line); }
#map .leaflet-tooltip { font: 12px/1.6 var(--font-body); color: var(--ink); border: 1px solid var(--line); background: var(--surface); box-shadow: none; }

.index-heading { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.index-heading h2 { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .08em; }
.index-heading h2 span { margin-left: 8px; font-size: 10px; letter-spacing: .12em; color: var(--shell-muted); }
.index-heading > span { font-size: 11px; color: var(--shell-muted); white-space: nowrap; }
.index-number { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--shell-muted); }
.index-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.5; }
.index-themes { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-size: 10px; line-height: 1.5; color: var(--shell-muted); }
.index-card[aria-pressed="true"] .index-number { color: var(--accent-dark); }
.index-card[aria-pressed="true"] .index-themes { color: var(--muted); }
.index-card:focus-visible { outline: 2px solid var(--shell-text); outline-offset: -4px; }
.index-card[aria-pressed="true"]:focus-visible { outline-color: var(--accent-dark); }
.map-footer .map-note { color: var(--shell-muted); }
#unmapped { font-size: 11px; margin: 3px 0 0; }
#details.is-empty { border-top: 3px solid var(--accent); }
#details.is-empty h2 { max-width: 12em; margin-top: 58px; }
#details.is-empty > p:not(.eyebrow) { max-width: 28em; }
#details.is-empty::after { content: ""; display: block; width: 72px; border-top: 1px solid var(--accent); margin-top: 36px; }
.eyebrow { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
#details .introduction { font-size: 15px; line-height: 2; }
.basis { border-left: 2px solid var(--stone-blue); }
#map .leaflet-control-attribution { background: var(--paper); color: var(--ink); }
@media (min-width: 801px) {
  .map-heading { top: 14px; left: 14px; padding: 8px 14px; max-width: min(300px, calc(100% - 148px)); }
  .map-heading h2 { font-size: 15px; margin-bottom: 3px; }
}
@media (max-width: 1100px) and (min-width: 801px) {
  main { grid-template-columns: minmax(0, 1fr) 370px; padding: 12px; gap: 12px; }
  #details { padding: 24px; }
  .index-toolbar { grid-template-columns: minmax(0, 1fr) minmax(280px, 48%); }
}
@media (max-width: 800px) {
  body { height: auto; min-height: 100vh; }
  .masthead { padding: 14px 18px; flex-wrap: wrap; gap: 6px 16px; }
  h1 { font-size: 22px; }
  .tagline { border: 0; padding: 0; order: 3; width: 100%; font-size: 12px; }
  main { display: block; padding: 12px; }
  .map-frame { flex: none; height: 58vh; min-height: 400px; }
  .map-heading { top: 10px; left: 10px; max-width: calc(100% - 20px); padding: 10px 12px; }
  .map-heading h2 { font-size: 15px; }
  #reset-view { top: auto; bottom: 34px; right: 10px; }
  .map-footer { padding: 12px 0; }
  .index-toolbar { grid-template-columns: 1fr; gap: 8px; }
  .index-heading { justify-content: space-between; }
  .index-scroll { height: auto; max-height: 240px; }
  .index-meta { flex-wrap: wrap; gap: 0 12px; }
  #details { overflow: visible; padding: 24px 22px; }
  #details h2 { font-size: 25px; }
  #details.is-empty h2 { margin-top: 28px; }
}
@media (max-width: 420px) {
  .index-controls { grid-template-columns: 1fr; }
  .index-scroll { height: auto; max-height: 240px; }
  .index-card { grid-template-columns: 28px minmax(0, 1fr); }
  .index-themes { grid-column: 2; text-align: left; }
  .english-title { font-size: 9px; letter-spacing: .1em; }
  .photo-thumbnails { grid-template-columns: 1fr; }
}
@media (min-width: 801px) and (max-height: 620px) { body { min-height: 620px; } }