/* Guangzhou journal */
.page-travel-journal header.major > .date {
  display: flex;
  align-items: center;
  gap: 1rem;
  white-space: nowrap;
}

.page-travel-journal header.major > .date::before,
.page-travel-journal header.major > .date::after {
  position: static;
  flex: 1 1 0;
  width: auto;
}

@media screen and (max-width: 480px) {
  .page-travel-journal header.major > .date {
    gap: 0.5rem;
    font-size: 0.8rem;
  }
}

.travel-journal__hero,
.guangzhou-journal__hero {
  margin-bottom: 3rem !important;
  text-align: center;
}

.travel-journal__title,
.guangzhou-journal__location {
  margin: 0.85rem 0 0.35rem;
  color: var(--color-ink-900);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  font-weight: 900;
  letter-spacing: 0.035em;
  line-height: 1;
  text-transform: uppercase;
}

.travel-journal__lede,
.guangzhou-journal__lede {
  max-width: 42rem;
  margin: 0 auto 1.5rem;
  color: var(--color-ink-500);
  text-align: center;
}

.travel-journal__hero-image,
.guangzhou-journal__hero-image {
  position: relative;
  max-height: 27rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.travel-journal__hero-image img,
.guangzhou-journal__hero-image img {
  display: block;
  width: 100%;
  height: clamp(16rem, 34vw, 27rem);
  margin: 0;
  object-fit: cover;
  object-position: var(--hero-focus-x, 50%) var(--hero-focus-y, 58%);
}

.guangzhou-day {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-border-soft);
}

.guangzhou-day:first-of-type {
  margin-top: 0;
}

.guangzhou-day__date {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--color-brand-700);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.guangzhou-day h2 {
  margin: 0 0 0.8rem;
  color: var(--color-ink-900);
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  text-align: left;
}

.guangzhou-day__route {
  margin: 0 0 0.8rem;
  padding: 0.85rem 1rem;
  border-left: 0.22rem solid var(--color-brand-600);
  background: var(--color-brand-faint);
  color: var(--color-ink-600);
  font-size: 0.84rem;
  line-height: 1.6;
  text-align: left;
}

.guangzhou-day__route strong {
  color: var(--color-brand-700);
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guangzhou-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  margin-top: 0.55rem;
}

.guangzhou-route__stop {
  display: inline-flex;
  flex-direction: column;
  color: var(--color-ink-900);
  font-weight: 600;
  line-height: 1.35;
}

.guangzhou-route__stop small {
  color: var(--color-ink-500);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.guangzhou-route i {
  color: var(--color-brand-600);
  font-style: normal;
}

.guangzhou-route__more {
  display: none;
}

@media screen and (min-width: 601px) {
  .guangzhou-day__route--collapsible.is-desktop-wrapped.is-truncated:not(.is-expanded) .guangzhou-route {
    max-height: 2.45rem;
    overflow: hidden;
  }

  .guangzhou-day__route--collapsible.is-desktop-wrapped .guangzhou-route__more {
    display: inline-flex;
    min-height: 2.15rem;
    align-items: center;
    justify-content: center;
    margin-top: 0.55rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--color-brand-600) 30%, #fff);
    border-radius: 999px;
    background: #fff;
    color: var(--color-brand-700);
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
  }
}

.guangzhou-day__note {
  width: 100%;
  max-width: none;
  margin-bottom: 1.4rem;
  color: var(--color-ink-600);
  line-height: 1.75;
  text-align: left;
}

.guangzhou-day .masonry {
  margin-top: 1.25rem;
}

.travel-gallery--compact,
.guangzhou-day--compact .masonry {
  display: grid;
  /* Not 1fr: with content-visibility on the bricks, Chrome sizes grid tracks
     from each brick's contain-intrinsic-size rather than its rendered images,
     and 1fr then equalizes every row to that guess, opening a band of dead
     space under each 4/3 image. Auto rows plus the ratio-based placeholder on
     the bricks below keep row heights equal to the images at every width. */
  grid-auto-rows: auto;
  grid-auto-flow: row dense;
  column-count: initial;
  gap: 1rem;
}

