/* ==========================================================================
   Atelier — subpages (Bar all day, Boutique hotel, Kamers)
   Same design unit as main.css: every number is a design pixel × --u.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared pieces
   -------------------------------------------------------------------------- */

.page-hero {
	padding-top: calc(131 * var(--u));
}

.page-hero__media {
	height: calc(758 * var(--u));
	margin: 0 var(--m);
}

.page-hero__media .ph__clip {
	overflow: hidden;
}

.page-hero__cta {
	position: absolute;
	left: calc(60 * var(--u));
	bottom: calc(50 * var(--u));
	color: var(--beige);
}

.page-hero__cta--right {
	left: auto;
	right: calc(50 * var(--u));
}

.js .page-hero__media .page-hero__cta {
	opacity: 0;
	transition: opacity 1.2s ease 1.6s;
}

.js .page-hero__media.is-in .page-hero__cta {
	opacity: 1;
}

.page-hero__caption {
	margin: calc(20 * var(--u)) var(--m) 0;
}

.cap--row p {
	margin: 0;
}

/* The line itself is drawn by ::before, so the element keeps its box while
   the stroke is still at zero width (IntersectionObserver needs area). */
.rule {
	height: 1px;
}

.rule::before {
	content: "";
	display: block;
	height: 1px;
	background: var(--line);
	transform-origin: left center;
}

.js .rule[data-reveal="rule"]::before {
	transform: scaleX(0);
	transition: transform 1.5s var(--ease-heavy) var(--d, 0s);
}

.js .rule[data-reveal="rule"].is-in::before {
	transform: none;
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: calc(10 * var(--u));
}

.chip {
	display: grid;
	place-items: center;
	width: calc(146 * var(--u));
	min-width: 7em;
	height: calc(50 * var(--u));
	min-height: 2.2em;
	padding: 0 .6em;
	border: 1px solid var(--ink-soft);
	background: transparent;
	color: var(--ink-soft);
	line-height: calc(28 / 18);
	cursor: pointer;
	transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}

.chip:hover {
	background: var(--red);
	border-color: var(--red);
	color: var(--beige);
}

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

.duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap);
	align-items: start;
}

.duo > :nth-child(2) {
	margin-top: calc(100 * var(--u));
}

.wide {
	translate: 0 var(--py, 0px);
}

.wide__media {
	aspect-ratio: 735 / 575;
}

.ph--empty {
	background: #c4c4c4;
}

.grid4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: calc(20 * var(--u));
}

.grid4__item {
	aspect-ratio: 1 / 1;
	border-radius: var(--r);
}

/* --------------------------------------------------------------------------
   Bar all day
   -------------------------------------------------------------------------- */

.bar-head {
	position: relative;
	height: calc(437 * var(--u));
}

.bar-head__title {
	position: absolute;
	left: var(--m);
	top: calc(260 * var(--u));
	width: calc(1088 * var(--u));
	text-align: right;
}

.bar-head__cta {
	position: absolute;
	right: var(--m);
	top: calc(419 * var(--u));
}

.ghost--bar {
	top: calc(291 * var(--u));
	right: calc(1086 * var(--u));
}

.bar-menu {
	padding: 0 var(--m);
}

.feeling {
	margin-top: calc(186 * var(--u));
	padding: 0 var(--m);
}

.feeling .display {
	text-align: right;
}

.feeling .grid4 {
	margin-top: calc(36 * var(--u));
}

.playlists {
	margin-top: calc(193 * var(--u));
	padding: 0 var(--m);
}

.playlists__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
	margin-top: calc(35.5 * var(--u));
}

.playlist {
	display: block;
}

.playlist__media {
	aspect-ratio: 480 / 482;
	border-radius: var(--r);
}

.playlist__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(36, 36, 36, .25);
	transition: background-color .6s ease;
}

.playlist:hover .playlist__media::after {
	background: rgba(36, 36, 36, .08);
}

.playlist__play {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: calc(70 * var(--u));
	height: calc(70 * var(--u));
	border-radius: 50%;
	background: var(--beige);
	translate: -50% -50%;
	transition: scale .6s var(--ease);
}

.playlist__play img {
	width: calc(24.85 * var(--u));
	height: auto;
	rotate: 90deg;
	translate: calc(2 * var(--u)) 0;
}

