/**
 * LHR redesign — chrome.css (chrome agent).
 * Header, off-canvas, search overlay, Blackbook band, footer.
 * Contract: research/notes/redesign-2026-07-contract.md §2.
 */

/* ==================================================================
 * 1. Header — solid white sticky bar on every page. Heroes start
 *    BELOW it: the transparent-over-hero mode is forced off in
 *    header.php; these overrides also pin the CSS side.
 * ================================================================ */

.lhr-redesign #m-header {
	position: sticky !important;
	top: 0;
	background-color: #fff !important;
	border-bottom: 1px solid var(--lhr-hairline) !important;
	color: var(--lhr-ink) !important;
	height: var(--m-header-h, 92px);
	z-index: 900;
}

/* No scrim, no light-logo swap, no transparent leftovers. */
.lhr-redesign #m-header::before {
	content: none !important;
}

.lhr-redesign .m-header-space {
	display: none !important;
}

/*
 * Three REAL grid groups (logo | nav | actions) — overlap is geometrically
 * impossible: each group lives in its own track and tracks never overlap.
 * `1fr auto 1fr` centers the nav on the bar when both side tracks fit; when
 * the actions group is wider than its share, its track grows and the nav
 * shifts left gracefully instead of painting under the actions (QA round 1:
 * the old absolutely-centered nav collided with the gold CTA at ~1024px).
 */
.lhr-redesign #m-header .m-header__inner {
	display: grid;
	grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
	column-gap: clamp(24px, 2.2vw, 44px);
	align-items: center;
	height: 100%;
	max-width: calc(var(--lhr-container) + 2 * var(--lhr-gutter));
	padding-inline: var(--lhr-gutter);
	margin-inline: auto;
	position: relative;
}

/* Wide bars: guarantee >=56px clearance between nav and the actions group
 * (nav item gaps read ~40-50px, so the boundary must read wider). */
@media (min-width: 1360px) {
	.lhr-redesign #m-header .m-header__inner {
		column-gap: 56px;
	}
}

.lhr-redesign #m-header .m-header__logo {
	justify-self: start;
	min-width: 0;
}

/* ---- Logo lockup: LUXURY over — HOTEL REVIEWS — ------------------ */

.lhr-logo {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	text-decoration: none;
	color: var(--lhr-ink) !important;
	flex: 0 0 auto;
}

.lhr-logo:hover {
	color: var(--lhr-ink) !important;
}

.lhr-logo__word {
	font-family: var(--lhr-font-serif);
	font-size: 25px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.4em;
	margin-right: -0.4em; /* balance trailing tracking for optical centering */
	text-transform: uppercase;
	color: var(--lhr-ink);
	white-space: nowrap;
}

.lhr-logo__sub {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--lhr-font-sans);
	font-size: 8px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.34em;
	margin-right: -0.34em;
	text-transform: uppercase;
	color: var(--lhr-ink);
	white-space: nowrap;
}

/* The em-dash rules either side of HOTEL REVIEWS. */
.lhr-logo__sub::before,
.lhr-logo__sub::after {
	content: '';
	display: block;
	width: 16px;
	height: 1px;
	background: currentColor;
	opacity: 0.75;
}

.lhr-logo--footer .lhr-logo__word {
	font-size: 21px;
}

.lhr-logo--footer .lhr-logo__sub {
	font-size: 7px;
}

/* ---- Centered primary nav (middle grid track — never absolute) ---- */

.lhr-redesign #m-header .m-header__nav {
	position: static;
	transform: none;
	justify-self: center;
	margin: 0;
	min-width: 0;
}

.lhr-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(4px, 1.2vw, 18px);
}

.lhr-nav li {
	margin: 0;
}

.lhr-nav a {
	display: inline-block;
	padding: 10px 12px;
	font-family: var(--lhr-font-sans);
	font-size: var(--lhr-caps-size);
	font-weight: 600;
	letter-spacing: var(--lhr-caps-track);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--lhr-ink) !important;
	white-space: nowrap;
	transition: color 200ms var(--lhr-ease);
}

.lhr-nav a:hover,
.lhr-nav a:focus-visible,
.lhr-nav .current-menu-item > a,
.lhr-nav .current-menu-ancestor > a,
.lhr-nav [aria-current='page'] {
	color: var(--lhr-gold) !important;
}

