/* ============================================================
   HAUNTED ATTRACTION WEBSITES — the landing page for the
   vertical, and the live demo of the THEIRS theme.

   THE PEN SHIPS. Adam's CodePen is reproduced below VERBATIM,
   under its own banner, and the standing instruction on it is
   absolute: NOTHING IN IT MAY BE RETIMED AND NOTHING IN IT MAY
   BE RESTYLED. Every :root scene variable, every keyframe, every
   animation-range is byte-for-byte what he wrote. If you are
   about to edit anything between THE PEN BEGINS and THE PEN
   ENDS, stop and ask him.

   Everything this page adds lives AFTER the pen, in blocks each
   marked ADDED, and every one of them was written to ride the
   pen's timeline rather than to change it:

     1. THE RUNWAY. The pen states its 800vh runtime as `body
        { height: var(--runtime) }`, which is exactly right for a
        pen with nothing under the film and impossible for a page
        with eight sections under it. The height is reproduced
        EXACTLY by an empty .runway spacer, so every
        animation-range still maps to the same absolute scroll
        offset it always did. This is the ONE declaration of the
        pen's that is overridden, and the timing does not move.

        It is also what finishes the film: the pen's own scroll
        range topped out at 700vh, so Scene 7 (680–780vh) could
        only ever reach 20% and the screen never actually went
        black. With a page under it the document is taller, 780vh
        is reachable, and the burial completes — which is the
        black screen the rest of this page is written on.

     2. THE SCRIPT. Three title cards pinned into the film on the
        pen's own scene variables. New elements, new ranges,
        nothing of the pen's touched. They are aria-hidden and
        every one of them says something the sections below say
        again in full — a line that flies past at scroll speed is
        not where content may live. The middle card opens in the
        blue sky's colours and is still on screen when the grave
        closes, so its palette crosses back to blood and black
        under the reader; that turn is the point of the set.

     3. THE PAGE. Masthead, seven sections, the collection band
        and the colophon, on the black the film leaves behind.

   THE no-runway TWIN IS AT THE FOOT OF THIS FILE and it is
   load-bearing twice over. The pen is 100% scroll-timeline
   driven with `fill-mode: both`, so without a resolvable
   timeline .flash-bang alone parks a full-screen white sheet
   over everything. And a reader who asked for less motion is
   owed the argument, not the ride.
   ============================================================ */


/* ---- Poster faces, for the collection band at the foot of the page.
   style.css's own subsets, declared verbatim: .poster_daylight,
   .poster_divebar and .poster_holo ask for them by name and this page
   loads no style.css. The unicode-ranges must match tools/fonts.py's
   LATIN / LATIN_EXT exactly and must not overlap.

   NOT PRELOADED, deliberately — small faces for three previews at the
   very bottom of a page whose film runs eight screens before them.
   Nothing above them waits on a font: this page's own type is the
   system stack, exactly as the pen's is. */
@font-face {
	font-family: "JetBrains Mono";
	src: url(/assets/fonts/jetbrains-mono-latin-v1.woff2) format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+00B0, U+00B7, U+2010-2027, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2190-2193, U+2212;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url(/assets/fonts/jetbrains-mono-latinext-v1.woff2) format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+00A1-00A8, U+00AA-00AD, U+00AF, U+00B1-00B6, U+00B8-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC;
}

@font-face {
	font-family: "Tilt Neon";
	src: url(/assets/fonts/tilt-neon-poster-v1.woff2) format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url(/assets/fonts/inter-poster-v1.woff2) format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}


/* ============================================================
   ================  T H E   P E N   B E G I N S  =============
   Adam's CodePen, verbatim. Do not retime it and do not restyle
   it. Additions go after THE PEN ENDS.
   ============================================================ */

/* =========================================
   🎬 THE FILM STRIP TIMELINE (DIRECTOR'S BOARD)
   Adjust these variables to change when things happen.
   Think of 1vh as 1 frame of your scroll timeline.
   ========================================= */
:root {
	/* Extended runtime for the new scenes */
	--runtime: 800vh;

	/* SCENE 1: The Intro */
	--scene-1-start: 0vh;
	--scene-1-end: 50vh;

	/* SCENE 2: The Approach */
	--scene-2-start: 50vh;
	--scene-2-end: 200vh;

	/* SCENE 3: The Reveal */
	--scene-3-start: 15vh;
	--scene-3-end: 270vh;
	/* Ends right as the flash hits */

	/* SCENE 4: The Transition (Screen flashes white) */
	--scene-4-start: 260vh;
	--scene-4-peak: 290vh;
	/* Pure whiteout */
	--scene-4-end: 320vh;

	/* SCENE 5: The Blue Sky (The Scroll Pause) */
	/* No animations here, just a peaceful hold from 320vh to 450vh */

	/* SCENE 6: The Grave Descent (Walls close in) */
	--scene-6-start: 450vh;
	--scene-6-end: 700vh;

	/* SCENE 7: Buried (Fades to pitch black) */
	--scene-7-start: 680vh;
	--scene-7-end: 780vh;
}

/* Reset and Base Styles */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	color: #eaeaea;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	height: var(--runtime);
	overflow-x: hidden;
	margin: 0;
	background: #000;
}

/* Fixed Banner for Scrolljacking */
.banner {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100dvh;
	overflow: hidden;
	z-index: 1;
	background: #646464;
}

/* =========================================
   ENVIRONMENTAL EFFECTS (SCENES 1-3)
   ========================================= */
#fogCanvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
	background: url('assets/fog1.png') repeat-x;
	background-size: 200% 100%;
	animation: drift 50s linear infinite;
	opacity: 0.35;
	filter: grayscale(100%) contrast(1.2);
}

#rainCanvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 4;
	pointer-events: none;
}

.lightning {
	position: absolute;
	inset: 0;
	background-color: #e0e5ff;
	opacity: 0;
	z-index: 5;
	pointer-events: none;
	animation: flash 12s infinite;
}

.grain {
	position: absolute;
	inset: -50%;
	width: 200%;
	height: 200%;
	z-index: 6;
	pointer-events: none;
	opacity: 0.08;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
	animation: noise 1s steps(2) infinite;
}

/* =========================================
   SCENES 1 - 3: THE DOOR & FRANK
   ========================================= */
.banner-text {
	position: absolute;
	bottom: 3rem;
	left: 3rem;
	z-index: 10;
	pointer-events: auto;
	will-change: transform, opacity;
	animation: text-fade both;
	animation-timeline: scroll(root);
	animation-range: var(--scene-1-start) var(--scene-1-end);
}

