/* Stroke's New as a filmstrip (21 Oct 2026, helper feeds; the Web Director's Stroke kit). The shared spine (spine.css,
	mime_kit.spine with cls "sk-film") in Stroke's skin: the spine is a strip of ink film, each day's node a frame on it
	with its sprocket holes either side (the newest day's frame lit magenta), the day's count drawn as magenta slashes at
	the logo's lean (feed.slashes), and each card carrying a Stroke tile or its class's icon in the logo's brackets
	(stroke_kit.tile, feed.class_tile). Static: only the tiles move (stroke-kit.js). */
.sk-film { --spine-accent: #1c1b21; --film-hole: var(--card, #fff); }
.sk-film .spine-day { padding-left: 44px; }
.sk-film .spine-day::before { left: 9px; width: 8px; top: 16px; bottom: -16px; border-radius: 2px; background: #1c1b21; }
.sk-film .spine-day:last-child::before { bottom: 0; }

/* the day's frame: sprocket holes down both edges and the picture window between them */
.sk-film .spine-node { left: -43px; top: 2px; width: 24px; height: 28px; border: 0; border-radius: 4px; background: #1c1b21; }
.sk-film .spine-node::before { content: ""; position: absolute; left: 3px; top: 4px; width: 18px; height: 20px;
	background: linear-gradient(to bottom, var(--film-hole) 0 4px, transparent 4px 8px) left top / 3px 8px repeat-y,
		linear-gradient(to bottom, var(--film-hole) 0 4px, transparent 4px 8px) right top / 3px 8px repeat-y; }
.sk-film .spine-node::after { content: ""; position: absolute; left: 8px; top: 4px; width: 8px; height: 20px; border-radius: 2px; background: #4a4853; }
.sk-film > .spine-day:first-child .spine-node { background: #1c1b21; }
.sk-film > .spine-day:first-child .spine-node::after { background: #d23a7e; }

.sk-film .spine-tally { color: #d23a7e; opacity: 1; }
.sk-film .spine-entry::before { left: -27px; width: 27px; top: 30px; height: 2px; border-radius: 2px; background: #1c1b21; }
.sk-film .spine-body .doc-entry-title { flex-basis: 100%; }
.sk-film .spine-body .doc-entry-head { align-items: baseline; }
.sk-film .spine-body .doc-shot { margin: 2px 0 0; }

/* a class's icon in the logo's brackets, sitting with the tiles */
.sk-class { position: relative; }
.sk-si { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; --si: 18px; pointer-events: none; }

/* Up and coming on the About: each item marked by an empty pair of the logo's brackets, a shot not taken yet */
.doc-list.sk-soon { padding-left: 0; list-style: none; }
.sk-soon > li { position: relative; padding-left: 28px; }
.sk-soon > li::before, .sk-soon > li::after { content: ""; position: absolute; top: .25em; width: 5px; height: 15px; border: 2px solid #1c1b21; border-radius: 2px; }
.sk-soon > li::before { left: 1px; border-right: 0; }
.sk-soon > li::after { left: 11px; border-left: 0; translate: 0 -1px; }

@media (max-width: 760px) {
	.sk-film .spine-day { padding-left: 34px; }
	.sk-film .spine-day::before { left: 7px; width: 6px; }
	.sk-film .spine-node { left: -34px; width: 20px; height: 24px; top: 4px; }
	.sk-film .spine-node::before { left: 2.5px; top: 3px; width: 15px; height: 18px;
		background-size: 3px 7px, 3px 7px;
		background-image: linear-gradient(to bottom, var(--film-hole) 0 4px, transparent 4px 7px), linear-gradient(to bottom, var(--film-hole) 0 4px, transparent 4px 7px); }
	.sk-film .spine-node::after { left: 7px; top: 3px; width: 6px; height: 18px; }
	.sk-film .spine-entry::before { left: -21px; width: 21px; top: 26px; }
	.sk-film .spine-ico .sk-svg { width: 30px; height: 30px; }
	/* on a phone the tile sits in the text like a drop cap: the title wraps beside it, the rest runs the card's width */
	.sk-film .spine-entry { display: block; }
	.sk-film .spine-ico { float: left; margin: 0 11px 4px 0; }
	.sk-film .spine-body { display: block; }
	.sk-film .spine-body > * + * { margin-top: 8px; }
	.sk-film .spine-body .doc-entry-head { display: block; }
	.sk-film .spine-body .doc-entry-title { display: flex; align-items: center; min-height: 30px; margin-bottom: 4px; }
	.sk-film .spine-body .doc-new-tag { margin-left: 8px; vertical-align: middle; }
	.sk-film .spine-body .doc-shot, .sk-film .spine-body .doc-chips { clear: left; }
	.sk-si { width: 16px; height: 16px; margin: -8px 0 0 -8px; --si: 16px; }
}