/* Hide legacy dropdown children in the bar (IA is flat). */
.lhr-nav .sub-menu {
	display: none;
}

/* ---- Right actions: gold CTA · search · burger -------------------
 * Clarity round (July 2026): the SUBSCRIBE text link was removed — it
 * duplicated the Blackbook CTA. Its ~93px (label + gap) is what pays for
 * the sixth nav item, POINTS & MILES.
 * ----------------------------------------------------------------- */

.lhr-header__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	justify-self: end;
	margin-left: 0;
	flex: 0 0 auto;
}

.lhr-header__actions .lhr-btn--gold {
	padding: 13px 20px;
	font-size: 10px;
	color: #fff !important;
}

.lhr-header__search {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--lhr-ink);
	cursor: pointer;
	transition: color 200ms var(--lhr-ease);
}

.lhr-header__search:hover,
.lhr-header__search:focus-visible {
	color: var(--lhr-gold);
}

.lhr-header__search .m-icon {
	stroke-width: 1.6;
}

/* Burger — two hairlines, ink. */
.lhr-redesign .m-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 7px;
	width: 44px;
	height: 44px;
	padding: 10px;
	border: 0;
	background: none;
	cursor: pointer;
}

.lhr-redesign .m-header__burger-line {
	display: block;
	width: 24px;
	height: 1.5px;
	background: var(--lhr-ink) !important;
}

/* ---- Header responsive -------------------------------------------
 * >=1201px  logo · six-item nav · gold CTA + search
 * 1101-1200 hamburger collapse (raised from 1100 for the sixth nav item);
 *           the gold CTA stays in the bar
 * <=1100    CTA drops to the panel menu's pinned bar (unchanged)
 *
 * Width arithmetic (measured from the shipped woff2 with fontTools, not
 * eyeballed — Hanken Grotesk 600 at 11px/.16em tracking, 12px item padding):
 *   DESTINATIONS 97 · BRANDS 52 · EXPERIENCES 89 · REVIEWS 59 ·
 *   POINTS & MILES 106 · JOURNAL 61  =  464px of label
 * Actions = gold CTA (JOIN THE BLACKBOOK 134 + 40 padding) + 20 gap +
 * 40 search = 234px. Logo lockup = 146px.
 * Container content box = min(vw, 1360) - 80.
 *   1440 -> need 1186 of 1280 (94 spare)
 *   1366 -> need 1182 of 1280 (98 spare)
 *   1280 -> need 1121 of 1200 (79 spare)
 *   1201 -> need 1048 of 1121 (73 spare, with the trims below)
 * Below ~1134px the six items no longer fit, hence the 1200 collapse: the
 * header is a real grid (`minmax(max-content,1fr) auto minmax(...)`), so
 * nav and CTA can never paint over each other — an over-tight bar would
 * overflow the gutter instead, which is what the collapse prevents.
 * ----------------------------------------------------------------- */

/* Tight desktop band just above the collapse: trim tracking chrome so the
 * three groups always fit inside the container. */
@media (max-width: 1279.98px) {
	.lhr-nav {
		gap: clamp(4px, 1vw, 16px);
	}

	.lhr-nav a {
		padding: 10px 9px;
	}

	.lhr-logo__word {
		font-size: 22px;
	}

	.lhr-header__actions {
		gap: 14px;
	}

	.lhr-header__actions .lhr-btn--gold {
		padding: 13px 16px;
	}
}

@media (max-width: 1200px) {
	/* Two groups left: simple flex row, logo left, actions right. */
	.lhr-redesign #m-header .m-header__inner {
		display: flex;
		justify-content: space-between;
	}

	.lhr-redesign #m-header .m-header__nav {
		display: none;
	}

	.lhr-redesign .m-header__burger {
		display: inline-flex;
	}

	.lhr-logo__word {
		font-size: 20px;
	}

	.lhr-logo__sub {
		font-size: 7px;
	}

	.lhr-header__actions {
		gap: 8px;
		margin-left: auto;
	}
}

/* The gold CTA keeps its original <=1100 drop point (it does not follow the
 * nav up to 1200): at 1101-1200 the bar is logo · CTA · search · burger,
 * which is ~409px of 1021+ — the Blackbook button stays on screen exactly
 * where it is today. Below 1100 it lives in the panel menu's pinned bar. */
@media (max-width: 1100px) {
	.lhr-redesign #m-header .lhr-header__cta {
		display: none;
	}
}

