/* =============================================================================
   SPKF VELOCITY: the logo, alive.
   Tokens, base, signature components, block styles and motion. DESIGN.md has
   the long version. Rules of thumb:
   - Logo colours (orange, green, violet) are FILLS with white text. Never text on ink.
   - Everything leans forward at the logo's angle (--spkf-skew).
   - Motion is transform, opacity and clip-path only, and only when it is welcome.
   ============================================================================= */

/* ---------- Fallback faces, metric-matched to Kanit and Martian Mono (no CLS on swap) ---------- */
@font-face { font-family: "Kanit Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Roboto"); size-adjust: 100.55%; ascent-override: 109.4%; descent-override: 39.28%; line-gap-override: 0%; }
@font-face { font-family: "Kanit Display Fallback"; src: local("Arial Bold Italic"), local("Arial-BoldItalicMT"), local("Liberation Sans Bold Italic"), local("Roboto Black Italic"); font-weight: 900; font-style: italic; size-adjust: 92.39%; ascent-override: 119.06%; descent-override: 42.75%; line-gap-override: 0%; }
@font-face { font-family: "Martian Mono Fallback"; src: local("Courier New"), local("Liberation Mono"), local("Menlo"); size-adjust: 116.65%; ascent-override: 85.73%; descent-override: 17.15%; line-gap-override: 0%; }

/* ---------- Tokens (names are a contract: other plugins and the map app read them) ---------- */
:root {
	--spkf-ink: #08080B;
	--spkf-ink-2: #101015;
	--spkf-ink-3: #18181F;
	--spkf-line: #2A2A33;
	--spkf-chalk: #F4F4F6;
	--spkf-concrete: #A7A7B2;
	--spkf-body: #DCDCE2;
	--spkf-orange: #B85003;
	--spkf-green: #067500;
	--spkf-violet: #321DB4;
	--spkf-orange-hi: #FF8A3D;
	--spkf-green-hi: #3FD25A;
	--spkf-violet-hi: #A99BFF;
	--spkf-outline: #000;
	--spkf-white: #FFF;
	--spkf-tri: linear-gradient(90deg, var(--spkf-orange) 0 33.333%, var(--spkf-green) 0 66.666%, var(--spkf-violet) 0);

	--spkf-skew: -12deg;          /* the wordmark's slant, measured from the logo */
	--spkf-unskew: 12deg;
	--spkf-tilt: -5deg;           /* the sticker logo's rotation */
	--spkf-chev: polygon(0 0, 43.6% 0, 100% 50%, 43.6% 100%, 0 100%, 56.4% 50%);
	--spkf-slant: polygon(6% 0, 100% 0, 94% 100%, 0 100%);

	--spkf-display: Kanit, "Kanit Display Fallback", system-ui, sans-serif;
	--spkf-sans: Kanit, "Kanit Fallback", system-ui, sans-serif;
	--spkf-mono: "Martian Mono", "Martian Mono Fallback", ui-monospace, Menlo, monospace;

	--spkf-gut: clamp(16px, 4vw, 56px);
	--spkf-max: 1320px;
	--spkf-prose: 760px;
	--spkf-head: 64px;
	--spkf-admin: 0px;

	--spkf-out: cubic-bezier(.16, 1, .3, 1);
	--spkf-snap: cubic-bezier(.7, 0, .2, 1);
	--spkf-fast: .25s;
	--spkf-med: .5s;
	--spkf-slow: .9s;

	--glossary-highlight-underline: var(--spkf-orange-hi);
	--glossary-tooltip-bg: var(--spkf-ink-3);
	--glossary-tooltip-color: var(--spkf-chalk);
	color-scheme: dark;
}
@media (min-width: 1080px) { :root { --spkf-head: 72px; } }
body.admin-bar { --spkf-admin: 32px; }
@media (max-width: 782px) { body.admin-bar { --spkf-admin: 46px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--spkf-ink); scroll-padding-top: calc(var(--spkf-head) + var(--spkf-admin) + 16px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }
body { background: var(--spkf-ink); color: var(--spkf-body); overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis-weight: none; }
::selection { background: var(--spkf-orange); color: var(--spkf-white); }
img, svg, video { max-width: 100%; height: auto; }
:where(a) { text-underline-offset: .18em; text-decoration-thickness: 2px; text-decoration-color: var(--spkf-orange-hi); transition: text-decoration-color var(--spkf-fast), color var(--spkf-fast); }
:where(a):hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--spkf-chalk); outline-offset: 3px; }
:where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; overflow-wrap: normal; hyphens: manual; }
:where(p, li) { text-wrap: pretty; }
strong, b { font-weight: 600; color: var(--spkf-chalk); }
.screen-reader-text, .spkf-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link.screen-reader-text:focus, .spkf-skip:focus { clip-path: none; width: auto; height: auto; margin: 0; z-index: 1000; top: 12px; left: 12px; padding: 12px 18px; background: var(--spkf-chalk); color: var(--spkf-ink); font: italic 900 15px/1 var(--spkf-display); text-transform: uppercase; text-decoration: none; }
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main, .wp-site-blocks > .spkf-main { flex: 1 0 auto; }
.wp-site-blocks > * + * { margin-block-start: 0; }
main { position: relative; isolation: isolate; }
mark { background: var(--spkf-orange); color: var(--spkf-white); padding: 0 .2em; }

/* ---------- Type helpers ---------- */
.spkf-mono, .spkf-eyebrow { font-family: var(--spkf-mono); font-size: .75rem; line-height: 1.5; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-style: normal; }
.spkf-eyebrow { color: var(--spkf-concrete); display: flex; flex-wrap: wrap; align-items: center; gap: .4em .8em; margin: 0; }
.spkf-display { font-family: var(--spkf-display); font-style: italic; font-weight: 900; text-transform: uppercase; line-height: .9; letter-spacing: -.01em; }
.spkf-tint-o { color: var(--spkf-orange-hi); } .spkf-tint-g { color: var(--spkf-green-hi); } .spkf-tint-v { color: var(--spkf-violet-hi); }
.spkf-lede, .is-style-lede { font-size: var(--wp--preset--font-size--large); line-height: 1.45; color: var(--spkf-chalk); max-width: 60ch; }

/* Sticker type: white letters, black keyline, hard black offset, then a logo-colour offset. */
.spkf-sticker, .is-style-sticker {
	--st: var(--spkf-orange);
	color: var(--spkf-white);
	paint-order: stroke fill;
	-webkit-text-stroke: .1em var(--spkf-outline);
	text-shadow: .045em .055em 0 var(--spkf-outline), .09em .11em 0 var(--st);
	word-spacing: .06em;
	padding-right: .14em;
}
.spkf-sticker--g, .is-style-sticker-green { --st: var(--spkf-green); }
.spkf-sticker--v, .is-style-sticker-violet { --st: var(--spkf-violet); }

/* ---------- Chevrons (the logo's shape) ---------- */
.spkf-chev { display: inline-block; flex: none; width: .62em; height: .7em; background: currentColor; clip-path: var(--spkf-chev); transition: transform .35s var(--spkf-out); }
.spkf-chevs { display: block; width: auto; height: 1em; overflow: visible; }
.spkf-chevrow { display: inline-flex; gap: .06em; vertical-align: -.04em; }
.spkf-chevrow i { display: block; width: .52em; height: .74em; clip-path: var(--spkf-chev); }
.spkf-chevrow i:nth-child(1) { background: var(--spkf-orange); } .spkf-chevrow i:nth-child(2) { background: var(--spkf-green); } .spkf-chevrow i:nth-child(3) { background: var(--spkf-violet); }
.spkf-stripe { display: block; height: 6px; background: var(--spkf-tri); transform: skewX(var(--spkf-skew)); }

/* ---------- Blade buttons: skewed, black keyline, hard offset shadow ----------
   The blade is drawn by ::after (skewed to the logo angle) and the hover fill by ::before,
   so the label stays upright and core buttons need no extra markup. */
