/**
 * The hotel look (brand/design-patterns-read-2026-10-31.md §3; Jules 10-31 "let's do it"). One file over the brand skin and the
 * landing system, loaded by mu-plugins/rmh-brand.php only while rmh_hotel_look_enabled is 1 (or ?rmh_hotel=1 for one request).
 * Measured against Aman, Rosewood Mayakoba and Le Collectionist on 10-31, it does five things:
 *  1. Actions are square with small tracked capitals (every hotel in the set; we were the only pill). Chips, tags and filters keep
 *     their pills: a route or a filter is not an action.
 *  2. The page sits on stone (--rmh-cream) and the quiet bands turn white: paper on linen (Aman's one tone, Rosewood's off-white).
 *  3. One true italic, Cormorant Garamond Italic 500 (OFL, latin subset, 24 KB, fetched only with this file), for the voice slots
 *     only: the guest quote, the line under each house and door, the mega-menu's accent word. Marcellus and Petit Serif have no
 *     italic, so any other `italic` on this site is a browser-faked slant and stays out.
 *  4. One floating action on desktop: the chat launcher waits until the hero has left the screen (rmh-landing.js sets
 *     html.rmh-l-hero-in; the launcher's own code is untouched).
 *  5. A cross-fade between pages (View Transitions, same origin; none under reduced motion).
 * Specificity: every rule carries body.rmh-hotel on top of the scope of the rule it replaces, so it wins by one class whatever the
 * load order; `:not(#_)` where the original used it. px only (the theme sets html{font-size:10px}).
 */
