@import url("/brand-overrides.css");

:root { color-scheme: light; --paper:#f3f0e8; --ink:#272c29; --muted:#82877e; --line:#d3d1c8; --serif:"Songti SC","Noto Serif CJK SC","SimSun",serif; }
.catalogue-main { max-width:1440px; margin:auto; padding:65px 5% 90px; }
.catalogue-intro h1 { font:clamp(36px,5vw,70px)/1.25 var(--serif); font-weight:400; letter-spacing:.07em; margin:18px 0 25px; }
.catalogue-intro > p:last-child { color:#7b8078; line-height:1.9; font-size:15px; }
.catalogue-toolbar { display:flex; gap:20px; align-items:center; margin:55px 0 24px; border-bottom:1px solid var(--line); padding-bottom:22px; font-size:12px; }
.catalogue-toolbar input { background:#fbf9f2; border:1px solid var(--line); border-radius:3px; padding:13px 16px; width:300px; color:var(--ink); font:inherit; }
.catalogue-toolbar #city-count { margin-left:auto; color:var(--muted); }
.city-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:38px 24px; }
.city-card { border-bottom:1px solid var(--line); min-width:0; }
.city-card-art { display:block; position:relative; aspect-ratio:16/10; overflow:hidden; background:#d9d8cd; }
.city-card-art img { width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.city-card-art:hover img { transform:scale(1.035); }
.city-card-art span { position:absolute; top:16px; left:16px; color:white; background:#15232188; padding:7px 10px; font-size:10px; letter-spacing:2px; backdrop-filter:blur(8px); }
.city-card-art i { position:absolute; right:16px; bottom:16px; border:1px solid #fffa; border-radius:50%; width:32px; height:32px; display:grid; place-items:center; color:white; background:#15232166; font-style:normal; }
.city-card-copy { padding:24px 0; }
.city-card-copy h2 { font:30px/1.2 var(--serif); letter-spacing:.15em; margin:6px 0 13px; }
.city-card-copy > p { color:#808478; font-size:12px; line-height:1.8; margin-bottom:18px; }
.city-card-copy .eyebrow { margin:0; }
.city-light-link { font-size:11px; color:var(--accent); letter-spacing:1px; }
#city-empty { padding:50px; text-align:center; color:var(--muted); }
@media(max-width:900px) { .city-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) { .catalogue-main { padding-top:40px; } .city-grid { grid-template-columns:1fr; } .catalogue-toolbar { flex-wrap:wrap; gap:12px; margin-top:35px; } .catalogue-toolbar label { width:100%; } .catalogue-toolbar input { width:calc(100% - 90px); } .catalogue-toolbar #city-count { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .city-card-art img { transition:none; } }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; color:var(--ink); font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { cursor:pointer; color:inherit; font:inherit; }
a { color:inherit; text-decoration:none; }
button { background:none; border:0; }
button:disabled { cursor:default; opacity:.3; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.round { display:inline-grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; font-size:25px; background:#f6f4edcc; flex-shrink:0; transition:background .2s; }
.round:hover { background:#fffdf7; }
.brand { display:inline-flex; align-items:center; gap:12px; font-size:12px; letter-spacing:4px; white-space:nowrap; }
.moon { display:inline-block; width:33px; height:33px; border-radius:50%; border:1px solid #a29869; box-shadow:0 0 22px #e9d99240; background:radial-gradient(circle at 33% 31%,#fffde5 0 7%,transparent 8%),radial-gradient(circle at 68% 60%,#b8aa68 0 15%,transparent 16%),radial-gradient(circle at 31% 70%,#cbb977 0 10%,transparent 11%),radial-gradient(circle at 65% 25%,#d7c994 0 6%,transparent 7%),radial-gradient(circle at 35% 30%,#fff7c9,#ddd098 69%,#ae9e63); }
.coordinates { font-size:10px; color:var(--muted); letter-spacing:2px; }
.eyebrow { font-size:10px; font-weight:600; letter-spacing:2.5px; color:var(--accent); margin:0 0 13px; line-height:1.7; }
.cover { height:100svh; min-height:620px; position:relative; color:#f8f5ea; overflow:hidden; }
.cover-image { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; animation:arrive 2s ease-out both; }
.cover-shade { position:absolute; inset:0; background:linear-gradient(180deg,#0a142028 0%,transparent 30%,#09121835 55%,#060a10cc 100%),linear-gradient(90deg,#0d111a20,transparent 65%); }
.cover-header { display:flex; align-items:center; gap:20px; position:relative; padding:24px 3.5%; border-bottom:1px solid #fff3; }
.cover-header .round { background:#f7f4e7b0; color:#3f4848; border-color:transparent; }
.cover-header .coordinates { margin-left:auto; color:#eee7d5bc; }
.cover-content { position:absolute; bottom:9%; left:5%; right:5%; display:flex; align-items:flex-end; gap:40px; justify-content:space-between; }
.cover-title .eyebrow { color:#f9f0df; font-size:11px; margin-bottom:20px; }
.cover-chinese { font:clamp(28px,4vw,60px)/1.2 var(--serif); letter-spacing:.25em; margin:0 0 2px; }
.cover-title h1 { font-size:clamp(78px,11.5vw,184px); line-height:1.03; font-weight:600; letter-spacing:.015em; margin:0; }
.tagline { font:clamp(17px,1.6vw,24px)/1.8 var(--serif); letter-spacing:.13em; margin:23px 0 0; }
.cover-actions { display:flex; gap:12px; padding-bottom:5px; }
.cover-actions > * { display:flex; align-items:center; justify-content:space-between; gap:45px; min-width:210px; padding:22px; border:1px solid #fff8; font:19px var(--serif); letter-spacing:1px; }
.cover-actions button { color:#31352f; background:#f4eddf; border-color:#f4eddf; }
.cover-actions button:hover { background:white; }
.cover-actions a:hover { background:#ffffff18; }
.cover-actions small { display:block; font:8px Arial,sans-serif; letter-spacing:2px; margin-top:12px; }
.cover-actions i { font-style:normal; font-family:Arial,sans-serif; }
.atlas { animation:appear .6s ease-out; }
.atlas-header { height:74px; display:flex; align-items:center; justify-content:space-between; padding:14px 2.6%; border-bottom:1px solid var(--line); }
.atlas-header .brand { position:absolute; left:50%; transform:translateX(-50%); }
.atlas-heading { padding:25px 3% 12px; display:flex; align-items:center; justify-content:space-between; gap:40px; }
.atlas-heading h2 { font:58px/1 var(--serif); margin:0; letter-spacing:8px; }
.atlas-heading h2 span { color:transparent; -webkit-text-stroke:.75px var(--ink); }
.atlas-heading h3 { font:18px var(--serif); font-weight:400; margin:0 0 12px; text-align:right; }
.atlas-heading p:not(.eyebrow) { color:var(--muted); font:12px/1.7 var(--serif); margin:0; }
.panorama { position:relative; margin:0; background:linear-gradient(180deg,#f8f6ef,#f3f0e8); }
.panorama-window { position:relative; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; touch-action:pan-x pan-y; cursor:grab; }
.panorama-window::-webkit-scrollbar { display:none; }
.panorama-window.dragging { cursor:grabbing; }
.panorama-strip { position:relative; width:max(120vw,1400px); aspect-ratio:var(--panorama-ratio); isolation:isolate; }
.panorama-base,.panorama-colour { display:block; width:100%; height:100%; position:absolute; inset:0; pointer-events:none; user-select:none; }
.panorama-base { filter:grayscale(1); opacity:.86; }
.panorama-colour { mask-image:radial-gradient(ellipse 17% 62% at var(--focus-x) 58%,#000 52%,transparent 100%); }
.landmark { position:absolute; top:0; height:100%; display:block; z-index:1; }
.landmark-label { position:absolute; top:var(--label-y); left:50%; transform:translateX(-50%); z-index:2; white-space:nowrap; padding:12px 16px; color:#fff; font-size:13px; letter-spacing:2px; background:var(--accent); opacity:0; transition:opacity .2s; pointer-events:none; box-shadow:0 8px 24px #233f511c; }
.landmark-label:after { content:""; height:40px; position:absolute; left:50%; top:100%; width:1px; background:var(--accent); }
.landmark-label:before { content:""; position:absolute; width:6px; height:6px; border-radius:50%; background:var(--accent); left:calc(50% - 2.5px); top:calc(100% + 38px); }
.landmark.selected .landmark-label { opacity:1; }
.landmark-label small { font-size:9px; opacity:.6; margin-right:10px; }
.landmark-label i { font-style:normal; margin-left:12px; }
.scroll-hint { position:absolute; z-index:4; right:3%; top:8px; font-size:11px; letter-spacing:1px; background:#f4f2e8e8; border:1px solid var(--line); border-radius:30px; padding:8px 16px 8px 8px; pointer-events:none; }
.scroll-hint span { display:inline-grid; place-items:center; background:var(--accent); color:white; border-radius:50%; width:27px; height:27px; margin-right:8px; font-size:17px; }
.panorama .prev,.panorama .next { position:absolute; z-index:3; top:52%; color:var(--accent); background:#fffdfaee; }
.panorama .prev { left:15px; }
.panorama .next { right:15px; }
#panorama-position { display:block; width:94%; margin:0 auto; height:15px; accent-color:var(--accent); cursor:ew-resize; }
.landmark-index { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; padding:13px 3%; border-bottom:1px solid var(--line); }
.index-button { font-size:9px; letter-spacing:1px; padding:6px 12px; border-radius:30px; color:var(--muted); }
.index-button span { margin-left:6px; font-size:11px; }
.index-button[aria-pressed=true] { background:var(--accent); color:#fff; }
.landmark-info { display:grid; grid-template-columns:1fr 1.5fr 1fr; gap:30px; padding:25px 3% 28px; background:#e9e6dc80; min-height:177px; }
.landmark-info > div + div { border-left:1px solid var(--line); padding-left:30px; }
.landmark-info h2 { font:32px var(--serif); margin:8px 0; }
#info-era { font-size:10px; color:#797e75; letter-spacing:1px; }
.info-description { font:14px/1.9 var(--serif); }
.info-description > p { margin:0; }
.info-description .visit { margin-top:12px; font:11px Arial,sans-serif; color:var(--muted); }
.info-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; }
.pill { border:1px solid var(--accent); color:var(--accent); border-radius:30px; padding:12px 20px; display:inline-block; font-size:11px; letter-spacing:1px; white-space:nowrap; background:#faf8f130; transition:background .2s; }
.pill:hover { background:#fffdf5; }
.pill.primary { color:#fff; background:var(--accent); }
.atlas-footer { padding:16px 3%; display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:10px; letter-spacing:1px; }
body[data-view=detail] { background-color:#f4f0e6; background-image:radial-gradient(#bcb49b22 .6px,transparent .6px); background-size:7px 7px; }
.detail-header { display:flex; gap:18px; align-items:center; padding:18px 2.5%; position:relative; z-index:5; }
.detail-header > p { position:absolute; left:50%; transform:translateX(-50%); color:#8b9386; font-size:10px; white-space:nowrap; margin:0; }
.detail-heading { text-align:center; display:flex; align-items:center; justify-content:center; gap:20px; padding:0 20px; }
.detail-heading h1 { font:32px var(--serif); font-weight:400; letter-spacing:3px; margin:0; }
.detail-heading > span { font:18px var(--serif); letter-spacing:2px; border-left:1px solid var(--line); padding-left:20px; }
.detail-stage { min-height:400px; position:relative; display:flex; justify-content:center; align-items:center; padding:20px 0 0; }
.art-frame { position:relative; width:min(90vw,calc((100svh - 220px) * 1.3333),1150px); aspect-ratio:var(--art-ratio); }
#detail-art { width:100%; height:100%; object-fit:contain; display:block; mix-blend-mode:multiply; user-select:none; }
.hotspot { position:absolute; transform:translate(-50%,-50%); border:1px solid #39769b7a; border-radius:50%; width:32px; height:32px; background:#ffffff66; display:grid; place-items:center; z-index:2; padding:0; }
.hotspot span { display:block; width:9px; height:9px; border:1px solid #39769b; border-radius:50%; background:#fff; box-shadow:0 0 0 5px #fff6; }
.hotspot:before { content:""; position:absolute; inset:-6px; border-radius:50%; border:1px solid #39769b55; animation:breathe 3s ease-in-out infinite; }
.hotspot[aria-expanded=true] span { background:#225b83; }
.detail-card { position:absolute; z-index:4; right:2.5%; top:30px; width:290px; background:#faf8ef; border:1px solid #ddd7c580; box-shadow:0 12px 45px #34312410; animation:appear .2s ease-out; }
.detail-card.on-left { right:auto; left:2.5%; }
.detail-card:before { content:""; position:absolute; top:0; left:0; width:42px; height:2px; background:var(--accent); z-index:2; }
#close-detail { position:absolute; right:10px; top:10px; width:30px; height:30px; font-size:20px; z-index:2; }
.detail-crop { height:185px; background-size:260%; background-repeat:no-repeat; background-color:var(--paper); }
.detail-card-copy { padding:22px 23px 25px; }
.detail-card-copy .eyebrow { font-size:8px; color:#909787; }
.detail-card h2 { font:25px var(--serif); margin:13px 0 17px; }
.detail-card h3 { font-size:12px; color:var(--accent); line-height:1.7; margin:0 0 12px; }
.detail-card-copy > p:last-child { font:16px/1.9 var(--serif); margin:0; color:#6d746a; }
.detail-tools { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:20px; padding:10px 15px; }
.detail-tools > span { color:var(--muted); font-size:11px; }
.detail-tools .pill { padding:9px 17px; border-color:#b9bbb0; color:#647061; }
.detail-tools [aria-pressed=true] { background:var(--accent); color:#fff; border-color:var(--accent); }
#magnifier { width:144px; height:144px; padding:6px; position:absolute; pointer-events:none; transform:translate(-50%,-50%); z-index:5; border-radius:50%; border:0; box-shadow:0 5px 28px #303c3730; background:linear-gradient(135deg,#eee6d0 3%,#c4b388 34%,#f4ecd5 60%,#ad9975); }
.lens-glass { display:block; width:132px; height:132px; border-radius:50%; background-repeat:no-repeat; background-color:#f6f0e4; box-shadow:inset 0 0 8px #5a503925; }
.lens-glass:after { content:""; position:absolute; inset:6px; border-radius:50%; background:linear-gradient(135deg,#ffffff40,transparent 50%); }
.lens-handle { position:absolute; left:121px; top:112px; width:76px; height:15px; border-radius:3px 8px 8px 3px; transform:rotate(45deg); transform-origin:left center; background:linear-gradient(#c5b58f,#927c59 34%,#69563d 74%,#c8b790); box-shadow:0 3px 7px #30291e30; }
.overview { max-width:680px; margin:20px auto 40px; padding:30px; border-top:1px solid var(--line); font:16px/1.9 var(--serif); }
.overview h2 { font-weight:400; }
.overview a { color:var(--accent); font:12px Arial,sans-serif; text-decoration:underline; text-underline-offset:5px; }
.detail-footer { display:flex; justify-content:space-between; align-items:center; padding:20px 3%; font-size:11px; color:var(--muted); }
.detail-footer a { color:var(--accent); }
@keyframes arrive { from { transform:scale(1.04); opacity:.5; } to { transform:scale(1); opacity:1; } }
@keyframes appear { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes breathe { 50% { transform:scale(1.2); opacity:.4; } }
@media (max-width:1000px) {
  .cover-content { display:block; bottom:6%; }
  .cover-actions { margin-top:30px; }
  .cover-title h1 { font-size:110px; }
  .detail-card { width:245px; }
  .detail-crop { height:135px; }
  .detail-card-copy { padding:16px; }
  .detail-card-copy > p:last-child { font-size:14px; }
}
@media (max-width:640px) {
  .cover { min-height:620px; }
  .cover-image { object-position:62% center; }
  .cover-header { padding:18px; gap:15px; }
  .cover-header .coordinates,.atlas-header .coordinates { display:none; }
  .cover-title h1 { font-size:80px; }
  .cover-content { left:7%; right:7%; bottom:7%; }
  .cover-chinese { font-size:34px; }
  .tagline { font-size:17px; letter-spacing:1px; }
  .cover-actions { gap:8px; }
  .cover-actions > * { flex:1; min-width:0; gap:8px; padding:16px 12px; font-size:15px; }
  .cover-actions small { font-size:6px; letter-spacing:1px; }
  .atlas-heading { padding:23px 6% 10px; gap:20px; align-items:flex-end; }
  .atlas-heading h2 { font-size:42px; white-space:nowrap; }
  .atlas-heading h3 { font-size:14px; line-height:1.5; }
  .atlas-heading p:not(.eyebrow) { display:none; }
  .eyebrow { font-size:8px; letter-spacing:1.5px; }
  .panorama-strip { width:1250px; }
  .landmark-label { font-size:11px; padding:10px; }
  .scroll-hint { font-size:9px; right:5%; }
  .landmark-index { gap:2px; padding:12px; }
  .index-button { padding:7px 9px; }
  .index-button span { font-size:10px; }
  .landmark-info { grid-template-columns:1fr; gap:15px; padding:22px 6%; }
  .landmark-info > div + div { border-left:0; padding:0; }
  .landmark-info h2 { font-size:29px; }
  .info-actions { justify-content:flex-start; }
  .atlas-footer { font-size:8px; padding:15px 6%; line-height:1.6; }
  .detail-header { padding:15px 5%; height:76px; }
  .detail-header > p { display:none; }
  .detail-heading { display:block; }
  .detail-heading h1 { font-size:27px; }
  .detail-heading > span { font-size:14px; padding:0; display:block; border:0; margin-top:12px; }
  .detail-stage { display:block; min-height:0; padding-top:30px; }
  .art-frame { width:100%; }
  .hotspot { width:28px; height:28px; }
  .detail-card,.detail-card.on-left { position:relative; left:auto; right:auto; top:auto; width:90%; margin:15px auto; }
  .detail-card .detail-crop { height:180px; }
  .detail-card-copy { padding:23px; }
  .detail-tools { gap:10px; }
  .detail-tools > span { order:3; flex-basis:100%; text-align:center; }
  .detail-footer { font-size:9px; padding:22px 5%; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}