:root {
  color-scheme: light;
  --paper: #f5efe5;
  --ink: #29211c;
  --muted: #604d40;
  --line: #d9cbbb;
  --brick: #723a2b;
  --charcoal: #271b17;
  --serif: "Baskervville", "Songti SC", "Noto Serif CJK SC", Georgia, serif;
  --sans: "Instrument Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 1rem/1.7 var(--sans); }
a { color: inherit; text-underline-offset: .24em; }
a:focus-visible, summary:focus-visible { outline: 3px solid #b65c34; outline-offset: 5px; }
img { display: block; width: 100%; object-fit: cover; }
.wrap { width: min(1160px, 90%); margin-inline: auto; }
.top { border-bottom: 1px solid var(--line); }
.mast { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1rem; }
.brand { font: 1.45rem var(--serif); white-space: nowrap; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; justify-content: end; align-items: center; gap: .65rem clamp(.6rem, 2.5vw, 1.8rem); font-size: .87rem; }
nav a { text-decoration: none; }
nav a:hover { text-decoration: underline; }
.lang { border: 1px solid #9b8472; border-radius: 1.25rem; padding: .3rem .68rem; white-space: nowrap; }
.hero { position: relative; isolation: isolate; min-height: clamp(420px, 60vw, 660px); display: grid; align-items: end; color: #fff8ea; background: var(--charcoal); }
.hero img, .hero::after { position: absolute; inset: 0; height: 100%; z-index: -1; }
.hero img { object-position: 52% 54%; }
.hero::after { content: ""; background: linear-gradient(90deg,#211511d9 5%,#21151171 62%,transparent), linear-gradient(0deg,#211511c9,transparent 67%); }
.hero-content { padding-block: clamp(2.65rem, 7vw, 5.5rem); }
.meta { font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.hero .meta { color: #ffdaad; }
h1,h2,h3 { font-family: var(--serif); line-height: 1.13; font-weight: 500; margin: 0; }
h1 { font-size: clamp(3.1rem, 8vw, 6.8rem); letter-spacing: -.025em; }
:lang(zh-CN) h1 { letter-spacing: .03em; }
.hero p:not(.meta) { max-width: 40ch; font-size: clamp(1rem, 1.85vw, 1.2rem); }
.cta { display: inline-block; padding: .6rem 1.1rem; background: #f4dfc2; color: var(--charcoal); text-decoration: none; }
.cta:hover { background: #fff4e0; }
.places { padding-block: clamp(3rem, 7vw, 6.5rem); }
h2 { font-size: clamp(2.15rem, 5vw, 3.65rem); padding-bottom: 1.3rem; }
.cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.7rem; }
.landmark { background: #fcf7ee; border: 1px solid var(--line); }
.landmark img { aspect-ratio: 1.85; background: #e1d4c5; }
#pagoda img { object-position: center 45%; }
.card-copy { padding: 1.15rem clamp(1rem, 3vw, 1.8rem) 1.55rem; }
.card-copy .meta { color: var(--brick); margin: 0 0 .5rem; }
.card-copy p:not(.meta) { color: var(--muted); }
h3 { font-size: clamp(1.55rem, 3vw, 2.25rem); }
.reference { color: var(--brick); font-size: .88rem; }
.routes { padding-block: clamp(3rem, 7vw, 5.25rem); color: #fff6e9; background: var(--charcoal); }
.itineraries { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.6rem; }
.itineraries article { padding-top: 1.1rem; border-top: 1px solid #947563; }
.itineraries h3 { color: #ffd7aa; font-size: 1.4rem; }
.itineraries p { margin-bottom: 0; }
.footer { padding-block: 1.65rem 2.2rem; font-size: .87rem; color: var(--muted); }
summary { cursor: pointer; width: fit-content; }
.skip { position: absolute; left: 1rem; top: 0; z-index: 3; padding: .45rem; transform: translateY(-120%); background: #fff; }
.skip:focus { transform: translateY(0); }
@media (max-width: 640px) {
  .mast { align-items: start; }
  .cards, .itineraries { grid-template-columns: 1fr; }
  .hero img { object-position: 58% center; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }