:root {
  --forest: #173d35;
  --forest-deep: #0e2a26;
  --cream: #f5f0e6;
  --paper: #fffdf8;
  --orange: #e87843;
  --gold: #d5a94e;
  --ink: #18302b;
  --muted: #687974;
  --line: rgba(23, 61, 53, .15);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Outfit", "Microsoft YaHei", sans-serif; }
button, input { font: inherit; }

.hero { min-height: 100vh; position: relative; overflow: hidden; color: var(--cream); background: radial-gradient(circle at 75% 25%, #286b5d 0, transparent 28%), linear-gradient(145deg, #0d2b27 5%, #194b40 65%, #276454); }
nav { position: relative; z-index: 5; max-width: 1240px; margin: auto; padding: 28px 30px; display: flex; align-items: center; justify-content: space-between; }
.brand { color: white; text-decoration: none; font-weight: 600; letter-spacing: .04em; }
.brand span { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-right: 8px; color: var(--forest); background: var(--cream); border-radius: 50%; font-family: "Noto Serif SC", serif; }
.nav-links { display: flex; gap: 26px; }
.nav-links a { color: rgba(255,255,255,.72); text-decoration: none; font-size: 14px; }
.nav-links a:hover { color: white; }

.hero-content { position: relative; z-index: 3; max-width: 1240px; margin: auto; padding: 8vh 30px 230px; }
.eyebrow { margin: 0 0 14px; color: #e0c47d; font-size: 11px; font-weight: 600; letter-spacing: .25em; }
.eyebrow.dark { color: var(--orange); }
h1, h2 { font-family: "Noto Serif SC", serif; }
h1 { max-width: 900px; margin: 0; font-size: clamp(60px, 9vw, 125px); line-height: 1.1; letter-spacing: -.06em; }
h1 em { color: #e1bd68; font-style: normal; }
.hero-copy { margin: 28px 0 40px; color: rgba(255,255,255,.7); line-height: 1.9; }
.trip-meta { display: flex; gap: 50px; }
.trip-meta div { display: flex; flex-direction: column; gap: 2px; }
.trip-meta strong { font-family: "Noto Serif SC", serif; font-size: 30px; color: white; }
.trip-meta span { color: rgba(255,255,255,.55); font-size: 12px; }
.mountains { position: absolute; z-index: 1; bottom: -2px; left: 0; width: 100%; }
.mountains svg { display: block; width: 100%; height: 390px; }
.mountain-back { fill: #205246; opacity: .75; }
.mountain-front { fill: var(--cream); }
.snow { fill: rgba(255,255,255,.4); }
.scroll-hint { position: absolute; z-index: 3; right: 30px; bottom: 35px; color: var(--forest); text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: .08em; }

.section { max-width: 1240px; margin: auto; padding: 110px 30px; }
.section.tinted { max-width: none; padding-left: max(30px, calc((100vw - 1180px)/2)); padding-right: max(30px, calc((100vw - 1180px)/2)); background: var(--cream); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 52px; }
.section-no { display: block; margin-bottom: 24px; color: var(--orange); font-family: "Noto Serif SC", serif; font-size: 18px; }
.section-no.light { color: #e1bd68; }
h2 { margin: 0; font-size: clamp(34px, 5vw, 58px); line-height: 1.2; letter-spacing: -.04em; }
.section-note { max-width: 300px; margin: 0; color: var(--muted); line-height: 1.7; font-size: 13px; text-align: right; }
.light-text { color: rgba(255,255,255,.55); }

.route-map { position: relative; height: 260px; margin-bottom: 55px; padding: 0 6%; border-radius: 18px; background: #edf1e9; overflow: hidden; }
.route-map::before { content: ""; position: absolute; inset: 0; opacity: .25; background-image: radial-gradient(var(--forest) .8px, transparent .8px); background-size: 18px 18px; }
.route-map svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.route-line { fill: none; stroke: rgba(23,61,53,.18); stroke-width: 3; }
.route-dashes { fill: none; stroke: var(--orange); stroke-width: 3; stroke-dasharray: 8 10; animation: travel 16s linear infinite; }
.route-map circle { fill: var(--paper); stroke: var(--orange); stroke-width: 4; }
@keyframes travel { to { stroke-dashoffset: -180; } }
.map-label { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 3px; }
.map-label b { font-family: "Noto Serif SC", serif; font-size: 17px; }
.map-label span { color: var(--muted); font-size: 11px; }
.map-label.start { left: 5%; top: 150px; }.map-label.nyingchi { left: 46%; top: 70px; }.map-label.lhasa { right: 4%; top: 145px; }

.timeline { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--line); }
.day { position: relative; padding: 28px 18px 0 0; }
.day::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--orange); border-radius: 50%; }
.day small { color: var(--orange); font-weight: 600; }
.day h3 { margin: 14px 0 7px; font-family: "Noto Serif SC", serif; font-size: 18px; }
.day p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.day .tag { display: inline-block; margin-top: 15px; padding: 5px 8px; color: var(--forest); background: #e9f0e8; border-radius: 4px; font-size: 10px; }

.packing-progress { min-width: 200px; text-align: right; }
.packing-progress span { color: var(--orange); font-size: 13px; font-weight: 600; }
.packing-progress div { height: 4px; margin-top: 10px; background: rgba(23,61,53,.12); border-radius: 2px; overflow: hidden; }
.packing-progress i { display: block; width: 0; height: 100%; background: var(--orange); transition: width .3s ease; }
.packing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pack-group { padding: 25px; background: var(--paper); border-radius: 12px; }
.pack-group h3 { margin: 0 0 18px; font-family: "Noto Serif SC", serif; font-size: 18px; }
.check-item { display: flex; align-items: center; gap: 10px; margin: 11px 0; color: #52645f; cursor: pointer; font-size: 13px; }
.check-item input { appearance: none; width: 17px; height: 17px; flex: 0 0 17px; border: 1px solid #a9b5b1; border-radius: 50%; cursor: pointer; }
.check-item input:checked { background: var(--orange); border: 4px solid var(--paper); outline: 1px solid var(--orange); }
.check-item:has(input:checked) span { color: #9aa5a1; text-decoration: line-through; }
.text-button { margin-top: 25px; padding: 0; color: var(--muted); background: none; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; font-size: 12px; }
.weather-board { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1px; margin-top: 24px; background: rgba(23,61,53,.12); border: 1px solid rgba(23,61,53,.12); border-radius: 12px; overflow: hidden; }
.weather-intro, .weather-city { background: var(--paper); padding: 24px; }
.weather-intro { display: flex; align-items: flex-start; gap: 16px; }
.weather-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; color: var(--orange); background: #fff3ec; border-radius: 50%; font-size: 19px; }
.weather-intro h3, .weather-city b { margin: 0 0 8px; font-family: "Noto Serif SC", serif; }
.weather-intro p:last-child { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.weather-city { display: flex; flex-direction: column; }
.weather-city strong { margin: 10px 0; color: var(--orange); font-family: "Noto Serif SC", serif; font-size: 25px; }
.weather-city span { color: var(--muted); font-size: 11px; line-height: 1.7; }

.booking-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.budget-panel { display: grid; grid-template-columns: .9fr 2fr; margin-bottom: 55px; color: white; background: var(--forest); border-radius: 14px; overflow: hidden; }
.budget-total { display: flex; flex-direction: column; justify-content: center; padding: 32px; background: var(--orange); }
.budget-total span, .budget-total small { opacity: .8; font-size: 11px; }
.budget-total strong { margin: 8px 0; font-family: "Noto Serif SC", serif; font-size: clamp(25px, 3vw, 38px); }
.budget-items { display: grid; grid-template-columns: repeat(2, 1fr); padding: 20px 28px; }
.budget-items div { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 14px; }
.budget-items span { color: rgba(255,255,255,.55); font-size: 11px; }
.budget-items b { font-size: 14px; }
.subheading { margin: 0 0 20px; font-family: "Noto Serif SC", serif; font-size: 23px; }
.bookings-title { margin-top: 55px; }
.recommend-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.recommend-grid article { padding: 23px; background: #f4f3ec; border-radius: 12px; }
.recommend-grid span { color: var(--orange); font-size: 10px; font-weight: 600; letter-spacing: .05em; }
.recommend-grid h3 { margin: 18px 0 10px; font-family: "Noto Serif SC", serif; font-size: 17px; }
.recommend-grid p { min-height: 64px; margin: 0 0 18px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.recommend-grid small { color: var(--forest); font-size: 10px; font-weight: 600; }
.hotel-reference { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; }
.hotel-reference article { display: grid; grid-template-columns: 145px 1fr; gap: 20px; padding: 16px; background: #f4f3ec; border-radius: 12px; }
.hotel-reference a { display: block; height: 210px; border-radius: 8px; overflow: hidden; }
.hotel-reference img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .25s ease; }
.hotel-reference a:hover img { transform: scale(1.025); }
.hotel-reference span { color: var(--orange); font-size: 10px; font-weight: 600; }
.hotel-reference h3 { margin: 12px 0 9px; font-family: "Noto Serif SC", serif; font-size: 18px; }
.hotel-reference p { margin: 0 0 12px; color: var(--muted); font-size: 11px; line-height: 1.75; }
.hotel-reference b { color: #a14d34; font-size: 10px; line-height: 1.7; }
.transport-note { display: grid; grid-template-columns: 1fr 2fr 2fr; gap: 18px; margin-top: 18px; padding: 22px; color: var(--cream); background: var(--forest); border-radius: 12px; }
.transport-note b { color: #e1bd68; font-family: "Noto Serif SC", serif; }
.transport-note span, .transport-note strong { font-size: 11px; line-height: 1.75; }
.transport-note span { color: rgba(255,255,255,.65); }
.transport-note strong { grid-column: 1 / -1; padding-top: 14px; color: white; border-top: 1px solid rgba(255,255,255,.12); }
.booking-card { min-height: 230px; padding: 25px; border: 1px solid var(--line); border-radius: 12px; transition: transform .2s ease, box-shadow .2s ease; }
.booking-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(23,61,53,.08); }
.booking-top { display: flex; justify-content: space-between; align-items: center; }
.booking-icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--orange); background: #fff3ec; border-radius: 50%; font-size: 18px; }
.status { padding: 6px 9px; color: #9b7434; background: #fbf2dc; border: 0; border-radius: 20px; cursor: pointer; font-size: 10px; }
.status.done { color: #32705f; background: #e4f1ec; }
.booking-card h3 { margin: 35px 0 8px; font-family: "Noto Serif SC", serif; font-size: 20px; }
.booking-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.booking-card .date { display: block; margin-top: 26px; color: var(--orange); font-size: 11px; font-weight: 600; letter-spacing: .05em; }
.booking-link { display: inline-block; margin-top: 12px; color: var(--forest); font-size: 11px; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(23,61,53,.35); }
.booking-link:hover { color: var(--orange); border-color: var(--orange); }
.booking-link.secondary { display: block; width: max-content; margin-top: 8px; color: var(--muted); font-weight: 500; }

.dark-section { max-width: none; padding-left: max(30px, calc((100vw - 1180px)/2)); padding-right: max(30px, calc((100vw - 1180px)/2)); color: var(--cream); background: var(--forest-deep); }
.wish-tabs { display: flex; gap: 10px; margin-bottom: 25px; }
.wish-tabs button { padding: 8px 15px; color: rgba(255,255,255,.55); background: transparent; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; cursor: pointer; font-size: 11px; }
.wish-tabs button.active { color: var(--forest); background: var(--cream); }
.wish-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.wish-card { position: relative; min-height: 220px; padding: 24px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; cursor: pointer; transition: background .2s ease; overflow: hidden; }
.wish-card:hover { background: rgba(255,255,255,.1); }
.wish-card.hide { display: none; }
.wish-card .stamp { position: absolute; right: -10px; top: -10px; display: grid; place-items: center; width: 80px; height: 80px; color: rgba(225,189,104,.18); border: 2px solid currentColor; border-radius: 50%; font-family: "Noto Serif SC", serif; font-size: 28px; transform: rotate(18deg); }
.wish-card.done .stamp { color: #e1bd68; }
.wish-card small { color: #e1bd68; letter-spacing: .1em; }
.wish-card h3 { margin: 65px 0 8px; font-family: "Noto Serif SC", serif; font-size: 20px; }
.wish-card p { margin: 0; color: rgba(255,255,255,.48); font-size: 11px; line-height: 1.7; }

footer { display: flex; justify-content: space-between; padding: 30px max(30px, calc((100vw - 1180px)/2)); color: #9aa7a3; background: var(--forest-deep); border-top: 1px solid rgba(255,255,255,.08); font-size: 11px; }
footer p { margin: 0; } footer a { color: #e1bd68; text-decoration: none; }

@media (max-width: 900px) {
  .timeline { grid-template-columns: repeat(2, 1fr); gap: 30px 10px; border-top: 0; }
  .day { border-top: 1px solid var(--line); }
  .packing-grid, .wish-grid { grid-template-columns: repeat(2, 1fr); }
  .booking-grid { grid-template-columns: repeat(2, 1fr); }
  .weather-board { grid-template-columns: 1fr 1fr; }.weather-intro { grid-column: span 2; }
  .recommend-grid { grid-template-columns: repeat(2, 1fr); }
  .hotel-reference { grid-template-columns: 1fr; }
  .transport-note { grid-template-columns: 1fr 1fr; }.transport-note b { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  nav { padding: 20px; }.nav-links { display: none; }
  h1 { font-size: 52px; letter-spacing: -.09em; }
  .hero-content { padding: 12vh 20px 180px; }.hero-copy { font-size: 13px; }.trip-meta { gap: 28px; }
  .mountains svg { height: 240px; }.scroll-hint { display: none; }
  .section, .section.tinted, .dark-section { padding: 75px 20px; }
  .section-head { align-items: flex-start; flex-direction: column; margin-bottom: 35px; }.section-note { text-align: left; }
  .route-map { height: 230px; margin-inline: -20px; border-radius: 0; }
  .map-label.start { left: 4%; }.map-label.nyingchi { left: 42%; }.map-label.lhasa { right: 2%; }
  .map-label span { display: none; }
  .timeline, .packing-grid, .booking-grid, .wish-grid { grid-template-columns: 1fr; }
  .weather-board, .recommend-grid, .budget-panel, .budget-items { grid-template-columns: 1fr; }
  .hotel-reference article { grid-template-columns: 100px 1fr; gap: 14px; }.hotel-reference a { height: 180px; }
  .transport-note { grid-template-columns: 1fr; }.transport-note b, .transport-note strong { grid-column: auto; }
  .weather-intro { grid-column: auto; }.budget-total { padding: 25px; }.budget-items { padding: 12px; }
  .recommend-grid p { min-height: 0; }
  .packing-progress { width: 100%; text-align: left; }
  .wish-grid { grid-template-columns: repeat(2, 1fr); }.wish-card { min-height: 200px; padding: 18px; }
  .wish-card h3 { margin-top: 55px; font-size: 17px; }
  footer { gap: 20px; flex-direction: column; padding-inline: 20px; }
}