.spkf-btn, .wp-block-button__link, .wp-element-button, .wp-block-search__button, .wp-block-file__button, button.comment-reply-link, .comment-reply-link {
	--b-bg: var(--spkf-orange); --b-fg: var(--spkf-white); --b-sh: var(--spkf-outline); --b-line: var(--spkf-outline); --b-fill: var(--spkf-chalk); --b-fillfg: var(--spkf-ink);
	position: relative; isolation: isolate; z-index: 0;
	display: inline-flex; align-items: center; justify-content: center; gap: .7em;
	min-height: 52px; padding: 0 1.75em;
	background: transparent; color: var(--b-fg);
	border: 0; border-radius: 0; box-shadow: none;
	font: italic 900 .9375rem/1.1 var(--spkf-display); letter-spacing: .02em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
	cursor: pointer; transition: color .3s var(--spkf-out);
}
.wp-block-button__link.wp-block-button__link[class*="-background-color"], .wp-element-button.wp-element-button[class*="-background-color"] { background-color: transparent !important; }
.spkf-btn::after, .wp-block-button__link::after, .wp-element-button::after, .wp-block-search__button::after, .wp-block-file__button::after, .comment-reply-link::after {
	content: ""; position: absolute; inset: 0; z-index: -2; background: var(--b-bg); border: 2px solid var(--b-line);
	box-shadow: 5px 6px 0 0 var(--b-sh); transform: skewX(var(--spkf-skew));
	transition: transform .3s var(--spkf-out), box-shadow .3s var(--spkf-out);
}
.spkf-btn::before, .wp-block-button__link::before, .wp-element-button::before, .wp-block-search__button::before, .wp-block-file__button::before, .comment-reply-link::before {
	content: ""; position: absolute; inset: 2px; z-index: -1; background: var(--b-fill);
	transform: skewX(var(--spkf-skew)) scaleX(0); transform-origin: 0 50%; transition: transform .42s var(--spkf-snap);
}
.spkf-btn > span { display: inline-flex; align-items: center; gap: .7em; }
.wp-block-button__link { text-align: center; white-space: normal; }
:is(.spkf-btn, .wp-block-button__link, .wp-element-button, .wp-block-search__button, .comment-reply-link):is(:hover, :focus-visible) { color: var(--b-fillfg); }
:is(.spkf-btn, .wp-block-button__link, .wp-element-button, .wp-block-search__button, .comment-reply-link):is(:hover, :focus-visible)::after { transform: skewX(var(--spkf-skew)) translate(-2px, -2px); box-shadow: 8px 9px 0 0 var(--b-sh); }
:is(.spkf-btn, .wp-block-button__link, .wp-element-button, .wp-block-search__button, .comment-reply-link):is(:hover, :focus-visible)::before { transform: skewX(var(--spkf-skew)) scaleX(1); }
:is(.spkf-btn, .wp-block-button__link, .wp-element-button):active::after { transform: skewX(var(--spkf-skew)) translate(3px, 3px); box-shadow: 1px 2px 0 0 var(--b-sh); }
.spkf-btn:hover .spkf-chev, .wp-block-button__link:hover .spkf-chev { transform: translateX(4px); }
:is(.spkf-btn, .wp-block-button__link, .wp-element-button):focus-visible { outline: 0; }
:is(.spkf-btn, .wp-block-button__link, .wp-element-button):focus-visible::after { outline: 3px solid var(--spkf-chalk); outline-offset: 4px; }
.spkf-btn--green, .has-green-background-color.wp-block-button__link { --b-bg: var(--spkf-green); }
.spkf-btn--violet, .has-violet-background-color.wp-block-button__link { --b-bg: var(--spkf-violet); }
.spkf-btn--ghost, .is-style-outline > .wp-block-button__link, .wp-block-button.is-style-outline .wp-block-button__link { --b-bg: rgba(8, 8, 11, .6); --b-fg: var(--spkf-chalk); --b-sh: var(--spkf-violet); --b-line: var(--spkf-chalk); }
.spkf-btn--sm { min-height: 42px; padding: 0 1.2em; font-size: .8125rem; }
.spkf-btn--sm::after { box-shadow: 4px 5px 0 0 var(--b-sh); }
.spkf-btn--lg { min-height: 64px; padding: 0 2.1em; font-size: 1.125rem; }
.spkf-btn--block { display: flex; width: 100%; }
/* Inputs cannot draw pseudo-elements, so they are skewed whole. */
input[type="submit"], input[type="button"] {
	min-height: 52px; padding: 0 1.6em; background: var(--spkf-orange); color: var(--spkf-white); border: 2px solid var(--spkf-outline); border-radius: 0;
	box-shadow: 5px 6px 0 0 var(--spkf-outline); font: italic 900 .9375rem/1 var(--spkf-display); text-transform: uppercase; cursor: pointer;
	transform: skewX(var(--spkf-skew)); transition: transform .3s var(--spkf-out), box-shadow .3s var(--spkf-out), background .3s;
}
input[type="submit"]:hover, input[type="submit"]:focus-visible { background: var(--spkf-chalk); color: var(--spkf-ink); transform: skewX(var(--spkf-skew)) translate(-2px, -2px); box-shadow: 8px 9px 0 0 var(--spkf-outline); }
.wp-block-buttons { gap: 1rem 1.25rem; }
.wp-block-buttons > .wp-block-button { margin-right: 6px; }

.spkf-link { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; color: var(--spkf-chalk); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; padding-bottom: 3px; transition: background-size .35s var(--spkf-snap); }
.spkf-link .spkf-chev { color: var(--spkf-orange-hi); font-size: .8em; }
.spkf-link:hover { background-size: 0 2px; background-position: 100% 100%; }
.spkf-link:hover .spkf-chev { transform: translateX(4px); }

/* Sticker tags */
.spkf-tag { display: inline-flex; align-items: center; gap: .4em; height: 26px; padding: 0 .75em; background: var(--spkf-ink-3); color: var(--spkf-chalk); border: 1.5px solid var(--spkf-outline); box-shadow: 3px 3px 0 var(--t, var(--spkf-orange)); transform: skewX(var(--spkf-skew)); font: 500 .6875rem/1 var(--spkf-mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.spkf-tag > * { transform: skewX(var(--spkf-unskew)); }
.spkf-tag--g { --t: var(--spkf-green); } .spkf-tag--v { --t: var(--spkf-violet); }

/* HUD bits */
.spkf-hud { font: 500 .6875rem/1.5 var(--spkf-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--spkf-concrete); }
.spkf-hud b { color: var(--spkf-chalk); font-weight: 600; }
.spkf-hud__corners { position: absolute; inset: 0; pointer-events: none; }
.spkf-hud__corners::before, .spkf-hud__corners::after { content: ""; position: absolute; width: 18px; height: 18px; border: 0 solid rgba(244, 244, 246, .55); }
.spkf-hud__corners::before { top: 0; left: 0; border-width: 2px 0 0 2px; }
.spkf-hud__corners::after { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

/* =============================================================================
   HEADER
   ============================================================================= */
.spkf-header { position: fixed; top: var(--spkf-admin); left: 0; right: 0; z-index: 100; height: var(--spkf-head); view-transition-name: spkf-header; }
.spkf-header::before { content: ""; position: absolute; inset: 0; background: rgba(8, 8, 11, .88); border-bottom: 1px solid var(--spkf-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity .3s; }
.spkf-header.is-solid::before, .spkf-menu-open .spkf-header::before { opacity: 1; }
@media (max-width: 600px) { body.admin-bar .spkf-header { top: 0; } body.admin-bar { --spkf-admin: 0px; } }
.spkf-header__in { position: relative; height: 100%; max-width: calc(var(--spkf-max) + 2 * var(--spkf-gut)); margin-inline: auto; padding-inline: var(--spkf-gut); display: flex; align-items: center; gap: 20px; }
/* Header width follows the page: wrapped to .spkf-wrap everywhere, edge to edge on full-width templates
   (body.spkf-full-width, set per template in inc/setup.php), where it also sits solid over the app. */
.spkf-full-width .spkf-header__in { max-width: none; padding-inline: 16px; } /* lines up with the map's floating panels */
.spkf-full-width .spkf-header::before { opacity: 1; animation: none; }
/* The header's parts carry their own transition names, so moving between a wrapped and a full-width
   template slides them into place instead of cross-fading two logos. Above the header and the wipe. */
.spkf-header__logo { view-transition-name: spkf-logo; }
.spkf-nav { view-transition-name: spkf-nav; }
.spkf-header__cta { view-transition-name: spkf-cta; }
.spkf-burger { view-transition-name: spkf-burger; }
::view-transition-group(spkf-logo), ::view-transition-group(spkf-nav), ::view-transition-group(spkf-cta), ::view-transition-group(spkf-burger) { z-index: 4; animation-duration: .48s; animation-timing-function: cubic-bezier(.25, .9, .1, 1); }
.spkf-header__logo { display: block; flex: none; margin-right: auto; line-height: 0; padding: 6px 0; }
.spkf-header__logo .spkf-logo { width: auto; height: 30px; overflow: visible; }
@media (min-width: 1080px) { .spkf-header__logo .spkf-logo { height: 34px; } }
.spkf-logo__c { transition: transform .45s var(--spkf-out); }
.spkf-header__logo:hover .spkf-logo__c--o { transform: translateX(10px); }
.spkf-header__logo:hover .spkf-logo__c--g { transform: translateX(22px); }
.spkf-header__logo:hover .spkf-logo__c--v { transform: translateX(34px); }
.spkf-header__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--spkf-tri); transform-origin: 0 50%; transform: scaleX(var(--spkf-progress, 0)); }

.spkf-nav { display: none; }
.spkf-nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.spkf-nav__item { position: relative; }
.spkf-nav__link, .spkf-nav__btn { position: relative; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 13px; background: none; border: 0; color: var(--spkf-chalk); cursor: pointer; font: italic 900 .875rem/1 var(--spkf-display); letter-spacing: .03em; text-transform: uppercase; text-decoration: none; }
.spkf-nav__link::after, .spkf-nav__btn::before { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 3px; background: var(--spkf-tri); transform: scaleX(0) skewX(var(--spkf-skew)); transform-origin: 0 50%; transition: transform .35s var(--spkf-snap); }
.spkf-nav__link:hover::after, .spkf-nav__link[aria-current="page"]::after, .spkf-nav__btn:hover::before, .spkf-nav__btn[aria-expanded="true"]::before, .spkf-nav__item.is-current > .spkf-nav__btn::before { transform: scaleX(1) skewX(var(--spkf-skew)); }
.spkf-nav__btn::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--spkf-out); }
.spkf-nav__btn[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.spkf-nav__sub { position: absolute; top: calc(100% + 4px); left: 0; min-width: 250px; margin: 0; padding: 8px; list-style: none; background: var(--spkf-ink-2); border: 2px solid var(--spkf-outline); box-shadow: 6px 7px 0 0 var(--spkf-violet); opacity: 0; visibility: hidden; transform: translateY(-8px) skewX(-3deg); transform-origin: 0 0; transition: opacity .2s, transform .35s var(--spkf-out), visibility 0s .35s; }
.spkf-nav__item:nth-child(3n+1) .spkf-nav__sub { box-shadow: 6px 7px 0 0 var(--spkf-orange); }
.spkf-nav__item:nth-child(3n+2) .spkf-nav__sub { box-shadow: 6px 7px 0 0 var(--spkf-green); }
.spkf-nav__btn[aria-expanded="true"] + .spkf-nav__sub, .no-js .spkf-nav__item:hover > .spkf-nav__sub, .no-js .spkf-nav__item:focus-within > .spkf-nav__sub { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .35s var(--spkf-out); }
.spkf-nav__sub a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; color: var(--spkf-chalk); font-weight: 600; text-decoration: none; transition: background .2s, transform .3s var(--spkf-out); }
.spkf-nav__sub a .spkf-chev { color: var(--spkf-orange-hi); font-size: .8em; opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .3s var(--spkf-out); }
.spkf-nav__sub a:hover, .spkf-nav__sub a:focus-visible, .spkf-nav__sub a[aria-current="page"] { background: var(--spkf-ink-3); transform: translateX(4px); }
.spkf-nav__sub a:hover .spkf-chev, .spkf-nav__sub a:focus-visible .spkf-chev, .spkf-nav__sub a[aria-current="page"] .spkf-chev { opacity: 1; transform: none; }
.spkf-header__cta { display: none; }

