/* MahilStyle Newsroom — scoped under .msn. Shares the stylist's type and colour tokens. */

.msn {
	--msn-ink: #16191f;
	--msn-paper: #f7f5f0;
	--msn-card: #ffffff;
	--msn-rule: #dcd8ce;
	--msn-muted: #5d6472;
	--msn-brass: #a8843a;
	--msn-brass-ink: #7a5f24;
	--msn-focus: #3b5bdb;
	--msn-display: "Gloock", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--msn-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-family: var(--msn-body);
	color: var(--msn-ink);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}
.msn *, .msn *::before, .msn *::after { box-sizing: inherit; }
.msn a { color: inherit; }
.msn img { max-width: 100%; height: auto; display: block; }
.msn :focus-visible { outline: 2px solid var(--msn-focus); outline-offset: 2px; }
.msn ul, .msn ol { padding: 0; margin: 0; }

/* ---------- Type ---------- */
.msn .msn-kicker {
	display: inline-block;
	margin: 0 0 8px;
	font: 600 12px/1.2 var(--msn-body);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--msn-brass-ink);
	text-decoration: none;
}
.msn a.msn-kicker:hover { text-decoration: underline; text-underline-offset: 3px; }
.msn .msn-h2 { font: 400 clamp(24px, 3vw, 30px)/1.15 var(--msn-display); margin: 0; letter-spacing: -.005em; }
.msn .msn-h3 { font: 600 13px/1.2 var(--msn-body); letter-spacing: .12em; text-transform: uppercase; margin: 0; }
.msn .msn-h4 { font: 600 12px/1.2 var(--msn-body); letter-spacing: .12em; text-transform: uppercase; color: var(--msn-muted); margin: 0 0 10px; }
.msn .msn-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; font-size: 13px; color: var(--msn-muted); }
.msn .msn-meta span::before { content: "·"; margin-right: 12px; }
.msn .msn-empty { padding: 28px; background: var(--msn-paper); border: 1px dashed var(--msn-rule); color: var(--msn-muted); text-align: center; margin: 24px 0; }