/* ==================================================================
 * 2. Shared overlay chrome — top bar, hairline-circle close,
 *    portrait destination tile (panel menu + search overlay)
 * ================================================================ */

/* Top bar: logo lockup left · circle close right · hairline rule. */
.lhr-panel__top,
.lhr-search__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--m-header-h, 92px);
	border-bottom: 1px solid var(--lhr-hairline);
	flex: 0 0 auto;
}

.lhr-panel__top .lhr-logo__word,
.lhr-search__top .lhr-logo__word {
	font-size: 20px;
}

.lhr-panel__top .lhr-logo__sub,
.lhr-search__top .lhr-logo__sub {
	font-size: 7px;
}

/* 32px hairline-circle close (mirrors the footer social circles). */
.lhr-panel__close,
.lhr-search__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	flex: 0 0 auto;
	background: none;
	border: 1px solid var(--lhr-ink-faint);
	border-radius: 50%;
	color: var(--lhr-ink);
	cursor: pointer;
	transition: border-color 200ms var(--lhr-ease), color 200ms var(--lhr-ease);
}

.lhr-panel__close:hover,
.lhr-panel__close:focus-visible,
.lhr-search__close:hover,
.lhr-search__close:focus-visible {
	border-color: var(--lhr-gold);
	color: var(--lhr-gold);
}

.lhr-panel__close .m-icon,
.lhr-search__close .m-icon {
	stroke-width: 1.6;
}

/* Portrait 3:4 destination tile — image, bottom scrim, serif name. */
.lhr-dtile {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: var(--lhr-dark);
	text-decoration: none;
}

.lhr-dtile__media {
	position: absolute;
	inset: 0;
	display: block;
}

.lhr-dtile .lhr-dtile__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 700ms var(--lhr-ease);
}

.lhr-dtile:hover .lhr-dtile__img,
.lhr-dtile:focus-visible .lhr-dtile__img {
	transform: scale(1.04);
}

.lhr-dtile__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(25, 23, 19, 0.62) 0%,
		rgba(25, 23, 19, 0.1) 50%,
		rgba(25, 23, 19, 0) 75%
	);
}

.lhr-dtile__name {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 13px;
	font-family: var(--lhr-font-serif);
	font-weight: 500;
	font-size: 19px;
	line-height: 1.2;
	color: #fff;
}

/* ==================================================================
 * 2b. Off-canvas panel menu — cream sheet, ruled Playfair rows with
 *     index numerals, secondary caps, pinned Blackbook bottom bar
 * ================================================================ */

.lhr-redesign .m-panel-menu {
	background: var(--lhr-cream) !important;
	color: var(--lhr-ink);
}

.lhr-panel {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	max-width: calc(var(--lhr-container) + 2 * var(--lhr-gutter));
	margin-inline: auto;
	padding: 0 var(--lhr-gutter) 28px;
}

.lhr-panel__grid {
	flex: 1 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 44px;
	padding-top: clamp(28px, 4.5vh, 44px);
	margin-bottom: 40px;
}

.lhr-panel__eyebrow {
	font-family: var(--lhr-font-sans);
	font-size: var(--lhr-caps-size);
	font-weight: 600;
	letter-spacing: var(--lhr-caps-track);
	text-transform: uppercase;
	color: var(--lhr-gold);
	margin: 0 0 14px;
}

/* Primary links: Playfair rows, hairline-ruled, 01-07 index numerals. */
.lhr-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: lhr-menu;
}

.lhr-panel__list li {
	margin: 0;
	counter-increment: lhr-menu;
	border-bottom: 1px solid var(--lhr-hairline);
}

.lhr-panel__list a {
	display: flex;
	align-items: baseline;
	gap: 18px;
	padding: 15px 2px;
	font-family: var(--lhr-font-serif);
	font-weight: 500;
	font-size: clamp(33px, 1.5vw + 28px, 40px);
	line-height: 1.15;
	color: var(--lhr-ink);
	text-decoration: none;
	transition: color 200ms var(--lhr-ease);
}