.spkf-burger { position: relative; z-index: 2; width: 48px; height: 44px; display: grid; place-content: center; gap: 7px; background: var(--spkf-ink); border: 2px solid var(--spkf-chalk); box-shadow: 4px 4px 0 var(--spkf-orange); color: var(--spkf-chalk); transform: skewX(var(--spkf-skew)); cursor: pointer; padding: 0; }
.spkf-burger i { display: block; width: 20px; height: 2px; background: currentColor; transition: transform .4s var(--spkf-snap); }
.spkf-burger[aria-expanded="true"] i:first-of-type { transform: translateY(4.5px) rotate(45deg); }
.spkf-burger[aria-expanded="true"] i:last-of-type { transform: translateY(-4.5px) rotate(-45deg); }

@media (min-width: 1080px) {
	.spkf-nav { display: block; }
	.spkf-header__cta { display: inline-flex; }
	.spkf-burger { display: none; }
}

/* Mobile menu: full screen, outside the header so nothing traps its fixed position. */
.spkf-menu { position: fixed; inset: 0; z-index: 99; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--spkf-head) + var(--spkf-admin) + 24px) var(--spkf-gut) 28px; background: var(--spkf-ink); visibility: hidden; transform: translateX(-104%) skewX(-6deg); transform-origin: 0 0; transition: transform .55s var(--spkf-snap), visibility 0s .55s; }
.spkf-menu.is-open { visibility: visible; transform: none; transition: transform .55s var(--spkf-snap); }
.spkf-menu__bars { display: flex; gap: 6px; margin-bottom: 22px; }
.spkf-menu__bars i { width: 40px; height: 7px; transform: skewX(var(--spkf-skew)); }
.spkf-menu__bars i:nth-child(1) { background: var(--spkf-orange); } .spkf-menu__bars i:nth-child(2) { background: var(--spkf-green); } .spkf-menu__bars i:nth-child(3) { background: var(--spkf-violet); }
.spkf-menu__list { margin: 0; padding: 0; list-style: none; }
.spkf-menu__list > li { padding: 10px 0; border-bottom: 1px solid var(--spkf-line); opacity: 0; transform: translate(-40px, 20px) skewX(-8deg); transition: opacity .4s, transform .6s var(--spkf-out); transition-delay: calc(.1s + var(--i, 0) * .05s); }
.spkf-menu.is-open .spkf-menu__list > li { opacity: 1; transform: none; }
.spkf-menu__top { display: inline-block; color: var(--spkf-white); font: italic 900 clamp(2rem, 9.5vw, 3.25rem)/1.02 var(--spkf-display); text-transform: uppercase; text-decoration: none; padding-right: .15em; }
.spkf-menu__top[aria-current="page"] { text-shadow: .06em .07em 0 var(--spkf-orange); }
.spkf-menu__sub { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 4px 0 0; padding: 0; list-style: none; }
.spkf-menu__sub a { display: inline-block; padding: 6px 0; color: var(--spkf-concrete); font-weight: 600; text-decoration: none; }
.spkf-menu__sub a:hover, .spkf-menu__sub a[aria-current="page"] { color: var(--spkf-chalk); }
.spkf-menu__foot { margin-top: auto; padding-top: 28px; display: grid; gap: 16px; justify-items: start; }
.spkf-menu-open { overflow: hidden; }

/* =============================================================================
   HEROES (page, post, archive, search, 404, spot)
   ============================================================================= */
.spkf-hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--spkf-head) + var(--spkf-admin) + clamp(28px, 6vw, 72px)) 0 clamp(44px, 7vw, 104px); background: var(--spkf-ink); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.2vw), 0 100%); margin-bottom: clamp(8px, 2vw, 24px); }
.spkf-hero__in { position: relative; z-index: 2; width: 100%; max-width: calc(var(--spkf-max) + 2 * var(--spkf-gut)); margin-inline: auto; padding-inline: var(--spkf-gut); display: grid; gap: clamp(20px, 3vw, 36px); align-items: end; }
.spkf-hero__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 0; list-style: none; }
.spkf-hero__crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.spkf-hero__crumbs li + li::before { content: ""; width: .55em; height: .65em; background: var(--spkf-orange-hi); clip-path: var(--spkf-chev); }
.spkf-hero__crumbs a { color: var(--spkf-concrete); text-decoration: none; }
.spkf-hero__crumbs a:hover { color: var(--spkf-chalk); }
.spkf-hero__crumbs [aria-current] { color: var(--spkf-chalk); }
.spkf-hero__title { margin: 0; font-size: clamp(2.6rem, 1rem + 8vw, 7.25rem); line-height: .9; transform-origin: 0 100%; rotate: -3deg; max-width: 10.2em; }
.spkf-hero__title.is-long { font-size: clamp(2.2rem, .9rem + 5.4vw, 5.25rem); max-width: 12.25em; }
.spkf-hero__title.is-xlong { font-size: clamp(1.9rem, .9rem + 3.6vw, 4rem); max-width: 15em; rotate: -2deg; }
.spkf-hero__lede { margin: 0; max-width: 33.85em; color: var(--spkf-body); font-size: var(--wp--preset--font-size--large); line-height: 1.45; }
.spkf-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.spkf-hero__hud { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.spkf-hero__hud span:first-child { color: var(--spkf-orange-hi); }

/* Art: the big chevrons when there is no photo, a slanted photo panel when there is. */
.spkf-hero__art { position: absolute; z-index: 0; top: 0; bottom: 0; right: 0; width: 100%; pointer-events: none; }
.spkf-hero__chevs { position: absolute; right: -14%; top: 50%; height: 78%; translate: 0 -50%; opacity: .2; }
.spkf-hero__chevs .spkf-chevs { height: 100%; }
@media (min-width: 900px) { .spkf-hero__chevs { right: -4%; opacity: .9; height: 92%; } .spkf-hero--has-photo .spkf-hero__chevs { right: -9%; top: auto; bottom: -6%; height: 58%; translate: 0 0; opacity: 1; } }
/* The photo is stuck on like the logo sticker: slanted, a black keyline and a hard offset in a logo colour. */
.spkf-hero__shot { position: relative; z-index: 1; isolation: isolate; margin: 0 10px 12px 0; }
.spkf-hero__shot::before, .spkf-hero__shot::after { content: ""; position: absolute; inset: 0; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }
.spkf-hero__shot::before { z-index: -1; background: var(--spkf-outline); transform: scale(1.025, 1.03); }
.spkf-hero__shot::after { z-index: -2; background: var(--spkf-violet); transform: translate(12px, 14px); }
.spkf-hero__photo { position: relative; z-index: 1; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); background: var(--spkf-ink-3); }
.spkf-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.92) contrast(1.06); }
.spkf-hero__photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 8px; background: var(--spkf-tri); }
@media (min-width: 900px) {
	.spkf-hero { min-height: min(66vh, 680px); display: flex; align-items: center; }
	.spkf-hero--has-photo .spkf-hero__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; column-gap: clamp(32px, 4vw, 72px); }
	.spkf-hero--has-photo .spkf-hero__shot { grid-row: 1; grid-column: 2; }
	.spkf-hero--has-photo .spkf-hero__photo { aspect-ratio: 5 / 4; }
	.spkf-hero--has-photo .spkf-hero__text { grid-row: 1; grid-column: 1; }
}
.spkf-hero__text { display: grid; gap: clamp(16px, 2.4vw, 28px); justify-items: start; min-width: 0; }

/* Speed streaks: thin trails in the logo colours that shoot across the hero. */
.spkf-streaks { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: none; }
.spkf-streaks i { position: absolute; left: 0; top: var(--t); width: var(--w); height: var(--h, 2px); opacity: .85; background: linear-gradient(90deg, transparent, var(--c)); transform: translateX(-110%); }
.spkf-streaks i::after { content: ""; position: absolute; right: -9px; top: 50%; width: 11px; height: 13px; margin-top: -6.5px; background: var(--c); clip-path: var(--spkf-chev); }

/* Edge art (pages, posts, spots, archives, search): no chevron slab. The photo runs off the side of the
   screen with the logo colours as slanted bands down its leading edge, the page wipe's bands parked;
   without a photo the bands lean off the right-hand edge. 21.26cqh is tan(12deg) of the panel height,
   so the photo's cut and the bands share the wordmark's slant at any size. */
.spkf-hero__bands { position: absolute; pointer-events: none; }
.spkf-hero__bands i { position: absolute; top: 0; bottom: 0; width: var(--bw); transform: skewX(var(--spkf-skew)); transform-origin: 0 100%; }
.spkf-hero__bands i:nth-child(1) { --k: 0; background: var(--spkf-orange); }
.spkf-hero__bands i:nth-child(2) { --k: 1; background: var(--spkf-green); }
.spkf-hero__bands i:nth-child(3) { --k: 2; background: var(--spkf-violet); }
/* Without a photo: a tri-colour hem along the hero's slanted bottom edge (the hero's clip rises 3.2vw
   over 100vw, so 1.833deg), and on wide screens the bands lean off the right-hand edge as well. */