.travel-gallery--compact.travel-gallery--sparse {
  max-width: 42rem;
}

.travel-gallery--compact.mason2,
.guangzhou-day--compact .masonry.mason2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.travel-gallery--compact.mason3,
.guangzhou-day--compact .masonry.mason3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.travel-gallery--compact.mason4,
.guangzhou-day--compact .masonry.mason4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.travel-gallery--compact .brick,
.guangzhou-day--compact .masonry .brick {
  display: block;
  width: 100%;
  margin: 0;
  /* The generic 320px contain-intrinsic-size placeholder feeds grid track
     sizing even for rendered bricks, and a fixed guess can never match the
     width-dependent 4/3 image height, so rows gained dead space below every
     image. A ratio placeholder derives the same height from the track width
     whether the brick is skipped or rendered. */
  aspect-ratio: 4 / 3;
  contain-intrinsic-size: none;
}

.travel-gallery--compact .content-image,
.guangzhou-day--compact .masonry .content-image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--focus-x, 50%) var(--focus-y, 50%);
}

.travel-gallery--compact .travel-gallery__item--tall,
.guangzhou-day--compact .masonry .guangzhou-gallery__brick--tall {
  grid-row: span 2;
  min-height: 0;
  /* Tall collages fill the two rows their neighbours define instead of
     supplying a ratio of their own. */
  aspect-ratio: auto;
}

.travel-gallery--compact .travel-gallery__item--tall .content,
.travel-gallery--compact .travel-gallery__item--tall .content-image,
.guangzhou-day--compact .masonry .guangzhou-gallery__brick--tall .content,
.guangzhou-day--compact .masonry .guangzhou-gallery__brick--tall .content-image {
  height: 100%;
}

.travel-gallery--compact .travel-gallery__item--tall .content-image,
.guangzhou-day--compact .masonry .guangzhou-gallery__brick--tall .content-image {
  aspect-ratio: auto;
}

.guangzhou-day--compact img[src$="sacred-heart-cathedral.webp"],
.guangzhou-day--compact img[src$="guangzhou-ice-cream.webp"],
.guangzhou-day--compact img[src$="yongqingfang-relief.webp"],
.guangzhou-day--compact img[src$="yuexiu-zhenhai-tower.webp"],
.guangzhou-day--compact img[src$="toucan.webp"],
.guangzhou-day--compact img[src$="circus-globe.webp"] {
  --focus-y: 43%;
}

.guangzhou-day--compact img[src$="yuexiu-cat.webp"],
.guangzhou-day--compact img[src$="chimelong-monkey.webp"],
.guangzhou-day--compact img[src$="koala.webp"],
.guangzhou-day--compact img[src$="moxing-summit-couple.webp"],
.guangzhou-day--compact img[src$="baiyun-cable-car.webp"] {
  --focus-y: 47%;
}

.guangzhou-day--compact img[src$="roast-duck-wraps.webp"],
.guangzhou-day--compact img[src$="meal-collage-four.webp"],
.guangzhou-day--compact img[src$="meal-collage-five.webp"] {
  --focus-y: 56%;
}

.guangzhou-day--compact img[src$="chagee-tea.webp"],
.guangzhou-day--compact img[src$="hotpot-dinner.webp"] {
  --focus-y: 28%;
}

.guangzhou-day--compact img[src$="roast-duck-wraps.webp"] {
  --focus-x: 56%;
}

/* The Australia journal uses the same compact, even photo rhythm as
   Guangzhou. Keep faces and full-height subjects inside the 4:3 crops. */
.australia-journal img[src$="city5.jpg"],
.australia-journal img[src$="city8.jpg"],
.australia-journal img[src$="anglesea2.jpg"],
.australia-journal img[src$="canyon2.jpg"],
.australia-journal img[src$="mackenzie3.jpg"],
.australia-journal img[src$="phillip4.jpg"],
.australia-journal img[src$="phillip6.jpg"],
.australia-journal img[src$="observatory1.jpg"],
.australia-journal img[src$="bluemountain3.jpg"],
.australia-journal img[src*="/sydney_bluemountain/zoo1.jpg"],
.australia-journal img[src*="/sydney_bluemountain/zoo2.jpg"] {
  --focus-y: 38%;
}

