/* =============================================================
   RX-7 — night-stage racing portfolio
   Design language: long-exposure night racing. Near-black asphalt,
   warm white, one racing red. DIN-flavoured condensed display type
   (Bahnschrift variable), oblique like speed itself.
   No frameworks, no external assets.
   ============================================================= */

/* ---------- tokens ---------- */

:root {
	--bg: #08080b;
	--bg-2: #0e0e13;
	--bg-3: #14141b;
	--ink: #f2efe9;
	--dim: rgba(242, 239, 233, 0.55);
	--faint: rgba(242, 239, 233, 0.28);
	--line: rgba(242, 239, 233, 0.14);
	--red: #e8102e;
	--red-hot: #ff2843;
	--red-deep: #7d0d1e;

	--font-display: "Bahnschrift", "Arial Narrow", "Franklin Gothic Medium", sans-serif;
	--font-body: "Segoe UI", system-ui, sans-serif;

	--wide: 1440px;
	--gutter: clamp(1.25rem, 4vw, 4rem);
	--speed: 0.45s;
	--ease: cubic-bezier(0.22, 0.9, 0.3, 1);
}

/* ---------- reset-ish ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
}

html {
	scroll-behavior: smooth;
	color-scheme: dark;
}

body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

ul {
	padding: 0;
	list-style: none;
}

::selection {
	background: var(--red);
	color: var(--ink);
}

/* film grain over everything */
body::after {
	content: "";
	position: fixed;
	inset: -50%;
	pointer-events: none;
	z-index: 2147483000;
	opacity: 0.045;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: grain 8s steps(10) infinite;
}

@keyframes grain {
	0%, 100% { transform: translate(0, 0); }
	20% { transform: translate(-2%, 3%); }
	40% { transform: translate(3%, -2%); }
	60% { transform: translate(-3%, -3%); }
	80% { transform: translate(2%, 2%); }
}

/* ---------- type utilities ---------- */

.display,
.hero-title,
.section-title,
.page-title,
.album-title,
.stat dd,
.tunnel-year,
.album-card-title,
.err-code,
.footer-wordmark,
.album-nav-title,
.lb-counter {
	font-family: var(--font-display);
	font-variation-settings: "wght" 800, "wdth" 76;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 0.92;
}

.kicker {
	font-family: var(--font-display);
	font-variation-settings: "wght" 600, "wdth" 84;
	text-transform: uppercase;
	letter-spacing: 0.32em;
	font-size: 0.78rem;
	color: var(--dim);
	margin-bottom: 1.1rem;
}

.kicker-slash {
	color: var(--red);
	letter-spacing: 0;
	margin-right: 0.35em;
}

.section-title {
	font-size: clamp(2.2rem, 4.6vw, 3.9rem);
	font-style: oblique 8deg;
}

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip-link {
	position: fixed;
	top: -100px;
	left: 1rem;
	z-index: 300;
	background: var(--red);
	padding: 0.6rem 1.2rem;
	transition: top 0.2s;
}

.skip-link:focus {
	top: 1rem;
}

:focus-visible {
	outline: 2px solid var(--red);
	outline-offset: 3px;
}

/* ---------- buttons ---------- */

.btn {
	display: inline-block;
	font-family: var(--font-display);
	font-variation-settings: "wght" 700, "wdth" 80;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.86rem;
	padding: 0.95rem 1.9rem;
	border: 1px solid transparent;
	transform: skewX(-8deg);
	transition: background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease), translate var(--speed) var(--ease);
}

.btn > * { transform: skewX(8deg); }

.btn-solid {
	background: var(--red);
	color: var(--ink);
}

.btn-solid:hover {
	background: var(--red-hot);
	translate: 0 -2px;
}

.btn-ghost {
	border-color: var(--line);
	color: var(--ink);
}

.btn-ghost:hover {
	border-color: var(--red);
	color: var(--red-hot);
}

/* ---------- header ---------- */

.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 200;
	transition: background var(--speed), border-color var(--speed), backdrop-filter var(--speed);
	border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
	background: color-mix(in srgb, var(--bg) 82%, transparent);
	backdrop-filter: blur(14px);
	border-bottom-color: var(--line);
}

body.admin-bar .site-header { top: 32px; }

.site-header-inner {
	max-width: var(--wide);
	margin-inline: auto;
	padding: 0.9rem var(--gutter);
	display: flex;
	align-items: center;
	gap: 2rem;
}

.brand {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-right: auto;
}

.rotor { width: 34px; height: 34px; color: var(--red); flex: none; }

.brand:hover .rotor { animation: rotor-spin 1.2s var(--ease); }

@keyframes rotor-spin {
	to { transform: rotate(360deg); }
}

.brand-text { line-height: 1.15; }

.brand-name {
	display: block;
	font-family: var(--font-display);
	font-variation-settings: "wght" 700, "wdth" 80;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.95rem;
}

.brand-sub {
	display: block;
	font-size: 0.68rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--dim);
}

.nav-list {
	display: flex;
	gap: 1.7rem;
}

.nav-list a {
	font-family: var(--font-display);
	font-variation-settings: "wght" 600, "wdth" 84;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.8rem;
	color: var(--dim);
	position: relative;
	padding: 0.3rem 0;
	transition: color var(--speed);
}