.spkf-hero--edge:not(.spkf-hero--has-photo)::after { content: ""; position: absolute; z-index: 1; left: 0; bottom: 0; width: 101%; height: 15px; transform: rotate(-1.833deg); transform-origin: 0 100%; pointer-events: none;
	background: linear-gradient(180deg, var(--spkf-orange) 0 5px, var(--spkf-green) 0 10px, var(--spkf-violet) 0); }
.spkf-hero--edge .spkf-hero__art { display: none; top: calc(var(--spkf-head) + var(--spkf-admin) + 10px); }
.spkf-hero--edge .spkf-hero__art .spkf-hero__bands { inset: 0; }
.spkf-hero--edge .spkf-hero__art .spkf-hero__bands i { right: calc(var(--r) + (2 - var(--k)) * (var(--bw) + var(--gap))); }
.spkf-hero--edge .spkf-hero__shot { margin: 6px calc(-1 * var(--spkf-gut)) 0; aspect-ratio: 4 / 3; container-type: size; }
.spkf-hero--edge .spkf-hero__shot::before, .spkf-hero--edge .spkf-hero__shot::after, .spkf-hero--edge .spkf-hero__photo::after { content: none; }
.spkf-hero--edge .spkf-hero__photo { height: 100%; aspect-ratio: auto; clip-path: polygon(0 9%, 100% 0, 100% 100%, 0 100%); }
.spkf-hero--edge .spkf-hero__shot .spkf-hero__bands { --bw: 7px; --gap: 4px; inset: 0; z-index: 2; clip-path: polygon(0 9%, 100% 0, 100% 100%, 0 100%); }
.spkf-hero--edge .spkf-hero__shot .spkf-hero__bands i { left: calc(var(--spkf-gut) - 4px + var(--k) * (var(--bw) + var(--gap))); }
.spkf-hero__marks { position: absolute; z-index: 3; top: 12%; right: var(--spkf-gut); bottom: 14px; width: 24px; pointer-events: none; --c: rgba(244, 244, 246, .85);
	background: linear-gradient(var(--c), var(--c)) 100% 0 / 24px 2px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 2px 24px no-repeat,
		linear-gradient(var(--c), var(--c)) 100% 100% / 24px 2px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 2px 24px no-repeat; }
.spkf-hero--edge.spkf-hero--has-photo { padding-bottom: 0; }
@media (min-width: 600px) and (max-width: 899px) { .spkf-hero--edge .spkf-hero__shot { aspect-ratio: 16 / 9; } }
@media (min-width: 900px) {
	.spkf-hero--edge .spkf-hero__art { display: block; }
	.spkf-hero--edge .spkf-hero__art .spkf-hero__bands { --bw: clamp(30px, 3.2vw, 52px); --gap: clamp(8px, .9vw, 14px); --r: clamp(24px, 4vw, 72px); }
	.spkf-hero--edge:not(.spkf-hero--has-photo) .spkf-hero__text { max-width: 66%; }
	.spkf-hero--edge.spkf-hero--has-photo { min-height: min(76vh, 760px); padding-bottom: clamp(44px, 7vw, 104px); }
	.spkf-hero--edge.spkf-hero--has-photo .spkf-hero__in { position: static; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.spkf-hero--edge.spkf-hero--has-photo .spkf-hero__text { position: relative; z-index: 2; grid-column: 1; }
	.spkf-hero--edge .spkf-hero__shot { position: absolute; z-index: 1; top: calc(var(--spkf-head) + var(--spkf-admin)); right: 0; bottom: 0; width: 44vw; margin: 0; aspect-ratio: auto; }
	.spkf-hero--edge .spkf-hero__photo { clip-path: polygon(21.26cqh 0, 100% 0, 100% 100%, 0 100%); }
	.spkf-hero--edge .spkf-hero__shot .spkf-hero__bands { --bw: 12px; --gap: 7px; clip-path: none; }
	.spkf-hero--edge .spkf-hero__shot .spkf-hero__bands i { left: calc((var(--k) - 3) * (var(--bw) + var(--gap))); }
	.spkf-hero__marks { top: 22px; bottom: calc(3.2vw + 18px); right: clamp(18px, 3vw, 48px); }
}

/* Simple heroes for archives and utility pages */
.spkf-hero--post .spkf-hero__shot::after { background: var(--spkf-orange); }
.spkf-hero--spot .spkf-hero__shot::after { background: var(--spkf-green); }
.spkf-hero--archive, .spkf-hero--search, .spkf-hero--404 { min-height: 0; }
@media (min-width: 900px) { .spkf-hero--archive, .spkf-hero--search { min-height: min(52vh, 520px); } }
.spkf-hero__search { width: min(100%, 560px); }

/* =============================================================================
   CONTENT (post content and the blocks in it)
   ============================================================================= */
.spkf-content { position: relative; padding-block: clamp(8px, 3vw, 40px) clamp(56px, 8vw, 112px); }
.spkf-content > * { margin-block: 0; }
.spkf-content > * + * { margin-block-start: 1.35rem; }
.spkf-content :where(p, li) { color: var(--spkf-body); }
.spkf-content > p:first-child, .spkf-content > .is-style-lede { font-size: var(--wp--preset--font-size--large); line-height: 1.5; color: var(--spkf-chalk); }
.spkf-content :where(h2, h3, h4) { color: var(--spkf-chalk); scroll-margin-top: calc(var(--spkf-head) + 24px); }
.spkf-content > :where(h2, .wp-block-heading:is(h2)) { margin-block-start: clamp(2.75rem, 6vw, 4.5rem); }
.spkf-content > :where(h3, h4) { margin-block-start: 2.25rem; }
.spkf-content > :where(h2, h3, h4) + * { margin-block-start: 1rem; }
.spkf-content h2, .spkf-h2 { --st: var(--spkf-orange); font-size: clamp(2rem, 1.2rem + 3.6vw, 3.75rem); color: var(--spkf-white); paint-order: stroke fill; -webkit-text-stroke: .1em var(--spkf-outline); text-shadow: .045em .055em 0 var(--spkf-outline), .085em .1em 0 var(--st); padding-right: .14em; }
.spkf-content h2:nth-of-type(3n+2) { --st: var(--spkf-green); }
.spkf-content h2:nth-of-type(3n) { --st: var(--spkf-violet); }
.spkf-content h3 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem); }
.spkf-content h3:not(.wp-block-accordion-heading)::before { content: ""; display: inline-block; width: .5em; height: .62em; margin-right: .32em; vertical-align: .02em; background: var(--spkf-orange); clip-path: var(--spkf-chev); }
.spkf-content h4 { font-size: var(--wp--preset--font-size--large); }
.spkf-content .is-demoted-h1 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem); -webkit-text-stroke: 0; text-shadow: none; color: var(--spkf-chalk); }
.spkf-content :where(a:not([class])) { color: var(--spkf-chalk); font-weight: 600; }

/* Lists: small chevrons in the logo colours. */
.spkf-content :where(ul:not([class*="wp-block-"]), ul.wp-block-list) { list-style: none; padding-left: 1.6em; }
.spkf-content :where(ul:not([class*="wp-block-"]), ul.wp-block-list) > li { position: relative; }
.spkf-content :where(ul:not([class*="wp-block-"]), ul.wp-block-list) > li::before { content: ""; position: absolute; left: -1.45em; top: .52em; width: .55em; height: .62em; background: var(--spkf-orange); clip-path: var(--spkf-chev); }
.spkf-content :where(ul:not([class*="wp-block-"]), ul.wp-block-list) > li:nth-child(3n+2)::before { background: var(--spkf-green-hi); }
.spkf-content :where(ul:not([class*="wp-block-"]), ul.wp-block-list) > li:nth-child(3n)::before { background: var(--spkf-violet-hi); }
.spkf-content ol { padding-left: 1.6em; }
.spkf-content ol > li::marker { font: italic 900 1em var(--spkf-display); color: var(--spkf-orange-hi); }
.spkf-content li + li { margin-top: .5em; }
.spkf-content li > :where(ul, ol) { margin-top: .5em; }

/* Quotes */
.wp-block-quote { margin-inline: 0; }
.wp-block-quote p { color: var(--spkf-chalk); }
.wp-block-quote cite { display: block; margin-top: .75em; }
.wp-block-pullquote { padding: 1.5em 0; text-align: left; }
.wp-block-pullquote blockquote { margin: 0; }

/* Separators: the tri-colour stripe */
.wp-block-separator, .spkf-content hr { border: 0; height: 6px; max-width: 120px; margin-inline: 0; background: var(--spkf-tri); opacity: 1; transform: skewX(var(--spkf-skew)); }
.wp-block-separator.is-style-wide, .wp-block-separator.alignwide, .wp-block-separator.alignfull { max-width: none; height: 3px; }
.wp-block-separator.is-style-dots { background: none; height: auto; max-width: none; transform: none; }
.wp-block-separator.is-style-dots::before { color: var(--spkf-orange-hi); }

/* Tables */
.wp-block-table { overflow-x: auto; }
.wp-block-table table, .spkf-content table { width: 100%; border-collapse: collapse; border: 2px solid var(--spkf-outline); background: var(--spkf-ink-2); box-shadow: 6px 7px 0 var(--spkf-violet); }
.wp-block-table :where(th, td), .spkf-content :where(th, td) { padding: .8em 1em; border: 1px solid var(--spkf-line); text-align: left; vertical-align: top; color: var(--spkf-body); }
.wp-block-table thead, .spkf-content thead { border-bottom: 3px solid var(--spkf-orange); }
.wp-block-table th, .spkf-content th { font: 500 .75rem/1.4 var(--spkf-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--spkf-chalk); background: var(--spkf-ink-3); }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--spkf-ink-3); }
.wp-block-table figcaption { margin-top: 1em; }

