/* ============================================================================
   Kyle Roux Interiors — Tier 1, Minimum. One screen, no scroll.

   This stylesheet owns the visual identity of the landing page. The CrocoBuilder
   document owns the structure and the words. The contract between them is the set
   of vb-t1-* class names below, which are assigned by hand in the builder and are
   therefore stable — nothing here targets a builder-generated node class, so the
   page survives being edited.

   Everything is scoped under body.vb-t1 so no rule can reach another page.

   Values are carried across from the approved Tier 1 prototype unchanged.
   ============================================================================ */

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

body.vb-t1 {
	--ink: #050D18;
	--navy: #041847;
	--bone: #F1EFE9;
	--bone-dim: #94A2BC;
	--brass: #B08D52;
	--brass-lift: #CBA96C;
	--line: rgba(241, 239, 233, .16);
	--line-2: rgba(241, 239, 233, .32);
	--ui: "Jost", system-ui, sans-serif;
	--prose: "Petrona", Georgia, serif;
	--gut: clamp(1.25rem, 5vw, 5.5rem);
	--track-word: .44em;
	--p: 0;   /* mark contraction */
	--ap: 0;  /* aperture */
	--dwell: 7000ms;
}

/* ---------------- shell reset ----------------
   The CrocoBuilder Theme Builder assignment suppresses the header and footer.
   This clears whatever container chrome the theme still wraps the content in,
   and — more importantly — guarantees no ancestor creates a containing block
   for position:fixed (a transform, filter, or contain would trap .vb-t1-frame). */

html.vb-t1-js,
body.vb-t1 {
	height: 100%;
	-webkit-text-size-adjust: 100%;
}

body.vb-t1 {
	margin: 0;
	background: var(--ink);
	color: var(--bone);
	font-family: var(--prose);
	font-size: 1.125rem;
	line-height: 1.7;
	overflow: hidden;                     /* the whole point: one frame, no scroll */
}

/* Blocksy injects a page hero carrying a second <h1> and the excerpt. The frame
   covers it visually, but two h1 elements is wrong for SEO and for a screen reader,
   so remove it outright. Header and footer are suppressed by the CrocoBuilder
   Theme Builder assignment; this handles the one piece it does not own. */
body.vb-t1 .hero-section,
body.vb-t1 .entry-header,
body.vb-t1 .page-description {
	display: none !important;
}

body.vb-t1 #main-container,
body.vb-t1 .site-main,
body.vb-t1 .entry-content,
body.vb-t1 .ct-container,
body.vb-t1 .ct-container-full,
body.vb-t1 article {
	max-width: none;
	width: auto;
	margin: 0;
	padding: 0;
	transform: none;
	filter: none;
	contain: none;
	overflow: visible;
	background: none;
}

body.vb-t1 *,
body.vb-t1 *::before,
body.vb-t1 *::after {
	box-sizing: border-box;
}

body.vb-t1 img {
	display: block;
	max-width: 100%;
}

body.vb-t1 a {
	color: inherit;
}

body.vb-t1 ::selection {
	background: var(--brass);
	color: var(--ink);
}

body.vb-t1 :focus-visible {
	outline: 2px solid var(--brass-lift);
	outline-offset: 5px;
}

.vb-t1-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.vb-t1-lab {
	font-family: var(--ui);
	font-weight: 400;
	font-size: .6875rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--bone-dim);
}

/* ---------------- the mark ----------------
   Built at runtime from the h1 text by tier1.js: one span per letter, the first
   letter of each word marked as a keeper. --dx per keeper and --gdx per gap are
   measured, then driven by --p from 0 (wordmark) to 1 (monogram). */

.vb-t1-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	text-decoration: none;
	line-height: 1;
	font-family: var(--ui);
	font-weight: 300;
	color: var(--bone);
	white-space: nowrap;
}

.vb-t1-mark__type {
	display: inline-flex;
	align-items: baseline;
	position: relative;
}

.vb-t1-mark__l {
	display: inline-block;
	letter-spacing: var(--track-word);
	transform: translate3d(calc(var(--dx, 0px) * var(--p)), 0, 0);
}

.vb-t1-mark__l--drop {
	opacity: calc(1 - var(--p) * 1.85);
}

.vb-t1-mark__gap {
	display: inline-block;
	width: .5em;
	transform: translate3d(calc(var(--gdx, 0px) * var(--p)), 0, 0);
	opacity: calc(1 - var(--p) * 2);
}

.vb-t1-mark__box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	overflow: visible;
}

.vb-t1-mark__box rect {
	fill: none;
	stroke: var(--bone);
	stroke-width: var(--box-w, 1.25);
	stroke-dasharray: var(--box-len, 400);
	stroke-dashoffset: calc(var(--box-len, 400) * (1 - var(--p)));
	opacity: calc((var(--p) - .2) * 1.5);
}