.nav-list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 100%;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--speed) var(--ease);
}

.nav-list a:hover {
	color: var(--ink);
}

.nav-list a:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

.header-cta {
	font-family: var(--font-display);
	font-variation-settings: "wght" 700, "wdth" 80;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.78rem;
	color: var(--red-hot);
	border: 1px solid color-mix(in srgb, var(--red) 55%, transparent);
	padding: 0.55rem 1.1rem;
	transform: skewX(-8deg);
	transition: background var(--speed), color var(--speed);
}

.header-cta:hover {
	background: var(--red);
	color: var(--ink);
}

.nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--line);
	width: 44px;
	height: 44px;
	cursor: pointer;
	position: relative;
}

.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	height: 2px;
	background: var(--ink);
	transition: transform var(--speed), opacity var(--speed);
}

.nav-toggle-bar { top: 50%; }
.nav-toggle-bar::before { top: -7px; left: 0; right: 0; }
.nav-toggle-bar::after { top: 7px; left: 0; right: 0; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(7px) rotate(45deg); background: var(--red-hot); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { transform: translateY(-7px) rotate(-45deg); background: var(--red-hot); }

.mobile-nav {
	display: none;
	border-top: 1px solid var(--line);
	background: color-mix(in srgb, var(--bg) 92%, transparent);
	backdrop-filter: blur(16px);
	padding: 1rem var(--gutter) 1.6rem;
}

.mobile-nav .nav-list {
	flex-direction: column;
	gap: 0.4rem;
}

.mobile-nav .nav-list a {
	font-size: 1.4rem;
	display: block;
	padding: 0.55rem 0;
}

/* ---------- hero ---------- */

.hero {
	position: relative;
	background:
		radial-gradient(120% 90% at 78% 8%, rgba(232, 16, 46, 0.14), transparent 55%),
		radial-gradient(90% 70% at 10% 100%, rgba(242, 239, 233, 0.05), transparent 60%),
		var(--bg);
}

.hero-sticky {
	position: relative;
	min-height: 100svh;
	display: grid;
	align-items: center;
	overflow: clip;
}

/* Cinematic pinned hero: full-bleed 360° turntable driven purely by
   scroll, with an intro title and three story beats along the lap. */
.hero-cine { height: 340vh; }

.hero-cine .hero-sticky {
	position: sticky;
	top: 0;
	height: 100svh;
	min-height: 0;
	overflow: clip;
	display: block;
}

.hero-intro {
	position: absolute;
	z-index: 2;
	left: var(--gutter);
	top: max(16vh, 7rem);
	max-width: 44rem;
	opacity: calc(1 - var(--hp, 0) * 5);
	translate: 0 calc(var(--hp, 0) * -8vh);
	text-shadow: 0 2px 22px rgba(5, 5, 8, 0.85);
}

.hero-intro.is-hidden { visibility: hidden; }

.hero-beat {
	position: absolute;
	z-index: 2;
	top: 50%;
	max-width: 28rem;
	opacity: 0;
	translate: 0 -42%;
	transition: opacity 0.55s var(--ease), translate 0.55s var(--ease);
	pointer-events: none;
}

/* soft dark halo behind the copy so it reads on bright bodywork */
.hero-beat::before {
	content: "";
	position: absolute;
	inset: -3rem -3.5rem;
	z-index: -1;
	background: radial-gradient(ellipse at center, rgba(5, 5, 8, 0.72), transparent 72%);
}

.hero-beat-title,
.hero-beat-num {
	text-shadow: 0 2px 18px rgba(5, 5, 8, 0.9);
}

.hero-beat.is-on {
	opacity: 1;
	translate: 0 -50%;
}

.hero-beat-left { left: var(--gutter); }
.hero-beat-right { right: var(--gutter); }

.hero-beat-num {
	display: block;
	font-family: var(--font-display);
	font-variation-settings: "wght" 800, "wdth" 76;
	font-style: oblique 9deg;
	font-size: 2.8rem;
	color: var(--red);
	margin-bottom: 0.35rem;
}

.hero-beat-title {
	font-family: var(--font-display);
	font-variation-settings: "wght" 800, "wdth" 76;
	text-transform: uppercase;
	font-style: oblique 8deg;
	font-size: clamp(1.9rem, 3vw, 2.7rem);
	margin-bottom: 0.7rem;
}

.hero-beat p {
	color: var(--ink);
	opacity: 0.85;
	font-size: 1.1rem;
	line-height: 1.6;
	text-shadow: 0 1px 12px rgba(5, 5, 8, 0.8);
}

.hero-streaks {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.hero-stage {
	position: relative;
	z-index: 1;
	max-width: var(--wide);
	width: 100%;
	margin-inline: auto;
	padding: 8rem var(--gutter) 6rem;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: center;
	gap: 2rem;
	transform-style: preserve-3d;
	perspective: 1200px;
}

[data-depth] {
	will-change: transform;
	transform: translate3d(var(--px, 0), var(--py, 0), 0);
}

.hero-kicker {
	font-family: var(--font-display);
	font-variation-settings: "wght" 600, "wdth" 84;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: 0.8rem;
	color: var(--dim);
	margin-bottom: 1.6rem;
}

.hero-kicker .kicker-slash { color: var(--red); }

.hero-title {
	font-size: clamp(3.1rem, 8.6vw, 7.6rem);
	font-style: oblique 9deg;
	display: grid;
	gap: 0.06em;
}

.hero-line { display: block; }

.hero-line-ghost {
	color: transparent;
	-webkit-text-stroke: 1.5px var(--faint);
}

.hero-line-solid { color: var(--ink); }

.hero-line-red {
	color: var(--red);
	font-size: 1.32em;
	text-shadow: 0 0 60px rgba(232, 16, 46, 0.35);
}

.hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 2.2rem;
	margin-top: 2.2rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--line);
	max-width: 34rem;
}

