/* ── iv · the roads — travels timeline (real photos + topographic spine) ──────
 * A journey down the page: each stop is a place, marked on a contour-ring node,
 * threaded by a topographic spine. Reuses tomrankin tokens; reveal-safe.
 * ------------------------------------------------------------------------- */
.roads-timeline { list-style: none; margin: var(--space-l) 0 0; padding: 0; position: relative; }
/* the spine — a thin contour line down the left */
.roads-timeline::before {
  content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--color-accent) 55%, transparent),
    color-mix(in oklab, var(--color-dark) 45%, transparent));
  border-radius: 2px;
}
.road-stop { position: relative; padding: 0 0 var(--space-xl) 3rem; }
.road-stop:last-child { padding-bottom: 0; }
/* contour-ring node — the topographic mark on the spine */
.road-stop__node {
  position: absolute; left: 0; top: 2px; width: 24px; height: 24px; flex: 0 0 auto;
}
.road-stop__node svg { display: block; width: 100%; height: 100%; }
.road-stop__place { font-family: var(--font-serif, Lora), Georgia, serif; font-size: var(--step-h3);
  line-height: 1.1; margin: 0; color: var(--color-dark); text-wrap: balance; }
.road-stop__sub { font: 0.8rem/1.4 var(--font-sans, Inter), system-ui; letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-accent); margin: .25rem 0 0; }
.road-stop__body { margin-top: 1rem; }
.road-note { max-width: 52ch; margin: 1rem 0 0; color: var(--color-text-body); }

.road-pano { margin: 0 0 .75rem; border-radius: var(--radius-md, .5rem); overflow: hidden;
  box-shadow: var(--shadow-cover, 0 12px 30px -12px rgba(51,38,29,.28)); }
.road-pano img { width: 100%; height: clamp(160px, 26vw, 300px); object-fit: cover; display: block; }

.road-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; }
.road-grid img { width: 100%; height: clamp(220px, 30vw, 340px); object-fit: cover; display: block;
  border-radius: var(--radius-md, .5rem); box-shadow: var(--shadow-cover, 0 12px 30px -12px rgba(51,38,29,.28));
  transition: transform var(--dur-med, 240ms) var(--ease-out, cubic-bezier(.2,.7,.2,1)),
              box-shadow var(--dur-med, 240ms) var(--ease-out, cubic-bezier(.2,.7,.2,1)); }
.road-grid img:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift, 0 22px 48px -16px rgba(51,38,29,.34)); }