/*
 * Copper Lantern 6.19 — shared hero contract.
 *
 * All editorial, archive, directory, destination/place, and live-content heroes
 * resolve to these tokens. The cinematic home hero intentionally remains its own
 * art-directed variant and is not restyled here.
 */
:root {
	--clt-hero-shell: min(1420px, calc(100% - 64px));
	--clt-hero-copy-width: 820px;
	--clt-hero-lead-width: 650px;
	--clt-hero-height: 560px;
	--clt-hero-pad-block: clamp(76px, 7vw, 108px);
	--clt-hero-title: clamp(62px, 6.25vw, 104px);
	--clt-hero-title-line: .86;
	--clt-hero-lead: clamp(17px, 1.15vw, 19px);
}

/* Shared physical frame. */
.clt-site :is(
	.clt-hero:not(.clt-home-cinema),
	.clt-page-hero,
	.clt-archive-hero,
	.clte-hero,
	.cltp-hero,
	.clt-team-hero,
	.clt-advisor-hero
) {
	min-height: var(--clt-hero-height);
}

.clt-site :is(
	.clt-hero:not(.clt-home-cinema) .clt-hero-copy,
	.clt-page-hero > .clt-narrow,
	.clt-archive-hero > .clt-narrow,
	.clte-hero .clte-hero-copy,
	.cltp-hero .cltp-hero-copy
) {
	width: var(--clt-hero-shell);
	max-width: none;
	margin-inline: auto;
	padding-block: var(--clt-hero-pad-block);
	text-align: left;
}

/* Copy rhythm shared by the hero families. */
.clt-site :is(
	.clt-hero:not(.clt-home-cinema) .clt-hero-copy,
	.clt-page-hero > .clt-narrow,
	.clt-archive-hero > .clt-narrow,
	.clte-hero .clte-hero-copy,
	.cltp-hero .cltp-hero-copy,
	.clt-team-hero,
	.clt-advisor-hero-copy
) :is(.clt-eyebrow, .clte-eyebrow, .cltp-kicker) {
	display: block;
	width: auto;
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--clt-copper-light, #d6a672);
	font-family: "Cinzel CLT", "Cinzel", Georgia, serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .18em;
	line-height: 1.45;
	text-align: left;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .72);
	text-transform: uppercase;
}

