/* Component "story" (the family story, components/story.php): text beside one photo in Del Mar's façade, the house the story
   starts in. Phones: the title, the photo (narrower than the row), then the text. From 900 px: two columns, the façade on the
   left at 5/12, the copy on a 60ch measure. Variants: open (the page's H1 and first screen), band (the home), statement
   (who has stayed, on ink: the line set large in the serif). Tokens only; px only (rem = 10 px here). */

:is(#rmh-landing, .rmh-lc) .rmh-l-story__grid { display: grid; grid-template-areas: "head" "figure" "body"; gap: 32px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-story__head { grid-area: head; }
:is(#rmh-landing, .rmh-lc) .rmh-l-story__body { grid-area: body; max-width: 60ch; }
:is(#rmh-landing, .rmh-lc) .rmh-l-story__figure { grid-area: figure; }
/* phones: the frame narrower than the row (a full-width portal would fill two screens); the caption keeps the row's width */
:is(#rmh-landing, .rmh-lc) .rmh-l-story__frame { width: min(78%, 360px); margin-inline: auto; aspect-ratio: 119 / 193; overflow: hidden; background: var(--l-sand); }
:is(#rmh-landing, .rmh-lc) .rmh-l-story__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--l-ease); }
:is(#rmh-landing, .rmh-lc) .rmh-l-story__figure:hover .rmh-l-story__img { transform: scale(1.04); }
:is(#rmh-landing, .rmh-lc) .rmh-l-story__figure .rmh-l__caption { text-align: center; }
:is(#rmh-landing, .rmh-lc) .rmh-l-story__head .rmh-l__label { margin-bottom: 16px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-story__text { display: grid; gap: 20px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-story__text p { font-size: 18px; line-height: 1.7; color: var(--l-ink-soft); text-wrap: pretty; }
:is(#rmh-landing, .rmh-lc) .rmh-l-story__text p.rmh-l-story__lede {
	font: 400 clamp(22px, 17px + 1vw, 28px)/1.4 var(--l-serif); color: var(--l-ink); text-wrap: balance;
}
:is(#rmh-landing, .rmh-lc) .rmh-l-story .rmh-l__more { margin-top: 28px; }

/* open: the page's first screen. The H1 is the display line; a hairline under it sets the story apart from the title. */
:is(#rmh-landing, .rmh-lc) .rmh-l-story--open { padding-block: clamp(48px, 7vw, 112px) var(--l-band); }
:is(#rmh-landing, .rmh-lc) h1.rmh-l-story__h1:not(#_) { font-size: clamp(40px, 22px + 4vw, 80px); line-height: 1.02; }
:is(#rmh-landing, .rmh-lc) .rmh-l-story--open .rmh-l-story__body { padding-top: 28px; border-top: 1px solid var(--l-sand); }

/* statement: who has stayed, on ink. The kicker is the section's h2 (the brand skin styles h2s: hold it to the label's type). */
:is(#rmh-landing, .rmh-lc) h2.rmh-l-story__kicker:not(#_) {
	font: 600 12px/1.4 var(--l-sans) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--l-taupe); margin: 0;
}
:is(#rmh-landing, .rmh-lc) .rmh-l-story__big {
	font: 400 clamp(26px, 16px + 1.9vw, 44px)/1.25 var(--l-serif); letter-spacing: -.005em; text-wrap: balance; color: var(--l-white);
}
:is(#rmh-landing, .rmh-lc) .rmh-l-story__coda {
	margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .18);
	font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .82);
}
:is(#rmh-landing, .rmh-lc) .rmh-l-story--statement .rmh-l-story__frame { background: rgba(255, 255, 255, .08); }
:is(#rmh-landing, .rmh-lc) .rmh-l-story--statement .rmh-l__caption { color: rgba(255, 255, 255, .62); }

/* the home's band on phones: a smaller portal, so three lines don't cost a whole screen of photo */
:is(#rmh-landing, .rmh-lc) .rmh-l-story--band .rmh-l-story__frame { width: min(56%, 240px); }

@media (min-width: 900px) {
	/* the photo spans every row; the head and the text sit together, centred on its height */
	:is(#rmh-landing, .rmh-lc) .rmh-l-story__grid {
		grid-template-columns: 5fr 7fr; grid-template-rows: 1fr auto auto 1fr;
		grid-template-areas: "figure ." "figure head" "figure body" "figure .";
		column-gap: clamp(48px, 7vw, 112px); row-gap: 28px; align-items: start;
	}
	:is(#rmh-landing, .rmh-lc) .rmh-l-story__figure { width: 100%; max-width: 440px; justify-self: end; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-story__frame { width: 100%; }
	/* the statement reads text first, the photo on the right, so the page alternates */
	:is(#rmh-landing, .rmh-lc) .rmh-l-story--statement .rmh-l-story__grid { grid-template-columns: 7fr 5fr; grid-template-areas: ". figure" "head figure" "body figure" ". figure"; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-story--statement .rmh-l-story__figure { justify-self: start; }
	/* the home's band is quieter: a smaller photo beside three lines */
	:is(#rmh-landing, .rmh-lc) .rmh-l-story--band .rmh-l-story__grid { grid-template-columns: 4fr 7fr; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-story--band .rmh-l-story__figure { max-width: 300px; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-story--band .rmh-l-story__frame { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	:is(#rmh-landing, .rmh-lc) .rmh-l-story__img { transition: none; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-story__figure:hover .rmh-l-story__img { transform: none; }
}