/* CR-03 (brief 3.6.3, 3.6.6, 3.6.7), page-scoped: mounts, timeline figures, route map, spots, the film and its teaser. */

/* Mount: paper, 12px padding, 1px green-900 hairline, running stitch 6px inside it (never over the picture). */
.ss-mount { position: relative; margin: 0; padding: 12px; background: var(--paper); border: 1px solid var(--green-900); }
.ss-mount::after {
	content: ""; position: absolute; inset: 5px; pointer-events: none;
	background:
		repeating-linear-gradient(90deg, var(--green-900) 0 6px, transparent 6px 10px) left top / 100% 1px no-repeat,
		repeating-linear-gradient(90deg, var(--green-900) 0 6px, transparent 6px 10px) left bottom / 100% 1px no-repeat,
		repeating-linear-gradient(180deg, var(--green-900) 0 6px, transparent 6px 10px) left top / 1px 100% no-repeat,
		repeating-linear-gradient(180deg, var(--green-900) 0 6px, transparent 6px 10px) right top / 1px 100% no-repeat;
}
.ss-mount img, .ss-spot img { display: block; width: 100%; height: auto; }

/* About timeline figure: the row's third grid child; whole row width below the text under 820px. */
.ss-timeline__fig { grid-column: 1 / -1; max-width: 520px; width: 100%; margin: 0; }
@media (min-width: 820px) { .ss-timeline__fig { grid-column: 2; } }

/* Route map: drawing in a mount, numbered key in HTML (15px), caption and OGL credit. */
.ss-route { display: flex; flex-direction: column; gap: 14px; }
.ss-route__svg { display: block; width: 100%; height: auto; }
.ss-route__svg text { font-family: var(--sans); font-weight: 600; }
.ss-route__key { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 15px; line-height: 1.5; color: var(--cream-50); }
.ss-route__key li { display: flex; align-items: center; gap: 8px; }
.ss-route__n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); color: var(--green-900); font-weight: 600; font-size: 14px; }
.ss-route__dot { width: 12px; height: 12px; margin: 0 6px; border-radius: 50%; border: 2px solid var(--paper); }
.ss-route__ref { font-style: italic; }
.ss-route__cap, .ss-route__credit { font-size: 14px; line-height: 1.6; color: var(--on-dark-body); }
@media (prefers-reduced-motion: no-preference) {
	.js .ss-route .ss-route__path { stroke-dasharray: 1; stroke-dashoffset: 1; }
	.js .ss-route.is-in .ss-route__path { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s var(--ease) .3s; }
}

/* Services and Contact: the illustration as a second, smaller image after the photograph. */
.ss-illstack { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px); }
.ss-illstack .ss-mount { width: min(100%, 420px); align-self: flex-end; }

/* Spots: S1 beside "What happens next", S2 above the 404 links. */
.ss-spothead { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(24px, 4vw, 64px); align-items: center; }
.ss-spothead .ss-mount { max-width: 360px; justify-self: end; }
.ss-spot { margin: 0 0 8px; max-width: 280px; }

/* Film (About) and teaser (Home). The player is 16:9, up to 1080px, inside the mount. */
.ss-needle-accent { display: inline-block; vertical-align: middle; margin: -2px 10px 0 0; overflow: visible; }
.ss-needle-accent path { fill: none; stroke: var(--green-900); stroke-width: 1.5; stroke-linecap: round; }
.ss-filmsec .ss-sechead { align-items: flex-start; }
.ss-teaser__text { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.ss-filmsec__intro { max-width: 60ch; }
.ss-film { max-width: 1080px; margin: 0; }
.ss-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--green-950); }
.ss-film__cap { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--ink-muted); }
.ss-film__transcript { max-width: 72ch; margin-top: 28px; }
.ss-film__transcript summary { cursor: pointer; font-weight: 600; padding: 10px 0; }
.ss-film__transcript .ss-body p { margin-top: 14px; }
.ss-teaser { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ss-teaser__link { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ss-teaser__link .ss-mount { display: block; width: 100%; }