.lhr-panel__list a::before {
	content: counter(lhr-menu, decimal-leading-zero);
	flex: 0 0 auto;
	min-width: 22px;
	font-family: var(--lhr-font-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: var(--lhr-caps-track);
	color: var(--lhr-ink-faint);
}

/* Gold arrow, revealed on hover/focus. */
.lhr-panel__list a::after {
	content: '\2192';
	margin-left: auto;
	align-self: center;
	font-family: var(--lhr-font-sans);
	font-size: 20px;
	line-height: 1;
	color: var(--lhr-gold);
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity 250ms var(--lhr-ease), transform 250ms var(--lhr-ease);
}

.lhr-panel__list a:hover,
.lhr-panel__list a:focus-visible,
.lhr-panel__list .current-menu-item > a,
.lhr-panel__list [aria-current='page'] {
	color: var(--lhr-gold);
}

.lhr-panel__list a:hover::after,
.lhr-panel__list a:focus-visible::after {
	opacity: 1;
	transform: translateX(0);
}

/* Secondary (E-E-A-T) links: faint small caps under a hairline. */
.lhr-panel__secondary {
	border-top: 1px solid var(--lhr-hairline);
	padding-top: 26px;
}

.lhr-panel__meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.lhr-panel__meta li {
	margin: 0;
}

.lhr-panel__meta a {
	font-family: var(--lhr-font-sans);
	font-size: var(--lhr-caps-size);
	font-weight: 600;
	letter-spacing: var(--lhr-caps-track);
	text-transform: uppercase;
	color: var(--lhr-ink-soft);
	text-decoration: none;
	transition: color 200ms var(--lhr-ease);
}

.lhr-panel__meta a:hover,
.lhr-panel__meta a:focus-visible {
	color: var(--lhr-gold);
}

/* Destination tile: desktop texture only (>=768px). */
.lhr-panel__tile {
	display: none;
}

/* Pinned bottom bar: full-width gold CTA · socials. (The duplicate
 * SUBSCRIBE link was removed in the July 2026 clarity round.) */
.lhr-panel__bottom {
	margin-top: auto;
	flex: 0 0 auto;
	border-top: 1px solid var(--lhr-hairline);
	padding-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lhr-panel__cta {
	width: 100%;
}

.lhr-panel__bottom-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

/* Two columns from tablet up: links left, secondary + image tile right. */
@media (min-width: 768px) {
	.lhr-panel__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
		gap: clamp(40px, 6vw, 96px);
		padding-top: clamp(36px, 6vh, 56px);
	}

	.lhr-panel__aside {
		display: flex;
		flex-direction: column;
		gap: 32px;
		padding-top: 25px; /* optically aligns with the first link row */
	}

	.lhr-panel__secondary {
		border-top: 0;
		padding-top: 0;
	}

	.lhr-panel__tile {
		display: block;
		max-width: 320px;
	}

	.lhr-panel__bottom {
		flex-direction: row;
		align-items: center;
		gap: 32px;
	}

	.lhr-panel__cta {
		width: auto;
		flex: 0 0 auto;
	}

	.lhr-panel__bottom-row {
		flex: 1 1 auto;
	}
}

/* ==================================================================
 * 3. Search overlay — full-screen cream sheet: top bar, centered
 *    Playfair underline field + gold SEARCH, popular links,
 *    destination tile row filling the bottom
 * ================================================================ */

.lhr-redesign .m-search-overlay {
	background: var(--lhr-cream) !important;
	color: var(--lhr-ink);
}

.lhr-search {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	max-width: calc(var(--lhr-container) + 2 * var(--lhr-gutter));
	margin-inline: auto;
	padding: 0 var(--lhr-gutter) clamp(28px, 4vh, 44px);
}

/* Vertically centered search group. */
.lhr-search__center {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: 720px;
	margin-inline: auto;
	padding-block: clamp(40px, 7vh, 88px);
}

.lhr-search__eyebrow {
	font-family: var(--lhr-font-sans);
	font-size: var(--lhr-caps-size);
	font-weight: 600;
	letter-spacing: var(--lhr-caps-track);
	text-transform: uppercase;
	color: var(--lhr-gold);
	margin: 0 0 20px;
}

.lhr-search__form {
	display: flex;
	align-items: flex-end;
	gap: 20px;
}

/* Big Playfair field on a hairline underline. The placeholder is set a
 * step smaller so "Search hotels, destinations, stories" always FITS. */
.lhr-redesign .lhr-search .lhr-search__input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: auto;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--lhr-hairline);
	border-radius: 0;
	padding: 6px 0 14px;
	font-family: var(--lhr-font-serif);
	font-size: clamp(28px, 3.1vw, 44px);
	font-weight: 400;
	line-height: 1.15;
	color: var(--lhr-ink);
	transition: border-color 200ms var(--lhr-ease);
}