.playlist:hover .playlist__play {
	scale: 1.1;
}

.playlist__name {
	margin-top: calc(22.5 * var(--u));
	font-family: var(--font-display);
	font-weight: 600;
	font-size: calc(50 * var(--u));
	line-height: calc(90 / 50);
	color: var(--red);
	text-transform: uppercase;
}

.playlist .cap {
	margin-top: calc(-4 * var(--u));
}

.playlist .cap::after {
	background: var(--ink-soft);
}

/* 1920 keyhole */
.keyhole-section {
	margin-top: calc(190 * var(--u));
	padding: 0 var(--m);
}

.keyhole {
	position: relative;
	display: block;
	height: calc(758 * var(--u));
	overflow: hidden;
	background: #ecf0e3;
	color: var(--ink);
}

.keyhole__texture {
	position: absolute;
	inset: 0;
	opacity: .35;
	background: url("../img/texture-paper.webp") center / cover;
}

.keyhole__seam {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--line);
}

.keyhole__label {
	position: absolute;
	left: calc(60 * var(--u));
	top: calc(52 * var(--u));
}

.keyhole__title {
	position: absolute;
	left: calc(60 * var(--u));
	top: calc(96 * var(--u));
	width: calc(540 * var(--u));
}

.keyhole__hole {
	position: absolute;
	left: 46.4%;
	top: 34.04%;
	width: 7.2%;
	height: 32.05%;
}

.keyhole__hole img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.keyhole__view {
	filter: brightness(.55);
	transition: filter .45s ease;
}

.keyhole__dim {
	transition: opacity .45s ease;
}

.keyhole__glow {
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(170 * var(--u));
	height: calc(300 * var(--u));
	translate: -50% -50%;
	background: radial-gradient(ellipse at center, rgba(255, 199, 107, .95), rgba(255, 199, 107, 0) 68%);
	filter: blur(calc(18 * var(--u)));
	opacity: 0;
	transition: opacity .45s ease;
	pointer-events: none;
}

.keyhole:hover .keyhole__view,
.keyhole:focus-visible .keyhole__view {
	filter: none;
}

.keyhole:hover .keyhole__dim,
.keyhole:focus-visible .keyhole__dim {
	opacity: 0;
}

.keyhole:hover .keyhole__glow,
.keyhole:focus-visible .keyhole__glow {
	opacity: 1;
}

.keyhole__hint {
	position: absolute;
	left: 50%;
	top: calc(640 * var(--u));
	width: calc(400 * var(--u));
	translate: -50% 0;
	font-size: max(11px, calc(14 * var(--u)));
	line-height: calc(20 / 14);
	text-align: center;
	text-transform: uppercase;
	opacity: .7;
}

.keyhole__link {
	position: absolute;
	right: calc(50 * var(--u));
	bottom: calc(50 * var(--u));
}

.keyhole-section .cap {
	margin-top: calc(20 * var(--u));
}

/* Bar: the real 1920 site sits behind the hole. The peek box matches the
   hole and is clipped to the keyhole shape (objectBoundingBox clipPath, so it
   scales with the box). Hover scales the box up around the round of the hole
   while the site inside is counter-scaled, so the door opens on a still view.
   --kf (site scale) comes from pages.js. */
