/*
 * WFL — Our Story page styling ([wfl_our_story] output)
 *
 * Follows Figma "Our Story (updated)" — 222:550 (desktop, 1920) / 299:37
 * (mobile, 375). Supersedes the earlier match-the-live-Elementor-page pass
 * (ADR 0005): that revision re-centred the section headings and dropped two
 * sections. See inc/our-story.php for the structural notes.
 *
 * Type scale is interpolated between the two Figma frames, so each token hits
 * the design value exactly at 375 and at 1920 and slides linearly between:
 *   heading   38/40  → 72/84    eyebrow  24/28 → 28/31
 *   section   64     → 120 padding-block
 * The vw slopes below are (max-min)/(1920-375); the px part is the intercept.
 *
 * EXCEPTION — body copy does NOT follow the Figma frames: the client (2026-07-17)
 * asked for the LIVE /our-story/ page's body size instead (Figma's 32px desktop
 * read too big). Mirrors live Elementor element ac03310 exactly:
 * 1.2vw desktop / 1.9vw ≤1024 / 4vw ≤767, line-height 1.5 throughout.
 *
 *   brand red #C92539 · ink #171717 · paper #F7F8F9
 * Fonts are already enqueued site-wide (GeneratePress/Elementor kit); we only
 * reference the families.
 */

.wfl-story {
	--wfl-red: #c92539;
	--wfl-ink: #171717;
	--wfl-body: #222;
	--wfl-paper: #f7f8f9;
	--wfl-border: #ded8e5;
	/* The site-wide custom-fonts plugin registers every weight under ONE
	   family, "Cooper BT" — light vs heavy is a font-weight, not a family. */
	--wfl-display: "Cooper BT", Georgia, "Times New Roman", serif;
	--wfl-chrome: "Cooper BT", Georgia, serif;
	--wfl-util: Roboto, system-ui, -apple-system, sans-serif;

	/* Figma's page container (1440 inside 1920) and its text measure (1280). */
	--wfl-container: 1440px;
	--wfl-measure: 1280px;
	/* Band padding is a variable because the watermark has to cancel it out. */
	--wfl-band-pad: clamp(64px, 50.4px + 3.62vw, 120px);
	/* The cherub flourish sitting behind the intro + origin headings. Already
	   exported at ~8% alpha, so it needs no extra opacity — see --intro/--origin. */
	--wfl-watermark: url("../../../../uploads/2026/05/Mask-group.png");

	font-family: var(--wfl-display);
	color: var(--wfl-body);
	background: var(--wfl-paper);
	overflow-x: clip; /* contain the full-bleed bands */
}

/* Inner content wrappers — keep text measured even inside full-bleed bands. */
.wfl-story__inner {
	position: relative;
	max-width: var(--wfl-container);
	margin-inline: auto;
	padding-inline: 14px;
}

.wfl-story__inner--wide {
	max-width: 1080px;
}

/* Section rhythm. Every section sets its own vertical padding; full-bleed
   colour bands break out of the host container with the mirror-calc trick. */
.wfl-story__section {
	padding-block: var(--wfl-band-pad);
}

.wfl-story__section--bleed {
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
}

.wfl-story__section--red {
	background: var(--wfl-red);
	color: #fff;
}

.wfl-story__section--dark {
	background: var(--wfl-ink);
	color: #fff;
}

/* --- shared type --- */

.wfl-story__display {
	margin-inline: auto;
	margin-block: 0;
	max-width: var(--wfl-measure);
	font-family: var(--wfl-display);
	font-weight: 400;
	font-size: clamp(38px, 29.75px + 2.2vw, 72px);
	line-height: clamp(40px, 29.32px + 2.85vw, 84px);
	color: var(--wfl-ink);
	text-align: center;
}

.wfl-story__section--red .wfl-story__display,
.wfl-story__section--dark .wfl-story__display {
	color: #fff;
}

