/*
 * Esmeralda — Home.
 *
 * TWO RULES BUILT IN FROM THE FIRST LINE.
 *
 * Her photographs are heroes. No tint, no scrim, no wash, no gradient over
 * any of them. Every word sits on its own ground.
 *
 * And every heading carries a capital on every word, the little ones too.
 */

/* ── The stage ───────────────────────────────────────────────────────────
 *
 * Her photographs are close to square. A wide shallow hero cuts the heads
 * off them, so every one is shown whole inside its own frame and never
 * cropped. The ground behind is Esmeralda's purple, which is a ground rather
 * than a wash over her picture.
 * ─────────────────────────────────────────────────────────────────────── */

.stage {
	background: var(--purple-deep);
	padding: clamp(14px, 3vw, 30px);
}

.stage__frame {
	position: relative;
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

@media (min-width: 760px) {
	.stage__frame { aspect-ratio: 16 / 10; }
}

.stage__her {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity 1.8s ease;
}

.stage__her.is-here { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.stage__her { transition: none; }
}

/* ── Her words, on their own ground ──────────────────────────────────────── */

.say {
	background: var(--purple-deep);
	color: var(--white);
	text-align: center;
	padding: clamp(3rem, 9vh, 6rem) clamp(18px, 6vw, 72px) clamp(3.4rem, 10vh, 6.5rem);
}

.say__eyebrow {
	font-family: var(--font-head);
	font-size: clamp(.7rem, 2.6vw, .82rem);
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--lilac);
	margin: 0;
}

.say__mark {
	font-family: var(--font-head);
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: .14em;
	text-indent: .14em;
	font-size: clamp(2.7rem, 12vw, 7.5rem);
	line-height: .92;
	margin: .5em 0 0;
}

.say__line1 {
	font-family: var(--font-head);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: clamp(1.25rem, 5.4vw, 2rem);
	line-height: 1.18;
	max-width: 20ch;
	margin: 1.1em auto 0;
}

.say__line2 {
	font-family: var(--font-warm);
	font-style: italic;
	font-size: clamp(1.05rem, 4.2vw, 1.5rem);
	line-height: 1.25;
	color: var(--lilac);
	max-width: 28ch;
	margin: .4em auto 0;
}

/* ── The two doorways ────────────────────────────────────────────────────── */

.ways {
	display: grid;
	grid-template-columns: 1fr;
	background: var(--purple-deep);
	gap: 1px;
}

@media (min-width: 820px) {
	.ways { grid-template-columns: 1fr 1fr; }
}

.way {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(150px, 34vw, 210px);
	padding: clamp(2rem, 7vw, 3rem) clamp(20px, 6vw, 3rem);
	text-align: center;
	color: var(--white);
	background: var(--purple);
	transition: background .5s ease;
}

.way::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: clamp(18px, 4vw, 28px);
	width: 0;
	height: 1px;
	background: var(--lilac);
	transform: translateX(-50%);
	transition: width .5s ease;
}

.way:hover,
.way:focus-visible { background: #46177A; }
.way:hover::after,
.way:focus-visible::after { width: clamp(40px, 14vw, 72px); }

@media (prefers-reduced-motion: reduce) {
	.way, .way::after { transition: none; }
}

.way__label { display: block; }

.way--pro .way__label {
	font-family: var(--font-head);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .17em;
	font-size: clamp(.95rem, 3.8vw, 1.15rem);
	line-height: 1.35;
}

.way--esm .way__label {
	font-family: var(--font-warm);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.6rem, 6.6vw, 2.1rem);
	line-height: 1.1;
}

.way__sub {
	display: block;
	margin-top: .7em;
	font-family: var(--font-util);
	font-size: clamp(.82rem, 3.3vw, .88rem);
	line-height: 1.5;
	color: rgba(255, 255, 255, .8);
}

/* ── Why Esmeralda Exists ────────────────────────────────────────────────── */

.truth {
	background: var(--white);
	text-align: center;
	padding: clamp(4rem, 12vh, 8rem) clamp(18px, 6vw, 72px);
	max-width: 920px;
	margin-inline: auto;
}

.truth__eyebrow {
	font-family: var(--font-head);
	font-size: clamp(.68rem, 2.5vw, .74rem);
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--purple);
	margin: 0;
}

.truth__statement {
	font-family: var(--font-head);
	font-weight: 300;
	font-size: clamp(1.5rem, 7vw, 2.6rem);
	line-height: 1.25;
	color: var(--purple);
	margin: .7em 0 0;
}

.truth__pair {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.2rem;
	margin-top: clamp(2.6rem, 8vw, 3.4rem);
	text-align: left;
}

@media (min-width: 720px) {
	.truth__pair { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

.truth__col h2 {
	font-family: var(--font-head);
	font-weight: 400;
	font-size: clamp(.76rem, 3vw, .8rem);
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--purple);
	margin: 0 0 .7em;
}

.truth__col p {
	font-family: var(--font-util);
	font-size: clamp(.94rem, 3.6vw, .99rem);
	line-height: 1.65;
	color: var(--body-muted);
	margin: 0;
}


/* ── The entrance ────────────────────────────────────────────────────────── */

.entrance { background: var(--purple-deep); }

.entrance .hero {
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: clamp(40px, 8vh, 90px) clamp(20px, 6vw, 72px);
	color: var(--white);
}

.entrance .eyebrow {
	font-family: var(--font-head);
	font-size: clamp(.68rem, 2.5vw, .8rem);
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--lilac);
	margin: 0 0 1.6em;
}

.entrance .head {
	font-family: var(--font-head);
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: .05em;
	line-height: 1.06;
	font-size: clamp(1.9rem, 8.4vw, 4.6rem);
	max-width: 15ch;
	margin: 0 auto;
	color: var(--white);
}

.wordmark-big {
	font-family: var(--font-head);
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: .16em;
	text-indent: .16em;
	font-size: clamp(2.8rem, 14vw, 8rem);
	line-height: .92;
	color: var(--white);
	margin: 0;
}

.hero__under {
	font-family: var(--font-warm);
	font-style: italic;
	font-size: clamp(1.05rem, 4.2vw, 1.5rem);
	line-height: 1.3;
	color: var(--lilac);
	max-width: 30ch;
	margin: 1.5em auto 0;
}

/* The chrome waits until she is through the entrance. */