@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url("cormorant-garamond-italic-500-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Tokens and the page base ---------- */
body.rmh-brand.rmh-hotel {
	--rmh-pill: 0px;                                            /* every action the skin draws from the token goes square */
	--rmh-serif-voice: "Cormorant Garamond", Georgia, serif;    /* the voice italic: quotes, house lines, the accent word */
	--rmh-action-size: 13px;
	--rmh-action-track: .12em;
	background-color: var(--rmh-cream);
}
body.rmh-hotel #rmh-landing { background: var(--rmh-cream); }
body.rmh-hotel :is(#rmh-landing, .rmh-lc) .rmh-l__band--cream { background: var(--l-white); }   /* the quiet band is now the white one */
body.rmh-hotel :is(#rmh-landing, .rmh-lc) .rmh-l-chips { background: var(--l-white); }

/* ---------- 2. Actions: square, small tracked capitals ---------- */
/* The skin's own button list (rmh-brand.css §7), one class heavier. Labels are typed in sentence case; the capitals are CSS. */
body.rmh-brand.rmh-hotel :is(.elementor-button, .btn-primary, .btn-secondary, .elementor-cta__button, .top_gallery_v1_button,
	.elementor-field-type-submit button, input[type="submit"], .btn-primary-outlined, .btn-secondary-outlined, .btn-grey-outlined):not(.rmh-cc__btn):not(#_):where(:not(#rmh-offer, #rmh-offer *, .rmh-iform, .rmh-iform *, .rmh-cc, .rmh-cc *)) {
	border-radius: 0; font-size: var(--rmh-action-size); font-weight: 600; letter-spacing: var(--rmh-action-track); text-transform: uppercase;
}
/* The landing system's buttons, the one-home grid's label, the search cards' button */
body.rmh-hotel :is(#rmh-landing, .rmh-lc) .rmh-l-btn,
body.rmh-hotel #rmh-landing .rmh-lg--n1 .rmh-lg-card__go,
body.rmh-hotel.rmh-sc .rmh-sc-btn {
	border-radius: 0; font-size: var(--rmh-action-size); font-weight: 600; letter-spacing: var(--rmh-action-track); text-transform: uppercase;
}
/* The phone bar: full width at the bottom edge, the hotel way (Aman, Rosewood), instead of a floating capsule */
body.rmh-hotel .rmh-l-bar {
	left: 0; right: 0; bottom: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-width: 1px 0 0; border-radius: 0;
}
body.rmh-hotel .rmh-l-bar .rmh-l-btn { border-radius: 0; font-size: var(--rmh-action-size); letter-spacing: var(--rmh-action-track); text-transform: uppercase; }
/* The inquiry form's send and its WhatsApp follow-up (07's file keeps everything else), the offer sheet's two buttons */
body.rmh-hotel .rmh-iform .rmh-iform__submit,
body.rmh-hotel .rmh-iform__done .rmh-wa-btn,
body.rmh-hotel .rmh-offer .rmh-offer__btn {
	border-radius: 0; font-size: var(--rmh-action-size); letter-spacing: var(--rmh-action-track); text-transform: uppercase;
}
/* The listing page's photo buttons and share (rmh-listing.css); the anchor pills and highlight tags keep their shape */
body.rmh-hotel.rmh-listing .top_gallery_v1_button:not(#_) { border-radius: 0 !important; }
body.rmh-hotel.rmh-listing :is(.rmh-lst-mosaic__all, .rmh-share):not(#_) { border-radius: 0; }
/* Boostly's booking box pins its button at 16 px with !important (rmh-brand.css §7 answers in kind); the capitals need 13 */
html body.rmh-brand.rmh-hotel .block-body-sidebar .btn-primary,
html body.rmh-brand.rmh-hotel .block-body-sidebar button#request_for_enquiry:not(#_) { font-size: var(--rmh-action-size) !important; }
/* The listing's phone bar under 400 px has no room for tracked capitals (at 320 "CHECK AVAILABILITY" took 243 px and the
   price block 44, so "a night · 4 suites" spilled): there the label stays sentence case, 14 px, square */
@media (max-width: 399px) {
	html body.rmh-brand.rmh-hotel :is(.overlay-booking-btn, .block-body-sidebar) :is(.btn-primary, button#request_for_enquiry):not(#_) {
		font-size: 14px !important; letter-spacing: .02em; text-transform: none;
	}
}
/* The listing's contact sheet send, the chrome's own buttons (paid landers' CTAs), the footer newsletter's subscribe */
body.rmh-hotel .rmh-shc .rmh-shc__send:not(#_):not(#_),
body.rmh-hotel.rmh-chrome .rmh-chrome-btn,
body.rmh-hotel.rmh-chrome-native .rmh-nl__submit:not(#_) {
	border-radius: 0; font-size: var(--rmh-action-size); letter-spacing: var(--rmh-action-track); text-transform: uppercase;
}
/* The header: on the stone too; its two buttons square; the nav door's hover reads white on stone, not stone on stone */
body.rmh-hotel.rmh-chrome-native .rmh-hdr, body.rmh-hotel.rmh-chrome-native .rmh-hdr__bar { background: var(--rmh-cream); }
body.rmh-hotel.rmh-chrome-native :is(.rmh-hdr__cta, .rmh-hdr__menu, .rmh-nav__door):not(#_) { border-radius: 0; }
body.rmh-hotel.rmh-chrome-native .rmh-hdr__cta:not(#_) { font-size: var(--rmh-action-size); font-weight: 600; letter-spacing: var(--rmh-action-track); text-transform: uppercase; }
body.rmh-hotel.rmh-chrome-native .rmh-nav__door:is(:hover, :focus-visible, [aria-expanded="true"], [aria-current]):not(#_) { background: var(--rmh-white); }
/* The chat launcher: the token already squares it; its label joins the system */
html.rmh-talk-ready body.rmh-hotel .rmh-talk-fab { font-size: var(--rmh-action-size); letter-spacing: var(--rmh-action-track); text-transform: uppercase; }

/* ---------- 3. The voice italic ---------- */
body.rmh-hotel :is(#rmh-landing, .rmh-lc) .rmh-l-review blockquote p {
	font-family: var(--rmh-serif-voice); font-style: italic; font-weight: 500; font-size: clamp(27px, 18px + 2vw, 46px); line-height: 1.22; max-width: 32ch;
}
body.rmh-hotel :is(#rmh-landing, .rmh-lc) .rmh-l-review blockquote p::before { font-size: 84px; line-height: .6; }
body.rmh-hotel :is(#rmh-landing, .rmh-lc) :is(.rmh-l-house__line, .rmh-l-door__line) {
	font-family: var(--rmh-serif-voice); font-style: italic; font-weight: 500; font-size: 19px; line-height: 1.35;
}
body.rmh-hotel.rmh-chrome-native .rmh-nav-intro .rmh-nav-name em {
	font-family: var(--rmh-serif-voice); font-style: italic; font-weight: 500; font-size: 1.08em; color: var(--c-taupe-deep);
}

/* ---------- 4. One floating action on desktop ---------- */
html.rmh-l-hero-in.rmh-talk-ready body.rmh-hotel .rmh-talk-fab:not(#_) { opacity: 0; pointer-events: none; }

/* ---------- 5. A cross-fade between pages ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: .25s; }
::view-transition-new(root) { animation-duration: .25s; }
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
}