.wfl-story__eyebrow {
	margin: 0 0 clamp(40px, 37.09px + .777vw, 52px);
	font-family: var(--wfl-chrome);
	font-weight: 400;
	font-size: clamp(24px, 23.03px + 0.258vw, 28px);
	line-height: clamp(28px, 27.32px + .18vw, 30.79px);
	text-align: center;
	color: var(--wfl-red);
}

.wfl-story__section--red .wfl-story__eyebrow,
.wfl-story__section--dark .wfl-story__eyebrow {
	color: #fff;
}

.wfl-story__body {
	margin-top: clamp(40px, 35.15px + 1.294vw, 60px);
	max-width: var(--wfl-measure);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 14.1px + .518vw, 24px);
}

.wfl-story__body p {
	margin: 0;
	font-family: var(--wfl-display);
	/* Live-page body scale (see header note) — headings keep the Figma scale. */
	font-size: 1.2vw;
	line-height: 1.5;
	color: inherit;
}

@media (max-width: 1024px) {
	.wfl-story__body p { font-size: 1.9vw; }
}

@media (max-width: 767px) {
	.wfl-story__body p { font-size: 4vw; }
}

.wfl-story__kicker {
	font-family: var(--wfl-chrome);
	font-weight: 600;
	color: var(--wfl-ink);
}

.wfl-story__section--red .wfl-story__kicker,
.wfl-story__section--dark .wfl-story__kicker {
	color: #fff;
}

/* Statement sections run centred all the way down (Figma 222:560 / 222:571). */
.wfl-story__section--statement .wfl-story__body {
	text-align: center;
}

/* --- cherub watermark ---
   Sits behind the intro + origin headings, top-centred at 60% of the container
   (Figma: h 55.75%, left 20%, w 60%). The PNG is white artwork exported at ~8%
   alpha, so on the red band it just paints twice to reach the ~15% the design
   measures; on paper it has to be re-coloured red, which alpha can't do — hence
   the mask, which keeps the shape and takes the colour from the box.

   Figma measures it from the container's top, i.e. above the band padding, so
   the pseudo starts one padding higher than its .wfl-story__inner host. The
   band clips it (Figma: overflow-clip on the Section) so it cannot bleed onto
   the paper above. Sizing stays a % of the inner, which IS the 1440 container. */
.wfl-story__section--intro,
.wfl-story__section--origin {
	overflow: hidden;
}

.wfl-story__section--intro .wfl-story__inner::before,
.wfl-story__section--origin .wfl-story__inner::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--wfl-band-pad)) 0 0 0;
	pointer-events: none;
	z-index: 0;
}

.wfl-story__section--intro .wfl-story__inner::before {
	background: var(--wfl-watermark) top center / 60% auto no-repeat,
	var(--wfl-watermark) top center / 60% auto no-repeat;
}

.wfl-story__section--origin .wfl-story__inner::before {
	background-color: var(--wfl-red);
	-webkit-mask: var(--wfl-watermark) top center / 60% auto no-repeat;
	mask: var(--wfl-watermark) top center / 60% auto no-repeat;
}

/* Keep the copy above the flourish. */
.wfl-story__section--intro .wfl-story__inner > *,
.wfl-story__section--origin .wfl-story__inner > * {
	position: relative;
	z-index: 1;
}

/* --- hero (full-bleed photo + wordmark) --- */

.wfl-story__hero {
	position: relative;
	margin-inline: calc(50% - 50vw);
	height: calc(100svh - 7.8vw);
	min-height: 360px;
	display: flex;
	align-items: flex-end;
	padding: clamp(28px, 6vw, 72px);
	background-color: var(--wfl-ink);
	background-size: cover;
	background-position: center 35%;
	color: #fff;
}

.wfl-story__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .55) 100%);
}

.wfl-story__hero-mark {
	position: relative;
	z-index: 1;
	margin: 0;
}

.wfl-story__halo {
	display: block;
	width: 54px;
	height: auto;
	margin-bottom: 4px;
}