/* Restored Typography and Glitch */
.banner-text h1 {
	font-size: clamp(2rem, 4vw, 4rem);
	font-weight: 300;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
	color: rgba(255, 255, 255, 0.8);
	filter: blur(3px);
	animation: unstable-teleport 5s infinite;
}

.banner-text p {
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: #5e0000;
}

.door-scene {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 1200px;
	z-index: 3;
	pointer-events: none;
}

.pull-container {
	position: relative;
	width: clamp(200px, 20vw, 300px);
	height: clamp(400px, 40vw, 600px);
	transform-style: preserve-3d;
	will-change: transform;
	box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
	border: 8px solid #111;
	background: #000;

	animation: camera-walk cubic-bezier(0.32, 0, 0.67, 0) both;
	animation-timeline: scroll(root);
	animation-range: var(--scene-2-start) var(--scene-2-end);
}

.door-panel {
	position: absolute;
	inset: 0;
	background-color: #2a2a2c;
	transform-origin: left;
	transform-style: preserve-3d;
	z-index: 2;
	border: 1px solid #1a1a1c;
	box-shadow: inset -5px 0 15px rgba(0, 0, 0, 0.8), 5px 10px 20px rgba(0, 0, 0, 0.9);
	display: flex;
	flex-direction: column;
	padding: 10%;
	gap: 5%;
	will-change: transform;

	animation: door-open both;
	animation-timeline: scroll(root);
	animation-range: var(--scene-1-start) var(--scene-1-end);
}

.frank {
	height: 100%;
	display: block;
	position: absolute;
	left: 50%;
	transform: translate3d(-50%, 0, -1000px);
	z-index: 999;
	margin: auto;

	animation: reveal-frank both;
	animation-timeline: scroll(root);
	animation-range: var(--scene-3-start) var(--scene-3-end);
}

/* Supporting Door UI Details */
.the-void {
	position: absolute;
	inset: 0;
	background: #000;
	box-shadow: inset 0 0 50px #000;
	z-index: 1;
	overflow: hidden;
}

.the-void::after {
	content: '';
	position: absolute;
	inset: 0;
	transform: scale(0.8);
	background: radial-gradient(circle, rgba(90, 0, 0, 0.4) 0%, transparent 70%);
	animation: pulse-void 4s infinite alternate ease-in-out;
}

.door-panel::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 999999;
	pointer-events: none;
	background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.05) 2px, rgba(0, 0, 0, 0.05) 4px);
}

.panel-inset {
	flex: 1;
	background: #252527;
	border: 2px solid #1f1f21;
	box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.8), inset -5px -5px 10px rgba(255, 255, 255, 0.02), 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.doorknob {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #555, #111);
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8), inset -2px -2px 5px rgba(0, 0, 0, 0.5);
}

.doorknob-plate {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 60px;
	border-radius: 2px;
	background: linear-gradient(90deg, #222, #333, #222);
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8);
	z-index: -1;
}

/* =========================================
   SCENE 4: THE FLASH BANG
   ========================================= */
.flash-bang {
	position: absolute;
	inset: 0;
	background: #fff;
	z-index: 9999;
	/* Top of everything */
	pointer-events: none;
	animation: flash-white both;
	animation-timeline: scroll(root);
	animation-range: var(--scene-4-start) var(--scene-4-end);
}

/* =========================================
   SCENE 5 & 6: THE SKY & THE GRAVE
   ========================================= */
.sky-scene {
	position: absolute;
	inset: 0;
	z-index: 2000;
	/* Above the rain and door, below the flash */
	overflow: hidden;

	/* Sneakily fade this in DURING the whiteout flash */
	animation: reveal-sky both;
	animation-timeline: scroll(root);
	animation-range: var(--scene-4-start) var(--scene-4-peak);
}

.sky-background {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #4facfe 0%, #00f2fe 100%);
}

.sun {
	position: absolute;
	top: 15%;
	left: 50%;
	width: 120px;
	height: 120px;
	background: #fff;
	border-radius: 50%;
	transform: translateX(-50%);
	box-shadow: 0 0 80px 40px rgba(255, 255, 255, 0.9),
		0 0 150px 80px rgba(255, 240, 200, 0.6);
}

/* Reusing the fog logic, but making it bright white clouds */
.clouds {
	position: absolute;
	inset: 0;
	background: url('assets/fog1.png') repeat-x;
	background-size: 200% 100%;
	/* Invert the dark smoke to make bright clouds, up the brightness */
	filter: invert(1) brightness(2.5) opacity(0.8);
	pointer-events: none;
}

.cloud-layer-1 {
	animation: drift 45s linear infinite;
}

.cloud-layer-2 {
	animation: drift 70s linear infinite reverse;
	top: 15%;
	transform: scale(1.3);
	opacity: 0.5;
}

/* The Grave Wall - 100% HTML/CSS using a shrinking div with a massive box-shadow */
.grave-opening {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	/* Animation */
	animation: lower-grave both;
	animation-timeline: scroll(root);
	animation-range: var(--scene-6-start) var(--scene-6-end);
}

/* SCENE 7: Pitch Black Overlay */
.buried-blackout {
	position: absolute;
	inset: 0;
	background: #020100;
	z-index: 3000;
	/* Cover everything inside the sky scene */
	pointer-events: none;
	animation: bury-fade both;
	animation-timeline: scroll(root);
	animation-range: var(--scene-7-start) var(--scene-7-end);
}

/* =========================================
   KEYFRAMES (Animations)
   ========================================= */

/* Scene 1-3 Legacy Keyframes */
@keyframes text-fade {
	0% {
		transform: translateX(0px);
		opacity: 1;
	}

	100% {
		transform: translateX(-150px);
		opacity: 0;
	}
}

@keyframes door-open {
	0% {
		transform: rotateY(0deg);
	}

	100% {
		transform: rotateY(-110deg);
	}
}

@keyframes camera-walk {
	0% {
		transform: translateZ(0px);
	}

	50% {
		transform: translateZ(1100px) translateY(40%);
	}

	100% {
		transform: translateZ(1250px) translateY(40%);
	}
}

@keyframes reveal-frank {

	0%,
	50% {
		filter: brightness(0);
	}

	100% {
		filter: brightness(1);
	}
}

@keyframes pulse-void {
	0% {
		opacity: 0.4;
		transform: scale(0.8);
	}

	100% {
		opacity: 0.9;
		transform: scale(1.1);
	}
}

@keyframes drift {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: -200% 0;
	}
}