/* Groups with a background read as raised panels with a sticker shadow. */
.spkf-content .wp-block-group.has-background { padding: clamp(20px, 3vw, 36px); border: 2px solid var(--spkf-outline); box-shadow: 7px 8px 0 0 var(--spkf-green); }
.spkf-content .wp-block-group.has-background:nth-of-type(2n) { box-shadow: 7px 8px 0 0 var(--spkf-violet); }
.spkf-content .wp-block-group.has-background > * + * { margin-block-start: 1rem; }
.spkf-content .wp-block-group.has-background > :first-child { margin-top: 0; }
.spkf-content .wp-block-group.has-background h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); }

/* Columns */
.wp-block-columns { gap: clamp(20px, 3vw, 48px); }

/* Images: slanted panels that reveal through a skewed mask. */
.spkf-content :where(.wp-block-image, figure.wp-caption, .wp-block-post-featured-image) { position: relative; }
.spkf-content .wp-block-image img, .spkf-content > p > img, .spkf-content img.aligncenter, .spkf-content .wp-caption img { display: block; clip-path: var(--spkf-slant); }
.spkf-content .wp-block-image.is-style-rounded img { clip-path: none; border-radius: 0; }
.spkf-content .wp-block-image figcaption, .wp-caption-text, .wp-element-caption { margin-top: .75em; text-align: left; }
.spkf-content :where(.alignleft) { float: left; margin: .3em 1.5em 1em 0; max-width: 50%; }
.spkf-content :where(.alignright) { float: right; margin: .3em 0 1em 1.5em; max-width: 50%; }
.spkf-content :where(.aligncenter) { margin-inline: auto; }
.spkf-content::after { content: ""; display: table; clear: both; }
.wp-caption { max-width: 100%; }

/* Classic [gallery] */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 10px; margin: 2rem 0; }
.gallery br { display: none; }
.gallery .gallery-item { margin: 0; overflow: hidden; }
.gallery img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; clip-path: none !important; transition: transform .6s var(--spkf-out); }
.gallery a:hover img { transform: scale(1.05); }
.wp-block-gallery.has-nested-images figure.wp-block-image img { clip-path: none; }

/* Embeds: framed like a sticker */
.wp-block-embed { margin-inline: 0; }
.wp-block-embed__wrapper { position: relative; border: 2px solid var(--spkf-outline); box-shadow: 8px 9px 0 0 var(--spkf-orange); background: var(--spkf-ink-2); }
.wp-block-embed.is-type-video .wp-block-embed__wrapper iframe { display: block; width: 100%; height: 100%; }
.wp-block-video video { border: 2px solid var(--spkf-outline); box-shadow: 8px 9px 0 0 var(--spkf-orange); }

/* Cover (legacy content) */
.wp-block-cover { overflow: hidden; }
.spkf-content .wp-block-cover { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 0 100%); }

/* Accordion (core, used for FAQs): concrete drawers with a chevron toggle. */
.wp-block-accordion { margin-block: 1.5rem; }
.wp-block-accordion-heading { margin: 0; }
.wp-block-accordion-heading__toggle { gap: 16px; padding: 1.1rem 0; color: var(--spkf-chalk); text-align: left; }
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title { text-decoration: none; }
.wp-block-accordion-heading__toggle-title { transition: transform .35s var(--spkf-out); }
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title { transform: translateX(6px); }
.wp-block-accordion-heading__toggle-icon { flex: none; width: 34px; height: 34px; font-size: 0; position: relative; background: var(--spkf-ink-3); border: 2px solid var(--spkf-outline); box-shadow: 3px 3px 0 var(--spkf-orange); transform: skewX(var(--spkf-skew)); }
.wp-block-accordion-heading__toggle-icon::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 12px; margin: -6px 0 0 -4px; background: var(--spkf-chalk); clip-path: var(--spkf-chev); transform: skewX(var(--spkf-unskew)) rotate(90deg); transition: transform .35s var(--spkf-out); }
.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon { transform: skewX(var(--spkf-skew)); background: var(--spkf-orange); }
.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon::before { transform: skewX(var(--spkf-unskew)) rotate(-90deg); }
.wp-block-accordion-item:nth-child(3n+2) .wp-block-accordion-heading__toggle-icon { box-shadow: 3px 3px 0 var(--spkf-green); }
.wp-block-accordion-item:nth-child(3n) .wp-block-accordion-heading__toggle-icon { box-shadow: 3px 3px 0 var(--spkf-violet); }
.wp-block-accordion-item:not(.is-open) > .wp-block-accordion-panel { display: none; }
.wp-block-accordion-panel > * + * { margin-top: .9rem; }
.wp-block-accordion-panel p { color: var(--spkf-body); }

/* Details (core) */
.wp-block-details { border-block: 1px solid var(--spkf-line); padding: 1rem 0; }
.wp-block-details summary { font: italic 900 1.125rem/1.1 var(--spkf-display); text-transform: uppercase; cursor: pointer; color: var(--spkf-chalk); }

/* Latest posts (legacy home content) */
.wp-block-latest-posts { padding: 0; list-style: none; }
.wp-block-latest-posts li { padding: 1rem 0; border-bottom: 1px solid var(--spkf-line); }
.wp-block-latest-posts__post-title { font: italic 900 1.25rem/1.05 var(--spkf-display); text-transform: uppercase; text-decoration: none; color: var(--spkf-chalk); }
.wp-block-latest-posts__post-date { display: block; margin-top: .4em; font: 500 .75rem var(--spkf-mono); text-transform: uppercase; color: var(--spkf-concrete); }

/* Forms */
input:where([type="text"], [type="email"], [type="url"], [type="search"], [type="tel"], [type="password"], [type="number"]), textarea, select {
	width: 100%; max-width: 100%; box-sizing: border-box; min-height: 48px; padding: .7em .9em;
	background: var(--spkf-ink-2); color: var(--spkf-chalk); border: 2px solid #3A3A46; border-radius: 0;
	font: 400 1rem/1.4 var(--spkf-sans);
}
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--spkf-violet-hi); outline-offset: 1px; border-color: var(--spkf-chalk); }
::placeholder { color: #8B8B96; }
label { color: var(--spkf-chalk); font-weight: 600; }
.wp-block-search__inside-wrapper { display: flex; gap: 10px; border: 0; padding: 0; }
.wp-block-search__input { flex: 1; transform: skewX(var(--spkf-skew)); }
.wp-block-search__button { margin: 0; }

/* Glossary terms (GlossPress light mode) */
.glossary-highlight { border-bottom: 1.5px dotted var(--spkf-orange-hi); }
.glossary-highlight::after { content: "" !important; width: .42em !important; height: .48em !important; border: 0 !important; border-radius: 0 !important; margin-left: .18em !important; background: var(--spkf-orange-hi); clip-path: var(--spkf-chev); vertical-align: .32em !important; opacity: .9 !important; }
.glossary-tooltip { border-radius: 0 !important; border: 2px solid var(--spkf-outline) !important; box-shadow: 5px 6px 0 var(--spkf-violet) !important; font-family: var(--spkf-sans) !important; }

/* =============================================================================
   CARDS, NEWS GRID, PAGINATION
   ============================================================================= */
.spkf-wrap { width: 100%; max-width: calc(var(--spkf-max) + 2 * var(--spkf-gut)); margin-inline: auto; padding-inline: var(--spkf-gut); }
.spkf-grid { padding-block: clamp(8px, 2vw, 24px) clamp(64px, 8vw, 120px); }
.spkf-grid .wp-block-post-template, .spkf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 36px); margin: 0; padding: 0; list-style: none; }
.spkf-card { position: relative; display: grid; gap: 12px; align-content: start; }
.spkf-card .wp-block-post-featured-image, .spkf-card__media { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); background: var(--spkf-ink-3); transition: transform .5s var(--spkf-out), clip-path .5s var(--spkf-out); }
.spkf-card .wp-block-post-featured-image a { display: block; height: 100%; }
.spkf-card .wp-block-post-featured-image img, .spkf-card__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.06); transition: transform .7s var(--spkf-out), filter .4s; }
.spkf-card .wp-block-post-featured-image::after, .spkf-card__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--spkf-tri); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--spkf-snap); }
.spkf-card:hover .wp-block-post-featured-image, .spkf-card:focus-within .wp-block-post-featured-image, .spkf-card:hover .spkf-card__media { clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%); }
.spkf-card:hover img, .spkf-card:focus-within img { transform: scale(1.06); filter: saturate(1) contrast(1.08); }
.spkf-card:hover .wp-block-post-featured-image::after, .spkf-card:focus-within .wp-block-post-featured-image::after, .spkf-card:hover .spkf-card__media::after { transform: none; }
.spkf-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 4px 0 0; }
.spkf-card__meta .wp-block-post-terms a { color: var(--spkf-orange-hi); }
.spkf-card:nth-child(3n+2) .spkf-card__meta .wp-block-post-terms a { color: var(--spkf-green-hi); }
.spkf-card:nth-child(3n) .spkf-card__meta .wp-block-post-terms a { color: var(--spkf-violet-hi); }
.wp-block-post-terms a[href*="/uncategori"], .wp-block-post-terms a[href*="/uncategori"] + .wp-block-post-terms__separator { display: none; }
.spkf-card .wp-block-post-title, .spkf-card__title { margin: 0; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem); line-height: 1.02; padding-right: .2em; }
.spkf-card .wp-block-post-title a, .spkf-card__title a { color: var(--spkf-chalk); text-decoration: none; background: linear-gradient(var(--spkf-orange-hi), var(--spkf-orange-hi)) 0 100% / 0 3px no-repeat; transition: background-size .45s var(--spkf-snap); }
.spkf-card:hover .wp-block-post-title a, .spkf-card .wp-block-post-title a:focus-visible, .spkf-card:hover .spkf-card__title a { background-size: 100% 3px; }
/* The whole card is clickable through the title link. */
.spkf-card .wp-block-post-title a::after, .spkf-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.spkf-card .wp-block-post-excerpt { margin: 0; }
.spkf-card .wp-block-post-excerpt__more-text { display: none; }
.spkf-card .wp-block-post-excerpt__excerpt { margin: 0; }
.spkf-grid--featured .wp-block-post-template > li:first-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
	.spkf-grid--featured .wp-block-post-template > li:first-child .spkf-card { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; column-gap: clamp(24px, 3vw, 48px); }
	.spkf-grid--featured .wp-block-post-template > li:first-child .wp-block-post-featured-image { grid-row: 1 / span 5; aspect-ratio: 16 / 9; }
	.spkf-grid--featured .wp-block-post-template > li:first-child .wp-block-post-title { font-size: clamp(2rem, 1.2rem + 2.2vw, 3.25rem); }
}