.hero-meta li { font-size: 0.95rem; color: var(--ink); }

.hero-meta-label {
	display: block;
	font-size: 0.66rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--faint);
	margin-bottom: 0.2rem;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2.4rem;
}

/* 360° photo turntable, full-bleed behind the copy. */
.hero-360 {
	position: absolute;
	inset: 0;
}

.hero-360-frame,
.hero-360-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: contrast(1.04) saturate(1.02) brightness(0.88);
}

/* the JS canvas paints on top of the poster <img> */
.hero-360-canvas { z-index: 0; }

/* edge treatment: melt the studio frame into the page background,
   plus the red stage light on the floor */
.hero-360::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to right, rgba(8, 8, 11, 0.6), transparent 30%, transparent 70%, rgba(8, 8, 11, 0.6)),
		linear-gradient(to bottom, rgba(8, 8, 11, 0.65), transparent 26%, transparent 70%, var(--bg) 99%),
		radial-gradient(130% 100% at 50% 46%, transparent 55%, rgba(8, 8, 11, 0.85) 96%);
}

.hero-360::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 6%;
	width: 64%;
	height: 18%;
	translate: -50% 0;
	background: radial-gradient(ellipse at center, rgba(232, 16, 46, 0.3), transparent 68%);
	mix-blend-mode: screen;
	pointer-events: none;
	z-index: 1;
}

.hero-360-hint {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 5.2rem;
	translate: -50% 0;
	white-space: nowrap;
	font-family: var(--font-display);
	font-variation-settings: "wght" 600, "wdth" 82;
	text-transform: uppercase;
	letter-spacing: 0.24em;
	font-size: 0.68rem;
	color: var(--dim);
	opacity: 0;
	transition: opacity 0.8s 0.3s;
}

.hero-360.is-ready ~ .hero-360-hint,
.hero-sticky:has(.hero-360.is-ready) .hero-360-hint { opacity: 1; }

.hero-car-plate {
	font-family: var(--font-display);
	font-variation-settings: "wght" 700, "wdth" 80;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 0.72rem;
	color: var(--dim);
	padding: 0.65rem 0.2rem;
	display: flex;
	justify-content: space-between;
}

.hero-car-plate::after {
	content: "";
	width: 64px;
	background-image: repeating-conic-gradient(var(--ink) 0% 25%, transparent 25% 50%);
	background-size: 8px 8px;
	opacity: 0.55;
}

.hero-scroll {
	position: absolute;
	left: 50%;
	bottom: 1.6rem;
	translate: -50% 0;
	z-index: 2;
}

.hero-scroll-track {
	display: block;
	width: 26px;
	height: 44px;
	border: 1px solid var(--line);
	border-radius: 13px;
	position: relative;
}

.hero-scroll-dot {
	position: absolute;
	left: 50%;
	top: 7px;
	width: 4px;
	height: 8px;
	margin-left: -2px;
	border-radius: 2px;
	background: var(--red);
	animation: scroll-dot 1.8s var(--ease) infinite;
}

@keyframes scroll-dot {
	60% { transform: translateY(18px); opacity: 0; }
	100% { transform: translateY(0); opacity: 0; }
}

/* load-in reveals (gated behind .js so no-JS still shows content) */
html.js .reveal-load {
	opacity: 0;
	transform: translateY(26px) skewY(1.2deg);
	animation: rise 0.9s var(--ease) forwards;
	animation-delay: calc(var(--load, 1) * 110ms);
}

@keyframes rise {
	to { opacity: 1; transform: none; }
}

/* ---------- sections shared ---------- */

.story,
.latest,
.archive-body,
.album-note {
	max-width: var(--wide);
	margin-inline: auto;
	padding: clamp(4rem, 9vw, 7.5rem) var(--gutter);
}

/* ---------- story ---------- */

.story-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}

.story-copy p {
	color: var(--dim);
	max-width: 34rem;
}

.story-copy p + p { margin-top: 1rem; }

.story-copy .section-title { margin-bottom: 1.4rem; }

.stats {
	display: flex;
	gap: 2.6rem;
	margin-top: 2.6rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--line);
}

.stat dt {
	font-size: 0.68rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--faint);
	order: 2;
}

.stat dd {
	font-size: clamp(2.2rem, 4vw, 3.2rem);
	color: var(--red);
	font-style: oblique 8deg;
	font-variant-numeric: tabular-nums;
}

.story-media {
	position: relative;
	min-height: 480px;
}

.story-photo {
	position: absolute;
	border: 1px solid var(--line);
	background: var(--bg-2);
	padding: 0.6rem 0.6rem 0;
	box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.85);
	transition: transform var(--speed) var(--ease);
	transform:
		rotate(var(--rot, 0deg))
		perspective(700px)
		rotateX(var(--rx, 0deg))
		rotateY(var(--ry, 0deg));
}

