/* The Funky Cat: the shared layer under the homepage.
   Tokens, components and rules are lifted from the brand guide
   (tfc-brandguide-v23, snapshot 08.10.2026). Section numbers below
   (01, 03, 08 ...) point back to the guide. */

@font-face {
	font-family: 'Recursive';
	src: url('fonts/recursive-full.woff2') format('woff2-variations');
	font-weight: 300 1000;
	font-style: oblique 0deg 15deg;
	font-display: swap;
}
@font-face {
	font-family: 'Figtree';
	src: url('fonts/figtree-900.woff2') format('woff2');
	font-weight: 900;
	font-display: swap;
}

/* 01 foundation */
:root {
	--night: #000;
	--pulse-1: #191534;
	--pulse-2: #0F1429;
	--purple: #4E3288;
	--lilac: #9D8BEE;
	--deep: #22213B;
	--acid: #E7FD06;
	--white: #fff;
	--haze: #ABA4C8;
	/* purple at 55% over night, solid so overlaps don't seam (guide 06) */
	--field: #2B1C4B;
	/* 02: Figtree Black is the current lean while Nexa Rust needs a licence */
	--display: 'Figtree', 'Archivo Black', system-ui, sans-serif;
	--display-weight: 900;
	--casl: 0;
	/* 03: decided 08-10, four degrees, every item leans */
	--tilt-max: 4;
	--gutter: 16px;
	--space-3xs: 4px;
	--space-2xs: 8px;
	--space-s: 12px;
	--space-m: 24px;
	--space-l: 48px;
	--space-xl: clamp(56px, 12vw, 160px);
	--ease: cubic-bezier(.2, .8, .2, 1.1);
	--ease-draw: cubic-bezier(.2, .8, .2, 1);
	--fast: 180ms;
	--base: 450ms;
	--slow: 800ms;
	--bar-h: 64px;
	color-scheme: dark;
}

* { box-sizing: border-box; }
/* clip, not hidden: clip makes no scroll container, so the page keeps the
   browser's own scrolling (the owner's one hard rule) */
html { overflow-x: clip; }
body {
	margin: 0;
	background: var(--night);
	color: var(--white);
	font-family: 'Recursive', system-ui, sans-serif;
	font-variation-settings: 'CASL' var(--casl);
	font-size: clamp(16px, 1rem + .25vw, 19px);
	font-weight: 350;
	line-height: 1.6;
	animation: pulse 10s infinite;
	padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));
}
/* 01: the pulse, kept from the current site as the signature */
@keyframes pulse {
	0% { background-color: var(--night); }
	40% { background-color: var(--pulse-1); }
	80% { background-color: var(--pulse-2); }
	100% { background-color: var(--night); }
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--lilac); text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--lilac); outline-offset: 3px; }