.wp-block-query-pagination { margin-top: clamp(40px, 6vw, 72px); gap: 10px; align-items: center; }
.wp-block-query-pagination-numbers { display: flex; flex-wrap: wrap; gap: 6px; }
.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 12px; border: 2px solid var(--spkf-outline); background: var(--spkf-ink-2); color: var(--spkf-chalk); text-decoration: none; transform: skewX(var(--spkf-skew)); transition: background .2s, box-shadow .2s; }
.wp-block-query-pagination .page-numbers.current { background: var(--spkf-orange); color: var(--spkf-white); box-shadow: 4px 4px 0 var(--spkf-outline); }
.wp-block-query-pagination a:hover { background: var(--spkf-chalk); color: var(--spkf-ink); }
.wp-block-query-pagination .page-numbers.dots { border: 0; background: none; }

/* =============================================================================
   SINGLE POST
   ============================================================================= */
.spkf-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.spkf-post-meta > * { margin: 0 !important; }
.spkf-single__foot { padding-block: 0 clamp(48px, 7vw, 96px); }
.spkf-post-nav { display: grid; gap: 14px; border-top: 3px solid var(--spkf-line); padding-top: 28px; }
@media (min-width: 700px) { .spkf-post-nav { grid-template-columns: 1fr 1fr; } }
.spkf-post-nav .wp-block-post-navigation-link { position: relative; display: grid; align-content: start; gap: 8px; margin: 0; padding: 18px 20px 20px; background: var(--spkf-ink-2); border: 2px solid var(--spkf-outline); box-shadow: 6px 7px 0 var(--spkf-orange); transition: transform .35s var(--spkf-out), box-shadow .35s var(--spkf-out); }
.spkf-post-nav .post-navigation-link-next { box-shadow: 6px 7px 0 var(--spkf-violet); text-align: right; }
.spkf-post-nav .wp-block-post-navigation-link:hover, .spkf-post-nav .wp-block-post-navigation-link:focus-within { transform: translate(-3px, -3px); box-shadow: 9px 10px 0 var(--spkf-orange); }
.spkf-post-nav .post-navigation-link-next:hover, .spkf-post-nav .post-navigation-link-next:focus-within { box-shadow: 9px 10px 0 var(--spkf-violet); }
.spkf-post-nav .post-navigation-link__label { font: 500 .6875rem/1.4 var(--spkf-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--spkf-concrete); }
.spkf-post-nav .wp-block-post-navigation-link a { color: var(--spkf-chalk); text-decoration: none; font: italic 900 1.125rem/1.08 var(--spkf-display); text-transform: uppercase; }
.spkf-post-nav .wp-block-post-navigation-link a::after { content: ""; position: absolute; inset: 0; }
.spkf-related { padding-block: clamp(40px, 6vw, 80px) clamp(64px, 8vw, 112px); background: var(--spkf-ink-2); clip-path: polygon(0 3.2vw, 100% 0, 100% 100%, 0 100%); }
.spkf-section-title { margin: 0 0 clamp(24px, 3vw, 40px); font-size: clamp(2rem, 1.2rem + 3.4vw, 3.75rem); }

/* Comments */
.wp-block-comments { max-width: var(--spkf-prose); margin-inline: auto; }
.wp-block-comment-template { padding: 0; list-style: none; }
.wp-block-comment-template li { padding: 18px 0; border-bottom: 1px solid var(--spkf-line); }
.wp-block-post-comments-form textarea { min-height: 140px; }
.comment-form-cookies-consent { display: flex; gap: 10px; align-items: flex-start; }

/* =============================================================================
   FOOTER
   ============================================================================= */
.spkf-footer { position: relative; overflow-x: clip; background: var(--spkf-ink); }
.spkf-ticker { position: relative; z-index: 2; padding-block: 2.4vw; overflow: hidden; overflow: clip; } /* clip, not hidden: a hidden box is a scroll container and would freeze the band's view() reveal half way */
.spkf-ticker__band { position: relative; display: flex; align-items: center; background: var(--spkf-orange); color: var(--spkf-white); border-block: 3px solid var(--spkf-outline); transform: rotate(-2deg) scale(1.04); box-shadow: 0 10px 0 var(--spkf-outline); }
.spkf-ticker__viewport { flex: 1; overflow: hidden; }
.spkf-ticker__track { display: flex; width: max-content; }
.spkf-ticker__list { display: flex; flex: none; align-items: center; margin: 0; padding: 0; list-style: none; }
.spkf-ticker__list li { display: flex; align-items: center; padding: 13px 0; font: italic 900 clamp(1.5rem, 1rem + 2.6vw, 3rem)/1 var(--spkf-display); text-transform: uppercase; white-space: nowrap; }
.spkf-ticker__list li::after { content: ""; width: .5em; height: .6em; margin: 0 .6em; background: var(--spkf-outline); clip-path: var(--spkf-chev); }
.spkf-ticker__list li:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--spkf-white); }
.spkf-ticker__toggle { flex: none; position: relative; z-index: 1; align-self: stretch; display: grid; place-items: center; width: 52px; margin-inline-end: calc(2vw + var(--spkf-gut) / 2); /* the band is scaled past the screen edge; keep the pause button on screen */ background: var(--spkf-outline); color: var(--spkf-white); border: 0; cursor: pointer; }
.spkf-ticker__toggle i { display: block; width: 12px; height: 14px; border-inline: 4px solid currentColor; }
.spkf-ticker__toggle[aria-pressed="true"] i { border: 0; width: 13px; height: 15px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }

.spkf-crew { position: relative; isolation: isolate; padding-block: clamp(72px, 10vw, 150px) clamp(48px, 7vw, 96px); }
.spkf-crew::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 120% at 100% 0%, rgba(50, 29, 180, .32), transparent 60%), radial-gradient(70% 90% at 0% 100%, rgba(184, 80, 3, .22), transparent 60%), var(--spkf-ink-2); clip-path: polygon(0 3.2vw, 100% 0, 100% 100%, 0 100%); }
.spkf-crew__grid { display: grid; gap: 32px 56px; }
.spkf-crew__title { margin: 0; font-size: clamp(3rem, 1rem + 9vw, 9rem); line-height: .86; }
.spkf-crew__main { display: grid; gap: 24px; justify-items: start; max-width: 54ch; }
.spkf-crew__main p { margin: 0; color: var(--spkf-body); font-size: var(--wp--preset--font-size--large); line-height: 1.45; }
.spkf-nova { align-self: end; display: grid; gap: 12px; max-width: 460px; padding: 24px; background: var(--spkf-ink); border: 2px solid var(--spkf-outline); box-shadow: 7px 8px 0 var(--spkf-violet); }
.spkf-nova__title { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.spkf-nova p { margin: 0; color: var(--spkf-body); font-size: .9375rem; }
@media (min-width: 900px) { .spkf-crew__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } .spkf-crew__title { grid-column: 1 / -1; } }