@keyframes flash {

	0%,
	91%,
	94%,
	96%,
	100% {
		opacity: 0;
	}

	92% {
		opacity: 0.8;
	}

	93% {
		opacity: 0.1;
	}

	95% {
		opacity: 0.6;
	}
}

/* Film Grain */
@keyframes noise {

	0%,
	100% {
		transform: translate(0, 0);
	}

	10% {
		transform: translate(-5%, -5%);
	}

	20% {
		transform: translate(-10%, 5%);
	}

	30% {
		transform: translate(5%, -10%);
	}

	40% {
		transform: translate(-5%, 15%);
	}

	50% {
		transform: translate(-10%, 5%);
	}

	60% {
		transform: translate(15%, 0);
	}

	70% {
		transform: translate(0, 15%);
	}

	80% {
		transform: translate(3%, 15%);
	}

	90% {
		transform: translate(-10%, 10%);
	}
}

/* Restored Glitch Keyframes */
@keyframes unstable-teleport {

	0%,
	40.9% {
		text-shadow: none;
	}

	41%,
	41.9% {
		text-shadow: 30px 0 0 rgba(255, 255, 255, 0.8);
	}

	42%,
	42.9% {
		text-shadow: -20px 5px 0 rgba(255, 255, 255, 0.8), 10px -5px 0 rgba(255, 255, 255, 0.8);
	}

	43%,
	43.9% {
		text-shadow: 15px 0 0 rgba(255, 255, 255, 0.8);
	}

	44%,
	44.9% {
		text-shadow: -35px -2px 0 rgba(255, 255, 255, 0.8);
	}

	45%,
	72.9% {
		text-shadow: none;
	}

	73%,
	73.9% {
		text-shadow: -40px 0 0 rgba(255, 255, 255, 0.8), 40px 0 0 rgba(255, 255, 255, 0.8);
	}

	74%,
	74.9% {
		text-shadow: 15px 10px 0 rgba(255, 255, 255, 0.8);
	}

	75%,
	75.9% {
		text-shadow: -10px -10px 0 rgba(255, 255, 255, 0.8);
	}

	76%,
	91.9% {
		text-shadow: none;
	}

	92%,
	92.9% {
		text-shadow: 50px 0 0 rgba(255, 255, 255, 0.8);
	}

	93%,
	93.9% {
		text-shadow: -25px 0 0 rgba(255, 255, 255, 0.8);
	}

	94%,
	100% {
		text-shadow: none;
	}
}

/* Scene 4: Flash */
@keyframes flash-white {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	/* Hits peak at --scene-4-peak */
	100% {
		opacity: 0;
	}
}

