/* utility-protocol / roadmap-timeline  (own skeleton: variants/roadmap-timeline.html + .js)

   A roadmap you can drive. The page is terrain seen from above (sage land, contour
   lines) and ONE road winds down all of it, drawn by the js through where things sit:
   on the first screen it leaves the start pin (the mascot) and passes through every
   milestone of the brief's timeline, each a pin on the road beside a green highway sign
   (a yellow date plate, the milestone, its line); then it weaves between the sections,
   which stand beside it as billboards, each under a phase shield (its number) and a
   green sign (its title). The creed is the big overhead sign at the start. The centre
   line is solid up to the last milestone marked done and dashed after it.

   Polarity: light, earthy. Type: a highway-signage grotesque, bold, condensed where the
   system has one. Shape: rounded sign panels with inset white borders, shields, pins,
   one thick curving road. Motion: the road draws itself in once; off under reduced
   motion. Images: the pfp on the start pin only. */

:root {
  --rm-land: #e5e3cc;
  --rm-land-2: #d9d6b9;
  --rm-asphalt: #3a3d42;
  --rm-shoulder: #f3ecd0;
  --rm-stripe: #f4c430;
  --rm-sign: #0f6b3e;
  --rm-sign-dk: #0a5230;
  --rm-plate: #ffd200;
  --rm-shield: #1d4f91;
  --rm-shield-top: #c8102e;
  --rm-ink: #1d1f1a;
  --rm-top: 58px;

  --v-bg: var(--rm-land);
  --v-fg: var(--rm-ink);
  --v-soft: #45473e;
  --v-faint: #6c6e60;
  --v-line: rgb(29 31 26 / 0.14);
  --v-line-strong: rgb(29 31 26 / 0.34);
  --v-surface: #fbfaf3;
  --v-surface-2: #efeddd;
  --v-card-bg: #fbfaf3;
  --v-accent: var(--rm-sign);
  --v-accent-text: var(--rm-sign);
  --v-on-accent: #ffffff;
  --v-secondary: var(--rm-plate);
  --v-seg-1: var(--rm-sign);
  --v-seg-2: var(--rm-plate);
  --v-seg-3: var(--rm-shield);
  --v-seg-4: var(--rm-shield-top);
  --v-seg-5: var(--wl-accent-on-light);
  --v-seg-6: #9b9a86;
  --v-font-body: "Overpass", "Highway Gothic", "Interstate", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  --v-font-display: var(--v-font-body);
  --v-font-mono: ui-monospace, Consolas, "Liberation Mono", monospace;
  --v-display-weight: 800;
  --v-display-tracking: -0.01em;
  --v-display-case: none;
  --v-display-lh: 1.02;
  --v-title-size: clamp(1.7rem, 3vw, 2.5rem);
  --v-radius: 12px;
  --v-radius-sm: 8px;
  --v-radius-lg: 16px;
  --v-border: 1px solid var(--v-line);
  --v-shadow: 0 10px 20px -12px rgb(40 40 20 / 0.45);
  --v-card-pad: 20px;
  --v-maxw: 1180px;
  --v-pad-x: clamp(16px, 4vw, 56px);
  --v-sec-gap: clamp(56px, 7vw, 96px);

  --wl-label-lore: "Why this road";
  --wl-label-features: "On board";
  --wl-label-supply: "Fuel";
  --wl-label-flow: "Route";
  --wl-label-timeline: "Milestones";
  --wl-label-comparison: "Other roads";
  --wl-label-stats: "Odometer";
  --wl-label-tweet: "Heard on the road";
  --wl-label-gallery: "Views";
  --wl-label-facts: "Road rules";
  --wl-label-quotes: "Travellers";
  --wl-label-faq: "Directions";
  --wl-label-access: "Get on";
}

html { background: var(--rm-land); color-scheme: light; }
body { position: relative; background: transparent; }
::selection { background: var(--rm-plate); color: var(--rm-ink); }

