/* /roadmap: four horizons. A sticky rail on the left (a progress bar under the header on phones), one section per horizon with the same structure
   (number, title, tagline, lead, a calm looping diagram, six compact cards, the strategic objective). Shared parts are reused: .framed, .cap, .lede, .diagram-frame,
   .m-aurora / .m-rise / .m-sweep and the blue chapter connector. Normal scrolling; nothing is pinned except the rail. All motion is off under prefers-reduced-motion. */

/* hero */
.rm-sub { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; max-width: 100%; text-wrap: balance; }
.rm-intro { max-width: none; width: 100%; text-align: left; text-wrap: pretty; }

/* the background: a slow aurora (.m-aurora), a fine dot grid that fades at both ends */
.rm-bg { padding-top: clamp(.5rem, 1vw, 1rem); }
.rm-bg::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 1.4px) 0 0 / 22px 22px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); }

/* layout: rail | horizons. No ancestor of the rail clips or scrolls, so position: sticky works. */
.rm-shell { display: grid; grid-template-columns: 0 minmax(0, 1fr); align-items: start; }   /* wide screens: the rail hangs in the left margin, the cards get the full width */
.rm-col { min-width: 0; }

/* the rail itself (look, position, progress-bar fallback) is the shared component: assets/css/rail.css */

