/* Component "experiences" (session 31, specs/31 R1): the three rings, each composed differently.
   house: tall lead photo + a grid of landscape cards · water: ink band, a big "5 min", two offset columns of landscape photos ·
   coast: lead photo held on the left, rows with small photos on the right. Phones: lead full width, then a snap rail (house,
   water) or rows (coast). The rail only scrolls sideways, so a vertical swipe moves the page (moments' 10-04 lesson).
   Tokens from rmh-landing.css only. Motion: transform only, none under reduced motion. */
:is(#rmh-landing, .rmh-lc) .rmh-l-xp { --l-xp-drop: clamp(40px, 5vw, 88px); --l-xp-gap: clamp(20px, 2.2vw, 36px); }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp ul { margin: 0; padding: 0; list-style: none; }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp figure { margin: 0; }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp__frame { overflow: hidden; border-radius: 2px; background: var(--l-sand); aspect-ratio: 3 / 2; }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp__item--lead .rmh-l-xp__frame { aspect-ratio: 4 / 5; }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--l-ease); }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp__item:hover .rmh-l-xp__img { transform: scale(1.03); }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp figcaption { display: grid; gap: 6px; padding-top: 16px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp__meta {
	font: 600 12px/1.4 var(--l-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--l-taupe-deep);
}
:is(#rmh-landing, .rmh-lc) .rmh-l-xp__name {
	font-family: var(--l-serif); font-size: clamp(21px, 1.7vw, 25px); line-height: 1.2; color: var(--l-ink); text-wrap: balance;
}
:is(#rmh-landing, .rmh-lc) .rmh-l-xp__item--lead .rmh-l-xp__name { font-size: clamp(25px, 2.4vw, 34px); }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp__line { font-size: 15px; line-height: 1.55; color: var(--l-ink-soft); text-wrap: pretty; max-width: 46ch; }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp__item--lead .rmh-l-xp__line { font-size: 17px; }

/* the stat aside ("5 min · on foot to the marina") */
:is(#rmh-landing, .rmh-lc) .rmh-l-xp__stat { display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp__num { font-family: var(--l-serif); font-size: clamp(56px, 7vw, 104px); line-height: .9; color: var(--l-taupe-deep); }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp__stat span:last-child { font: 600 12px/1.5 var(--l-sans); letter-spacing: .14em; text-transform: uppercase; max-width: 16ch; }

/* phones: the rest of the photos run in a snap rail, the next card peeking */
:is(#rmh-landing, .rmh-lc) :is(.rmh-l-xp--house, .rmh-l-xp--water) .rmh-l-xp__rest {
	display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: 18px;
	overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
	margin-inline: calc(-1 * var(--l-gutter)); padding-inline: var(--l-gutter); scroll-padding-inline: var(--l-gutter);
}
:is(#rmh-landing, .rmh-lc) .rmh-l-xp__rest::-webkit-scrollbar { display: none; }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp__rest:focus-visible { outline: 2px solid var(--l-ink); outline-offset: 4px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp__rest > li { scroll-snap-align: start; min-width: 0; }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp--house .rmh-l-xp__leadwrap,
:is(#rmh-landing, .rmh-lc) .rmh-l-xp--coast .rmh-l-xp__leadwrap { margin-bottom: var(--l-xp-gap); }

/* the quiet list of what has no photo yet */
:is(#rmh-landing, .rmh-lc) .rmh-l-xp__more { margin-top: clamp(40px, 5vw, 64px); }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp__list { display: grid; margin-top: 12px; border-top: 1px solid var(--l-sand); }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp__list > li { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--l-sand); }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp__list .rmh-l-xp__name { font-size: 20px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp__note { margin-top: 28px; font-size: 14px; line-height: 1.55; color: var(--l-ink-soft); max-width: 70ch; }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp__cta { margin-top: 28px; }

/* water: on ink */
:is(#rmh-landing, .rmh-lc) .rmh-l-xp--water :is(.rmh-l-xp__name, .rmh-l-xp__stat span:last-child) { color: var(--l-white); }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp--water :is(.rmh-l-xp__line, .rmh-l__line, .rmh-l-xp__note) { color: var(--l-sand); }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp--water :is(.rmh-l-xp__meta, .rmh-l-xp__num) { color: var(--l-taupe); }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp--water .rmh-l-xp__frame { background: color-mix(in srgb, var(--l-ink) 85%, var(--l-white)); }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp--water .rmh-l-xp__list { border-color: rgba(222, 213, 204, .3); }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp--water .rmh-l-xp__list > li { border-color: rgba(222, 213, 204, .3); }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp--water .rmh-l-xp__rest:focus-visible { outline-color: var(--l-white); }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp--water .rmh-l__link { color: var(--l-white); text-decoration-color: var(--l-taupe); }

/* coast rows: small photo + text, hairlines between */
:is(#rmh-landing, .rmh-lc) .rmh-l-xp--coast .rmh-l-xp__rest { display: grid; border-top: 1px solid var(--l-sand); }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp--coast .rmh-l-xp__rest > li { padding: 18px 0; border-bottom: 1px solid var(--l-sand); }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp--coast .rmh-l-xp__rest figure { display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: center; }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp--coast .rmh-l-xp__rest .rmh-l-xp__frame { aspect-ratio: 1; }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp--coast .rmh-l-xp__rest figcaption { padding-top: 0; }
:is(#rmh-landing, .rmh-lc) .rmh-l-xp--coast .rmh-l-xp__more { margin-top: 32px; }

@media (min-width: 600px) and (max-width: 899px) {
	:is(#rmh-landing, .rmh-lc) :is(.rmh-l-xp--house, .rmh-l-xp--water) .rmh-l-xp__rest { grid-auto-columns: 42%; gap: 24px; }
}
@media (min-width: 900px) {
	:is(#rmh-landing, .rmh-lc) .rmh-l-xp__list { grid-template-columns: 1fr 1fr; column-gap: var(--l-xp-gap); }
	/* house: the lead holds the left column, the cards fill a two-column grid beside it */
	:is(#rmh-landing, .rmh-lc) .rmh-l-xp--house .rmh-l-xp__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--l-xp-gap); align-items: start; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-xp--house .rmh-l-xp__leadwrap { margin-bottom: 0; position: sticky; top: 96px; }
	:is(#rmh-landing, .rmh-lc) :is(.rmh-l-xp--house, .rmh-l-xp--water) .rmh-l-xp__rest {
		grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; gap: clamp(32px, 3.4vw, 56px) var(--l-xp-gap);
		overflow: visible; margin-inline: 0; padding-inline: 0;
	}
	:is(#rmh-landing, .rmh-lc) .rmh-l-xp--house .rmh-l-xp__rest .rmh-l-xp__frame { aspect-ratio: 4 / 3; }
	/* water: the second column drops, like boats leaving the dock one after the other */
	:is(#rmh-landing, .rmh-lc) .rmh-l-xp--water .rmh-l-xp__rest { padding-bottom: var(--l-xp-drop); }
	:is(#rmh-landing, .rmh-lc) .rmh-l-xp--water .rmh-l-xp__rest > li:nth-child(even) { transform: translateY(var(--l-xp-drop)); }
	/* coast: lead left, rows right */
	:is(#rmh-landing, .rmh-lc) .rmh-l-xp--coast .rmh-l-xp__split { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 5vw, 88px); align-items: start; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-xp--coast .rmh-l-xp__leadwrap { margin-bottom: 0; position: sticky; top: 96px; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-xp--coast .rmh-l-xp__rest figure { grid-template-columns: 200px 1fr; gap: 28px; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-xp--coast .rmh-l-xp__rest .rmh-l-xp__frame { aspect-ratio: 4 / 3; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-xp--coast .rmh-l-xp__list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	:is(#rmh-landing, .rmh-lc) .rmh-l-xp__img { transition: none; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-xp__item:hover .rmh-l-xp__img { transform: none; }
}