/* =============================================================================
   home.css: the homepage, seven chapters (section patterns 1 to 7)
   -----------------------------------------------------------------------------
   The order and scroll devices follow the approved scroll score (lychee/copy/brief.md):
   1 hero (scrub)  2 the man (reveal)  3 the line (pan, components.css)
   4 two ambitions (pin)  5 ruin to landmark (count)  6 the work (units, lists)
   7 the ending (pinned press band, footer.css)
   ============================================================================= */

/* ---- 1 Hero: the scroll film with the night card (component 7) ------------- */
/* The hero tucks under the sticky header so the card sits on the first screen. */
.hero { margin-top: calc(-1 * var(--header-h)); }
.hero .sc-stage__poster { object-position: 50% 60%; }
.hero-card {
	position: absolute;
	bottom: clamp(24px, 6vh, 72px);
	left: calc(var(--gutter) + var(--line-gutter));
	z-index: 20;
	display: grid;
	width: min(560px, 42vw);
	padding: var(--s-5);
	background: var(--night);
	color: var(--paper);
}
/* The three beats share one cell and cross over as the film scrubs; site.js hides a beat at zero opacity */
.hero-card > .beat { grid-area: 1/1; align-self: end; }
.hero-card .beat { transition: visibility 0s; }
.hero-card .beat.is-off { visibility: hidden; }
.hero-card .label { margin-bottom: var(--s-3); color: var(--night-grey); }
.hero-card h1 {
	font: 700 var(--step-title)/.95 var(--display);
	font-optical-sizing: none;
	font-variation-settings: "opsz" 6;
	letter-spacing: -.03em;
}
.hero-card h2 {
	margin-bottom: var(--s-2);
	font: italic 500 var(--step-lede)/1.15 var(--display);
	font-optical-sizing: none;
	font-variation-settings: "opsz" 6;
	letter-spacing: -.01em;
}
.hero-card p { font-size: var(--step-0); }
@media (max-width: 860px) {
	.hero-card { right: var(--gutter); bottom: var(--s-5); left: var(--gutter); width: auto; }
}
/* Reduced motion: the three beats stacked, all visible */
@media (prefers-reduced-motion: reduce) {
	.hero-card > .beat { grid-area: auto; opacity: 1 !important; transform: none !important; visibility: visible; }
	.hero-card > .beat + .beat { margin-top: var(--s-4); }
}

/* ---- 2 The man: portrait 4, text 8 ----------------------------------------- */
.man { align-items: center; }
.man figure { margin: 0; }
.man img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.man .title { max-width: none; }
@media (min-width: 700px) and (max-width: 899px) {
	.man { grid-template-columns: 1fr; }
	.man figure { max-width: 480px; }
}

/* ---- 4 Two ambitions: pinned on seamless; the firms arrive one by one ------ */
.ambitions [data-sc-stage] {
	display: grid;
	align-content: center;
	padding: calc(var(--header-h) + var(--s-5)) calc(var(--gutter) + var(--line-gutter)) var(--s-6);
	background: var(--seamless);
}
.ambitions .split-6-6 { grid-template-columns: 1fr; gap: var(--s-5); align-items: center; }   /* intro and firms, then his words */
.ambitions .intro { margin-top: var(--s-4); }
.firm-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-4); margin-top: var(--s-5); }
.firm-list li { display: grid; gap: 2px; align-content: start; padding-block: var(--s-2); }
.firm-list b {
	font: 700 var(--step-title)/1 var(--display);
	font-optical-sizing: none;
	font-variation-settings: "opsz" 6;
	letter-spacing: -.02em;
}
.ambitions blockquote {
	max-width: 30ch;
	font: italic 500 var(--step-lede)/1.3 var(--display);
	font-optical-sizing: none;
	font-variation-settings: "opsz" 6;
}
@media (min-width: 700px) {
	.firm-list { gap: var(--s-3) var(--s-5); }
	.ambitions figure, .ambitions .wp-block-quote { margin-left: 50%; }   /* his words below, on the right */
}
@media (max-width: 699px) {
	.ambitions [data-sc-stage] { align-content: start; }
	.firm-list b { font-size: var(--step-lede); line-height: 1.1; }
}

/* ---- 5 Ruin to landmark: figures leading, text and quote, then the pier --- */
.ruin .split-5-7 { align-items: start; }

/* ---- 6 The work: units 7 + 5 (components.css), then the titled lists ------- */

/* ---- 7 The ending: see footer.css (the press band, pinned on Home) --------- */