:root {
  color-scheme: light;
  --paper: #f6f3e9;
  --ink: #182b24;
  --muted: #46574d;
  --line: #d8dbcf;
  --green: #18372d;
  --sand: #ead9b3;
  --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; background: var(--paper); color: var(--ink); font: 1rem/1.65 var(--sans); }
a { color: inherit; text-underline-offset: .24em; }
a:focus-visible { outline: 3px solid #ac633a; outline-offset: 5px; }
img { display: block; width: 100%; object-fit: cover; }
.wrap { width: min(1170px, 90%); margin-inline: auto; }
.masthead { border-bottom: 1px solid var(--line); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; }
.brand { font: 1.45rem var(--serif); text-decoration: none; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(.6rem, 2vw, 1.8rem); font-size: .87rem; }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.language { border: 1px solid #a3ac9c; border-radius: 2rem; padding: .32rem .75rem; white-space: nowrap; }
.hero { position: relative; isolation: isolate; display: grid; align-items: end; min-height: clamp(410px, 61vw, 650px); background: #43564b; color: #fffaf0; }
.hero img, .hero::after { position: absolute; inset: 0; height: 100%; z-index: -1; }
.hero img { object-position: center 51%; }
.hero::after { content: ""; background: linear-gradient(90deg,#111f1cba,transparent 85%),linear-gradient(0deg,#111f1caa,transparent 55%); }
.hero-copy { padding-block: 4rem; }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.hero .eyebrow { color: #f7e6bf; }
h1,h2,h3 { font-family: var(--serif); font-weight: 500; line-height: 1.1; margin: 0; }
h1 { font-size: clamp(3.1rem, 8vw, 6.9rem); max-width: 12ch; letter-spacing: -.025em; }
:lang(zh-CN) h1 { letter-spacing: .02em; }
.hero p:not(.eyebrow) { max-width: 37rem; font-size: clamp(1rem, 1.9vw, 1.2rem); }
.cta { display: inline-block; margin-top: .6rem; padding: .58rem 1.1rem; background: #f2e4c7; color: #182b24; text-decoration: none; }
.cta:hover { background: white; }
.landmarks { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1.25rem 3rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
.section-head p { max-width: 33ch; margin: 0; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2.6rem 1.5rem; margin-top: 1.7rem; }
.card { border-bottom: 1px solid var(--line); padding-bottom: 1.35rem; }
.card img { aspect-ratio: 1.85; background: #d7ded0; }
.card .eyebrow { color: #576747; margin: 1.1rem 0 .5rem; }
h3 { font-size: clamp(1.6rem, 3.3vw, 2.3rem); }
.card p:not(.eyebrow) { max-width: 56ch; color: var(--muted); }
.source { font-size: .86rem; }
.routes { background: var(--green); color: #fffaf0; padding-block: clamp(3rem, 7vw, 6rem); }
.route-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.8rem; margin-top: 1.75rem; }
.route { border-top: 1px solid #83a294; padding-top: 1.15rem; }
.route h3 { color: var(--sand); font-size: 1.45rem; }
.route p { margin-bottom: 0; }
.footer { padding-block: 1.8rem 2.3rem; font-size: .86rem; color: var(--muted); }
.footer summary { cursor: pointer; width: fit-content; }
.footer ul { padding-inline-start: 1.25rem; }
.skip { position: absolute; top: 0; left: 1rem; z-index: 3; transform: translateY(-120%); background: white; padding: .4rem; }
.skip:focus { transform: translateY(0); }
@media (max-width: 660px) {
  .section-head { display: block; }
  .section-head p { margin-top: .75rem; }
  .grid, .route-grid { grid-template-columns: 1fr; }
  .hero-copy { padding-block: 2.7rem; }
  .top { align-items: start; }
  .nav { justify-content: end; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}