/* Scene 5: Reveal Sky under the Flash */
@keyframes reveal-sky {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/* Scene 6: The Grave Sink */
@keyframes lower-grave {
	0% {
		/* Start huge, no shadow visible */
		width: 150vw;
		height: 150vh;
		box-shadow: 0 0 0 0vmax #0a0604, inset 0 0 0px #000;
		border-radius: 0px;
	}

	5% {
		/* The shadow snaps out slightly past the screen bounds immediately */
		width: 100vw;
		height: 100vh;
		box-shadow: 0 0 0 100vmax #110905, inset 0 0 40px #000;
		border-radius: 5px;
	}

	100% {
		/* Shrinks down to a tiny hole in the distance */
		width: 12vw;
		height: 30vh;
		box-shadow: 0 0 0 100vmax #060302, inset 0 0 150px #000;
		border-radius: 20px;
		transform: translate(-50%, -65%);
		/* Shift perspective up as we go down */
	}
}

/* Scene 7: Buried Fade */
@keyframes bury-fade {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/* ============================================================
   ==================  T H E   P E N   E N D S  ===============
   Everything below is this page's, and none of it reaches back
   up into the film. Read the header note before editing.
   ============================================================ */


/* ============================================================
   ADDED 1 — THE RUNWAY

   The pen's `body { height: var(--runtime) }` is the ONE
   declaration of his this file overrides, and the override is
   the price of having a page at all: a body with a fixed height
   has nowhere to put eight sections. The 800vh is handed
   straight back by .runway, an empty spacer of exactly
   var(--runtime) — the film's fixed banner plays against it and
   every animation-range in the pen resolves to the identical
   absolute scroll offset it always did.

   scroll(root) measures from the top of the document, so making
   the document TALLER cannot move a range that is written in
   absolute vh. It can only make a late one reachable, which is
   the point: at the pen's own 800vh body the scroll range topped
   out at 700vh, so Scene 7's 680–780vh burial could never get
   past 20% and the screen never went black. It does now.
   ============================================================ */
body {
	height: auto;
}

/* THE +100vh IS NOT PADDING AND IT IS NOT TASTE — it is the NO INVISIBLE
   WALLS rule, and the first build broke it.

   var(--runtime) alone puts the page's top edge at 800vh, which means it
   starts ENTERING the viewport at 700vh — and at 700vh the burial is only
   about a third done, so the grave is still a lit hole onto the blue sky.
   An opaque black panel rising over that is a hard horizontal edge
   travelling up across live content with no visible cause, which is the
   one thing this site does not do.

   One more screen of spacer moves the page's arrival to scroll 800vh:
   Scene 7 completes at 780vh, the screen holds PURE BLACK for a beat, and
   only then does the page rise — black over black, no edge to see. Adam's
   note for this job was "cover the grave and we've got a black screen to
   work with", and this is the number that actually delivers it.

   TIED TO --scene-7-end. If that ever moves, re-derive: the spacer must
   end at least one viewport past the frame where the blackout reaches 1. */
.runway {
	height: calc(var(--runtime) + 100vh);
	pointer-events: none;
}

/* The film is z-index 1 and fixed; the page rides over it on its own
   opaque black, arriving a full screen AFTER the burial completes. */
#page {
	position: relative;
	z-index: 2;
	background: var(--void);
}


/* ============================================================
   ADDED 2 — THE SCRIPT

   Three title cards pinned into the film, each on its own range
   inside one of the pen's scenes. NEW elements with NEW ranges:
   nothing of the pen's is retimed, and the beats they land on
   are read off his director's board rather than tuned by eye.

     L1  70–250vh   the door, and the thing behind it  (scenes 2–3)
     ---            the whiteout owns 260–320          (scene 4)
     L2 330–665vh   the blue sky, then the descent     (scenes 5–6)
     L3 700–775vh   going under                        (scene 7)

   THEY ARE DECORATIVE AND THAT IS DELIBERATE. Each line is
   aria-hidden and each says something §01–§03 below say again
   in full. A sentence travelling past at scroll speed, over a
   thunderstorm, is a title card — it is not somewhere content
   may live, and a screen reader is owed the page, not the film.

   THE CARD IS OPAQUE ON PURPOSE, and it REPLACES the radial
   scrim the lines used to sit on. The film runs mid-grey →
   whiteout → bright sky → black underneath them, so no wash
   tuned for one backdrop survives the other three; a solid
   near-black plate with a blood edge holds its own contrast
   (white on #0b0b0c is 19:1) at every frame of the film, and
   it is also what makes the middle card's palette flip legible
   as a deliberate change rather than a lighting accident.

   L2 IS THE TURN AND IT IS ONE ELEMENT, not two. It arrives on
   the sky wearing the sky's colours and is still on screen when
   the grave starts closing at 450vh, so the palette crosses back
   to the blood edge UNDER the reader between there and ~578vh —
   the same card, lowered into the ground with them. Splitting it
   in two would cut exactly the beat it exists for.
   ============================================================ */
.script {
	position: fixed;
	inset: auto 0 0 0;
	height: 42dvh;
	z-index: 5;
	pointer-events: none;
	display: grid;
	place-items: center;
	padding: 0 var(--gutter);
}

.script_line {
	grid-area: 1 / 1;
	margin: 0;
	max-width: 30ch;
	text-align: center;
	text-wrap: balance;
	font-size: clamp(1.05rem, 2.9vw, 2.15rem);
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: .85em 1.15em;
	border: 2px solid var(--blood-edge);
	background: var(--card-dark);
	color: #fff;
	box-shadow: var(--card-dark-glow);
	opacity: 0;
}

/* the film's own last word, held on the black the burial leaves */
.script_line--last {
	letter-spacing: .2em;
}

/* L1 and L3: the palette never moves, so only the arrival does */
@keyframes script-line {
	0% {
		opacity: 0;
		translate: 0 14px;
	}

	18%,
	80% {
		opacity: 1;
		translate: 0 0;
	}

	100% {
		opacity: 0;
		translate: 0 -14px;
	}
}

/* L2: the same arrival, plus the flip. The percentages are the
   scene boundaries mapped onto its own 330→665vh range —
   36% is 450vh (the grave starts closing) and 74% is ~578vh
   (walls well in). Move the range and both stops move with it. */
@keyframes script-line-turn {
	0% {
		opacity: 0;
		translate: 0 14px;
		border-color: var(--sky-edge);
		background-color: var(--card-sky);
		color: var(--sky-ink);
		box-shadow: var(--card-sky-glow);
	}

	8%,
	36% {
		opacity: 1;
		translate: 0 0;
		border-color: var(--sky-edge);
		background-color: var(--card-sky);
		color: var(--sky-ink);
		box-shadow: var(--card-sky-glow);
	}

	74%,
	93% {
		opacity: 1;
		translate: 0 0;
		border-color: var(--blood-edge);
		background-color: var(--card-dark);
		color: #fff;
		box-shadow: var(--card-dark-glow);
	}

	100% {
		opacity: 0;
		translate: 0 -14px;
		border-color: var(--blood-edge);
		background-color: var(--card-dark);
		color: #fff;
		box-shadow: var(--card-dark-glow);
	}
}


/* ============================================================
   ADDED 3 — TOKENS

   The palette is the pen's, named. #5e0000 is the sub-headline
   red he wrote and it is a SURFACE colour here, never a text
   one — on this black it measures 1.3:1. --blood-lit is the
   text-safe sibling (5.2:1) and every link and accent uses it.
   ============================================================ */
:root {
	--void: #050505;
	--void-lift: #0d0b0b;
	--void-deep: #000;

	--ink: #dcdcdc;
	/* body — 13.6:1 on --void */
	--ink-soft: #a5a5a5;
	/* secondary — 7.4:1 */
	--ink-faint: #8d8d8d;
	/* annotation — 5.4:1, the floor */

	--blood: #5e0000;
	/* the pen's red. SURFACES ONLY. */
	--blood-lit: #e0483c;
	/* text-safe red — 5.2:1 */

	/* THE TITLE CARDS (ADDED 2), both palettes, in one place because
	   the middle card animates from one to the other and a value that
	   only exists in a keyframe is a value nobody finds again.

	   --blood-edge is a LINE colour, not the pen's --blood: two pixels
	   of #5e0000 on #0b0b0c is 1.15:1 and reads as no border at all.
	   This is the same red carried up to 2:1, where the edge is
	   actually visible, and the red glow under it does the rest. It is
	   chrome on an aria-hidden card, so 2:1 is a look, not a floor —
	   the text it frames is white on near-black at 19:1.

	   The sky pair is taken off the pen's own gradient (#4facfe →
	   #00f2fe) rather than invented: a paper-white card, its edge the
	   top of that gradient, its ink the same hue run down to 11.4:1.
	   The glow is the scene's sun rather than a drop shadow. */
	--blood-edge: #8b0f14;
	--card-dark: #0b0b0c;
	--card-dark-glow: 0 0 34px rgba(139, 15, 20, .38), 0 22px 60px rgba(0, 0, 0, .8);

	--sky-edge: #2f8fd8;
	--card-sky: #f7fbff;
	--sky-ink: #0b3a5c;
	--card-sky-glow: 0 0 44px rgba(255, 255, 255, .55), 0 18px 50px rgba(4, 46, 78, .28);

	--edge: rgba(255, 255, 255, .1);
	--edge-lit: rgba(224, 72, 60, .38);

	--gutter: clamp(1.25rem, 5vw, 4rem);
	--measure: 74rem;
	--ease: cubic-bezier(.22, .61, .36, 1);
}


/* ============================================================
   ADDED 4 — TYPE AND FURNITURE

   No webfont for anything on this page's own type: the pen sets
   the system stack on <body> and it stays there, so nothing
   above the collection band waits on a font request. Headings
   take the pen's own h1 treatment — light weight, wide tracking,
   uppercase — without its blur or its glitch, neither of which
   a paragraph of copy can carry.
   ============================================================ */
#page {
	color: var(--ink);
	font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

#page h2,
#page h3 {
	font-weight: 300;
	line-height: 1.15;
	text-wrap: balance;
	color: #fff;
}

#page h2 {
	font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem);
	letter-spacing: .06em;
	text-transform: uppercase;
	max-width: 22ch;
}