.lhr-redesign .lhr-search .lhr-search__input:focus {
	border-bottom-color: var(--lhr-gold);
	outline: none;
}

.lhr-redesign .lhr-search .lhr-search__input::placeholder {
	font-size: clamp(19px, 2.05vw, 29px);
	color: var(--lhr-ink-faint);
	opacity: 1;
}

.lhr-redesign .lhr-search .lhr-search__input::-webkit-search-cancel-button,
.lhr-redesign .lhr-search .lhr-search__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

/* Gold SEARCH button sitting on the underline baseline. */
.lhr-search__submit {
	flex: 0 0 auto;
	height: 52px;
	padding: 0 30px;
}

/* POPULAR SEARCHES: small caps label + serif links. */
.lhr-search__popular {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin-top: 34px;
}

.lhr-search__popular-title {
	font-family: var(--lhr-font-sans);
	font-size: var(--lhr-caps-size);
	font-weight: 600;
	letter-spacing: var(--lhr-caps-track);
	text-transform: uppercase;
	color: var(--lhr-ink-faint);
	margin: 0;
}

.lhr-search__popular-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px 26px;
}

.lhr-search__popular-list li {
	margin: 0;
}

.lhr-search__popular-list a {
	font-family: var(--lhr-font-serif);
	font-weight: 500;
	font-size: 19px;
	color: var(--lhr-ink);
	text-decoration: none;
	transition: color 200ms var(--lhr-ease);
}

.lhr-search__popular-list a:hover,
.lhr-search__popular-list a:focus-visible {
	color: var(--lhr-gold);
}

/* Bottom row of portrait destination tiles fills the dead space. */
.lhr-search__tiles {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

/* Keep the tile row shallow enough that the search group stays the star. */
.lhr-search__tiles .lhr-dtile {
	aspect-ratio: 3 / 4;
	max-height: 38vh;
}

@media (max-width: 1023px) {
	.lhr-search__tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.lhr-search__tiles .lhr-dtile:nth-child(n + 4) {
		display: none;
	}
}

@media (max-width: 599px) {
	.lhr-search__form {
		flex-direction: column;
		align-items: stretch;
		gap: 18px;
	}

	.lhr-search__submit {
		height: 50px;
		width: 100%;
	}

	.lhr-search__tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lhr-search__tiles .lhr-dtile:nth-child(n + 3) {
		display: none;
	}
}

/* ==================================================================
 * 4. The Blackbook band — global dark pre-footer
 * ================================================================ */

.lhr-blackbook-band {
	background: var(--lhr-dark);
	color: #fff;
}

.lhr-blackbook-band__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 5fr);
	align-items: center;
	gap: clamp(28px, 4vw, 64px);
	padding-block: clamp(40px, 5vw, 64px);
}

/* Two classes (0,2,0) so the ink-colored `.lhr-redesign h2` heading rule
 * in base.css (0,1,1) cannot win on the dark band. */
.lhr-blackbook-band .lhr-blackbook-band__title {
	font-family: var(--lhr-font-serif);
	font-weight: 500;
	font-size: clamp(24px, 2.2vw, 30px);
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--lhr-cream, #f7f4ee);
	margin: 0;
}

.lhr-blackbook-band__title span {
	display: block;
}

.lhr-blackbook-band .lhr-blackbook-band__sub {
	font-family: var(--lhr-font-sans);
	font-size: 13.5px;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
}

.lhr-blackbook-band__form {
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	gap: 0;
}

.lhr-blackbook-band .lhr-blackbook-band__input {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 320px;
	height: 52px;
	padding: 0 18px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-right: 0;
	border-radius: 0;
	font-family: var(--lhr-font-sans);
	font-size: 14px;
	color: #fff;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 200ms var(--lhr-ease);
}

.lhr-blackbook-band .lhr-blackbook-band__input::placeholder {
	color: rgba(255, 255, 255, 0.45);
	opacity: 1;
}

.lhr-blackbook-band .lhr-blackbook-band__input:focus {
	border-color: var(--lhr-gold-soft);
	outline: none;
}

.lhr-blackbook-band__form .lhr-btn {
	height: 52px;
	flex: 0 0 auto;
}

