@charset "UTF-8";

/* ==========================================================================
   Michael Taylor Designs - "acquired by RH" splash (Figma 63:14 / 63:100)
   Conventions: px units for fixed type, container units (cqw) for tile overlays
   that must scale with tile width, no !important, external stylesheet.
   Font: RH Serif (client's licensed webfont, self-hosted in /fonts).
   Tokens: RH Black #000, RH White #fff, Brand Buff #F9F7F4.

   Tiles are a constant 5:6 box at every width, so vertical overlay positions
   are percentages (identical desktop & mobile) and overlay type is sized in
   cqw against a 600px reference column - matching the Figma at both 600 and 375.
   ========================================================================== */

/* RH Serif - client's licensed typeface (RHSerif family, files in /fonts). */
@font-face {
	font-family: "RH Serif";
	src: url("../fonts/RHSerif-Light.woff2") format("woff2"),
	     url("../fonts/RHSerif-Light.woff") format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "RH Serif";
	src: url("../fonts/RHSerif-LightItalic.woff2") format("woff2"),
	     url("../fonts/RHSerif-LightItalic.woff") format("woff");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "RH Serif";
	src: url("../fonts/RHSerif-Regular.woff2") format("woff2"),
	     url("../fonts/RHSerif-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "RH Serif";
	src: url("../fonts/RHSerif-Semibold.woff2") format("woff2"),
	     url("../fonts/RHSerif-Semibold.woff") format("woff");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

:root {
	--rh-black: #000000;
	--rh-white: #ffffff;
	--rh-buff: #f9f7f4;
	/* RH Serif (client font) preferred; Cormorant Garamond as fallback until the
	   @font-face files are wired in (see /fonts). */
	--mt-serif: "RH Serif", "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

* {
	box-sizing: border-box;
}

html,
body.mt2-splash-body {
	margin: 0;
	padding: 0;
}

body.mt2-splash-body {
	background-color: var(--rh-buff);
	color: var(--rh-black);
	font-family: var(--mt-serif);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img {
	display: block;
	max-width: 100%;
}

.mt-page {
	max-width: 1600px; /* client canvas width - content scales full-bleed to 1600, no side padding */
	margin: 0 auto;
	background-color: var(--rh-buff);
}

.mt-hero,
.mt-band {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* -- Shared underlined serif text link ------------------------------------ */
.mt-textlink {
	display: inline-block;
	font-family: var(--mt-serif);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--rh-black);
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
	transition: opacity 0.2s ease;
}

.mt-textlink:hover,
.mt-textlink:focus {
	opacity: 0.6;
}

.mt-textlink--lg {
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.mt-textlink--sm {
	font-weight: 300;
	letter-spacing: 0.04em;
}

/* == Band 1: Hero ========================================================= */
.mt-hero__media {
	aspect-ratio: 5 / 6;
	overflow: hidden;
}

.mt-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.mt-hero__panel {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
}

.mt-hero__text {
	display: flex;
	flex-direction: column;
	gap: 30px;
	width: 340px; /* +18 over the 322 spec so RH Serif keeps the headline to 2 lines */
	max-width: 100%;
}

.mt-headline {
	/* margin-right cancels the TRAILING letter-space. CSS adds tracking after
	   the last character of a line, so this headline's advance width was ~323
	   against an ink width of 318 - enough to break "HAS BEEN ACQUIRED BY RH"
	   onto a third line in the handoff's 322px column. Figma does not add
	   trailing tracking, which is why its 319 ink sits happily in a 322 box.
	   This is also what the old "+18px column" hack was really working around. */
	margin: 0 -0.06em 0 0;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
}

.mt-body {
	margin: 0;
	font-weight: 300;
	font-size: 13px;
	line-height: 21px;
	text-align: justify;
}

.mt-body em {
	font-style: italic;
}

.mt-hero__text .mt-textlink--lg {
	align-self: flex-start;
}

/* -- v6: make the hero text SCALE with the canvas -------------------------- *
 * The product tiles are sized in cqw, so they grow with the page. The hero
 * text panel was fixed px, so it did NOT. At the 1600 canvas the tiles render
 * 1.33x the 1200 design while the hero type stayed at 13/22px - which is why
 * the hero reads "too small, too much padding around it" at full width, while
 * measuring correctly at 1200.
 *
 * Every value below is the SAME RATIO as the px value it replaces, against a
 * 600px panel (half of the 1200 design): 1cqw = 6px. So at a 1200 viewport
 * this computes back to exactly 340px / 22px / 13px / 30px - identical to
 * before - and at any wider canvas the column width and the font size scale
 * TOGETHER. That is what keeps the line breaks on the same words at every
 * width: wrapping depends on the ratio of column to font, and the ratio is
 * unchanged (340/13 = 56.667/2.167 = 26.15).
 *
 * Desktop-only on purpose. Below 992 the panel is the full viewport rather
 * than half the canvas, so cqw would shrink the text; the mobile layout keeps
 * the px values it was built and QA'd against.
 *
 * THE CONTAINER MUST BE .mt-hero, NOT .mt-hero__panel. An element's own cqw
 * resolves against its nearest ANCESTOR container, never itself. Putting
 * container-type on the panel and then sizing that same panel's padding in
 * cqw has no ancestor to resolve against, so it falls back to the viewport -
 * giving 80px of padding instead of 40, shrinking the panel's content box,
 * which is then what cqw resolves to for everything inside it. That narrowed
 * the column to ~249px and pushed the paragraphs from 7 lines to 10. .mt-hero
 * carries no padding, so there is no circular dependency.
 *
 * Units are therefore against the FULL canvas: 1cqw = 12px at the 1200 design.
 */
@media (min-width: 992px) {
	.mt-hero {
		container-type: inline-size;
	}

	.mt-hero__panel {
		padding: 3.333cqw; /* 40px */
	}

	.mt-hero__text {
		/* 26.8333cqw = 322px = the handoff's column. Was 340px ("+18 so RH Serif
		   keeps the headline to 2 lines") - but the headline's ink measures 318,
		   so it fits 322 and the +18 is not needed. The 340 was what made our
		   body 338 wide against the handoff's 322. */
		width: 26.8333cqw; /* 322px */
		/* Lift 4px. The block HEIGHT already matches the handoff (427 vs 428),
		   but it rendered 4px low: our first line carries half-leading above it
		   that Figma's glyph-hugging text frames do not, so centring the box
		   centres the leading too. A relative offset, not a margin, so it does
		   not disturb the centring maths. */
		position: relative;
		top: -0.333cqw; /* -4px */
		/* 30px put the block at 455px tall against the handoff's 427. Our
		   paragraph boxes carry ~8px of line-height leading that Figma's
		   glyph-hugging text frames do not, so matching Figma's nominal 32px
		   gap would read ~10px looser per gap. 1.72cqw lands the rendered
		   block on the handoff's 146-573. Gap does not affect wrapping. */
		gap: 1.859cqw; /* ~22.3px */
	}

	.mt-headline {
		font-size: 1.8333cqw; /* 22px */
		/* The headline's two lines are stated explicitly by the <br> in the
		   markup, so do not let sub-pixel wrapping add a third. At 22px the ink
		   is 319 - identical to the handoff - but the advance lands on 323.32
		   against 323.32 available, an exact tie that rounding loses, breaking
		   "HAS BEEN ACQUIRED BY RH" after "BY". Desktop only: below 992 the
		   panel is narrower and the headline still needs to wrap freely. */
		white-space: nowrap;
	}

	.mt-body {
		/* 1cqw = 12px, NOT 13. Derived, not guessed: in the 322px column the
		   handoff breaks line 1 after "Designers". Measured in Chrome with RH
		   Serif, that string is 344px at 13px and 359px with the next word, so
		   the size must be <=12.17px (Designers fits) and >11.66px ("of" does
		   not). 12px is the clean value in that window. 13px was why our lines
		   held fewer words than the handoff's despite a wider column. */
		font-size: 1cqw; /* 12px */
		line-height: 1.75; /* = 21px, the pitch measured in the handoff */
	}

	.mt-hero__text .mt-textlink--lg {
		/* 15.5px rendered "EXPLORE RH ESTATES" 180 ink wide against the
		   handoff's 162, so 15.5 x (162/180) = 14. */
		font-size: 1.1667cqw; /* 14px */
	}

	.mt-hero__text .mt-textlink {
		/* The handoff sits its underline 4px under the text; ours sat 7px.
		   "EXPLORE RH ESTATES" is all caps, so the ink bottom IS the baseline -
		   the underline is at baseline + font descent + this padding. At 14px
		   the descent is ~2.9px, so 1px lands it on 4. (Was 3px, on a 15.5px
		   font whose descent is ~3.3px: 3.3 + 3 = 6.3, hence the 7px gap.) */
		padding-bottom: 0.0833cqw; /* 1px */
	}
}

/* == Portrait tiles (B&W photo on buff + caption) ========================= */
.mt-portrait {
	container-type: inline-size;
	position: relative;
	aspect-ratio: 5 / 6;
	margin: 0;
	background-color: var(--rh-buff);
}

.mt-portrait__media {
	position: absolute;
	top: 5.56%;
	left: 50%;
	transform: translateX(-50%);
	width: 86.67%;
	height: 82.08%; /* exact Figma crop box (520x591 within the 5:6 tile) */
	overflow: hidden;
}

.mt-portrait__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.mt-caption {
	position: absolute;
	top: 87.64%; /* = image bottom (5.56% + 82.08%) */
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	/* v6: was justify-content:center + gap:0.5cqw. Centring made the bottom gap
	   an accident of block height - our lines ran 15px apart against Figma's 12,
	   so the block was 11px too tall and the gap under it collapsed to 17px
	   while the product tile's tagline sat on 25px. In the handoff BOTH panels
	   clear the tile bottom by the same amount. Anchored to the bottom so that
	   clearance is an explicit value, and the line pitch tightened to match. */
	justify-content: flex-end;
	padding-bottom: 3.63cqw; /* lands the last caption row on y=695, as Figma */
	gap: 0;
	text-align: center;
	text-transform: uppercase;
	font-weight: 300;
	font-size: 1.583cqw;
	letter-spacing: 0.03em;
	line-height: 1.263; /* 12px pitch at a 600 tile (was ~15px) */
	color: var(--rh-black);
}

.mt-caption__name {
	font-size: 2.167cqw;
	letter-spacing: 0.024em;
	line-height: 1.08; /* 14px name-to-line-2 pitch, per Figma (was ~20px) */
	margin-bottom: 0;
}

/* == Product tiles (furniture fill + white overlays) ====================== */
.mt-product {
	container-type: inline-size;
	position: relative;
	aspect-ratio: 5 / 6;
	overflow: hidden;
	color: var(--rh-white);
	text-align: center;
}

.mt-product__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* -- Image crops -------------------------------------------------------------
   The client supplies each photo PRE-CROPPED to its frame, so every source file
   already matches its box exactly (product + hero tiles 5:6 = 2400x2880;
   portrait media 2080x2364 = the 86.67% x 82.08% inset box). object-fit:cover
   is therefore a straight fit with nothing trimmed - do NOT add object-position
   offsets here, they would re-crop the designer's crop. If a photo ever looks
   trimmed, the source file is the wrong aspect ratio, not the CSS. */

/* v5 note (client feedback 2026-07-28, applies to BOTH product tiles - the
   Figma note on the Jennifer panel reads "match changes to Diamond table"):
   logo scaled down ~5% and nudged up, and the title block moved up further
   still so the gap under the logo tightens rather than just following it. */
.mt-product__logo {
	position: absolute;
	top: 4.45%;
	left: 50%;
	transform: translateX(-50%);
	width: 18.15cqw; /* v4: 19.1cqw (-5%) */
	height: auto;
}

.mt-product__title {
	position: absolute;
	/* v4: 23.17% (glyphs y=174, gap under the logo 41px).
	   NOT the handoff's 22.24%/y=167: because note 1 shrinks the logo and lifts
	   it, y=167 would OPEN the gap to 46px - the opposite of note 2. This lands
	   the glyphs on y=153, a 32px gap under the new logo, which is the
	   handoff's own logo-to-title value. Honours notes 1 and 2 together. */
	top: 20.3%;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
}

.mt-product__name {
	margin: 0;
	font-weight: 300;
	font-size: 3.447cqw;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

.mt-product__by {
	/* v5: was "1cqw 0 0.6cqw" (9.6px at a 600 tile). That slack pushed the
	   signature + "circa 2026" ~8px below Figma 63:14. Tightened to lift the
	   whole lower half of the title block onto the handoff's positions. */
	margin: 0.27cqw 0 0;
	font-weight: 300;
	font-size: 1.766cqw;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.mt-product__sig {
	width: 29.3cqw;
	height: auto;
	margin: 0 auto;
}

.mt-product__circa {
	margin: -0.6cqw 0 0; /* pull up: signature SVG carries some bottom whitespace */
	font-weight: 300;
	font-size: 1.766cqw;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.mt-product__cta {
	display: inline-block;
	/* v5: was 3.3cqw and commented "matches Figma" - it did NOT. Measured against
	   node 63:14 the CTA sat 17px low on a 1200-wide render, because this gap was
	   ~10px looser than the handoff. Then tightening __by lifted this block a
	   further 8px, so that 8px is handed back here to keep the CTA on y=275. */
	margin-top: 2.93cqw;
	color: var(--rh-white);
	font-size: 1.667cqw;
	white-space: nowrap;
}

/* v5: the tagline sits ON the photo, so the only way to open up the gap between
   the furniture and the text is to drop the tagline nearer the tile foot -
   i.e. a SMALLER bottom offset. Client note says "reduce padding so tagline is
   not so close to table"; the intent is more breathing room, not less. */
.mt-product__tagline {
	position: absolute;
	bottom: 2.86%; /* v4: 4.44%. Lands the tagline glyphs on Figma 63:14's y=688 */
	left: 15%;
	right: 15%;
	margin: 0;
	font-weight: 300;
	font-size: 1.883cqw;
	letter-spacing: 0.02em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* == Stacked single column: tablet + mobile (QA breakpoint: 992) ========== */
@media (max-width: 991px) {
	.mt-hero,
	.mt-band {
		grid-template-columns: minmax(0, 1fr);
	}

	/* 32px buff gap between the hero and the tile stack; tiles stay flush. */
	.mt-hero {
		margin-bottom: 32px;
	}

	.mt-hero__panel {
		padding: 32px 26px 8px;
	}

	/* Diamond band flips on mobile: product tile above the working photo. */
	.mt-band--diamond .mt-product {
		order: -1;
	}

	/* Portraits go edge-to-edge on mobile (fill the width) instead of the
	   inset 86.67% box used at desktop. Image flows above, caption below. */
	.mt-portrait {
		aspect-ratio: auto;
		padding-bottom: 18px;
	}

	.mt-portrait__media {
		position: static;
		transform: none;
		width: 100%;
		height: auto;
		aspect-ratio: 2080 / 2364; /* the supplied crop's own ratio - shows it whole, no side trim */
	}

	.mt-portrait__media img {
		height: 100%;
	}

	.mt-caption {
		position: static;
		margin-top: 14px;
		font-size: 11px;
	}

	.mt-caption__name {
		font-size: 14px;
	}
}

/* NOTE: v3 shortened the hero to 9:10 on the narrowest phones so the text sat
   higher. That trimmed the bottom of the frame, so it is gone in v4 - the
   supplied 5:6 hero crop now shows whole at every width. */