.hj-route {
  --route-night:#122646;
  --route-accent:#ffd194;
  margin-block:clamp(28px,6vw,82px) clamp(24px,4vw,52px);
  scroll-margin-top:84px;
}
.hj-route-header {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:20px;
  margin-bottom:22px;
}
.hj-route-header h2 {
  margin:0;
  color:var(--hj-blue);
  font:700 clamp(21px,3.1vw,43px)/1.18 DrukTextWideTT,Montserrat,Arial,sans-serif;
}
.hj-route-name { white-space:nowrap }
.hj-route-arrow { color:var(--hj-orange); font-family:Montserrat,Arial,sans-serif }
.hj-route-header p:not(.hj-kicker,.hj-route-distance) {
  margin:10px 0 0;
  max-width:66ch;
  font-size:15px;
  line-height:1.55;
}
.hj-route-distance {
  display:grid;
  justify-items:end;
  gap:2px;
  margin:0;
  color:var(--hj-blue);
  white-space:nowrap;
}
.hj-route-distance strong { font:700 clamp(24px,4vw,56px)/1 DrukTextWideTT,Montserrat,Arial,sans-serif }
.hj-route-distance small { font:700 .46em Montserrat,Arial,sans-serif }
.hj-route-distance>span { font-size:12px; font-weight:600 }