.australia-journal img[src$="moonlit1.jpg"] {
  --focus-y: 30%;
}

.australia-journal img[src$="worldsquare2.jpg"],
.australia-journal img[src$="camy.jpg"] {
  --focus-y: 22%;
}

.australia-journal .guangzhou-day__route {
  margin-top: 0.15rem;
}

.guangzhou-journal .content-details {
  line-height: 1.35 !important;
}

.guangzhou-journal .content-details h3 {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  line-height: 1.3 !important;
}

.guangzhou-journal .content-details p {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.4 !important;
}

@media screen and (max-width: 600px) {
  #main.australia-journal > article {
    padding-bottom: 2.5rem;
  }

  .australia-journal .travel-journal__hero-image {
    max-height: none;
  }

  .australia-journal .travel-journal__hero-image img {
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
  }

  .travel-journal__hero-image--contain-mobile {
    max-height: none;
  }

  .page-travel-journal .travel-journal__hero-image--contain-mobile img {
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
  }

  #main.guangzhou-journal > article {
    padding-right: 1.1rem;
    padding-left: 1.1rem;
  }

  .guangzhou-journal__hero {
    margin-bottom: 2rem !important;
  }

  .guangzhou-journal__lede {
    max-width: none;
  }

  .guangzhou-journal__hero-image img {
    height: 15.5rem;
  }

  .guangzhou-day {
    margin-top: 2.25rem;
    padding-top: 1.75rem;
  }

  .page-travel-journal #main > .guangzhou-day {
    margin-top: 2.25rem;
    padding-bottom: 0;
    border-top: 1px solid var(--color-border-soft);
  }

  .page-travel-journal #main > .guangzhou-day:first-of-type {
    margin-top: 0;
  }

  /* Guangzhou trial: keep the day divider while removing the large compound
     gap created by the gallery tail, section margin and section padding
     on iPhone Safari. Other journals retain their existing rhythm for now. */
  #main.guangzhou-2026-journal .travel-journal__content > .guangzhou-day {
    padding-top: 1.25rem;
  }

  #main.guangzhou-2026-journal .travel-journal__content > .guangzhou-day:not(:first-of-type) {
    margin-top: 0.75rem;
  }

  /* A fast upward fling at the top of any journal should stop at the page,
     not become Safari's native pull-to-refresh gesture. */
  html.is-travel-journal-scroll-guard,
  html.is-travel-journal-scroll-guard body {
    overscroll-behavior-y: none;
  }

  .guangzhou-day__route,
  .guangzhou-day__note {
    width: 100%;
    max-width: none;
  }

  .guangzhou-day__route {
    padding: 0.8rem 0.85rem;
  }

  .guangzhou-route {
    display: grid;
    gap: 0;
    margin-top: 0.65rem;
    counter-reset: route-stop;
  }

  .guangzhou-route__stop {
    position: relative;
    display: flex;
    min-width: 0;
    padding: 0.05rem 0 0.8rem 1.85rem;
    counter-increment: route-stop;
  }

  .guangzhou-route__stop::before {
    content: counter(route-stop);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-brand-600);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1;
  }

  .guangzhou-route__stop:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.35rem;
    bottom: 0;
    left: 0.65rem;
    width: 1px;
    background: color-mix(in srgb, var(--color-brand-600) 35%, transparent);
  }

  .guangzhou-route__stop:last-child {
    padding-bottom: 0.1rem;
  }

  .guangzhou-route i {
    display: none;
  }

  .guangzhou-day__route--collapsible.is-truncated:not(.is-expanded) .guangzhou-route > .guangzhou-route__stop:nth-of-type(n + 5),
  .guangzhou-day__route--collapsible.is-truncated:not(.is-expanded) .guangzhou-route > i:nth-of-type(n + 4) {
    display: none;
  }

  .guangzhou-route__more {
    display: inline-flex;
    min-height: 2.35rem;
    align-items: center;
    justify-content: center;
    margin: 0.65rem 0 0 1.85rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-brand-600) 35%, #fff);
    border-radius: 999px;
    background: #fff;
    color: var(--color-brand-700);
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
  }

  .travel-gallery--compact,
  .travel-gallery--compact.mason2,
  .travel-gallery--compact.mason3,
  .travel-gallery--compact.mason4,
  .guangzhou-day--compact .masonry,
  .guangzhou-day--compact .masonry.mason2,
  .guangzhou-day--compact .masonry.mason3,
  .guangzhou-day--compact .masonry.mason4 {
    display: grid;
    grid-template-columns: none;
    grid-auto-rows: auto;
    grid-auto-columns: min(76vw, 18rem);
    grid-auto-flow: column;
    column-count: initial;
    gap: 0.75rem;
    margin-right: -1.1rem;
    padding: 0 1.1rem 0.65rem 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
  }

  .travel-gallery--compact.travel-gallery--sparse {
    max-width: none;
  }

  .journal-gallery-shell {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
  }

  .journal-gallery-shell > .travel-gallery--compact,
  .guangzhou-day--compact .journal-gallery-shell > .masonry {
    order: 2;
    min-width: 0;
  }

  .journal-scroll-cue {
    position: static;
    z-index: 2;
    display: flex;
    order: 1;
    width: max-content;
    min-height: 2rem;
    align-self: flex-end;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    max-height: 2rem;
    margin: 0 0 0.45rem;
    padding: 0.28rem 0.6rem;
    border: 1px solid rgba(18, 138, 134, 0.24);
    border-radius: 999px;
    background: rgba(18, 138, 134, 0.075);
    box-shadow: 0 0.2rem 0.6rem rgba(3, 14, 30, 0.07);
    color: var(--color-brand-700);
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    line-height: 1;
    opacity: 0.92;
    text-transform: uppercase;
    animation: journal-scroll-cue-shake 3s ease-in-out 2;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }

  .journal-scroll-cue[hidden] {
    display: none;
  }

  .journal-scroll-cue i {
    font-size: 1rem;
    font-style: normal;
  }

  .journal-scroll-cue.is-dismissed {
    animation: none;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    opacity: 0;
    transform: translateX(0.4rem);
    visibility: hidden;
  }

  .travel-gallery--compact.has-scroll-cue,
  .guangzhou-day--compact .masonry.has-scroll-cue {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.25rem), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.25rem), transparent 100%);
  }

  .travel-gallery--compact .brick,
  .guangzhou-day--compact .masonry .brick {
    display: block;
    width: auto;
    margin: 0;
    break-inside: avoid;
    scroll-snap-align: start;
    /* Undo the desktop dead-space fix's 4/3 brick placeholder here: on phones
       the caption is a static ~4rem bar below the image, so the brick must be
       image-height plus that bar. A forced 4/3 box leaves no room and clips the
       caption. Return to content-driven sizing with the shared 320px intrinsic
       guess for content-visibility-skipped bricks. */
    aspect-ratio: auto;
    contain-intrinsic-size: auto 320px;
  }

  .travel-gallery--compact .travel-gallery__item--tall,
  .guangzhou-day--compact .masonry .guangzhou-gallery__brick--tall {
    grid-row: auto;
  }

  .travel-gallery--compact .travel-gallery__item--tall .content,
  .guangzhou-day--compact .masonry .guangzhou-gallery__brick--tall .content {
    height: auto;
  }

  .travel-gallery--compact .travel-gallery__item--tall .content-image,
  .guangzhou-day--compact .masonry .guangzhou-gallery__brick--tall .content-image {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .travel-gallery--compact .content,
  .guangzhou-day--compact .masonry .content {
    min-width: 0;
    background: #0a1b1f;
  }

  .guangzhou-journal .content-overlay {
    display: none;
  }

  .guangzhou-journal .content-details,
  .guangzhou-journal .content:hover .content-details {
    position: static;
    top: auto;
    left: auto;
    display: flex;
    height: 4rem;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    padding: 0.7rem 0.8rem 0.75rem;
    background: #0a1b1f;
    opacity: 1;
    transform: none;
  }

  .guangzhou-journal .content-details h3,
  .guangzhou-journal .content-details p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .guangzhou-journal .content-details h3 {
    margin-bottom: 0.3rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }

  .guangzhou-journal .content-details p {
    font-size: 0.67rem;
  }
}

