/* Melaaura Home — Brands in Residence. Scoped under .mh-brands.
 * [data-brand-prev] crossfade + [data-brand-row] active states live here (not in base).
 * Uses the shared mela-marquee keyframe from melaaura-home-base. */

.mh-brands{
	background:#F7F5F1;
	padding:clamp(76px,12vh,160px) clamp(20px,5vw,100px) clamp(56px,8vh,90px);
}
.mh-brands__wrap{max-width:1360px;margin:0 auto;}

/* ---- Header ---- */
.mh-brands__head{
	display:flex;justify-content:space-between;align-items:flex-end;
	gap:clamp(32px,5vw,60px);flex-wrap:wrap;margin-bottom:clamp(44px,6vh,60px);
}
.mh-brands__eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:26px;}
.mh-brands__eyebrow i{width:36px;height:1px;background:var(--mh-gold);display:block;}
.mh-brands__eyebrow span{font-size:12px;letter-spacing:0.28em;text-transform:uppercase;color:var(--mh-mute);font-weight:500;}
.mh-brands__title{
	font-weight:400;font-size:clamp(34px,4.4vw,72px);line-height:1.02;
	letter-spacing:-0.01em;color:var(--mh-ink);margin:0;
}
.mh-brands__intro{
	font-weight:300;font-size:clamp(15px,1.05vw,17.5px);line-height:1.8;
	color:#4B463F;max-width:400px;margin:0;
}

/* ---- Body grid ---- */
.mh-brands__grid{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
	gap:clamp(40px,6vw,88px);align-items:start;
}

/* ---- Brand rows ---- */
.mh-brands__row{
	display:flex;justify-content:space-between;align-items:baseline;gap:24px;
	padding:26px 2px;border-bottom:1px solid rgba(22,19,15,0.14);
	text-decoration:none;color:var(--mh-ink);transition:color .3s ease;
}
.mh-brands__row:first-child{border-top:1px solid var(--mh-ink);}
.mh-brands__name{font-size:clamp(32px,3vw,50px);line-height:1;transition:color .3s ease;}
.mh-brands__row[data-active="1"] .mh-brands__name{color:var(--mh-gold);}
.mh-brands__meta-wrap{display:flex;align-items:center;gap:16px;flex:none;}
.mh-brands__meta{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--mh-mute);}
.mh-brands__arrow{
	width:36px;height:36px;border-radius:50%;border:1px solid currentColor;
	display:inline-flex;align-items:center;justify-content:center;flex:none;
	transition:background .35s ease,color .35s ease,border-color .35s ease,transform .35s ease;
}
.mh-brands__row[data-active="1"] .mh-brands__arrow{
	background:var(--mh-gold);border-color:var(--mh-gold);color:#fff;transform:translate(2px,-2px);
}

/* ---- Also in residence ---- */
.mh-brands__also{margin-top:34px;padding-top:0;}
.mh-brands__also-label{font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--mh-mute);margin-bottom:16px;}
.mh-brands__tags{display:flex;flex-wrap:wrap;gap:10px;}
.mh-brands__tag{
	font-size:12px;letter-spacing:0.05em;color:var(--mh-ink);text-decoration:none;
	border:1px solid rgba(22,19,15,0.22);padding:9px 16px;border-radius:999px;
	transition:border-color .3s ease,color .3s ease;
}
.mh-brands__tag:hover{border-color:var(--mh-gold);color:var(--mh-gold);}
.mh-brands__tag--muted{
	border:0;padding:9px 6px;color:var(--mh-mute);text-transform:uppercase;letter-spacing:0.16em;
}
.mh-brands__tag--muted:hover{color:var(--mh-gold);}

/* ---- Index button ---- */
.mh-brands__cta-wrap{margin-top:36px;}
.mh-brands__index{
	display:inline-flex;align-items:center;gap:12px;font-size:12px;letter-spacing:0.14em;
	text-transform:uppercase;font-weight:500;color:var(--mh-ink);border:1px solid var(--mh-ink);
	padding:15px 26px;border-radius:999px;text-decoration:none;
	transition:background .35s ease,color .35s ease;
}
.mh-brands__index:hover{background:var(--mh-ink);color:#F7F5F1;}

/* ---- Preview stage (crossfade) ---- */
.mh-brands__preview{position:sticky;top:120px;}
.mh-brands__stage{
	position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:20px;background:var(--mh-ink);
}
.mh-brands__prev{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;pointer-events:none;}
.mh-brands__prev[data-active="1"]{opacity:1;}
.mh-brands__prev-img{position:absolute;inset:0;width:100% !important;height:100% !important;object-fit:cover !important;}
.mh-brands__prev-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0) 52%);pointer-events:none;}
.mh-brands__prev-cap{
	position:absolute;left:24px;bottom:22px;color:#fff;font-size:11px;letter-spacing:0.24em;
	text-transform:uppercase;text-shadow:0 1px 10px rgba(0,0,0,0.5);
}

/* ---- Marquee ---- */
.mh-brands__marquee{
	margin-top:clamp(58px,8vh,92px);border-top:1px solid rgba(22,19,15,0.12);
	border-bottom:1px solid rgba(22,19,15,0.12);padding:30px 0;overflow:hidden;
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
	mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.mh-brands__track{display:flex;gap:clamp(48px,6vw,96px);width:max-content;animation:mela-marquee 28s linear infinite;}
.mh-brands__mq{font-size:clamp(24px,2.4vw,38px);color:var(--mh-ink);letter-spacing:0.02em;white-space:nowrap;}
.mh-brands__mq:nth-child(even){color:#B6AEA0;}

@media (max-width:768px){
	.mh-brands__preview{position:static;}
	.mh-brands__head{align-items:flex-start;}
}