/* ============================================================
   Melaaura — Featured Collections (rey-child)
   Plain full-width image banners: photo, name, whole band links.
   DM Sans throughout — no serif, no italics, no counters.

   Two things the layout depends on:
   · The page title and every banner name share --col-pad as their left
     inset, so all the type on the page sits on one vertical line. The
     intro deliberately has NO centred max-width wrap — that is what made
     the title drift right of the images.
   · Banner height comes from aspect-ratio, not a vh value. A fixed vh
     height on a full-bleed band works out near 2.9:1 on desktop, which
     threw away ~half of every (roughly 3:2) source photo.
   ============================================================ */

.mh.col{
	--col-ink:#16130F;
	/* Plain white page — the site's cream (#FBF9F5) read as yellow behind the photos. */
	--col-ivory:#FFFFFF;
	--col-pad:clamp(24px,5vw,96px);
	--col-gap:clamp(14px,1.8vw,30px);
	position:relative; width:100%;
	background:var(--col-ivory); color:var(--col-ink);
	font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* The .mh base forces every heading to Cormorant, and the Elementor kit
   styles heading TAGS at (0,1,1) — a bare class selector loses to both. */
.mh.col h1, .mh.col h2, .mh.col h3, .mh.col .col-band__name{
	font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
	font-style:normal !important;
}


/* ---------------------------------------------------------- intro */
.col-intro__wrap{
	padding:clamp(112px,15vh,184px) var(--col-pad) clamp(30px,3.6vw,56px);
}
.mh.col .col-intro__title{
	font-weight:500 !important; font-size:clamp(26px,2.6vw,38px) !important;
	line-height:1.15; letter-spacing:-.015em; margin:0; color:var(--col-ink);
}
.col-intro__sub{
	font-size:15px; line-height:1.65; color:#6B655B;
	margin:12px 0 0; max-width:58ch;
}


/* ---------------------------------------------------------- banner */
.mh.col.col-band{
	display:block; padding:0;
	background:var(--col-ivory);
	margin-bottom:var(--col-gap);
}
.col-band__link{
	position:relative; display:block; overflow:hidden;
	text-decoration:none; cursor:pointer;
	aspect-ratio:16/9; max-height:88vh;
	background:#1A1713;
}
.col-band__img{
	position:absolute; inset:0;
	width:100% !important; height:100% !important;
	object-fit:cover !important; object-position:var(--col-band-pos,center 50%);
	transform:scale(1.005);
	transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.col-band__link:hover .col-band__img,
.col-band__link:focus-visible .col-band__img{ transform:scale(1.035); }

/* Bottom wash only — enough to hold the name at 4.5:1 over a bright photo. */
.col-band__veil{
	position:absolute; inset:0; pointer-events:none;
	background:linear-gradient(180deg, rgba(10,9,7,.06) 0%, rgba(10,9,7,0) 36%, rgba(10,9,7,.64) 100%);
}
.col-band__veil::after{
	content:""; position:absolute; inset:0;
	background:rgba(10,9,7,calc(var(--col-band-tint,8) / 100));
}
.col-band__name{
	position:absolute; z-index:2; left:0; right:0; bottom:0;
	display:block; padding:clamp(22px,2.8vw,44px) var(--col-pad);
	color:#FFFFFF; font-weight:500;
	font-size:clamp(22px,2.2vw,34px); line-height:1.2; letter-spacing:-.005em;
	text-shadow:0 1px 12px rgba(0,0,0,.4);
}

.mh.col a:focus-visible{ outline:2px solid #FFFFFF; outline-offset:-6px; }

/* Source photos are roughly 3:2, so ease the frame towards them as the
   viewport narrows instead of cropping harder. */
@media (max-width:1024px){
	.col-band__link{ aspect-ratio:3/2; }
}
@media (max-width:640px){
	.col-band__link{ aspect-ratio:4/3; max-height:none; }
}

@media (prefers-reduced-motion: reduce){
	.col-band__img{ transition:none; transform:none; }
	.col-band__link:hover .col-band__img,
	.col-band__link:focus-visible .col-band__img{ transform:none; }
}