/* V3: practical journey first; three quiet moments afterwards. Hero stays untouched. */
main#top {
  position: relative;
  isolation: isolate;
  --connection-spine-x: clamp(18px, calc((100vw - 1180px) / 2 - 32px), 50px);
}

/* The six-node thread stays in the gutter and ends at the photography section. */
.journey-thread {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  pointer-events: none;
  user-select: none;
}
.journey-thread .thread-base,
.journey-thread .thread-ink {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.journey-thread .thread-base { stroke: #c9bdab; stroke-width: 1; opacity: .52; }
.journey-thread .thread-ink { stroke: #9a805a; stroke-width: 1.35; opacity: .86; }
:is(#travel-with, #journey, #experience-design, #included, #stay, #memories) > .shell {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 88px), var(--max, 1180px));
  margin-left: max(48px, calc((100% - var(--max, 1180px)) / 2));
  margin-right: auto;
}
.connection-node {
  position: absolute;
  z-index: 3;
  top: var(--connection-node-y, 18px);
  left: var(--connection-node-x, -26px);
  display: block;
  width: 9px;
  height: 9px;
  border: 1px solid #a99373;
  border-radius: 50%;
  background: var(--white, #fffdf9);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: background-color .45s ease, border-color .45s ease;
}
.connection-node::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid #c9ad82;
  border-radius: inherit;
  opacity: 0;
  transform: scale(.75);
  transition: opacity .55s ease, transform .55s var(--ease, ease);
}
.connection-node.is-thread-reached,
.is-thread-reached .connection-node { border-color: #8f7450; background: #a98a5d; }
.connection-node.is-thread-reached::after,
.is-thread-reached .connection-node::after { opacity: .55; transform: scale(1); }
.connection-node--end { width: 11px; height: 11px; }
.connection-plane { position: absolute; z-index: 4; width: 24px; height: 28px; transform: translate(-50%,-50%); pointer-events: none; opacity: 0; }
.connection-plane.has-departed { opacity: 1; }
.connection-plane.connection-traveler-dot { width: 10px; height: 10px; border-radius: 50%; background: #b69566; box-shadow: 0 0 0 4px var(--pearl, #f5f2ed); }
@media (max-width: 760px) { .connection-plane.connection-traveler-dot { width: 8px; height: 8px; box-shadow: 0 0 0 3px var(--pearl, #f5f2ed); } }
@media (prefers-reduced-motion: reduce) {
  .connection-plane { display: none; }
}

/* A concise invitation; the complete process remains in the native disclosure. */
#travel-with { padding: 36px 0 34px; }
#travel-with > .shell { padding-top: 0; border-top: 0; }
#travel-with .copy-section-head {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  margin-bottom: 22px;
}
#travel-with .copy-section-head .eyebrow {
  margin: 0 0 8px;
  color: #786348;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .12em;
}
#travel-with .copy-section-head h2 {
  margin: 0;
  font: 300 clamp(27px, 2.3vw, 33px)/1.55 var(--sans, system-ui, sans-serif);
  letter-spacing: .025em;
}
#travel-with .travel-summary { max-width: none; margin: 0; font-size: 16px; line-height: 1.8; }
#travel-with .travel-summary strong {
  display: block;
  margin-bottom: 5px;
  color: var(--night, #142733);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .035em;
}
#travel-with .travel-summary span { display: block; color: #59646a; font-size: 16px; }
#travel-with .travel-disclosure > summary { min-height: 62px; padding-block: 13px; font-size: 16px; }
#travel-with .travel-disclosure-body { padding-bottom: 28px; }
#travel-with .travel-disclosure .travel-process p,
#travel-with .travel-disclosure .copy-aside p { font-size: 16px; }

/* A real winter scene leads into the unchanged five-day guide. */
#journey { padding-top: 48px; padding-bottom: 100px; }
#journey .journey-head {
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  align-items: start;
  column-gap: clamp(28px, 3.5vw, 50px);
  row-gap: 27px;
  margin-bottom: 36px;
}
#journey .journey-head > div:first-child { grid-column: 1; grid-row: 1; min-width: 0; }
#journey .journey-head > div:first-child > .eyebrow { margin-bottom: 12px; font-size: 12px; }
#journey #journey-title {
  margin: 0;
  font: 400 clamp(39px, 3.6vw, 51px)/1.12 var(--serif, Georgia, serif);
  letter-spacing: -.025em;
}
#journey #journey-title .zh-title {
  display: block;
  margin-top: 12px;
  font: 300 26px/1.55 var(--sans, system-ui, sans-serif);
  letter-spacing: .04em;
}
#journey .journey-intro {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  max-width: 530px;
  margin: 0 0 3px;
  color: #59676d;
  font-size: 16px;
  line-height: 1.95;
}
#journey .journey-opening-photo {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  margin: 0;
}
#journey .journey-opening-photo > img {
  display: block;
  width: 100%;
  height: clamp(320px, 27vw, 390px);
  object-fit: cover;
  object-position: 50% 80%;
}
#journey .journey-opening-photo > figcaption {
  margin: 0;
  padding-top: 12px;
  color: #667179;
  font: 400 12px/1.8 var(--sans, system-ui, sans-serif);
  letter-spacing: .04em;
}
#journey .journey-head > .journey-route {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  margin: 0;
  padding: 0;
}
#journey .route-heading { gap: 12px; align-items: baseline; flex-wrap: wrap; }
#journey .route-heading p { font-size: 25px; }
#journey .route-heading > span { font-size: 12px; }
#journey .route-stage { height: 135px; margin-top: 12px; }
#journey .route-rail { top: 40px; }
#journey .route-stops { top: 34px; }
#journey .route-stop { min-height: 82px; padding-top: 24px; }
#journey .route-stop strong { font-size: 16px; }
#journey .route-stop small { font-size: 12px; letter-spacing: .025em; }
#journey .route-preview {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px 16px;
  min-height: 244px;
  padding: 18px 20px 14px;
  border-radius: 2px 18px 2px 2px;
}
#journey .route-preview-number b { font-size: 37px; }
#journey .route-preview h3 { margin-bottom: 8px; font-size: 20px; line-height: 1.6; }
#journey .route-preview-copy .route-preview-place { margin-bottom: 7px; font-size: 12px; }
#journey .route-preview-copy .route-preview-note { font-size: 16px; line-height: 1.85; }
#journey .route-preview-copy .route-preview-transport { margin-top: 9px; font-size: 12px; }
#journey .route-day-link { grid-column: 2; min-height: 44px; gap: 12px; font-size: 13px; }
#journey .route-caption { align-items: start; flex-wrap: wrap; gap: 6px 15px; padding-top: 12px; }
#journey .route-controls { margin-left: auto; gap: 14px; }
#journey .route-controls button { min-height: 44px; }

