/* Miss Horlogerie — single article + watch-specs column. */

.mh-article { padding-bottom: clamp( 48px, 8vh, 96px ); }

/* ---- Hero ---- */
.mh-article__hero {
	position: relative;
	height: clamp( 60vh, 78svh, 860px );
	min-height: 460px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	color: #fff;
}
.mh-article__hero-media {
	position: absolute;
	inset: 0;
	margin: 0;
	/* The shared element that morphs from the slider during the View Transition. */
	view-transition-name: mh-hero;
}
.mh-article__hero-media img,
.mh-article__hero-media picture { width: 100%; height: 100%; }
.mh-article__hero-media > picture > img { object-fit: cover; }
.mh-article__hero-scrim {
	position: absolute; inset: 0;
	background: linear-gradient( 0deg, rgba( 0, 0, 0, .72 ) 0%, rgba( 0, 0, 0, .12 ) 55%, rgba( 0, 0, 0, .28 ) 100% );
}
/* Back-to-overview link, top-left of the hero. */
.mh-article__back {
	position: absolute;
	top: clamp( 84px, 12vh, 120px );
	left: clamp( 20px, 5vw, 48px );
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px 9px 12px;
	color: #fff;
	text-decoration: none;
	font-size: .76rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	background: rgba( 0, 0, 0, .32 );
	border: 1px solid rgba( 255, 255, 255, .28 );
	border-radius: 100px;
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
	transition: background .25s ease, transform .25s ease, gap .25s ease;
}
.mh-article__back:hover {
	background: rgba( 0, 0, 0, .5 );
	gap: 12px;
}
.mh-article__back-icon { flex-shrink: 0; transition: transform .25s ease; }
.mh-article__back:hover .mh-article__back-icon { transform: translateX( -2px ); }

.mh-article__hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-bottom: clamp( 36px, 7vh, 80px );
	/* Named group so view-transitions.php can animate the text independently
	   from the hero image morph — rises in after the image settles. */
	view-transition-name: mh-hero-text;
}
.mh-article__cat {
	display: inline-flex; align-items: center; gap: 12px;
	font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 600;
	color: var( --mh-primary ); text-decoration: none; margin-bottom: 18px;
}
.mh-article__cat::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.mh-article__title {
	color: #fff;
	font-size: clamp( 2rem, 5.4vw, 4.6rem );
	line-height: .98;
	letter-spacing: -.02em;
	margin: 0 0 18px;
	max-width: 18ch;
	text-wrap: balance;
}
.mh-article__meta {
	display: flex; gap: 18px; align-items: center;
	font-size: .82rem; letter-spacing: .04em; opacity: .9;
}
.mh-article__by::before { content: "—"; margin-right: 8px; opacity: .6; }

/* ---- Body: two columns ---- */
.mh-article__body {
	max-width: 1140px;
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 320px;
	gap: clamp( 32px, 5vw, 72px );
	margin-top: clamp( 40px, 7vh, 84px );
}
.mh-article__lead {
	font-family: var( --mh-font-heading );
	font-size: clamp( 1.3rem, 1.9vw, 1.7rem );
	line-height: 1.45;
	font-weight: 500;
	letter-spacing: -.01em;
	color: var( --mh-dark );
	margin: 0 0 36px;
}
.mh-article__content {
	font-size: 1.08rem;
	line-height: 1.8;
	color: #2b2b2b;
}
.mh-article__content > * { margin-block: 0 1.4em; }
/* Editorial gold drop cap on the opening paragraph. */
.mh-article__content > p:first-of-type::first-letter {
	float: left;
	font-family: var( --mh-font-heading );
	font-size: 3.4em;
	line-height: .78;
	margin: 6px 14px 0 0;
	color: var( --mh-primary );
	font-weight: 600;
}
.mh-article__content h2 { font-size: clamp( 1.5rem, 2.4vw, 2rem ); margin-top: 1.6em; }
.mh-article__content h3 { font-size: 1.3rem; margin-top: 1.4em; }
.mh-article__content img { border-radius: 6px; margin-block: 1.6em; }
.mh-article__content blockquote {
	border-left: 3px solid var( --mh-primary );
	padding-left: 22px; margin-inline: 0; font-style: italic; color: #444;
}
.mh-article__content a { color: var( --mh-dark ); text-decoration: underline; text-decoration-color: var( --mh-primary ); text-underline-offset: 3px; }

.mh-article__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 36px 0 0; }
.mh-article__tags li a {
	display: inline-block; font-size: .76rem; letter-spacing: .06em;
	padding: 6px 12px; border: 1px solid #e3ded6; border-radius: 100px; text-decoration: none; color: #555;
}

/* ---- Specs column ---- */
.mh-specs__sticky { position: sticky; top: 96px; }
.mh-specs__title {
	font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
	color: var( --mh-primary );
	padding-bottom: 14px; margin: 0 0 6px;
	border-bottom: 2px solid var( --mh-dark );
}
.mh-specs__list { margin: 0; }
.mh-specs__row {
	display: flex; justify-content: space-between; gap: 16px;
	padding: 13px 0;
	border-bottom: 1px solid #ece7df;
}
.mh-specs__row dt { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: #8a8378; margin: 0; }
.mh-specs__row dd { margin: 0; font-weight: 600; text-align: right; color: var( --mh-dark ); }

/* ---- Post nav ---- */
.mh-postnav {
	max-width: 1140px;
	margin-top: clamp( 48px, 8vh, 96px );
	border-top: 1px solid #ece7df;
	padding-top: clamp( 28px, 5vh, 48px );
}
.mh-postnav .nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}
.mh-postnav .nav-previous { display: flex; }
.mh-postnav .nav-next     { display: flex; justify-content: flex-end; grid-column: 2; }
.mh-postnav a {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-decoration: none;
	max-width: 40ch;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	transition: border-color .3s ease, gap .3s ease;
}
.mh-postnav a:hover { border-color: var( --mh-primary ); gap: 16px; }
.mh-nav__lbl {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .68rem;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var( --mh-primary );
	font-weight: 600;
}
/* Animated dash before "Previous" */
.mh-postnav .nav-previous .mh-nav__lbl::before {
	content: '';
	display: block;
	width: 24px;
	height: 1px;
	background: currentColor;
	transition: width .3s ease;
	flex-shrink: 0;
}
.mh-postnav .nav-previous a:hover .mh-nav__lbl::before { width: 40px; }
/* Animated dash after "Next" */
.mh-postnav .nav-next .mh-nav__lbl { flex-direction: row-reverse; }
.mh-postnav .nav-next .mh-nav__lbl::after {
	content: '';
	display: block;
	width: 24px;
	height: 1px;
	background: currentColor;
	transition: width .3s ease;
	flex-shrink: 0;
}
.mh-postnav .nav-next a:hover .mh-nav__lbl::after { width: 40px; }
.mh-nav__title {
	font-family: var( --mh-font-heading, inherit );
	font-size: clamp( 1.05rem, 1.6vw, 1.35rem );
	font-weight: 700;
	line-height: 1.2;
	color: var( --mh-dark );
	text-wrap: balance;
}
.mh-postnav .nav-next .mh-nav__title { text-align: right; }

/* ---- Responsive ---- */
@media ( max-width: 900px ) {
	.mh-article__body { grid-template-columns: 1fr; }
	.mh-specs { order: 2; }
	.mh-specs__sticky { position: static; }
	.mh-specs { background: #faf8f4; border-radius: 8px; padding: 22px 24px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.mh-article__hero-media { view-transition-name: none; }
}