.wfl-story__hero-word {
	margin: 0;
	font-family: var(--wfl-chrome);
	font-weight: 800;
	font-size: clamp(1.9rem, 6vw, 3.15rem);
	line-height: 1;
	color: #fff;
	text-shadow: 0 1px 18px rgba(0, 0, 0, .35);
}

/* --- marquee (red scrolling strip) --- */

.wfl-story__marquee {
	margin-inline: calc(50% - 50vw);
	background: var(--wfl-red);
	color: #fff;
	padding-block: clamp(14px, 2.2vw, 22px);
	overflow: hidden;
	white-space: nowrap;
}

.wfl-story__marquee-track {
	display: inline-flex;
	gap: 0;
	will-change: transform;
	animation: wfl-marquee 26s linear infinite;
}

.wfl-story__marquee-item {
	font-family: var(--wfl-chrome);
	font-weight: 800;
	font-size: clamp(1.05rem, 2.6vw, 1.5rem);
	padding-inline: 28px;
}

.wfl-story__marquee-star {
	opacity: .7;
}

@keyframes wfl-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* --- "Meet Misdemeanor" — copy left, bottle right (Figma 222:601) ---
   Desktop splits 1440 into a 760px copy column and the bottle beside it; mobile
   stacks the two and tucks the arrow beside the bottle instead of the headline. */

.wfl-story__misdemeanor-grid {
	max-width: var(--wfl-measure);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 760fr) minmax(0, 680fr);
	align-items: center;
	gap: clamp(16px, 1.5vw, 24px);
}

/* This copy reads as a column, not a centred statement — it is the one body on
   the page the design left-aligns (mobile re-centres it below). */
.wfl-story__misdemeanor .wfl-story__body {
	margin-top: clamp(40px, 35.15px + 1.294vw, 60px);
	max-width: 680px;
	margin-inline: 0;
	text-align: left;
}

/* Sized to the bottle itself rather than the grid cell, so the arrow's
   percentages below resolve against the bottle's box the way Figma measures. */
.wfl-story__misdemeanor-figure {
	position: relative;
	width: min(100%, 641px);
	margin-inline: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Figma draws the glow and the ground shadow as heavily-blurred ellipses; a
   blurred ellipse is a radial-gradient, so they cost no extra requests. */
.wfl-story__misdemeanor-figure::before,
.wfl-story__misdemeanor-figure::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.wfl-story__misdemeanor-figure::before {
	width: 100%;
	height: 100%;
	background: radial-gradient(closest-side, #ff6969 0%, rgba(255, 105, 105, .55) 55%, rgba(255, 105, 105, 0) 100%);
	filter: blur(38px);
	opacity: .75;
}

.wfl-story__misdemeanor-figure::after {
	bottom: 4%;
	width: 72%;
	height: 7%;
	background: radial-gradient(closest-side, rgba(150, 20, 34, .85) 0%, rgba(150, 20, 34, 0) 100%);
	filter: blur(14px);
}

.wfl-story__misdemeanor-bottle {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 641px;
	height: auto;
}

/* Anchored to the bottle, not the band, so it keeps pointing at it as the column
   widths move. Figma puts the arrow's *rotated* box 294px right of and 159px
   above the bottle's top-left, at a bottle of 641×730. `left`/`top` place the
   un-rotated box, and rotating about the centre shifts the visible box by half
   the difference between the two — so the offsets below are pre-compensated:
   left 294 + 17.1, top -159 + 29.9. */
.wfl-story__misdemeanor-arrow {
	position: absolute;
	left: 48.53%;
	top: -17.68%;
	z-index: 2;
	width: 37.17%;
	height: auto;
	transform: rotate(-163.95deg);
	pointer-events: none;
}

/* --- image marquee (live ucaddon_scroll_marquee) ---
   A strip of lifestyle photos that drifts horizontally as the band passes
   through the viewport (scroll-LINKED, not a constant loop), behind a static
   product bottle pinned in the centre. */

.wfl-story__gallery {
	position: relative;
	margin-inline: calc(50% - 50vw);
	margin-block: clamp(12px, 3vw, 40px);
	min-height: clamp(340px, 46vw, 540px);
	display: flex;
	align-items: center;
}

.wfl-story__gallery-track {
	display: flex;
	gap: clamp(10px, 1.5vw, 18px);
	width: max-content;
	will-change: transform;
	/* --wfl-gallery-x is driven by scroll position in JS (see inline script);
	   it falls back to 0 (static strip) without JS or with reduced motion. */
	transform: translate3d(var(--wfl-gallery-x, 0px), 0, 0);
}

.wfl-story__gallery-img {
	flex: 0 0 auto;
	height: clamp(220px, 30vw, 380px) !important;
	width: clamp(176px, 24vw, 304px) !important;
	aspect-ratio: 768 / 960;
	object-fit: cover;
	border-radius: 16px !important;
	background: #e8e8ea;
}

.wfl-story__gallery-product {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	height: clamp(300px, 42vw, 500px) !important;
	width: clamp(240px, 33.6vw, 400px) !important;
	pointer-events: none;
	filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .28));
}