.keyhole__peek {
	position: absolute;
	left: 46.4%;
	top: 34.04%;
	width: 7.2%;
	height: 32.05%;
	overflow: hidden;
	clip-path: url(#keyhole-clip);
	transform-origin: 50% 22.22%;
	transform: scale(1);
	transition: transform 1.1s var(--ease-heavy);
	pointer-events: none;
}

.keyhole__site {
	position: absolute;
	left: 50%;
	top: 22.22%;
	width: calc(1280px * var(--kf, .5));
	height: calc(1800px * var(--kf, .5));
	margin-left: calc(-640px * var(--kf, .5));
	margin-top: calc(-230px * var(--kf, .5));
	transform-origin: calc(640px * var(--kf, .5)) calc(230px * var(--kf, .5));
	transform: scale(1);
	filter: brightness(.55);
	opacity: 0;
	transition: transform 1.1s var(--ease-heavy), filter .6s ease, opacity .8s ease;
	background: #1a1612;
}

.keyhole__site.is-loaded {
	opacity: 1;
}

.keyhole__frame {
	display: block;
	width: 1280px;
	height: 1800px;
	border: 0;
	transform-origin: 0 0;
	transform: scale(var(--kf, .5));
	pointer-events: none;
}

.keyhole:hover .keyhole__peek,
.keyhole:focus-visible .keyhole__peek {
	transform: scale(3.1);
}

.keyhole:hover .keyhole__site,
.keyhole:focus-visible .keyhole__site {
	transform: scale(calc(1 / 3.1));
	filter: brightness(1);
}

.keyhole-section:not(.keyhole--page) .keyhole:hover .keyhole__hint {
	opacity: 0;
}

.keyhole__clipdef {
	position: absolute;
}

@media (hover: none), (max-width: 767px) {
	.keyhole__peek,
	.keyhole__clipdef {
		display: none;
	}
}

main.page-bar ~ .site-footer {
	margin-top: calc(191 * var(--u));
}

/* --------------------------------------------------------------------------
   Boutique hotel
   -------------------------------------------------------------------------- */

.why {
	margin-top: calc(185 * var(--u));
	padding: 0 var(--m);
}

.why__chips {
	display: flex;
	justify-content: space-between;
	gap: calc(10 * var(--u));
	margin-top: calc(36 * var(--u));
}

.why__rule {
	margin-top: calc(20 * var(--u));
}

.why__panels {
	position: relative;
	height: calc(849 * var(--u));
	margin-top: calc(20 * var(--u));
}

.why-panel {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease, visibility 0s linear .5s;
}

.why-panel.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .9s ease .15s, visibility 0s;
}

.why-panel[hidden] {
	display: block;
}

.why-panel__img1 {
	position: absolute;
	left: 0;
	top: 0;
	width: calc(735 * var(--u));
}

.why-panel__img1 .ph {
	aspect-ratio: 735 / 575;
}

.why-panel__img2 {
	position: absolute;
	left: calc(765 * var(--u));
	top: calc(433 * var(--u));
	width: calc(735 * var(--u));
}

.why-panel__img2 .ph {
	aspect-ratio: 735 / 354;
}

.why-panel__title {
	position: absolute;
	left: calc(870 * var(--u));
	top: calc(117 * var(--u));
	width: calc(630 * var(--u));
}

.why-panel__text {
	position: absolute;
	left: calc(870 * var(--u));
	top: calc(220 * var(--u));
	width: calc(630 * var(--u));
}

.why-panel__cta {
	position: absolute;
	left: 0;
	top: calc(803 * var(--u));
}

.layers {
	margin-top: calc(199 * var(--u));
	padding: 0 var(--m);
}

.layers__text {
	width: calc(706 * var(--u));
	max-width: 100%;
	margin-top: calc(36 * var(--u));
}

.layers__text--right {
	margin: calc(21 * var(--u)) 0 0 auto;
}

.layers-trio {
	position: relative;
	margin-top: calc(95 * var(--u));
	padding: 0 var(--m);
}

.layers-trio .trio {
	margin-top: 0;
}

.ghost--layers {
	top: calc(717 * var(--u));
	right: calc(1214 * var(--u));
}

.why-sleep {
	margin-top: calc(200 * var(--u));
	padding: 0 var(--m);
}

.why-sleep__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.why-sleep__head .display {
	margin-top: calc(-13 * var(--u));
	text-align: right;
}

/* Two lines high even for a one-line intro, so the list always starts at the
   same height as in the design. */
.why-sleep__intro {
	width: calc(786 * var(--u));
	max-width: 100%;
	min-height: calc(56 * var(--u));
	margin: calc(49 * var(--u)) 0 0 auto;
	text-align: right;
}

.why-sleep__list {
	margin-top: calc(100 * var(--u));
}

.why-row {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: calc(40 * var(--u));
	min-height: calc(124 * var(--u));
}

.why-row:last-child {
	min-height: 0;
}

.why-row__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: calc(50 * var(--u));
	line-height: calc(90 / 50);
	color: var(--red);
	text-transform: uppercase;
	white-space: nowrap;
	transition: translate .7s var(--ease);
}

.why-row:hover .why-row__title {
	translate: calc(14 * var(--u)) 0;
}

