.travel-gallery { padding: 2px 0 8px; }
.travel-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.travel-heading-copy { min-width: 0; }
.travel-heading { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 400; }
.travel-subtitle { margin: 9px 0 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.travel-route { flex: 0 0 160px; height: 44px; }
.travel-flight { display: block; position: relative; width: 160px; height: 44px; pointer-events: none; }
.travel-flight-line { display: block; width: 100%; height: 100%; overflow: visible; stroke: var(--flame-teal); stroke-width: 1; opacity: .48; }
.travel-flight-line path { stroke-dasharray: 2 5; }
.travel-flight-line circle { fill: var(--paper); stroke: var(--green); }
.travel-flight-plane { position: absolute; left: 0; top: 0; width: 14px; height: 14px; color: var(--flame-teal); opacity: 0; animation: travel-flight-pass 7.5s ease-in-out 400ms both; }
.travel-flight-plane svg { display: block; width: 100%; height: 100%; fill: currentColor; stroke: var(--green); stroke-width: .4; }
@keyframes travel-flight-pass {
  0% { opacity: 0; transform: translate(1px, 27px) rotate(63deg); }
  14% { opacity: .85; }
  50% { opacity: .85; transform: translate(75px, 8px) rotate(83deg); }
  86% { opacity: .85; }
  100% { opacity: 0; transform: translate(145px, 5px) rotate(99deg); }
}
.travel-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 19px; margin: 17px 0 19px; padding: 0 0 7px; border-bottom: 1px solid var(--line); }
.travel-filter { min-height: 44px; padding: 8px 0; color: var(--muted); font-size: 15px; line-height: 1.3; }
.travel-filter[aria-pressed="true"] { color: var(--ink); }
.travel-filter[aria-pressed="true"]::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; margin: 0 7px 3px 0; background: var(--flame-teal); }
.travel-filter:is(:hover, :focus-visible), .travel-back:is(:hover, :focus-visible), .travel-photo-step:is(:hover, :focus-visible) { color: var(--green); }
.travel-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 25px 20px; }
.travel-photo-card { display: block; width: 100%; min-width: 0; padding: 0; text-align: left; }
.travel-image-frame { display: block; width: 100%; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--line) 42%, var(--paper)); }
.travel-photo { display: block; width: 100%; height: auto; }
.travel-photo-card .travel-image-frame { transition: opacity 180ms ease; }
.travel-photo-card:is(:hover, :focus-visible) .travel-image-frame { opacity: .88; }
.travel-photo-caption { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 11px; }
.travel-photo-place { color: var(--ink); font-size: 17px; line-height: 1.3; }
.travel-photo-note { color: var(--muted); font-size: 14px; line-height: 1.4; }
.travel-image-frame.is-unavailable { display: grid; place-items: center; min-height: 150px; }
.travel-photo-unavailable { padding: 22px; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.5; }
.travel-empty { margin: 22px 0 30px; color: var(--muted); font-size: 17px; line-height: 1.5; }
.travel-view { outline: none; }
.travel-view-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: -7px 0 10px; padding-right: 28px; }
.travel-back { min-height: 44px; padding: 9px 0; font-size: 15px; color: var(--green); }
.travel-photo-count { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums;  }
.travel-view-figure { margin: 0; }
.travel-view-figure .travel-image-frame { width: min(100%, calc(min(65svh, 640px) * var(--travel-photo-ratio, .75))); margin-inline: auto; background: none; }
.travel-view-figure .travel-photo { width: 100%; height: 100%; object-fit: contain; }
.travel-view-caption { margin: 0; }
.travel-photo-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; padding-top: 8px; border-top: 1px solid var(--line); }
.travel-photo-step { min-height: 44px; padding: 9px 0; font-size: 15px; color: var(--muted); }
.travel-photo-step.is-previous { grid-column: 1; text-align: left; }
.travel-photo-step.is-next { grid-column: 2; text-align: right; }
@media (max-width: 500px) {
  .travel-heading-row { align-items: flex-start; gap: 8px; }
  .travel-heading { font-size: 25px; }
  .travel-route { flex-basis: 70px; height: 44px; overflow: hidden; }
  .travel-flight { transform: scale(.43); transform-origin: 0 50%; }
  .travel-subtitle { max-width: 225px; font-size: 15px; }
  .travel-filters { gap: 0 17px; margin-top: 13px; margin-bottom: 18px; }
  .travel-photo-grid { grid-template-columns: minmax(0, 1fr); gap: 25px; }
  .travel-view-figure .travel-image-frame { width: min(100%, calc(62svh * var(--travel-photo-ratio, .75))); }
}
@media (prefers-reduced-motion: reduce) {
  .travel-flight-plane { animation: none; opacity: .7; transform: translate(75px, 8px) rotate(83deg); }
  .travel-photo-card .travel-image-frame { transition: none; }
}