.story-photo figcaption {
	font-family: var(--font-display);
	font-variation-settings: "wght" 600, "wdth" 82;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.68rem;
	color: var(--dim);
	padding: 0.55rem 0.15rem;
}

.story-photo-back {
	--rot: -5deg;
	width: 58%;
	top: 0;
	left: 0;
	z-index: 1;
}

.story-photo-front {
	--rot: 3deg;
	width: 62%;
	right: 0;
	bottom: 0;
	z-index: 2;
}

/* ---------- section divider (checkered flag strip) ---------- */

.section-divider {
	height: 10px;
	background-image: repeating-conic-gradient(rgba(242, 239, 233, 0.5) 0% 25%, transparent 25% 50%);
	background-size: 10px 10px;
	opacity: 0.28;
	border-block: 1px solid var(--line);
}

/* ---------- milestones timeline ---------- */

.milestones {
	max-width: var(--wide);
	margin-inline: auto;
	padding: clamp(4rem, 9vw, 7.5rem) var(--gutter);
}

.milestones-head { padding-bottom: 2.5rem; }

.milestones-list {
	position: relative;
	display: grid;
	gap: clamp(1.8rem, 4vw, 2.8rem);
	padding-left: clamp(0rem, 2vw, 1rem);
}

.milestones-list::before {
	content: "";
	position: absolute;
	left: clamp(3.4rem, 6vw, 4.6rem);
	top: 0.5rem;
	bottom: 0.5rem;
	width: 1px;
	background: var(--line);
}

.milestone {
	display: grid;
	grid-template-columns: clamp(6rem, 11vw, 8.5rem) minmax(0, 40rem);
	gap: clamp(1.2rem, 3vw, 2.4rem);
	align-items: start;
}

.milestone-year {
	font-family: var(--font-display);
	font-variation-settings: "wght" 800, "wdth" 76;
	font-style: oblique 9deg;
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
	color: var(--red);
	line-height: 1;
	position: relative;
	background: var(--bg);
	padding-block: 0.15rem;
	text-align: right;
	padding-right: 0.6rem;
}

.milestone-title {
	font-family: var(--font-display);
	font-variation-settings: "wght" 800, "wdth" 78;
	text-transform: uppercase;
	font-style: oblique 8deg;
	font-size: clamp(1.2rem, 2vw, 1.6rem);
	margin-bottom: 0.45rem;
}

.milestone-body p { color: var(--dim); }

/* ---------- machine & venues ---------- */

.machine {
	border-block: 1px solid var(--line);
	background: var(--bg-2);
}

.machine-grid {
	max-width: var(--wide);
	margin-inline: auto;
	padding: clamp(4rem, 8vw, 6.5rem) var(--gutter);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 6vw, 5rem);
}

.machine-col .section-title { margin-bottom: 1.2rem; }

.machine-col p {
	color: var(--dim);
	max-width: 32rem;
}

.machine-col p + p { margin-top: 1rem; }

.venue-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.4rem;
}

.venue-chips li { display: contents; }

.chip-static {
	cursor: default;
	color: var(--dim);
}

@media (max-width: 820px) {
	.milestone { grid-template-columns: 4.6rem minmax(0, 1fr); }
	.milestones-list::before { left: 4.1rem; }
	.milestone-year { font-size: 1.4rem; }
	.machine-grid { grid-template-columns: 1fr; }
}

/* ---------- 3D year tunnel ---------- */

.tunnel {
	position: relative;
	height: 340vh;
	background: var(--bg-2);
	border-block: 1px solid var(--line);
}

.tunnel-sticky {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: clip;
	display: grid;
}

.tunnel-head {
	position: absolute;
	top: clamp(4.5rem, 9vh, 7rem);
	left: 50%;
	translate: -50% 0;
	text-align: center;
	z-index: 5;
	pointer-events: none;
}

.tunnel-hint {
	margin-top: 0.6rem;
	font-size: 0.78rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--faint);
	transition: opacity 0.6s;
}

.tunnel-hint.is-hidden { opacity: 0; }

.tunnel-world {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	perspective: 950px;
	perspective-origin: 50% 46%;
}

.tunnel-road {
	position: absolute;
	inset: auto 0 0 0;
	height: 46%;
	background:
		linear-gradient(to top, rgba(232, 16, 46, 0.06), transparent 70%),
		repeating-linear-gradient(to top, var(--faint) 0 3px, transparent 3px 26px) 50% 0 / 3px 100% no-repeat;
	mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
	transform: perspective(600px) rotateX(55deg);
	transform-origin: bottom;
	opacity: 0.5;
}

.tunnel-plane {
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(44vw, 540px);
	aspect-ratio: 4 / 3;
	margin: calc(min(44vw, 540px) * -0.375) 0 0 calc(min(44vw, 540px) / -2);
	display: grid;
	place-content: center;
	gap: 0.3rem;
	text-align: center;
	border: 1px solid var(--line);
	background:
		linear-gradient(rgba(8, 8, 11, 0.66), rgba(8, 8, 11, 0.66)),
		var(--cover, linear-gradient(var(--bg-3), var(--bg-3))) center / cover;
	opacity: var(--o, 0);
	filter: blur(var(--blur, 0px));
	transform:
		translate3d(var(--x, 0px), var(--y, 0px), var(--z, -2000px));
	transition: border-color var(--speed);
	backface-visibility: hidden;
}