/* Travel journal navigation. travel-nav.js publishes the toolbar's measured
   height as --travel-nav-offset so native anchor jumps clear the single-row
   rail precisely; the rem values are no-JS fallbacks. */
[id^="trip-section-"] {
  scroll-margin-top: var(--travel-nav-offset, 7rem);
}

.travel-section-nav {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 2rem;
  padding: 0.6rem 0.85rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}

.travel-section-nav > strong {
  flex: 0 0 auto;
  color: #333;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.travel-jump-groups {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.55rem 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.travel-jump-groups::-webkit-scrollbar {
  display: none;
}

.travel-jump-group a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* Travel groups stay open and use a non-clickable city/country label. */
.travel-jump-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.45rem;
  position: static;
}

.travel-jump-group__label {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  background: #fff;
  color: #333;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.travel-emoji {
  display: inline-block;
  width: auto;
  min-width: 1.1em;
  margin-right: 0.15em;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1em;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: -0.08em;
}

a.travel-jump-group__label {
  color: #333;
  text-decoration: none;
}

.travel-jump-group > div {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 0.35rem;
  margin-top: 0;
}

.travel-jump-group + .travel-jump-group {
  padding-left: 0.75rem;
  border-left: 1px solid rgba(0, 0, 0, 0.12);
}