.spkf-footer__main { display: grid; gap: 48px; padding-block: clamp(56px, 7vw, 88px) 28px; }
.spkf-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
@media (min-width: 760px) { .spkf-footer__cols { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.spkf-footer__cols h2 { margin: 0 0 14px; font: 500 .75rem/1.4 var(--spkf-mono); letter-spacing: .08em; color: var(--spkf-concrete); text-transform: uppercase; -webkit-text-stroke: 0; text-shadow: none; }
.spkf-footer__cols ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.spkf-footer__cols a { position: relative; color: var(--spkf-chalk); font-weight: 600; text-decoration: none; }
.spkf-footer__cols a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--spkf-tri); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--spkf-snap); }
.spkf-footer__cols a:hover::after, .spkf-footer__cols a:focus-visible::after { transform: none; }
.spkf-footer__mark { display: block; line-height: 0; }
.spkf-footer__mark .spkf-logo { width: 100%; height: auto; }
.spkf-logo__shadow { fill: var(--spkf-sticker-shadow, #5A5A66); stroke: var(--spkf-sticker-shadow, #5A5A66); }
.spkf-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; padding-top: 22px; border-top: 1px solid var(--spkf-line); color: var(--spkf-concrete); }
.spkf-footer__legal a { color: var(--spkf-concrete); }
.spkf-footer__legal a:hover { color: var(--spkf-chalk); }
.spkf-footer__family { margin: 0; color: #8B8B96; font-size: .8125rem; }
.spkf-footer__family a { color: var(--spkf-concrete); }

/* Below-the-fold blocks skip layout and paint until they come near the viewport. */
.spkf-footer, .spkf-related, .spkf-single__foot { content-visibility: auto; contain-intrinsic-size: auto 1200px; }

/* =============================================================================
   NEXT SESSION CHIP (shared with the home and sessions templates)
   ============================================================================= */
.spkf-next { display: inline-flex; align-items: center; max-width: 100%; padding: 9px 16px; background: rgba(8, 8, 11, .78); border: 1.5px solid rgba(63, 210, 90, .55); transform: skewX(var(--spkf-skew)); }
.spkf-next__in { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; transform: skewX(var(--spkf-unskew)); font: 500 .6875rem/1.4 var(--spkf-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--spkf-chalk); }
.spkf-next__label { color: var(--spkf-green-hi); }
.spkf-next__cd { font-weight: 600; font-variant-numeric: tabular-nums; }
.spkf-next .spkf-chev { color: var(--spkf-green-hi); }

/* =============================================================================
   404, SEARCH, MAP, SPOT
   ============================================================================= */
.spkf-404__num { display: block; font-size: clamp(6rem, 3rem + 18vw, 18rem); line-height: .8; margin-bottom: .1em; }
.spkf-hero__ctas { display: flex; flex-wrap: wrap; gap: 16px 20px; }
.spkf-empty { padding: 32px; border: 2px dashed #3A3A46; color: var(--spkf-concrete); }

.spkf-map-page main { padding-top: calc(var(--spkf-head) + var(--spkf-admin)); }
.spkf-map-page .spkf-map-shell { min-height: calc(100svh - var(--spkf-head) - var(--spkf-admin)); }
.spkf-map-page .spkf-map-shell > * { margin: 0; }
/* The page's own intro (and the plugin's safety note, which the app moves in under it) sit after the
   app in #spkf-map-more, wrapped like the rest of the site. With the app running that is a drawer. */
.spkf-map-page .spkf-map-about { box-sizing: border-box; max-width: calc(var(--spkf-max) + 2 * var(--spkf-gut)); margin: 0 auto; padding: 12px var(--spkf-gut) clamp(32px, 4vw, 52px); }
.spkf-map-about > * + * { margin-top: 1rem; }
.spkf-map-about .spkf-map-intro { position: relative; margin: 0; padding-top: 24px; max-width: 46em; color: var(--spkf-chalk); font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem); line-height: 1.5; }
.spkf-map-about .spkf-map-intro::before { content: ""; position: absolute; left: 2px; top: 0; width: 72px; height: 7px; background: var(--spkf-tri); transform: skewX(var(--spkf-skew)); }
.spkf-map-note { margin: 0; color: var(--spkf-concrete); font-size: .875rem; }

.spkf-hero--spot .spkf-hero__hud { gap: 6px 22px; }
.spkf-spot-type { --t: var(--spkf-green); }

/* =============================================================================
   MOTION. Only when motion is welcome. Transform, opacity and clip-path only.
   ============================================================================= */
/* Reveals move and mask but never fade text, so contrast is always full (axe checks mid-animation too). */
@keyframes spkf-rise { from { translate: -3vw 44px; } }
@keyframes spkf-mask { from { clip-path: polygon(0 0, 0 0, -25% 100%, -25% 100%); } to { clip-path: polygon(0 0, 125% 0, 100% 100%, -25% 100%); } }
@keyframes spkf-diag { from { translate: -6vw 8vh; } }
@keyframes spkf-title-in { from { translate: -9vw 0; transform: skewX(-22deg); } }
@keyframes spkf-sub-in { from { opacity: 0; translate: -36px 0; } }
@keyframes spkf-curtain { from { transform: translateX(0) skewX(var(--spkf-skew)); } to { transform: translateX(110%) skewX(var(--spkf-skew)); } }
@keyframes spkf-chevs-in { from { opacity: 0; translate: 30vw 0; } }
@keyframes spkf-bands-in { from { translate: -34vw 0; } }
@keyframes spkf-streak { 0% { transform: translateX(-110%); } 38%, 100% { transform: translateX(calc(100vw + 120%)); } }
@keyframes spkf-ticker { to { transform: translateX(-50%); } }
@keyframes spkf-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes spkf-solid { to { opacity: 1; } }
@keyframes spkf-sticker-in { from { opacity: 0; scale: 1.18; rotate: 3deg; } }
/* Sticker heading entrance. The text layer swipes in through a slanted edge and settles with a small
   bounce; the colour layer slides in from the other side while its mask opens out to both ends. */
@keyframes spkf-hx-top {
	0% { transform: translateX(-.55em) skewX(-14deg); clip-path: polygon(-12% -45%, -12% -45%, -34% 145%, -34% 145%); animation-timing-function: cubic-bezier(.2, .85, .3, 1); }
	58% { transform: translateX(.07em) skewX(2deg); clip-path: polygon(-12% -45%, 134% -45%, 112% 145%, -34% 145%); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
	80% { transform: translateX(-.025em) skewX(-.6deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
	100% { transform: none; clip-path: polygon(-12% -45%, 134% -45%, 112% 145%, -34% 145%); }
}
@keyframes spkf-hx-swipe { /* the same for hero titles, without the clip: they are LCP text and must paint on the first frame */
	0% { transform: translateX(-.55em) skewX(-14deg); animation-timing-function: cubic-bezier(.2, .85, .3, 1); }
	58% { transform: translateX(.07em) skewX(2deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
	80% { transform: translateX(-.025em) skewX(-.6deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
	100% { transform: none; }
}
@keyframes spkf-hx-shadow { from { transform: translateX(.7em); mask-size: 0% 100%; } to { transform: none; mask-size: 300% 100%; } }

/* Sticker headings in layers, for their entrance. motion.js splits a heading just before it scrolls into
   view (and joins it up again afterwards); hero titles are split in the markup. .spkf-hx__t is the real
   text with only the black offset. The coloured drop shadow is drawn by an aria-hidden, inert copy
   (.spkf-hx__s) or, on hero titles, by ::before with empty alt text, so it is never read out. The
   transparent borders give the shadow room inside the mask without moving the text. */
.spkf-hx, .spkf-hero__title[data-spkf-hx] { position: relative; isolation: isolate; }
.spkf-hx { overflow-x: clip; overflow-clip-margin: .2em; } /* the incoming layers must never widen the page */
.spkf-hx__t { display: block; }
.spkf-hx > .spkf-hx__t { text-shadow: var(--hx-k); }
.spkf-hero__title[data-spkf-hx] { --hx-k: .045em .055em 0 var(--spkf-outline); --hx-c: .09em .11em 0 var(--st); }
.spkf-hx__s, .spkf-hero__title[data-spkf-hx]::before {
	position: absolute; inset: -.3em -.25em -.4em -.3em; z-index: -1; display: block;
	border: solid transparent; border-width: .3em .25em .4em .3em; padding: inherit;
	color: transparent; -webkit-text-stroke-color: transparent; text-shadow: var(--hx-c);
	pointer-events: none; user-select: none;
	mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent) 50% 0 / 300% 100% no-repeat;
}
.spkf-hx__s * { color: transparent !important; -webkit-text-stroke-color: transparent !important; }
/* Hero titles split only where the copy can be kept out of the accessibility tree (alt text on content). */
@supports (content: "" / "") {
	@media (prefers-reduced-motion: no-preference) {
		.spkf-hero__title[data-spkf-hx] > .spkf-hx__t { text-shadow: var(--hx-k); }
		.spkf-hero__title[data-spkf-hx]::before { content: attr(data-spkf-hx) / ""; }
	}
}

@media (prefers-reduced-motion: no-preference) {
	/* Sticker headings play their entrance once, when they come into view (motion.js adds .is-go).
	   Time-based, never tied to the scroll position or speed. */
	.spkf-hx > .spkf-hx__t { animation: spkf-hx-top .82s linear both paused; }
	.spkf-hx > .spkf-hx__s { animation: spkf-hx-shadow .9s .07s var(--spkf-out) both paused; }
	.spkf-hx.is-go > * { animation-play-state: running; }

	/* Hero entrance: the title builds from its sticker layers, the rest follows. The title is
	   the LCP element, so it is painted from the first frame and its text is only transformed. */
	.spkf-hero__title[data-spkf-hx] > .spkf-hx__t { animation: spkf-hx-swipe .82s .05s linear both; }
	.spkf-hero__title[data-spkf-hx]::before { animation: spkf-hx-shadow .9s .12s var(--spkf-out) both; }
	.spkf-hero__title:not([data-spkf-hx]) { animation: spkf-title-in .8s .05s var(--spkf-out) both; }
	.spkf-hero__crumbs, .spkf-hero__hud, .spkf-hero__lede, .spkf-hero__meta, .spkf-hero__search, .spkf-hero .spkf-next { animation: spkf-sub-in .7s var(--d, .25s) var(--spkf-out) both; }
	.spkf-hero__lede { --d: .35s; } .spkf-hero__meta, .spkf-hero__search { --d: .45s; }
	/* A skewed ink curtain slides off the photo: transform only, so it stays on the compositor. */
	.spkf-hero__photo::before { content: ""; position: absolute; inset: -2% -30% -2% -2%; z-index: 2; background: var(--spkf-ink); transform-origin: 100% 50%; animation: spkf-curtain .9s .12s var(--spkf-snap) both; }
	.spkf-hero__chevs { animation: spkf-chevs-in 1s .1s var(--spkf-out) both; }
	.spkf-hero__bands i { animation: spkf-bands-in .75s calc(.08s + var(--k) * .07s) var(--spkf-out) both; }
	/* Arriving through a page transition (.spkf-came, set in the head): the wipe is the entrance,
	   so the hero settles inside it instead of building itself again after the reveal. */
	.spkf-came :is(.spkf-hero__title, .spkf-hero__crumbs, .spkf-hero__hud, .spkf-hero__lede, .spkf-hero__meta, .spkf-hero__search, .spkf-hero .spkf-next, .spkf-hero__chevs, .spkf-hero__bands i) { animation-duration: .2s; animation-delay: 0s; }
	.spkf-came .spkf-hero__photo::before { content: none; }
	.spkf-came .spkf-hero__title[data-spkf-hx] > .spkf-hx__t { animation-duration: .45s; animation-delay: 0s; }
	.spkf-came .spkf-hero__title[data-spkf-hx]::before { animation-duration: .45s; animation-delay: .03s; }
	.spkf-streaks { display: block; }
	.spkf-streaks i { animation: spkf-streak var(--d) var(--dl) cubic-bezier(.55, 0, .25, 1) infinite; }

	.spkf-ticker__track { animation: spkf-ticker 36s linear infinite; }
	.spkf-ticker:hover .spkf-ticker__track, .spkf-ticker:focus-within .spkf-ticker__track, .spkf-ticker.is-paused .spkf-ticker__track { animation-play-state: paused; }

	.spkf-footer__mark .spkf-logo__fill .spkf-logo__c { transition: transform .5s var(--spkf-out); }
	.spkf-footer__mark:hover .spkf-logo__c--o { transform: translateX(14px); }
	.spkf-footer__mark:hover .spkf-logo__c--g { transform: translateX(30px); }
	.spkf-footer__mark:hover .spkf-logo__c--v { transform: translateX(46px); }
}

/* Scroll-driven reveals. Without support, motion.js adds .is-in with an IntersectionObserver. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.spkf-header::before { animation: spkf-solid linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
		.spkf-header__progress { animation: spkf-grow linear both; animation-timeline: scroll(root); }

		.spkf-content > :where(p, ul, ol, .wp-block-list, .wp-block-quote, .wp-block-buttons, .wp-block-table, .wp-block-group, .wp-block-columns, .wp-block-accordion, .wp-block-details, .wp-block-latest-posts, .gallery, .wp-block-embed, .wp-block-video, .wp-block-cover, h3, h4, h5, h6),
		.spkf-reveal, .wp-block-accordion-item, .spkf-footer__cols > div, .spkf-nova, .spkf-crew__main {
			animation: spkf-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 180px;
		}
		.spkf-content :where(.wp-block-image, .wp-caption, .wp-block-embed__wrapper, .wp-block-video video) {
			animation: spkf-mask linear both; animation-timeline: view(); animation-range: entry 0% entry 300px;
		}
		.spkf-content > .wp-block-image { animation: none; }
		.spkf-grid .wp-block-post-template > li, .spkf-cards > li, .spkf-post-nav > * {
			animation: spkf-diag linear both; animation-timeline: view(); animation-range: entry 0% entry 260px;
		}
		.spkf-ticker__band { animation: spkf-mask linear both; animation-timeline: view(); animation-range: entry 0% entry 160px; }
		.spkf-ticker:focus-within .spkf-ticker__band { animation: none; } /* never mask the focused pause button */
		.spkf-footer__mark .spkf-logo { animation: spkf-sticker-in linear both; animation-timeline: view(); animation-range: entry 0% entry 320px; }
	}
}
@supports not (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.spkf-reveal-ready [data-spkf-reveal] { opacity: 0; translate: -22px 26px; transition: opacity .8s var(--spkf-out), translate 1s var(--spkf-out), clip-path 1s var(--spkf-out); }
		.spkf-reveal-ready [data-spkf-reveal="mask"] { opacity: 1; translate: 0 0; clip-path: polygon(0 0, 0 0, -25% 100%, -25% 100%); }
		.spkf-reveal-ready [data-spkf-reveal].is-in { opacity: 1; translate: 0 0; clip-path: polygon(0 0, 125% 0, 100% 100%, -25% 100%); }
		.spkf-header__progress { transition: transform .1s linear; }
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; }
	.spkf-menu, .spkf-menu__list > li, .spkf-nav__sub, .spkf-btn, .spkf-btn::before, .spkf-btn::after, .wp-block-button__link, .wp-block-button__link::before, .wp-block-button__link::after { transition-duration: .01s !important; }
	.spkf-ticker__track { flex-wrap: wrap; width: auto; animation: none; }
	.spkf-ticker__list { flex: 1 1 100%; flex-wrap: wrap; justify-content: center; padding-inline: var(--spkf-gut); }
	.spkf-ticker__list[aria-hidden="true"], .spkf-ticker__toggle, .spkf-ticker__list .is-dup { display: none; }
}

/* =============================================================================
   PAGE TRANSITIONS
   Cross-document View Transitions: the new page sweeps in through a parallelogram
   at the logo's angle, led by three slanted bands in the logo colours; the old
   page slides back and darkens. The header keeps its own name so it stays put.

   Everything here is a transform, so the whole wipe runs on the compositor and the
   bands and the reveal edge can never drift apart, however busy the incoming page's
   main thread is. (A clip-path reveal runs on the main thread: on a slow phone the
   bands raced ahead and left the darkened old page showing behind them.) The incoming
   body is captured on its own (spkf-page, named in the head script's pagereveal) and
   shown through a skewed window: the group moves and clips, its image pair moves the
   other way, so the page itself stays still while the window's edge sweeps across.
   ============================================================================= */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
}
html.spkf-vt-in body { view-transition-name: spkf-page; }
::view-transition-group(root) { animation-duration: .48s; }
::view-transition-old(root) { animation: spkf-vt-out .48s var(--spkf-snap) both; }
::view-transition-new(root) { display: none; } /* only the new canvas: the page itself comes in as spkf-page */
::view-transition-group(spkf-page) {
	z-index: 1; overflow: clip; padding-right: 30vh; /* 30vh wider than the page, so the slanted window can cover it */
	translate: 0 calc(-1 * var(--spkf-vt-y, 0px)); transform-origin: 0 calc(var(--spkf-vt-y, 0px) + 100vh); /* lean about the bottom of the screen */
	animation: spkf-vt-window .48s cubic-bezier(.25, .9, .1, 1) both;
}
::view-transition-image-pair(spkf-page) { right: 30vh; transform-origin: 0 calc(var(--spkf-vt-y, 0px) + 100vh); animation: spkf-vt-hold .48s cubic-bezier(.25, .9, .1, 1) both; }
::view-transition-new(spkf-page) { animation: none; }
::view-transition-group(spkf-header) { z-index: 3; }
::view-transition-group(spkf-wipe) { z-index: 2; animation: spkf-vt-bands .48s cubic-bezier(.25, .9, .1, 1) both; }
::view-transition-old(spkf-wipe) { display: none; }
::view-transition-new(spkf-wipe) { animation: none; }
/* The window's leading edge runs from -44vh to 100% + 5vh along the bottom of the screen, its top 21vh
   ahead (tan 12deg x 100vh), exactly with the bands. The animation replaces the group's own position
   transform, so `translate` puts back the page's scroll position on arrival (--spkf-vt-y, for back and
   forward). Literal angles, no var(), so nothing stops the keyframes going to the compositor. */
@keyframes spkf-vt-window {
	from { transform: translateX(calc(-100% - 44vh)) skewX(-12deg); }
	to { transform: translateX(-25vh) skewX(-12deg); }
}
@keyframes spkf-vt-hold {
	from { transform: skewX(12deg) translateX(calc(100% + 74vh)); }
	to { transform: skewX(12deg) translateX(25vh); }
}
@keyframes spkf-vt-bands { from { transform: translateX(-44vh); } to { transform: translateX(calc(100vw + 5vh)); } }
@keyframes spkf-vt-out { to { transform: translateX(-6vw); filter: brightness(.4); } }
.spkf-vt { display: none; }
html.spkf-vt-in .spkf-vt { display: block; position: fixed; top: 0; left: 0; z-index: 1000; width: 44vh; height: 100vh; pointer-events: none; view-transition-name: spkf-wipe; }
.spkf-vt i { position: absolute; top: 0; bottom: 0; width: 7.4vh; transform: skewX(var(--spkf-skew)); transform-origin: 0 100%; }
.spkf-vt i:nth-child(1) { left: 0; background: var(--spkf-orange); }
.spkf-vt i:nth-child(2) { left: 7.2vh; background: var(--spkf-green); }
.spkf-vt i:nth-child(3) { left: 14.4vh; background: var(--spkf-violet); }

/* Fallback cover for browsers without cross-document View Transitions (transition.js). */
.spkf-cover { display: none; position: fixed; inset: 0; z-index: 99; pointer-events: none; overflow: hidden; } /* under the header (100), over the menu (99, earlier in the page), so the header stays put here too */
html.spkf-leaving .spkf-cover, html.spkf-arriving .spkf-cover { display: block; }
.spkf-cover__in { position: absolute; top: -10vh; bottom: -10vh; left: 0; width: 200vw; background: var(--spkf-ink); transform: translateX(-260vw) skewX(var(--spkf-skew)); }
.spkf-cover__in i { position: absolute; top: 0; bottom: 0; width: 8vw; }
.spkf-cover__in i:nth-child(1) { right: -8vw; background: var(--spkf-orange); }
.spkf-cover__in i:nth-child(2) { right: -16vw; background: var(--spkf-green); }
.spkf-cover__in i:nth-child(3) { right: -24vw; background: var(--spkf-violet); }
html.spkf-leaving .spkf-cover__in { animation: spkf-cover-on .24s var(--spkf-snap) both; }
html.spkf-arriving .spkf-cover__in { animation: spkf-cover-off .34s var(--spkf-out) both; }
@keyframes spkf-cover-on { from { transform: translateX(-260vw) skewX(var(--spkf-skew)); } to { transform: translateX(-60vw) skewX(var(--spkf-skew)); } }
@keyframes spkf-cover-off { from { transform: translateX(-60vw) skewX(var(--spkf-skew)); } to { transform: translateX(130vw) skewX(var(--spkf-skew)); } }

@media print {
	.spkf-header, .spkf-menu, .spkf-footer, .spkf-streaks, .spkf-hero__art, .spkf-cover, .spkf-vt { display: none !important; }
	.spkf-hx > *, .spkf-hero__title > .spkf-hx__t, .spkf-hero__title::before { animation: none !important; }
	body, .spkf-hero { background: #fff; color: #000; }
	.spkf-hero { clip-path: none; padding-top: 0; }
}