/*
 * Component "guest_book" (/reviews/): "the guest book". Editorial, warm, unhurried: a title page with the score set huge,
 * a ledger of the four haciendas (façade frame · scores · one pinned line as a hanging-quote pull quote), a wall of the
 * guests' own words, then where to read them. Tokens only (rmh-landing.css), px only (rem = 10 px), gold = stars only.
 * Motion: transform only, none under reduced motion.
 */

/* ---------- Title page ---------- */
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-hero { padding-block: clamp(48px, 7vw, 112px) clamp(56px, 7vw, 120px); }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-hero__grid { display: grid; gap: clamp(36px, 5vw, 72px); align-items: end; }
:is(#rmh-landing, .rmh-lc) h1.rmh-l-gb-hero__title:not(#_) { font-size: clamp(36px, 20px + 3.4vw, 68px); max-width: 14ch; }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-hero .rmh-l__line { margin-top: 24px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-hero__more { margin-top: 12px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-score { padding-top: 28px; border-top: 1px solid var(--l-sand); }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-score__num {
	font: 400 clamp(112px, 64px + 11vw, 232px)/.82 var(--l-serif); letter-spacing: -.03em; color: var(--l-ink);
}
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-score__num--serif { font-family: "Marcellus", Georgia, serif; }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-score .rmh-l-gb-stars { display: block; margin-top: 18px; font-size: clamp(22px, 16px + 1vw, 30px); letter-spacing: .14em; }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-score__src {
	display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font: 600 16px/1.4 var(--l-sans); color: var(--l-ink);
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: var(--l-taupe-deep);
}
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-score__src:hover { color: var(--l-taupe-deep); }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-score__more { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px; font-size: 15px; color: var(--l-ink-soft); }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-score__more b { font-weight: 600; color: var(--l-ink); }
@media (min-width: 900px) {
	:is(#rmh-landing, .rmh-lc) .rmh-l-gb-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
	:is(#rmh-landing, .rmh-lc) .rmh-l-gb-score { padding: 0 0 0 clamp(36px, 4vw, 64px); border-top: 0; border-left: 1px solid var(--l-sand); }
}

/* ---------- Stars: gold for the stars only ---------- */
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-stars { color: var(--l-gold); letter-spacing: .1em; line-height: 1; white-space: nowrap; }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-stars__off { color: var(--l-sand); }

/* ---------- The ledger: four haciendas, south to north ---------- */
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-ledger { border-top: 1px solid var(--l-sand); }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-row {
	display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px 20px; align-items: start;
	padding-block: clamp(28px, 3.4vw, 48px); border-bottom: 1px solid var(--l-sand);
}
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-row__frame { aspect-ratio: 119 / 193; overflow: hidden; background: var(--l-sand); }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-row__frame img { width: 100%; height: 100%; object-fit: cover; }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-row__head { align-self: center; }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-row__num { display: block; margin-bottom: 10px; font: 400 14px/1 var(--l-serif); letter-spacing: .08em; color: var(--l-taupe-deep); }
:is(#rmh-landing, .rmh-lc) h3.rmh-l-gb-row__name:not(#_) { font-size: clamp(25px, 16px + 1.3vw, 36px); line-height: 1.1; }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-row__name a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; transition: color .2s; } /* tap area (§6.1) */
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-row__name a:hover { color: var(--l-taupe-deep); }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-row__scores { display: grid; gap: 2px; margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--l-ink-soft); }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-row__scores b { font-weight: 600; color: var(--l-ink); }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-row__words { grid-column: 1 / -1; }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-row__words .rmh-l__link { margin-top: 10px; }

/* The pull quote: the guest's line in the title serif, the opening mark hanging in the margin. */
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-pull blockquote { position: relative; padding-left: 30px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-pull blockquote p {
	font: 400 clamp(19px, 12px + 1.3vw, 31px)/1.34 var(--l-serif); color: var(--l-ink); text-wrap: pretty; max-width: 34ch;
}
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-pull blockquote::before {
	content: "\201C"; position: absolute; left: 0; top: -6px; font: 400 52px/1 var(--l-serif); color: var(--l-taupe-deep);
}
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-pull figcaption { margin-top: 14px; padding-left: 30px; font-size: 14px; color: var(--l-ink-soft); }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb__who { font-weight: 600; color: var(--l-ink); }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-row__words .rmh-l__link { margin-left: 30px; }

@media (min-width: 900px) {
	:is(#rmh-landing, .rmh-lc) .rmh-l-gb-row { grid-template-columns: 148px minmax(0, .78fr) minmax(0, 1.6fr); column-gap: clamp(32px, 3.6vw, 56px); align-items: center; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-gb-row__words { grid-column: auto; }
	/* the opening mark hangs into the gap, so the words line up with the house name's column edge */
	:is(#rmh-landing, .rmh-lc) .rmh-l-gb-pull blockquote { padding-left: 0; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-gb-pull blockquote::before { left: -.5em; top: -.1em; font-size: clamp(60px, 40px + 2vw, 80px); }
	:is(#rmh-landing, .rmh-lc) .rmh-l-gb-pull figcaption, :is(#rmh-landing, .rmh-lc) .rmh-l-gb-row__words .rmh-l__link { padding-left: 0; margin-left: 0; }
}
@media (min-width: 1280px) {
	:is(#rmh-landing, .rmh-lc) .rmh-l-gb-row { grid-template-columns: 172px minmax(0, .72fr) minmax(0, 1.6fr); }
}

/* ---------- The wall: the guests' own words, house by house ---------- */
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-chips ul { display: flex; flex-wrap: wrap; gap: 10px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-chip {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--l-sand); border-radius: 999px;
	background: var(--l-white); color: var(--l-ink); font: 600 15px/1.2 var(--l-sans); text-decoration: none; cursor: pointer;
	transition: border-color .2s, background-color .2s, color .2s;
}
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-chip:hover { border-color: var(--l-ink); }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-chip:is([aria-pressed="true"], [aria-current="true"]) { background: var(--l-ink); border-color: var(--l-ink); color: var(--l-white); }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-chip:active { transform: scale(.98); }

:is(#rmh-landing, .rmh-lc) .rmh-l-gb-group { margin-top: clamp(40px, 5vw, 64px); scroll-margin-top: 96px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-group[hidden] { display: none; }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-group__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--l-sand); }
:is(#rmh-landing, .rmh-lc) h3.rmh-l-gb-group__name:not(#_) { font-size: clamp(24px, 16px + 1vw, 32px); line-height: 1.15; }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-group__count { font: 600 12px/1.4 var(--l-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--l-ink-soft); }

:is(#rmh-landing, .rmh-lc) .rmh-l-gb-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-card {
	display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 32px); border-radius: 12px; background: var(--l-white);
	box-shadow: 0 1px 0 var(--l-sand), 0 18px 40px -32px rgba(35, 31, 32, .45);
}
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-card figure { flex: 1; }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-card .rmh-l-gb-stars { font-size: 15px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-card__src { 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-gb-card blockquote p { font-size: 17px; line-height: 1.6; color: var(--l-ink); overflow-wrap: anywhere; } /* a guest's run of emoji stars or a long word never widens the card */
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-card figcaption { margin-top: 16px; font-size: 14px; color: var(--l-ink-soft); }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-card__house {
	align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font: 600 14px/1.3 var(--l-sans);
	color: var(--l-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--l-taupe-deep);
}
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-card__house::after { content: "\00a0→"; display: inline-block; transition: transform .2s var(--l-ease); }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-card__house:hover { color: var(--l-taupe-deep); }

:is(#rmh-landing, .rmh-lc) .rmh-l-gb-more { margin-top: 16px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-more > summary {
	display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid var(--l-ink); border-radius: 999px;
	font: 600 15px/1.2 var(--l-sans); color: var(--l-ink); list-style: none; cursor: pointer; transition: background-color .2s, color .2s;
}
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-more > summary::-webkit-details-marker { display: none; }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-more > summary::before { content: "+"; font-size: 20px; line-height: 1; transition: transform .2s var(--l-ease); }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-more[open] > summary::before { transform: rotate(45deg); }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-more > summary:hover { background: var(--l-ink); color: var(--l-white); }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-more > summary span { font-weight: 400; }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-more .rmh-l-gb-cards { margin-top: 16px; }

/* one card per house shows (the wall stays ~5 cards on a phone); the rest open two to a row */
@media (min-width: 768px) {
	:is(#rmh-landing, .rmh-lc) .rmh-l-gb-more .rmh-l-gb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	:is(#rmh-landing, .rmh-lc) .rmh-l-gb-group > .rmh-l-gb-cards .rmh-l-gb-card blockquote p { font-size: 18px; max-width: 68ch; }
}
@media (min-width: 1024px) {
	/* each house reads as a ledger line: its name in the margin, its guests' words beside it */
	:is(#rmh-landing, .rmh-lc) .rmh-l-gb-group { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); column-gap: clamp(32px, 3.6vw, 56px); }
	:is(#rmh-landing, .rmh-lc) .rmh-l-gb-group__head { grid-row: 1 / span 2; align-self: start; position: sticky; top: 112px; display: block; border-bottom: 0; padding-bottom: 0; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-gb-group__count { margin-top: 10px; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-gb-group > :not(.rmh-l-gb-group__head) { grid-column: 2; }
}

/* ---------- Where they were written ---------- */
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-srcs { display: grid; border-top: 1px solid var(--l-sand); }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-src {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding-block: 12px;
	border-bottom: 1px solid var(--l-sand); font: 600 16px/1.4 var(--l-sans); color: var(--l-ink); text-decoration: none; transition: color .2s;
}
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-src::after { content: "\2197"; flex: none; font-size: 18px; color: var(--l-taupe-deep); transition: transform .2s var(--l-ease); }
:is(#rmh-landing, .rmh-lc) .rmh-l-gb-src:hover { color: var(--l-taupe-deep); }
@media (min-width: 900px) {
	:is(#rmh-landing, .rmh-lc) .rmh-l-gb-srcs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); }
}
@media (prefers-reduced-motion: no-preference) {
	:is(#rmh-landing, .rmh-lc) .rmh-l-gb-src:hover::after { transform: translate(3px, -3px); }
	:is(#rmh-landing, .rmh-lc) .rmh-l-gb-card__house:hover::after { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
	:is(#rmh-landing, .rmh-lc) .rmh-l-gb-more > summary::before, :is(#rmh-landing, .rmh-lc) .rmh-l-gb-chip:active { transition: none; transform: none; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-gb-more[open] > summary::before { transform: none; content: "\2212"; }
}