:root {
  --paper: #f4f1e9;
  --paper-deep: #e9e5da;
  --ink: #24322e;
  --muted: #7e877f;
  --faint: #b4b9b0;
  --line: rgba(57, 70, 62, .18);
  --accent: #af5c3d;
  --accent-deep: #81432f;
  --sage: #8c9b8e;
  --serif: "Noto Serif SC", "Songti SC", "STSong", Georgia, serif;
  --sans: Inter, "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
.site-shell { max-width: 1440px; margin: 0 auto; padding: 0 48px; overflow: hidden; }
.site-header { height: 94px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--ink); font-family: var(--serif); font-size: 20px; }
.brand strong { display: block; font-family: var(--serif); font-weight: 600; letter-spacing: 2px; }
.brand small { display: block; color: var(--muted); font-size: 9px; letter-spacing: 2px; margin-top: 3px; text-transform: uppercase; }
.main-nav { display: flex; gap: 35px; color: var(--muted); font-size: 13px; }
.main-nav a { position: relative; padding: 39px 0 34px; }
.main-nav a.active, .main-nav a:hover { color: var(--ink); }
.main-nav a.active::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: var(--accent); }
.header-note { color: var(--muted); font-size: 11px; letter-spacing: .5px; }
.status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 7px; background: var(--accent); border-radius: 50%; vertical-align: 1px; }
.header-note b { color: var(--ink); font-weight: 600; }
.intro { min-height: 430px; display: grid; grid-template-columns: 1fr 310px; align-items: end; padding: 84px 0 72px; position: relative; }
.intro::before { content: "365"; position: absolute; right: 8%; top: 25px; color: rgba(175, 92, 61, .07); font-family: var(--serif); font-size: 220px; line-height: 1; pointer-events: none; }
.eyebrow { margin: 0 0 19px; color: var(--accent); font-size: 10px; letter-spacing: 2.8px; }
h1, h2, h3, p { margin-top: 0; }
h1 { position: relative; margin: 0 0 22px; font-family: var(--serif); font-size: clamp(64px, 8vw, 112px); font-weight: 500; letter-spacing: 5px; line-height: .84; }
h1 em { color: var(--accent); font-style: normal; margin-left: 54px; }
.intro-lede { max-width: 395px; margin-bottom: 14px; font-family: var(--serif); font-size: 19px; line-height: 1.65; }
.intro-body { max-width: 420px; margin-bottom: 29px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.intro-meta { color: var(--muted); font-size: 11px; letter-spacing: 1px; }
.intro-meta span { color: var(--accent); font-family: var(--serif); font-size: 17px; }
.intro-aside { align-self: center; justify-self: end; max-width: 230px; padding: 25px 0 0 28px; border-left: 1px solid var(--accent); }
.edition-label { margin-bottom: 53px; color: var(--muted); font-size: 10px; letter-spacing: 2px; }
.intro-aside p { margin: 19px 0 0; color: var(--muted); font-family: var(--serif); font-size: 13px; line-height: 1.9; }
.compass { width: 100px; height: 100px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; place-items: center; border: 1px solid var(--line); border-radius: 50%; position: relative; color: var(--accent); font-size: 9px; }
.compass::before, .compass::after { content: ""; position: absolute; background: var(--line); }
.compass::before { width: 1px; height: 100%; } .compass::after { width: 100%; height: 1px; }
.compass i { display: none; }
.map-section { border-top: 1px solid var(--line); padding: 57px 0 85px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 29px; }
h2 { margin: 0; font-family: var(--serif); font-size: 31px; font-weight: 500; letter-spacing: 1px; }
.map-count { display: flex; align-items: baseline; gap: 8px; color: var(--muted); font-size: 11px; }
.map-count strong { color: var(--accent); font-family: var(--serif); font-size: 31px; font-weight: 500; }
.map-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.region-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.region-tab { padding: 7px 13px; border: 1px solid transparent; color: var(--muted); background: transparent; cursor: pointer; font-size: 11px; }
.region-tab:hover, .region-tab.active { border-color: var(--accent); color: var(--accent-deep); background: rgba(175, 92, 61, .06); }
.search-box { width: 205px; display: flex; align-items: center; gap: 7px; padding: 7px 0 7px 10px; border-bottom: 1px solid var(--line); color: var(--muted); }
.search-box span { font-size: 20px; line-height: 1; transform: rotate(-15deg); }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; }
.search-box input::placeholder { color: var(--faint); }
.search-box button { border: 0; color: var(--muted); background: none; cursor: pointer; font-size: 18px; line-height: 1; }
.map-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, .75fr); gap: 24px; margin-top: 24px; }
.map-panel { min-width: 0; border: 1px solid var(--line); background: rgba(255, 255, 255, .15); }
.map-legend { display: flex; gap: 22px; padding: 15px 20px; color: var(--muted); font-size: 10px; }
.map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend-dot { width: 7px; height: 7px; display: inline-block; border: 1px solid var(--accent); border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 3px rgba(175, 92, 61, .12); }
.legend-line { width: 19px; height: 1px; display: inline-block; background: var(--sage); }
.china-map { aspect-ratio: 1.47; min-height: 370px; position: relative; overflow: hidden; background: #ebe9df; }
.map-stage { position: absolute; inset: 0; transform-origin: 0 0; cursor: grab; touch-action: none; transition: transform .16s ease; will-change: transform; }
.map-stage.dragging { cursor: grabbing; transition: none; }
.map-stage svg { width: 100%; height: 100%; display: block; }
#map-nodes { position: absolute; inset: 0; }
.geo-feature { fill: rgba(203, 209, 195, .58); stroke: #98a494; stroke-width: .8; stroke-linejoin: round; stroke-linecap: round; fill-rule: evenodd; }
.river-line { fill: none; stroke: #9caf9f; stroke-width: 1.3; stroke-dasharray: 4 5; opacity: .8; }
.coast-line { fill: none; stroke: #b77a61; stroke-width: 1; stroke-dasharray: 3 4; opacity: .7; }
.map-label { fill: #939b91; font-family: var(--serif); font-size: 12px; letter-spacing: 2px; opacity: .7; }
.map-node { position: absolute; transform: translate(-50%, -50%); z-index: 2; border: 0; padding: 5px; color: var(--accent-deep); background: transparent; cursor: pointer; font-size: 10px; transition: transform .2s ease, color .2s ease; }
.map-node::before { content: ""; width: 7px; height: 7px; display: block; margin: 0 auto 3px; border: 1px solid var(--accent); border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 3px rgba(175, 92, 61, .13); }
.map-node span { position: absolute; left: 50%; bottom: 100%; width: max-content; max-width: 120px; padding: 4px 6px; transform: translateX(-50%); opacity: 0; pointer-events: none; color: var(--ink); background: rgba(244, 241, 233, .95); box-shadow: 0 2px 8px rgba(36, 50, 46, .12); white-space: nowrap; transition: opacity .15s ease; }
.map-node:hover, .map-node:focus-visible { z-index: 4; color: var(--ink); transform: translate(-50%, -50%) scale(1.13); outline: 0; }
.map-node:hover span, .map-node:focus-visible span, .map-node.selected span { opacity: 1; }
.map-node.selected { z-index: 3; color: var(--ink); font-weight: 600; }
.map-node.selected::before { background: var(--accent); box-shadow: 0 0 0 4px rgba(175, 92, 61, .19); }
.map-node.filtered-out { display: none; }
.map-scale { position: absolute; bottom: 16px; left: 20px; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; }
.map-scale i { width: 42px; height: 5px; display: block; border-top: 1px solid var(--muted); border-left: 1px solid var(--muted); border-right: 1px solid var(--muted); }
.map-controls { position: absolute; top: 14px; right: 14px; z-index: 6; display: flex; flex-direction: column; align-items: center; border: 1px solid rgba(57, 70, 62, .2); background: rgba(244, 241, 233, .9); box-shadow: 0 3px 10px rgba(36, 50, 46, .08); }
.map-control { width: 31px; height: 29px; display: grid; place-items: center; padding: 0; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; cursor: pointer; font-size: 19px; line-height: 1; }
.map-control:hover, .map-control:focus-visible { color: var(--accent); background: rgba(175, 92, 61, .08); }
.map-control.map-reset { border-bottom: 0; border-top: 1px solid var(--line); font-size: 17px; }
.map-zoom-value { width: 31px; padding: 4px 0; color: var(--muted); font-size: 8px; text-align: center; }
.map-caption { padding: 15px 20px 18px; margin: 0; color: var(--muted); font-family: var(--serif); font-size: 12px; line-height: 1.7; }
.landmark-detail { min-width: 0; position: relative; border: 1px solid var(--ink); background: #e8e6dc; }
.detail-kicker { display: flex; justify-content: space-between; padding: 15px 18px 13px; color: var(--accent-deep); font-size: 10px; letter-spacing: .5px; }
.detail-image-wrap { position: relative; height: 214px; overflow: hidden; background: #c7cec2; }
.detail-image { width: 100%; height: 100%; display: block; object-fit: cover; }
.image-credit { position: absolute; right: 13px; bottom: 11px; padding: 4px 6px; color: #fff; background: rgba(36, 50, 46, .55); font-size: 8px; letter-spacing: 1px; text-decoration: none; }
.detail-content { padding: 21px 23px 25px; }
.detail-era { margin-bottom: 10px; color: var(--accent); font-size: 10px; letter-spacing: 1px; }
.detail-content h3 { margin: 0; font-family: var(--serif); font-size: 31px; font-weight: 500; }
.detail-city { margin: 6px 0 18px; color: var(--muted); font-size: 11px; }
.detail-rule { width: 30px; height: 2px; margin-bottom: 19px; background: var(--accent); }
.detail-label { margin-bottom: 8px; color: var(--muted); font-size: 10px; letter-spacing: 1.5px; }
.detail-history, .detail-reading { margin-bottom: 13px; font-family: var(--serif); font-size: 13px; line-height: 1.85; }
.detail-reading { color: #59645d; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.detail-tags span { padding: 5px 8px; border: 1px solid rgba(175, 92, 61, .35); color: var(--accent-deep); font-size: 9px; }
.detail-close { display: none; }
.city-index { border-top: 1px solid var(--line); padding: 56px 0 92px; }
.index-heading { margin-bottom: 24px; }.index-note { margin: 0; color: var(--muted); font-size: 11px; }
.city-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.city-card { min-height: 139px; display: flex; flex-direction: column; justify-content: space-between; padding: 15px 15px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.12); cursor: pointer; transition: background .2s ease, color .2s ease; }
.city-card:hover, .city-card.selected { color: var(--accent-deep); background: rgba(175, 92, 61, .08); }
.city-card-top { display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; }.city-card-number { font-family: var(--serif); }
.city-card h3 { margin: 14px 0 5px; font-family: var(--serif); font-size: 19px; font-weight: 500; }.city-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.city-card.selected p { color: var(--accent-deep); }.city-card-tags { display: flex; gap: 5px; margin-top: 13px; overflow: hidden; white-space: nowrap; }.city-card-tags span { color: var(--muted); font-size: 9px; }
.empty-state { padding: 65px 20px; border: 1px solid var(--line); text-align: center; }.empty-state span { color: var(--accent); font-size: 30px; }.empty-state h3 { margin: 10px 0 7px; font-family: var(--serif); font-size: 20px; font-weight: 500; }.empty-state p { margin: 0; color: var(--muted); font-size: 12px; }
.site-footer { display: flex; justify-content: space-between; padding: 22px 0 26px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; letter-spacing: .5px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 1000px) { .site-shell { padding: 0 28px; }.map-layout { grid-template-columns: 1fr; }.landmark-detail { display: grid; grid-template-columns: 42% 58%; }.detail-kicker { grid-column: 1 / -1; }.detail-image-wrap { height: 100%; min-height: 260px; }.detail-content { padding: 26px 28px; }.city-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 680px) { .site-shell { padding: 0 17px; }.site-header { height: 72px; }.main-nav { display: none; }.header-note { font-size: 10px; }.intro { min-height: 0; display: block; padding: 63px 0 58px; }.intro::before { top: 8px; right: -4%; font-size: 150px; }.intro-aside { display: none; } h1 { font-size: 76px; }.intro-lede { max-width: 330px; font-size: 17px; }.intro-body { max-width: 345px; }.map-section { padding: 42px 0 59px; }.section-heading { align-items: start; gap: 15px; }.section-heading h2 { font-size: 25px; }.map-count { flex-shrink: 0; }.map-count strong { font-size: 25px; }.map-toolbar { display: block; }.region-tabs { margin-bottom: 15px; gap: 2px; }.region-tab { padding: 7px 9px; }.search-box { width: 100%; }.map-layout { margin-top: 17px; gap: 15px; }.china-map { min-height: 260px; }.map-legend { flex-wrap: wrap; gap: 10px 16px; padding: 12px 13px; }.map-caption { padding: 13px; font-size: 11px; }.map-node { font-size: 8px; padding: 3px; }.map-node::before { width: 5px; height: 5px; margin-bottom: 2px; }.landmark-detail { display: block; }.landmark-detail.is-closed { display: none; }.detail-image-wrap { height: 190px; min-height: 0; }.detail-content { padding: 20px; }.detail-content h3 { font-size: 28px; }.detail-close { display: block; position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; padding: 0; border: 1px solid rgba(36, 50, 46, .35); color: var(--ink); background: rgba(232, 230, 220, .82); cursor: pointer; font-size: 18px; line-height: 1; }.city-index { padding: 42px 0 64px; }.index-heading { display: block; }.index-note { margin-top: 11px; }.city-grid { grid-template-columns: repeat(2, 1fr); }.city-card { min-height: 128px; padding: 13px 11px; }.city-card h3 { font-size: 17px; }.site-footer { gap: 10px; flex-wrap: wrap; }.site-footer span:nth-child(2) { order: 3; width: 100%; } }