:root {
	--pmh-yellow: #f1d34f;
	--pmh-ink: #080808;
}

html:has(body.pmh-story-page) {
	background: var(--pmh-ink);
	scroll-behavior: smooth;
}

body.pmh-story-page {
	margin: 0;
	background: var(--pmh-ink);
}

body.pmh-story-page #masthead,
body.pmh-story-page .site-header,
body.pmh-story-page #colophon,
body.pmh-story-page .site-footer,
body.pmh-story-page .entry-header,
body.pmh-story-page .page-header,
body.pmh-story-page .post-navigation,
body.pmh-story-page #secondary,
body.pmh-story-page .widget-area,
body.pmh-story-page .comments-area {
	display: none !important;
}

body.pmh-story-page .site,
body.pmh-story-page .site-content,
body.pmh-story-page .content-area,
body.pmh-story-page .site-main,
body.pmh-story-page .content-container,
body.pmh-story-page .site-container,
body.pmh-story-page .entry-content,
body.pmh-story-page article {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.pmh-story-page .entry-content > * {
	max-width: none;
	margin: 0;
}

.pmh-story,
.pmh-story * {
	box-sizing: border-box;
}

.pmh-story {
	--pmh-progress: 0;
	position: relative;
	z-index: 1;
	width: 100vw;
	min-height: 100svh;
	margin-left: calc(50% - 50vw);
	overflow: clip;
	background: var(--pmh-ink);
	color: var(--pmh-color, var(--pmh-yellow));
	font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.pmh-background,
.pmh-grain,
.pmh-vignette {
	position: fixed;
	inset: 0;
	pointer-events: none;
}

.pmh-background {
	z-index: -4;
	overflow: hidden;
}

.pmh-background::before {
	position: absolute;
	inset: -5%;
	background-image: var(--pmh-bg);
	background-position: 72% 46%;
	background-size: cover;
	background-repeat: no-repeat;
	filter: contrast(1.05) brightness(.82);
	content: "";
	transform: none;
}

.pmh-grain {
	z-index: -3;
	inset: -18%;
	opacity: var(--pmh-grain-opacity, .25);
	background-image: url("noise.svg");
	background-size: 260px 260px;
	mix-blend-mode: screen;
	animation: pmh-grain-shift .18s steps(2, end) infinite;
	will-change: transform, opacity;
}

.pmh-grain::after {
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(90deg, transparent 0, transparent 73px, rgba(255,255,255,.055) 74px, transparent 75px),
		linear-gradient(90deg, transparent 0, rgba(255,255,255,.035) 48%, transparent 49%);
	background-size: 217px 100%, 100% 100%;
	content: "";
	opacity: .5;
	animation: pmh-scratches 7s linear infinite;
}

@keyframes pmh-grain-shift {
	0% { transform: translate3d(-2.3%, -1.4%, 0); }
	25% { transform: translate3d(1.8%, -2.1%, 0); }
	50% { transform: translate3d(-1.1%, 2.2%, 0); }
	75% { transform: translate3d(2.1%, .8%, 0); }
	100% { transform: translate3d(-1.7%, -.6%, 0); }
}

@keyframes pmh-scratches {
	from { transform: translate3d(-4%, 0, 0); }
	to { transform: translate3d(4%, 0, 0); }
}

.pmh-vignette {
	z-index: -2;
	background:
		linear-gradient(90deg, rgba(4,4,4,.94) 0%, rgba(4,4,4,.76) 38%, rgba(4,4,4,.23) 69%, rgba(4,4,4,.48) 100%),
		linear-gradient(180deg, rgba(0,0,0,.38) 0%, transparent 25%, transparent 72%, rgba(0,0,0,.74) 100%);
}

.pmh-copy {
	position: relative;
	z-index: 2;
	width: min(720px, 55vw);
	margin: 0 auto 0 clamp(1.5rem, 7vw, 8rem);
	padding: clamp(12rem, 32vh, 24rem) 0 clamp(15rem, 38vh, 30rem);
	text-shadow: 0 2px 32px rgba(0,0,0,.76);
}

.pmh-copy .pmh-flow,
.pmh-focus-flow {
	margin: 0;
	color: inherit;
	font-family: var(--pmh-font, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif);
	font-size: clamp(calc(1.16rem * var(--pmh-font-scale, 1)), calc(1.64vw * var(--pmh-font-scale, 1)), calc(1.8rem * var(--pmh-font-scale, 1)));
	font-weight: 500;
	line-height: 1.62;
	letter-spacing: -.008em;
	word-spacing: .025em;
	opacity: .58;
	transform: none;
	filter: blur(var(--pmh-blur, 4.5px));
	text-wrap: pretty;
}

.pmh-copy em,
.pmh-focus-flow em {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 500;
}

.pmh-story-exits {
	display: grid;
	width: min(100%, 620px);
	margin-top: clamp(6rem, 14vh, 10rem);
	border-top: 1px solid rgba(241,211,79,.28);
	font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.pmh-story-exits a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: 1.15rem .15rem;
	border-bottom: 1px solid rgba(241,211,79,.18);
	color: rgba(241,211,79,.7);
	font-size: clamp(.68rem, .8vw, .78rem);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .14em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color .25s ease, padding .25s ease, border-color .25s ease;
}

.pmh-story-exits a:hover,
.pmh-story-exits a:focus-visible {
	padding-right: .55rem;
	padding-left: .55rem;
	border-color: rgba(241,211,79,.55);
	color: var(--pmh-color, var(--pmh-yellow));
	outline: none;
}

.pmh-focus-window {
	position: fixed;
	z-index: 4;
	top: var(--pmh-focus-top, 16vh);
	height: var(--pmh-focus-height, 68vh);
	overflow: hidden;
	color: var(--pmh-color, var(--pmh-yellow));
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
	text-shadow: 0 2px 32px rgba(0,0,0,.76);
}

.pmh-focus-flow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 1;
	filter: none;
	will-change: transform;
}

.pmh-wordmark {
	position: fixed;
	z-index: 22;
	top: clamp(38px, 6vh, 72px);
	left: clamp(34px, 6vw, 100px);
	padding: 0;
	color: rgba(255,255,255,.92);
	font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .32em;
	text-decoration: none;
}

.pmh-wordmark:hover,
.pmh-wordmark:focus-visible {
	color: #fff;
	opacity: .72;
	outline: none;
}

.pmh-sound {
	position: fixed;
	z-index: 20;
	top: max(1.1rem, env(safe-area-inset-top));
	right: max(1.1rem, env(safe-area-inset-right));
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	min-height: 42px;
	padding: .65rem .9rem;
	border: 1px solid rgba(241,211,79,.42);
	border-radius: 999px;
	background: rgba(5,5,5,.46);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	color: var(--pmh-yellow);
	font: 650 .7rem/1 Inter, ui-sans-serif, sans-serif;
	letter-spacing: .09em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}

.pmh-sound:hover,
.pmh-sound:focus-visible,
.pmh-sound[aria-pressed="true"] {
		border-color: var(--pmh-color, var(--pmh-yellow));
		background: var(--pmh-color, var(--pmh-yellow));
	color: #0a0a0a;
	outline: none;
}

.pmh-sound:hover {
	transform: translateY(-1px);
}

.pmh-sound__icon {
	display: grid;
	place-items: center;
}

.pmh-sound[aria-pressed="true"] .pmh-sound__icon {
	animation: pmh-pulse 2.1s ease-in-out infinite;
}

@keyframes pmh-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(.86); }
}