.tunnel-plane:hover { border-color: var(--red); }

.tunnel-plane:hover .tunnel-year { color: var(--red-hot); -webkit-text-stroke: 0; }

.tunnel-year {
	font-size: clamp(3.4rem, 9vw, 6.4rem);
	font-style: oblique 9deg;
	color: transparent;
	-webkit-text-stroke: 2px var(--ink);
	transition: color var(--speed);
}

.tunnel-count {
	font-family: var(--font-display);
	font-variation-settings: "wght" 600, "wdth" 82;
	text-transform: uppercase;
	letter-spacing: 0.24em;
	font-size: 0.76rem;
	color: var(--dim);
}

/* mobile: tunnel becomes a horizontal snap rail */
@media (max-width: 820px) {
	.tunnel { height: auto; }
	.tunnel-sticky { position: static; height: auto; overflow: visible; display: block; padding: 4rem 0 4.5rem; }
	.tunnel-head { position: static; translate: none; margin-bottom: 2rem; pointer-events: auto; }
	.tunnel-road, .tunnel-hint { display: none; }
	.tunnel-world {
		position: static;
		display: flex;
		gap: 1rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding: 0 var(--gutter) 1rem;
		perspective: none;
	}
	.tunnel-plane {
		position: static;
		margin: 0;
		flex: 0 0 72vw;
		width: 72vw;
		opacity: 1;
		filter: none;
		transform: none;
		scroll-snap-align: center;
	}
}

/* ---------- album cards ---------- */

.albums-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	gap: clamp(1.2rem, 2.5vw, 2.2rem);
}

.album-card {
	perspective: 800px;
}

.album-card-link {
	display: block;
	transform:
		rotateX(var(--rx, 0deg))
		rotateY(var(--ry, 0deg));
	transform-style: preserve-3d;
	transition: transform 0.5s var(--ease);
}

.album-card-media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: clip;
	background: var(--bg-3);
	border: 1px solid var(--line);
}

.album-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.85) contrast(1.04);
	transition: transform 0.7s var(--ease), filter 0.7s var(--ease);
}

.album-card:hover .album-card-media img {
	transform: scale(1.06);
	filter: saturate(1.05) contrast(1.06);
}

.album-card-glare {
	position: absolute;
	inset: 0;
	background: radial-gradient(300px circle at var(--gx, 50%) var(--gy, 50%), rgba(242, 239, 233, 0.14), transparent 60%);
	opacity: 0;
	transition: opacity var(--speed);
	pointer-events: none;
}

.album-card:hover .album-card-glare { opacity: 1; }

.album-card-corners {
	position: absolute;
	inset: 10px;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--speed), inset var(--speed) var(--ease);
	background:
		linear-gradient(var(--red) 0 0) top left / 18px 2px,
		linear-gradient(var(--red) 0 0) top left / 2px 18px,
		linear-gradient(var(--red) 0 0) top right / 18px 2px,
		linear-gradient(var(--red) 0 0) top right / 2px 18px,
		linear-gradient(var(--red) 0 0) bottom left / 18px 2px,
		linear-gradient(var(--red) 0 0) bottom left / 2px 18px,
		linear-gradient(var(--red) 0 0) bottom right / 18px 2px,
		linear-gradient(var(--red) 0 0) bottom right / 2px 18px;
	background-repeat: no-repeat;
}

.album-card:hover .album-card-corners { opacity: 1; inset: 6px; }

.album-card-body {
	display: block;
	padding: 1rem 0.2rem 0;
}

.album-card-year {
	display: inline-block;
	font-family: var(--font-display);
	font-variation-settings: "wght" 700, "wdth" 80;
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	color: var(--ink);
	background: var(--red);
	padding: 0.18rem 0.6rem;
	transform: skewX(-8deg);
	margin-bottom: 0.5rem;
}

.album-card-title {
	display: block;
	font-size: 1.45rem;
	font-style: oblique 8deg;
	transition: color var(--speed);
}

.album-card:hover .album-card-title { color: var(--red-hot); }

.album-card-meta {
	display: block;
	font-size: 0.8rem;
	color: var(--faint);
	letter-spacing: 0.08em;
	margin-top: 0.25rem;
}

/* ---------- latest section ---------- */

.latest-head,
.page-head {
	max-width: var(--wide);
	margin-inline: auto;
}

.latest-head { padding: 0 0 2.5rem; }

.latest-more {
	margin-top: 3rem;
	text-align: center;
}

.empty-note { color: var(--dim); }

/* ---------- archive pages ---------- */

.page-head {
	padding: clamp(8rem, 16vh, 11rem) var(--gutter) 0.5rem;
}

.page-title {
	font-size: clamp(2.8rem, 7.5vw, 5.6rem);
	font-style: oblique 9deg;
	margin-bottom: 1.6rem;
}

.page-title-year { color: var(--red); }

.year-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	padding-bottom: 0.5rem;
}

.chip {
	font-family: var(--font-display);
	font-variation-settings: "wght" 600, "wdth" 82;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.8rem;
	color: var(--dim);
	border: 1px solid var(--line);
	padding: 0.42rem 0.95rem;
	transform: skewX(-8deg);
	transition: color var(--speed), border-color var(--speed), background var(--speed);
}