.wrap { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.display {
	font-family: var(--display);
	font-weight: var(--display-weight);
	line-height: .92;
	text-transform: uppercase;
	letter-spacing: -.01em;
}
/* 02: names stay as written, so never uppercase an artist */
.name { text-transform: none; }
.meta {
	color: var(--haze);
	font-variation-settings: 'MONO' 1, 'CASL' var(--casl);
	font-size: .8em;
	letter-spacing: .02em;
}
.mono { font-variation-settings: 'MONO' 1; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 02 scale: big jumps on purpose */
.t-mega { font-size: clamp(64px, 15vw, 200px); }
.t-xl { font-size: clamp(44px, 9vw, 120px); }
.t-l { font-size: clamp(26px, 4vw, 44px); }

/* 03 skew. --seed (-1..1) and --cut are seeded per item by tfc.js, so a
   poster leans the same way on every visit. --shape is width over height,
   capped at 1: a portrait poster leans less. The lean uses the `rotate`
   property so Motion can own `transform` without fighting it. */
.lean { rotate: calc(var(--seed, 0) * var(--tilt-max) * var(--shape, 1) * 1deg); }
/* Half the lean at phone width: a 4deg turn on a screen-wide poster swings
   its corner past the 16px gutter (guide 03) */
@media (max-width: 759px) {
	.lean.wide { rotate: calc(var(--seed, 0) * var(--tilt-max) * var(--shape, 1) * .5deg); }
}

/* 04 scissor cut, the default edge for every poster and cover */
.cut { clip-path: var(--cut, none); }

/* 03 hover, press, glow. The glow is a drop-shadow on the wrapper because
   the cut would clip a box-shadow away. */
.poster {
	position: relative;
	display: block;
	color: inherit;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	filter: drop-shadow(0 0 16px color-mix(in srgb, var(--glow, var(--purple)) 45%, transparent));
	transition: filter var(--base) var(--ease);
}
.poster .art {
	rotate: calc(var(--seed, 0) * var(--tilt-max) * var(--shape, 1) * 1deg);
	transition: rotate var(--base) var(--ease), translate var(--base) var(--ease), scale var(--base) var(--ease);
}
.poster .art img { width: 100%; clip-path: var(--cut, none); }
@media (hover: hover) {
	.poster:hover { filter: drop-shadow(0 18px 36px color-mix(in srgb, var(--glow, var(--purple)) 80%, transparent)); }
	.poster:hover .art { rotate: 0deg; translate: 0 -8px; scale: 1.03; }
}
/* No hover on a phone: the poster in the middle of the screen gets it */
.poster.focus { filter: drop-shadow(0 16px 32px color-mix(in srgb, var(--glow, var(--purple)) 75%, transparent)); }
.poster.focus .art { rotate: 0deg; translate: 0 -6px; scale: 1.02; }
.poster:active .art { scale: .97; rotate: 0deg; transition-duration: .12s; }

/* 08 status stickers. Acid only when there's something to act on, and the
   ticket button already holds the one acid on every screen, so stickers
   here are lilac. */
.status {
	position: absolute;
	z-index: 3;
	top: 6%;
	right: -4%;
	padding: 6px 12px;
	font-family: var(--display);
	font-weight: var(--display-weight);
	font-size: clamp(14px, 1.6vw, 18px);
	line-height: 1.1;
	text-transform: uppercase;
	rotate: 8deg;
	background: var(--lilac);
	color: #000;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
	white-space: nowrap;
}
/* On a hero poster the sticker hangs above it: across the top it covered
   the poster's own title (guide: everything gets out of the poster's way) */
.hero-poster .status { top: auto; bottom: calc(100% + 4px); right: 2%; }
.status.out { background: var(--deep); color: var(--haze); text-decoration: line-through; text-decoration-thickness: 2px; }

/* 06 stamps */
.media { position: relative; container-type: inline-size; }
.stamp { position: absolute; z-index: 2; font-weight: 700; line-height: 1.1; text-transform: uppercase; font-size: clamp(10px, 4.2cqi, 17px); }
.stamp.cat { left: -6%; bottom: 8%; padding: 3px 6px; background: var(--deep); color: var(--haze); font-variation-settings: 'MONO' 1; rotate: -6deg; }
.stamp.air {
	right: -5%; top: -10%;
	width: clamp(46px, 22cqi, 100px); height: clamp(46px, 22cqi, 100px);
	border-radius: 50%; display: grid; place-items: center; text-align: center;
	background: var(--lilac); color: #000; rotate: 12deg;
}
.stamp.film { left: 6%; top: 6%; padding: 3px 8px; background: rgba(0, 0, 0, .72); color: var(--white); font-variation-settings: 'MONO' 1; }
.stamp.count { right: -4%; bottom: 10%; padding: 4px 8px; background: var(--lilac); color: #000; rotate: 7deg; font-variation-settings: 'MONO' 1; }

/* 06 round, like a record: hover or the middle of a phone screen opens it */
.vinyl { position: relative; }
.vinyl img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; transition: border-radius .5s var(--ease); }
.vinyl::after {
	content: ''; position: absolute; inset: 0; margin: auto; width: 6%; height: 6%;
	border-radius: 50%; background: var(--night);
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--night) 40%, transparent);
	transition: opacity .3s;
}
@media (hover: hover) {
	.poster:hover .vinyl img { border-radius: 0; }
	.poster:hover .vinyl::after { opacity: 0; }
}
.poster.focus .vinyl img { border-radius: 0; }
.poster.focus .vinyl::after { opacity: 0; }