.why-row__text {
	flex: 0 1 calc(986 * var(--u));
	margin-top: calc(16 * var(--u));
}

.why-row:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(107 * var(--u));
	height: 1px;
	background: var(--line);
	transform-origin: left center;
}

.js .why-row[data-reveal="row"]::after {
	transform: scaleX(0);
	transition: transform 1.5s var(--ease-heavy) var(--d, 0s);
}

.js .why-row[data-reveal="row"] > * {
	opacity: 0;
	transition: opacity 1s ease calc(var(--d, 0s) + .3s), translate .7s var(--ease);
}

.js .why-row[data-reveal="row"].is-in::after {
	transform: none;
}

.js .why-row[data-reveal="row"].is-in > * {
	opacity: 1;
}

.facts {
	display: flex;
	justify-content: space-between;
	gap: calc(20 * var(--u));
	margin: calc(191 * var(--u)) var(--m) 0;
}

.fact {
	position: relative;
	padding-bottom: calc(13 * var(--u));
	text-transform: uppercase;
	white-space: nowrap;
}

.fact span,
.fact a {
	text-transform: none;
}

.fact::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--line);
}

main.page-hotel ~ .site-footer {
	margin-top: calc(210 * var(--u));
}

/* --------------------------------------------------------------------------
   Kamers
   -------------------------------------------------------------------------- */

.kamers-head {
	position: relative;
	height: calc(444 * var(--u));
}

.kamers-head__label {
	position: absolute;
	left: var(--m);
	top: calc(191 * var(--u));
}

.kamers-head__title {
	position: absolute;
	left: calc(554 * var(--u));
	top: calc(178 * var(--u));
	width: calc(786 * var(--u));
}

.kamers-head__types,
.kamers-head__features {
	position: absolute;
	flex-direction: column;
}

.kamers-head__types {
	left: var(--m);
	top: calc(283 * var(--u));
}

.kamers-head__features {
	right: var(--m);
	top: calc(191 * var(--u));
}

.ghost--kamers {
	top: calc(489 * var(--u));
	left: calc(1192 * var(--u));
}

.rooms-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	column-gap: var(--gap);
	align-items: start;
	padding: 0 var(--m);
}

.rooms-grid .card {
	transition: opacity .5s ease;
}

.rooms-grid .card.is-leaving {
	opacity: 0;
}

.rooms-grid .card[hidden] {
	display: none;
}

.slot-t { grid-column: span 2; }
.slot-d { grid-column: span 3; }

.slot-t .card__media { aspect-ratio: 1 / 1; }
.slot-d .card__media { aspect-ratio: 735 / 575; }

.slot-t1 { margin-top: calc(73 * var(--u)); }
.slot-t2 { margin-top: 0; }
.slot-t3 { margin-top: calc(135 * var(--u)); }
.slot-d1 { margin-top: calc(1 * var(--u)); }
.slot-d2 { margin-top: calc(63 * var(--u)); }

/* Second trio block staggers differently in the design: 0 / 62 / 135. */
.after-duo.slot-t1 { margin-top: calc(-1 * var(--u)); }
.after-duo.slot-t2 { margin-top: calc(61 * var(--u)); }
.after-duo.slot-t3 { margin-top: calc(134 * var(--u)); }

.rooms-grid__empty {
	grid-column: 1 / -1;
	padding: calc(60 * var(--u)) 0;
	text-align: center;
	text-transform: uppercase;
}

.kamers-help {
	margin-top: calc(180 * var(--u));
	padding: 0 var(--m);
}

.page-kamers .insta {
	margin-top: calc(36 * var(--u));
}