/* one horizon */
.rm-h { --hc: var(--brand-amber); --sp: 1; display: grid; gap: 1.1rem; isolation: isolate; scroll-margin-top: calc(var(--header-h) + 1rem); }
.rm-h:nth-child(2) { --hc: var(--brand-red); } .rm-h:nth-child(3) { --hc: var(--brand-magenta); } .rm-h:nth-child(4) { --hc: var(--brand-blue); }
/* the horizon arc: concentric rings from the top-right corner of the section; they widen as the section is scrolled through */
.rm-arcs { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; --g: calc(.55 + .45 * var(--sp)); --a: calc(9rem * var(--g)); --b: calc(14rem * var(--g)); --c: calc(19.5rem * var(--g)); --k: color-mix(in srgb, var(--hc) 38%, transparent);
  background:
    radial-gradient(circle at 100% 0, transparent calc(var(--a) - 1.2px), var(--k) calc(var(--a) - .6px), var(--k) var(--a), transparent calc(var(--a) + .6px)),
    radial-gradient(circle at 100% 0, transparent calc(var(--b) - 1.2px), color-mix(in srgb, var(--hc) 26%, transparent) calc(var(--b) - .6px), color-mix(in srgb, var(--hc) 26%, transparent) var(--b), transparent calc(var(--b) + .6px)),
    radial-gradient(circle at 100% 0, transparent calc(var(--c) - 1.2px), color-mix(in srgb, var(--hc) 16%, transparent) calc(var(--c) - .6px), color-mix(in srgb, var(--hc) 16%, transparent) var(--c), transparent calc(var(--c) + .6px));
}
.rm-hd { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.rm-hd h2 { min-width: 0; text-wrap: balance; }
.rm-hd .c-ico { flex: none; color: var(--hc); }
.rm-num { flex: none; width: 4.5rem; height: auto; overflow: visible; transition: opacity .6s var(--ease), filter .6s var(--ease); }
.rm-num text { font-family: var(--mono); font-weight: 500; letter-spacing: -.02em; }
.rm-tagline { color: var(--text); text-wrap: balance; max-width: 48ch; }
.rm-lead { max-width: 80ch; text-align: left; }

/* the diagram: wide and flat, never taller than 220px */
.rd-fig { margin: .4rem 0 0; padding: var(--dg-pad); padding-top: calc(var(--dg-pad) + 28px); border: 1px solid var(--border); border-radius: var(--r-panel); }
.rd { display: block; width: 100%; max-width: 760px; height: auto; margin-inline: auto; overflow: visible; }
.rd--n { display: none; }
.rd text { font-family: var(--font); font-weight: 500; fill: var(--text-dim); }
.rd .rd-lg { font-weight: 400; }
.rd-n rect { fill: var(--surface-2); stroke: var(--border-hover); stroke-width: 1; }
.rd-n text { fill: var(--text); }
.rd-core rect { fill: color-mix(in srgb, var(--hc) 14%, var(--surface-1)); stroke: var(--hc); stroke-width: 1.4; }
.rd-core text { font-weight: 600; }
.rd-ver rect, .rd-val rect { stroke: var(--brand-blue); }
.rd-e { fill: none; stroke-width: 1.4; stroke-linecap: round; opacity: .8; }
.rd-mesh { stroke-dasharray: 3 4; opacity: .55; }
.rd-ev { stroke-dasharray: 3 3; }
.rd-arc { fill: none; stroke-width: 1.5; opacity: .32; }
.rd-globe { fill: none; stroke: var(--border-hover); stroke-width: 1; stroke-dasharray: 2 4; }
.rd-globe circle:first-child { stroke-dasharray: none; stroke: var(--text-faint); opacity: .55; }
.rd-farc { opacity: .65; }
.k1 { --kc: var(--brand-amber); } .k2 { --kc: var(--brand-orange); } .k3 { --kc: #ff5a4f; } .k4 { --kc: var(--brand-magenta); } .k5 { --kc: var(--brand-indigo); } .k6 { --kc: var(--brand-blue); }
.rd-e, .rd-ring { stroke: var(--kc); }
.rd-pulse, .rd-lgdot { fill: var(--kc); filter: drop-shadow(0 0 4px var(--kc)); }
.rd-dot { fill: var(--surface-1); stroke: var(--text-dim); stroke-width: 1.5; }
.rd-dot--1 { stroke: var(--brand-amber); } .rd-dot--2 { stroke: var(--brand-orange); } .rd-dot--3 { stroke: var(--brand-red); } .rd-dot--4 { stroke: var(--brand-magenta); } .rd-dot--5 { stroke: var(--brand-indigo); } .rd-dot--6 { stroke: var(--brand-blue); }
.rd-id { fill: var(--brand-amber); }
.rd-ring { fill: none; stroke-width: 1.5; opacity: .5; transform-box: fill-box; transform-origin: center; }
.rd-chk circle { fill: var(--surface-1); stroke: var(--allow); stroke-width: 1.4; }
.rd-chk path { fill: none; stroke: var(--allow); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* items: six compact icon-row cards, 3 x 2 on desktop, 2 x 3 on tablet, one column on phones; equal heights per row */
.rm-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.4vw, 1rem); list-style: none; margin: .25rem 0 0; padding: 0; }
.rm-items .cap { height: 100%; }
.rm-items .cap > .c-ico { color: var(--hc); }
.rm-items > :nth-child(3n + 2) { --m-i: 1; } .rm-items > :nth-child(3n) { --m-i: 2; }
.rm-obj-card { --fx: 0%; --fy: 0%; border-color: color-mix(in srgb, var(--hc) 50%, var(--border)); box-shadow: var(--elev), 0 0 38px -20px var(--hc), inset 3px 0 0 var(--hc); }
.rm-obj-card > .c-ico { color: var(--hc); }
.rm-obj-card .rm-n { color: var(--hc); text-transform: uppercase; }
.rm-obj-card .rm-head { color: var(--text); text-wrap: pretty; }

/* closing strip */
.rm-closing { position: relative; padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.1rem, 2.4vw, 2rem); border-radius: var(--r-panel); --fx: 0%; --fy: 100%; --fc1: var(--framed-orange); --fc2: var(--framed-blue); }
.rm-closing .rm-sub { width: 100%; background: linear-gradient(100deg, var(--brand-amber), var(--brand-orange) 20%, var(--brand-red) 42%, var(--brand-magenta) 62%, var(--brand-indigo) 80%, var(--brand-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* reveal states exist only when the script runs and motion is allowed: without them everything is drawn and lit */
.rm-js .rm-h:not(.is-on) .rm-num { opacity: .32; }
.rm-js .rm-h.is-on .rm-num { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--hc) 55%, transparent)); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes rd-ring { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.14, 1.3); opacity: 0; } }
  @keyframes rd-tick { 0%, 8% { opacity: .22; } 16%, 70% { opacity: 1; } 86%, 100% { opacity: .22; } }
  @keyframes rd-node { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
  .rd-ring { animation: rd-ring 3.4s ease-out infinite; }
  .rd-ring--2 { animation-delay: 1.7s; }
  .rd-chk:not(.rd-chk--on) { animation: rd-tick 9s ease-in-out infinite; }
  .rd-chk--1 { animation-delay: 0s !important; } .rd-chk--2 { animation-delay: 1.5s !important; } .rd-chk--3 { animation-delay: 3s !important; }
  .rd-chk--4 { animation-delay: 4.5s !important; } .rd-chk--5 { animation-delay: 6s !important; } .rd-chk--6 { animation-delay: 7.5s !important; }
  .rd-dot { animation: rd-node 5s ease-in-out infinite; }
  .rd-dot--2 { animation-delay: .8s; } .rd-dot--3 { animation-delay: 1.6s; } .rd-dot--4 { animation-delay: 2.4s; } .rd-dot--5 { animation-delay: 3.2s; } .rd-dot--6 { animation-delay: 4s; }
  .rd-off, .rd-off * { animation-play-state: paused !important; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-pulse { display: none; }
}

/* below 88rem there is no margin for the rail: it takes a column, and the cards go two across */
@media (max-width: 87.99rem) {
  .rm-shell { grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: clamp(1.25rem, 2.2vw, 2rem); }
  #rm .rm-rail { display: block; width: auto; margin-left: 0; }   /* the roadmap keeps the rail as a column here (the shared rail is hidden in this band) */
  .rm-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rm-items > :nth-child(3n + 2), .rm-items > :nth-child(3n) { --m-i: 0; } .rm-items > :nth-child(even) { --m-i: 1; }
}
/* the rail turns into a progress bar under the header (rail.css); the horizons clear it */
@media (max-width: 64rem) {
  .rm-shell { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .rm-h { scroll-margin-top: calc(var(--header-h) + 4.5rem); }
}
@media (max-width: 40rem) {
  .rm-items { grid-template-columns: minmax(0, 1fr); }
  .rm-items > * { --m-i: 0 !important; }
  .rd--w { display: none; }
  .rd--n { display: block; max-width: 360px; }
  .rm-hd { flex-wrap: wrap; row-gap: .5rem; }
  .rm-num { width: 3.75rem; }
  .rm-hd h2 { flex-basis: 100%; }
}