/* 08 buttons */
.btn-acid, .btn-lilac {
	display: inline-block;
	appearance: none; border: 0; padding: 12px 20px;
	font: inherit; font-weight: 700; text-decoration: none; line-height: 1.2;
	cursor: pointer; white-space: nowrap;
	transition: rotate .3s var(--ease), scale .3s var(--ease), background .2s;
}
.btn-acid { background: var(--acid); color: #000; rotate: -2deg; }
.btn-lilac { background: var(--lilac); color: #000; rotate: 1.5deg; }
.btn-acid:hover, .btn-acid:focus-visible, .btn-lilac:hover, .btn-lilac:focus-visible { rotate: 0deg; scale: 1.04; }

/* 06 lines: hand-drawn, lilac, drawing themselves in */
.draw { fill: none; stroke: var(--lilac); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease-draw) .25s; }
.drawn .draw, .drawn.draw { stroke-dashoffset: 0; }
.squiggle { display: block; width: 100%; height: 22px; overflow: visible; }

/* 06 pen stroke underline: "hover" and "you are here" */
.u-pen { position: relative; display: inline-block; color: inherit; text-decoration: none; }
.u-pen svg { position: absolute; left: -2%; bottom: -9px; width: 104%; height: 10px; overflow: visible; }
.u-pen path { fill: none; stroke: var(--lilac); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .45s var(--ease-draw), opacity 0s .45s; }
.u-pen:hover path, .u-pen:focus-visible path, .u-pen:active path, .u-pen[aria-current] path { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset .45s var(--ease-draw), opacity 0s; }
.u-pen:focus-visible { outline: none; }

/* 08 listen row: Bandcamp leads (name your price), platforms as chips.
   Bandcamp is lilac here, not acid: the ticket bar is this screen's acid. */
.platforms { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--space-s) 0 0; padding: 0; list-style: none; }
.platforms a {
	display: inline-block; padding: 6px 12px; background: var(--deep); color: var(--white); text-decoration: none;
	font-family: var(--display); font-weight: var(--display-weight); font-size: 15px; text-transform: uppercase;
	rotate: var(--r, -2deg); transition: background .2s, rotate .3s var(--ease);
}
.platforms li:nth-child(even) a { --r: 2deg; }
.platforms a:hover, .platforms a:focus-visible { background: color-mix(in srgb, var(--lilac) 45%, var(--deep)); rotate: 0deg; }

/* 08 duotone photos: shadows purple, highlights acid; hover or the middle of
   a phone screen gives the photo its colour back */
.duo { position: relative; isolation: isolate; overflow: hidden; background: var(--duo-light, var(--acid)); clip-path: var(--cut, none); }
.duo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; transition: filter .6s var(--ease-draw); }
.duo::after { content: ''; position: absolute; inset: 0; background: var(--duo-dark, var(--purple)); mix-blend-mode: lighten; transition: opacity .6s var(--ease-draw); pointer-events: none; }
@media (hover: hover) {
	.duo:hover img, .poster:hover .duo img { filter: none; mix-blend-mode: normal; }
	.duo:hover::after, .poster:hover .duo::after { opacity: 0; }
}
.duo.focus img, .poster.focus .duo img { filter: none; mix-blend-mode: normal; }
.duo.focus::after, .poster.focus .duo::after { opacity: 0; }

/* Video: a still with a big lilac play button; the YouTube player only loads
   on tap, so nothing third-party runs until someone asks for it */
