/* Dispatch 002, Orionids: page-specific rules on top of /cd.css */

/* hero: Orion's radiant as the subject, a few faint trails pointing away from it */
.horizon .subject .rays { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; transform: translate(-50%, -50%); overflow: visible; }
.rays line { stroke: var(--pale); stroke-opacity: .45; stroke-width: 1; stroke-linecap: round; }

/* the article's pull lines stay quiet: one rule, no display type */
.prose blockquote { padding-left: 1rem; border-left: 1px solid var(--line); font-style: italic; color: var(--dim); }

/* centrepiece: "Through the trail" */
#trail { --track: 400svh; }
#trail .stage-art { overflow: visible; }
#trail .stage-cap, #trail .stage-read { z-index: 1; padding: .2rem .4rem .2rem 0; background: var(--void); }
#trail .stage-read { right: var(--gut); max-width: 30rem; }
#trail .stage-read .num {
  display: block; font-family: var(--display); font-weight: 600; font-size: 2.2rem; line-height: 1; letter-spacing: .03em; color: var(--pale);
}
#trail .stage-read .lab { display: block; margin: .3rem 0 .55rem; color: var(--faint); letter-spacing: .12em; }
#trail .stage-read .txt { display: block; }
#trail svg text { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; fill: var(--dim); }
#trail svg text.faint { fill: var(--faint); }
#trail .orb { fill: none; stroke: var(--pale); stroke-opacity: .28; stroke-width: 1; vector-effect: non-scaling-stroke; }
#trail .hal { fill: none; stroke: var(--amber); stroke-opacity: .85; stroke-width: 1; vector-effect: non-scaling-stroke; }
#trail .dust path { fill: none; stroke: var(--amber); stroke-linecap: round; vector-effect: non-scaling-stroke; }
#trail .dust .d0 { stroke-width: 1.3; stroke-opacity: .35; }
#trail .dust .d1 { stroke-width: 1.7; stroke-opacity: .6; }
#trail .dust .d2 { stroke-width: 2.1; stroke-opacity: .9; }
#trail .streaks line { stroke: var(--amber); stroke-width: 1.5; stroke-linecap: round; }
#trail .sun { fill: var(--pale); }
#trail .earth { fill: var(--earth); }
#trail .planet { fill: var(--pale); }
#trail .halley { fill: var(--amber); }
#trail .tick { stroke: var(--amber); stroke-width: 2; stroke-linecap: round; }
#trail .frames { max-width: calc(40rem + 2 * var(--gut)); margin: 0 auto; }
#trail .frames .stage-art { width: 100%; }
#trail .frames .num { font-family: var(--display); font-weight: 600; font-size: 1.3rem; letter-spacing: .03em; color: var(--pale); }
#trail .frames .txt { color: var(--dim); }

/* frame-break: the live count under the one line */
.frame-break .fb-count { margin-top: .35em; }
.frame-break .fb-unit {
  display: block; margin-top: .9rem;
  font-family: var(--mono); font-weight: 400; font-size: .8rem; line-height: 1.6; letter-spacing: .12em; color: var(--dim);
}
.frame-break .fb-sub { margin-top: 2.2rem; }
.frame-break .fb-count .fb-num { display: block; font-size: clamp(4.5rem, 24vw, 11rem); line-height: .9; }
.hero { overflow-x: clip; }
@media (max-width: 639px) { #trail .stage-cap { font-size: .65rem; letter-spacing: .02em; } }
#trail .frames .stage-art { overflow: hidden; }