main.page-kamers ~ .site-footer {
	margin-top: calc(190 * var(--u));
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.page-hero {
		padding-top: calc(80 * var(--u));
	}

	.page-hero__media {
		height: auto;
		aspect-ratio: 4 / 5;
	}

	.page-hero__cta {
		left: calc(20 * var(--u));
		bottom: calc(22 * var(--u));
		text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
	}

	.page-hero__cta--right {
		left: auto;
		right: calc(20 * var(--u));
	}

	.page-hero__caption {
		flex-direction: column;
		gap: calc(2 * var(--u));
		height: auto;
		margin-top: calc(14 * var(--u));
		padding-bottom: calc(14 * var(--u));
		line-height: 1.5;
	}

	.duo {
		grid-template-columns: 1fr;
		gap: calc(34 * var(--u));
	}

	.duo > :nth-child(2) {
		margin-top: 0;
	}

	.wide {
		translate: none;
	}

	.grid4 {
		grid-template-columns: 1fr 1fr;
		gap: calc(12 * var(--u));
	}

	.chip {
		width: auto;
		height: calc(44 * var(--u));
		padding: 0 calc(18 * var(--u));
	}

	/* Bar */
	.bar-head {
		height: auto;
		padding: calc(100 * var(--u)) var(--m) calc(28 * var(--u));
	}

	.bar-head__title,
	.bar-head__cta {
		position: static;
		width: auto;
		text-align: left;
	}

	.bar-head__cta {
		margin-top: calc(18 * var(--u));
	}

	.ghost--bar {
		top: calc(60 * var(--u));
		right: 30%;
	}

	.feeling,
	.playlists,
	.keyhole-section {
		margin-top: calc(90 * var(--u));
	}

	.feeling .display {
		text-align: left;
	}

	.feeling .grid4,
	.playlists__grid {
		margin-top: calc(22 * var(--u));
	}

	.playlists__grid {
		grid-template-columns: 1fr;
		gap: calc(34 * var(--u));
	}

	.playlist__name {
		margin-top: calc(12 * var(--u));
		font-size: calc(34 * var(--u));
		line-height: 1.4;
	}

	.playlist .cap {
		margin-top: 0;
	}

	.keyhole {
		height: auto;
		aspect-ratio: 4 / 5;
	}

	.keyhole__label {
		left: calc(20 * var(--u));
		top: calc(22 * var(--u));
		font-size: calc(13 * var(--u));
	}

	.keyhole__title {
		left: calc(20 * var(--u));
		top: calc(52 * var(--u));
		width: 60%;
		font-size: calc(36 * var(--u));
	}

	.keyhole__hole {
		left: 40%;
		top: 40%;
		width: 20%;
		height: 36%;
	}

	.keyhole__glow {
		width: calc(140 * var(--u));
		height: calc(240 * var(--u));
	}

	.keyhole__hint {
		top: auto;
		bottom: calc(60 * var(--u));
		width: 80%;
	}

	.keyhole__link {
		right: calc(20 * var(--u));
		bottom: calc(18 * var(--u));
	}

	.keyhole-section .cap {
		flex-direction: column;
		gap: calc(2 * var(--u));
		height: auto;
		padding-bottom: calc(14 * var(--u));
		line-height: 1.5;
	}

	main.page-bar ~ .site-footer,
	main.page-hotel ~ .site-footer,
	main.page-kamers ~ .site-footer {
		margin-top: calc(100 * var(--u));
	}

	/* Hotel */
	.why {
		margin-top: calc(90 * var(--u));
	}

	.why__chips {
		flex-direction: column;
		margin-top: calc(22 * var(--u));
	}

	.why__panels {
		height: auto;
		margin-top: calc(24 * var(--u));
	}

	.why-panel {
		position: relative;
		inset: auto;
		display: none;
	}

	.why-panel.is-active {
		display: block;
	}

	.why-panel[hidden] {
		display: none;
	}

	.why-panel__img1,
	.why-panel__img2,
	.why-panel__title,
	.why-panel__text,
	.why-panel__cta {
		position: static;
		width: auto;
	}

	.why-panel__title {
		margin-top: calc(30 * var(--u));
	}

	.why-panel__text,
	.why-panel__img2,
	.why-panel__cta {
		margin-top: calc(18 * var(--u));
	}

	.why-panel__img2 {
		margin-top: calc(30 * var(--u));
	}

	.layers {
		margin-top: calc(100 * var(--u));
	}

	.layers__text {
		width: auto;
		margin-top: calc(20 * var(--u));
	}

	.layers__text--right {
		margin: calc(16 * var(--u)) 0 0;
	}

	.layers-trio {
		margin-top: calc(34 * var(--u));
	}

	.ghost--layers {
		top: auto;
		bottom: calc(-52 * var(--u));
		right: 38%;
	}

	.why-sleep {
		margin-top: calc(100 * var(--u));
	}

	.why-sleep__head {
		flex-direction: column;
		gap: calc(18 * var(--u));
	}

	.why-sleep__head .display {
		align-self: flex-end;
		margin-top: 0;
	}

	.why-sleep__intro {
		width: auto;
		margin-top: calc(22 * var(--u));
	}

	.why-sleep__list {
		margin-top: calc(40 * var(--u));
	}

	.why-row {
		grid-template-columns: 1fr;
		min-height: 0;
		padding: calc(18 * var(--u)) 0 calc(22 * var(--u));
	}

	.why-row__title {
		font-size: calc(30 * var(--u));
		line-height: 1.2;
		white-space: normal;
	}

	.why-row {
		flex-direction: column;
		gap: 0;
	}

	.why-row__text {
		flex: none;
		margin-top: calc(10 * var(--u));
	}

	.why-row:not(:last-child)::after {
		top: auto;
		bottom: 0;
	}

	.facts {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: calc(18 * var(--u)) calc(16 * var(--u));
		margin-top: calc(70 * var(--u));
	}

	.fact {
		white-space: normal;
		font-size: calc(13 * var(--u));
	}

	/* Kamers */
	.kamers-head {
		height: auto;
		padding: calc(96 * var(--u)) var(--m) 0;
	}

	.kamers-head__label,
	.kamers-head__title,
	.kamers-head__types,
	.kamers-head__features {
		position: static;
		width: auto;
	}

	.kamers-head__title {
		margin-top: calc(14 * var(--u));
	}

	.kamers-head__types,
	.kamers-head__features {
		flex-direction: row;
		margin-top: calc(18 * var(--u));
	}

	.kamers-head__features {
		margin-top: calc(10 * var(--u));
	}

	.ghost--kamers {
		display: none;
	}

	.rooms-grid {
		grid-template-columns: 1fr;
		row-gap: calc(34 * var(--u));
		margin-top: calc(30 * var(--u));
	}

	.rooms-grid .card {
		grid-column: 1 / -1;
		margin-top: 0 !important;
	}

	.kamers-help {
		margin-top: calc(90 * var(--u));
	}

	.page-kamers .insta {
		margin-top: calc(30 * var(--u));
	}
}