.chip:hover { color: var(--ink); border-color: var(--dim); }

.chip.is-active {
	background: var(--red);
	border-color: var(--red);
	color: var(--ink);
}

.archive-body { padding-top: 2.5rem; }

/* pagination */
.pagination {
	margin-top: 3rem;
}

.pagination .nav-links {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
}

.pagination .page-numbers {
	font-family: var(--font-display);
	font-variation-settings: "wght" 700, "wdth" 80;
	border: 1px solid var(--line);
	min-width: 44px;
	padding: 0.5rem 0.8rem;
	text-align: center;
	color: var(--dim);
	transform: skewX(-8deg);
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
	background: var(--red);
	border-color: var(--red);
	color: var(--ink);
}

/* ---------- single album ---------- */

.album-head {
	position: relative;
	min-height: 54svh;
	display: grid;
	align-items: end;
	overflow: clip;
	border-bottom: 1px solid var(--line);
}

.album-head::before {
	content: "";
	position: absolute;
	inset: -4%;
	background: var(--cover, var(--bg-2)) center / cover;
	filter: blur(14px) brightness(0.32) saturate(0.85);
	transform: scale(1.06);
}

.album-head::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--bg) 4%, transparent 60%);
}

.album-head-inner {
	position: relative;
	z-index: 1;
	max-width: var(--wide);
	width: 100%;
	margin-inline: auto;
	padding: 9rem var(--gutter) 2.4rem;
}

.album-breadcrumb {
	font-family: var(--font-display);
	font-variation-settings: "wght" 600, "wdth" 82;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: 0.74rem;
	color: var(--dim);
	display: flex;
	gap: 0.7rem;
	margin-bottom: 1rem;
}

.album-breadcrumb a:hover { color: var(--red-hot); }

.album-title {
	font-size: clamp(2.6rem, 7vw, 5.4rem);
	font-style: oblique 9deg;
}

.album-meta {
	margin-top: 0.8rem;
	color: var(--dim);
	font-size: 0.9rem;
	letter-spacing: 0.1em;
}

.album-note { padding-block: 2rem 0; color: var(--dim); max-width: 46rem; }

.album-photos {
	max-width: var(--wide);
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 4rem) var(--gutter);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 1rem;
}

.photo {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: clip;
	background: var(--bg-3);
	border: 1px solid var(--line);
	cursor: zoom-in;
}

.photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.85);
	transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
}

.photo:hover img {
	transform: scale(1.05);
	filter: saturate(1.05);
}

.photo::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 2px var(--red);
	opacity: 0;
	transition: opacity var(--speed);
}

.photo:hover::after { opacity: 1; }

.album-nav {
	max-width: var(--wide);
	margin-inline: auto;
	padding: 0 var(--gutter) clamp(4rem, 8vw, 6rem);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.album-nav-link {
	border: 1px solid var(--line);
	padding: 1.4rem 1.6rem;
	transition: border-color var(--speed), background var(--speed);
}

.album-nav-link:hover { border-color: var(--red); background: var(--bg-2); }

.album-nav-next { text-align: right; grid-column: 2; }

.album-nav-dir {
	display: block;
	font-size: 0.72rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--faint);
	margin-bottom: 0.4rem;
}

.album-nav-title {
	font-size: 1.5rem;
	font-style: oblique 8deg;
}

/* ---------- sponsors ---------- */

.sponsors-intro { margin-bottom: 2.5rem; }

.sponsors-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	gap: clamp(1.2rem, 2.5vw, 2rem);
}

.sponsor-card {
	border: 1px solid var(--line);
	background: var(--bg-2);
	padding: 1.8rem 1.7rem 1.6rem;
	transition: border-color var(--speed), translate var(--speed) var(--ease);
}

.sponsor-card:hover {
	border-color: var(--red);
	translate: 0 -3px;
}

.sponsor-name {
	font-family: var(--font-display);
	font-variation-settings: "wght" 800, "wdth" 76;
	text-transform: uppercase;
	font-style: oblique 8deg;
	font-size: 1.6rem;
	margin-bottom: 0.6rem;
}

.sponsor-note {
	color: var(--dim);
	font-size: 0.95rem;
	margin-bottom: 1.1rem;
}

.sponsor-card .chip { display: inline-block; }

.sponsors-thanks {
	margin-top: 3rem;
	font-family: var(--font-display);
	font-variation-settings: "wght" 700, "wdth" 80;
	text-transform: uppercase;
	font-style: oblique 8deg;
	letter-spacing: 0.06em;
	font-size: 1.25rem;
	color: var(--dim);
}

.sponsors-cta {
	margin-top: 3.5rem;
	border: 1px solid var(--line);
	border-left: 4px solid var(--red);
	background: var(--bg-2);
	padding: clamp(2.2rem, 4vw, 3.2rem) clamp(2.4rem, 4vw, 3.6rem);
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	column-gap: clamp(2.5rem, 5vw, 5rem);
}

.sponsors-cta .kicker,
.sponsors-cta-title,
.sponsors-cta > p {
	grid-column: 1;
}

.sponsors-cta .offer-list {
	grid-column: 2;
	grid-row: 1 / span 3;
	align-self: center;
}