#page h3 {
	font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
	letter-spacing: .05em;
	text-transform: uppercase;
	margin-bottom: .55rem;
}

#page p {
	max-width: 68ch;
}

#page p+p {
	margin-top: 1.05rem;
}

#page a {
	color: var(--blood-lit);
	text-underline-offset: .22em;
	text-decoration-thickness: 1px;
}

#page a:hover {
	color: #fff;
}

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

/* the section index — the pen's small red caps, moved to a colour that
   can carry text on black */
.anno {
	font-size: .72rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--ink-faint);
	max-width: none;
}

.anno--lit {
	color: var(--blood-lit);
}

.lede {
	font-size: clamp(1.1rem, 1rem + .55vw, 1.45rem);
	line-height: 1.55;
	color: #fff;
	font-weight: 300;
	max-width: 40ch;
}

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--void-deep);
	color: #fff;
	padding: .75rem 1.25rem;
	border: 1px solid var(--edge-lit);
}

.skip:focus {
	left: 1rem;
	top: 1rem;
}

/* --- sections ------------------------------------------------------- */
.band {
	position: relative;
	padding: clamp(4.5rem, 12vh, 9rem) var(--gutter);
	border-top: 1px solid var(--edge);
}

.band--lift {
	background: var(--void-lift);
}

.band_inner {
	width: min(100%, var(--measure));
	margin-inline: auto;
}

.band h2 {
	margin: .7rem 0 1.4rem;
}

.split {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.split--even {
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 900px) {

	.split,
	.split--even {
		grid-template-columns: 1fr;
	}
}

.notes {
	display: grid;
	gap: clamp(1rem, 2.5vh, 1.5rem);
}

.cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2.5vw, 2rem);
}

@media (max-width: 900px) {
	.cards {
		grid-template-columns: 1fr;
	}
}

/* THE PLATE — the door's own material. The pen builds its door out of a
   flat dark face, an inset shadow top-left and a lifted shadow below;
   a plate is that panel at another size, which is why nothing here
   needs a colour to read as an object. */
.plate {
	padding: clamp(1.35rem, 3vw, 2rem);
	background: #17151599;
	border: 1px solid var(--edge);
	box-shadow: inset 5px 5px 12px rgba(0, 0, 0, .8), 2px 6px 18px rgba(0, 0, 0, .55);
}

.plate .anno {
	margin-bottom: .5rem;
}

.plate p {
	color: var(--ink-soft);
	font-size: .96rem;
}

.plate--lit {
	border-color: var(--edge-lit);
	box-shadow: inset 5px 5px 12px rgba(0, 0, 0, .8), 2px 6px 18px rgba(0, 0, 0, .55), 0 0 0 1px rgba(94, 0, 0, .5);
}

/* --- the spec list, on the door's inset panels ---------------------- */
.specs {
	list-style: none;
	margin: 1.6rem 0 0;
	border-top: 1px solid var(--edge);
}

.specs li {
	display: grid;
	grid-template-columns: 15rem 1fr;
	gap: .5rem 1.5rem;
	padding: .85rem 0;
	border-bottom: 1px solid var(--edge);
}

@media (max-width: 620px) {
	.specs li {
		grid-template-columns: 1fr;
	}
}

.spec_k {
	font-size: .74rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--blood-lit);
	padding-top: .28em;
}

.spec_v {
	color: var(--ink-soft);
	font-size: .96rem;
}

/* --- questions ------------------------------------------------------ */
.qas {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	margin-top: 1rem;
}

@media (max-width: 900px) {
	.qas {
		grid-template-columns: 1fr;
	}
}

.qa p {
	color: var(--ink-soft);
	font-size: .98rem;
}

/* --- the titleblock, the pen's bottom-left caption promoted to a rule
   across the foot of a section ---------------------------------------- */
.titleblock {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin-top: clamp(2rem, 5vh, 3.25rem);
	padding-top: .9rem;
	border-top: 1px solid var(--edge);
}

/* --- buttons: the door panel, pressable ----------------------------- */
/* Written at #page specificity on purpose: `#page a` is (1,0,1) and would
   otherwise paint every button in link red. */
#page .mybutton {
	display: inline-block;
	padding: .85rem 1.6rem;
	font-size: .78rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	text-decoration: none;
	font-family: inherit;
	color: var(--ink);
	background: #1c1a1a;
	border: 1px solid var(--edge);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 6px 16px rgba(0, 0, 0, .6);
	cursor: pointer;
	transition: color .25s var(--ease), border-color .25s var(--ease), translate .25s var(--ease);
}

#page .mybutton:hover {
	color: #fff;
	border-color: var(--edge-lit);
	translate: 0 -2px;
}

#page .mybutton--primary {
	background: linear-gradient(180deg, #3a0505, var(--blood));
	border-color: #7a1a1a;
	color: #fff;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 2rem;
}

/* --- contact form --------------------------------------------------- */
.contact_form {
	display: grid;
	gap: 1rem;
	align-content: start;
}

.field {
	display: grid;
	gap: .4rem;
}

.field label {
	font-size: .72rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.field input,
.field textarea {
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
	background: #100e0e;
	border: 1px solid var(--edge);
	padding: .7rem .85rem;
	box-shadow: inset 3px 3px 8px rgba(0, 0, 0, .8);
	width: 100%;
}

.field textarea {
	resize: vertical;
}

.field input:focus,
.field textarea:focus {
	border-color: var(--edge-lit);
	outline: none;
	box-shadow: inset 3px 3px 8px rgba(0, 0, 0, .8), 0 0 0 2px rgba(224, 72, 60, .35);
}

/* the honeypot: off-screen, never display:none — a bot fills what it can
   parse, and a real reader never reaches it (tabindex -1, aria-hidden) */
.hp_field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form_status {
	font-size: .9rem;
	min-height: 1.4em;
	color: var(--ink-soft);
}

.form_status.ok {
	color: #6fdc8c;
}

.form_status.err {
	color: var(--blood-lit);
}

/* --- the PS close, the last thing read ------------------------------ */
.ps_note {
	margin-top: clamp(2.5rem, 6vh, 4rem);
	padding: clamp(1.35rem, 3vw, 2rem);
	border: 1px solid var(--edge-lit);
	background: linear-gradient(180deg, rgba(94, 0, 0, .18), rgba(0, 0, 0, 0));
}

.ps_note p+p {
	margin-top: .6rem;
}

.ps_note .anno {
	color: var(--blood-lit);
}


/* ============================================================
   ADDED 5 — THE MASTHEAD / INDEX PANEL

   The site's seven real pages, and the same arrangement every
   theme page uses: a plain row above 900px, and below it one
   panel opened by the toggle, because seven links wrapping to
   three lines makes a fixed masthead a third of a phone screen.

   CRAWL PARITY: nothing is display:none and no link is dropped.
   The closed panel is a transformed, visibility:hidden sheet
   holding the same seven real <a href>, made `inert` by the
   script at the foot of the page. This page is deliberately not
   in DECK_CHAIN and nothing in the site nav points at it, so
   there is no aria-current link here.

   THE SCRIM IS THE ONLY REASON IT IS LEGIBLE over the storm:
   the film behind it runs from mid-grey to blue sky to black, so
   the bar cannot rely on any one backdrop.
   ============================================================ */
.masthead {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .9rem var(--gutter);
	background: linear-gradient(180deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, 0));
}

