:root {
  --ink: #171717;
  --muted: #6f6d68;
  --paper: #f7f5ef;
  --card: #fffefb;
  --line: #dfdcd3;
  --accent: #b8452f;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid rgba(223, 220, 211, .9);
  background: rgba(247, 245, 239, .92);
  backdrop-filter: blur(16px);
}
.topbar-inner {
  width: min(calc(100% - 40px), var(--max));
  min-height: 64px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand { margin-right: auto; color: var(--ink); font-weight: 760; text-decoration: none; }
.nav { display: flex; gap: 20px; }
.nav a { color: var(--muted); font-size: 14px; text-decoration: none; }
.nav a:hover { color: var(--ink); }
.language-button {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--ink);
  background: var(--card);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.gallery-shell { width: min(calc(100% - 40px), var(--max)); margin: auto; padding: 74px 0 100px; }
.eyebrow { margin: 0 0 13px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1 { margin: 0; font: 500 clamp(42px, 6vw, 72px)/1.05 Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
.intro { max-width: 680px; margin: 22px 0 0; color: var(--muted); font: 19px/1.65 Georgia, "Times New Roman", serif; }
.filters {
  margin: 50px 0 46px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.gallery-map-paused .filters { display: none; }
.filter-section + .filter-section { margin-top: 18px; }
.filter-label-row { display: flex; align-items: center; margin-bottom: 9px; }
.filter-label { display: flex; flex: 1; align-items: center; gap: 10px; color: #5e5b55; font: 600 18px/1 "Caveat", "Comic Sans MS", cursive; letter-spacing: .03em; }
.filter-label::after { content: ""; flex: 1; height: 1px; background: #77736b; opacity: .28; }
.year-buttons, .location-buttons { display: flex; flex-wrap: wrap; gap: 7px; }
.pencil-button {
  padding: 5px 13px;
  border: 2px solid var(--pencil, #716e67);
  border-radius: 20px;
  color: var(--pencil, #716e67);
  background: transparent;
  font: 600 17px/1.25 "Caveat", "Comic Sans MS", cursive;
  cursor: pointer;
  filter: url(#sketch-filter);
  transition: color .18s ease, background .18s ease, transform .18s ease;
  white-space: nowrap;
}
.pencil-button:hover, .pencil-button.active { color: #fff; background: var(--pencil, #716e67); transform: scale(1.04); }
.year-buttons .pencil-button { padding: 6px 15px; font-size: 19px; }
.location-buttons { max-height: 41px; overflow: hidden; transition: max-height .3s ease; }
.location-buttons.expanded { max-height: 1000px; }
.location-filter-row { display: flex; align-items: flex-start; gap: 10px; }
.location-filter-row .location-buttons { flex: 1; }
.location-toggle { display: grid; place-items: center; width: 27px; height: 27px; margin-left: 9px; border: 2px solid #716e67; border-radius: 50%; color: #5e5b55; background: transparent; cursor: pointer; filter: url(#sketch-filter); transition: color .2s ease, background .2s ease, transform .3s ease; }
.location-toggle:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
.location-toggle.expanded { transform: rotate(180deg); }
.travel-map { display: none; }
.travel-map-stage {
  position: relative;
  width: min(100%, 1080px);
  aspect-ratio: 2 / 1;
  margin: 0 auto;
  overflow: visible;
  border: 4px double #8d7138;
  border-radius: 9px;
  outline: 1px solid rgba(117,87,37,.34);
  outline-offset: 5px;
  background-color: #ddcda2;
  background-image: radial-gradient(circle at 20% 18%, rgba(255,249,218,.78), transparent 30%), radial-gradient(circle at 76% 68%, rgba(157,111,51,.18), transparent 37%), linear-gradient(rgba(96,71,37,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(96,71,37,.075) 1px, transparent 1px), repeating-linear-gradient(7deg, rgba(91,65,30,.025) 0 1px, transparent 1px 7px);
  background-size: 100% 100%, 100% 100%, 12.5% 25%, 12.5% 25%, auto;
  box-shadow: 0 15px 35px rgba(73,54,28,.16), inset 0 0 0 5px rgba(240,221,166,.72), inset 0 0 54px rgba(82,54,21,.2);
}
.travel-map-stage::before {
  content: "";
  position: absolute;
  inset: 4.5% 2.2%;
  background: #6f684d;
  opacity: .54;
  -webkit-mask: url("/gallery/world-map.svg") center / 100% 100% no-repeat;
  mask: url("/gallery/world-map.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}
.travel-map-stage::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(103,74,31,.48); border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(248,231,184,.56); pointer-events: none; }
.map-routes { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.map-route-rope, .map-route-thread { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map-route-rope { stroke: rgba(92,57,27,.72); stroke-width: 3.2; filter: drop-shadow(0 1px 1px rgba(59,39,20,.25)); }
.map-route-thread { stroke: rgba(223,191,116,.82); stroke-width: 1.15; }
.map-route-knot { fill: #76502a; stroke: #e0bd70; stroke-width: .8; vector-effect: non-scaling-stroke; }
.map-route-preview { opacity: .66; stroke-dasharray: 3 2; }
.map-route-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: none; cursor: pointer; vector-effect: non-scaling-stroke; }
html.map-editing .map-route-hit { pointer-events: stroke; }
.map-route-rope.selected { stroke: #672e22; stroke-width: 5; filter: drop-shadow(0 0 3px rgba(232,180,75,.88)); }
.map-route-thread.selected { stroke: #ffe3a1; stroke-width: 1.8; }
.map-route-knot.selected { fill: #672e22; stroke: #ffe3a1; stroke-width: 1.2; }
.map-editor-link { position: absolute; left: 20px; bottom: 17px; z-index: 8; display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; color: #6f5428; opacity: .78; filter: drop-shadow(0 2px 2px rgba(73,54,28,.14)); transition: opacity .16s ease, transform .16s ease, background .16s ease; }
.map-editor-link:hover, .map-editor-link:focus-visible { color: #4d3518; background: rgba(244,226,178,.68); opacity: 1; outline: 1px solid rgba(103,74,31,.5); transform: scale(1.06); }
.map-compass { display: block; width: 44px; height: 44px; pointer-events: none; }
.map-vector-layer { position: absolute; inset: 4.5% 2.2%; z-index: 1; width: 95.6%; height: 91%; overflow: hidden; opacity: .54; filter: sepia(.18); pointer-events: none; }
.travel-map-stage.map-configured::before { display: none; }
.map-view-nav { position: absolute; top: 17px; left: 50%; z-index: 9; display: flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid rgba(103,74,31,.42); border-radius: 999px; color: #614821; background: rgba(238,222,180,.9); box-shadow: 0 3px 10px rgba(73,54,28,.12); font: 700 12px/1 Georgia, "Times New Roman", serif; transform: translateX(-50%); backdrop-filter: blur(5px); }
.map-view-nav[hidden] { display: none; }
.map-view-nav button { display: grid; width: 23px; height: 23px; padding: 0; place-items: center; border: 1px solid rgba(103,74,31,.34); border-radius: 50%; color: inherit; background: rgba(255,247,217,.72); cursor: pointer; }
.map-view-nav small { color: rgba(97,72,33,.62); font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.travel-map-stage[data-map-level]:not([data-map-level="0"]) .map-ship { display: none; }
.map-ship { position: absolute; left: 32%; top: 55%; z-index: 4; width: 49px; color: #694c24; opacity: .74; transform: rotate(-8deg); filter: drop-shadow(0 1px 1px rgba(255,242,200,.7)); pointer-events: none; }
.map-corner { position: absolute; z-index: 4; width: 30px; height: 30px; border-color: rgba(103,74,31,.58); pointer-events: none; }
.map-corner.nw { top: 11px; left: 11px; border-top: 2px solid; border-left: 2px solid; }
.map-corner.ne { top: 11px; right: 11px; border-top: 2px solid; border-right: 2px solid; }
.map-corner.sw { bottom: 11px; left: 11px; border-bottom: 2px solid; border-left: 2px solid; }
.map-corner.se { right: 11px; bottom: 11px; border-right: 2px solid; border-bottom: 2px solid; }
.map-zone { position: absolute; z-index: 5; transform: translate(-50%, -100%); }
.map-zone::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,65,31,.24) 0, rgba(119,85,38,.1) 36%, transparent 70%);
  transform: translate(-50%, -50%);
  animation: map-glow 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes map-glow { 50% { opacity: .62; transform: translate(-50%, -50%) scale(1.18); } }
.map-zone-trigger {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 36px;
  padding: 0;
  border: 0;
  color: var(--map-marker-color, #913b2e);
  background: transparent;
  filter: sepia(.16) drop-shadow(0 2px 2px rgba(55,35,23,.52)) drop-shadow(0 0 1px rgba(224,187,101,.72));
  cursor: pointer;
  transform: rotate(var(--pin-tilt, 0deg)) scale(var(--map-pin-scale, 1));
  transform-origin: 50% 100%;
  transition: transform .18s ease, color .18s ease, filter .18s ease;
}
.map-zone-trigger svg { display: block; width: 100%; height: 100%; overflow: visible; }
.map-zone-trigger .pin-needle { stroke: #57452f; stroke-width: 1.9; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.map-zone-trigger .pin-body, .map-zone-trigger .pin-cap { fill: currentColor; stroke: #a9823f; stroke-width: 1.35; vector-effect: non-scaling-stroke; }
.map-zone-trigger .pin-rim { fill: none; stroke: rgba(239,205,126,.72); stroke-width: .8; vector-effect: non-scaling-stroke; }
.map-zone-trigger .pin-shine { fill: rgba(244,215,145,.25); }
.map-zone-trigger .pin-wear { fill: none; stroke: rgba(75,48,24,.28); stroke-width: .7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.map-zone-trigger:hover, .map-zone-trigger:focus-visible { color: color-mix(in srgb, var(--map-marker-color, #913b2e) 82%, #21170f); filter: sepia(.2) drop-shadow(0 3px 4px rgba(55,35,23,.58)) drop-shadow(0 0 2px rgba(220,176,82,.84)); transform: rotate(var(--pin-tilt, 0deg)) scale(calc(var(--map-pin-scale, 1) * 1.16)); outline: none; }
.map-zone.selected .map-zone-trigger { filter: sepia(.12) drop-shadow(0 0 5px #d9a73c) drop-shadow(0 0 8px #d9a73c); }
.map-popover {
  position: absolute;
  top: calc(100% + 13px);
  left: 50%;
  z-index: 12;
  width: min(330px, 38vw);
  padding: 12px;
  border: 1px solid rgba(107,77,34,.58);
  border-radius: 5px;
  background: rgba(238,222,180,.98);
  box-shadow: 0 14px 34px rgba(67,48,23,.23), inset 0 0 24px rgba(119,84,34,.08);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -5px);
  transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
  pointer-events: none;
}
.map-popover::before { content: ""; position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; border: solid rgba(107,77,34,.58); border-width: 1px 0 0 1px; background: rgba(238,222,180,.98); transform: translateX(-50%) rotate(45deg); }
.map-popover::after { content: ""; position: absolute; top: -14px; left: 0; width: 100%; height: 14px; }
.map-zone:hover .map-popover, .map-zone:focus-within .map-popover { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; }
.map-popover-title { margin: 0 0 8px; color: #5e4523; font: 700 13px/1.2 Georgia, "Times New Roman", serif; letter-spacing: .04em; }
.map-zoom-action { float: right; margin: -4px -3px -3px 9px; padding: 4px 7px; border: 1px solid rgba(105,75,32,.32); border-radius: 999px; color: #75502a; background: rgba(255,247,218,.72); font: 700 10px/1.2 system-ui, sans-serif; cursor: pointer; }
.map-bubble-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 224px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.map-place-row { display: grid; grid-template-columns: minmax(0, 1fr) 27px; gap: 4px; min-width: 0; }
.map-place-row.no-footprint { grid-template-columns: minmax(0, 1fr); }
.map-album-bubble { display: flex; min-width: 0; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid rgba(105,75,32,.25); border-radius: 999px; color: #544329; background: rgba(248,237,204,.78); font: 600 13px/1.15 "Caveat", "Comic Sans MS", cursive; text-align: left; cursor: pointer; transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease; }
.map-album-bubble::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--bubble-color, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bubble-color, var(--accent)) 18%, transparent); }
.map-album-bubble .map-place-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-album-date { flex: 0 0 auto; color: rgba(84,67,41,.6); font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.map-album-count { flex: 0 0 auto; color: rgba(84,67,41,.62); font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.map-album-bubble:hover, .map-album-bubble:focus-visible { color: #fff; border-color: var(--bubble-color, var(--accent)); background: var(--bubble-color, var(--accent)); transform: translateY(-1px); outline: none; }
.map-album-bubble:hover::before, .map-album-bubble:focus-visible::before { background: #fff; box-shadow: none; }
.map-album-bubble:hover .map-album-count, .map-album-bubble:focus-visible .map-album-count { color: rgba(255,255,255,.78); }
.map-footprint-action { display: grid; place-items: center; width: 27px; height: 27px; padding: 0; border: 1px solid rgba(105,75,32,.36); border-radius: 50%; color: #6b5029; background: rgba(248,237,204,.88); cursor: pointer; transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease; }
.map-footprint-action svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.map-footprint-action:hover, .map-footprint-action:focus-visible { color: #fff; border-color: #913b2e; background: #913b2e; transform: translateY(-1px); outline: none; }
.map-editor { position: fixed; left: 22px; bottom: 22px; z-index: 90; display: none; width: 286px; padding: 16px; border: 1px solid rgba(99,69,29,.62); border-radius: 8px; color: #4f3d25; background: rgba(239,223,182,.97); box-shadow: 0 16px 42px rgba(53,38,19,.28), inset 0 0 24px rgba(116,80,30,.08); backdrop-filter: blur(10px); }
html.map-editing .map-editor { display: block; }
.map-editor h2 { margin: 0 0 4px; font: 700 18px/1.15 Georgia, "Times New Roman", serif; }
.map-editor-note { margin: 0 0 12px; color: #756445; font-size: 12px; line-height: 1.45; }
.map-editor-selection { overflow: hidden; margin: 0 0 10px; color: #7d3e2d; font: 700 13px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.map-editor-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.map-editor-fields label { display: grid; gap: 4px; color: #6d5d42; font-size: 11px; }
.map-editor-fields input { width: 100%; box-sizing: border-box; padding: 7px 8px; border: 1px solid rgba(99,69,29,.38); border-radius: 5px; color: #493720; background: rgba(255,249,226,.7); font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.map-editor-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 11px; }
.map-editor-actions button { min-height: 32px; padding: 6px 8px; border: 1px solid rgba(99,69,29,.42); border-radius: 5px; color: #594426; background: rgba(250,238,202,.82); font-size: 12px; cursor: pointer; }
.map-editor-actions button:hover, .map-editor-actions button:focus-visible { color: #fff; border-color: #865036; background: #865036; outline: none; }
.map-editor-route-tools { display: grid; gap: 7px; margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(99,69,29,.22); }
.map-editor-route-tools label { display: flex; align-items: center; gap: 7px; color: #665438; font-size: 12px; }
.map-editor-route-tools select { width: 100%; box-sizing: border-box; padding: 7px 8px; border: 1px solid rgba(99,69,29,.38); border-radius: 5px; color: #493720; background: rgba(255,249,226,.7); font-size: 12px; }
.map-editor-route-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.map-editor-route-actions button { min-height: 32px; padding: 6px 8px; border: 1px solid rgba(99,69,29,.42); border-radius: 5px; color: #594426; background: rgba(250,238,202,.82); font-size: 12px; cursor: pointer; }
.map-editor-route-actions button.active { color: #fff; border-color: #865036; background: #865036; }
.map-editor-status { min-height: 16px; margin: 9px 0 0; color: #786748; font-size: 11px; line-height: 1.35; }
html.map-editing .map-zone-trigger { cursor: grab; touch-action: none; }
html.map-editing .map-zone.route-source .map-zone-trigger { filter: sepia(.12) drop-shadow(0 0 5px #d9a73c) drop-shadow(0 0 8px #d9a73c); transform: rotate(var(--pin-tilt, 0deg)) scale(1.14); }
html.map-editing.map-dragging, html.map-editing.map-dragging * { cursor: grabbing !important; user-select: none !important; }
html.map-editor-shell, html.map-editor-shell body { min-height: 100%; overflow: hidden; background: #d8c89d; }
html.map-editor-shell .topbar,
html.map-editor-shell .gallery-shell > .eyebrow,
html.map-editor-shell .gallery-shell > h1,
html.map-editor-shell .gallery-shell > .intro,
html.map-editor-shell .location-filter-row,
html.map-editor-shell #albums,
html.map-editor-shell .date-rail,
html.map-editor-shell #back-to-top { display: none !important; }
html.map-editor-shell .gallery-shell { width: auto; max-width: none; margin: 0; padding: 18px 18px 18px 326px; }
html.map-editor-shell .filters { display: block; margin: 0; padding: 0; border: 0; }
html.map-editor-shell .travel-map { display: block !important; margin: 0; }
html.map-editor-shell .travel-map-stage { width: min(100%, calc((100vh - 36px) * 2)); margin: 0 auto; }
html.map-editor-shell .map-editor { top: 18px; bottom: auto; max-height: calc(100vh - 36px); box-sizing: border-box; overflow-y: auto; }
.map-editor-v2 { width: 354px; padding: 14px; font-family: system-ui, sans-serif; }
.map-editor-v2 h2, .map-editor-v2 h3, .map-editor-v2 p { margin: 0; }
.map-editor-v2 h3 { color: #5e4523; font: 700 12px/1.2 Georgia, "Times New Roman", serif; }
.map-editor-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.map-editor-heading p { margin-top: 4px; color: #756445; font-size: 10px; line-height: 1.4; }
.map-editor-v2 button { min-height: 30px; padding: 5px 8px; border: 1px solid rgba(99,69,29,.42); border-radius: 5px; color: #594426; background: rgba(250,238,202,.82); font-size: 11px; cursor: pointer; }
.map-editor-v2 button:hover:not(:disabled), .map-editor-v2 button:focus-visible, .map-editor-v2 button.active { color: #fff; border-color: #865036; background: #865036; outline: none; }
.map-editor-v2 button:disabled { cursor: not-allowed; opacity: .45; }
.map-editor-v2 label { display: grid; gap: 4px; min-width: 0; color: #6d5d42; font-size: 10px; }
.map-editor-v2 input, .map-editor-v2 select { width: 100%; box-sizing: border-box; padding: 6px 7px; border: 1px solid rgba(99,69,29,.38); border-radius: 5px; color: #493720; background: rgba(255,249,226,.78); font-size: 11px; }
.map-editor-v2 select[size] { padding: 3px; }
.map-editor-view { margin-bottom: 9px; }
.map-editor-global { display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: end; gap: 8px; margin-bottom: 9px; }
.map-editor-global input { padding: 0; }
.map-editor-global output { padding-bottom: 2px; color: #7d3e2d; font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }
.map-editor-viewport { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; gap: 6px; margin-bottom: 9px; }
.map-editor-viewport span { overflow: hidden; color: #745d3b; font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.map-editor-toolbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 9px; }
.map-editor-card { display: grid; gap: 7px; margin-top: 8px; padding: 9px; border: 1px solid rgba(99,69,29,.22); border-radius: 6px; background: rgba(255,248,220,.3); }
.map-editor-card .map-editor-selection { margin: 0; }
.map-editor-pin-actions { display: grid; grid-template-columns: 1.5fr 1fr; gap: 6px; }
.map-editor-footer { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 10px; }
.map-editor-footer p { color: #786748; font-size: 10px; line-height: 1.35; }
html.map-editor-shell .gallery-shell { padding-left: 394px; }
html.map-editing .map-editor-link, html.map-editing .map-zone .map-popover { display: none; }
html.map-editing.map-routing, html.map-editing.map-routing * { cursor: crosshair !important; user-select: none !important; }
html.map-editing .travel-map-stage[data-map-level]:not([data-map-level="0"]) { touch-action: none; }
html.map-editing .travel-map-stage[data-map-level]:not([data-map-level="0"]), html.map-editing .travel-map-stage[data-map-level]:not([data-map-level="0"]) .map-vector-layer { cursor: grab; }
html.map-editing.map-panning, html.map-editing.map-panning * { cursor: grabbing !important; user-select: none !important; }
.timeline { position: relative; max-width: 1120px; margin: 0 auto; }
.album-sentinel { height: 1px; }
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom, #716e67 0, #716e67 8px, transparent 8px, transparent 13px);
  filter: url(#sketch-filter);
}
.year-marker { position: relative; z-index: 2; margin: 46px 0 28px; text-align: center; }
.year-marker:first-child { margin-top: 0; }
.year-marker span { display: inline-block; padding: 5px 20px; color: #5d5a54; background: var(--paper); font: 600 25px/1.2 "Caveat", "Comic Sans MS", cursive; letter-spacing: .08em; }
.album { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr); align-items: center; margin: 0 0 62px; }
.album-content { min-width: 0; padding: 0 18px; }
.album-left .album-content { grid-column: 1; grid-row: 1; text-align: right; }
.album-right .album-content { grid-column: 3; grid-row: 1; text-align: left; }
.album-head { margin-bottom: 14px; }
.album-date { color: var(--accent); font: 700 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.album-title-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.album-left .album-title-row { justify-content: flex-end; }
.album-right .album-title-row { justify-content: flex-start; }
.album h2 { margin: 0; font: 500 clamp(22px, 2.5vw, 29px)/1.15 Georgia, "Times New Roman", serif; letter-spacing: -.02em; }
.footprint-trigger { display: inline-grid; flex: 0 0 auto; place-items: center; width: 27px; height: 27px; padding: 0; border: 1px solid rgba(113,110,103,.42); border-radius: 8px; color: #716e67; background: transparent; cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease; }
.footprint-trigger svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.footprint-trigger:hover, .footprint-trigger:focus-visible { color: #fff; border-color: var(--accent); background: var(--accent); transform: translateY(-1px); outline: none; }
.album-share { display: inline-grid; flex: 0 0 auto; place-items: center; width: 27px; height: 27px; padding: 0; border: 1px solid rgba(113,110,103,.42); border-radius: 8px; color: #716e67; background: transparent; cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease; }
.album-share svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.album-share:hover, .album-share:focus-visible { color: #fff; border-color: var(--accent); background: var(--accent); transform: translateY(-1px); outline: none; }
.album-share.success { color: #fff; border-color: #247a46; background: #247a46; }
.album-share.error { color: #fff; border-color: #a33124; background: #a33124; }
.timeline-spacer { position: relative; grid-column: 2; grid-row: 1; align-self: stretch; }
.timeline-dot { position: absolute; top: 18px; left: 50%; width: 16px; height: 16px; border: 3px solid #716e67; border-radius: 50%; background: var(--paper); transform: translateX(-50%); filter: url(#sketch-filter); }
.timeline-line { position: absolute; top: 25px; width: 30px; height: 2px; background: #716e67; filter: url(#sketch-filter); }
.album-left .timeline-line { right: 48px; }
.album-right .timeline-line { left: 48px; }
.album-desc { min-width: 0; padding: 18px; color: var(--muted); font: 15px/1.8 Georgia, "Times New Roman", serif; }
.album-left .album-desc { grid-column: 3; grid-row: 1; text-align: left; }
.album-right .album-desc { grid-column: 1; grid-row: 1; text-align: right; }
.album-description { margin: 0; }
.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.photo-button { position: relative; min-width: 0; aspect-ratio: 4 / 3; height: auto; padding: 0; overflow: hidden; border: 0; border-radius: 4px; background: #e6e2d8; box-shadow: 0 2px 9px rgba(30,28,24,.08); cursor: zoom-in; }
.photo-button img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, filter .35s ease; }
.photo-button:hover img, .photo-button:focus-visible img { transform: scale(1.035); filter: contrast(1.04); }
.photo-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.footprint { position: absolute; left: 50%; z-index: 1; width: 14px; height: 22px; pointer-events: none; opacity: .42; }
.footprint svg { width: 100%; height: 100%; fill: none; stroke: #716e67; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; filter: url(#sketch-filter); }
.footprint.left { transform: translateX(-29px) rotate(-15deg); }
.footprint.right { transform: translateX(15px) rotate(15deg) scaleX(-1); }
.album.highlight-flash .album-content { border-radius: 8px; animation: album-highlight 1.6s ease; }
@keyframes album-highlight {
  0% { background: transparent; box-shadow: none; }
  22% { background: rgba(184,69,47,.09); box-shadow: 0 0 0 4px rgba(184,69,47,.18); }
  100% { background: transparent; box-shadow: none; }
}
.back-to-top { position: fixed; right: 24px; bottom: 24px; z-index: 45; display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid #716e67; border-radius: 50%; color: #5e5b55; background: rgba(247,245,239,.94); box-shadow: 0 7px 22px rgba(30,28,24,.13); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); filter: url(#sketch-filter); transition: color .2s ease, background .2s ease, border-color .2s ease, opacity .25s ease, visibility .25s ease, transform .25s ease; }
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { color: #fff; background: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.date-rail {
  position: fixed;
  top: 50%;
  right: 14px;
  z-index: 44;
  display: none;
  width: 82px;
  max-height: min(76vh, 720px);
  padding: 12px 7px 12px 9px;
  border: 1px solid rgba(113,110,103,.16);
  border-radius: 17px;
  background: rgba(247,245,239,.94);
  box-shadow: 0 9px 28px rgba(30,28,24,.09);
  opacity: 0;
  visibility: hidden;
  transform: translate(14px, -50%);
  transition: opacity .24s ease, visibility .24s ease, transform .24s ease;
}
.date-rail.ready { opacity: 1; visibility: visible; transform: translate(0, -50%); }
.date-rail::before { content: ""; position: absolute; top: 18px; right: 16px; bottom: 18px; width: 1px; background: rgba(113,110,103,.18); }
.date-rail-scroll { position: relative; z-index: 1; max-height: calc(min(76vh, 720px) - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(113,110,103,.3) transparent; }
.date-rail-scroll::-webkit-scrollbar { width: 4px; }
.date-rail-scroll::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(113,110,103,.3); }
.date-rail-year { padding: 4px 0 8px; }
.date-rail-year + .date-rail-year { margin-top: 2px; }
.date-rail-year-button { display: block; width: 51px; margin: 0 0 5px; padding: 0; border: 0; color: rgba(93,90,84,.55); background: transparent; font: 500 22px/1.1 "Caveat", "Comic Sans MS", cursive; text-align: right; cursor: pointer; transition: color .18s ease; }
.date-rail-year-button:hover, .date-rail-year-button:focus-visible, .date-rail-year.active .date-rail-year-button { color: var(--accent); outline: none; }
.date-rail-dates { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-right: 3px; }
.date-rail-date { position: relative; width: 35px; height: 5px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.date-rail-date::after { content: ""; position: absolute; top: 1px; right: 0; width: 24px; height: 3px; border-radius: 3px; background: rgba(113,110,103,.38); transition: width .18s ease, background .18s ease; }
.date-rail-date:hover::after, .date-rail-date:focus-visible::after { width: 30px; background: rgba(93,90,84,.68); }
.date-rail-date.active::after { width: 35px; background: var(--accent); }
.date-rail-date:focus-visible { outline: none; }
.date-rail-tooltip { position: fixed; z-index: 70; padding: 5px 8px; border-radius: 4px; color: #fff; background: #353535; font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transform: translate(5px, -50%); transition: opacity .14s ease, visibility .14s ease, transform .14s ease; }
.date-rail-tooltip.visible { opacity: 1; visibility: visible; transform: translate(0, -50%); }
.empty { padding: 80px 0; color: var(--muted); text-align: center; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  grid-template-columns: 80px minmax(0, 1fr) 80px;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 28px;
  color: #fff;
  background: rgba(12, 12, 11, .94);
}
.lightbox.open { display: grid; }
.lightbox-image { align-self: center; justify-self: center; grid-column: 2; max-width: 100%; max-height: calc(100vh - 100px); object-fit: contain; }
.lightbox-nav { grid-row: 1; border: 0; color: #fff; background: transparent; font-size: 38px; cursor: pointer; opacity: .68; }
.lightbox-nav:hover { opacity: 1; }
.lightbox-prev { grid-column: 1; }
.lightbox-next { grid-column: 3; }
.lightbox-caption { grid-column: 1 / -1; margin: 0; color: #c9c7c2; font-size: 13px; text-align: center; }
.lightbox-close { position: absolute; top: 18px; right: 22px; width: 42px; height: 42px; border: 0; color: #fff; background: transparent; font-size: 30px; cursor: pointer; }
.footprint-modal { position: fixed; inset: 0; z-index: 110; display: none; place-items: center; padding: 28px; background: rgba(18,18,17,.78); backdrop-filter: blur(12px); }
.footprint-modal.open { display: grid; }
.footprint-dialog { position: relative; display: grid; justify-items: center; width: min(360px, calc(100vw - 40px)); max-height: calc(100vh - 40px); }
.footprint-phone { width: min(310px, 76vw); padding: 7px; border-radius: 34px; background: #161616; box-shadow: 0 24px 70px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.12); }
.footprint-screen { overflow: hidden; border-radius: 28px; background: #222; }
.footprint-image { display: block; width: 100%; max-height: calc(100vh - 130px); object-fit: contain; }
.footprint-home { width: 30%; height: 4px; margin: 7px auto 1px; border-radius: 999px; background: rgba(255,255,255,.36); }
.footprint-caption { margin: 10px 0 0; padding: 5px 13px; border-radius: 999px; color: #f5f3ed; background: rgba(18,18,17,.68); font-size: 13px; text-align: center; }
.footprint-close { position: absolute; top: -10px; right: -6px; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #fff; background: rgba(18,18,17,.76); font-size: 24px; line-height: 1; cursor: pointer; }
.footprint-close:hover, .footprint-close:focus-visible { background: var(--accent); outline: none; }
@media (min-width: 1240px) {
  .date-rail { display: block; }
}
@media (min-width: 821px) {
  html.map-editor-shell .travel-map { display: block; }
  .location-filter-row { display: none; }
}
@media (max-width: 820px) {
  .map-editor { display: none !important; }
  .timeline::before, .timeline-spacer, .timeline-dot, .timeline-line { display: none; }
  .footprint { display: none; }
  .year-marker { text-align: left; }
  .year-marker span { padding-left: 0; }
  .album, .album-left, .album-right { display: block; margin-bottom: 54px; padding-left: 0; }
  .album-content, .album-desc, .album-left .album-content, .album-right .album-content, .album-left .album-desc, .album-right .album-desc { padding: 0; text-align: left; }
  .album-left .album-title-row, .album-right .album-title-row { justify-content: flex-start; }
  .album-desc { margin-top: 15px; }
  .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lightbox { grid-template-columns: 44px minmax(0, 1fr) 44px; padding: 16px; }
}
@media (max-width: 560px) {
  .topbar-inner, .gallery-shell { width: min(calc(100% - 28px), var(--max)); }
  .nav a:first-child { display: none; }
  .gallery-shell { padding-top: 50px; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .lightbox { grid-template-columns: 34px minmax(0, 1fr) 34px; }
  .lightbox-nav { font-size: 28px; }
}