.sponsors-cta-title {
	font-family: var(--font-display);
	font-variation-settings: "wght" 800, "wdth" 76;
	text-transform: uppercase;
	font-style: oblique 8deg;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	margin-bottom: 0.8rem;
}

.sponsors-cta p { color: var(--dim); }

.offer-list {
	margin-top: 1.4rem;
	display: grid;
	gap: 0.7rem;
}

.offer-list li {
	color: var(--dim);
	padding-left: 1.5rem;
	position: relative;
}

.offer-list li::before {
	content: "//";
	position: absolute;
	left: 0;
	color: var(--red);
	font-family: var(--font-display);
	font-variation-settings: "wght" 700, "wdth" 80;
}

/* ---------- sponsor enquiry form ---------- */

.sponsor-form-wrap {
	margin-top: 3.5rem;
}

.sponsor-form-title {
	font-family: var(--font-display);
	font-variation-settings: "wght" 800, "wdth" 76;
	text-transform: uppercase;
	font-style: oblique 8deg;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	margin-bottom: 1.4rem;
}

.form-note {
	padding: 0.9rem 1.2rem;
	margin-bottom: 1.4rem;
	border: 1px solid var(--line);
	font-size: 0.95rem;
}

.form-note-ok { border-left: 4px solid #1f8f3a; color: var(--ink); }
.form-note-err { border-left: 4px solid var(--red); color: var(--ink); }

.sponsor-form {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.1rem 1.4rem;
}

.form-field { display: grid; gap: 0.4rem; }
.form-field-full { grid-column: 1 / -1; }

.form-field label {
	font-family: var(--font-display);
	font-variation-settings: "wght" 600, "wdth" 82;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.72rem;
	color: var(--dim);
}

.form-field input,
.form-field textarea {
	background: var(--bg-2);
	border: 1px solid var(--line);
	color: var(--ink);
	font: inherit;
	padding: 0.75rem 0.9rem;
	transition: border-color var(--speed);
}

.form-field input:focus,
.form-field textarea:focus {
	outline: none;
	border-color: var(--red);
}

.form-field textarea { resize: vertical; min-height: 8rem; }

.form-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-submit { margin-top: 0.4rem; }

.form-submit .btn { cursor: pointer; }

@media (max-width: 900px) {
	.sponsor-form { grid-template-columns: 1fr; }
	.sponsors-cta { grid-template-columns: 1fr; }
	.sponsors-cta .offer-list { grid-column: 1; grid-row: auto; margin-top: 1.6rem; }
}

/* ---------- prose (static pages) ---------- */

.prose {
	max-width: 46rem;
}

.prose p { color: var(--dim); margin-bottom: 1.1rem; }

.prose h2, .prose h3 {
	font-family: var(--font-display);
	font-variation-settings: "wght" 700, "wdth" 78;
	text-transform: uppercase;
	font-style: oblique 8deg;
	margin: 2.2rem 0 0.9rem;
}

.prose a { color: var(--red-hot); border-bottom: 1px solid currentColor; }

/* ---------- 404 ---------- */

.page-head-404 {
	min-height: 70svh;
	display: grid;
	place-content: center;
	text-align: center;
	gap: 0.6rem;
}

.err-code {
	font-size: clamp(6rem, 22vw, 16rem);
	font-style: oblique 10deg;
	color: transparent;
	-webkit-text-stroke: 2px var(--red);
	line-height: 1;
}

.err-note { color: var(--dim); margin-bottom: 1.4rem; }

/* ---------- footer ---------- */

.site-footer {
	position: relative;
	border-top: 1px solid var(--line);
	background: var(--bg-2);
	overflow: clip;
	margin-top: clamp(3rem, 8vw, 6rem);
}

.footer-wordmark {
	position: absolute;
	right: -0.06em;
	bottom: -0.18em;
	font-size: clamp(9rem, 26vw, 22rem);
	font-style: oblique 10deg;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(242, 239, 233, 0.07);
	pointer-events: none;
	line-height: 1;
}

.footer-grid {
	position: relative;
	max-width: var(--wide);
	margin-inline: auto;
	padding: clamp(3rem, 6vw, 5rem) var(--gutter) 2.5rem;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 2.5rem;
}

.footer-brand {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.2rem;
}

.footer-brand:hover .footer-rotor { animation: rotor-spin 1.2s var(--ease); }

.footer-rotor { width: 52px; height: 52px; color: var(--red); flex: none; }

.footer-brand-text { line-height: 1.2; }

.footer-brand-name {
	display: block;
	font-family: var(--font-display);
	font-variation-settings: "wght" 800, "wdth" 78;
	text-transform: uppercase;
	font-style: oblique 8deg;
	letter-spacing: 0.06em;
	font-size: 1.35rem;
}

.footer-brand-sub {
	display: block;
	font-size: 0.72rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--dim);
	margin-top: 0.25rem;
}

.footer-tag { color: var(--dim); max-width: 24rem; }

.footer-heading {
	font-family: var(--font-display);
	font-variation-settings: "wght" 700, "wdth" 80;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 0.78rem;
	color: var(--faint);
	margin-bottom: 1rem;
}

.footer-grid .nav-list { flex-direction: column; gap: 0.5rem; }