.clt-site :is(
	.clt-hero:not(.clt-home-cinema) .clt-hero-copy > h1,
	.clt-page-hero > .clt-narrow > h1,
	.clt-archive-hero > .clt-narrow > h1,
	.clte-hero-copy > h1,
	.cltp-hero-copy > h1,
	.clt-team-hero h1,
	.clt-advisor-hero-copy h1
) {
	max-width: var(--clt-hero-copy-width);
	margin: 0 0 26px;
	color: var(--clt-cream, #faf6f0);
	font-family: var(--clt-script-font, "RastantyCortez", Georgia, serif);
	font-size: var(--clt-hero-title);
	font-weight: 400;
	letter-spacing: -.025em;
	line-height: var(--clt-hero-title-line);
	text-align: left;
	text-transform: none;
	text-wrap: balance;
}

.clt-site :is(
	.clt-hero:not(.clt-home-cinema) .clt-hero-copy,
	.clt-page-hero > .clt-narrow,
	.clt-archive-hero > .clt-narrow,
	.clte-hero .clte-hero-copy,
	.cltp-hero .cltp-hero-copy
) > p:not(.clt-eyebrow, .clte-eyebrow, .cltp-kicker),
.clt-site .clt-our-story-hero .clt-story-hero-intro {
	max-width: var(--clt-hero-lead-width);
	margin: 0;
	color: #fff;
	font-family: "Quicksand", Arial, sans-serif;
	font-size: var(--clt-hero-lead);
	line-height: 1.65;
	text-align: left;
	text-shadow: 0 2px 9px rgba(0, 0, 0, .72);
}

/* Text-only and split-layout heroes use the same horizontal datum. */
.clt-site .clt-team-hero {
	display: flex;
	align-items: center;
	padding-block: 0;
}
.clt-site .clt-team-hero-grid,
.clt-site .clt-advisor-hero-grid {
	width: var(--clt-hero-shell);
	max-width: none;
	margin-inline: auto;
}
.clt-site .clt-team-hero h1,
.clt-site .clt-advisor-hero-copy h1 { max-width: 680px; }

/* Plugin-rendered collection and detail pages inherit the same contract. */
.clt-site .clt-live :is(.clt-detail-hero, .clt-collection-hero) {
	display: flex;
	min-height: var(--clt-hero-height);
	align-items: center;
	padding: var(--clt-hero-pad-block) max(32px, calc((100vw - 1420px) / 2));
	text-align: left;
}
.clt-site .clt-live :is(.clt-detail-hero, .clt-collection-hero) > div {
	width: min(var(--clt-hero-copy-width), 100%);
	max-width: var(--clt-hero-copy-width);
}
.clt-site .clt-live :is(.clt-detail-hero, .clt-collection-hero) h1 {
	max-width: var(--clt-hero-copy-width);
	margin: 14px 0 26px;
	font-family: var(--clt-display, "RastantyCortez", Georgia, serif);
	font-size: var(--clt-hero-title);
	font-weight: 400;
	letter-spacing: -.025em;
	line-height: var(--clt-hero-title-line);
	text-align: left;
	text-transform: none;
	text-wrap: balance;
}
.clt-site .clt-live :is(.clt-detail-hero, .clt-collection-hero) .clt-eyebrow {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--clt-copper-light, #d6a672) !important;
	font: 500 11px/1.45 "Cinzel CLT", "Cinzel", Georgia, serif !important;
	letter-spacing: .18em;
	text-align: left;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .72);
	text-transform: uppercase;
}
.clt-site .clt-live :is(.clt-detail-hero, .clt-collection-hero) > div > p:last-of-type {
	max-width: var(--clt-hero-lead-width);
	margin: 0;
	color: #fff;
	font: var(--clt-hero-lead)/1.65 "Quicksand", Arial, sans-serif;
	text-shadow: 0 2px 9px rgba(0, 0, 0, .72);
}

/* Ships & Fleets uses the ungraded source photograph. */
.clt-site .clt-live .clt-fleet-collection-hero {
	background-image: var(--clt-collection-image);
}

/* Windows 125% scaling commonly presents this CSS-width range. */
@media (min-width: 1101px) and (max-width: 1600px) {
	:root {
		--clt-hero-shell: min(1150px, calc(100% - 96px));
		--clt-hero-copy-width: 656px;
		--clt-hero-lead-width: 520px;
		--clt-hero-height: 448px;
		--clt-hero-pad-block: clamp(68px, 6.5vw, 96px);
		--clt-hero-title: clamp(58px, 5.4vw, 86px);
	}
	.clt-site .clt-live :is(.clt-detail-hero, .clt-collection-hero) {
		padding-inline: max(48px, calc((100vw - 1150px) / 2));
	}
}

@media (max-width: 1100px) {
	:root {
		--clt-hero-shell: min(100% - 48px, 1150px);
		--clt-hero-height: 500px;
		--clt-hero-title: clamp(56px, 8.5vw, 82px);
	}
}

@media (max-width: 760px) {
	:root {
		--clt-hero-shell: min(100% - 40px, 1150px);
		--clt-hero-copy-width: 100%;
		--clt-hero-lead-width: 100%;
		--clt-hero-height: 500px;
		--clt-hero-pad-block: 68px;
		--clt-hero-title: clamp(53px, 15.5vw, 70px);
		--clt-hero-lead: 16px;
	}
	.clt-site .clt-live :is(.clt-detail-hero, .clt-collection-hero) {
		padding-inline: 20px;
	}
	.clt-site .clt-team-hero-grid,
	.clt-site .clt-advisor-hero-grid { width: var(--clt-hero-shell); }
}

@media (max-width: 540px) {
	:root { --clt-hero-shell: calc(100% - 28px); }
}