/* Stroke's kit (21 Oct 2026, the Web Director's craft for Stroke Engine): ink #1c1b21, magenta #d23a7e, the bracket
	shape and cinema. The tile is stroke_kit.tile (ink square, the logo's brackets, a magenta glyph); stroke-kit.js plays
	its glyph and closes its brackets on hover or focus of its closest a / [data-sk-hot] / h2 / tr / li, and sends the
	slash across a .sk-cover. Here: the tile's hover and press, the cut, and where tiles sit (headings, the feature
	pages' banner and rows, the About's covers). */
.sk-tile { display: inline-flex; flex: none; line-height: 0; vertical-align: middle; }
.sk-svg { display: block; overflow: visible; transition: scale .6s var(--ease); }
@media (hover: hover) { :is(a, [data-sk-hot]):hover .sk-svg { scale: 1.08; transition-duration: .35s; } }
:is(a, [data-sk-hot]):focus-visible .sk-svg { scale: 1.08; transition-duration: .35s; }
:is(a, [data-sk-hot]):active .sk-svg { scale: .9; transition-duration: .4s; }

/* the About's lockup inline (stroke_kit.lockup): a whole-pixel box, so at rest it draws exactly as the master's <img> */
.doc svg.doc-lockup.sk-lockup { width: 300px; height: 84px; max-width: none; overflow: visible; }
@media (max-width: 560px) { .doc svg.doc-lockup.sk-lockup { width: 224px; height: 63px; } }

/* the cut: a magenta slash at the logo's angle crosses a cover once (stroke-kit.js) */
.sk-cover { position: relative; display: block; overflow: hidden; isolation: isolate; }
.sk-cut { position: absolute; left: 0; top: -25%; width: clamp(14px, 5%, 40px); height: 150%; border-radius: 999px; background: #d23a7e;
	opacity: 0; pointer-events: none; z-index: 3; will-change: transform; }

/* section headings: the tile, the words, a magenta slash and a hairline to the edge */
.doc-h:has(> .sk-tile) { display: flex; align-items: center; gap: 12px; }
.doc-h > .sk-tile { margin: -4px 0; }
.doc-h:has(> .sk-tile)::before { content: ""; order: 2; flex: none; width: 3px; height: 15px; margin-left: 2px; border-radius: 2px; background: #d23a7e; rotate: 12.5deg; }
.doc-h:has(> .sk-tile)::after { content: ""; order: 3; flex: 1; min-width: 24px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 9%, transparent); }

/* a feature page's banner: its first still in a film frame, the full width of the card */
.doc .sk-banner { display: grid; gap: 9px; margin: 8px calc(-1 * var(--st-pad-x, 0px)) 4px; }
.sk-banner figcaption { padding-inline: var(--st-pad-x, 0px); font-weight: 700; font-size: 13px; color: var(--muted); }
.sk-frame { padding-block: 11px; background: #000; }
.sk-shot { position: relative; display: block; aspect-ratio: 2.39 / 1; overflow: hidden; background: #0e0e12; }
.sk-shot img { position: absolute; display: block; }
.sk-fill .sk-still { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sk-focus-high .sk-still { object-position: 50% 32%; }
.sk-plate .sk-back { inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(26px) saturate(.85) brightness(.4); }
.sk-plate .sk-still { left: 50%; top: 50%; width: auto; height: auto; max-width: calc(100% - 64px); max-height: calc(100% - 32px); translate: -50% -50%;
	border-radius: 8px; box-shadow: 0 2px 6px rgb(0 0 0 / .4), 0 14px 40px rgb(0 0 0 / .5); }
.sk-vf { position: absolute; inset: 11px 0; pointer-events: none; z-index: 2; }
.sk-vf-l, .sk-vf-r { position: absolute; width: 13px; border: 2px solid rgb(244 244 246 / .62); }
.sk-vf-l { left: 20px; top: 19%; bottom: 15%; border-right: 0; border-radius: 7px 0 0 7px; }
.sk-vf-r { right: 20px; top: 15%; bottom: 19%; border-left: 0; border-radius: 0 7px 7px 0; }

/* "thing: what it does" tables as rows: a pill with the class's icon or a tile, the row lit magenta on hover */
.doc-table.sk-rows, .sk-rows tbody { display: block; }
.sk-rows tr { position: relative; display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); border-top: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
.sk-rows tr:first-child { border-top-color: transparent; }
.sk-rows tr::after { content: ""; position: absolute; inset: 1px -8px; border-radius: 12px; background: #d23a7e; opacity: 0; pointer-events: none;
	transition: opacity .6s var(--ease); }
@media (hover: hover) { .sk-rows tr:hover::after { opacity: .075; transition-duration: .35s; } }
.sk-rows td { display: block; border-top: 0; padding: 12px 10px 12px 0; }
.sk-rows td:first-child { display: flex; align-items: flex-start; padding-block: 6px; }
.sk-pill { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; min-height: 32px; padding: 4px 13px 4px 4px; border-radius: 999px;
	background: var(--paper); line-height: 1.2; }
.sk-pill > .sk-tile { margin: 0; }
.sk-pill-t { min-width: 0; }
.sk-ico { --si: 20px; width: 20px; height: 20px; margin: 2px; border-radius: 6px; }

/* the About's Features covers: the cut crosses the picture; the caption carries a tile */
.doc-gallery .sk-cover { border-radius: 14px; box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / .08), 0 4px 14px rgb(var(--shadow-rgb) / .1); transition: box-shadow .6s var(--ease); }
.doc-gallery .sk-cover img { box-shadow: none; border-radius: 0; }
@media (hover: hover) { .doc-gallery a:hover .sk-cover { box-shadow: 0 2px 4px rgb(var(--shadow-rgb) / .1), 0 10px 26px rgb(var(--shadow-rgb) / .16); transition-duration: .35s; } }
.doc-shot figcaption:has(> .sk-tile) { display: flex; align-items: center; gap: 9px; }
.sk-reel { padding-block: 6px; background: #000; }
.sk-reel img { display: block; width: 100%; }
.sk-reel .sk-vf { inset: 6px 0; opacity: 0; transition: opacity .6s var(--ease); }
@media (hover: hover) { a:hover .sk-reel .sk-vf { opacity: 1; transition-duration: .35s; } }
a:focus-visible .sk-reel .sk-vf { opacity: 1; transition-duration: .35s; }
.sk-reel .sk-vf-l, .sk-reel .sk-vf-r { width: 9px; border-width: 1.5px; }
.sk-reel .sk-vf-l { left: 12px; top: 22%; bottom: 18%; }
.sk-reel .sk-vf-r { right: 12px; top: 18%; bottom: 22%; }

@media (max-width: 760px) {
	.sk-frame { padding-block: 7px; }
	.sk-vf { inset: 7px 0; }
	.sk-vf-l, .sk-vf-r { width: 9px; border-width: 1.5px; }
	.sk-vf-l { left: 10px; }
	.sk-vf-r { right: 10px; }
	.sk-plate .sk-still { max-width: calc(100% - 44px); max-height: calc(100% - 20px); border-radius: 5px; }
	.sk-rows tr { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); }
	.sk-pill { gap: 7px; padding-right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.sk-svg, .sk-rows tr::after, .doc-gallery .sk-cover, .sk-reel .sk-vf { transition-duration: 0s !important; }
	.sk-cut { display: none; }
}