.wordmark {
	font-size: .78rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(255, 255, 255, .92);
	text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
}

.wordmark:hover {
	color: #fff;
}

/* the toggle is three claw marks — uneven on purpose.

   IT SITS ABOVE THE OPEN PANEL, and that is not decoration: the panel
   is a fixed sheet dropped from `inset: 0 0 auto 0` and it is a later
   positioned sibling, so at equal z-index it PAINTS OVER the button
   that opened it. The only way out of the menu was Escape. Lifting the
   two masthead children one layer puts the control back on top of its
   own sheet, where a thumb can reach it. */
.nav_toggle,
.wordmark {
	position: relative;
	z-index: 2;
}

.nav_toggle {
	display: none;
	background: none;
	border: 1px solid var(--edge);
	padding: .55rem .7rem;
	cursor: pointer;
	line-height: 0;
}

.nav_rules {
	display: grid;
	gap: 4px;
	width: 22px;
}

.nav_rule {
	height: 1px;
	background: rgba(255, 255, 255, .85);
	box-shadow: 0 0 6px rgba(224, 72, 60, .6);
	transition: translate .3s var(--ease), rotate .3s var(--ease),
		opacity .2s var(--ease), width .3s var(--ease);
}

.nav_rule--1 {
	width: 100%;
}

.nav_rule--2 {
	width: 72%;
	justify-self: end;
}

.nav_rule--3 {
	width: 88%;
}

#index_panel .index_eyebrow,
#index_panel .index_block {
	display: none;
}

.index_list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.5rem;
	margin: 0;
}

.index_list a {
	font-size: .72rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(255, 255, 255, .78);
	text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
}

.index_list a:hover {
	color: #fff;
}

@media (max-width: 900px) {
	.nav_toggle {
		display: block;
	}

	#index_panel {
		position: fixed;
		inset: 0 0 auto 0;
		padding: 4.5rem var(--gutter) 2rem;
		background: rgba(6, 4, 4, .97);
		border-bottom: 1px solid var(--edge-lit);
		box-shadow: 0 24px 60px rgba(0, 0, 0, .9);
		translate: 0 -100%;
		visibility: hidden;
		transition: translate .35s var(--ease), visibility .35s;
	}

	html.nav-open #index_panel {
		translate: 0 0;
		visibility: visible;
	}

	/* THE CLAW MARKS BECOME A CROSS while the menu is open. The button
	   was always a toggle; nothing on screen ever said so, which is half
	   of why the menu felt one-way. Rows are 1px on a 4px gap, so the
	   outer two are exactly 5px off centre — that is where the 5px
	   comes from, and it moves if the gap does. */
	html.nav-open .nav_rule--1 {
		width: 100%;
		translate: 0 5px;
		rotate: 45deg;
	}

	html.nav-open .nav_rule--2 {
		opacity: 0;
	}

	html.nav-open .nav_rule--3 {
		width: 100%;
		translate: 0 -5px;
		rotate: -45deg;
	}

	/* TAP ANYWHERE ELSE TO CLOSE. The panel is only as tall as its own
	   links, so everything under it is the film and the page — and the
	   page is `inert` while the menu is open, which means a tap down
	   there reaches no listener of its own. This pseudo is that missing
	   surface: it belongs to the panel, so its clicks target the panel
	   and the handler at the foot of the page already sees them. It also
	   dims what it covers, so it reads as a closed door rather than a
	   dead one. `position: absolute` (not fixed) is what anchors it to
	   the panel's bottom edge instead of the viewport's. */
	html.nav-open #index_panel::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 100vh;
		height: 100lvh;
		background: rgba(3, 2, 2, .72);
	}

	#index_panel .index_eyebrow,
	#index_panel .index_block {
		display: block;
	}

	#index_panel .index_block {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		margin-top: 1.5rem;
		padding-top: .9rem;
		border-top: 1px solid var(--edge);
	}

	.index_list {
		display: grid;
		gap: .1rem;
		margin-top: 1rem;
	}

	.index_list a {
		display: block;
		padding: .6rem 0;
		font-size: .82rem;
		border-bottom: 1px solid var(--edge);
	}

	html.nav-open body {
		overflow: hidden;
	}
}


/* ============================================================
   ADDED 6 — THE COLLECTION BAND  (.alsolike)

   "Like this theme? You might also like:", written to TRAVEL —
   nothing here is named for this page and nothing is an id.

   THE CARDS ARE HOME'S POSTERS, PORTED VERBATIM from
   css/style.css — .slide_poster, .poster_bg, .poster_title,
   .poster_sub and each theme's own block, copied unchanged.
   NOT ported: the 3-D hover pops and the fan poses, both of
   which need the fan's preserve-3d rig. Anything that changes in
   style.css's POSTERS block changes here.
   ============================================================ */
.alsolike {
	position: relative;
	padding: clamp(3.5rem, 9vh, 7rem) var(--gutter);
	background: var(--void-lift);
	border-top: 1px solid var(--edge);
}

.alsolike::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, var(--blood-lit), rgba(224, 72, 60, 0));
	transform-origin: 0 50%;
}

.alsolike_inner {
	width: min(100%, var(--measure));
	margin-inline: auto;
}

.alsolike h2 {
	margin: .6rem 0 1rem;
	max-width: 20ch;
}

.alsolike_lead {
	margin-bottom: clamp(2rem, 5vh, 3.25rem);
	max-width: 62ch;
	color: var(--ink-soft);
}

.alsolike_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

@media (max-width: 860px) {
	.alsolike_grid {
		grid-template-columns: 1fr;
	}
}

.alsolike_more {
	margin-top: clamp(1.75rem, 4vh, 2.75rem);
}

