/* Home · Since 1840, the arc from London to Jeddah (home-arc.js) */
.heritage .track.arc { height: clamp(132px, 19vh, 186px); direction: ltr; margin-top: clamp(20px, 4vh, 44px); }
.heritage .track.arc .rail, .heritage .track.arc .fill { display: none; }
.arc-map, .arc-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.arc-svg { overflow: visible; }
.arc-svg path { fill: none; stroke-linecap: round; }
.arc-base { stroke: rgba(255,255,255,.2); stroke-width: 1; stroke-dasharray: 2 5; }
.arc-glow { stroke: rgba(143,193,255,.28); stroke-width: 7; transition: stroke-dashoffset 620ms var(--ease-out); }
.arc-fill { stroke: var(--sky); stroke-width: 1.5; transition: stroke-dashoffset 620ms var(--ease-out); }
.arc-beam { stroke: #fff; stroke-width: 2.5; opacity: .95; transition: stroke-dashoffset 620ms var(--ease-out); }
/* London: a filled facade hex; Jeddah is the tile node */
.arc-london { position: absolute; left: 0; top: 0; width: 16px; height: 18px; background: var(--sky); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); z-index: 1; }
.arc-london::after { content: ""; position: absolute; inset: 3px; background: var(--night); clip-path: inherit; }
/* the bead: glides from stop to stop on the year's own clock */
.arc-bead { position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: #fff; z-index: 3; pointer-events: none;
  box-shadow: 0 0 0 4px rgba(143,193,255,.22), 0 0 18px 4px rgba(143,193,255,.75); transition: transform 620ms var(--ease-out); }
.track.arc.at-end .arc-bead { opacity: 0; transition: transform 620ms var(--ease-out), opacity 300ms 500ms; }
/* stops sit on the arc; the current one hides under the bead */
.heritage .track.arc .node { z-index: 2; }
.heritage .track.arc .node.cur { transform: none; }
.heritage .track.arc .node.last.cur { transform: scale(1.5); }
.heritage .track.arc .node span { top: 18px; }
.heritage .track.arc .node.last span { top: 36px; }
/* London and Jeddah labels sit by their marks */
.track.arc .her-ends { position: absolute; inset: 0; margin: 0; pointer-events: none; display: block; }
.track.arc .her-ends span { position: absolute; white-space: nowrap; line-height: 18px; }
@media (max-width: 680px) {
  .heritage .track.arc { height: 128px; }
  .track.arc .her-ends span { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .arc-bead, .arc-fill, .arc-glow, .arc-beam { transition: none; } }
html.rm .arc-bead, html.rm .arc-fill, html.rm .arc-glow, html.rm .arc-beam { transition: none; }