/* =========================================================
   ALSTON — PAGE HERO (shared by every inner page)

   White page, black type, gold as jewellery only.
   Every rule is scoped under .alston-phero with two classes
   so page stylesheets (about.css sets `.alston-about h1`,
   `.alston-about span` etc.) can never out-rank it.

   Motion is pure CSS and always ends visible. There is no
   opacity gate waiting on JavaScript.
========================================================= */

.alston-phero {
	position: relative;
	width: 100%;
	padding: calc(var(--alston-bar-h, 78px) + clamp(44px, 6vw, 96px)) 20px clamp(64px, 8vw, 120px);
	background: var(--paper);
	color: var(--text);
	overflow: hidden;
}

.alston-phero.has-media {
	padding-bottom: 0;
}

.alston-phero *,
.alston-phero *::before,
.alston-phero *::after {
	box-sizing: border-box;
}

.alston-phero .alston-phero__inner {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
}

/* ---------------------------------------------------------
   BREADCRUMB
--------------------------------------------------------- */

.alston-phero .alston-phero__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 clamp(36px, 5vw, 64px);
	font-family: var(--font-body);
	font-size: var(--fs-micro);
	font-weight: var(--fw-regular);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text-faint);
}

.alston-phero .alston-phero__crumbs a {
	color: var(--text-mute);
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

.alston-phero .alston-phero__crumbs a:hover {
	color: var(--ink);
}

.alston-phero .alston-phero__crumbs span[aria-current] {
	color: var(--ink);
}

.alston-phero .alston-phero__sep {
	display: inline-block;
	width: 18px;
	height: 1px;
	background: var(--line-strong);
}

/* ---------------------------------------------------------
   TITLE ROW
--------------------------------------------------------- */

.alston-phero .alston-phero__grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: clamp(32px, 6vw, 80px);
	align-items: end;
}

.alston-phero .alston-phero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
	font-family: var(--font-body);
	font-size: var(--fs-micro);
	font-weight: var(--fw-regular);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--text-mute);
}

.alston-phero .alston-phero__eyebrow::before {
	content: "";
	width: 24px;
	height: 1px;
	background: var(--gold);
	flex-shrink: 0;
}

.alston-phero .alston-phero__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-hero);
	font-weight: var(--fw-light);
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--ink-2);
}

.alston-phero .alston-phero__title span {
	font-family: inherit;
}

.alston-phero .alston-phero__w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: .12em;
	margin-bottom: -.12em;
}

.alston-phero .alston-phero__w > span {
	display: inline-block;
	animation: alston-phero-rise 1.15s var(--ease-out) both;
	animation-delay: calc(.12s + var(--i, 0) * .06s);
}

.alston-phero .alston-phero__lede {
	margin: 0;
	max-width: 440px;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	line-height: 1.7;
	color: var(--text-mute);
}

.alston-phero .alston-phero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.alston-phero .alston-phero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 50px;
	padding: 0 22px;
	border: 1px solid var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-ui);
	font-weight: var(--fw-regular);
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.alston-phero .alston-phero__btn--solid {
	background: var(--ink);
	color: var(--paper);
}

.alston-phero .alston-phero__btn--solid:hover {
	background: var(--paper);
	color: var(--ink);
}

.alston-phero .alston-phero__btn--line {
	background: transparent;
	color: var(--ink);
}

.alston-phero .alston-phero__btn--line:hover {
	border-color: var(--gold);
	color: var(--ink);
}

/* ---------------------------------------------------------
   FACTS ROW
--------------------------------------------------------- */

.alston-phero .alston-phero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 0;
	margin: clamp(40px, 5vw, 64px) 0 0;
	padding: 22px 0 0;
	list-style: none;
	border-top: 1px solid var(--line-solid);
}

.alston-phero .alston-phero__meta li {
	position: relative;
	padding: 0 28px;
	font-family: var(--font-body);
	font-size: var(--fs-micro);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--text-mute);
}

.alston-phero .alston-phero__meta li:first-child {
	padding-left: 0;
}

.alston-phero .alston-phero__meta li + li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 4px;
	height: 4px;
	margin: -2px 0 0 -2px;
	border-radius: 50%;
	background: var(--gold);
}

/* ---------------------------------------------------------
   PHOTO
   Frame unveils upward, photo settles from a slight zoom,
   then drifts gently on scroll (page-hero.js, optional).
--------------------------------------------------------- */

.alston-phero .alston-phero__media {
	width: 100%;
	max-width: 1440px;
	margin: clamp(48px, 6vw, 88px) auto 0;
}

.alston-phero .alston-phero__frame {
	position: relative;
	height: clamp(280px, 40vw, 600px);
	overflow: hidden;
	background: var(--line-solid);
	animation: alston-phero-unveil 1.3s var(--ease-out) .3s both;
}

.alston-phero .alston-phero__zoom {
	position: absolute;
	inset: 0;
	animation: alston-phero-settle 2s var(--ease-out) .3s both;
}

.alston-phero .alston-phero__img {
	position: absolute;
	left: 0;
	top: -6%;
	width: 100%;
	max-width: none;
	height: 112%;
	object-fit: cover;
	object-position: var(--pos, center);
	display: block;
}

.alston-phero .alston-phero__caption {
	margin: 14px 0 0;
	font-family: var(--font-body);
	font-size: var(--fs-label);
	color: var(--text-faint);
}

.alston-phero .alston-phero__fade {
	animation: alston-phero-fade 1s var(--ease-out) .55s both;
}

/* ---------------------------------------------------------
   KEYFRAMES
--------------------------------------------------------- */

@keyframes alston-phero-rise {
	from { transform: translateY(108%); }
	to   { transform: translateY(0); }
}

@keyframes alston-phero-fade {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@keyframes alston-phero-unveil {
	from { clip-path: inset(100% 0 0 0); }
	to   { clip-path: inset(0 0 0 0); }
}

@keyframes alston-phero-settle {
	from { transform: scale(1.1); }
	to   { transform: scale(1); }
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 1080px) {

	.alston-phero .alston-phero__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.alston-phero .alston-phero__lede {
		max-width: 560px;
	}
}

@media (max-width: 680px) {

	.alston-phero {
		padding-top: calc(var(--alston-bar-h, 78px) + 36px);
		padding-bottom: 56px;
	}

	.alston-phero .alston-phero__crumbs {
		margin-bottom: 28px;
	}

	.alston-phero .alston-phero__frame {
		height: 62vw;
		min-height: 240px;
	}

	.alston-phero .alston-phero__meta {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 16px;
	}

	.alston-phero .alston-phero__meta li {
		padding: 0;
	}

	.alston-phero .alston-phero__meta li + li::before {
		display: none;
	}

	.alston-phero .alston-phero__actions {
		flex-direction: column;
		align-items: stretch;
	}
}

@media (prefers-reduced-motion: reduce) {

	.alston-phero .alston-phero__w > span,
	.alston-phero .alston-phero__fade,
	.alston-phero .alston-phero__frame,
	.alston-phero .alston-phero__zoom {
		animation: none;
	}
}