/* =============================================================================
   BD Media — front page components v3 (2026-11-10)

   WHY THIS FILE EXISTS
   --------------------
   Measured on the live front page at 1440px on 10 Nov 2026, before this file:

       h1 "Latest from BD Media"          46px max  -> reads as a blog index
       dead white space right of the deck  ~740 x 90px  -> the page's emptiest
                                                          rectangle, above the fold
       lead card                          title printed under a cover image that
                                          ALREADY HAS THE SAME TITLE BAKED IN
       sections                           11 of them, all kicker + h2 + grid
       keyframes / video / canvas         0 / 0 / 0

   Nothing on the page was larger than the other things on the page, so nothing
   read as important. This file adds three components that each break that flatness
   in one specific way:

     .bdm-fl*   the lead   — image and text side by side, headline at 40px, so the
                             first story is visibly THE story
     .bdm-fv*   the vitals — the live strip that fills the dead space: how long ago
                             the last story landed, how many landed today
     .bdm-fs*   the numbers — one 72px figure instead of four 34px ones
     .bdm-fe*   the diary   — events as dated entries, not article cards

   Motion is in bdm-motion.css / bdm-motion.js, deliberately separate so the page
   still works with JS off and so prefers-reduced-motion has one file to switch off.

   Tokens come from bd-native.css (--bd-ink, --bd-accent, --bd-measure...). No new
   literal hex except the cover-scrim gradient, which is an image treatment.
   ============================================================================= */

/* ------------------------------------------------------------ the lead story */

/* The masthead band: headline left, deck + vitals right.
   Measured before: the deck was 58ch wide inside a 1240px wrap, which left a
   ~740x90px white rectangle to its right, above the fold — the emptiest space on
   the page. Two columns cost nothing and turn that rectangle into the argument. */
.bdm-fh {
	display: grid;
	grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
	gap: 20px 46px;
	align-items: end;
}

/* 46px was the cap for every page. A front page's headline earns more: this is the
   only place on the estate where 60px is the right answer. */
.bdm-fh .bd-hero__title {
	max-width: 20ch;
	font-size: clamp(34px, 4.6vw, 60px);
	line-height: 1.06;
	letter-spacing: -.025em;
}

.bdm-fh__r .bd-hero__deck { margin-top: 0; max-width: 46ch; }

.bdm-fl {
	display: grid;
	grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
	gap: 0 34px;
	align-items: start;
	margin-top: 30px;
}

.bdm-fl__art {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--bd-radius);
	background: var(--bd-line-soft);
}

.bdm-fl__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* slow push-in, 16s, once. Handled by bdm-motion.css so reduced-motion can stop it. */
}

/* The category label sits ON the art, because the art is the thing a reader looks at
   first and "which beat is this" is the first question they ask about it. */
.bdm-fl__cat {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: inline-block;
	padding: 5px 10px;
	font-family: var(--bd-ff-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	background: var(--bd-accent);
	border-radius: 4px;
}

.bdm-fl__body { padding-top: 4px; }

/* Was 24px on a card. The lead is the one place a 38-40px headline is warranted,
   and it is what makes the page have a subject instead of a list. */
.bdm-fl__title {
	display: block;
	margin: 0;
	font-family: var(--bd-ff-display);
	font-size: clamp(26px, 2.9vw, 40px);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.02em;
	color: var(--bd-ink);
	text-decoration: none;
}
.bdm-fl__title:hover { color: var(--bd-accent); }

.bdm-fl__ex {
	margin: 16px 0 0;
	font-size: 17px;
	line-height: 1.65;
	color: var(--bd-muted);
	max-width: var(--bd-measure);
}

.bdm-fl__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 18px 0 0;
	font-size: 13px;
	color: var(--bd-muted);
}
.bdm-fl__meta span + span::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-right: 10px;
	vertical-align: middle;
	border-radius: 50%;
	background: currentColor;
	opacity: .5;
}

.bdm-fl__cta {
	display: inline-block;
	margin-top: 22px;
	padding: 11px 20px;
	font-family: var(--bd-ff-display);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	color: #fff;
	background: var(--bd-accent);
	border-radius: 6px;
	text-decoration: none;
	transition: background .18s ease, transform .18s ease;
}
.bdm-fl__cta:hover { background: var(--bd-accent-ink); transform: translateY(-1px); }

/* Three companions under the lead. A grid, not a rail, so the lead keeps the
   full width it needs at 1440. */
.bdm-fl-rail {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px 26px;
	margin-top: 38px;
	padding-top: 30px;
	border-top: 1px solid var(--bd-line);
}

/* ------------------------------------------------------------- the vitals row
   Fills the dead rectangle to the right of the deck with facts rather than padding.
   The pulsing dot is the page's only ambient motion and it means something: the
   archive moved. */
.bdm-fv {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13.5px;
	color: var(--bd-muted);
}

.bdm-fv__item { display: inline-flex; align-items: center; gap: 8px; }

.bdm-fv__dot {
	position: relative;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--bd-accent);
	flex: 0 0 auto;
}
.bdm-fv__dot::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: var(--bd-accent);
	opacity: .35;
	animation: bdm-pulse 2.6s ease-out infinite;
}

.bdm-fv__n { font-weight: 700; color: var(--bd-ink); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- the numbers
   One figure at 72px and four at 20px beats five at 34px. Weight is what makes
   a number feel large; equal weight is what made the old row feel like a table. */
.bdm-fs {
	margin-top: 6px;
	padding: 30px 32px 26px;
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius);
	background: var(--bd-card);
}