/* --- founders ("The Usual Suspects") — Figma 7:851 (closed) / 7:908 (opened):
   centred headline, 2×2 grid; each member = circular photo, red name pill below
   (avatar-width), then a bio that clamps to ~4 lines and expands via Read more. */

.wfl-story__suspects-head {
	max-width: 1040px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: center;
}

.wfl-story__suspects-title {
	margin: 0;
	font-family: "Caprasimo", Georgia, serif;
	font-weight: 400;
	font-size: clamp(2.2rem, 5vw, 2.875rem); /* 46px */
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: #000;
}

.wfl-story__suspects-sub {
	margin: 0;
	font-family: "Lora", Georgia, serif;
	font-weight: 400;
	font-size: clamp(1.15rem, 2.4vw, 1.5rem); /* 24px */
	line-height: 1.5;
	color: var(--wfl-ink);
}

.wfl-story__founders {
	list-style: none;
	margin: clamp(36px, 5vw, 60px) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.wfl-story__founder {
	background: none;
	border: none;
}

.wfl-story__founder-summary {
	--wfl-avatar: clamp(184px, 22vw, 254px);
	list-style: none;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 16px;
	text-align: center;
}

.wfl-story__founder-summary::-webkit-details-marker { display: none; }

.wfl-story__founder-avatar {
	width: var(--wfl-avatar);
	height: var(--wfl-avatar);
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, .08);
	overflow: hidden;
}

.wfl-story__founder-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.02);
	background: #e8e8ea;
}

.wfl-story__founder-pill {
	box-sizing: border-box;
	min-width: var(--wfl-avatar);
	padding: 20px 24px;
	background: var(--wfl-red);
	color: #fff;
	font-family: "Caprasimo", Georgia, serif;
	font-weight: 400;
	font-size: clamp(1.3rem, 2.6vw, 1.75rem); /* 28px */
	line-height: 1.3;
	white-space: nowrap;
	text-align: center;
}

.wfl-story__founder-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.wfl-story__founder-bio {
	display: block;
	margin: 0;
	font-family: "Lora", Georgia, serif;
	font-weight: 400;
	font-size: 1rem; /* 16px */
	line-height: 1.5; /* 24px */
	color: var(--wfl-ink);
	text-align: center;
	transition: max-height .34s ease;
}

/* Closed → clamp to ~4 lines with ellipsis; open → reveal the full bio. */
.wfl-story__founder:not([open]) .wfl-story__founder-bio {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wfl-story__founder.is-animating .wfl-story__founder-bio {
	display: block;
	-webkit-line-clamp: unset;
	-webkit-box-orient: initial;
	overflow: hidden;
}

.wfl-story__founder[open] .wfl-story__founder-bio {
	overflow: hidden;
}

.wfl-story__founder-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--wfl-red);
	font-family: "Lora", Georgia, serif;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.5;
}

.wfl-story__founder-toggle-text::after { content: "Read more"; }
.wfl-story__founder[open] .wfl-story__founder-toggle-text::after { content: "Read less"; }