.pmh-progress {
	position: fixed;
	z-index: 18;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background: rgba(255,255,255,.08);
	pointer-events: none;
}

.pmh-progress span {
	display: block;
	width: calc(var(--pmh-progress) * 100%);
	height: 100%;
	background: var(--pmh-color, var(--pmh-yellow));
	box-shadow: 0 0 14px rgba(241,211,79,.55);
	transform-origin: left center;
}

@media (max-width: 780px) {
	.pmh-background::before {
		background-position: 63% 38%;
		transform-origin: 63% 40%;
	}

	.pmh-vignette {
		background:
			linear-gradient(180deg, rgba(0,0,0,.54) 0%, rgba(0,0,0,.36) 28%, rgba(0,0,0,.65) 66%, rgba(0,0,0,.88) 100%),
			linear-gradient(90deg, rgba(0,0,0,.64) 0%, rgba(0,0,0,.34) 55%, rgba(0,0,0,.48) 100%);
	}

	.pmh-copy {
		width: auto;
		margin: 0;
		padding: 34svh 1.35rem 18svh;
	}

	.pmh-copy .pmh-flow {
		font-size: clamp(calc(1.06rem * var(--pmh-font-scale, 1)), calc(4.6vw * var(--pmh-font-scale, 1)), calc(1.38rem * var(--pmh-font-scale, 1)));
		line-height: 1.6;
		letter-spacing: -.005em;
		word-spacing: .015em;
		opacity: 1;
		filter: none;
	}

	.pmh-focus-window {
		display: none;
	}

	.pmh-grain {
		opacity: calc(var(--pmh-grain-opacity, .25) * .55);
		animation: none;
	}

	.pmh-grain::after {
		animation: none;
	}

	.pmh-sound__label {
		display: none;
	}

	.pmh-sound {
		width: 43px;
		padding: 0;
		justify-content: center;
	}

	.pmh-wordmark {
		top: max(28px, calc(env(safe-area-inset-top) + 18px));
		left: max(22px, env(safe-area-inset-left));
		font-size: 12px;
	}

	.pmh-story-exits {
		margin-top: 4rem;
	}

	.pmh-story-exits a {
		padding-top: 1.05rem;
		padding-bottom: 1.05rem;
		font-size: .68rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pmh-background {
		transform: none !important;
	}

	.pmh-grain,
	.pmh-grain::after,
	.pmh-sound[aria-pressed="true"] .pmh-sound__icon {
		animation: none;
	}

	.pmh-background::before {
		filter: contrast(1.04) brightness(.68);
		transform: none !important;
	}
}