/* --------------------------------------------------------------------------
   1920 — scroll-pinned keyhole. The stage sticks for --kh-scroll of scrolling;
   JS feeds --a (light up), --b (door opens), --c (you are inside), --ks (clip
   scale) and --kz (camera creeps forward). The room is clipped to the keyhole
   path; the path scales up around the round of the hole while the photo is
   counter-scaled, so it only "opens", it never jumps.
   -------------------------------------------------------------------------- */

.keyhole--page {
	--kh-scroll: 160vh;
	margin-top: 0;
	padding: 0;
}

.keyhole-stage {
	position: relative;
	--kh-top: calc(131 * var(--u));
}

.keyhole--page .keyhole,
.keyhole--page .cap--row {
	margin-left: var(--m);
	margin-right: var(--m);
}

.keyhole--page .keyhole {
	margin-top: var(--kh-top);
}

.keyhole-room {
	display: none;
}

.keyhole-scroll.is-pinned {
	margin-top: 0;
	height: calc(100vh + var(--kh-scroll));
	height: calc(100svh + var(--kh-scroll));
}

.keyhole-scroll.is-pinned .keyhole-stage {
	--kh-top: clamp(calc(var(--header-h) + 18 * var(--u)), calc(131 * var(--u)), calc(100% - 840 * var(--u)));
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	animation: kh-in 1.4s ease both;
}

@keyframes kh-in {
	from { opacity: 0; }
}

.keyhole-scroll.is-pinned .keyhole {
	position: absolute;
	left: var(--m);
	right: var(--m);
	top: var(--kh-top);
	margin: 0;
}

.keyhole-scroll.is-pinned .cap--row {
	position: absolute;
	left: var(--m);
	right: var(--m);
	top: calc(var(--kh-top) + 778 * var(--u));
	margin: 0;
}

/* The card's own view and dimmer step aside; the room layer takes over. */
.keyhole-scroll.is-pinned .keyhole__view,
.keyhole-scroll.is-pinned .keyhole__dim {
	display: none;
}

.keyhole-scroll.is-pinned .keyhole__glow {
	opacity: var(--a, 0);
}