/* the land, the whole length of the page */
.rm-land {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    repeating-radial-gradient(ellipse at 18% 22%, transparent 0 38px, rgb(84 104 58 / 0.09) 39px 40px),
    repeating-radial-gradient(ellipse at 84% 64%, transparent 0 52px, rgb(84 104 58 / 0.08) 53px 54px),
    repeating-radial-gradient(ellipse at 40% 92%, transparent 0 44px, rgb(84 104 58 / 0.07) 45px 46px),
    linear-gradient(170deg, #e9e7d1, var(--rm-land) 40%, var(--rm-land-2));
}
.rm-road { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; overflow: visible; pointer-events: none; }
.rm-road__shoulder { fill: none; stroke: var(--rm-shoulder); stroke-width: 64; stroke-linecap: round; stroke-linejoin: round; }
.rm-road__asphalt { fill: none; stroke: var(--rm-asphalt); stroke-width: 50; stroke-linecap: round; stroke-linejoin: round; }
.rm-road__edge { fill: none; stroke: rgb(255 255 255 / 0.55); stroke-width: 42; stroke-linecap: round; stroke-linejoin: round; }
.rm-road__edge-in { fill: none; stroke: var(--rm-asphalt); stroke-width: 38; stroke-linecap: round; stroke-linejoin: round; }
.rm-road__done { fill: none; stroke: var(--rm-stripe); stroke-width: 3.5; stroke-linecap: round; }
.rm-road__ahead { fill: none; stroke: var(--rm-stripe); stroke-width: 3.5; stroke-dasharray: 16 14; }
@keyframes rm-drive { from { stroke-dashoffset: 1; } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.wl-still) .rm-road__reveal { stroke-dasharray: 1 1; animation: rm-drive 1.8s var(--v-ease) both; }
}