/* ---------------- overture ----------------
   Injected by tier1.js. It carries no content of its own: the image is cloned
   from the first stage figure and the mark is cloned from the h1. Nothing here
   is editable because there is nothing here to edit. */

.vb-t1-ovt {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	background: var(--ink);
}

.vb-t1-ovt[hidden] {
	display: none;
}

.vb-t1-ovt__ap {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(var(--apw, 20rem) + (100vw - var(--apw, 20rem)) * var(--ap));
	height: calc(var(--aph, 7rem) + (100svh - var(--aph, 7rem)) * var(--ap));
	transform: translate(-50%, -50%);
	overflow: hidden;
	opacity: var(--ap);
}

.vb-t1-ovt__ap img {
	width: 100vw;
	height: 100svh;
	object-fit: cover;
	object-position: center 44%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.vb-t1-ovt__ap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(5, 13, 24, .9) 0%, rgba(5, 13, 24, .3) 55%, rgba(5, 13, 24, .1) 100%);
}

.vb-t1-ovt__mark {
	position: relative;
	z-index: 2;
	font-size: clamp(1rem, 2.9vw, 2rem);
	transform: scale(calc(1 - var(--ap) * .34));
	opacity: calc(1 - var(--ap) * 1.25);
}

/* ---------------- the frame ---------------- */

.vb-t1-frame {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--gut);
	padding-bottom: clamp(1.5rem, 4vh, 3rem);
}

.vb-t1-stage {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.vb-t1-fig {
	position: absolute;
	inset: -4%;
	margin: 0;
	opacity: 0;
	transition: opacity 1.4s cubic-bezier(.16, 1, .3, 1);
}

.vb-t1-fig.is-on {
	opacity: 1;
}

.vb-t1-fig img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
	transform: scale(1.05);
	transition: transform 9s linear;
}

.vb-t1-fig.is-on img {
	transform: scale(1.13);
}

.vb-t1-stage::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to top, rgba(5, 13, 24, .94) 0%, rgba(5, 13, 24, .6) 30%, rgba(5, 13, 24, .12) 62%, rgba(5, 13, 24, .45) 100%),
		linear-gradient(to right, rgba(5, 13, 24, .62) 0%, rgba(5, 13, 24, 0) 58%);
}

.vb-t1-plate {
	position: relative;
	z-index: 2;
	max-width: 46rem;
}

.vb-t1-plate h1 {
	margin: 0;
	font-weight: 300;
	line-height: 1.06;
	font-family: var(--ui);
}

.vb-t1-frame .vb-t1-mark {
	font-size: clamp(.9375rem, 2.9vw, 2.125rem);
}

.vb-t1-line {
	font-family: var(--prose);
	font-size: clamp(1.0625rem, 1.6vw, 1.4375rem);
	line-height: 1.5;
	max-width: 28ch;
	margin: clamp(1.25rem, 2.6vw, 2rem) 0 0;
	color: var(--bone);
}

/* ---------------- contact block ---------------- */

.vb-t1-meta {
	position: relative;
	z-index: 2;
	margin-top: clamp(1.75rem, 4vh, 3rem);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, auto));
	gap: clamp(1rem, 2.5vw, 3.5rem);
	padding-top: 1.5rem;
}

.vb-t1-meta::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--line-2);
	transform: scaleX(0);
	transform-origin: left;
}

.vb-t1-js .vb-t1-meta.is-in::before {
	transform: scaleX(1);
	transition: transform 1.3s cubic-bezier(.16, 1, .3, 1) .3s;
}

.vb-t1-meta .vb-t1-lab {
	display: block;
	margin-bottom: .6rem;
}

.vb-t1-meta address,
.vb-t1-meta p {
	font-style: normal;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--bone);
	margin: 0;
}

.vb-t1-meta a {
	color: var(--bone);
	text-decoration: none;
	border-bottom: 1px solid var(--brass);
	padding-bottom: .1rem;
	transition: color .4s ease, border-color .4s ease;
}

.vb-t1-meta a:hover,
.vb-t1-meta a:focus-visible {
	color: var(--brass-lift);
	border-color: var(--brass-lift);
}

/* ---------------- the chapter markers ----------------
   Authored in the builder as a ul of li, because CrocoBuilder's block element
   offers no button tag. tier1.js upgrades each li to role="button" with a
   tabindex and full keyboard handling, so the semantics land in the same place. */

.vb-t1-rooms {
	position: relative;
	z-index: 2;
	margin: clamp(1.5rem, 4vh, 2.5rem) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: clamp(.5rem, 1.4vw, 1rem);
	align-items: center;
}

.vb-t1-room {
	position: relative;
	flex: 1;
	max-width: 9rem;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	display: block;
	text-align: left;
	list-style: none;

	/* The prototype authored these as <button>, which takes line-height: normal
	   from the UA stylesheet rather than inheriting the body's 1.7. As an <li>
	   they would inherit, making each marker 3px taller and pushing the whole
	   flex column up. Restore the button's metric so the frame lands identically. */
	line-height: normal;
}

