/* ════════════════════════════════════════════════════════════════
   sf-hero.css · Significant Figure hero (the key visual)
   Self-contained: its own tokens + all 7 lane classes.
   Layout: LEFT = figure + caption + source · RIGHT = eyebrow + title + dek
   ════════════════════════════════════════════════════════════════ */
.sf-hero{
	--accent:#c0532b; --accent-deep:#8a3a16; --accent-soft:#fce5d6; --accent-tint:#f6dcc8;
	--sf-paper:#faf6ec; --sf-ink:#1c1814; --sf-ink-2:#3a342c; --sf-rule:#d6c9b3;
	--sf-serif:"Fraunces",Georgia,serif; --sf-sans:"Inter",system-ui,sans-serif; --sf-mono:"JetBrains Mono",ui-monospace,monospace;
	container-type:inline-size;              /* enables the cqi sizing below */
	display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:stretch;
	background:var(--sf-paper); border:1px solid var(--sf-rule); border-radius:16px; overflow:hidden;
	font-family:var(--sf-sans); color:var(--sf-ink);
	margin:clamp(24px,4vw,52px) auto clamp(30px,5vw,64px);
	max-width:1120px;
	min-height:clamp(320px,36vw,500px);
	box-shadow:0 1px 2px rgba(28,24,20,.04),0 28px 62px -38px rgba(28,24,20,.42);
}

.sf-has-blog-key-visual.single-post .entry-content > .sf-hero{
	width:min(1120px,calc(100vw - 48px));
	margin-left:50%;
	transform:translateX(-50%);
}

.sf-has-blog-key-visual.single-post .entry-header,
.sf-has-blog-key-visual.single-post .entry-title,
.sf-has-blog-key-visual.single-post .entry-meta,
.sf-has-blog-key-visual.single-post .post-navigation,
.sf-has-blog-key-visual.single-post .navigation.post-navigation{
	display:none;
}

/* ── lanes: one class recolours the whole hero ── */
.sf-hero.lane-moments        { --accent:#c0532b; --accent-deep:#8a3a16; --accent-soft:#fce5d6; --accent-tint:#f6dcc8; }
.sf-hero.lane-retention      { --accent:#5b6b3f; --accent-deep:#3f4c2c; --accent-soft:#e6e9da; --accent-tint:#dce0cb; }
.sf-hero.lane-lifecycle      { --accent:#3d6473; --accent-deep:#284b58; --accent-soft:#dde9ec; --accent-tint:#cfe0e4; }
.sf-hero.lane-personalization{ --accent:#8a3f5f; --accent-deep:#642a44; --accent-soft:#f3dde7; --accent-tint:#ecd0dd; }
.sf-hero.lane-ai             { --accent:#9a6a2b; --accent-deep:#6f4a17; --accent-soft:#f4e6cd; --accent-tint:#eedcbb; }
.sf-hero.lane-data           { --accent:#5a4a73; --accent-deep:#3d2f53; --accent-soft:#e7e1ef; --accent-tint:#dbd3e7; }
.sf-hero.lane-playbooks      { --accent:#a3402f; --accent-deep:#7a2a1d; --accent-soft:#f6dcd2; --accent-tint:#efccc0; }
.sf-hero.lane-video          { --accent:#2f6b5a; --accent-deep:#20503f; --accent-soft:#d8e8df; --accent-tint:#c6ddd0; }

/* ── LEFT · the figure ── */
.sf-hero__figure{
	display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:16px;
	padding:clamp(28px,5cqi,52px);
	background:linear-gradient(135deg,var(--accent-soft),color-mix(in srgb,var(--accent-tint) 60%,var(--sf-paper)));
}
.sf-hero__num{font-family:var(--sf-serif);font-style:italic;font-weight:500;font-size:clamp(62px,20cqi,168px);line-height:.84;letter-spacing:-.03em;color:var(--accent-deep);}
.sf-hero__lab{font-size:clamp(15px,2.1cqi,18px);color:var(--sf-ink);opacity:.84;line-height:1.4;margin:0;max-width:30ch;}
.sf-hero__lab b{opacity:1;font-weight:600;}
.sf-hero__source{font-family:var(--sf-mono);font-weight:600;font-size:13px;color:var(--sf-ink-2);display:inline-flex;align-items:center;gap:9px;}
.sf-hero__source .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);}

/* ── RIGHT · the article ── */
.sf-hero__body{
	display:flex; flex-direction:column; justify-content:center; gap:16px;
	padding:clamp(26px,5cqi,48px);
	border-left:1px solid color-mix(in srgb,var(--accent) 26%,var(--sf-rule));
}
.sf-hero__eyebrow{font-family:var(--sf-mono);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);display:inline-flex;align-items:center;gap:10px;}
.sf-hero__eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);}
/* eyebrow row + current-events overlay (rides any lane, no recolour) */
.sf-hero__top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.sf-hero__timely{font-family:var(--sf-mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep);background:color-mix(in srgb,var(--accent) 14%,#fff);border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);border-radius:999px;padding:3px 9px;}
.sf-hero__byline{font-family:var(--sf-mono);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--sf-ink-2);opacity:.72;margin:0;}
.sf-hero__title{font-family:var(--sf-serif);font-weight:500;font-size:clamp(26px,4.6cqi,40px);line-height:1.04;letter-spacing:-.02em;margin:0;text-wrap:pretty;}
.sf-hero__dek{font-size:clamp(15px,2.1cqi,18px);color:var(--sf-ink);opacity:.78;line-height:1.5;margin:0;max-width:42ch;}
.sf-hero__dek b{opacity:1;font-weight:600;}

/* ── stacks on a narrow content column ── */
@container (max-width:600px){
	.sf-hero{grid-template-columns:1fr;}
	.sf-has-blog-key-visual.single-post .entry-content > .sf-hero{width:100%;margin-left:0;transform:none;}
	.sf-hero__body{border-left:none;border-top:1px solid color-mix(in srgb,var(--accent) 26%,var(--sf-rule));}
}

/* ── fallback for browsers without container queries ── */
@supports not (container-type:inline-size){
	.sf-hero__num{font-size:clamp(62px,12vw,168px);}
}