.wfl-story__founder-chevron {
	width: 24px;
	height: 24px;
	transition: transform .2s ease;
}

.wfl-story__founder[open] .wfl-story__founder-chevron { transform: rotate(180deg); }

/* --- CTA --- */

.wfl-story__cta {
	text-align: center;
}

.wfl-story__button {
	display: inline-block;
	margin-top: clamp(20px, 3vw, 30px);
	padding: 15px 38px;
	border-radius: 999px;
	background: #fff;
	color: var(--wfl-ink);
	font-family: var(--wfl-chrome);
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
	transition: transform .15s ease, background .15s ease, color .15s ease;
}

.wfl-story__button:hover,
.wfl-story__button:focus-visible {
	background: var(--wfl-red);
	color: #fff;
	transform: translateY(-1px);
}

.wfl-story__lockup {
	margin: clamp(20px, 3vw, 28px) 0 0;
	font-family: var(--wfl-display);
	font-style: italic;
	font-size: 1.15rem;
	color: rgba(255, 255, 255, .85);
}

/* --- newsletter --- */

.wfl-story__newsletter { text-align: center; }

.wfl-story__newsletter .wfl-story__body {
	max-width: 46ch;
	margin-inline: auto;
	text-align: center;
}

/* The form is a 440px-wide block; the band uses text-align:center, which does
   not centre a block child — so centre it explicitly. Scoped to the Our Story
   newsletter band, so the site-wide footer form stays left-aligned. */
.wfl-story__newsletter .wfl-newsletter-form {
	margin-inline: auto;
	margin-top: 1.75rem;
}

/* --- closing image CTA --- */

.wfl-story__image-cta {
	position: relative;
	margin-inline: calc(50% - 50vw);
	min-height: clamp(520px, 56vw, 880px);
	display: flex;
	align-items: flex-end;
	background-image: linear-gradient(90deg, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .42) 43%, rgba(0, 0, 0, .25) 100%), var(--wfl-image-cta-bg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
	overflow: hidden;
}

.wfl-story__image-cta-inner {
	width: min(90vw, 760px);
	margin: 0 0 clamp(58px, 8vw, 106px) clamp(24px, 6vw, 112px);
}

.wfl-story__image-cta-title {
	margin: 0;
	font-family: var(--wfl-display);
	font-weight: 400;
	font-size: 3.5vw;
	line-height: .96;
	color: #fff;
}

.wfl-story__image-cta-text {
	max-width: 64ch;
	margin: clamp(22px, 3vw, 34px) 0 0;
	font-family: var(--wfl-display);
	font-weight: 400;
	font-size: clamp(1.12rem, 1.55vw, 1.65rem);
	line-height: 1.38;
	color: #fff;
}

.wfl-story__image-cta .wfl-story__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: min(100%, 318px);
	margin-top: clamp(34px, 4vw, 58px);
	padding: 14px 34px;
	border-radius: 999px;
	background: #fff;
	color: #000;
	font-family: var(--wfl-chrome);
	font-weight: 700;
	font-size: clamp(1rem, 1.3vw, 1.25rem);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: transform .15s ease, background .15s ease, color .15s ease;
}

.wfl-story__image-cta .wfl-story__button:hover,
.wfl-story__image-cta .wfl-story__button:focus-visible {
	background: var(--wfl-red);
	color: #fff;
	transform: translateY(-1px);
}

/* --- a11y & responsive --- */

.wfl-story a:focus-visible,
.wfl-story summary:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.wfl-story__section--statement:focus-within { /* no-op guard for older WebKit */ }

@media (min-width: 1025px) {
	.wfl-story__hero {
		height: calc(100svh - 13vw);
	}
}

@media (min-width: 1501px) {
	.wfl-story__hero {
		height: calc(100svh - 10vw);
	}
}

@media (max-width: 1024px) {
	.wfl-story__hero {
		height: calc(100svh - 20.6vw);
	}

	.wfl-story__image-cta-title {
		font-size: 10vw;
	}

	.wfl-story__image-cta-text {
		font-size: 3.6vw;
	}
}

