/* =============================================================================
   YMC Blog Importer :: article skins v2
   Four distinct designs sharing one accent system:
     --ymcbi-accent        primary brand colour (per site setting)
     --ymcbi-accent-soft   pale tint of it     (per site setting)
   Scope: .ymcbi--editorial | .ymcbi--magazine | .ymcbi--guide | .ymcbi--listicle
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&family=Archivo:wght@500;700;800;900&family=Inter:wght@400;500;600;700&family=Sora:wght@600;700;800&display=swap');

/* ---------------------------------------------------------------- base --- */

[class*="ymcbi--"] {
	--ink: #171B21;
	--body: #3D4650;
	--faint: #7A828C;
	--line: #E7EAEE;
	--paper: #FFFFFF;
	--soft: var(--ymcbi-accent-soft, #F2F6F4);
	--acc: var(--ymcbi-accent, #1B4D3E);
	font-family: 'Inter', -apple-system, sans-serif;
	color: var(--body);
	font-size: 17px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

[class*="ymcbi--"] p { margin: 0 0 1.35em; }
[class*="ymcbi--"] a { color: var(--acc); text-decoration-color: color-mix(in srgb, var(--acc) 35%, transparent); text-underline-offset: 3px; transition: .15s; }
[class*="ymcbi--"] a:hover { text-decoration-color: var(--acc); }
[class*="ymcbi--"] ul, [class*="ymcbi--"] ol { padding-left: 1.5em; margin: 0 0 1.5em; }
[class*="ymcbi--"] li { margin-bottom: .55em; }
[class*="ymcbi--"] li::marker { color: var(--acc); font-weight: 700; }

/* meta bar */
[class*="ymcbi--"] .ymcbi-meta {
	display: flex; align-items: center; gap: 14px;
	margin: 0 0 34px; font-size: 12.5px; font-weight: 600;
	letter-spacing: .04em; color: var(--faint);
}
[class*="ymcbi--"] .ymcbi-meta__cat {
	background: var(--acc); color: #fff; padding: 5px 13px;
	border-radius: 100px; font-size: 11.5px; letter-spacing: .08em;
	text-transform: uppercase;
}
[class*="ymcbi--"] .ymcbi-meta__read { text-transform: uppercase; }
[class*="ymcbi--"] .ymcbi-meta__rule { flex: 1; height: 1px; background: var(--line); }

/* images */
[class*="ymcbi--"] figure.wp-block-image,
[class*="ymcbi--"] figure { margin: 34px 0; }
[class*="ymcbi--"] figure img {
	width: 100%; height: auto; display: block;
	border-radius: 14px;
}
[class*="ymcbi--"] figcaption {
	font-size: 13px; color: var(--faint); margin-top: 11px;
	line-height: 1.5;
}

/* tables */
[class*="ymcbi--"] .ymcbi-table-wrap {
	margin: 34px 0; overflow-x: auto;
	border: 1px solid var(--line); border-radius: 14px;
	box-shadow: 0 1px 2px rgba(23,27,33,.04);
}
[class*="ymcbi--"] table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0; }
[class*="ymcbi--"] thead th {
	background: var(--ink); color: #fff; text-align: left;
	padding: 13px 18px; font-weight: 600; font-size: 13px;
	letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
[class*="ymcbi--"] tbody td { padding: 13px 18px; border-top: 1px solid var(--line); vertical-align: top; }
[class*="ymcbi--"] tbody tr:nth-child(even) { background: #FAFBFC; }
[class*="ymcbi--"] tbody td:first-child { font-weight: 600; color: var(--ink); }

/* FAQ */
[class*="ymcbi--"] .ymcbi-faq { margin-top: 56px; }
[class*="ymcbi--"] .ymcbi-faq__item {
	border: 1px solid var(--line); border-radius: 13px;
	margin-bottom: 12px; background: var(--paper);
	transition: .18s; overflow: hidden;
}
[class*="ymcbi--"] .ymcbi-faq__item[open] { border-color: var(--acc); box-shadow: 0 4px 18px rgba(23,27,33,.06); }
[class*="ymcbi--"] .ymcbi-faq__q {
	list-style: none; cursor: pointer; padding: 18px 52px 18px 22px;
	font-weight: 600; color: var(--ink); font-size: 16.5px; position: relative;
}
[class*="ymcbi--"] .ymcbi-faq__q::-webkit-details-marker { display: none; }
[class*="ymcbi--"] .ymcbi-faq__q::after {
	content: ""; position: absolute; right: 22px; top: 50%;
	width: 10px; height: 10px; translate: 0 -70%;
	border-right: 2.5px solid var(--acc); border-bottom: 2.5px solid var(--acc);
	rotate: 45deg; transition: .2s;
}
[class*="ymcbi--"] .ymcbi-faq__item[open] .ymcbi-faq__q::after { rotate: 225deg; translate: 0 -30%; }
[class*="ymcbi--"] .ymcbi-faq__a { padding: 0 22px 20px; font-size: 15.5px; }
[class*="ymcbi--"] .ymcbi-faq__a p:last-child { margin-bottom: 0; }


/* ---------------------------------------------------- per style palettes --- */
.ymcbi--editorial { --acc: #9C3D3D; --soft: #F7F1EA; --ink: #211D1A; }
.ymcbi--magazine  { --acc: #E8A33D; --soft: #EEF3FA; --ink: #12294A; }
.ymcbi--magazine thead th { background: var(--ink); }
.ymcbi--guide     { --acc: #0E8A6D; --soft: #EAF6F1; --ink: #17211E; }
.ymcbi--listicle  { --acc: #6D4AE8; --soft: #F1EEFB; --ink: #1C1830; }

/* =============================================================================
   1. EDITORIAL  — quiet serif luxury
   ========================================================================== */

.ymcbi--editorial { font-family: 'Source Serif 4', Georgia, serif; font-size: 18.5px; line-height: 1.8; }

.ymcbi--editorial .ymcbi-meta,
.ymcbi--editorial .ymcbi-toc,
.ymcbi--editorial figcaption,
.ymcbi--editorial .ymcbi-faq__q { font-family: 'Inter', sans-serif; }

.ymcbi--editorial .ymcbi-lead {
	font-size: 23px; line-height: 1.65; color: var(--ink); font-weight: 400;
}
.ymcbi--editorial .ymcbi-lead::first-letter {
	font-size: 74px; font-weight: 700; float: left;
	line-height: .82; padding: 6px 12px 0 0; color: var(--acc);
}

.ymcbi--editorial .ymcbi-section { margin-top: 54px; }
.ymcbi--editorial .ymcbi-h2 {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 31px; font-weight: 700; color: var(--ink);
	line-height: 1.25; margin: 0 0 22px; padding-top: 26px; position: relative;
}
.ymcbi--editorial .ymcbi-h2::before {
	content: ""; position: absolute; top: 0; left: 0;
	width: 54px; height: 3px; background: var(--acc);
}
.ymcbi--editorial h3 {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 22px; font-weight: 600; color: var(--ink); margin: 30px 0 14px;
}

.ymcbi--editorial .ymcbi-callout {
	margin: 38px 0; padding: 8px 0 8px 30px;
	border-left: 3px solid var(--acc);
	font-size: 23px; line-height: 1.55; font-style: italic; color: var(--ink);
}
.ymcbi--editorial .ymcbi-callout p { margin: 0; }

.ymcbi--editorial .ymcbi-toc {
	border: 1px solid var(--line); border-radius: 0;
	border-top: 3px solid var(--ink);
	padding: 24px 28px; margin: 38px 0; background: var(--paper);
}
.ymcbi--editorial .ymcbi-toc__label {
	font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: var(--ink); margin: 0 0 14px;
}
.ymcbi--editorial .ymcbi-toc__list { margin: 0; padding: 0; list-style: none; column-count: 2; column-gap: 34px; }
.ymcbi--editorial .ymcbi-toc__list li { margin: 0 0 9px; font-size: 15px; break-inside: avoid; }
.ymcbi--editorial .ymcbi-toc__list a { color: var(--body); text-decoration: none; border-bottom: 1px solid var(--line); }
.ymcbi--editorial .ymcbi-toc__list a:hover { color: var(--acc); border-color: var(--acc); }

.ymcbi--editorial figure img { border-radius: 0; }
.ymcbi--editorial figcaption { text-align: center; font-style: normal; }

/* =============================================================================
   2. MAGAZINE  — bold contemporary
   ========================================================================== */

.ymcbi--magazine .ymcbi-standfirst {
	background: var(--soft); border-left: 5px solid var(--acc);
	border-radius: 0 16px 16px 0; padding: 26px 30px; margin: 0 0 38px;
}
.ymcbi--magazine .ymcbi-lead { font-size: 19.5px; line-height: 1.65; color: var(--ink); margin: 0; font-weight: 500; }

.ymcbi--magazine .ymcbi-section { margin-top: 52px; }
.ymcbi--magazine .ymcbi-h2 {
	font-family: 'Archivo', sans-serif;
	display: flex; align-items: center; gap: 15px;
	font-size: 26px; font-weight: 800; color: var(--ink);
	letter-spacing: -.01em; margin: 0 0 20px; line-height: 1.25;
}
.ymcbi--magazine .ymcbi-h2__bar {
	flex: 0 0 auto; width: 8px; height: 34px;
	background: linear-gradient(180deg, var(--acc), color-mix(in srgb, var(--acc) 55%, #000));
	border-radius: 4px;
}
.ymcbi--magazine h3 {
	font-family: 'Archivo', sans-serif;
	font-size: 18.5px; font-weight: 700; color: var(--ink);
	margin: 28px 0 12px; padding-left: 14px; position: relative;
}
.ymcbi--magazine h3::before {
	content: ""; position: absolute; left: 0; top: 5px; bottom: 5px;
	width: 3.5px; border-radius: 2px; background: color-mix(in srgb, var(--acc) 45%, #fff);
}

.ymcbi--magazine .ymcbi-callout {
	margin: 36px 0; padding: 24px 28px 24px 62px;
	background: var(--ink); color: #E9EDF2;
	border-radius: 16px; font-size: 18px; line-height: 1.6;
	font-weight: 500; position: relative;
}
.ymcbi--magazine .ymcbi-callout::before {
	content: "!"; position: absolute; left: 22px; top: 24px;
	width: 26px; height: 26px; border-radius: 8px;
	background: var(--acc); color: #fff;
	font-family: 'Archivo', sans-serif; font-weight: 800;
	display: grid; place-items: center; font-size: 15px;
}
.ymcbi--magazine .ymcbi-callout p { margin: 0; }

.ymcbi--magazine .ymcbi-toc {
	background: var(--paper); border: 1px solid var(--line);
	border-radius: 16px; padding: 22px 24px; margin: 36px 0;
	box-shadow: 0 1px 3px rgba(23,27,33,.05);
}
.ymcbi--magazine .ymcbi-toc__label {
	font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 800;
	letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin: 0 0 14px;
}
.ymcbi--magazine .ymcbi-toc__list {
	margin: 0; padding: 0; list-style: none;
	display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px;
	counter-reset: mtoc;
}
.ymcbi--magazine .ymcbi-toc__list li { counter-increment: mtoc; margin: 0; }
.ymcbi--magazine .ymcbi-toc__list a {
	display: flex; gap: 10px; align-items: baseline;
	text-decoration: none; color: var(--body); font-size: 14.5px; font-weight: 500;
	padding: 6px 8px; border-radius: 8px;
}
.ymcbi--magazine .ymcbi-toc__list a::before {
	content: counter(mtoc, decimal-leading-zero);
	font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 12px; color: var(--acc);
}
.ymcbi--magazine .ymcbi-toc__list a:hover { background: var(--soft); color: var(--ink); }

.ymcbi--magazine figure img { border-radius: 18px; box-shadow: 0 10px 32px rgba(23,27,33,.12); }

/* =============================================================================
   3. GUIDE  — numbered steps with connector line
   ========================================================================== */

.ymcbi--guide .ymcbi-lead { font-size: 19px; color: var(--ink); line-height: 1.65; }

.ymcbi--guide .ymcbi-toc {
	background: var(--soft); border-radius: 16px;
	padding: 24px 26px; margin: 36px 0;
	border: 1px solid color-mix(in srgb, var(--acc) 16%, #fff);
}
.ymcbi--guide .ymcbi-toc__label {
	font-size: 12px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--acc); margin: 0 0 14px;
}
.ymcbi--guide .ymcbi-toc__list { margin: 0; padding: 0; list-style: none; counter-reset: gtoc; }
.ymcbi--guide .ymcbi-toc__list li { counter-increment: gtoc; margin: 0 0 9px; }
.ymcbi--guide .ymcbi-toc__list a {
	display: flex; gap: 12px; align-items: center;
	text-decoration: none; color: var(--body); font-size: 15px; font-weight: 500;
}
.ymcbi--guide .ymcbi-toc__list a::before {
	content: counter(gtoc);
	flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
	background: #fff; border: 2px solid var(--acc); color: var(--acc);
	font-size: 12px; font-weight: 700; display: grid; place-items: center;
}
.ymcbi--guide .ymcbi-toc__list a:hover { color: var(--acc); }

.ymcbi--guide .ymcbi-step {
	position: relative; margin-top: 44px; padding-left: 76px;
}
.ymcbi--guide .ymcbi-step::before {
	content: ""; position: absolute; left: 26px; top: 62px; bottom: -44px;
	width: 2px; background: var(--line);
}
.ymcbi--guide .ymcbi-step:last-of-type::before,
.ymcbi--guide section.ymcbi-step:last-child::before { display: none; }

.ymcbi--guide .ymcbi-h2 { display: block; margin: 0 0 16px; }
.ymcbi--guide .ymcbi-step__num {
	position: absolute; left: 0; top: -4px;
	width: 54px; height: 54px; border-radius: 16px;
	background: linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 60%, #000));
	color: #fff; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 22px;
	display: grid; place-items: center;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--acc) 35%, transparent);
}
.ymcbi--guide .ymcbi-step__text {
	font-family: 'Sora', sans-serif; font-size: 24px; font-weight: 700;
	color: var(--ink); line-height: 1.3; display: block; padding-top: 8px;
}
.ymcbi--guide h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 26px 0 12px; }

.ymcbi--guide .ymcbi-callout {
	margin: 30px 0; padding: 20px 24px;
	background: #FFF9E8; border: 1px solid #F1E3B4; border-radius: 14px;
	font-size: 16px; color: #6B5A1E; font-weight: 500;
}
.ymcbi--guide .ymcbi-callout p { margin: 0; }
.ymcbi--guide .ymcbi-callout::before {
	content: "Important"; display: block; font-size: 11px; font-weight: 800;
	letter-spacing: .1em; text-transform: uppercase; color: #B08900; margin-bottom: 7px;
}

.ymcbi--guide .ymcbi-step__body ol { counter-reset: gsteps; list-style: none; padding-left: 0; }
.ymcbi--guide .ymcbi-step__body ol li {
	counter-increment: gsteps; position: relative;
	padding-left: 38px; margin-bottom: 12px;
}
.ymcbi--guide .ymcbi-step__body ol li::before {
	content: counter(gsteps);
	position: absolute; left: 0; top: 1px;
	width: 25px; height: 25px; border-radius: 50%;
	background: var(--soft); color: var(--acc);
	font-size: 13px; font-weight: 700; display: grid; place-items: center;
}

.ymcbi--guide figure img { border-radius: 14px; }
.ymcbi--guide .ymcbi-faq, .ymcbi--guide .ymcbi-table-wrap { margin-left: 0; }

@media (max-width: 640px) {
	.ymcbi--guide .ymcbi-step { padding-left: 0; padding-top: 68px; }
	.ymcbi--guide .ymcbi-step::before { display: none; }
	.ymcbi--guide .ymcbi-step__num { top: 0; }
}

/* =============================================================================
   4. LISTICLE  — ghost number cards
   ========================================================================== */

.ymcbi--listicle .ymcbi-lead { font-size: 19px; color: var(--ink); line-height: 1.65; }

.ymcbi--listicle .ymcbi-cards { display: flex; flex-direction: column; gap: 26px; margin-top: 38px; }

.ymcbi--listicle .ymcbi-card {
	position: relative; background: var(--paper);
	border: 1px solid var(--line); border-radius: 20px;
	padding: 30px 34px 26px; overflow: hidden;
	box-shadow: 0 2px 6px rgba(23,27,33,.04);
	transition: .2s;
}
.ymcbi--listicle .ymcbi-card:hover {
	box-shadow: 0 14px 38px rgba(23,27,33,.09);
	border-color: color-mix(in srgb, var(--acc) 30%, var(--line));
	translate: 0 -2px;
}
.ymcbi--listicle .ymcbi-card::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
	background: linear-gradient(90deg, var(--acc), color-mix(in srgb, var(--acc) 40%, #fff));
}

.ymcbi--listicle .ymcbi-card__head { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.ymcbi--listicle .ymcbi-card__num {
	flex: 0 0 auto; font-family: 'Sora', sans-serif;
	font-size: 46px; font-weight: 800; line-height: 1;
	color: transparent;
	-webkit-text-stroke: 2px var(--acc);
	min-width: 56px;
}
.ymcbi--listicle .ymcbi-card__title {
	font-family: 'Sora', sans-serif; font-size: 21.5px; font-weight: 700;
	color: var(--ink); margin: 0; line-height: 1.3;
}
.ymcbi--listicle .ymcbi-card__body { font-size: 16.5px; }
.ymcbi--listicle .ymcbi-card__body > p:last-child { margin-bottom: 0; }

.ymcbi--listicle .ymcbi-card .ymcbi-table-wrap { margin: 22px 0; border-radius: 12px; }
.ymcbi--listicle .ymcbi-card figure { margin: 22px 0; }
.ymcbi--listicle .ymcbi-card figure img { border-radius: 12px; }

.ymcbi--listicle .ymcbi-callout {
	margin: 24px 0; padding: 18px 22px;
	background: var(--soft); border-radius: 14px;
	font-size: 16px; color: var(--ink); font-weight: 500;
	border-left: 4px solid var(--acc);
}
.ymcbi--listicle .ymcbi-callout p { margin: 0; }

.ymcbi--listicle .ymcbi-toc { display: none; }

/* -------------------------------------------------------------- mobile --- */

@media (max-width: 640px) {
	[class*="ymcbi--"] { font-size: 16px; }
	.ymcbi--editorial { font-size: 17px; }
	.ymcbi--editorial .ymcbi-lead { font-size: 19.5px; }
	.ymcbi--editorial .ymcbi-h2 { font-size: 26px; }
	.ymcbi--editorial .ymcbi-toc__list { column-count: 1; }
	.ymcbi--magazine .ymcbi-h2 { font-size: 22px; }
	.ymcbi--magazine .ymcbi-toc__list { grid-template-columns: 1fr; }
	.ymcbi--guide .ymcbi-step__text { font-size: 20px; }
	.ymcbi--listicle .ymcbi-card { padding: 22px 20px; }
	.ymcbi--listicle .ymcbi-card__num { font-size: 36px; min-width: 44px; }
	.ymcbi--listicle .ymcbi-card__title { font-size: 18.5px; }
	[class*="ymcbi--"] .ymcbi-meta { flex-wrap: wrap; }
}

/* =============================================================================
   HERO  — one design per style
   ========================================================================== */

.ymcbi-hero {
	width: 100vw;
	margin: 0 calc(50% - 50vw) 46px;
	position: relative;
	overflow: hidden;
}
.ymcbi-hero__inner { max-width: 880px; margin: 0 auto; padding: 84px 28px 68px; text-align: center; }
.ymcbi-hero__meta { display: flex; justify-content: center; align-items: center; gap: 14px; font: 500 13.5px 'Inter', sans-serif; letter-spacing: .03em; }
.ymcbi-hero__dot { width: 4px; height: 4px; border-radius: 50%; }

body.ymcbi-has-hero .entry-header,
body.ymcbi-has-hero h1.entry-title,
body.ymcbi-has-hero .entry-title,
body.ymcbi-has-hero h1.wp-block-post-title,
body.ymcbi-has-hero .wp-block-post-featured-image,
body.ymcbi-has-hero .post-thumbnail,
body.ymcbi-has-hero .page-header { display: none !important; }

/* ---- Editorial: cream paper, serif, hairline rules -------------------- */

.ymcbi-hero--editorial {
	background: #F7F1EA;
	border-top: 1px solid #E5DACB;
	border-bottom: 1px solid #E5DACB;
}
.ymcbi-hero--editorial .ymcbi-hero__inner { padding: 74px 28px 62px; }
.ymcbi-hero--editorial .ymcbi-hero__cat {
	display: inline-block; font: 600 12.5px 'Inter', sans-serif;
	letter-spacing: .22em; text-transform: uppercase; color: #9C3D3D;
	padding-bottom: 14px; margin-bottom: 20px; position: relative;
}
.ymcbi-hero--editorial .ymcbi-hero__cat::after {
	content: ""; position: absolute; left: 50%; bottom: 0; translate: -50% 0;
	width: 42px; height: 2px; background: #9C3D3D;
}
.ymcbi-hero--editorial .ymcbi-hero__title {
	font-family: 'Source Serif 4', Georgia, serif;
	font-weight: 700; color: #211D1A;
	font-size: clamp(32px, 4.8vw, 54px); line-height: 1.12;
	letter-spacing: -.01em; margin: 0 0 24px; text-wrap: balance;
}
.ymcbi-hero--editorial .ymcbi-hero__meta { color: #8A7E6E; text-transform: uppercase; font-size: 12px; letter-spacing: .12em; }
.ymcbi-hero--editorial .ymcbi-hero__dot { background: #9C3D3D; }

/* ---- Magazine: navy, gold, image behind, left aligned ------------------ */

.ymcbi-hero--magazine {
	background:
		radial-gradient(900px 400px at 90% 0%, rgba(232,163,61,.16), transparent 60%),
		linear-gradient(120deg, #0B1628, #12294A 70%, #14304F);
	background-size: cover; background-position: center;
}
.ymcbi-hero--magazine::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
	background: linear-gradient(90deg, #E8A33D, #F5CE85 45%, transparent 90%);
}
.ymcbi-hero--magazine .ymcbi-hero__inner { text-align: left; padding: 92px 28px 76px; }
.ymcbi-hero--magazine .ymcbi-hero__cat {
	display: inline-block; background: #E8A33D; color: #12213A;
	font: 800 11.5px 'Archivo', sans-serif; letter-spacing: .12em; text-transform: uppercase;
	padding: 8px 15px; border-radius: 6px; margin-bottom: 24px;
}
.ymcbi-hero--magazine .ymcbi-hero__title {
	color: #fff; font-family: 'Archivo', sans-serif; font-weight: 900;
	font-size: clamp(31px, 4.8vw, 52px); line-height: 1.1;
	letter-spacing: -.015em; margin: 0 0 22px; text-wrap: balance; max-width: 20ch;
}
.ymcbi-hero--magazine .ymcbi-hero__meta { justify-content: flex-start; color: rgba(255,255,255,.7); }
.ymcbi-hero--magazine .ymcbi-hero__dot { background: #E8A33D; }

/* ---- Guide: teal gradient, pills, curved base -------------------------- */

.ymcbi-hero--guide {
	background:
		radial-gradient(700px 320px at 12% 110%, rgba(255,255,255,.14), transparent 55%),
		linear-gradient(130deg, #0B6B54, #0E8A6D 55%, #14A886);
	border-radius: 0 0 34px 34px;
}
.ymcbi-hero--guide .ymcbi-hero__eyebrow {
	display: inline-block; color: rgba(255,255,255,.85);
	font: 700 12px 'Inter', sans-serif; letter-spacing: .18em; text-transform: uppercase;
	border: 1.5px solid rgba(255,255,255,.35); border-radius: 100px;
	padding: 7px 16px; margin-bottom: 22px;
}
.ymcbi-hero--guide .ymcbi-hero__title {
	color: #fff; font-family: 'Sora', sans-serif; font-weight: 800;
	font-size: clamp(29px, 4.4vw, 46px); line-height: 1.15;
	margin: 0 0 26px; text-wrap: balance;
}
.ymcbi-hero--guide .ymcbi-hero__pills { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.ymcbi-hero--guide .ymcbi-hero__pill {
	background: #fff; color: #0B6B54;
	font: 700 13.5px 'Inter', sans-serif; padding: 9px 18px; border-radius: 100px;
	box-shadow: 0 4px 14px rgba(0,0,0,.14);
}
.ymcbi-hero--guide .ymcbi-hero__pill--ghost { background: rgba(255,255,255,.16); color: #fff; box-shadow: none; }

/* ---- Listicle: violet gradient, ghost number --------------------------- */

.ymcbi-hero--listicle {
	background:
		radial-gradient(800px 380px at 85% -20%, rgba(255,255,255,.16), transparent 55%),
		linear-gradient(125deg, #4C2FC0, #6D4AE8 60%, #8B6CF2);
}
.ymcbi-hero--listicle .ymcbi-hero__ghost {
	position: absolute; right: 4%; top: 50%; translate: 0 -52%;
	font: 800 clamp(200px, 30vw, 340px)/1 'Sora', sans-serif;
	color: transparent; -webkit-text-stroke: 3px rgba(255,255,255,.22);
	pointer-events: none; user-select: none;
}
.ymcbi-hero--listicle .ymcbi-hero__inner { text-align: left; padding: 88px 28px 72px; position: relative; }
.ymcbi-hero--listicle .ymcbi-hero__cat {
	display: inline-block; background: rgba(255,255,255,.16); color: #fff;
	backdrop-filter: blur(4px);
	font: 700 11.5px 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase;
	padding: 8px 16px; border-radius: 100px; margin-bottom: 22px;
	border: 1px solid rgba(255,255,255,.25);
}
.ymcbi-hero--listicle .ymcbi-hero__title {
	color: #fff; font-family: 'Sora', sans-serif; font-weight: 800;
	font-size: clamp(30px, 4.6vw, 50px); line-height: 1.12;
	margin: 0 0 22px; text-wrap: balance; max-width: 19ch;
}
.ymcbi-hero--listicle .ymcbi-hero__meta { justify-content: flex-start; color: rgba(255,255,255,.78); }
.ymcbi-hero--listicle .ymcbi-hero__dot { background: #fff; }

@media (max-width: 640px) {
	.ymcbi-hero__inner, .ymcbi-hero--magazine .ymcbi-hero__inner,
	.ymcbi-hero--listicle .ymcbi-hero__inner { padding: 54px 20px 46px; }
	.ymcbi-hero { margin-bottom: 30px; }
	.ymcbi-hero--listicle .ymcbi-hero__ghost { font-size: 150px; right: -4%; opacity: .7; }
}

/* ---- Hero featured image + video embeds -------------------------------- */

.ymcbi-hero__shot { max-width: 1040px; margin: 0 auto; padding: 0 28px 0; }
.ymcbi-hero__shot img {
	width: 100%; height: auto; display: block;
	border-radius: 16px 16px 0 0;
	margin-bottom: -46px;
	box-shadow: 0 18px 44px rgba(13,17,20,.22);
	aspect-ratio: 16 / 9; object-fit: cover;
}
.ymcbi-hero--editorial .ymcbi-hero__shot { padding-bottom: 0; }
.ymcbi-hero--editorial .ymcbi-hero__shot img { border-radius: 0; box-shadow: none; margin-bottom: 0; }
.ymcbi-hero--guide .ymcbi-hero__shot img { border-radius: 16px; margin-bottom: -60px; }

.ymcbi-video { margin: 36px 0; }
.ymcbi-video__frame {
	position: relative; width: 100%; aspect-ratio: 16 / 9;
	border-radius: 14px; overflow: hidden; background: #0D1114;
	box-shadow: 0 10px 30px rgba(23,27,33,.14);
}
.ymcbi-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ymcbi-video figcaption { font-size: 13px; color: var(--faint); margin-top: 11px; }

@media (max-width: 640px) {
	.ymcbi-hero__shot { padding: 0 14px; }
	.ymcbi-hero__shot img { margin-bottom: -26px; }
}