.travel-section-nav strong {
  flex: 0 0 auto;
  color: #333;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.travel-section-nav > div {
  display: flex;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.travel-section-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.35rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  white-space: nowrap;
  font-size: 0.8rem;
}

.travel-section-nav a.is-active {
  border-color: #333;
  background: #333;
  color: #fff;
}

/* On phones and tablets the rail remains a continuation of the dark journal
   opening after it sticks. Keeping one surface avoids a white toolbar flashing
   against the black header while the menu control is being re-homed. */
@media screen and (max-width: 980px) {
  [id^="trip-section-"] {
    scroll-margin-top: var(--travel-nav-offset, 4rem);
  }

  .travel-section-nav {
    top: 0;
    width: 100%;
    height: 3.5rem;
    min-height: 3.5rem;
    gap: 0;
    margin-bottom: 1.25rem;
    padding: 0 0.75rem 0 0 !important;
    box-sizing: border-box;
    overflow: hidden;
    background: rgba(25, 30, 35, 0.98);
    border-bottom-color: rgba(255, 255, 255, 0.14);
    box-shadow: none;
    transition: background-color var(--motion-standard) ease,
      border-color var(--motion-standard) ease,
      box-shadow var(--motion-standard) ease;
  }

  .travel-section-nav::after {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    width: 1.75rem;
    height: 100%;
    background: linear-gradient(90deg, rgba(25, 30, 35, 0), rgba(25, 30, 35, 0.98) 82%);
    content: "";
    pointer-events: none;
    transition: background var(--motion-standard) ease;
  }

  .travel-section-nav.is-stuck {
    background: rgba(25, 30, 35, 0.98);
    border-bottom-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 0.3rem 0.8rem rgba(3, 14, 30, 0.22);
  }

  .travel-section-nav.is-stuck::after {
    background: linear-gradient(90deg, rgba(25, 30, 35, 0), rgba(25, 30, 35, 0.98) 82%);
  }

  .page-travel-journal #wrapper > #navPanelToggle {
    opacity: 0;
    pointer-events: none;
  }

  .travel-section-nav--with-menu #navPanelToggle,
  .travel-section-nav--with-menu #navPanelToggle.alt {
    position: static;
    top: auto;
    right: auto;
    display: flex;
    width: 3.5rem;
    height: 3.5rem;
    min-width: 3.5rem;
    min-height: 3.5rem;
    flex: 0 0 3.5rem;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
    padding: 0;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #fff;
    font-size: 0;
    transition: color var(--motion-standard) ease,
      border-color var(--motion-standard) ease;
  }

  .travel-section-nav--with-menu.is-stuck #navPanelToggle,
  .travel-section-nav--with-menu.is-stuck #navPanelToggle.alt {
    border-right-color: rgba(255, 255, 255, 0.16);
    background: transparent;
    color: #fff;
  }

  .travel-section-nav--with-menu #navPanelToggle::before {
    margin-right: 0;
    font-size: 1rem;
  }

  .travel-section-nav::-webkit-scrollbar {
    display: none;
  }

  .travel-section-nav > strong {
    display: none;
  }

  .travel-section-nav > div,
  .travel-jump-groups {
    width: max-content;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 0.45rem;
  }

  .travel-section-nav > .travel-jump-groups {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    align-self: stretch;
    padding: 0.25rem 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .travel-jump-group,
  .travel-jump-group > div {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }

  .travel-jump-group + .travel-jump-group {
    padding-left: 0.45rem;
  }

  .travel-jump-group__label,
  .travel-section-nav a {
    min-height: 3rem;
    padding: 0.4rem 0.7rem;
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    transition: background-color var(--motion-standard) ease,
      border-color var(--motion-standard) ease,
      color var(--motion-standard) ease;
  }

  .travel-section-nav a.is-active {
    border-color: #11807d;
    background: #11807d;
    color: #fff;
  }

  .travel-section-nav.is-stuck .travel-jump-group__label,
  .travel-section-nav.is-stuck a {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
  }

  .travel-section-nav.is-stuck a.is-active {
    border-color: #11807d;
    background: #11807d;
    color: #fff;
  }

  .travel-section-nav .travel-jump-group + .travel-jump-group {
    border-left-color: rgba(255, 255, 255, 0.18);
    transition: border-color var(--motion-standard) ease;
  }

  .travel-section-nav.is-stuck .travel-jump-group + .travel-jump-group {
    border-left-color: rgba(255, 255, 255, 0.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .travel-section-nav,
  .travel-section-nav::after,
  .travel-section-nav--with-menu #navPanelToggle,
  .travel-jump-group__label,
  .travel-section-nav a,
  .travel-section-nav .travel-jump-group + .travel-jump-group {
    transition: none;
  }
}

@keyframes journal-scroll-cue-shake {
  0%, 62%, 100% { transform: translateX(0); }
  68% { transform: translateX(-0.22rem); }
  73% { transform: translateX(0.28rem); }
  78% { transform: translateX(-0.14rem); }
  83% { transform: translateX(0.1rem); }
  88% { transform: translateX(0); }
}

@media screen and (min-width: 601px) {
  .journal-scroll-cue {
    display: none;
  }
}

/* Route bundle: journal-nav:end */

/* Japan editorial title and lower banner crop. */
.japan-journal .japan-journal__intro {
  margin-bottom: 1.75rem;
  text-align: left;
}

.japan-journal .japan-journal__eyebrow {
  margin: 0 0 0.65rem;
  color: var(--color-brand-600);
  font: 900 0.72rem/1.2 var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.japan-journal .japan-journal__title {
  margin: 0 0 1rem;
  font: 400 clamp(3.5rem, 7vw, 6.5rem)/0.9 "Raleway", sans-serif;
  text-transform: none;
}

.japan-journal .japan-journal__intro > .date {
  display: block;
  margin: 0 0 0.85rem;
  font: 800 0.78rem/1.4 var(--font-display);
  text-transform: uppercase;
}

.japan-journal .japan-journal__intro .guangzhou-journal__lede {
  margin: 0;
  text-align: left;
}

.japan-journal .guangzhou-journal__hero-image img.journal-banner {
  height: clamp(16rem, 28vw, 22rem);
  object-fit: cover;
  object-position: 50% 100%;
}

@media screen and (max-width: 600px) {
  .japan-journal .guangzhou-journal__hero-image img.journal-banner {
    height: 10rem;
  }

}

/* Route bundle: journal-japan:end */