/* Plateau landscape, mineral colors and restrained geometric textile accents. */
:root {
  --ink: #173644;
  --muted: #5b6c72;
  --line: #dce1df;
  --paper: #fffefa;
  --bg: #f0f2ef;
  --tibet-red: #862e3a;
  --tibet-blue: #153747;
  --tibet-gold: #d8ae65;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
}
body {
  background: radial-gradient(#193b4810 .7px, transparent .7px) 0 0 / 9px 9px, var(--bg);
}
.masthead {
  max-width: none;
  height: 66px;
  padding-inline: max(42px, calc((100vw - 1516px) / 2));
  color: #fffefa;
  background: var(--tibet-blue);
  border-bottom: 3px solid var(--tibet-gold);
}
.brand { font-size: 16px; letter-spacing: .1em; }
.brand-mark {
  width: 35px;
  height: 35px;
  border: 1px solid var(--tibet-gold);
  border-radius: 3px;
  outline: 1px solid #d8ae6550;
  outline-offset: 3px;
  background: var(--tibet-red);
  color: #ffedca;
  font-family: var(--serif);
}
.edition { color: #e1e7e7; }
.edition b { color: #efd19a; }
.intro {
  min-height: 216px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 24px 0 20px;
  padding: 25px 32px 31px;
  border: 1px solid #2c4c58;
  border-radius: 8px;
  background: var(--tibet-blue);
  color: #fffefa;
}
.intro::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  height: 6px;
  background: repeating-linear-gradient(45deg, #dab26a 0 3px, #173746 3px 8px, #a44449 8px 11px, #173746 11px 16px);
  border-top: 1px solid #edcc9260;
  pointer-events: none;
}
.intro > .intro-copy { position: relative; z-index: 1; width: 48%; }
.eyebrow { color: #f0d39f; font-size: 14px; letter-spacing: .15em; }
h1 {
  font-family: var(--serif);
  font-size: clamp(36px, 3.6vw, 50px);
  letter-spacing: .11em;
  line-height: 1.35;
  font-weight: 700;
  margin: 10px 0 15px;
}
.intro p { font-size: 16px; color: #f7f6ee; letter-spacing: .025em; }
.intro p span { color: #e2e9e7; margin-left: 22px; }
.trip-photo {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 auto;
  width: 68%;
  height: 100%;
  border-radius: 0;
}
.trip-photo img { object-position: 50% 36%; }
.trip-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #153747 0%, #153747d9 12%, #15374745 43%, #15374700 73%), linear-gradient(0deg, #0b273862, transparent 46%);
  pointer-events: none;
}
.trip-photo figcaption {
  z-index: 1;
  left: auto;
  right: 21px;
  bottom: 18px;
  padding: 5px 9px;
  border: 1px solid #f1ddb58c;
  border-radius: 2px;
  background: #102f42b8;
  color: #fff5dd;
  font-size: 12px;
  letter-spacing: .1em;
}
.route-cards { gap: 14px; margin-bottom: 22px; }
.route-card {
  position: relative;
  border-radius: 5px;
  border-color: #ccd5d5;
  background: var(--paper);
  padding: 17px 20px;
  box-shadow: 0 3px 9px #14344205;
  transition: background .18s, border-color .18s;
}
.route-card:hover { border-color: #a08153; background: #faf8f1; }
.route-card[aria-pressed=true] {
  color: #fffefa;
  background: var(--tibet-red);
  border-color: var(--tibet-red);
  box-shadow: inset 0 0 0 1px #f2d99a40, 0 5px 14px #572b3712;
}
.route-letter {
  width: 38px;
  height: 42px;
  font-family: var(--serif);
  font-size: 23px;
  color: var(--tibet-blue);
  border: 1px solid #b79763;
  border-radius: 2px;
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px #b7976355;
}
.route-card h2 { font-size: 17px; }
.route-card p { color: #566b73; font-size: 14px; }
.route-card[aria-pressed=true] .route-letter { color: #ffe9b6; border-color: #dfbc76; box-shadow: inset 0 0 0 3px var(--tibet-red), inset 0 0 0 4px #dfbc7666; }
.route-card[aria-pressed=true] p { color: #fff0e2; }
.map-panel, .itinerary-panel, .route-summary, .source-details, .preparation {
  border-radius: 7px;
  border-color: #d2dbd8;
  box-shadow: 0 5px 22px #193a4605;
}
.panel-top { background: var(--paper); }
.panel-top h2 { display: flex; align-items: center; gap: 10px; }
.panel-top h2::before {
  content: "";
  display: inline-block;
  flex: 0 0 6px;
  height: 20px;
  border-top: 4px solid var(--tibet-gold);
  background: var(--tibet-red);
}
.panel-top p { margin-left: 16px; }
.small-button { color: var(--tibet-red); background: transparent; border-color: #ac7d695c; border-radius: 4px; }
.small-button:hover { background: #f8efea; border-color: #986153; }
.count { border: 1px solid #b99c675e; padding: 5px 9px; color: #70522d; border-radius: 3px; font-size: 14px; }
.day { background: transparent; border-radius: 4px; }
.day:hover { background: #f2f5f3; }
.day[aria-pressed=true] { background: color-mix(in srgb, var(--day-color) 10%, #fffefa); }
.day-title { font-size: 16px; }
.day-stay { font-size: 14px; }
.day-detail { background: #f7f8f4; font-size: 16px; }
.detail-label { font-size: 14px; color: #596a70; }
.detail-muted { font-size: 14px; }
.place-links button, .map-link { border-radius: 4px; background: var(--paper); }
.place-links button:hover { border-color: #ac8051; }
.leg-details button { background: var(--paper); border-color: #d4dcd8; border-radius: 4px; }
.leg-details button strong { font-size: 14px; }
.map-footer { background: var(--paper); }
.routing-progress { color: #526971; background: #eef3f1; border-top-color: #d6dfd9; }
.basemap-switch button[aria-pressed=true] { background: var(--tibet-blue); }
.route-summary { border-top: 3px solid var(--tibet-gold); }
.route-summary h3 { color: var(--tibet-red); font-size: 18px; }
.route-summary p { font-size: 16px; }
.route-summary .detail-muted { font-size: 14px; }
.source-details > summary { color: var(--tibet-blue); }
.preparation { border-top: 3px solid var(--tibet-red); }
.preparation > h2 { font-family: var(--serif); font-size: 23px; letter-spacing: .045em; }
.prep-grid h3 { color: #713441; }
.prep-grid p, .prep-grid li { font-size: 15px; }
.site-footer { border-top: 1px solid #c0a97c70; margin-top: 26px; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline-color: #b98027; }
@media (max-width: 1100px) {
  .masthead { padding-inline: 24px; }
  .intro { min-height: 205px; padding-inline: 25px; }
  .intro > .intro-copy { width: 58%; }
  .trip-photo { width: 73%; }
  .route-card { padding: 16px; gap: 12px; }
}
@media (max-width: 800px) {
  .masthead { height: 62px; }
  .intro { margin-top: 18px; min-height: 198px; }
  .intro > .intro-copy { width: 65%; }
  .trip-photo { width: 82%; }
  .trip-photo img { object-position: 50% 35%; }
  .route-card { display: block; }
  .route-letter { width: 29px; height: 32px; margin-bottom: 9px; font-size: 19px; }
  .route-card h2 { font-size: 16px; }
  .itinerary-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .itinerary-panel > *, .workspace > * { min-width: 0; }
}
@media (max-width: 520px) {
  .masthead { padding-inline: 18px; }
  .brand { font-size: 14px; letter-spacing: .05em; gap: 12px; }
  .brand-mark { width: 29px; height: 29px; font-size: 18px; }
  .edition { font-size: 12px; }
  .intro { min-height: 194px; margin: 15px 0; padding: 22px 19px 29px; }
  .intro > .intro-copy { width: 100%; }
  .eyebrow { font-size: 12px; letter-spacing: .08em; }
  h1 { font-size: clamp(29px, 8.5vw, 39px); letter-spacing: .07em; white-space: normal; margin: 9px 0 12px; }
  .intro p { font-size: 14px; }
  .intro p span { margin: 0 10px 0 0; }
  .intro p span:first-child { margin-left: 9px; }
  .trip-photo { inset: 0; width: 100%; height: 100%; }
  .trip-photo img { object-position: 54% 33%; }
  .trip-photo::after { background: linear-gradient(90deg, #153747f2, #1537478c 74%, #15374752); }
  .trip-photo figcaption { display: none; }
  .route-cards { gap: 7px; margin-bottom: 16px; }
  .route-card { padding: 12px 9px; min-height: 0; }
  .route-card h2 { font-size: 15px; overflow-wrap: anywhere; }
  .route-card p { font-size: 14px; line-height: 1.6; }
  .day-title { font-size: 16px; }
  .panel-top h2 { font-size: 17px; }
  .panel-top p { font-size: 14px; }
  .preparation { margin-top: 22px; }
}
@media print {
  body { background: white; }
  .intro { color: #173644; background: white; border-color: #cbd5d7; }
  .intro > .intro-copy { width: 65%; }
  .intro .eyebrow, .intro p, .intro p span { color: #173644; }
  .intro .trip-photo { width: 35%; }
  .trip-photo::after { background: none; }
  .intro::after { display: none; }
  .route-card[aria-pressed=true] { color: #173644; background: white; }
  .route-card[aria-pressed=true] p { color: #526971; }
}