/* ------------------------------------------------------------
 * About page — "The Horizon"
 * Enqueued only on the About template via upd_enqueue_css('upd-about', …).
 *
 * The photo is a full-bleed hero: the page title and lede are set in its empty
 * sky, and its water dissolves into --upd-about-sea — the same navy the home
 * hero ramps into and the Palawan map floats on, so photo-ocean and page read
 * as one surface. Everything below is type on that sea, closing on a
 * full-screen "Unlock Paradise."
 *
 * Mobile-first: base styles target phones (the photo is portrait, so it needs
 * almost no cropping there), min-width queries scale up.
 * ------------------------------------------------------------ */

:root {
	/* The sea. Same value as the home hero's bottom ramp and the map backdrop —
	 * declared here as a named token rather than a magic hex repeated inline. */
	--upd-about-sea: #11202a;
	--upd-about-ink: #d8e4e8; /* body copy — matches .upd-hero-sub */
	--upd-about-rule: rgba(123, 196, 168, .3); /* --up-teal at low alpha */
	/* One column edge for the whole page. Deliberately in rem, not ch: `ch` is
	 * relative to each element's OWN font-size, so a 65ch h2 is a wider box than
	 * a 65ch paragraph and their left edges don't line up. */
	--upd-about-measure: 36rem;
}

/* The whole page rides on the sea, not Astra's white. */
body.upd-about-page,
body.upd-about-page .site-content,
body.upd-about-page .ast-container,
body.upd-about-page #primary,
body.upd-about-page .entry-content {
	background: var(--upd-about-sea);
}
/* Astra boxes content to its container width and adds its own padding/margins;
 * strip them so the hero can go edge to edge and the body can own its spacing.
 *
 * display:block is load-bearing, not cosmetic: .ast-container is a FLEX ROW, so
 * <article> lands as a flex item and shrink-to-fit collapses it to width:0. The
 * full-bleed breakout below resolves calc(50% - 50vw) against that 0 and drags
 * the hero half a viewport off-screen left. Mobile hides it (container stacks);
 * desktop does not. */
body.upd-about-page .site-content .ast-container { display: block; padding: 0; max-width: none; }
body.upd-about-page #primary { margin: 0; padding: 0; }
body.upd-about-page .upd-about { width: 100%; }
body.upd-about-page .entry-header,
body.upd-about-page .ast-single-post-order { display: none; } /* no duplicate page title */

/* ---------- Hero ---------- */

.upd-about__hero {
	position: relative;
	overflow: hidden;
	/* Break out of any container to the full viewport (same trick as .upd-hero). */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	min-height: 92vh;
	min-height: 92dvh; /* dvh so mobile browser chrome doesn't clip the horizon */
	display: flex;
	flex-direction: column;
	/* Content sits at the TOP — that's where the sky is. Leon is in the lower
	 * half of the frame and must not be covered by type. */
	justify-content: flex-start;
	padding: 18vh 24px 0;
	background-color: var(--upd-about-sea); /* fallback before the photo paints */
}

.upd-about__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	/* Anchor on the horizon: keeps sky above and Leon below in frame as the
	 * viewport widens and the portrait photo gets cropped top and bottom. */
	background-position: center 42%;
}

/* Legibility + the dissolve. Top: a light scrim so white type holds against the
 * bright sky. Bottom: ramp to solid sea, killing the photo's hard bottom edge so
 * the water becomes the page. */
.upd-about__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg,
		rgba(8, 16, 20, .42) 0%,
		rgba(8, 16, 20, .18) 38%,
		rgba(17, 32, 42, .35) 72%,
		rgba(17, 32, 42, .88) 92%,
		var(--upd-about-sea) 100%);
}

.upd-about__sky {
	position: relative;
	z-index: 2;
	max-width: 34ch;
	margin: 0 auto;
	text-align: center;
}

.upd-about__title {
	color: #fff;
	font-size: clamp(2rem, 9vw, 3.5rem);
	font-weight: 600;
	letter-spacing: 2px;
	margin: 0 0 .5em;
	text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
}

.upd-about__lede {
	color: #eaf2f5;
	font-size: clamp(1.05rem, 4.2vw, 1.35rem);
	line-height: 1.6;
	margin: 0;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}

/* ---------- Body — type on the sea ---------- */

.upd-about__body {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--upd-about-sea);
	padding: 8vh 24px 0;
	color: var(--upd-about-ink);
}

.upd-about__body > * {
	max-width: var(--upd-about-measure); /* a real reading measure */
	margin-left: auto;
	margin-right: auto;
}

.upd-about__body p {
	font-size: 1.0625rem;
	line-height: 1.75;
	/* `auto` on the side margins is required, not optional: the shorthand would
	 * otherwise reset the margin-left/right:auto set by `.upd-about__body > *`
	 * and knock every paragraph out of the centered column (leaving the h2s,
	 * which keep their auto, centered — a ragged left edge). */
	margin: 0 auto 1.5em;
}

.upd-about__body h2 {
	color: #fff;
	font-size: clamp(1.35rem, 5vw, 1.75rem);
	font-weight: 600;
	letter-spacing: 2px;
	margin: 3em auto 1.2em;
	padding-bottom: .6em;
	border-bottom: 1px solid var(--upd-about-rule); /* the horizon, echoed */
}

/* The closing line — the answer to the question the paragraph above just asked.
 * It sits close enough to stay attached to that sentence (a beat, not a separate
 * screen), with the tail space below carrying the pause instead. No CTA — a
 * button here would kill the line. */
.upd-about__body .upd-about__coda {
	max-width: none;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 2.25em 0 0;
	padding: 0 16px 18vh;
	color: #fff;
	/* Derived from the body size (1.5x), not a magic display value — so it stays
	 * proportional if the body scale ever changes. */
	font-size: calc(1.0625rem * 1.5);
	font-weight: 600;
	letter-spacing: 2px;
	line-height: 1.3;
	text-align: center;
}

/* ---------- Scale up ---------- */

@media (min-width: 768px) {
	.upd-about__hero { padding-top: 16vh; }
	.upd-about__sky { max-width: 40ch; }
	.upd-about__body { padding: 12vh 32px 0; }
	.upd-about__body p { font-size: 1.125rem; }
	/* still 1.5x the (now larger) body size */
	.upd-about__body .upd-about__coda { font-size: calc(1.125rem * 1.5); letter-spacing: 3px; }
}

@media (min-width: 1200px) {
	/* On wide screens the portrait photo is cropped hard top and bottom; bias the
	 * frame slightly lower so the horizon and Leon both stay in view. */
	.upd-about__photo { background-position: center 48%; }
	.upd-about__hero { padding-top: 15vh; }
}