.footer-years {
	display: grid;
	grid-template-columns: repeat(3, max-content);
	gap: 0.45rem 1.4rem;
}

.footer-years a {
	font-family: var(--font-display);
	font-variation-settings: "wght" 600, "wdth" 82;
	font-size: 0.9rem;
	color: var(--dim);
	transition: color var(--speed);
}

.footer-years a:hover { color: var(--red-hot); }

.footer-strip {
	height: 10px;
	background-image: repeating-conic-gradient(rgba(242, 239, 233, 0.5) 0% 25%, transparent 25% 50%);
	background-size: 10px 10px;
	opacity: 0.35;
}

.footer-credit {
	position: relative;
	text-align: center;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--faint);
	padding: 1.2rem var(--gutter) 1.4rem;
}

.footer-credit-model {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.64rem;
	letter-spacing: 0.12em;
	opacity: 0.7;
}

.footer-credit-model a {
	color: var(--dim);
	border-bottom: 1px solid var(--line);
}

/* ---------- scroll reveal ---------- */

html.js .reveal {
	opacity: 0;
	transform: translateY(34px) skewY(1deg);
	transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
	transition-delay: calc(var(--stagger, 0) * 70ms);
}

html.js .reveal.is-in {
	opacity: 1;
	transform: none;
}

/* ---------- lightbox ---------- */

.lb {
	position: fixed;
	inset: 0;
	z-index: 400;
	display: grid;
	place-items: center;
	background: rgba(5, 5, 8, 0.94);
	backdrop-filter: blur(10px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s var(--ease), visibility 0.35s;
}

.lb.is-open { opacity: 1; visibility: visible; }

.lb-stage {
	position: relative;
	max-width: 94vw;
	max-height: 86svh;
	perspective: 1400px;
}

.lb-img {
	max-width: 94vw;
	max-height: 86svh;
	width: auto;
	height: auto;
	border: 1px solid var(--line);
	box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.9);
	transform-origin: center;
}

.lb-img.swap-next { animation: swap-next 0.45s var(--ease); }
.lb-img.swap-prev { animation: swap-prev 0.45s var(--ease); }

@keyframes swap-next {
	from { opacity: 0; transform: translateX(80px) rotateY(-14deg); }
	to { opacity: 1; transform: none; }
}

@keyframes swap-prev {
	from { opacity: 0; transform: translateX(-80px) rotateY(14deg); }
	to { opacity: 1; transform: none; }
}

.lb-btn {
	position: fixed;
	z-index: 2;
	background: none;
	border: 1px solid var(--line);
	color: var(--ink);
	width: 54px;
	height: 54px;
	display: grid;
	place-items: center;
	cursor: pointer;
	font-size: 1.3rem;
	transition: border-color var(--speed), background var(--speed);
}

.lb-btn:hover { border-color: var(--red); background: rgba(232, 16, 46, 0.15); }

.lb-close { top: 1.2rem; right: 1.2rem; }
.lb-prev { left: 1.2rem; top: 50%; translate: 0 -50%; }
.lb-next { right: 1.2rem; top: 50%; translate: 0 -50%; }

.lb-counter {
	position: fixed;
	left: 1.4rem;
	bottom: 1.2rem;
	font-size: 1.5rem;
	font-style: oblique 8deg;
	color: var(--red-hot);
	font-variant-numeric: tabular-nums;
}

.lb-counter small {
	font-size: 0.9rem;
	color: var(--dim);
}

@media (max-width: 640px) {
	.lb-prev, .lb-next { top: auto; bottom: 1.2rem; translate: none; }
	.lb-prev { left: auto; right: 5.4rem; }
}

/* ---------- responsive ---------- */

@media (max-width: 1020px) {
	.site-nav, .header-cta { display: none; }
	.nav-toggle { display: block; }
	.mobile-nav.is-open { display: block; }
	.hero-stage { grid-template-columns: 1fr; padding-top: 7rem; }
	.hero-cine { height: 260vh; }
	.hero-360-frame { object-fit: contain; }
	.hero-intro { top: 12vh; }
	.hero-beat { top: auto; bottom: 12vh; max-width: min(78vw, 24rem); translate: 0 8%; }
	.hero-beat.is-on { translate: 0 0; }
	.hero-beat-right { right: auto; left: var(--gutter); }
	.footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
	.story-grid { grid-template-columns: 1fr; }
	.story-media { min-height: 0; height: 74vw; }
	.stats { gap: 1.6rem; flex-wrap: wrap; }
	.album-nav { grid-template-columns: 1fr; }
	.album-nav-next { grid-column: auto; }
	.footer-grid { grid-template-columns: 1fr; gap: 2rem; }
	.footer-years { grid-template-columns: repeat(4, max-content); }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001s !important;
	}
	html.js .reveal, html.js .reveal-load {
		opacity: 1;
		transform: none;
	}
	body::after { display: none; }

	/* Unpin the hero and show the story beats statically. */
	.hero-cine { height: auto; }
	.hero-cine .hero-sticky { position: relative; height: auto; min-height: 100svh; padding-bottom: 3rem; }
	.hero-intro { opacity: 1; translate: none; }
	.hero-beat { position: static; opacity: 1; translate: none; margin: 1.5rem var(--gutter); }
	.hero-360 { position: relative; height: 52svh; }
}