.keyhole-scroll.is-pinned .keyhole__hint {
	opacity: calc(.7 * (1 - var(--a, 0)));
}

.keyhole-scroll.is-pinned .keyhole__label,
.keyhole-scroll.is-pinned .keyhole__title,
.keyhole-scroll.is-pinned .keyhole__seam,
.keyhole-scroll.is-pinned .keyhole__link,
.keyhole-scroll.is-pinned .cap--row {
	opacity: calc(1 - var(--b, 0));
}

.keyhole-scroll.is-pinned .keyhole-room {
	display: block;
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.keyhole-room__clip {
	position: absolute;
	left: calc(var(--cx, 50%) - 54px);
	top: calc(var(--cy, 50%) - 54px);
	width: 108px;
	height: 243px;
	clip-path: path("M27.8775 101.256C17.3982 95.4646 9.14115 86.3541 4.40468 75.3578C-0.33179 64.3614 -1.27904 52.1027 1.71188 40.5093C4.70279 28.9158 11.4622 18.6452 20.9274 11.3123C30.3925 3.97932 42.0265 0 54 0C65.9735 0 77.6075 3.97932 87.0726 11.3123C96.5378 18.6452 103.297 28.9158 106.288 40.5093C109.279 52.1027 108.332 64.3614 103.595 75.3578C98.8588 86.3541 90.6018 95.4646 80.1225 101.256L94.5 243H13.5L27.8775 101.256Z");
	transform-origin: 54px 54px;
	transform: scale(var(--ks, 1));
	will-change: transform;
}

.keyhole-room__pic {
	position: absolute;
	left: calc(54px - var(--cx, 50%));
	top: calc(54px - var(--cy, 50%));
	width: var(--sw, 100vw);
	height: var(--sh, 100vh);
	transform-origin: var(--cx, 50%) var(--cy, 50%);
	transform: scale(calc(var(--kz, 1) / var(--ks, 1)));
	filter: brightness(calc(.5 + .5 * var(--a, 0)));
	will-change: transform;
}

.keyhole-room__pic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
}

.keyhole-room__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(18, 10, 6, .78), rgba(18, 10, 6, 0) 58%);
	opacity: var(--c, 0);
}

.keyhole-room__caption {
	position: absolute;
	left: var(--m);
	bottom: calc(64 * var(--u));
	width: calc(680 * var(--u));
	max-width: calc(100% - 2 * var(--m));
	color: var(--beige);
	opacity: var(--c, 0);
	translate: 0 calc(36 * var(--u) * (1 - var(--c, 0)));
	visibility: hidden;
	pointer-events: none;
}

.keyhole-scroll.is-open .keyhole-room__caption {
	visibility: visible;
	pointer-events: auto;
}

.keyhole-room__caption .label {
	margin: 0;
	opacity: .8;
}

.keyhole-room__title {
	margin: calc(14 * var(--u)) 0 0;
	font-size: calc(110 * var(--u));
	line-height: calc(100 / 110);
	color: var(--beige);
}

.keyhole-room__text {
	width: calc(520 * var(--u));
	max-width: 100%;
	margin: calc(22 * var(--u)) 0 0;
	font-size: max(14px, calc(20 * var(--u)));
	line-height: calc(30 / 20);
}

.keyhole-room__link {
	margin-top: calc(26 * var(--u));
}

@media (max-width: 767px) {
	.keyhole--page {
		--kh-scroll: 130vh;
	}

	.keyhole-scroll.is-pinned .keyhole-stage {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: var(--header-h) var(--m) 0;
	}

	.keyhole-scroll.is-pinned .keyhole,
	.keyhole-scroll.is-pinned .cap--row {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		margin: 0;
	}

	.keyhole-scroll.is-pinned .cap--row {
		margin-top: calc(12 * var(--u));
	}

	.keyhole-room__caption {
		bottom: calc(40 * var(--u));
	}

	.keyhole-room__title {
		font-size: calc(56 * var(--u));
	}

	.keyhole-room__text {
		font-size: calc(15 * var(--u));
		line-height: 1.5;
	}
}

@media (prefers-reduced-motion: reduce) {
	.keyhole-scroll.is-pinned .keyhole-stage {
		animation: none;
	}
}