.video { position: relative; aspect-ratio: 16 / 9; background: var(--deep); overflow: hidden; clip-path: var(--cut, none); }
.video img, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video button {
	position: absolute; inset: 0; margin: auto; width: clamp(64px, 14cqi, 112px); aspect-ratio: 1;
	border: 0; border-radius: 50%; background: var(--lilac); color: #000; cursor: pointer;
	display: grid; place-items: center; rotate: -6deg; transition: scale .3s var(--ease), rotate .3s var(--ease);
}
.video button:hover, .video button:focus-visible { scale: 1.08; rotate: 0deg; }
.video button svg { width: 38%; translate: 8% 0; }

/* 08 newsletter: a field is never a box, just a drawn line under it */
.nl-input { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-top: var(--space-m); }
.nl-input label { flex: 1 1 220px; position: relative; display: block; }
.nl-input input { width: 100%; appearance: none; border: 0; background: transparent; color: var(--white); font: inherit; font-size: 18px; padding: 8px 2px 10px; outline: none; }
.nl-input input::placeholder { color: color-mix(in srgb, var(--haze) 80%, transparent); }
.nl-input label svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 8px; overflow: visible; }
.nl-input label path { fill: none; stroke: var(--haze); stroke-width: 1.6; stroke-linecap: round; transition: stroke .2s; }
.nl-input label:focus-within path { stroke: var(--lilac); }
.nl-small { margin: var(--space-s) 0 0; font-size: .8em; color: var(--haze); }

/* 06 cat marks: ears on a field. The ears sit outside the field's cut, so
   they live on a wrapper and overlap its top edge. */
.eared-wrap { position: relative; padding-top: 40px; }
.eared { padding: var(--space-m); background: var(--field); clip-path: var(--cut, none); }
.ears { position: absolute; left: 8%; top: 1px; width: min(38%, 260px); height: 44px; }

/* 07 logo: the PNG is white on transparent, so it works as a mask and takes
   any fill */
.lm {
	display: block; aspect-ratio: 800 / 587;
	-webkit-mask: url('img/mark.png') center / contain no-repeat;
	mask: url('img/mark.png') center / contain no-repeat;
	background: var(--fill, var(--white));
}