/* --- one card = one poster ------------------------------------------ */
/* NO CARD CHROME: the poster is the object. `container-type` is what
   gives the poster its em scale, exactly as the home fan's column does —
   with no padding, 100cqw IS the poster's width. */
.tt_card {
	display: block;
	text-decoration: none;
	container-type: inline-size;
	transition: translate .3s var(--ease);
}

/* The lift is on `translate`, NOT on `transform`: the arrival animation
   below owns `transform` and its fill state keeps applying after it
   settles, so a hover written as a transform would silently do nothing. */
@media (hover: hover) and (pointer: fine) {
	.tt_card:hover {
		translate: 0 -4px;
	}

	.tt_card:hover .tt_art {
		box-shadow: 0 26px 40px rgba(0, 0, 0, .8), 0 0 0 1px var(--edge-lit);
	}
}

.tt_art {
	position: relative;
	overflow: hidden;
	aspect-ratio: 700 / 450;
	border-radius: 18px;
	--u: calc(100cqw / 700);
	/* posters size themselves in em, off this */
	font-size: calc(16 * var(--u));
	box-shadow: 0 18px 34px rgba(0, 0, 0, .7), 0 0 0 1px var(--edge);
	transition: box-shadow .3s ease;
}

/* THE GLINT — one pass of light across the poster as it lands. Scrubbed
   by the motion layer, so it happens once, on arrival, at the reader's
   own speed; parked off-frame here so a browser with no scroll timelines
   never sees it. */
.tt_art::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(104deg, transparent 38%, rgb(255 255 255 / .35) 50%, transparent 62%);
	transform: translateX(-140%);
}

.tt_note {
	margin-top: .9rem;
	font-size: .92rem;
	color: var(--ink-soft);
	max-width: none;
}

.tt_card .titleblock {
	margin-top: .9rem;
}

/* =========================== POSTERS ====================================
   Ported from css/style.css. Everything is em-based so it rides .tt_art's
   --u-derived font-size. */
.slide_poster {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .4em;
	text-align: center;
	transform-style: preserve-3d;
}

/* Decor layer: carries the poster's background art. */
.poster_bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
	transform: translateZ(0);
}

/* Every poster element rests 2px off the card face — never coplanar with
   the opaque .poster_bg at Z 0, so preserve-3d's depth sort never has a
   tie to resolve. Give any NEW poster element the same rest lift.

   The resets are this page's tax, not home's: home has no element rules
   on h3/p at all, so a poster title there renders in the poster's own
   face. Here #page h3 carries uppercase, wide tracking and a light
   weight, all of which would leak in and quietly restyle three other
   studios' work. */
.poster_title {
	margin: 0;
	position: relative;
	font-size: 3.4em;
	line-height: 1.05;
	letter-spacing: 2px;
	font-weight: 700;
	font-variation-settings: normal;
	text-transform: none;
	text-shadow: none;
	text-wrap: wrap;
	transform: translateZ(2px);
}

.poster_kicker {
	margin: 0 0 .4em;
	position: relative;
	max-width: none;
	font-size: .8em;
	letter-spacing: .28em;
	text-transform: uppercase;
	font-family: 'Courier New', monospace;
	transform: translateZ(2px);
}

.poster_sub {
	margin: 0;
	position: relative;
	max-width: none;
	font-size: 1.3em;
	line-height: 1.2;
	transform: translateZ(2px);
}

/* ---- Daylight Study: the architecture sheet — pale paper with a warm
   band of daylight falling across it and an ink border a hair inside the
   card edge. ---- */
