body {
	background-color: #000;
	color: #fff;
	margin: 0;
	overflow: hidden;
	cursor: pointer;
}

.frame {
	display: none;
}

.container {
	position: fixed;
	inset: 0;
	opacity: 1;
	transition: opacity 1.1s ease;
}

.container canvas {
	cursor: none;
	display: block;
	touch-action: none;
}

.particle-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	pointer-events: none;
	z-index: 150;
	display: none;
}

.camera-control {
	position: fixed;
	bottom: 24px;
	left: 24px;
	z-index: 180;
	font: 10px/1.5 Arial, sans-serif;
}
.camera-control button {
	font: inherit;
	color: #fff;
	background: transparent;
	border: 0;
	padding: 6px;
	cursor: pointer;
}
.camera-control button:hover, .camera-control button:focus-visible { color: #fff; }
.camera-control button:focus-visible { outline: 1px solid #aaa; outline-offset: 3px; }
.camera-control video { display: none; }
.camera-control p {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.in-desire .camera-control { display: none; }

.enter-desire,
.desire-artwork button,
.desire-notes summary {
	font: inherit;
	font-size: 11px;
	letter-spacing: 0.04em;
	color: #9baba9;
	background: transparent;
	border: 0;
	padding: 8px 0;
	cursor: pointer;
}

.enter-desire {
	color: #fff;
	position: fixed;
	bottom: 24px;
	right: 30px;
	z-index: 110;
	font-family: Arial, sans-serif;
}

.enter-desire span,
.desire-artwork button span { margin-left: 12px; }
.in-desire .enter-desire { display: none; }
.in-desire .container { pointer-events: none; }

.desire-artwork {
	position: fixed;
	inset: 0;
	z-index: 120;
	background: transparent;
	font-family: Arial, sans-serif;
	color: #a6b3b0;
	cursor: none;
}

.desire-artwork[hidden], .desire-branches[hidden] { display: none; }
.desire-artwork > canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.desire-artwork > canvas[hidden] { display: none; }
.desire-header {
	position: absolute;
	top: 30px;
	left: 34px;
	right: 34px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	pointer-events: none;
}
.desire-header button { pointer-events: auto; }
.desire-kicker { font-size: 9px; letter-spacing: 0.2em; color: #64716f; }
.desire-header h1 { font-size: 17px; font-weight: normal; letter-spacing: 0.025em; margin-top: 9px; }
.desire-identity { display: none; }
.desire-subtitles {
	position: absolute;
	left: 0;
	right: 0;
	bottom: max(34px, env(safe-area-inset-bottom));
	display: flex;
	justify-content: center;
	padding: 20px 24px;
	pointer-events: none;
	text-align: center;
}
.desire-subtitles p {
	width: max-content;
	flex-shrink: 0;
	margin: 0;
	font-family: Arial, sans-serif;
	font-size: clamp(15px, 1.35vw, 19px);
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: 0.015em;
	color: #f2f2f2;
	white-space: nowrap;
	text-shadow: 0 2px 5px #000, 0 0 14px #000, 0 0 24px #000;
	opacity: 1;
	transition: opacity 0.35s ease;
}
.desire-subtitles p.is-changing { opacity: 0; }
.desire-artwork button:hover, .enter-desire:hover { color: #fff; }
.desire-artwork button:focus-visible, .enter-desire:focus-visible { outline: 1px solid #9cafa5; outline-offset: 5px; }
@media (max-width: 700px) {
	.camera-control { left: 20px; bottom: 20px; }
	.desire-header { top: 22px; left: 20px; right: 20px; }
	.desire-header h1 { font-size: 15px; }
	.desire-header button { font-size: 10px; }
	.desire-subtitles { bottom: max(24px, env(safe-area-inset-bottom)); padding: 16px 22px; }
}
@media (prefers-reduced-motion: reduce) {
	.desire-subtitles p { transition: none; }
}

/* Gallery entrance; the artwork keeps its existing presentation. */
body.is-reading { background: #fff; color: #252525; overflow: auto; cursor: auto; }
.article-page { max-width: 900px; padding: 95px 50px 90px; margin: 0 auto; }
.article-page[hidden] { display: none; }
.article-heading { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 45px; font-family: Arial,sans-serif; }
.article-heading h1 { font: normal 16px/1.5 Arial,sans-serif; margin: 0; letter-spacing: -.015em; }
.article-subtitle { font: 11px/1.6 Arial,sans-serif; color: #777; margin: 6px 0 0; }
.article-byline { font: 11px/1.65 Arial,sans-serif; color: #777; margin: 0; text-align: right; }
.article-figure { margin: 0; }
.artwork-preview { position: relative; display: block; width: 100%; aspect-ratio: var(--preview-aspect,1.7); padding: 0; border: 0; background: #000; overflow: hidden; cursor: pointer; }
.is-reading .container { position: absolute; inset: 0; pointer-events: none; }
.is-reading .container canvas { width: 100% !important; height: 100% !important; filter: grayscale(1); }
.artwork-preview:focus-visible { outline: 1px solid #777; outline-offset: 6px; }
.article-figure figcaption { display: flex; justify-content: space-between; padding-top: 13px; font: 10px/1.5 Arial,sans-serif; color: #777; }
.article-copy { max-width: none; margin: 55px 0 0; font: 13px/1.8 Arial,sans-serif; color: #666; }
.article-copy p { margin: 0 0 17px; text-align: right; }
.article-copy h2 { font: normal 11px/1.5 Arial,sans-serif; color: #333; margin: 32px 0 14px; text-align: right; }
.article-copy h2:first-child { margin-top: 0; }
.is-reading .camera-control, .is-reading .enter-desire, .is-reading .particle-cursor { display: none !important; }
@media (max-width: 600px) {
	.article-page { padding: 55px 24px 60px; }
	.article-heading { margin-bottom: 30px; gap: 20px; }
	.article-heading h1 { font-size: 15px; }
	.article-byline { font-size: 10px; }
	.article-copy { margin-top: 35px; }
}