/* ────────────────────────────────────────────────────────────────────
   Broadsheet front canvas (.bsx-*) — a 6-unit snap grid.
   Blocks span 1–6 grid units and pack densely (assets/js/bsx-grid.js
   converts natural heights into fine row spans so gaps close up).
   New component alongside the ported CSS, which is untouched.
   ──────────────────────────────────────────────────────────────────── */

/* Self-contained image reset: WP outputs width/height attributes, and
   aspect-ratio frames only work when CSS height is auto. The front page
   inherits this from the base theme CSS, but the editor's height mirror
   loads only this file — without it, gallery/photo blocks measure at
   attribute size and balloon. */
.bsx img { max-width: 100%; height: auto; }

.bsx {
	--bsx-rule:      rgba(28, 14, 6, 0.16);
	--bsx-rule-soft: rgba(28, 14, 6, 0.09);
	--bsx-ink:       var(--ink, #1A0A02);
	--bsx-ink-soft:  rgba(28, 14, 6, 0.62);
	--bsx-accent:    var(--terracotta, #C4622D);
	color: var(--bsx-ink);
	padding: 18px 0 8px;
	position: relative;
}

/* topline — dateline row under the nav */
.bsx-topline {
	display: flex; align-items: baseline; gap: 18px;
	border-top: 1px solid var(--bsx-ink);
	border-bottom: 1px solid var(--bsx-rule);
	padding: 8px 2px;
	font-family: 'Libre Franklin', sans-serif;
	font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
	color: var(--bsx-ink-soft);
}
.bsx-topline-mid { color: var(--bsx-accent); font-weight: 700; }
.bsx-topline-right { margin-left: auto; color: var(--bsx-ink-soft); text-decoration: none; }
.bsx-topline-right:hover { color: var(--bsx-accent); }

/* preview mode banner */
.bsx-preview-bar {
	background: var(--night, #1C0E06); color: #FBF0D8;
	font-family: 'Libre Franklin', sans-serif; font-size: 13px;
	padding: 10px 16px; margin-bottom: 14px; border-radius: 3px;
	border-left: 4px solid var(--ochre, #E8A820);
}
.bsx-preview-bar strong { color: var(--ochre, #E8A820); text-transform: uppercase; letter-spacing: 1.4px; font-size: 11.5px; }
.bsx-preview-bar a { color: var(--turquoise, #1DADA0); }

/* ── the canvas: 6 grid units, dense flow, JS-packed rows ──────────── */
.bsx-canvas {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-auto-flow: row; /* strict: blocks keep their order */
	column-gap: 26px;
	padding-top: 16px;
	overflow: hidden; /* clips the first column's gutter rule */
}

.bsx-b { min-width: 0; position: relative; }
.bsx-b-inner { padding-bottom: 0; }
/* Every block is closed top AND bottom: the opening package rule above, a
   hairline below. The closing rule hangs off the BLOCK, not its content, so
   it sits at the foot of the grid area — and since the packer squares each
   band off to a common height, every rule in a band lands on one line. With
   the column rules in the gutters that draws a continuous lattice. */
.bsx-b::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 18px;
	border-bottom: 1px solid var(--bsx-rule);
}

/* vertical hairlines live in the gutters — the newspaper column rule.
   Each block draws one at its left edge; column 1's falls outside the
   canvas and is clipped. Blocks stack flush, so the rules read as
   continuous column dividers. */
.bsx-b::before {
	content: ""; position: absolute; top: 0; bottom: 0; left: -13px;
	border-left: 1px solid var(--bsx-rule);
}

.bsx-s1 { grid-column: span 1; }
.bsx-s2 { grid-column: span 2; }
.bsx-s3 { grid-column: span 3; }
.bsx-s4 { grid-column: span 4; }
.bsx-s5 { grid-column: span 5; }
.bsx-s6 { grid-column: span 6; }

/* every block opens with one firm ink rule — the package rule; interior
   separations stay light and dotted. (No decorative color bars: the
   desert accent lives in labels, kickers, and date chips.) */
.bsx-b-inner::before {
	content: ""; display: block; border-top: 1px solid var(--bsx-ink);
	margin-bottom: 14px;
}

/* ── desert accent details — bold and local, not corporate ─────────── */
.bsx-desert .bsx-topline { border-top: 0; padding-top: 14px; }
.bsx-desert .bsx-topline::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
	background: linear-gradient(90deg,
		var(--terracotta, #C4622D) 0 30%,
		var(--ochre, #E8A820) 30% 55%,
		var(--turquoise, #1DADA0) 55% 75%,
		var(--dusk, #6e4553) 75% 100%);
}
/* every story package opens on a firm terracotta rule — our color, not gray */
.bsx-desert .bsx-b-inner::before { border-top: 2px solid var(--terracotta, #C4622D); }
.bsx-desert .bsx-kicker { color: var(--terracotta, #C4622D); font-weight: 800; }
.bsx-desert .bsx-ago { color: var(--turquoise, #1DADA0); font-weight: 700; }
/* labels are filled chips now — small-town paper confidence */
.bsx-desert .bsx-label {
	display: inline-block; background: var(--terracotta, #C4622D); color: #FBF0D8;
	padding: 3px 10px 2px; border-radius: 2px; letter-spacing: 2.4px;
}
.bsx-desert .bsx-label::after { display: none; }
/* section identities wear turquoise */
.bsx-desert .bsx-sectioncard-name {
	display: inline-block; background: var(--turquoise, #1DADA0); color: #fff;
	padding: 3px 10px 2px; border-radius: 2px;
}
.bsx-desert .bsx-sectioncard-head { border-bottom-color: var(--turquoise, #1DADA0); }
.bsx-desert .bsx-photo img, .bsx-desert .bsx-gallery-cell img, .bsx-desert .bsx-story-thumb img {
	border: 1px solid var(--sandstone, #E8C9A0);
}
.bsx-desert .bsx-dispatches { border-top-color: var(--terracotta, #C4622D); }
.bsx-desert .bsx-dispatch-sub { color: var(--dusk, #6e4553); }
/* boxed cards carry the brand color instead of plain ink */
.bsx-desert .bsx-eventcard, .bsx-desert .bsx-promocard {
	border-color: var(--terracotta-dark, #9A4520);
	box-shadow: 4px 4px 0 rgba(196, 98, 45, 0.45);
}

/* ── shared unit typography ────────────────────────────────────────── */
.bsx-kicker {
	font-family: 'Libre Franklin', sans-serif; font-size: 10.5px; font-weight: 700;
	letter-spacing: 2px; text-transform: uppercase; color: var(--bsx-accent);
	margin-bottom: 6px;
}
.bsx-lead-hed {
	font-family: 'Noto Serif', serif; font-weight: 900;
	font-size: 31px; line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 9px;
}
.bsx-lead-hed a { color: inherit; text-decoration: none; }
.bsx-lead-hed a:hover { color: var(--bsx-accent); }
.bsx-lead-deck {
	font-family: 'Libre Baskerville', serif; font-size: 16.5px; line-height: 1.42;
	color: var(--bsx-ink-soft); margin: 0 0 8px;
}
.bsx-byline {
	font-family: 'Libre Franklin', sans-serif; font-size: 11px; letter-spacing: 0.4px;
	color: var(--bsx-ink-soft); margin-top: 2px;
}
.bsx-hed {
	font-family: 'Noto Serif', serif; font-weight: 700;
	font-size: 17.5px; line-height: 1.18; margin: 0 0 5px;
}
.bsx-hed-lg { font-size: 22px; margin-top: 11px; }
.bsx-hed a { color: inherit; text-decoration: none; }
.bsx-hed a:hover { color: var(--bsx-accent); }
/* summaries are a supporting line, not a paragraph — three lines maximum
   keeps every card in a row roughly the same depth */
.bsx-summary {
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
	overflow: hidden;
	font-family: 'Libre Baskerville', serif; font-size: 14.5px; line-height: 1.45;
	color: var(--bsx-ink-soft); margin: 0 0 6px;
}
.bsx-label {
	font-family: var(--font-accent, 'Libre Franklin', sans-serif); font-weight: 600; text-transform: uppercase; font-size: 15px; letter-spacing: 2.6px;
	color: var(--bsx-ink); margin-bottom: 8px;
}
.bsx-label::after { content: ""; display: inline-block; width: 22px; border-top: 2px solid var(--bsx-accent); vertical-align: 4px; margin-left: 8px; }

/* story rows */
.bsx-stories .bsx-story + .bsx-story { border-top: 1px solid var(--bsx-rule-soft); margin-top: 11px; padding-top: 10px; }
.bsx-story-thumbed { display: flex; gap: 12px; }
.bsx-story-thumbed .bsx-story-body { flex: 1; min-width: 0; }
.bsx-story-thumb { flex: 0 0 76px; display: block; }
.bsx-story-thumb img { display: block; width: 76px; height: 76px; object-fit: cover; }

/* lead with photo on */
.bsx-lead > .bsx-photo { display: block; margin-bottom: 12px; }
.bsx-lead > .bsx-photo img { display: block; width: 100%; height: auto; }

/* picture story */
.bsx-photo { display: block; }
.bsx-photo img { display: block; width: 100%; height: auto; }
.bsx-caption {
	font-family: 'Libre Franklin', sans-serif; font-size: 11px; line-height: 1.5;
	color: var(--bsx-ink-soft); padding-top: 6px;
}
.bsx-photo-story .bsx-summary { margin-bottom: 6px; }

/* rail-style blocks (latest / reel) */
.bsx-rail-block { padding: 0; }

.bsx-latest { list-style: none; margin: 0; padding: 0; }
.bsx-latest li { padding: 5px 0; border-top: 1px dotted var(--bsx-rule-soft); }
.bsx-latest li:first-child { border-top: 0; padding-top: 0; }
.bsx-ago {
	display: block; font-family: 'Libre Franklin', sans-serif; font-size: 10px;
	letter-spacing: 1.4px; text-transform: uppercase; color: var(--bsx-accent);
	margin-bottom: 2px;
}
.bsx-latest a {
	font-family: 'Noto Serif', serif; font-weight: 700; font-size: 14.5px;
	line-height: 1.3; color: inherit; text-decoration: none;
}
.bsx-latest a:hover { color: var(--bsx-accent); }

/* In Brief */
.bsx-brief ul { list-style: none; margin: 0; padding: 0; }
.bsx-brief li { padding: 5px 0; border-top: 1px dotted var(--bsx-rule-soft); }
.bsx-brief li:first-child { border-top: 0; padding-top: 0; }
.bsx-brief a {
	font-family: 'Noto Serif', serif; font-weight: 700; font-size: 15.5px;
	line-height: 1.3; color: inherit; text-decoration: none;
}
.bsx-brief a:hover { color: var(--bsx-accent); }

/* story package: featured lead + row of small articles beneath */
.bsx-package-lead > .bsx-media { margin-bottom: 12px; }
.bsx-package-hed {
	font-family: 'Noto Serif', serif; font-weight: 900;
	font-size: clamp(24px, 2.6vw, 34px); line-height: 1.12; margin: 0 0 8px;
}
.bsx-package-hed a { color: inherit; text-decoration: none; }
.bsx-package-hed a:hover { color: var(--bsx-accent); }
.bsx-package-row {
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 20px;
	border-top: 1px solid var(--bsx-rule-soft); margin-top: 16px; padding-top: 16px;
}
.bsx-package-item .bsx-media { margin-bottom: 8px; }
.bsx-package-itemhed {
	font-family: 'Noto Serif', serif; font-weight: 700;
	font-size: 15.5px; line-height: 1.25; margin: 0 0 5px;
}
.bsx-package-itemhed a { color: inherit; text-decoration: none; }
.bsx-package-itemhed a:hover { color: var(--bsx-accent); }

/* section card styles */
.bsx-sectioncard--mosaic > .bsx-media { margin-bottom: 10px; }
.bsx-sectioncard-thumbrows { margin-top: 8px; }
.bsx-sectioncard-thumbrow {
	display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit;
	padding: 9px 0; border-top: 1px dotted var(--bsx-rule-soft);
}
.bsx-sectioncard-thumb { flex: 0 0 56px; }
.bsx-sectioncard-thumb img { display: block; width: 56px; height: 56px; object-fit: cover; }
.bsx-sectioncard-thumbhed {
	font-family: 'Noto Serif', serif; font-weight: 700; font-size: 14.5px; line-height: 1.3;
	display: block; margin-top: 6px;
}
.bsx-sectioncard-thumbrow .bsx-sectioncard-thumbhed { margin-top: 0; }
.bsx-sectioncard-thumbrow:hover .bsx-sectioncard-thumbhed { color: var(--bsx-accent); }
.bsx-sectioncard-minigrid {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
	border-top: 1px dotted var(--bsx-rule-soft); margin-top: 12px; padding-top: 12px;
}
.bsx-sectioncard-minicell { text-decoration: none; color: inherit; }
.bsx-sectioncard-minicell:hover .bsx-sectioncard-thumbhed { color: var(--bsx-accent); }

/* article overlay style */
.bsx-article-overlay .bsx-overlay-kicker {
	display: block; font-style: normal;
	font-family: 'Libre Franklin', sans-serif; font-size: 10px; font-weight: 700;
	letter-spacing: 1.8px; text-transform: uppercase; color: var(--sandstone, #E8C9A0);
	margin-bottom: 4px;
}
.bsx-big .bsx-article-overlay .bsx-imageblock-hed { font-size: 26px; }

/* photo grid ("In Pictures") */
.bsx-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* gallery styles: mosaic gives the first photo double presence;
   filmstrip runs everything in one row */
.bsx-gallery-grid--mosaic .bsx-gallery-cell:first-child { grid-column: span 2; }
.bsx-gallery-grid--mosaic .bsx-gallery-cell:first-child img { aspect-ratio: 16 / 9; }
.bsx-gallery-grid--mosaic .bsx-gallery-cell:first-child .bsx-gallery-hed { font-size: 16px; }
.bsx-gallery-grid--strip { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
.bsx-gallery-grid--strip img { aspect-ratio: 1 / 1; }
.bsx-gallery-cell { display: block; text-decoration: none; color: inherit; }
.bsx-gallery-cell img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bsx-gallery-hed {
	display: block; margin-top: 6px;
	font-family: 'Noto Serif', serif; font-weight: 700; font-size: 13.5px; line-height: 1.3;
}
.bsx-gallery-cell:hover .bsx-gallery-hed { color: var(--bsx-accent); }

/* ── aspect-ratio media frames ─────────────────────────────────────── */
.bsx-media { display: block; position: relative; overflow: hidden; }
.bsx-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bsx-ar-16x9 { aspect-ratio: 16 / 9; }
.bsx-ar-4x3  { aspect-ratio: 4 / 3; }
.bsx-ar-1x1  { aspect-ratio: 1 / 1; }
.bsx-ar-3x4  { aspect-ratio: 3 / 4; }
.bsx-ar-9x16 { aspect-ratio: 9 / 16; }

/* article card */
.bsx-card .bsx-media { margin-bottom: 10px; }
.bsx-card .bsx-kicker { margin-bottom: 6px; }

/* photo block */
.bsx-imageblock { margin: 0; }
.bsx-imageblock .bsx-media::after {
	content: ""; position: absolute; inset: 0;
	/* subtle full-frame scrim so the overlay headline pops, deepening
	   toward the bottom where the text sits */
	background: linear-gradient(180deg,
		rgba(28, 14, 6, 0.22) 0%,
		rgba(28, 14, 6, 0.14) 40%,
		rgba(28, 14, 6, 0.45) 75%,
		rgba(28, 14, 6, 0.82) 100%);
}
.bsx-imageblock-hed { text-shadow: 0 1px 8px rgba(28, 14, 6, 0.6); }
.bsx-imageblock-hed {
	position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1;
	font-family: 'Noto Serif', serif; font-weight: 700; font-size: 15.5px;
	line-height: 1.25; color: #FBF0D8;
}
.bsx-imageblock:hover .bsx-imageblock-hed { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* event card */
.bsx-eventcard {
	display: block; text-decoration: none; color: inherit;
	background: var(--warm-white, #FBF0D8);
	border: 1.5px solid var(--bsx-ink); padding: 14px 16px 12px;
	box-shadow: 4px 4px 0 rgba(28, 14, 6, 0.82);
}
.bsx-eventcard-row { display: flex; text-decoration: none; color: inherit; }
.bsx-eventcard-cal {
	display: block; margin-top: 12px; padding-top: 10px;
	border-top: 1px dotted var(--bsx-rule-soft);
	font-family: 'Libre Franklin', sans-serif; font-size: 10.5px; font-weight: 700;
	letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--bsx-accent); text-decoration: none;
}
.bsx-eventcard-cal:hover { color: var(--bsx-ink); }
.bsx-eventcard-label {
	display: block; font-family: var(--font-accent, 'Libre Franklin', sans-serif); font-weight: 600; text-transform: uppercase; font-size: 13px;
	letter-spacing: 2.6px; color: var(--bsx-accent); margin-bottom: 10px;
}
.bsx-eventcard-row { display: flex; gap: 14px; align-items: flex-start; }
.bsx-eventcard-title {
	display: block; font-family: 'Noto Serif', serif; font-weight: 700;
	font-size: 17.5px; line-height: 1.25; margin-bottom: 5px;
}
.bsx-eventcard:hover .bsx-eventcard-title { color: var(--bsx-accent); }
.bsx-eventcard-meta { display: block; font-family: 'Libre Franklin', sans-serif; font-size: 11.5px; color: var(--bsx-ink-soft); line-height: 1.5; }

.bsx-datechip {
	flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center;
	min-width: 44px; padding: 5px 8px 6px; background: var(--bsx-ink); color: #FBF0D8;
	border-radius: 3px; line-height: 1;
}
.bsx-datechip b { font-family: 'Noto Serif', serif; font-weight: 900; font-size: 20px; }
.bsx-datechip i {
	font-style: normal; font-family: 'Libre Franklin', sans-serif; font-size: 9.5px;
	letter-spacing: 1.6px; text-transform: uppercase; margin-top: 3px; color: var(--sandstone, #E8C9A0);
}
.bsx-desert .bsx-datechip { background: var(--terracotta, #C4622D); }
.bsx-desert .bsx-datechip i { color: #FBF0D8; }

/* calendar card */
.bsx-callist { list-style: none; margin: 0; padding: 0; }
.bsx-callist li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-top: 1px dotted var(--bsx-rule-soft); }
.bsx-callist li:first-child { border-top: 0; padding-top: 0; }
.bsx-callist .bsx-datechip { min-width: 38px; padding: 4px 6px 5px; }
.bsx-callist .bsx-datechip b { font-size: 16px; }
.bsx-callist-main a {
	font-family: 'Noto Serif', serif; font-weight: 700; font-size: 14.5px;
	line-height: 1.3; color: inherit; text-decoration: none; display: block;
}
.bsx-callist-main a:hover { color: var(--bsx-accent); }
.bsx-callist-meta { font-family: 'Libre Franklin', sans-serif; font-size: 10.5px; color: var(--bsx-ink-soft); }

/* section card */
.bsx-sectioncard-head {
	display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
	border-bottom: 3px double var(--bsx-ink); padding-bottom: 6px;
}
.bsx-sectioncard-name {
	font-family: var(--font-accent, 'Libre Franklin', sans-serif); font-weight: 600; text-transform: uppercase; font-size: 17px; letter-spacing: 2.6px;
	color: var(--bsx-accent);
}
/* (desert section-name chip styling lives in the desert accent block above) */
.bsx-sectioncard-more {
	margin-left: auto; font-family: 'Libre Franklin', sans-serif; font-size: 10px; font-weight: 700;
	letter-spacing: 1.4px; text-transform: uppercase; color: var(--bsx-ink-soft); text-decoration: none; white-space: nowrap;
}
.bsx-sectioncard-more:hover { color: var(--bsx-accent); }
.bsx-sectioncard-list { list-style: none; margin: 6px 0 0; padding: 0; }
.bsx-sectioncard-list li { padding: 6px 0; border-top: 1px dotted var(--bsx-rule-soft); }
.bsx-sectioncard-list a {
	font-family: 'Noto Serif', serif; font-weight: 700; font-size: 14.5px;
	line-height: 1.3; color: inherit; text-decoration: none;
}
.bsx-sectioncard-list a:hover { color: var(--bsx-accent); }

/* 16:9 clip reuses the reel treatment at landscape ratio */
.bsx-reel.bsx-clip { aspect-ratio: 16 / 9; max-width: none; }
.bsx-b-clip .bsx-reel { max-width: none; margin: 0; }

/* breaking news banner */
.bsx-breaking {
	display: block; position: relative;
	background: var(--night, #1C0E06);
	border-left: 5px solid #C22B1E;
	padding: 14px 18px 15px;
	color: #FBF0D8;
}
.bsx-breaking-label {
	display: inline-flex; align-items: center; gap: 7px;
	font-family: var(--font-accent, 'Libre Franklin', sans-serif); font-weight: 600; text-transform: uppercase; font-size: 15px; letter-spacing: 3px;
	color: #FF6B4A; margin-right: 12px;
}
.bsx-breaking-dot {
	width: 8px; height: 8px; border-radius: 50%; background: #C22B1E;
	animation: bsx-breaking-pulse 1.6s ease-in-out infinite;
}
@keyframes bsx-breaking-pulse {
	0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(194, 43, 30, 0.55); }
	50% { opacity: .55; box-shadow: 0 0 0 6px rgba(194, 43, 30, 0); }
}
.bsx-breaking-ago {
	font-family: 'Libre Franklin', sans-serif; font-size: 10.5px; letter-spacing: 1.4px;
	text-transform: uppercase; color: rgba(251, 240, 216, 0.55);
}
.bsx-breaking-hed {
	display: block; margin-top: 6px;
	font-family: 'Noto Serif', serif; font-weight: 900;
	font-size: clamp(22px, 2.6vw, 34px); line-height: 1.15;
	color: #FBF0D8; text-decoration: none;
}
a.bsx-breaking-hed:hover { color: #FFC9A0; }
.bsx-breaking-body {
	display: block; margin-top: 6px;
	font-family: 'Libre Baskerville', serif; font-size: 16.5px; line-height: 1.45;
	color: rgba(251, 240, 216, 0.8);
}
/* the banner needs no package rule above it — it IS the interruption */
.bsx-b-breaking .bsx-b-inner::before { display: none; }
.bsx-b-breaking::before { display: none; }

/* promo card — designer-written */
.bsx-promocard {
	display: flex; flex-direction: column; height: 100%;
	background: var(--warm-white, #FBF0D8);
	border: 1.5px solid var(--bsx-ink); padding: 14px 16px 14px;
	box-shadow: 4px 4px 0 rgba(28, 14, 6, 0.82);
}
.bsx-promocard-hed {
	font-family: 'Noto Serif', serif; font-weight: 700;
	font-size: 20px; line-height: 1.22; margin-bottom: 6px;
}
.bsx-promocard-body { font-family: 'Libre Baskerville', serif; font-size: 15px; line-height: 1.5; color: var(--bsx-ink-soft); }
.bsx-promocard-cta {
	margin-top: auto; padding-top: 12px;
	font-family: 'Libre Franklin', sans-serif; font-size: 10.5px; font-weight: 700;
	letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--bsx-accent); text-decoration: none;
}
.bsx-promocard-cta:hover { color: var(--bsx-ink); }

/* feature-size blocks (≥3 rows tall or ≥4 units wide): bigger presence */
.bsx-big.bsx-b-article .bsx-hed { font-size: 26px; line-height: 1.18; }
.bsx-big.bsx-b-article .bsx-summary { font-size: 17px; line-height: 1.55; }
.bsx-big .bsx-imageblock-hed { font-size: 22px; line-height: 1.22; }
.bsx-big.bsx-b-promo .bsx-promocard-hed { font-size: clamp(24px, 2.4vw, 32px); }
.bsx-big.bsx-b-promo .bsx-promocard-body { font-size: 16.5px; }
.bsx-big.bsx-b-event .bsx-eventcard-title { font-size: 22px; }
.bsx-big.bsx-b-event .bsx-datechip { min-width: 54px; }
.bsx-big.bsx-b-event .bsx-datechip b { font-size: 26px; }

/* ── vertical video reels ──────────────────────────────────────────── */
.bsx-reel {
	position: relative; display: block; overflow: hidden; border-radius: 6px;
	background: var(--night, #1C0E06); aspect-ratio: 9 / 16; text-decoration: none;
}
.bsx-reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bsx-reel-grad {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(28,14,6,0.35) 0%, rgba(28,14,6,0) 30%, rgba(28,14,6,0) 55%, rgba(28,14,6,0.82) 100%);
}
.bsx-reel-tag {
	position: absolute; top: 10px; left: 10px;
	display: inline-flex; align-items: center; gap: 6px;
	font-family: 'Libre Franklin', sans-serif; font-size: 10px; font-weight: 700;
	letter-spacing: 1.4px; text-transform: uppercase; color: #fff;
	background: rgba(28,14,6,0.55); padding: 4px 9px; border-radius: 3px;
}
.bsx-reel-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta, #C4622D); }
.bsx-reel-title {
	position: absolute; left: 12px; right: 12px; bottom: 12px;
	font-family: 'Noto Serif', serif; font-weight: 700; font-size: 15.5px;
	line-height: 1.25; color: #FBF0D8;
}
.bsx-reel:hover .bsx-reel-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* a one-column reel fills its column; in wider blocks it stays capped */
.bsx-b-reel .bsx-reel { width: 100%; max-width: 300px; margin: 0 auto; }

/* dispatches strip under the canvas */
.bsx-dispatches { border-top: 1px solid var(--bsx-ink); margin-top: 8px; padding-top: 12px; }
.bsx-dispatch-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.bsx-dispatch-sub { font-family: 'Libre Baskerville', serif; font-style: italic; font-size: 14.5px; color: var(--bsx-ink-soft); }
.bsx-dispatch-more {
	margin-left: auto; font-family: 'Libre Franklin', sans-serif; font-size: 10.5px; font-weight: 700;
	letter-spacing: 1.6px; text-transform: uppercase; color: var(--bsx-accent); text-decoration: none;
}
.bsx-dispatch-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bsx-reel-cta {
	display: flex; align-items: center; justify-content: center; text-align: center;
	background:
		radial-gradient(120% 90% at 50% 110%, rgba(196,98,45,0.55), rgba(28,14,6,0) 60%),
		var(--night-mid, #2C1A10);
	border: 1px solid rgba(196,98,45,0.35);
}
.bsx-reel-cta-inner { font-family: 'Noto Serif', serif; font-weight: 700; font-size: 17px; line-height: 1.35; color: #FBF0D8; }
.bsx-reel-cta-play {
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%;
	border: 1px solid rgba(251,240,216,0.5); color: #FBF0D8; font-size: 13px; padding-left: 3px;
}
.bsx-reel-cta:hover .bsx-reel-cta-play { background: var(--terracotta, #C4622D); border-color: var(--terracotta, #C4622D); }

/* ── span-aware typography: blocks dress for the room they occupy ──── */

/* lead scales with its span */
.bsx-s4 .bsx-lead-hed { font-size: clamp(32px, 3.2vw, 46px); max-width: 26ch; }
.bsx-s5 .bsx-lead-hed, .bsx-s6 .bsx-lead-hed { font-size: clamp(40px, 4.6vw, 62px); max-width: 24ch; }
.bsx-s4 .bsx-lead-deck, .bsx-s5 .bsx-lead-deck, .bsx-s6 .bsx-lead-deck { font-size: 20px; max-width: 66ch; }
.bsx-s4 .bsx-lead > .bsx-photo img, .bsx-s5 .bsx-lead > .bsx-photo img, .bsx-s6 .bsx-lead > .bsx-photo img {
	max-height: 540px; object-fit: cover;
}

/* story stacks fan out when wide */
.bsx-s3 .bsx-stories, .bsx-s4 .bsx-stories {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px;
}
.bsx-s5 .bsx-stories, .bsx-s6 .bsx-stories {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 30px;
}
.bsx-s3 .bsx-stories .bsx-story, .bsx-s4 .bsx-stories .bsx-story,
.bsx-s5 .bsx-stories .bsx-story, .bsx-s6 .bsx-stories .bsx-story {
	border-top: 1px solid var(--bsx-rule-soft); margin-top: 0; padding-top: 15px;
}

/* picture story goes photo-beside-text when wide */
.bsx-s4 .bsx-photo-story, .bsx-s5 .bsx-photo-story, .bsx-s6 .bsx-photo-story {
	display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 6px 26px; align-items: start;
}
.bsx-s4 .bsx-photo-story > .bsx-photo, .bsx-s5 .bsx-photo-story > .bsx-photo, .bsx-s6 .bsx-photo-story > .bsx-photo { grid-row: 1 / 4; }
.bsx-s4 .bsx-photo-story img, .bsx-s5 .bsx-photo-story img, .bsx-s6 .bsx-photo-story img { max-height: 520px; object-fit: cover; width: 100%; }
.bsx-s4 .bsx-photo-story .bsx-hed-lg, .bsx-s5 .bsx-photo-story .bsx-hed-lg, .bsx-s6 .bsx-photo-story .bsx-hed-lg { font-size: clamp(24px, 2.4vw, 32px); margin-top: 0; }

/* briefs and latest flow into newspaper columns */
.bsx-s3 .bsx-brief ul, .bsx-s4 .bsx-brief ul { columns: 2; column-gap: 26px; column-rule: 1px dotted var(--bsx-rule-soft); }
.bsx-s5 .bsx-brief ul, .bsx-s6 .bsx-brief ul { columns: 4; column-gap: 30px; column-rule: 1px dotted var(--bsx-rule-soft); }
.bsx-b-briefs li { break-inside: avoid; }
.bsx-s3 .bsx-brief li:first-child, .bsx-s4 .bsx-brief li:first-child,
.bsx-s5 .bsx-brief li:first-child, .bsx-s6 .bsx-brief li:first-child { padding-top: 7px; border-top: 1px dotted var(--bsx-rule-soft); }

.bsx-s3 .bsx-latest, .bsx-s4 .bsx-latest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
.bsx-s5 .bsx-latest, .bsx-s6 .bsx-latest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 30px; }
.bsx-b-latest li { break-inside: avoid; }


/* photo grids widen with span */
.bsx-s3 .bsx-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bsx-s4 .bsx-gallery-grid, .bsx-s5 .bsx-gallery-grid, .bsx-s6 .bsx-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

/* ── responsive: canvas narrows, spans clamp ───────────────────────── */
@media (max-width: 1080px) {
	.bsx-canvas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
	/* !important so column pins (inline styles) release on narrow screens */
	.bsx-s1, .bsx-s2, .bsx-s3 { grid-column: span 1 !important; }
	.bsx-s4, .bsx-s5, .bsx-s6 { grid-column: span 2 !important; }
	.bsx-s5 .bsx-stories, .bsx-s6 .bsx-stories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bsx-s5 .bsx-latest, .bsx-s6 .bsx-latest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bsx-s5 .bsx-brief ul, .bsx-s6 .bsx-brief ul { columns: 2; }
	.bsx-s5 .bsx-gallery-grid, .bsx-s6 .bsx-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bsx-s3 .bsx-stories, .bsx-s3 .bsx-latest { display: block; }
	.bsx-s3 .bsx-brief ul { columns: 1; }
	.bsx-s3 .bsx-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.bsx-canvas { grid-template-columns: 1fr; column-gap: 0; }
	/* stacked: no grid area to hang the closing rule off, so it follows the
	   content again and the block itself supplies the gap */
	.bsx-b { grid-column: span 1 !important; grid-row: auto !important; margin-bottom: 18px; }
	.bsx-b::before { display: none; }
	.bsx-b::after { bottom: 0; }
	.bsx-b-inner { padding-bottom: 16px; }
	.bsx-lead-hed { font-size: 30px !important; max-width: none !important; }
	.bsx-stories, .bsx-latest { display: block !important; }
	.bsx-brief ul { columns: 1 !important; }
	.bsx-gallery-grid:not(.bsx-gallery-grid--strip) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.bsx-photo-story { display: block !important; }
	.bsx-dispatch-row { display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; padding-bottom: 8px; }
	.bsx-dispatch-row .bsx-reel { flex: 0 0 62vw; max-width: 250px; scroll-snap-align: start; }
	.bsx-b-reel .bsx-reel { max-width: 240px; }
	.bsx-topline { flex-wrap: wrap; gap: 8px 14px; }
}

/* gallery style variants win over the span-aware column counts */
.bsx-gallery-grid.bsx-gallery-grid--strip {
	grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none;
}
.bsx-gallery-grid.bsx-gallery-grid--mosaic .bsx-gallery-cell:first-child { grid-column: span 2; }

/* ── News Topic package (curated running-story block + /topic/ page) ──
   On the front page the package is a CLOSED BOX: one firm terracotta cap
   rule, hairline sides, a ruled header, a labelled media rail and a ruled
   foot that shuts the bottom. Everything inside belongs to one story. */
.bsx-topic { position: relative; }

/* the box draws its own edges — drop the canvas's generic cap rule and
   closing hairline so they don't double up on the border */
.bsx-b-topic .bsx-b-inner::before { display: none; }
.bsx-b-topic::after { display: none; }

.bsx-topic-boxed {
	border: 1px solid var(--bsx-rule);
	border-top: 3px solid var(--bsx-accent);
	background:
		linear-gradient(180deg, rgba(232, 201, 160, 0.20), rgba(232, 201, 160, 0) 180px),
		var(--paper, #FBF6EC);
	padding: 18px 20px 0;
	box-shadow: 0 1px 0 rgba(28, 14, 6, 0.06);
}
.bsx-topic-boxed .bsx-topic-head {
	border-bottom: 1px solid var(--bsx-rule);
	padding-bottom: 13px;
}
/* Lead runs the full height of the left column; the running-coverage rail
   and the media strip stack down the right one, so the box has no dead
   space under a short rail. */
.bsx-topic-boxed .bsx-topic-body {
	margin-top: 16px;
	grid-template-rows: auto 1fr;
	column-gap: 24px; row-gap: 16px;
}
.bsx-topic-boxed .bsx-topic-lead { grid-column: 1; grid-row: 1 / span 2; }
.bsx-topic-boxed .bsx-topic-rail { grid-column: 2; grid-row: 1; }
.bsx-topic-boxed .bsx-topic-media { grid-column: 2; grid-row: 2; }
.bsx-topic-boxed .bsx-topic-body:not(:has(.bsx-topic-rail)) .bsx-topic-media { grid-row: 1; }

.bsx-topic-head { position: relative; padding-right: 120px; margin-bottom: 14px; }
.bsx-topic-kicker {
	display: inline-flex; align-items: center; gap: 7px;
	font-family: var(--font-accent, 'Libre Franklin', sans-serif); font-weight: 600; text-transform: uppercase; font-size: 15px; letter-spacing: 2.6px;
	background: var(--bsx-accent); color: #FBF0D8;
	padding: 3px 10px 2px; border-radius: 2px; margin-bottom: 10px;
}
.bsx-topic-dot {
	width: 7px; height: 7px; border-radius: 50%; background: #FBF0D8;
	animation: bsx-breaking-pulse 1.6s ease-in-out infinite;
}
.bsx-topic-hed {
	font-family: 'Noto Serif', serif; font-weight: 900;
	font-size: clamp(24px, 2.4vw, 34px); line-height: 1.12; margin: 0 0 8px;
}
.bsx-topic-hed a { color: inherit; text-decoration: none; }
.bsx-topic-hed a:hover { color: var(--bsx-accent); }
.bsx-topic-dek {
	font-family: 'Libre Baskerville', serif; font-size: 16.5px; line-height: 1.5;
	color: var(--bsx-ink-soft); margin: 0; max-width: 62ch;
}
.bsx-topic-more {
	position: absolute; top: 4px; right: 0;
	font-family: 'Libre Franklin', sans-serif; font-size: 11px; font-weight: 700;
	letter-spacing: 1.4px; text-transform: uppercase;
	color: var(--bsx-accent); text-decoration: none;
}
.bsx-topic-more:hover { text-decoration: underline; }
.bsx-topic-body { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; align-items: start; }
.bsx-topic-body:has(> .bsx-topic-lead:only-child) { grid-template-columns: 1fr; }
.bsx-topic-lead .bsx-hed { font-size: 23px; }
.bsx-topic-leadframe { display: block; margin-bottom: 10px; }
.bsx-topic-leadmedia { margin: 0; }
/* portrait lead art (a 9:16 short, or a standing photograph) runs beside
   the text at its own shape — never a 16:9 band cropped through it */
.bsx-topic-leadcard-vert { display: flex; gap: 18px; align-items: flex-start; }
/* the frame tracks the column it sits in — a fixed width squeezes the
   headline into a one-word rag whenever the block gets narrower */
.bsx-topic-leadcard-vert > .bsx-topic-leadframe {
	flex: 0 0 clamp(130px, 32%, 260px); margin-bottom: 0; border-radius: 4px;
}
.bsx-topic-leadcard-vert > .bsx-topic-leadtext { flex: 1 1 auto; min-width: 0; }
.bsx-topic-leadcard-vert .bsx-hed { margin-top: 0; }
@media (max-width: 560px) {
	.bsx-topic-leadcard-vert { gap: 12px; }
}
.bsx-topic-watch {
	position: absolute; top: 10px; left: 10px; z-index: 2;
	display: inline-flex; align-items: center; gap: 6px;
	font-family: 'Libre Franklin', sans-serif; font-size: 10px; font-weight: 700;
	letter-spacing: 1.4px; text-transform: uppercase; color: #fff;
	background: rgba(28,14,6,0.55); padding: 4px 9px; border-radius: 3px;
}
.bsx-topic-rail {
	list-style: none; margin: 0; padding: 0;
	border-top: 2px solid var(--bsx-accent);
}
.bsx-topic-row { padding: 9px 0 10px; border-bottom: 1px solid var(--bsx-rule-soft); }
.bsx-topic-row a {
	display: block;
	font-family: 'Noto Serif', serif; font-weight: 700;
	font-size: 15.5px; line-height: 1.3; color: inherit; text-decoration: none;
}
.bsx-topic-row a:hover { color: var(--bsx-accent); }
.bsx-topic-note {
	display: block; margin-top: 3px;
	font-family: 'Libre Franklin', sans-serif; font-size: 10.5px; letter-spacing: 0.6px;
	text-transform: uppercase; color: var(--bsx-ink-soft);
}
.bsx-topic-row-stream .bsx-topic-note { color: #B3261E; font-weight: 700; }
.bsx-topic-row-event .bsx-topic-note { color: var(--turquoise, #1DADA0); font-weight: 700; }
/* ── the trailing media rail ───────────────────────────────────────────
   Tiles keep their true shape: 16:9 stays wide, a 9:16 short gets a tall
   narrow card instead of being centre-cropped to a sliver. Mixed shapes
   sit on a shared top edge, so the row still reads as one strip. */
.bsx-topic-media { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--bsx-rule); }
.bsx-topic-striplabel {
	font-family: 'Libre Franklin', sans-serif; font-size: 10.5px; font-weight: 700;
	letter-spacing: 2px; text-transform: uppercase;
	color: var(--bsx-ink-soft); margin-bottom: 10px;
}
.bsx-topic-strip {
	display: flex; flex-wrap: wrap; align-items: flex-start;
	gap: 16px 14px;
}
/* the /topic/ page keeps its own top rule since it has no media label */
.bsx-topic-page .bsx-topic-strip { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--bsx-rule); }
.bsx-topic-tile {
	margin: 0; display: block; text-decoration: none; color: inherit;
	flex: 0 0 auto; width: 218px; max-width: 100%;
}
.bsx-topic-tile .bsx-media { position: relative; background: #2A1608; }
.bsx-topic-tile-vert { width: 124px; }
.bsx-topic-tile-vert .bsx-media {
	border-radius: 4px;
	box-shadow: inset 0 0 0 1px rgba(28, 14, 6, 0.18);
}
.bsx-topic-tile-vert .bsx-topic-watch {
	top: auto; bottom: 8px; left: 8px; font-size: 9px; padding: 3px 7px;
}
.bsx-topic-tileblank {
	display: block; width: 100%; height: 100%;
	background: linear-gradient(160deg, #2A1608, #52301A 55%, #7A4A24);
}
.bsx-topic-tilecap {
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
	overflow: hidden; margin-top: 6px;
	font-family: 'Libre Franklin', sans-serif; font-size: 11.5px; line-height: 1.35;
	color: var(--bsx-ink-soft);
}
.bsx-topic-tile-vert .bsx-topic-tilecap { -webkit-line-clamp: 2; font-size: 11px; }
a.bsx-topic-tile:hover .bsx-topic-tilecap { color: var(--bsx-accent); }

/* ── the foot rule that closes the package ─────────────────────────── */
.bsx-topic-foot {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 14px; flex-wrap: wrap;
	margin: 18px -20px 0; padding: 10px 20px 11px;
	border-top: 1px solid var(--bsx-ink);
	background: rgba(28, 14, 6, 0.035);
}
.bsx-topic-foot-link {
	font-family: 'Libre Franklin', sans-serif; font-size: 11.5px; font-weight: 700;
	letter-spacing: 1.4px; text-transform: uppercase;
	color: var(--bsx-accent); text-decoration: none;
}
.bsx-topic-foot-link:hover { text-decoration: underline; }
.bsx-topic-foot-stamp {
	font-family: 'Libre Franklin', sans-serif; font-size: 10.5px; letter-spacing: 1.2px;
	text-transform: uppercase; color: var(--bsx-ink-soft);
}

/* narrower spans: lead stacks over the rail, tiles scroll rather than shrink */
.bsx-s3 .bsx-topic-body, .bsx-s4 .bsx-topic-body { grid-template-columns: 1fr; }
.bsx-s3 .bsx-topic-boxed .bsx-topic-lead, .bsx-s4 .bsx-topic-boxed .bsx-topic-lead,
.bsx-s3 .bsx-topic-boxed .bsx-topic-rail, .bsx-s4 .bsx-topic-boxed .bsx-topic-rail,
.bsx-s3 .bsx-topic-boxed .bsx-topic-media, .bsx-s4 .bsx-topic-boxed .bsx-topic-media {
	grid-column: auto; grid-row: auto;
}
.bsx-s3 .bsx-topic-head { padding-right: 0; }
.bsx-s3 .bsx-topic-more { position: static; display: inline-block; margin-top: 8px; }
.bsx-s3 .bsx-topic-boxed, .bsx-s4 .bsx-topic-boxed { padding: 15px 15px 0; }
.bsx-s3 .bsx-topic-foot, .bsx-s4 .bsx-topic-foot { margin-left: -15px; margin-right: -15px; padding-left: 15px; padding-right: 15px; }
.bsx-s3 .bsx-topic-strip, .bsx-s4 .bsx-topic-strip { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
@media (max-width: 760px) {
	.bsx-topic-body { grid-template-columns: 1fr !important; }
	.bsx-topic-boxed .bsx-topic-lead,
	.bsx-topic-boxed .bsx-topic-rail,
	.bsx-topic-boxed .bsx-topic-media { grid-column: auto !important; grid-row: auto !important; }
	.bsx-topic-strip { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
	.bsx-topic-tile { width: 190px; }
	.bsx-topic-tile-vert { width: 112px; }
	.bsx-topic-head { padding-right: 0; }
	.bsx-topic-more { position: static; display: inline-block; margin-top: 8px; }
	.bsx-topic-boxed { padding: 15px 14px 0; }
	.bsx-topic-foot { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
}

/* the /topic/<slug>/ full-coverage page reuses the block styles */
.bsx-topic-page { padding: 26px 0 40px; }
.bsx-topic-page .bsx-topic-head { margin-bottom: 20px; }
.bsx-topic-page .bsx-topic-hed { font-size: clamp(30px, 4vw, 44px); }
.bsx-topic-page .bsx-topic-updated {
	font-family: 'Libre Franklin', sans-serif; font-size: 11px; letter-spacing: 1.2px;
	text-transform: uppercase; color: var(--bsx-ink-soft); margin-top: 8px;
}