/*
 * Component "directory" (/explore/, navigation lane 10-19): the site's contents page, set like the index of a printed book.
 * Numbered bands; from 900 px the number, title and line hold on the left (sticky) while the entries pass on the right.
 * Entries are whole-row links on sand hairlines (serif name, one sans line, an arrow that steps right on hover); the
 * haciendas open with their four façades. Tokens: rmh-landing.css (--l-*). px only (html is 10 px). Motion: transform only.
 */
:is(#rmh-landing, .rmh-lc) .rmh-l-dir { --dir-num: clamp(56px, 40px + 3vw, 96px); --dir-gap: clamp(40px, 6vw, 96px); }

/* ---------- Head: label, H1, line, the sections as a jump list ---------- */
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__top { --l-band: clamp(48px, 7vw, 104px); padding-bottom: clamp(24px, 3vw, 40px); }
:is(#rmh-landing, .rmh-lc) h1.rmh-l-dir__title:not(#_) { max-width: 15ch; font-size: clamp(40px, 22px + 3.6vw, 80px); }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__lede { margin-top: 24px; max-width: 54ch; }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__jump { margin-top: clamp(36px, 5vw, 64px); border-top: 1px solid var(--l-sand); }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__jump ol { display: flex; flex-wrap: wrap; gap: 0 clamp(16px, 3vw, 40px); padding-top: 12px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__jump a:not(#_) {
	display: inline-flex; align-items: baseline; gap: 10px; min-height: 44px; padding-top: 12px;
	font: 600 15px/1.3 var(--l-sans); color: var(--l-ink); text-decoration: none;
}
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__jump a span { font: 400 14px/1 "Marcellus", Georgia, serif; color: var(--l-taupe-deep); }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__jump a:hover { color: var(--l-taupe-deep); text-decoration: underline; text-underline-offset: 6px; }

/* ---------- A group: number + title on the left, entries on the right ---------- */
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__group { --l-band: clamp(56px, 7vw, 112px); scroll-margin-top: 88px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__grid { display: grid; gap: 32px var(--dir-gap); }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__num { display: block; margin-bottom: 16px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__num::before {
	content: attr(data-n); display: block; font: 400 var(--dir-num)/.9 "Marcellus", Georgia, serif; color: var(--l-taupe); letter-spacing: -.02em;
}
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__intro { margin-top: 16px; max-width: 36ch; font-size: 17px; line-height: 1.6; color: var(--l-ink-soft); }
@media (min-width: 900px) {
	:is(#rmh-landing, .rmh-lc) .rmh-l-dir__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
	:is(#rmh-landing, .rmh-lc) .rmh-l-dir__side { position: sticky; top: 112px; align-self: start; }
}

/* ---------- Entries: one link per row on sand hairlines ---------- */
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__list { display: grid; border-top: 1px solid var(--l-sand); }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__list > li { border-bottom: 1px solid var(--l-sand); }
@media (min-width: 768px) {
	:is(#rmh-landing, .rmh-lc) .rmh-l-dir__body > .rmh-l-dir__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}
:is(#rmh-landing, .rmh-lc) a.rmh-l-dir__entry:not(#_) {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; min-height: 44px;
	padding: 20px 0; color: var(--l-ink); text-decoration: none;
}
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__entry::after {
	content: "→"; grid-column: 2; grid-row: 1 / span 2; font: 400 18px/1 var(--l-sans); color: var(--l-taupe-deep);
	transition: transform .25s var(--l-ease);
}
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__name { grid-column: 1; font: 400 clamp(20px, 17px + .5vw, 24px)/1.2 var(--l-serif); text-wrap: balance; transition: color .2s; }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__line { grid-column: 1; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--l-ink-soft); }
:is(#rmh-landing, .rmh-lc) a.rmh-l-dir__entry--short:not(#_) { padding: 12px 0; }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__entry--short .rmh-l-dir__name { font: 500 16px/1.4 var(--l-sans); text-wrap: pretty; }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__entry:hover .rmh-l-dir__name { color: var(--l-taupe-deep); }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__entry:hover::after { transform: translateX(4px); }

/* sub-lists under small tracked headings: two side by side from 768 px (the guides' four hubs make two rows) */
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__body > * + * { margin-top: clamp(40px, 5vw, 56px); }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__subs { display: grid; gap: 40px; }
@media (min-width: 768px) {
	:is(#rmh-landing, .rmh-lc) .rmh-l-dir__subs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 48px; }
	/* the guides' hubs differ in length (3 to 10): flowed in two columns, a short hub doesn't leave a hole beside a long one */
	:is(#rmh-landing, .rmh-lc) .rmh-l-dir__subs--many { display: block; columns: 2; column-gap: 40px; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-dir__subs--many > .rmh-l-dir__sub { padding-bottom: 48px; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-dir__subs--many li { break-inside: avoid; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-dir__subs--many .rmh-l-dir__subtitle { break-after: avoid; }
}
:is(#rmh-landing, .rmh-lc) h3.rmh-l-dir__subtitle:not(#_) {
	margin: 0 0 12px; font: 600 12px/1.4 var(--l-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--l-taupe-deep);
}

/* ---------- The four haciendas in their façades ---------- */
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__houses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
@media (min-width: 768px) {
	:is(#rmh-landing, .rmh-lc) .rmh-l-dir__houses { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
}
:is(#rmh-landing, .rmh-lc) a.rmh-l-dir__house:not(#_) { display: block; color: var(--l-ink); text-decoration: none; }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__frame {
	display: block; aspect-ratio: 119 / 193; overflow: hidden; background: var(--l-shell);
	-webkit-mask: var(--facade) center / 100% 100% no-repeat; mask: var(--facade) center / 100% 100% no-repeat;
}
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__frame :is(picture, img) { display: block; width: 100%; height: 100%; }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__frame img { object-fit: cover; transition: transform .6s var(--l-ease); }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__house:hover .rmh-l-dir__frame img { transform: scale(1.04); }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__hname { display: block; margin-top: 16px; font: 400 18px/1.2 var(--l-serif); letter-spacing: .08em; text-transform: uppercase; }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__hmeta { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--l-ink-soft); }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__house:hover .rmh-l-dir__hname { color: var(--l-taupe-deep); }

/* ---------- The fine print, a row of small links ---------- */
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__finelabel { margin-bottom: 4px; font: 600 12px/1.4 var(--l-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--l-taupe-deep); }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__fine ul { display: flex; flex-wrap: wrap; gap: 0 24px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__fine a:not(#_) {
	display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--l-ink-soft);
	text-decoration: underline; text-decoration-color: var(--l-sand); text-underline-offset: 5px;
}
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__fine a:hover { color: var(--l-ink); text-decoration-color: currentColor; }

/* ---------- Close: one line, one action ---------- */
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__close { border-top: 1px solid var(--l-sand); }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__closewrap { display: grid; gap: 28px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__closewrap .rmh-l__line { margin-top: 16px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
:is(#rmh-landing, .rmh-lc) a.rmh-l-dir__wa:not(#_) { gap: 8px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-dir__wa svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
@media (min-width: 900px) {
	:is(#rmh-landing, .rmh-lc) .rmh-l-dir__closewrap { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 64px; }
}

@media (prefers-reduced-motion: reduce) {
	:is(#rmh-landing, .rmh-lc) .rmh-l-dir__entry::after, :is(#rmh-landing, .rmh-lc) :is(.rmh-l-dir__frame img, .rmh-l-dir__name) { transition: none; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-dir__entry:hover::after, :is(#rmh-landing, .rmh-lc) .rmh-l-dir__house:hover .rmh-l-dir__frame img { transform: none; }
}