/* Below the two-column breakpoint the bottle drops under the copy, the copy
   re-centres, and the arrow moves from the headline to the bottle's left
   shoulder — the mobile frame's arrangement (Figma 299:569). */
@media (max-width: 900px) {
	.wfl-story__misdemeanor-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(24px, 4vw, 40px);
	}

	.wfl-story__misdemeanor .wfl-story__body {
		max-width: var(--wfl-measure);
		margin-inline: auto;
		text-align: center;
	}

	.wfl-story__misdemeanor-bottle {
		max-width: 343px;
	}

	/* Mobile swings the arrow onto the bottle's left shoulder and flips it
	   (Figma 299:569: rotated box at 14,522 vs the bottle's 0,579 — rotate
	   -85.77°, mirrored on Y), pre-compensated the same way as desktop. */
	.wfl-story__misdemeanor-arrow {
		left: 0.55%;
		top: -8.98%;
		width: 30.8%;
		transform: rotate(-85.77deg) scaleY(-1);
	}
}

@media (max-width: 768px) {
	.wfl-story__hero {
		height: calc(100svh - 36vw);
	}
}

@media (max-width: 700px) {

	.wfl-story__image-cta {
		min-height: 620px;
		background-position: center center;
	}

	.wfl-story__image-cta-inner {
		width: min(88vw, 520px);
		margin: 0 auto 56px;
		text-align: left;
	}

	.wfl-story__image-cta .wfl-story__button {
		min-width: min(100%, 318px);
	}
}

@media (max-width: 600px) {
	.wfl-story__hero {
		height: calc(100svh - 40vw);
	}

	.wfl-story__founders { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.wfl-story__gallery-track {
		animation: none;
		transform: none;
	}
	/* Text ticker is purely decorative, low-intensity motion — keep it moving
	   under reduced-motion rather than stopping it, just markedly slower. */
	.wfl-story__marquee-track {
		animation-duration: 60s;
	}
	.wfl-story__button { transition: none; }
}

/* --- theme-global hardening ---
   GeneratePress + the Elementor kit set font-family AND font-weight on global
   headings (h1–h4) with enough specificity/weight to beat our single-class
   selectors — which would force the big "light Cooper" statements to the
   theme's heavier heading weight. Re-assert family + the intended weight with
   !important so the display reads at 400 (light) and the chrome at 700/800. */
.wfl-story .wfl-story__display,
.wfl-story .wfl-story__body p,
.wfl-story .wfl-story__lockup,
.wfl-story .wfl-story__image-cta-title,
.wfl-story .wfl-story__image-cta-text {
	font-family: var(--wfl-display) !important;
}

.wfl-story .wfl-story__display,
.wfl-story .wfl-story__image-cta-title {
	font-weight: 400 !important;
}

.wfl-story .wfl-story__hero-word,
.wfl-story .wfl-story__eyebrow,
.wfl-story .wfl-story__kicker,
.wfl-story .wfl-story__button,
.wfl-story .wfl-story__marquee-item {
	font-family: var(--wfl-chrome) !important;
}

/* The eyebrow is Cooper Light in the design, not the chrome weight the theme
   would otherwise force on it. */
.wfl-story .wfl-story__eyebrow {
	font-weight: 400 !important;
}

.wfl-story .wfl-story__hero-word,
.wfl-story .wfl-story__marquee-item { font-weight: 800 !important; }

/* Founders block follows the Figma typography (Caprasimo + Lora), asserted over
   the theme's heading/paragraph font rules. */
.wfl-story .wfl-story__suspects-title,
.wfl-story .wfl-story__founder-pill {
	font-family: "Caprasimo", Georgia, serif !important;
	font-weight: 400 !important;
}

.wfl-story .wfl-story__suspects-sub,
.wfl-story .wfl-story__founder-bio,
.wfl-story .wfl-story__founder-toggle {
	font-family: "Lora", Georgia, serif !important;
}