/* Honeypot — visually gone, still in the form for bots. */
.lhr-hp-field {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Below ~1200px the 3-col grid starves the email field (QA round 1: the
 * input collapsed to ~100px at 1024). Stack instead: heading row, copy,
 * then a full-width input+button row with a growing, min-260px field. */
@media (max-width: 1199.98px) {
	.lhr-blackbook-band__inner {
		grid-template-columns: 1fr;
		gap: 20px;
		text-align: left;
	}

	.lhr-blackbook-band__form {
		justify-content: flex-start;
		width: 100%;
	}

	.lhr-blackbook-band .lhr-blackbook-band__input {
		flex: 1 1 auto;
		min-width: 260px;
		max-width: none;
	}
}

@media (max-width: 559px) {
	.lhr-blackbook-band__form {
		flex-direction: column;
		gap: 12px;
	}

	.lhr-blackbook-band .lhr-blackbook-band__input {
		max-width: none;
		border-right: 1px solid rgba(255, 255, 255, 0.22);
	}
}

/* ==================================================================
 * 5. Footer — single cream row: lockup · small-caps nav · social ·
 *    legal line (mockup bottom band)
 * ================================================================ */

.lhr-redesign .m-footer {
	background: var(--lhr-cream);
	border: 0;
	color: var(--lhr-ink-soft);
}

.lhr-footer-bar {
	padding-block: clamp(28px, 3.5vw, 44px);
}

.lhr-footer-bar__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px clamp(20px, 2.6vw, 40px);
}

.lhr-footer-bar__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px clamp(8px, 1.4vw, 22px);
}

.lhr-footer-bar__nav a {
	font-family: var(--lhr-font-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--lhr-ink) !important;
	white-space: nowrap;
}

.lhr-footer-bar__nav a:hover,
.lhr-footer-bar__nav a:focus-visible {
	color: var(--lhr-gold) !important;
}

/* Three 32px hairline-circle social icons (footer bar + panel menu). */
.lhr-footer-bar__social,
.lhr-panel__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.lhr-footer-bar__social li,
.lhr-panel__social li {
	margin: 0;
}

.lhr-footer-bar__social a,
.lhr-panel__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--lhr-ink-faint);
	border-radius: 50%;
	color: var(--lhr-ink) !important;
	transition: border-color 200ms var(--lhr-ease), color 200ms var(--lhr-ease);
}

.lhr-footer-bar__social a:hover,
.lhr-footer-bar__social a:focus-visible,
.lhr-panel__social a:hover,
.lhr-panel__social a:focus-visible {
	border-color: var(--lhr-gold);
	color: var(--lhr-gold) !important;
}

.lhr-footer-bar__social svg,
.lhr-panel__social svg {
	display: block;
	width: 13px;
	height: 13px;
}

/* Legal cluster — © line + PRIVACY POLICY / TERMS OF USE. */
.lhr-footer-bar__legal {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-left: auto;
	font-family: var(--lhr-font-sans);
	font-size: 10px;
	color: var(--lhr-ink-faint);
	letter-spacing: 0.02em;
}

.lhr-footer-bar__legal a {
	font-weight: 600;
	font-size: 9px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--lhr-hairline);
	color: var(--lhr-ink-faint) !important;
}

.lhr-footer-bar__legal a:hover,
.lhr-footer-bar__legal a:focus-visible {
	color: var(--lhr-gold) !important;
}

@media (max-width: 1279px) {
	.lhr-footer-bar__legal {
		flex-basis: 100%;
		margin-left: 0;
	}
}

@media (max-width: 767px) {
	.lhr-footer-bar__inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 22px;
	}

	.lhr-footer-bar__nav ul,
	.lhr-footer-bar__legal {
		justify-content: center;
	}
}

/* ==================================================================
 * 6. Reduced motion — chrome transitions are decorative only
 * ================================================================ */

@media (prefers-reduced-motion: reduce) {
	.lhr-panel__close,
	.lhr-search__close,
	.lhr-panel__list a,
	.lhr-panel__list a::after,
	.lhr-panel__meta a,
	.lhr-dtile .lhr-dtile__img,
	.lhr-redesign .lhr-search .lhr-search__input,
	.lhr-search__popular-list a,
	.lhr-footer-bar__social a,
	.lhr-panel__social a {
		transition: none;
	}
}