.vb-t1-room__bar {
	display: block;
	height: 2px;
	background: rgba(241, 239, 233, .22);
	position: relative;
	overflow: hidden;
}

.vb-t1-room__bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--brass-lift);
	transform: scaleX(0);
	transform-origin: left;
}

.vb-t1-room[aria-current="true"] .vb-t1-room__bar::after {
	transform: scaleX(1);
	transition: transform var(--dwell, 7000ms) linear;
}

.vb-t1-room:hover .vb-t1-room__bar::after,
.vb-t1-room:focus-visible .vb-t1-room__bar::after {
	transform: scaleX(1);
	transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

.vb-t1-room__nm {
	display: block;
	margin-top: .7rem;
	font-family: var(--ui);
	font-size: .6875rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--bone-dim);
	transition: color .4s ease;
}

.vb-t1-room[aria-current="true"] .vb-t1-room__nm,
.vb-t1-room:hover .vb-t1-room__nm,
.vb-t1-room:focus-visible .vb-t1-room__nm {
	color: var(--bone);
}

/* ---------------- the entrance of the plate itself ---------------- */

@media (prefers-reduced-motion: no-preference) {
	.vb-t1-js .vb-t1-rise {
		opacity: 0;
		transform: translateY(22px);
	}

	.vb-t1-js .vb-t1-rise.is-in {
		opacity: 1;
		transform: none;
		transition:
			opacity 1.1s cubic-bezier(.16, 1, .3, 1),
			transform 1.15s cubic-bezier(.16, 1, .3, 1);
	}

	.vb-t1-js .vb-t1-rise--d1.is-in { transition-delay: .12s; }
	.vb-t1-js .vb-t1-rise--d2.is-in { transition-delay: .24s; }
	.vb-t1-js .vb-t1-rise--d3.is-in { transition-delay: .36s; }
}

@media (prefers-reduced-motion: reduce) {
	.vb-t1-fig img,
	.vb-t1-fig.is-on img {
		transition: none;
		transform: none;
	}

	.vb-t1-room[aria-current="true"] .vb-t1-room__bar::after {
		transition: none;
	}
}

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

@media (max-height: 640px), (max-width: 600px) {
	body.vb-t1 {
		overflow-y: auto;                 /* short screens may scroll rather than clip */
	}

	.vb-t1-frame {
		position: relative;
		min-height: 100svh;
	}

	.vb-t1-stage {
		position: fixed;
	}
}

@media (max-width: 760px) {
	.vb-t1-rooms {
		gap: .4rem;
	}

	.vb-t1-room {
		max-width: none;
	}

	.vb-t1-room__nm {
		font-size: .625rem;
		letter-spacing: .12em;
	}

	.vb-t1-meta {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

@media (max-width: 420px) {
	body.vb-t1 {
		--track-word: .28em;
	}

	/* Five labels will not fit across a phone at a readable size, so show only the
	   room you are currently on. The bars keep working as position markers, and the
	   label sits under the whole row rather than under its own marker — anchored to
	   .vb-t1-rooms, which is already position:relative — so a long name like
	   ARCHITECTURE reads at full size instead of being squeezed into a 65px slot. */
	.vb-t1-rooms {
		margin-top: 1.25rem;
		padding-bottom: 1.9rem;
		align-items: flex-start;
	}

	.vb-t1-room {
		position: static;
	}

	.vb-t1-room__nm {
		position: absolute;
		left: 0;
		top: 100%;
		margin: .8rem 0 0;
		white-space: nowrap;
		font-size: .6875rem;
		letter-spacing: .2em;
		opacity: 0;
		transition: opacity .45s cubic-bezier(.16, 1, .3, 1);
	}

	.vb-t1-room[aria-current="true"] .vb-t1-room__nm {
		opacity: 1;
		color: var(--bone);
	}

	/* Without this, hovering/tapping a marker would fade in a second label on top
	   of the active one. Only the current room ever shows. */
	.vb-t1-room:hover .vb-t1-room__nm,
	.vb-t1-room:focus-visible .vb-t1-room__nm {
		opacity: 0;
	}

	.vb-t1-room[aria-current="true"]:hover .vb-t1-room__nm,
	.vb-t1-room[aria-current="true"]:focus-visible .vb-t1-room__nm {
		opacity: 1;
	}
}

/* ---------------- no JS ----------------
   Without JS there is no overture and no mark animation, but the page must still
   read as a finished calling card rather than a broken one. */

html:not(.vb-t1-js) .vb-t1-rise {
	opacity: 1;
	transform: none;
}

html:not(.vb-t1-js) .vb-t1-plate h1 {
	font-size: clamp(.9375rem, 2.9vw, 2.125rem);
	letter-spacing: var(--track-word);
	text-transform: uppercase;
}

html:not(.vb-t1-js) .vb-t1-sr {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
}