/* ---------- Masthead, sections, search ---------- */
.msn .msn-mast { border-bottom: 1px solid var(--msn-ink); padding: 8px 0 0; margin-bottom: 28px; }
.msn .msn-mast__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; padding-bottom: 18px; }
.msn .msn-mast__title { font: 400 clamp(40px, 7vw, 76px)/.95 var(--msn-display); margin: 0; letter-spacing: -.02em; }
.msn .msn-mast__dek { margin: 10px 0 0; max-width: 46ch; color: var(--msn-muted); }
.msn .msn-search { display: flex; min-width: min(100%, 340px); border-bottom: 1px solid var(--msn-ink); }
.msn .msn-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; padding: 10px 2px; color: var(--msn-ink); }
.msn .msn-search input:focus { outline: none; }
.msn .msn-search:focus-within { box-shadow: 0 2px 0 var(--msn-focus); }
.msn .msn-search button { border: 0; background: none; font: 600 13px var(--msn-body); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; padding: 0 4px; color: var(--msn-ink); }
.msn .msn-secnav { border-top: 1px solid var(--msn-rule); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.msn .msn-secnav::-webkit-scrollbar { display: none; }
.msn .msn-secnav ul { display: flex; gap: 22px; list-style: none; white-space: nowrap; padding: 12px 0; }
.msn .msn-secnav a { font-size: 14px; font-weight: 500; text-decoration: none; color: var(--msn-muted); padding: 4px 0; }
.msn .msn-secnav a:hover, .msn .msn-secnav a[aria-current] { color: var(--msn-ink); box-shadow: inset 0 -2px 0 var(--msn-brass); }

/* ---------- Blocks & grids ---------- */
.msn .msn-block { margin: 44px 0; }
.msn .msn-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-top: 2px solid var(--msn-ink); padding-top: 12px; margin-bottom: 20px; }
.msn .msn-block__note { margin: 0; color: var(--msn-muted); font-size: 14px; }
.msn .msn-more { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.msn .msn-more::after { content: " →"; }
.msn .msn-grid { display: grid; gap: 32px 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .msn .msn-grid--3, .msn .msn-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .msn .msn-grid--3 { grid-template-columns: repeat(3, 1fr); } .msn .msn-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Article cards ---------- */
.msn .msn-card { display: flex; flex-direction: column; gap: 12px; }
.msn .msn-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--msn-paper); text-decoration: none; }
.msn .msn-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.msn .msn-card:hover .msn-card__img { transform: scale(1.03); }
/* No licensed image: a typographic panel instead of a stock photo. */
.msn .msn-card__type { display: flex; align-items: flex-end; width: 100%; height: 100%; padding: 16px; background: #1f2430; color: #f1ece2; font: 400 clamp(22px, 2.4vw, 30px)/1 var(--msn-display); position: relative; }
.msn .msn-card__type::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(241, 236, 226, .25); }
.msn .msn-card__type[data-sec="luxury-fashion"], .msn .msn-card__type[data-sec="watches"] { background: #2b2418; color: #e9d9b4; }
.msn .msn-card__type[data-sec="beauty"], .msn .msn-card__type[data-sec="skincare"] { background: #e9ddd3; color: #4a2f2a; }
.msn .msn-card__type[data-sec="beauty"]::before, .msn .msn-card__type[data-sec="skincare"]::before { border-color: rgba(74, 47, 42, .25); }
.msn .msn-card__type[data-sec="grooming"], .msn .msn-card__type[data-sec="menswear"] { background: #233040; }
.msn .msn-card__type[data-sec="indian-fashion"] { background: #5c1f24; color: #f3e1c4; }
.msn .msn-card__type[data-sec="sneakers"], .msn .msn-card__type[data-sec="street-style"] { background: #e7e4dc; color: #16191f; }
.msn .msn-card__type[data-sec="sneakers"]::before, .msn .msn-card__type[data-sec="street-style"]::before { border-color: rgba(22, 25, 31, .2); }
.msn .msn-card__type[data-sec="fashion-week"], .msn .msn-card__type[data-sec="celebrity-style"] { background: #121212; }
.msn .msn-card__type[data-sec="womenswear"] { background: #6b4a52; }
.msn .msn-card__title { font: 400 21px/1.2 var(--msn-display); margin: 0; letter-spacing: -.003em; }
.msn .msn-card__title a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .25s ease; }
.msn .msn-card__title a:hover { background-size: 100% 1px; }
.msn .msn-card__dek { margin: 6px 0 0; color: #3d4350; font-size: 15px; line-height: 1.5; }
.msn .msn-card__body .msn-kicker { margin-bottom: 6px; }
.msn .msn-card--lead .msn-card__media { aspect-ratio: 16 / 10; }
.msn .msn-card--lead .msn-card__type { font-size: clamp(34px, 5vw, 64px); padding: 28px; }
.msn .msn-card--lead .msn-card__title { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.08; }
.msn .msn-card--lead .msn-card__dek { font-size: 18px; max-width: 60ch; }
.msn .msn-card--row { flex-direction: row; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--msn-rule); }
.msn .msn-card--row .msn-card__media { flex: 0 0 96px; aspect-ratio: 1; }
.msn .msn-card--row .msn-card__type { font-size: 13px; padding: 10px; }
.msn .msn-card--row .msn-card__type::before { inset: 6px; }
.msn .msn-card--row .msn-card__title { font-size: 18px; }
.msn .msn-card--row .msn-card__dek { display: none; }
.msn .msn-card--mini .msn-card__title { font-size: 18px; }

/* ---------- Home top ---------- */
.msn .msn-top { display: grid; gap: 32px; }
@media (min-width: 960px) { .msn .msn-top { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; } .msn .msn-top__latest { border-left: 1px solid var(--msn-rule); padding-left: 32px; } }
.msn .msn-top__latest .msn-block__head { border-top: 0; padding-top: 0; margin-bottom: 4px; }
.msn .msn-top__latest .msn-card--row:last-child { border-bottom: 0; }
.msn .msn-mostread ol { list-style: none; counter-reset: mr; display: grid; gap: 20px 32px; }
@media (min-width: 760px) { .msn .msn-mostread ol { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.msn .msn-mostread li { counter-increment: mr; display: flex; gap: 14px; }
.msn .msn-mostread li::before { content: counter(mr); font: 400 44px/0.9 var(--msn-display); color: var(--msn-brass); min-width: 30px; }

/* ---------- Trend cards ---------- */
.msn .msn-tgrid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .msn .msn-tgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .msn .msn-tgrid { grid-template-columns: repeat(4, 1fr); } }
.msn .msn-tcard a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 18px 18px 20px; background: var(--msn-paper); border: 1px solid var(--msn-rule); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.msn .msn-tcard a:hover { border-color: var(--msn-ink); transform: translateY(-2px); }
.msn .msn-tcard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.msn .msn-tcard__name { font: 400 24px/1.1 var(--msn-display); }
.msn .msn-tcard__dek { font-size: 14px; color: var(--msn-muted); line-height: 1.45; }
.msn .msn-sws { display: inline-flex; }
.msn .msn-sw { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); margin-left: -4px; vertical-align: middle; }
.msn .msn-chips .msn-sw { margin: 0 6px 0 0; }
.msn .msn-mom { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font: 600 11px/1.4 var(--msn-body); letter-spacing: .1em; text-transform: uppercase; border: 1px solid currentColor; }
.msn .msn-mom::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.msn .msn-mom--hot { color: #b3361b; }
.msn .msn-mom--rising { color: #2f6b45; }
.msn .msn-mom--stable { color: #3d4f6e; }
.msn .msn-mom--cooling { color: #7a6a3a; }
.msn .msn-mom--declining { color: #6c6c6c; }
.msn .msn-mom--insufficient { color: var(--msn-muted); border-style: dashed; }
.msn .msn-mom--insufficient::before { background: transparent; border: 1px solid currentColor; }

/* ---------- Guide cards ---------- */
.msn .msn-ggrid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .msn .msn-ggrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .msn .msn-ggrid { grid-template-columns: repeat(3, 1fr); } }
.msn .msn-gcard a { display: flex; flex-direction: column; gap: 6px; text-decoration: none; height: 100%; }
.msn .msn-gcard--noimg a { padding: 22px; border-top: 3px solid var(--msn-brass); background: var(--msn-paper); }
.msn .msn-gcard__media { aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 8px; }
.msn .msn-gcard__media img { width: 100%; height: 100%; object-fit: cover; }
.msn .msn-gcard__title { font: 400 22px/1.15 var(--msn-display); }
.msn .msn-gcard__dek { font-size: 14px; color: var(--msn-muted); }

/* ---------- Single pages ---------- */
.msn-article, .msn-trend, .msn-guide { max-width: 1120px; margin: 0 auto; }
.msn .msn-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; font-size: 13px; color: var(--msn-muted); margin-bottom: 18px; }
.msn .msn-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--msn-rule); }
.msn .msn-crumbs a { text-decoration: none; }
.msn .msn-crumbs a:hover { text-decoration: underline; }
.msn .msn-head { max-width: 720px; margin: 0 0 28px; }
.msn .msn-standfirst { font: 400 clamp(20px, 2.4vw, 24px)/1.4 var(--msn-display); margin: 0 0 18px; color: #2a2f3a; }
.msn .msn-byline { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--msn-muted); padding: 12px 0; border-top: 1px solid var(--msn-rule); border-bottom: 1px solid var(--msn-rule); margin: 0; }
.msn .msn-byline > * + *::before { content: "·"; margin-right: 14px; }
.msn .msn-credit { font-size: 12px; color: var(--msn-muted); margin: -16px 0 24px; }
.msn .msn-body { max-width: 720px; font-size: 18px; line-height: 1.7; }
.msn .msn-body > * + * { margin-top: 1.1em; }
.msn .msn-body h2 { font: 400 28px/1.2 var(--msn-display); margin-top: 1.6em; }
.msn .msn-body h3 { font: 600 19px/1.3 var(--msn-body); margin-top: 1.4em; }
.msn .msn-body ul, .msn .msn-body ol { padding-left: 1.3em; }
.msn .msn-body li + li { margin-top: .4em; }
.msn .msn-body a { text-decoration-color: var(--msn-brass); text-underline-offset: 3px; }
.msn .msn-body blockquote { margin: 1.6em 0; padding-left: 20px; border-left: 3px solid var(--msn-brass); font: 400 22px/1.4 var(--msn-display); }
.msn .msn-sources { max-width: 720px; margin: 40px 0; padding: 20px 22px; background: var(--msn-paper); border-left: 3px solid var(--msn-ink); font-size: 15px; }
.msn .msn-sources ul { list-style: none; margin: 12px 0; display: grid; gap: 6px; }
.msn .msn-sources li { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.msn .msn-sources li a { font-weight: 600; }
.msn .msn-sources li span { color: var(--msn-muted); font-size: 14px; }
.msn .msn-sources p { margin: 0; color: var(--msn-muted); font-size: 14px; }

/* Trend page */
.msn .msn-trend__signal { margin-top: 18px; padding: 18px 0; border-top: 1px solid var(--msn-rule); border-bottom: 1px solid var(--msn-rule); }
.msn .msn-trend__mom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.msn .msn-score { font-size: 14px; color: var(--msn-muted); }
.msn .msn-score strong { font: 400 30px/1 var(--msn-display); color: var(--msn-ink); margin-right: 2px; }
.msn .msn-trend__reason { margin: 12px 0 0; font-size: 16px; }
.msn .msn-bars { list-style: none; display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 170px; padding-top: 20px; border-bottom: 1px solid var(--msn-ink); }
.msn .msn-bars li { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.msn .msn-bars li::before { content: ""; display: block; height: var(--h); background: var(--msn-ink); min-height: 2px; }
.msn .msn-bars li:last-child::before { background: var(--msn-brass); }
.msn .msn-bars__n { position: absolute; left: 0; right: 0; bottom: calc(var(--h) + 4px); text-align: center; font-size: 12px; color: var(--msn-muted); }
.msn .msn-bars__lbl { position: absolute; top: 100%; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--msn-muted); padding-top: 4px; white-space: nowrap; }
.msn .msn-bars li:nth-child(odd) .msn-bars__lbl { visibility: hidden; }
@media (min-width: 640px) { .msn .msn-bars li:nth-child(odd) .msn-bars__lbl { visibility: visible; } }
.msn .msn-evo { padding-bottom: 20px; }
.msn .msn-anat__grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .msn .msn-anat__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .msn .msn-anat__grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
.msn .msn-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.msn .msn-chips li { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--msn-rule); border-radius: 999px; font-size: 14px; background: var(--msn-card); }
.msn .msn-list { padding-left: 1.1em !important; font-size: 15px; }
.msn .msn-list li + li { margin-top: 6px; }
.msn .msn-method { margin: 40px 0; padding: 16px 20px; border: 1px solid var(--msn-rule); font-size: 14px; color: var(--msn-muted); }
.msn .msn-method summary { cursor: pointer; font-weight: 600; color: var(--msn-ink); }
.msn .msn-method p { margin: 10px 0 0; }

/* ---------- Products (reuse stylist look cards) ---------- */
.msn .msn-mss { font-family: var(--msn-body); }
.msn .msn-looks { display: grid; gap: 24px; }
.msn .msn-pgrid { list-style: none; display: grid; gap: 24px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .msn .msn-pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.msn .msn-prod a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; height: 100%; }
.msn .msn-prod__img { aspect-ratio: 4 / 5; background: var(--msn-paper); overflow: hidden; margin-bottom: 8px; }
.msn .msn-prod__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.msn .msn-prod a:hover img { transform: scale(1.04); }
.msn .msn-prod__brand { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--msn-muted); }
.msn .msn-prod__name { font-size: 15px; line-height: 1.35; }
.msn .msn-prod__meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.msn .msn-prod__price { font-weight: 600; }
.msn .msn-prod__note { font-size: 12px; color: var(--msn-muted); }
.msn .msn-prod__cta { margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--msn-brass); }
.msn .mss-disclosure { margin-top: 18px; font-size: 12px; color: var(--msn-muted); }

/* ---------- Stylist CTA ---------- */
.msn .msn-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin: 48px 0; padding: 32px; background: var(--msn-ink); color: #f3efe6; }
.msn .msn-cta .msn-kicker { color: #d9bd7a; }
.msn .msn-cta__title { font: 400 clamp(26px, 3.2vw, 36px)/1.1 var(--msn-display); margin: 0 0 8px; color: #fff; }
.msn .msn-cta p { margin: 0; color: #cfcabf; }
.msn .msn-cta .msn-cta__q { margin-top: 6px; font: 400 20px/1.3 var(--msn-display); color: #fff; }
.msn .msn-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border-radius: 999px; background: #f3efe6; color: var(--msn-ink); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .15s ease; }
.msn .msn-btn:hover { background: #fff; }

/* ---------- Shop the trend (homepage) ---------- */
.msn-shoptrend .msn-block__head { align-items: center; }
.msn-shoptrend .msn-block__head .msn-kicker { margin-bottom: 4px; }
.msn-shoptrend .msn-h2 a { text-decoration: none; }
.msn-shoptrend .msn-products { margin: 0; }
.msn-shoptrend__more { font-size: 14px; font-weight: 600; }

/* ---------- Pager, search ---------- */
.msn .msn-pager { display: flex; justify-content: center; align-items: center; gap: 24px; margin: 40px 0; font-size: 15px; }
.msn .msn-pager a { font-weight: 600; text-decoration: none; padding: 10px 16px; border: 1px solid var(--msn-ink); border-radius: 999px; }
.msn .msn-pager span { color: var(--msn-muted); }
.msn .msn-search__count { font-size: 15px; color: var(--msn-muted); }
.msn .msn-search__brands { font-size: 15px; }

@media (max-width: 639px) {
	.msn { font-size: 16px; }
	.msn .msn-block { margin: 32px 0; }
	.msn .msn-body { font-size: 17px; }
	.msn .msn-cta { padding: 24px 20px; }
	.msn .msn-cta .msn-btn { width: 100%; }
	.msn .msn-card--lead .msn-card__type { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.msn *, .msn *::before { transition: none !important; }
}

/* ---------- Break out of narrow theme content columns ---------- */
.msn.msn-wide {
	width: min(1200px, calc(100vw - 32px));
	max-width: none;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
.msn-article .msn-crumbs, .msn-article .msn-head, .msn-article .msn-credit, .msn-article > .msn-body, .msn-article .msn-sources,
.msn-guide .msn-crumbs, .msn-guide .msn-head, .msn-guide .msn-credit, .msn-guide > .msn-body,
.msn-trend .msn-crumbs, .msn-trend .msn-head { max-width: 720px; margin-left: auto; margin-right: auto; }
.msn-article .msn-crumbs ol, .msn-guide .msn-crumbs ol, .msn-trend .msn-crumbs ol { justify-content: flex-start; }
/* Index pages render their own masthead; hide the theme's duplicate page title there. */
.msn-index-page .wp-block-post-title, .msn-index-page .entry-title, .msn-index-page .page-title { display: none; }
.msn .msn-card--row { align-items: flex-start; }
.msn .msn-card--row .msn-card__media { height: auto; }