/* Day 01 now contains two distinct photographs, not a repeated opening scene. */
#journey #day01 .day-media-grid--pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: 14px;
  height: auto;
}
#journey #day01 .day-media-grid--pair > figure {
  grid-column: auto;
  grid-row: auto;
  aspect-ratio: 3 / 2;
  min-width: 0;
}
#journey #day01 .day-media-grid--pair > figure img { transform: scale(1.035); }
#journey #day01 .day-media-grid--pair > figure figcaption { max-width: calc(100% - 24px); font-size: 12px; line-height: 1.6; }

/* Host context belongs to the experience list, with the same reading width. */
#experience-design .experience-list + .host-note {
  max-width: none;
  margin: 24px 0 0;
  padding-top: 21px;
  color: #59646a;
  font: 400 16px/1.95 var(--sans, system-ui, sans-serif);
  border-top: 1px solid var(--line);
}
#experience-design .experience-item p { font-size: 16px; line-height: 1.95; }

/* Three small moments, after the practical details; no continuation of the thread. */
#experiences.together-moments {
  padding: 82px 0 88px;
  color: var(--night, #142733);
  background: var(--white, #fffdf9);
}
.together-moments .moments-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 0 50px;
  align-items: end;
  margin-bottom: 37px;
}
.together-moments .moments-heading > .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 16px;
  color: #786348;
  font: 400 12px/1.8 var(--sans, system-ui, sans-serif);
  letter-spacing: .13em;
}
.together-moments .moments-heading h2 {
  margin: 0;
  color: var(--night, #142733);
  font: 300 clamp(28px, 2.6vw, 37px)/1.65 var(--sans, system-ui, sans-serif);
  letter-spacing: .025em;
  text-wrap: balance;
}
.together-moments .moments-heading > p:not(.eyebrow) {
  max-width: 430px;
  margin: 0 0 4px;
  color: #59676d;
  font-size: 16px;
  line-height: 1.95;
}
.together-moments .moment-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.together-moments .moment { min-width: 0; scroll-margin-top: 104px; }
.together-moments .moment-visual,
.together-moments .moment-copy { min-width: 0; }
.together-moments .moment-photo { margin: 0; overflow: hidden; }
.together-moments .moment-photo > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform .75s var(--ease, ease);
}
/* 780 x 1032 original: the 3:2 view is y=128..648, safely above UI at y=790. */
.together-moments .moment--02 .moment-photo > img { object-position: 50% 25%; }
.together-moments .moment-photo > figcaption {
  position: relative;
  margin: 0;
  padding: 11px 0 0;
  color: #667179;
  background: var(--white, #fffdf9);
  font: 400 12px/1.7 var(--sans, system-ui, sans-serif);
  letter-spacing: .02em;
}
.together-moments .moment-copy { padding-top: 19px; }
.together-moments .moment-index {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  color: #786348;
  font: 400 12px/1.6 var(--sans, system-ui, sans-serif);
  letter-spacing: .07em;
}
.together-moments .moment-number {
  flex: 0 0 auto;
  color: #8b7452;
  font: 400 29px/1 var(--serif, Georgia, serif);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.025em;
}
.together-moments .moment-copy h3 {
  margin: 0 0 13px;
  color: var(--night, #142733);
  font: 400 24px/1.65 var(--sans, system-ui, sans-serif);
  letter-spacing: .02em;
  text-wrap: balance;
}
.together-moments .moment-body { margin: 0; color: #59676d; font-size: 16px; line-height: 1.95; }
.together-moments .moment-copy a { text-underline-offset: .2em; }
.together-moments .moment-copy a:focus-visible { outline: 2px solid #846f50; outline-offset: 5px; }

/* Once-only entry is JS opt-in; the unenhanced content is never hidden. */
html.connection-motion .together-moments .moment.is-moment-visible .moment-visual { animation: moment-photo-enter .7s var(--ease, ease) both; }
html.connection-motion .together-moments .moment.is-moment-visible .moment-copy { animation: moment-copy-enter .65s var(--ease, ease) .06s both; }
@keyframes moment-photo-enter { from { opacity: .5; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes moment-copy-enter { from { opacity: .6; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (hover: hover) and (pointer: fine) {
  html.connection-motion .together-moments .moment-photo:hover > img { transform: scale(1.01); }
}

@media (min-width: 861px) and (max-width: 1100px) {
  #journey .journey-head { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 28px; }
  #journey #journey-title { font-size: 40px; }
  #journey .journey-opening-photo > img { height: 350px; }
  #journey .route-preview { gap: 8px 12px; padding-inline: 16px; }
  .together-moments .moment-list { gap: 22px; }
  .together-moments .moment-copy h3 { font-size: 22px; }
}

@media (max-width: 860px) {
  #journey .journey-head { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  #journey .journey-head > div:first-child,
  #journey .journey-intro,
  #journey .journey-opening-photo,
  #journey .journey-head > .journey-route { grid-column: 1; grid-row: auto; }
  #journey .journey-intro { max-width: none; }
  #journey .journey-opening-photo > img { height: 260px; object-position: 50% 80%; }
  #journey .journey-head > .journey-route { margin-top: 0; }
  #journey .route-preview { min-height: 244px; }
  .together-moments .moment-list { gap: 20px; }
  .together-moments .moment-index { gap: 8px; letter-spacing: .025em; }
  .together-moments .moment-copy h3 { font-size: 21px; }
}

@media (max-width: 760px) {
  main#top { --connection-spine-x: 14px; }
  :is(#travel-with, #journey, #experience-design, #included, #stay, #memories) > .shell {
    width: calc(100% - 64px);
    margin-left: 40px;
    margin-right: 24px;
  }
  .connection-node { width: 8px; height: 8px; }
  .connection-node::after { inset: -5px; }
  #travel-with { padding-block: 30px 32px; }
  #travel-with .copy-section-head { grid-template-columns: 1fr; align-items: start; gap: 17px; margin-bottom: 21px; }
  #travel-with .copy-section-head .eyebrow { font-size: 12px; letter-spacing: .07em; }
  #travel-with .copy-section-head .eyebrow::before { width: 22px; flex: 0 0 22px; }
  #travel-with .copy-section-head h2 { font-size: 26px; line-height: 1.6; }
  #travel-with .travel-summary strong { font-size: 18px; margin-bottom: 4px; }
  #travel-with .travel-summary span { font-size: 16px; line-height: 1.8; }
  #travel-with .travel-disclosure > summary { min-height: 64px; grid-template-columns: minmax(0, 1fr) auto 24px; gap: 10px; font-size: 16px; line-height: 1.7; }
  #travel-with .process-count { font-size: 12px; }
  #journey { padding-top: 36px; padding-bottom: 72px; }
  #journey .journey-head { row-gap: 20px; margin-bottom: 28px; }
  #journey .journey-head > div:first-child > .eyebrow { margin-bottom: 10px; }
  #journey #journey-title { font-size: clamp(31px, 8.6vw, 38px); line-height: 1.15; letter-spacing: -.035em; }
  #journey #journey-title .zh-title { margin-top: 10px; font-size: 24px; line-height: 1.5; }
  #journey .journey-intro { margin: 0; font-size: 16px; line-height: 1.85; }
  #journey .journey-opening-photo > img { height: 190px; }
  #journey .journey-opening-photo > figcaption { padding-top: 10px; font-size: 12px; line-height: 1.7; letter-spacing: .015em; }
  #journey .route-heading { gap: 6px 12px; }
  #journey .route-heading p { font-size: 24px; }
  #journey .route-stage { height: 130px; margin-top: 12px; }
  #journey .route-stop { min-height: 80px; padding-inline: 0; }
  #journey .route-stop small { font-size: 12px; letter-spacing: 0; }
  #journey .route-stop strong { font-size: 16px; }
  #journey .route-preview { grid-template-columns: 34px minmax(0, 1fr); gap: 8px 12px; min-height: 276px; padding: 17px 15px 13px; }
  #journey .route-preview-number b { font-size: 34px; }
  #journey .route-preview h3 { font-size: 20px; }
  #journey .route-preview-copy .route-preview-note { font-size: 16px; line-height: 1.85; }
  #journey .route-day-link { min-height: 44px; font-size: 13px; }
  #journey .route-caption { gap: 5px; padding-top: 10px; }
  #journey .route-controls { gap: 16px; }
  #journey #day01 .day-media-grid--pair { grid-template-columns: 1fr; gap: 12px; }
  #journey #day01 .day-media-grid--pair > figure { aspect-ratio: 3 / 2; }
  #journey #day01 .day-media-grid--pair > figure:nth-child(2) { aspect-ratio: 4 / 3; }
  #experience-design .experience-list + .host-note { margin-top: 22px; padding-top: 20px; font-size: 16px; line-height: 1.95; }
  #experiences.together-moments { padding: 62px 0 68px; }
  .together-moments .moments-heading { display: block; margin-bottom: 30px; }
  .together-moments .moments-heading > .eyebrow { margin-bottom: 14px; font-size: 12px; letter-spacing: .08em; }
  .together-moments .moments-heading h2 { font-size: 29px; line-height: 1.65; letter-spacing: .015em; }
  .together-moments .moments-heading > p:not(.eyebrow) { margin-top: 18px; font-size: 16px; }
  .together-moments .moment-list { grid-template-columns: 1fr; gap: 38px; }
  .together-moments .moment-photo > img { aspect-ratio: 3 / 2; }
  .together-moments .moment-photo > figcaption { padding-top: 9px; font-size: 12px; }
  .together-moments .moment-copy { padding-top: 16px; }
  .together-moments .moment-index { gap: 11px; margin-bottom: 10px; font-size: 12px; letter-spacing: .065em; }
  .together-moments .moment-number { font-size: 28px; }
  .together-moments .moment-copy h3 { margin-bottom: 11px; font-size: 24px; }
  .together-moments .moment-body { font-size: 16px; line-height: 1.95; }
}

@media (max-width: 380px) {
  #travel-with .travel-disclosure > summary { gap: 7px; }
  #travel-with .process-count { white-space: normal; max-width: 54px; text-align: right; }
  #journey .route-preview { grid-template-columns: 30px minmax(0, 1fr); gap: 7px 10px; min-height: 335px; padding-inline: 12px; }
  #journey .route-stop small { font-size: 12px; }
  #journey .route-stop strong { font-size: 16px; }
  .together-moments .moments-heading h2 { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-thread,
  .journey-thread *,
  .connection-node,
  .connection-node::after,
  .together-moments .moment,
  .together-moments .moment * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .journey-thread .thread-ink { stroke-dashoffset: 0 !important; }
  .together-moments .moment-visual,
  .together-moments .moment-copy,
  .together-moments .moment-photo > img { opacity: 1 !important; transform: none !important; }
}