/* Agent server: the page is drawn as a transit map. Blue (--accent) is the first method and the private
   network, violet (--accent-2) is the second method and the agent lanes. Without scroll-driven animations,
   or with reduced motion, every part shows in its final state. */

.post[data-accent="agent"] h1 { font-size: clamp(2.5rem, 1.75rem + 3vw, 3.5rem); line-height: 1.05; letter-spacing: -0.035em; }
.post[data-accent="agent"] .lede { max-width: 34rem; font-size: 1.25rem; line-height: 1.5; color: var(--gray-700); }

/* Section heads get a station ring: blue up to the first method, violet from the second method on. */
.post[data-accent="agent"] .prose h2::before { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--page); box-shadow: inset 0 0 0 0.15em var(--accent); vertical-align: 0.05em; }
.post[data-accent="agent"] .prose h2:nth-of-type(n + 3)::before { box-shadow: inset 0 0 0 0.15em var(--accent-2); }

.post .prose .opener { font-size: 1.3125rem; line-height: 1.5; color: var(--text); }
.post[data-accent="agent"] .prose blockquote { margin: 1.75em 0 0; padding-left: 1.25rem; border-left: 6px solid var(--accent-2); font-size: 1.25em; font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; }

/* The system map: a wide drawing for the column from 640 px up, a tall one below. */
.post .prose .map { margin: 0 0 2.75rem; }
.post .map .diagram { max-width: none; margin: 0; }
.post .map .diagram + .diagram { display: none; }
.post .map text { fill: var(--text); font: 400 13px var(--mono); }
.post .map .tall text { font-size: 14px; }
.post .map .dim, .post .map .tall .dim { fill: var(--gray-500); font-size: 13px; }
.post .map .net { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }
.post .map .lane { fill: none; stroke: var(--accent-2); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.post .map .train { fill: none; stroke: var(--page); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0 0.08; }
.post .map .station { fill: var(--page); stroke: var(--text); stroke-width: 2.5; }
.post .map .ring { fill: var(--page); stroke: var(--accent-2); stroke-width: 4; }
.post .map .stop { fill: var(--page); stroke: var(--accent-2); stroke-width: 3; }
.post .map .pulse { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* A key of line swatches, under the map and over the story. */
.post .prose :is(.map-note, .legend) { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; margin: 1rem 0 0; font: 400 0.8125rem/1.5 var(--mono); color: var(--gray-500); }
.post :is(.map-note, .legend) span { display: inline-flex; align-items: center; gap: 0.55rem; }
.post :is(.map-note, .legend) span::before { content: ""; flex: none; width: 1.5rem; height: 6px; border-radius: 3px; background: var(--accent); }
.post :is(.map-note, .legend) span + span::before { background: var(--accent-2); }
.post .prose .legend { margin: 0 0 1.5rem; }

/* The story as one line: blue stations, a week of two lines side by side, the switch as an interchange,
   then violet on to the present. */
.post .prose .story { --y: 0.625rem; list-style: none; margin: 0 0 1.25em; padding: 0; }
.post .story li { --c: var(--accent); }
.post .prose .story li { position: relative; margin: 0; padding: 0 0 1.75rem 3rem; font-size: 1.0625rem; line-height: 1.55; }
.post .prose .story li:last-child { padding-bottom: 0.5rem; }
.post .story li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 1.75rem; }
.post .story li::after { content: ""; position: absolute; top: calc(var(--y) - 8px); left: calc(0.375rem - 5px); width: 16px; height: 16px; box-sizing: border-box; border: 3.5px solid var(--c); border-radius: 50%; background: var(--page); }
.post .story time { display: block; font: 400 0.8125rem/1.5 var(--mono); color: var(--c); }
.post .prose .story p { margin: 0.15rem 0 0; }
.post .story .s-start::before { background: linear-gradient(var(--accent), var(--accent)) 0.375rem var(--y) / 6px 100% no-repeat; }
.post .story .s-one::before { background: linear-gradient(var(--accent), var(--accent)) 0.375rem 0 / 6px 100% no-repeat; }
.post .story .s-both { --c: var(--accent-2); }
.post .story .s-both::before { background: linear-gradient(var(--accent), var(--accent)) 0.375rem 0 / 6px 100% no-repeat, linear-gradient(var(--accent-2), var(--accent-2)) 1.125rem var(--y) / 6px 100% no-repeat; }
.post .story .s-swap { --c: var(--text); }
.post .story .s-swap::before { background: linear-gradient(var(--accent), var(--accent)) 0.375rem 0 / 6px var(--y) no-repeat, linear-gradient(var(--accent-2), var(--accent-2)) 1.125rem 0 / 6px 100% no-repeat; }
.post .story .s-swap::after { top: calc(var(--y) - 9px); left: calc(0.375rem - 6px); width: calc(0.75rem + 18px); height: 18px; border-radius: 9px; }
.post .story .s-two { --c: var(--accent-2); }
.post .story .s-two::before { background: linear-gradient(var(--accent-2), transparent) 1.125rem 0 / 6px 100% no-repeat; }
.post .story :is(.s-both, .s-two)::after { left: calc(1.125rem - 5px); }

/* The first method's path for a project, ending in parallel tracks for the builders. */
.post .prose .stops { display: flex; list-style: none; margin: 0 0 1.5em; padding: 0; }
.post .prose .stops li { position: relative; flex: 1 1 0; margin: 0; padding-top: 1.5rem; font: 400 0.8125rem/1.4 var(--mono); color: var(--gray-600); }
.post .stops li::before { content: ""; position: absolute; top: calc(0.5rem - 3px); left: 0; right: 0; height: 6px; background: var(--accent); }
.post .stops li:last-child::before { top: calc(0.5rem - 5px); height: 10px; background: repeating-linear-gradient(var(--accent) 0 2px, transparent 2px 4px); -webkit-mask: linear-gradient(90deg, #000 30%, transparent); mask: linear-gradient(90deg, #000 30%, transparent); }
.post .stops li::after { content: ""; position: absolute; top: calc(0.5rem - 8px); left: 0; width: 16px; height: 16px; box-sizing: border-box; border: 3.5px solid var(--accent); border-radius: 50%; background: var(--page); }

/* The first method's parts: stations on a thin blue line. */
.post[data-accent="agent"] .prose > ul { list-style: none; padding-left: 0; }
.post[data-accent="agent"] .prose > ul > li { position: relative; margin: 0; padding: 0 0 0.85em 1.9rem; }
.post[data-accent="agent"] .prose > ul > li::before { content: ""; position: absolute; z-index: 1; top: calc(0.8em - 7px); left: 0.25rem; width: 14px; height: 14px; box-sizing: border-box; border: 3px solid var(--accent); border-radius: 50%; background: var(--page); }
.post[data-accent="agent"] .prose > ul > li:not(:last-child)::after { content: ""; position: absolute; top: 0.8em; bottom: -0.8em; left: calc(0.25rem + 5.5px); width: 3px; background: var(--accent-line); }

/* First method → second method: two lines side by side, and an interchange on every row. */
.post .prose .shift { margin: 1.75em 0 2em; table-layout: fixed; font-size: 1rem; line-height: 1.45; }
.post .prose .shift :is(th, td) { position: relative; padding: 0.75rem 2rem 0.75rem 0; border: 0; vertical-align: middle; }
.post .prose .shift :is(th, td):first-child { color: var(--gray-600); text-align: right; }
.post .prose .shift :is(th, td):last-child { padding: 0.75rem 0 0.75rem 2rem; color: var(--text); }
.post .prose .shift th { padding-top: 0; padding-bottom: 1rem; font: 400 0.75rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.post .prose .shift th:first-child { color: var(--accent); }
.post .prose .shift th:last-child { padding-top: 0; padding-bottom: 1rem; color: var(--accent-2); }
.post .shift th:last-child::before { content: "→"; position: absolute; top: 0; left: 0; transform: translateX(-50%); color: var(--gray-500); }
.post .shift td::after { content: ""; position: absolute; top: 0; bottom: 0; }
.post .shift td:first-child::after { right: 0.75rem; width: 4px; background: var(--accent); }
.post .shift td:last-child::after { left: 0.75rem; width: 6px; background: var(--accent-2); }
.post .shift tr:first-child td::after { top: 50%; }
.post .shift tr:last-child td::after { bottom: 50%; }
.post .shift td:last-child::before { content: ""; position: absolute; z-index: 1; top: calc(50% - 8px); left: calc(-0.75rem - 10px); width: calc(1.5rem + 21px); height: 16px; box-sizing: border-box; border: 3px solid var(--text); border-radius: 8px; background: var(--page); }

/* What it does: a signal box, one lamp per duty. */
.post .prose .say { font-size: 1.375rem; font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; color: var(--text); }
.post .prose .does { margin: 1.5em 0 2em; }
.post .does > div { display: grid; grid-template-columns: 10.5rem 1fr; align-items: baseline; gap: 0.3rem 1.5rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.post .does > div:last-child { border-bottom: 1px solid var(--line); }
.post .does dt { position: relative; padding-left: 1.75rem; font: 400 0.8125rem/1.6 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text); }
.post .does dt::before { content: ""; position: absolute; top: calc(0.8em - 5px); left: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 4px var(--accent-line); }
.post .does dd { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--gray-700); }

/* Results: big numbers as stations on their method's line. */
.post .board .l1 { --c: var(--accent); }
.post .board .l2 { --c: var(--accent-2); }
.post .prose .board { margin: 1.5em 0 0; }
.post .prose .board h3 { margin: 0 0 1.25rem; font: 400 0.75rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c); }
.post .prose .nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; list-style: none; margin: 0 0 2.75rem; padding: 0; }
.post .prose .nums:last-child { margin-bottom: 0; }
.post .prose .nums li { position: relative; margin: 0; padding-top: 1.4rem; }
.post .nums li::before { content: ""; position: absolute; top: 0; left: 0; right: -1.5rem; height: 4px; background: var(--c); }
.post .nums li:last-child::before { right: 0; background: linear-gradient(90deg, var(--c) 30%, transparent); }
.post .nums li::after { content: ""; position: absolute; top: -5px; left: 0; width: 14px; height: 14px; box-sizing: border-box; border: 3px solid var(--c); border-radius: 50%; background: var(--page); }
.post .nums b { display: block; font: 600 3.25rem/1 var(--sans); letter-spacing: -0.035em; color: var(--c); font-variant-numeric: tabular-nums; }
.post .nums span { display: block; margin-top: 0.6rem; font-size: 0.9375rem; line-height: 1.4; color: var(--gray-600); }

@media (max-width: 639px) {
  .post .map .diagram { display: none; }
  .post .map .diagram + .diagram { display: block; }
  .post .prose .opener { font-size: 1.1875rem; }
  .post .prose .shift { font-size: 0.9375rem; }
  .post .prose .shift :is(th, td):first-child { padding-right: 1.75rem; }
  .post .prose .shift :is(th, td):last-child { padding-left: 1.75rem; }
  .post .does > div { grid-template-columns: 1fr; }
  .post .prose .say { font-size: 1.25rem; }
  .post .prose .nums { grid-template-columns: 1fr; gap: 1.25rem; padding-left: 1.75rem; }
  .post .prose .nums li { padding-top: 0; }
  .post .nums li::before { top: 20px; bottom: calc(-1.25rem - 20px); left: calc(-1.75rem + 5px); right: auto; width: 4px; height: auto; }
  .post .nums li:last-child::before { display: none; }
  .post .nums li::after { top: 13px; left: -1.75rem; }
  .post .nums b { font-size: 2.5rem; }
  .post .nums span { margin-top: 0.35rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .post .map .train { animation: agent-run 1.6s linear infinite; }
  .post .map .train:nth-child(2n) { animation-duration: 2.2s; }
  .post .map .train:nth-child(3n) { animation-duration: 1.3s; }
  .post .map .pulse { animation: agent-pulse 2.8s ease-out infinite; }
}
@keyframes agent-run { to { stroke-dashoffset: -0.08; } }
@keyframes agent-pulse { from { opacity: 0.8; } to { opacity: 0; transform: scale(1.1); } }

/* The wide map sits in the first screen, so it draws itself once when the page opens. */
@media (min-width: 640px) and (prefers-reduced-motion: no-preference) {
  .post .map .wide .bd { animation: agent-fade 0.55s cubic-bezier(0.3, 0.7, 0.4, 1) var(--d) both; animation-timeline: auto; }
  .post .map .wide path.bd { stroke-dasharray: 1; animation-name: agent-draw; }
  .post .map .wide g.bd { transform-box: fill-box; transform-origin: center; animation-name: agent-pop; }
  .post .map .wide g.bd.fade { animation-name: agent-fade; }
}

/* The tall map and the lines build as they scroll into view. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .post .prose .map { view-timeline: --agent-map block; }
    .post .map .bd { animation: agent-fade linear both; animation-timeline: --agent-map; animation-range: cover var(--a) cover var(--b); }
    .post .map path.bd { stroke-dasharray: 1; animation-name: agent-draw; }
    .post .map g.bd { transform-box: fill-box; transform-origin: center; animation-name: agent-pop; }
    .post .map g.bd.fade { animation-name: agent-fade; }

    .post .prose .story li { view-timeline: --agent-stop block; }
    .post .story li > * { animation: agent-rise linear both; animation-timeline: --agent-stop; animation-range: entry 0% entry 80%; }
    .post .story li::after { animation: agent-pop linear both; animation-timeline: --agent-stop; animation-range: entry 0% entry 50%; }
    .post .story li::before { transform-origin: top; animation: agent-grow linear both; animation-timeline: --agent-stop; animation-range: entry 0% cover 45%; }

    .post .prose .stops { view-timeline: --agent-stops block; }
    .post .stops li::before { transform-origin: left; animation: agent-grow-x linear both; animation-timeline: --agent-stops; }
    .post .stops li:nth-child(1)::before { animation-range: cover 10% cover 22%; }
    .post .stops li:nth-child(2)::before { animation-range: cover 22% cover 34%; }
    .post .stops li:nth-child(3)::before { animation-range: cover 34% cover 46%; }
    .post .stops li:nth-child(4)::before { animation-range: cover 46% cover 58%; }

    .post .does > div { view-timeline: --agent-lamp block; }
    .post .does dt::before { animation: agent-lamp linear both; animation-timeline: --agent-lamp; animation-range: entry 40% entry 100%; }

    .post .prose .nums li { view-timeline: --agent-num block; }
    .post .nums li > * { animation: agent-rise linear both; animation-timeline: --agent-num; animation-range: entry 20% entry 100%; }
  }
}
@keyframes agent-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes agent-pop { from { opacity: 0; transform: scale(0.5); } }
@keyframes agent-fade { from { opacity: 0; } }
@keyframes agent-rise { from { opacity: 0; transform: translateY(0.75rem); } }
@keyframes agent-grow { from { transform: scaleY(0); } }
@keyframes agent-grow-x { from { transform: scaleX(0); } }
@keyframes agent-lamp { from { opacity: 0.15; transform: scale(0.6); } }