/* ---------------------------------------------------------------- the top bar */
.rm-top {
  position: sticky; top: 0; z-index: 30; height: var(--rm-top);
  display: flex; align-items: center; gap: 18px; padding: 0 var(--v-pad-x);
  background: rgb(229 227 204 / 0.92); backdrop-filter: blur(6px); border-bottom: 2px solid rgb(29 31 26 / 0.12);
}
.rm-top a { text-decoration: none; }
.rm-top__brand { display: flex; align-items: center; gap: 12px; flex: none; }
.rm-top__shield, .rm-trip .wl-kicker .wl-ord {
  display: inline-grid; place-items: center; min-width: 46px; height: 44px; padding: 10px 8px 4px;
  background: linear-gradient(var(--rm-shield-top) 0 26%, var(--rm-shield) 26%);
  color: #fff; font-weight: 900; font-size: 0.82rem; letter-spacing: 0.02em;
  clip-path: polygon(0 0, 50% 8%, 100% 0, 100% 58%, 50% 100%, 0 58%);
  box-shadow: inset 0 0 0 2px #fff;
}
.rm-top__name { font-weight: 900; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--rm-ink); white-space: nowrap; }
.rm-top__nav { flex: 1 1 0; min-width: 0; display: flex; justify-content: flex-end; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.rm-top__nav::-webkit-scrollbar { display: none; }
.rm-top__nav .wl-nav__link { flex: none; padding: 6px 12px; border-radius: 6px; background: var(--rm-sign); color: #fff; font-size: 0.8rem; font-weight: 800; white-space: nowrap; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.8); }
.rm-top__nav .wl-nav__link:hover, .rm-top__nav .wl-nav__link.is-active { background: var(--rm-sign-dk); }

/* ---------------------------------------------------------------- the start */
.rm-trip { position: relative; z-index: 1; }
.rm-start {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; column-gap: clamp(28px, 5vw, 80px);
  min-height: calc(100vh - var(--rm-top)); min-height: calc(100svh - var(--rm-top));
  max-width: 1320px; margin: 0 auto; padding: clamp(20px, 4vh, 44px) var(--v-pad-x) clamp(30px, 5vh, 56px);
}
.rm-start__sign {
  position: relative; padding: clamp(22px, 3vw, 36px); border-radius: 16px;
  background: linear-gradient(180deg, #13804b, var(--rm-sign) 60%, var(--rm-sign-dk));
  color: #fff; box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 7px var(--rm-sign), 0 26px 40px -24px rgb(20 30 10 / 0.7);
}
.rm-start__sign::before, .rm-start__sign::after { /* the gantry posts */
  content: ""; position: absolute; top: 100%; width: 12px; height: 38px; background: linear-gradient(90deg, #8d9096, #c9ccd1 50%, #7c7f85);
}
.rm-start__sign::before { left: 18%; }
.rm-start__sign::after { right: 18%; }
.rm-start__kicker { margin: 0 0 14px; display: inline-block; padding: 4px 10px; border-radius: 4px; background: var(--rm-plate); color: var(--rm-ink); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.rm-start__title { margin: 0 0 14px; font-weight: 900; font-size: clamp(2.3rem, 4.6vw, 4.1rem); line-height: 0.98; letter-spacing: -0.02em; text-wrap: balance; }
.rm-start__sub { margin: 0 0 22px; max-width: 36ch; font-size: 1.05rem; line-height: 1.45; color: #d7eadf; }
.rm-start__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.rm-start .wl-btn { border-radius: 8px; border: 0; background: #fff; color: var(--rm-sign-dk); font-weight: 900; font-size: 0.88rem; padding: 0.7em 1.05em; box-shadow: 0 3px 0 rgb(0 0 0 / 0.25); }
.rm-start .wl-btn--primary { background: var(--rm-plate); color: var(--rm-ink); }
.rm-start .wl-btn:hover { transform: translateY(-1px); }
.rm-start .wl-btn__ca { opacity: 0.7; }
.rm-start__net { position: absolute; top: -14px; right: 22px; margin: 0; padding: 4px 12px; border-radius: 4px; background: var(--rm-plate); color: var(--rm-ink); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 2px 0 rgb(0 0 0 / 0.2); }

.rm-start__road { position: relative; align-self: stretch; display: grid; align-content: center; padding: 64px 0 10px; }
.rm-origin { position: absolute; top: 0; left: 0; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--rm-shield-top), 0 10px 18px -6px rgb(0 0 0 / 0.5); }
.rm-origin__img { width: 100%; height: 100%; object-fit: cover; }

/* the milestones: pins on the road, each beside its highway sign */
.rm-start .wl-sec { padding: 0; }
.rm-start .wl-sec__head { margin: 0 0 14px 76px; }
.rm-start .wl-kicker { margin: 0; }
.rm-start .wl-sec__title { font-size: 1.3rem; color: var(--rm-ink); }
.rm-trip .wl-milestones { max-width: none; gap: clamp(14px, 2.4vh, 26px); }
.rm-trip .wl-milestones::before { display: none; }
.rm-start .wl-ms:nth-child(even) { margin-left: 30%; }
.rm-start .wl-ms:nth-child(3n) { margin-left: 12%; }
.rm-trip .wl-ms { grid-template-columns: 34px minmax(0, 1fr); gap: 16px; align-items: center; }
.rm-trip .wl-ms__dot { width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--rm-asphalt), 0 4px 8px rgb(0 0 0 / 0.35); }
.rm-trip .wl-ms__ring { fill: #fff; stroke: none; }
.rm-trip .wl-ms__core { fill: var(--rm-stripe); r: 5; }
.rm-trip .wl-ms--done .wl-ms__ring { fill: var(--rm-sign); }
.rm-trip .wl-ms__tick { stroke: #fff; }
.rm-trip .wl-ms__body {
  position: relative; max-width: 22rem; padding: 12px 16px 13px; border-radius: 10px;
  background: var(--rm-sign); color: #fff; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--rm-sign), 0 12px 20px -12px rgb(20 30 10 / 0.7);
}
.rm-trip .wl-ms__when { display: inline-block; margin: -26px 0 6px; padding: 3px 9px; border-radius: 4px; background: var(--rm-plate); color: var(--rm-ink); font-family: var(--v-font-body); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 0 2px 0 rgb(0 0 0 / 0.2); }
.rm-trip .wl-ms__title { font-size: 1.2rem; font-weight: 900; color: #fff; }
.rm-trip .wl-ms__text { font-size: 0.92rem; color: #d7eadf; }

/* ---------------------------------------------------------------- the legs: billboards beside the road */
.rm-legs { max-width: 1240px; margin: 0 auto; padding: 0 var(--v-pad-x) clamp(80px, 10vw, 140px); }
.rm-legs .wl-sec { padding: var(--v-sec-gap) 0 0; }
.rm-legs .wl-sec--gallery { display: none; } /* this variant consumes no images */
.rm-legs .wl-sec__inner { width: min(100%, 620px); margin: 0; }
.rm-legs .wl-sec:nth-child(even) .wl-sec__inner { margin-left: auto; }
.rm-legs .wl-sec__head { margin: 0 0 16px; }
.rm-trip .wl-kicker { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 10px; font-family: var(--v-font-body); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.1em; color: var(--rm-ink); }
.rm-trip .wl-kicker .wl-ord { opacity: 1; font-size: 0.9rem; letter-spacing: 0; }
.rm-legs .wl-sec__title { display: inline-block; padding: 12px 20px 13px; border-radius: 12px; background: var(--rm-sign); color: #fff;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--rm-sign), 0 12px 20px -12px rgb(20 30 10 / 0.6); }
.rm-legs .wl-sec__body { position: relative; padding: clamp(18px, 2.4vw, 26px); border-radius: 12px; background: var(--v-surface); border: 3px solid var(--rm-ink); box-shadow: 0 16px 28px -18px rgb(20 30 10 / 0.6); }
.rm-legs .wl-sec__body::before, .rm-legs .wl-sec__body::after { /* the billboard's legs */
  content: ""; position: absolute; top: 100%; width: 10px; height: 26px; background: linear-gradient(90deg, #6f5a3c, #9c805a 50%, #6f5a3c);
}
.rm-legs .wl-sec__body::before { left: 22%; }
.rm-legs .wl-sec__body::after { right: 22%; }

.rm-legs .wl-lore__lead { font-weight: 700; font-size: 1.2rem; }
.rm-legs .wl-features { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.rm-legs .wl-feature { position: relative; min-height: 76px; padding: 12px 14px 12px 78px; border: 0; border-radius: 10px; background: var(--v-surface-2); }
.rm-legs .wl-feature:has(.wl-feature__icon--img) { min-height: 0; padding-left: 16px; }
.rm-legs .wl-feature:hover { transform: none; }
.rm-legs .wl-feature .wl-ord { display: none; }
.rm-legs .wl-feature__icon { position: absolute; left: 12px; top: 12px; width: 52px; height: 52px; margin: 0; border-radius: 10px; background: var(--rm-plate); color: var(--rm-ink); }
.rm-legs .wl-feature__icon--img { display: none; }
.rm-legs .wl-feature__title { font-weight: 900; font-size: 1.12rem; margin: 2px 0 2px; }
.rm-legs .wl-feature__text { font-size: 0.95rem; }
.rm-legs .wl-graphic--supply { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.rm-legs .wl-donut__chart { width: min(100%, 300px); }
.rm-legs .wl-donut__track { stroke: var(--v-surface-2); }
.rm-legs .wl-donut__seg { stroke-width: 30; }
.rm-legs .wl-donut__value, .rm-legs .wl-legend__value, .rm-legs .wl-ring__value, .rm-legs .wl-stat__value { font-weight: 900; }
.rm-legs .wl-donut__label, .rm-legs .wl-ring__label, .rm-legs .wl-stat__label { font-family: var(--v-font-body); font-weight: 900; color: var(--rm-sign); }
.rm-legs .wl-legend { width: 100%; }
.rm-legs .wl-legend__swatch { border-radius: 3px; }
.rm-legs .wl-ring__track { stroke: var(--v-surface-2); }
.rm-legs .wl-stats { border-radius: 10px; }
.rm-legs .wl-stat { background: var(--v-surface); }
.rm-legs .wl-flowchart { grid-template-columns: minmax(0, 1fr) !important; row-gap: 0; }
.rm-legs .wl-node { flex-direction: column; }
.rm-legs .wl-node__card { border: 0; border-radius: 10px; background: var(--v-surface-2); }
.rm-legs .wl-node__card .wl-ord { border-radius: 8px; background: var(--rm-plate); color: var(--rm-ink); }
.rm-legs .wl-node__edge { width: 22px; height: 30px; margin: 4px auto; transform: rotate(90deg); }
.rm-legs .wl-edge__line { stroke: var(--rm-asphalt); stroke-dasharray: 5 5; }
.rm-legs .wl-edge__head { stroke: var(--rm-asphalt); }
.rm-legs .wl-facts { gap: 10px; }
.rm-legs .wl-fact { border: 0; border-radius: 10px; background: var(--v-surface-2); font-weight: 700; }
.rm-legs .wl-fact__mark { border-radius: 8px; background: var(--rm-plate); color: var(--rm-ink); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.rm-legs .wl-quote { border: 0; background: var(--v-surface-2); }
.rm-legs .wl-quote::before { color: var(--rm-sign); }
.rm-legs .wl-quotes { grid-template-columns: minmax(0, 1fr); }
.rm-legs .wl-qa { border: 0; border-radius: 10px; background: var(--v-surface-2); }
.rm-legs .wl-qa__q { font-weight: 900; }
.rm-legs .wl-qa__sign::before, .rm-legs .wl-qa__sign::after { background: var(--rm-sign); height: 3px; }
.rm-legs .wl-table-wrap { border-radius: 10px; }
.rm-legs .wl-post { box-shadow: none; }
.rm-legs .wl-access__net { font-family: var(--v-font-body); font-weight: 900; color: var(--rm-sign); }
.rm-legs .wl-ca { border: 3px solid var(--rm-ink); border-radius: 10px; background: var(--rm-plate); }
.rm-legs .wl-ca__label { font-family: var(--v-font-body); font-weight: 900; color: var(--rm-ink); }
.rm-legs .wl-copy { border-radius: 8px; background: var(--rm-sign); color: #fff; }
.rm-legs .wl-link { border: 0; border-radius: 8px; background: var(--rm-sign); color: #fff; font-weight: 800; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.7); }
.rm-legs .wl-link:hover { transform: translateY(-1px); background: var(--rm-sign-dk); }

.rm-foot { position: relative; z-index: 1; padding: 26px var(--v-pad-x) 36px; background: var(--rm-asphalt); color: #cfd2d6; }
.rm-foot .wl-foot__name { color: #fff; }
.rm-foot .wl-foot__net, .rm-foot .wl-foot__nfa { color: #a3a7ad; }
.rm-foot .wl-link { background: transparent; border: 2px solid #5b5f66; color: #fff; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 860px) {
  .rm-top__nav { display: none; }
  .rm-start { grid-template-columns: minmax(0, 1fr); row-gap: 30px; min-height: 0; padding-top: 22px; }
  .rm-start__road { padding: 70px 0 0 0; }
  .rm-start .wl-ms:nth-child(n) { margin-left: 0; }
  .rm-start .wl-sec__head { margin-left: 70px; }
  .rm-origin { left: 0; }
  .rm-legs .wl-sec__inner, .rm-legs .wl-sec:nth-child(even) .wl-sec__inner { width: auto; margin: 0 0 0 58px; }
}

/* the centre and edge lines settle once the road has been drawn */
@keyframes rm-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.wl-still) .rm-road:not(.rm-road--settled) :is(.rm-road__done, .rm-road__ahead, .rm-road__edge, .rm-road__edge-in) { animation: rm-fade 0.5s ease 1.5s both; }
}