.hj-route-board {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(268px,31%);
  overflow:hidden;
  border-radius:19px;
  background:var(--route-night);
  color:#fff;
  box-shadow:0 19px 48px #101f3a23;
}
.hj-route-visual { display:grid; grid-template-rows:1fr auto; min-width:0 }
.hj-route-map {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  aspect-ratio:8/5;
  align-self:center;
  margin:0;
  background:radial-gradient(ellipse at 50% 45%,#425c77 0%,#203956 53%,#122646 85%);
}
.hj-route-map canvas,.hj-route-poster,.hj-route-poster img,.hj-route-poster svg,
.hj-route-pins,.hj-route-pin-leaders {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.hj-route-poster img { object-fit:contain }
.hj-route-poster path {
  fill:none;
  stroke:#ffac64;
  stroke-width:3.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 1px #17212d);
}
.hj-route-poster-position { fill:#f57929; stroke:#fff0ce; stroke-width:2; vector-effect:non-scaling-stroke }
.hj-route-map [hidden],.hj-route-visual [hidden] { display:none }
.hj-route-map canvas {
  cursor:grab;
  outline:none;
  touch-action:pan-y;
}
.hj-route-map canvas:focus-visible { box-shadow:inset 0 0 0 2px var(--route-accent) }
.hj-route-map canvas:active { cursor:grabbing }
.hj-route-pins,.hj-route-pin-leaders { pointer-events:none }
.hj-route-pin-leaders line { stroke:#ffdba4; stroke-width:1; opacity:.66 }
.hj-route-landmark,.hj-route-position,.hj-route-pin { position:absolute; top:0; left:0 }
.hj-route-landmark {
  padding:3px 6px;
  white-space:nowrap;
  border:1px solid #fae1b755;
  border-radius:5px;
  background:#142846de;
  color:#fff3db;
  font:600 clamp(9px,1.05vw,12px)/1.3 Montserrat,Arial,sans-serif;
}
.hj-route-position {
  width:12px;
  height:12px;
  border-radius:50%;
  border:2px solid #fff0ce;
  background:#f57929;
  box-shadow:0 0 0 3px #dd7f3266;
}
.hj-route-pin {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  padding:0;
  border:1px solid #f8dfbb;
  border-radius:50%;
  color:#fff4db;
  background:#162b4be8;
  cursor:pointer;
  pointer-events:auto;
}
.hj-route-pin span {
  display:grid;
  place-items:center;
  width:14px;
  height:9px;
  border:1px solid currentColor;
  border-radius:2px;
}
.hj-route-pin span::before { content:""; width:4px; height:4px; border:1px solid currentColor; border-radius:50% }
.hj-route-pin[aria-current="step"],.hj-route-pin:hover { color:#182b44; background:var(--route-accent) }
.hj-route-map[data-flight] .hj-route-pins,.hj-route-map[data-flight] .hj-route-pin-leaders { opacity:0 }
.hj-route-map[data-flight] .hj-route-pin { pointer-events:none; visibility:hidden }
.hj-route-tools {
  position:absolute;
  z-index:3;
  inset:10px 10px auto;
  display:flex;
  justify-content:space-between;
  gap:6px;
  pointer-events:none;
}
.hj-route-tools-view { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px }
.hj-route-tools button {
  min-height:33px;
  padding:5px 8px;
  border:1px solid #a9bdd66b;
  border-radius:6px;
  background:#142746ed;
  color:#fff;
  font:600 11px/1.2 Montserrat,Arial,sans-serif;
  white-space:nowrap;
  cursor:pointer;
  pointer-events:auto;
}
.hj-route-tools button:hover,.hj-route-tools button[aria-pressed="true"] { background:#f7ecd6; color:#172b45 }
.hj-route-tools [data-route-action="closer"],.hj-route-tools [data-route-action="farther"] {
  width:33px;
  padding:0;
  font-size:17px;
}
.hj-route-tools button:focus-visible,.hj-route-pin:focus-visible,.hj-route-photo-nav button:focus-visible,.hj-route-story-photo a:focus-visible {
  outline:2px solid var(--route-accent);
  outline-offset:2px;
}
.hj-route-attribution {
  position:absolute;
  z-index:3;
  right:7px;
  bottom:6px;
  margin:0;
  color:#e0e8f2;
  font-size:9px;
  line-height:1.4;
}
.hj-route-attribution details { position:relative; min-width:20px; min-height:20px; border-radius:4px; background:#132746db }
.hj-route-attribution details[open] { padding:4px 24px 4px 6px }
.hj-route-attribution summary {
  position:absolute;
  inset:0 0 auto auto;
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  font:700 12px Georgia,serif;
  cursor:pointer;
  list-style:none;
}
.hj-route-attribution summary::-webkit-details-marker { display:none }
.hj-route-attribution a { text-decoration:underline }
.hj-route-instructions {
  padding:8px 12px 9px;
  color:#d7e2f0;
  border-top:1px solid #adc5e125;
  font-size:11px;
  text-align:center;
}
.hj-route-touch { display:none }
.hj-route-details {
  display:grid;
  align-content:center;
  gap:13px;
  padding:clamp(15px,2vw,27px);
  border-inline-start:1px solid #d8e8fc22;
  background:#152b4a;
  min-width:0;
}
.hj-route-story-photo a {
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:4/3;
  border:1px solid #91abc855;
  border-radius:7px;
  background:#0f223e;
}
.hj-route-story-photo img { width:100%; height:100%; object-fit:contain; display:block; border-radius:inherit }
.hj-route-story-photo a > span {
  position:absolute;
  right:5px;
  bottom:5px;
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border-radius:50%;
  background:#142746e8;
  color:#fff;
}
.hj-route-stories { display:grid; min-width:0 }
.hj-route-story { visibility:hidden; grid-area:1/1; align-self:start }
.hj-route-story[data-current] { visibility:visible }
.hj-route-story h3 { margin:0 0 6px; font:700 clamp(16px,1.45vw,21px)/1.2 Montserrat,Arial,sans-serif }
.hj-route-story p { margin:0; color:#e0eaf6; font-size:clamp(12px,1.12vw,14px); line-height:1.52 }
.hj-route-photo-year { display:block; margin-top:7px; color:#d3be9e; font-size:10px }
.hj-route-profile { padding-top:9px; border-top:1px solid #d8e8fc2e }
.hj-route-profile-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 8px }
.hj-route-profile-heading label { font-size:11px; font-weight:700 }
.hj-route-profile-heading output { color:var(--route-accent); font-size:12px; font-variant-numeric:tabular-nums }
.hj-route-profile svg { display:block; width:100%; height:38px; margin-top:3px; cursor:crosshair }
.hj-route-profile-line { fill:none; stroke:var(--route-accent); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke }
.hj-route-profile-marker { fill:#fff4d6; stroke:#903719; stroke-width:1.6; vector-effect:non-scaling-stroke }
.hj-route-profile input { display:block; width:100%; margin:0; accent-color:var(--route-accent); cursor:ew-resize }
.hj-route-profile p { margin:4px 0 0; color:#cad8e9; font-size:10px; line-height:1.35 }
.hj-route-photo-nav[hidden] { display:none }
.hj-route-photo-nav { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:7px }
.hj-route-photo-nav span {
  color:#d7e3f0; font-size:12px; font-variant-numeric:tabular-nums;
}
.hj-route-photo-nav button {
  min-width:38px; min-height:36px; padding:0;
  border:1px solid #91abc855; border-radius:5px;
  background:#162c4b; color:#fff; font:20px/1 Arial,sans-serif; cursor:pointer;
}
.hj-route-photo-nav button:hover { background:#f7ecd6; color:#162b49 }
.hj-route-photo-dialog[open] {
  display:grid;
  grid-template-rows:minmax(0,1fr);
  width:min(94vw,1120px);
  height:min(91vh,880px);
  height:min(91dvh,880px);
  overflow:hidden;
}
.hj-route-photo-dialog figure {
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  min-height:0;
}
.hj-route-dialog-media { min-height:0; background:#0b172a; touch-action:pan-y pinch-zoom }
.hj-route-dialog-media img { height:100%; max-height:none }
.hj-route-photo-dialog .hj-route-dialog-footer {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:12px 20px;
  padding:14px 20px;
  text-align:left;
  border-top:1px solid #ffffff28;
}
.hj-route-dialog-caption { display:grid; gap:3px }
.hj-route-dialog-caption strong { font-size:clamp(15px,2vw,19px); line-height:1.2 }
.hj-route-dialog-caption span { color:#d7e3f0; font-size:12px }
.hj-route-dialog-nav { display:flex; align-items:center; gap:8px }
.hj-route-dialog-nav span { min-width:4ch; text-align:center; font-size:12px; font-variant-numeric:tabular-nums }
.hj-route-photo-dialog .hj-route-show-on-map {
  width:auto;
  min-height:44px;
  padding:6px 13px;
  border-color:var(--route-accent);
  border-radius:7px;
  background:var(--route-accent);
  color:#172b45;
  font:700 13px/1.25 Montserrat,Arial,sans-serif;
}
.hj-route-photo-dialog .hj-route-show-on-map:hover { background:#ffe7c1 }
@media(max-width:580px) {
  .hj-route-photo-dialog .hj-route-dialog-footer {
    grid-template-columns:1fr auto;
    gap:8px;
    padding:10px 11px;
  }
  .hj-route-dialog-caption { grid-column:1/-1 }
  .hj-route-dialog-nav { gap:5px }
  .hj-route-photo-dialog .hj-route-show-on-map { padding-inline:8px; font-size:11px }
}
@media(pointer:coarse) {
  .hj-route-mouse { display:none }
  .hj-route-touch { display:inline }
}
@media(max-width:760px) {
  .hj-route-board { grid-template-columns:minmax(0,1fr) }
  .hj-route-map { aspect-ratio:1.37 }
  .hj-route-details {
    gap:11px;
    padding:12px 13px;
    border-inline-start:0;
    border-top:1px solid #d8e8fc22;
  }
  .hj-route-story-photo a { aspect-ratio:auto; height:clamp(155px,51vw,250px) }
  .hj-route-profile svg { height:29px }
}
@media(max-width:639px) {
  .hj-route-header { gap:10px; margin-bottom:14px }
  .hj-route-header h2 { font-size:clamp(18px,4.9vw,24px) }
  .hj-route-header p:not(.hj-kicker,.hj-route-distance) { font-size:13px }
  .hj-route-distance strong { font-size:20px }
  .hj-route-distance>span { font-size:9px }
  .hj-route-board { border-radius:12px }
  .hj-route-tools { inset:6px 6px auto; gap:4px }
  .hj-route-tools button { min-height:32px; padding:4px 6px; font-size:10px }
  .hj-route-tools [data-route-action="closer"],.hj-route-tools [data-route-action="farther"] { width:30px; font-size:16px }
  .hj-route-pin { width:28px; height:28px }
  .hj-route-instructions { padding-inline:8px; font-size:10px }
}
@media(max-width:355px) {
  .hj-route-tools [data-route-action="flight"] { min-width:0; align-self:start }
}