/* 11 the one slow marquee. Straight: it's screen-wide, and those never lean. */
.marquee { overflow: hidden; padding: 14px 0; background: var(--purple); }
.marquee .track { display: flex; width: max-content; animation: marquee 45s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.marquee span {
	display: inline-block; padding-right: 28px; rotate: -2deg;
	font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(24px, 3.4vw, 40px);
	text-transform: uppercase; white-space: nowrap;
}
.marquee span::after { content: ' /'; color: var(--lilac); margin-left: 28px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* The bar: date, lowest price, the ticket button (guide 09, "blocks + sticky
   tickets"), with the menu button in it. Bottom of the screen, where the
   thumb is. It is fixed, not sticky-scrolling: the page scrolls normally. */
.bar {
	position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
	height: calc(var(--bar-h) + env(safe-area-inset-bottom));
	padding: 0 var(--gutter) env(safe-area-inset-bottom);
	display: flex; align-items: center; gap: var(--space-s);
	background: color-mix(in srgb, var(--night) 82%, transparent);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.bar .menu-btn {
	flex: 0 0 auto; padding: 11px 16px; border: 0; background: var(--purple); color: var(--white);
	font-family: var(--display); font-weight: var(--display-weight); font-size: 15px; text-transform: uppercase;
	cursor: pointer; rotate: -3deg; transition: rotate .3s var(--ease);
}
.bar .menu-btn:hover { rotate: 0deg; }
.bar .info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.bar .info b { font-family: var(--display); font-weight: var(--display-weight); text-transform: uppercase; font-size: 15px; letter-spacing: .01em; }
.bar .info span { font-size: 12px; color: var(--haze); font-variation-settings: 'MONO' 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .btn-acid { flex: 0 0 auto; padding: 11px 16px; }

/* 08 the full-screen menu, opened from the button bottom left */
.fsm {
	position: fixed; inset: 0; z-index: 70; overflow-y: auto; overflow-x: hidden;
	background: var(--purple);
	clip-path: circle(0 at 44px calc(100% - 32px)); visibility: hidden;
	transition: clip-path .6s var(--ease-draw), visibility 0s .6s;
}
.fsm.open { clip-path: circle(150% at 44px calc(100% - 32px)); visibility: visible; transition: clip-path .6s var(--ease-draw); }
.fsm-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.fsm-mark { position: absolute; right: -22%; bottom: -6%; width: min(110vw, 900px); rotate: -10deg; --fill: color-mix(in srgb, var(--lilac) 22%, transparent); }
.fsm-inner { position: relative; min-height: 100%; display: flex; flex-direction: column; gap: var(--space-m); padding: 28px var(--gutter) 96px; }
.fsm-side { order: -1; position: relative; z-index: 1; display: grid; gap: var(--space-m); align-content: start; }
.fsm-links { position: relative; z-index: 1; margin: auto 0 0; padding: 0; list-style: none; }
.fsm-links li { font-size: clamp(44px, 12vw, 112px); line-height: 1; }
.fsm-links li + li { margin-top: .16em; }
.fsm-links a { display: inline-block; color: var(--white); text-decoration: none; font-family: var(--display); font-weight: var(--display-weight); text-transform: uppercase; transition: color .35s var(--ease-draw); }
.fsm-links li:nth-child(odd) a { rotate: -2deg; }
.fsm-links li:nth-child(even) a { rotate: 1.5deg; margin-left: 6%; }
.fsm-links .u { position: relative; }
.fsm-links svg { position: absolute; left: -1%; bottom: -4px; width: 102%; height: 14px; overflow: visible; }
.fsm-links path { fill: none; stroke: var(--white); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .45s var(--ease-draw), opacity 0s .45s; }
.fsm-links a:hover path, .fsm-links a:focus-visible path, .fsm-links a[aria-current] path { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset .45s var(--ease-draw), opacity 0s; }
.fsm-links a:focus { outline: none; }
.fsm-teaser { display: grid; grid-template-columns: 72px 1fr; gap: var(--space-s) var(--space-m); align-items: center; }
.fsm-teaser img { width: 100%; clip-path: var(--cut, none); rotate: -3deg; }
.fsm-teaser .t { font-family: var(--display); font-weight: var(--display-weight); font-size: 22px; text-transform: uppercase; line-height: 1; margin: 0 0 6px; }
.fsm-teaser .btn-acid { padding: 9px 14px; font-size: 14px; margin-top: 8px; }
.fsm-socials { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fsm-socials a, .socials a {
	display: inline-block; padding: 5px 9px; background: var(--field); color: var(--white); text-decoration: none;
	font-family: var(--display); font-weight: var(--display-weight); font-size: 13px; text-transform: uppercase;
	rotate: var(--r, -3deg); transition: background .2s, rotate .3s var(--ease), translate .3s var(--ease);
}
.fsm-socials li:nth-child(even) a, .socials li:nth-child(even) a { --r: 2.5deg; }
.fsm-socials li:nth-child(3n) a, .socials li:nth-child(3n) a { --r: -1deg; }
.fsm-socials a:hover, .fsm-socials a:focus-visible, .socials a:hover, .socials a:focus-visible { background: var(--lilac); color: #000; rotate: 0deg; translate: 0 -3px; }
.fsm-nl h2 { margin: 0 0 2px; font-size: 20px; }
.fsm-nl p { margin: 0; font-size: 13px; line-height: 1.4; color: color-mix(in srgb, var(--white) 80%, transparent); }
.fsm-nl .nl-input input::placeholder { color: color-mix(in srgb, var(--white) 65%, transparent); }
.fsm-nl .nl-input label path { stroke: color-mix(in srgb, var(--white) 70%, transparent); stroke-width: 2; }
.fsm-nl .btn-lilac { padding: 9px 14px; font-size: 14px; }
.fsm-close {
	position: fixed; left: var(--gutter); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 2; padding: 11px 16px; border: 0;
	background: var(--night); color: var(--white); font-family: var(--display); font-weight: var(--display-weight); font-size: 15px;
	text-transform: uppercase; cursor: pointer; rotate: 2deg;
}
@media (min-width: 900px) {
	.fsm-inner { display: grid; grid-template-columns: 1.3fr 1fr; align-items: start; gap: var(--space-l); padding: 72px clamp(16px, 6vw, 96px) 96px; }
	.fsm-links { margin-top: 0; }
	.fsm-side { order: 0; }
}

/* Footer: the mark huge, faint and cut off by the corner (guide 07 lean) */
.foot { position: relative; overflow: hidden; padding: var(--space-xl) 0 var(--space-l); }
.foot .lm { position: absolute; right: -24%; bottom: -30%; width: min(120vw, 1100px); rotate: -8deg; --fill: color-mix(in srgb, var(--lilac) 16%, transparent); pointer-events: none; }
.foot .signoff { position: relative; margin: 0 0 var(--space-m); }
.foot .signoff span { display: block; width: max-content; max-width: 100%; }
.foot .signoff span:nth-child(2) { rotate: -3deg; margin-left: 8%; }
.socials { position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 var(--space-l); padding: 0; list-style: none; }
.socials a { font-size: 15px; padding: 7px 11px; }
.foot .small { position: relative; margin: 0; font-size: 13px; color: var(--haze); }

/* Strays: the guide's shapes popping in around a section, never on top of
   what it says. Placement and angle are written per stray (seeded, so they
   look random but don't jump between visits). */
/* Strays may hang off a section's side; clip (not hidden) cuts them at the
   screen edge without making a scroll container. A stray poking 101px past
   the right edge widened the phone page to 429px before this. */
.has-strays { position: relative; overflow-x: clip; }
.stray {
	position: absolute; z-index: 0; pointer-events: none;
	left: var(--x, auto); right: var(--xr, auto); top: var(--y, auto); bottom: var(--yb, auto);
	width: var(--w, 80px);
	rotate: var(--r, 0deg);
}
/* Set by tfc.js when a stray would cover text: try the other side, else
   sit this screen size out */
.stray.stray-flip { left: var(--xr, auto); right: var(--x, auto); }
.stray.stray-off { display: none; }
.stray svg, .stray .lm { display: block; width: 100%; height: auto; overflow: visible; }
.stray.burst text { font-family: var(--display); font-weight: var(--display-weight); text-transform: uppercase; }
.stray.dots { aspect-ratio: 1; background: radial-gradient(circle, var(--dot, var(--purple)) 0 1.4px, transparent 2px) 0 0 / 7px 7px; -webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent); }
.stray.mark .lm { --fill: color-mix(in srgb, var(--lilac) 30%, transparent); }
.stray.label {
	width: auto; padding: 5px 10px; background: var(--deep); color: var(--haze);
	font-size: 12px; font-variation-settings: 'MONO' 1; text-transform: uppercase; white-space: nowrap;
}
/* Content stacks above strays */
.has-strays > :not(.stray, .room-bg) { position: relative; z-index: 1; }

/* Motion. Every hidden start state sits behind html.moves, which an inline
   head snippet sets only when JS runs and the visitor hasn't asked for less
   motion. No JS, or reduced motion, lands on the fully visible page. */
html.moves [data-reveal], html.moves .stray { opacity: 0; }

/* 03 reduced motion: the lean stays (a still angle isn't motion), nothing
   travels, no pulse */
@media (prefers-reduced-motion: reduce) {
	body { animation: none; }
	.marquee .track { animation: none; flex-wrap: wrap; width: auto; }
	.draw, .u-pen path { stroke-dashoffset: 0; transition: none; }
	.poster .art, .vinyl img { transition: none; }
	.poster:hover .art, .poster.focus .art, .poster:active .art { rotate: calc(var(--seed, 0) * var(--tilt-max) * var(--shape, 1) * 1deg); translate: none; scale: none; }
	.fsm, .fsm.open { transition: none; }
}