.travel-map { margin: -3px 0 34px; }
.travel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.travel-heading .eyebrow { margin: 0 0 6px; letter-spacing: 1.6px; }
.travel-title { margin: 0; font: 400 34px/1.45 var(--serif); letter-spacing: 1px; }
.travel-stats { color: var(--muted); font-size: 12px; margin: 0 0 6px; white-space: nowrap; }
.travel-stats strong { font: 27px var(--serif); color: var(--accent); margin-right: 3px; }
.travel-stat-divider { margin: 0 12px; color: #b5afa0; }
.travel-body { display: grid; grid-template-columns: minmax(0, 1fr) 255px; gap: 28px; padding: 25px; border: 1px solid var(--line); border-radius: 12px; background: #f3f1e9; }
.travel-canvas { min-width: 0; position: relative; align-self: center; width: 100%; max-width: 760px; justify-self: center; }
.map-surface { position: relative; width: 100%; aspect-ratio: 940/650; overflow: hidden; border-radius: 6px; cursor: default; }
.map-surface.can-pan { cursor: grab; touch-action: none; }
.map-surface.can-pan:active { cursor: grabbing; }
.map-surface > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-region { fill: #e4e3d8; stroke: #faf9f5; stroke-width: .85px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.map-region.visited { fill: #dab998; }
.map-region.selected { fill: #cba07e; }
.map-city-dot { fill: #a64f34; stroke: #fffaf2; stroke-width: .6px; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-pins { position: absolute; inset: 0; pointer-events: none; }
.map-pin { position: absolute; width: 44px; height: 44px; padding: 0; transform: translate(-50%,-50%); pointer-events: auto; display: grid; place-items: center; z-index: 2; }
.pin-dot { display: block; width: 11px; height: 11px; border: 2px solid #fffaf2; border-radius: 50%; background: #a64f34; box-shadow: 0 0 0 5px #a64f3418; }
.map-cluster .pin-dot { width: 27px; height: 27px; border-width: 2px; display: grid; place-items: center; color: #fffaf2; font-size: 11px; font-weight: 600; box-shadow: 0 0 0 5px #a64f3413; }
.pin-label { position: absolute; top: 37px; left: 50%; transform: translateX(-50%); padding: 2px 6px; white-space: nowrap; font-size: 11px; font-weight: 500; line-height: 1.5; background: #faf9f5eb; border-radius: 3px; color: #5c4d3e; pointer-events: auto; }
.map-pin:hover, .map-pin:focus-visible, .map-pin.selected { z-index: 5; }
.map-pin:hover .pin-dot, .map-pin.selected .pin-dot { background: #733c29; box-shadow: 0 0 0 6px #a64f342a; }
.map-pin.selected .pin-label { background: #733c29; color: #fffaf2; }
.map-controls { position: absolute; left: 0; top: 0; display: flex; align-items: center; border: 1px solid #dedacb; background: #faf9f5ee; border-radius: 7px; overflow: hidden; }
.map-control, .map-reset { height: 34px; min-width: 34px; padding: 0 10px; font-size: 19px; line-height: 1; }
.map-control + .map-control, .map-reset { border-left: 1px solid #e4dfd2; }
.map-reset { font-size: 11px; }
.map-controls button:hover { background: #e8e3d7; }
.map-legend { position: absolute; left: 0; bottom: 29px; display: flex; flex-direction: column; gap: 4px; color: #827968; font-size: 10px; pointer-events: none; }
.map-key { display: flex; align-items: center; gap: 7px; }
.map-key::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.map-legend-note { color: #a29989; }
.map-inset { position: absolute; right: 0; bottom: 28px; width: 65px; height: 100px; padding: 4px; border: 1px solid #d9d5c8; background: #f3f1e9; border-radius: 3px; pointer-events: none; }
.map-inset svg { width: 100%; height: 76px; }
.map-inset span { display: block; text-align: center; font-size: 8px; color: #8d8576; line-height: 1.5; }
.map-inset .map-region { fill: #d2d0c5; stroke-width: .4px; stroke: #b7b3a7; }
.map-help { font-size: 10px; color: #948b7b; text-align: center; margin: 10px 0 0; }
.travel-detail { display: flex; flex-direction: column; justify-content: center; border-left: 1px solid #e2ddce; padding-left: 28px; min-width: 0; }
.travel-detail-kicker { font-size: 11px; margin: 0 0 6px; color: #887b67; }
.travel-detail h3 { margin: 0 0 17px; font: 400 25px/1.4 var(--serif); }
.travel-cover { width: 100%; height: auto; aspect-ratio: 1.15; object-fit: cover; border-radius: 5px; background: var(--surface); }
.travel-cover-button { padding: 0; display: block; width: 100%; }
.travel-detail-note { font-size: 11px; line-height: 1.9; color: #8a7e6c; margin: 15px 0 10px; }
.travel-open { padding: 10px 0; display: flex; justify-content: space-between; gap: 12px; align-items: center; text-align: left; font-size: 12px; color: #9f5037; border-top: 1px solid #e0d9cb; margin-top: auto; }
.travel-open span { white-space: nowrap; font-size: 10px; }
.travel-destinations { display: flex; gap: 7px; flex-wrap: wrap; padding: 18px 0 0; }
.destination-button { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; line-height: 1.5; padding: 7px 12px; border: 1px solid var(--line); border-radius: 6px; color: #70685c; }
.destination-button[aria-pressed=true] { color: #fffaf2; background: #6b5947; border-color: #6b5947; }
.destination-button:hover { border-color: #bca58e; }
.destination-count { font-size: 10px; opacity: .6; }
.travel-pending { padding-top: 12px; }
.pending-button { font-size: 11px; padding: 3px 0; color: var(--muted); border-bottom: 1px solid transparent; }
.pending-button[aria-pressed=true], .pending-button:hover { color: var(--accent); border-color: #d9b49d; }
.map-cluster-picker { position: absolute; top: 43px; left: 0; z-index: 8; width: 216px; max-height: 65%; overflow-y: auto; border: 1px solid #ddd5c5; border-radius: 8px; padding: 10px 14px; background: #fffdf7f5; box-shadow: 0 8px 24px #3c281514; }
.map-picker-head { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: var(--muted); }
.map-picker-close { font-size: 20px; padding: 0 4px; }
.map-picker-city { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; padding: 11px 0; border-bottom: 1px solid #ebe6db; text-align: left; }
.map-picker-city:last-child { border: 0; }
.map-picker-city span { color: var(--muted); font-size: 10px; }
.map-picker-city:hover { color: var(--accent); }
.album.travel-mode { border-top: 0; padding-top: 36px; }
.travel-mode .album-heading { scroll-margin-top: 105px; }
@media (max-width:1100px) {
 .travel-body { grid-template-columns: minmax(0,1fr) 215px; gap: 20px; padding: 20px; }
 .travel-detail { padding-left: 20px; }
 .travel-detail h3 { font-size: 23px; }
}
@media (max-width:760px) {
 .album.travel-mode { padding-top: 27px; }
 .travel-map { margin-bottom: 27px; }
 .travel-heading { margin-bottom: 17px; gap: 8px; align-items: center; }
 .travel-heading .eyebrow { font-size: 10px; letter-spacing: 1px; margin-bottom: 4px; }
 .travel-title { font-size: 25px; letter-spacing: .5px; }
 .travel-stats { font-size: 9px; margin: 0; text-align: right; white-space: normal; width: 81px; line-height: 1.9; }
 .travel-stats strong { font-size: 21px; }
 .travel-stat-divider { display: block; height: 0; overflow: hidden; margin: 0; }
 .travel-body { display: flex; flex-direction: column; gap: 20px; padding: 15px 12px 0; border-radius: 9px; }
 .travel-canvas { width: 100%; }
 .map-surface { aspect-ratio: 940/690; }
 .pin-label { font-size: 10px; padding: 1px 4px; }
 .map-control,.map-reset { height: 32px; min-width: 32px; }
 .map-help { margin: 11px 0 0; font-size: 9px; }
 .map-legend { font-size: 9px; bottom: 26px; }
 .map-legend-note { display: none; }
 .map-inset { width: 46px; height: 73px; bottom: 27px; padding: 2px; }
 .map-inset svg { height: 54px; }
 .map-inset span { font-size: 7px; }
 .travel-detail { border-left: 0; border-top: 1px solid #e2ddce; padding: 15px 2px; display: grid; grid-template-columns: 78px minmax(0,1fr); grid-template-rows: auto auto auto; column-gap: 14px; justify-content: initial; }
 .travel-detail > .travel-cover, .travel-cover-button { grid-column: 1; grid-row: 1/4; align-self: center; }
 .travel-cover { aspect-ratio: 1; border-radius: 4px; }
 .travel-detail-kicker { grid-column: 2; font-size: 9px; margin: 0 0 2px; }
 .travel-detail h3 { grid-column: 2; font-size: 21px; margin: 0 0 3px; }
 .travel-detail-note { grid-column: 2; font-size: 10px; line-height: 1.7; margin: 0; }
 .travel-open { grid-column: 1/3; font-size: 11px; margin-top: 13px; padding: 9px 0 0; }
 .travel-open span { font-size: 10px; }
 .travel-destinations { padding-top: 13px; flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: thin; scrollbar-color: #ddd5c6 transparent; padding-bottom: 8px; }
 .destination-button { font-size: 11px; padding: 7px 10px; white-space: nowrap; flex-shrink: 0; }
 .destination-count { font-size: 9px; }
 .travel-pending { padding-top: 4px; }
 .pending-button { font-size: 10px; }
 .travel-mode .album-heading { scroll-margin-top: 119px; }
 .map-cluster-picker { width: 190px; }
}
@media (prefers-reduced-motion:reduce) { .travel-mode { scroll-behavior: auto; } }