.poster_daylight .poster_bg {
	background:
		linear-gradient(118deg, rgba(240, 215, 164, .58) 0 20%, rgba(240, 215, 164, 0) 62%),
		linear-gradient(168deg, #eceded 0%, #dfe1dd 100%);
}

/* the sheet edge. ::after because .poster_bg::before is unused and this is
   the layer that clips — the border must not ride the type's Z pops */
.poster_daylight .poster_bg::after {
	content: "";
	position: absolute;
	inset: .65em;
	border: 1px solid rgba(21, 24, 26, .28);
}

.poster_daylight .poster_kicker {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	color: #676c6e;
}

.poster_daylight .poster_title {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 2.3em;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: #15181a;
}

.poster_daylight .poster_sub {
	color: #676c6e;
}

/* ---- Dive Bar: brick, warm lamp glow, neon sign ---- */
.poster_divebar .poster_bg {
	background:
		radial-gradient(ellipse 60% 45% at 50% 15%, rgba(255, 130, 60, .18), transparent 70%),
		repeating-linear-gradient(0deg, transparent 0 1.75em, rgba(0, 0, 0, .5) 1.75em 1.95em),
		repeating-linear-gradient(90deg, transparent 0 3.6em, rgba(0, 0, 0, .3) 3.6em 3.8em),
		#1a120e;
}

.poster_divebar .poster_title {
	font-family: "Tilt Neon", sans-serif;
	font-weight: 100;
	text-transform: uppercase;
	color: #fff;
	text-shadow:
		0 0 .06em #fff,
		0 0 .25em #ff6a3d,
		0 0 .6em #ff3d2e,
		0 0 1.2em #ff3d2e;
}

.poster_divebar .poster_sub {
	color: #d8b49a;
}

/* ---- Holotype: cold hologram — perspective floor + a wireframe icon
   blinking above the title, same cyan-on-navy palette as the real theme ---- */
.poster_holo .poster_bg {
	background:
		repeating-linear-gradient(0deg, transparent 0 1.9em, rgba(77, 227, 255, .08) 1.9em 2em),
		radial-gradient(120% 80% at 50% 0%, #0a1220 0%, #05080f 60%);
}

.poster_holo .poster_glyph {
	position: relative;
	width: 2.4em;
	height: 2.4em;
	color: #4de3ff;
	filter: drop-shadow(0 0 .3em rgba(77, 227, 255, .55));
	transform: translateZ(2px);
	transition: transform .35s ease;
}

.poster_holo .poster_glyph svg {
	width: 100%;
	height: 100%;
}

.poster_holo .poster_title {
	font-family: "Inter", sans-serif;
	color: #d9e6f2;
	text-shadow: 0 0 .5em rgba(77, 227, 255, .5);
}

.poster_holo .poster_sub {
	color: #93a7bd;
}


/* ============================================================
   THE COLOPHON — it continues the band's surface rather than
   starting a new one, so the two read as one lit stretch at the
   foot of the page. TRAVELS WITH THE BAND: a page that takes
   .alsolike takes this pairing, or the annotation vanishes into
   whatever the page's last background happened to be.
   ============================================================ */
.colophon {
	position: relative;
	z-index: 2;
	padding: 2.5rem var(--gutter) 3.5rem;
	background: var(--void-lift);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}

.colophon a {
	color: var(--ink-soft);
}

.colophon a:hover {
	color: #fff;
}


/* ============================================================
   ============  T H E   M O T I O N   L A Y E R  =============
   ============================================================

   EVERYTHING scroll-driven ON THIS PAGE'S OWN CONTENT is inside
   this one block. The film above is not — the pen owns its own
   timeline and is never touched from here.

   The guard is doubled on purpose: @supports so a browser
   without scroll timelines simply gets the settled page, and
   prefers-reduced-motion so a reader who asked for stillness
   gets it from the OS without needing the site's own stamp. The
   site's stamp (html.no-runway) is handled after the block.

   THE PAGE'S MOTION BUDGET IS SPENT ON THE FILM. What is in
   here is deliberately small — an arrival for each band, and one
   glint across each poster. Eight screens of storm has earned
   the reader a page that just sits still and reads.
   ============================================================ */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {

		/* ---- THE SCRIPT. Three cards, three ranges, all read off the
		   pen's own scene variables. See ADDED 2. ---- */
		.script_line {
			animation-name: script-line;
			animation-timing-function: ease-in-out;
			animation-fill-mode: both;
			animation-timeline: scroll(root);
		}

		/* the door and what is behind it */
		.script_line:nth-child(1) {
			animation-range: 70vh 250vh;
		}

		/* THE TURN — it opens on the sky and closes in the ground, so it
		   is the only card that outlives a scene boundary. Its length is
		   what the palette flip is timed against; see ADDED 2. */
		.script_line--sky {
			animation-name: script-line-turn;
			animation-range: 330vh 665vh;
		}

		/* the last word, on the black the burial leaves */
		.script_line--last {
			animation-range: 700vh 775vh;
		}

		/* The layer itself goes inert well before the page arrives at
		   800vh. It sits at z-index 5 — above the film AND above #page —
		   so a fixed sheet left live over the copy would eat every click
		   in the lower 42dvh of the screen for the rest of the document.
		   `visibility` is discrete, so this is a hard off, not a fade. */
		.script {
			animation: script-out both linear;
			animation-timeline: scroll(root);
			animation-range: 775vh 790vh;
		}

		@keyframes script-out {
			0% {
				visibility: visible;
			}

			99.9% {
				visibility: visible;
			}

			100% {
				visibility: hidden;
			}
		}

		/* ---- BAND ARRIVALS. One per section, on its own view() timeline,
		   so each is relative to itself and none needs a page offset. ---- */
		.band_inner>*,
		.alsolike_inner>* {
			animation: page-arrive both linear;
			animation-timeline: view();
			animation-range: entry 12% entry 62%;
		}

		@keyframes page-arrive {
			0% {
				opacity: 0;
				translate: 0 22px;
			}

			100% {
				opacity: 1;
				translate: 0 0;
			}
		}

		/* ---- THE GLINT across each poster, once, on arrival ---- */
		.tt_art::after {
			animation: poster-glint both linear;
			animation-timeline: view();
			animation-range: entry 25% cover 45%;
		}

		@keyframes poster-glint {

			0%,
			25% {
				transform: translateX(-140%);
			}

			100% {
				transform: translateX(140%);
			}
		}

		/* ---- THE DATUM struck across the top of the band ---- */
		.alsolike::after {
			animation: datum-draw both linear;
			animation-timeline: view();
			animation-range: entry 0% entry 70%;
		}

		@keyframes datum-draw {
			0% {
				scale: 0 1;
			}

			100% {
				scale: 1 1;
			}
		}
	}
}


/* ============================================================
   ==============  T H E   n o - r u n w a y   T W I N  =======

   The site's own stamp, set pre-paint in js/deck-prepaint.js for
   reduced motion AND for a stored 'standard' / 'deck' choice.
   The experience selector is not on this page, but a choice made
   anywhere else on the site still stamps the flag here.

   IT DOES MORE WORK HERE THAN ON ANY OTHER PAGE, because the
   thing it collapses is not a runway — it is a film. Read all
   four parts before editing one:

   1. THE FILM IS NOT SAFE AT REST. Every scene animation is
      `fill-mode: both` on a scroll timeline; with no timeline
      resolving, each element parks at its own base state, and
      .flash-bang's base state is a full-screen opaque white
      sheet at z-index 9999. .sky-scene and .buried-blackout are
      the same story. So the three overlays are explicitly
      switched off AND zeroed — killing the animation alone
      makes the page white.

   2. THE RUNWAY COLLAPSES TO ONE SCREEN, not to nothing. The
      pen's h1 lives inside the fixed banner, so hiding the
      banner would take the page's own <h1> with it. One screen
      of the title card — the door shut, the rain still — is the
      right answer: it is the poster for a film this reader has
      told us they do not want played at them.

   3. THE LOOPING AMBIENCE STOPS TOO. Fog drift, the lightning
      cycle, the film grain and the void's pulse are all plain
      time-based `infinite` animations — nothing to do with
      scroll, and every one of them is exactly what a reduced-
      motion reader asked to be spared. The rain canvas is JS and
      is handled at the foot of the page, not here.

   4. THE SCRIPT GOES, and nothing is lost with it. Every line
      of it is aria-hidden and every line is said again in full
      in §01–§03. That is why it was allowed to be decorative.
   ============================================================ */
html.no-runway .runway {
	height: 100svh;
}

html.no-runway .script {
	display: none;
}

/* the three overlays: off AND zeroed, in the same rule */
html.no-runway .flash-bang,
html.no-runway .sky-scene,
html.no-runway .buried-blackout {
	animation: none;
	opacity: 0;
}

/* the scrubbed scenes, parked at their opening frame */
html.no-runway .banner-text,
html.no-runway .banner-text h1,
html.no-runway .pull-container,
html.no-runway .door-panel,
html.no-runway .frank,
html.no-runway .grave-opening {
	animation: none;
}

/* the looping ambience */
html.no-runway #fogCanvas,
html.no-runway .lightning,
html.no-runway .grain,
html.no-runway .the-void::after,
html.no-runway .clouds {
	animation: none;
}

/* the pen's h1 is blurred 3px at rest — legible as a mark inside a
   moving storm, and not legible as the only heading on a still page */
html.no-runway .banner-text h1 {
	filter: none;
}