.bdm-fs__hero {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 6px 20px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--bd-line);
}

.bdm-fs__value {
	font-family: var(--bd-ff-display);
	font-size: clamp(46px, 5.4vw, 72px);
	font-weight: 800;
	line-height: .95;
	letter-spacing: -.03em;
	color: var(--bd-ink);
	font-variant-numeric: tabular-nums;
}

.bdm-fs__unit {
	margin: 0 0 8px;
	max-width: 26ch;
	font-size: 14px;
	line-height: 1.45;
	color: var(--bd-muted);
}
.bdm-fs__unit b { display: block; color: var(--bd-ink); font-weight: 600; }

.bdm-fs__row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.bdm-fs__n {
	display: block;
	font-family: var(--bd-ff-display);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--bd-ink);
	font-variant-numeric: tabular-nums;
}

.bdm-fs__l {
	display: block;
	margin-top: 5px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--bd-muted);
}

/* Cumulative, not per-month. The old bar chart showed Jul: 0 next to Oct: 48 and
   undercut the section it was illustrating; a line that only goes up cannot. */
.bdm-fs__spark { margin-top: 24px; }
.bdm-fs__spark svg { display: block; width: 100%; height: 62px; overflow: visible; }
.bdm-fs__spark path.line {
	fill: none;
	stroke: var(--bd-accent);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	/* VISIBLE BY DEFAULT. The draw-on is armed by JS (`.is-armed`) and released by
	   `.is-drawn`; with JS off the line is simply there. An earlier version put
	   dasharray:1000 in this rule and the path is only ~510 long, so a failed script
	   hid the chart completely — the opposite of "works without JS". */
	transition: stroke-dashoffset 1.6s cubic-bezier(.3, .8, .3, 1);
}
.bdm-fs__spark.is-armed path.line {
	stroke-dasharray: var(--bd-len, 0);
	stroke-dashoffset: var(--bd-len, 0);
	transition: none;
}
.bdm-fs__spark.is-drawn path.line {
	stroke-dasharray: var(--bd-len, 0);
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.6s cubic-bezier(.3, .8, .3, 1);
}
.bdm-fs__spark path.area { fill: var(--bd-accent); opacity: .07; stroke: none; }

.bdm-fs__cap {
	margin: 10px 0 0;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--bd-faint);
}

.bdm-fs__note {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--bd-line);
	font-size: 12px;
	line-height: 1.5;
	color: var(--bd-faint);
}

/* ----------------------------------------------------------------- the diary
   Events were four article cards, so a workshop on 30 Nov looked exactly like a
   roundup of January 2027. A dated rail with a day/month block is the entire
   difference between "we have events" and "we have a calendar". */
.bdm-fe { margin-top: 6px; }

.bdm-fe__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bdm-fe__item {
	display: flex;
	gap: 14px;
	padding: 18px 16px;
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius);
	background: var(--bd-card);
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.bdm-fe__item:hover {
	border-color: var(--bd-accent);
	transform: translateY(-2px);
	box-shadow: var(--bd-shadow-lift);
}

.bdm-fe__date {
	flex: 0 0 46px;
	text-align: center;
	padding: 6px 0 7px;
	border-radius: 6px;
	background: var(--bd-accent);
	color: #fff;
}
.bdm-fe__d {
	display: block;
	font-family: var(--bd-ff-display);
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.bdm-fe__m {
	display: block;
	margin-top: 3px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
/* A roundup has no single date — "DEC" alone would be a lie. "Dec" is also three
   characters where a day is two, so a month block needs its own type size or it
   overflows the 46px badge. */
.bdm-fe__date--month { background: var(--bd-navy); }
.bdm-fe__date--month .bdm-fe__d { font-size: 15px; letter-spacing: -.01em; }
.bdm-fe__date--month .bdm-fe__m { font-size: 9px; letter-spacing: .08em; }
.bdm-fe__date--past { background: var(--bd-line); color: var(--bd-muted); }

.bdm-fe__body { min-width: 0; }

.bdm-fe__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--bd-ink);
	text-decoration: none;
}
.bdm-fe__title:hover { color: var(--bd-accent); }

.bdm-fe__meta {
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--bd-muted);
}

.bdm-fe__tag {
	display: inline-block;
	padding: 2px 7px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bd-accent);
	background: color-mix(in srgb, var(--bd-accent) 10%, transparent);
	border-radius: 3px;
}

.bdm-fe__empty {
	margin: 0;
	font-size: 15px;
	color: var(--bd-muted);
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
	.bdm-fs__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bdm-fe__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.bdm-fh { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.bdm-fh__r .bd-hero__deck { margin-top: 0; }
	.bdm-fl { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 22px; }
	.bdm-fl-rail { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.bdm-fs { padding: 22px 18px; }
	.bdm-fs__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.bdm-fe__list { grid-template-columns: minmax(0, 1fr); }
	.bdm-fv { gap: 6px 16px; font-size: 12.5px; }
}

/* Dark mode: the components above read tokens, so only the two literal surfaces
   in this file need a second value. */
html[data-bd-theme='dark'] .bdm-fl__cta { color: #fff; }
html[data-bd-theme='dark'] .bdm-fe__date--past { background: #262b36; }