/* ────────────────────────────────────────────────────────────────────
   Front page — the recipe layer (docs/recipe-specs.md).

   Four recipes (.fp-splash, .fp-standard, .fp-rail, .fp-bundle) on the
   desert-v4 tokens. Every size, face and ratio here is a decision made in
   the spec; nothing is tuned per block. The only accent on the page is
   section identity, carried by the flag rule (--fp-tone).
   ──────────────────────────────────────────────────────────────────── */

.fp {
	--fp-tone: var(--color-section-news, #C4622D);
	--fp-tone-ink: var(--color-section-news-ink, #B55825);
	--fp-ink: var(--color-text, #1c1712);
	--fp-ink-2: var(--color-text-secondary, #5b5148);
	--fp-ink-3: var(--color-text-tertiary, #8a7a68);
	--fp-rule: var(--rule, rgba(82, 50, 32, .18));
	--fp-rule-soft: var(--soft-line, rgba(28, 23, 18, .09));
	--fp-surface: var(--color-surface, #fff9ea);
	--fp-display: var(--font-display, 'Noto Serif', Georgia, serif);
	--fp-body: var(--font-body, 'Libre Baskerville', Georgia, serif);
	--fp-ui: var(--font-ui, 'Libre Franklin', system-ui, sans-serif);
	--fp-accent: var(--font-accent, 'Libre Franklin', sans-serif);
	--fp-gap: 8px;
	color: var(--fp-ink);
	min-width: 0;
}
/* One band per section — the masthead ribbon's, via the shared tokens.
   --fp-tone paints rules, flags and washes; --fp-ink is the same section
   darkened for anything that is read as text on paper. */
.fp-tone-news      { --fp-tone: var(--color-section-news, #C4622D);      --fp-tone-ink: var(--color-section-news-ink, #B55825); }
.fp-tone-sports    { --fp-tone: var(--color-section-sports, #E8A820);    --fp-tone-ink: var(--color-section-sports-ink, #966A0C); }
.fp-tone-arts      { --fp-tone: var(--color-section-arts, #C9A87A);      --fp-tone-ink: var(--color-section-arts-ink, #916C38); }
.fp-tone-community { --fp-tone: var(--color-section-community, #8A9BC8); --fp-tone-ink: var(--color-section-community-ink, #5770B3); }
.fp-tone-media     { --fp-tone: var(--color-section-media, #1DADA0);     --fp-tone-ink: var(--color-section-media-ink, #128076); }
.fp-tone-civic     { --fp-tone: var(--color-section-civic, #9A4520);     --fp-tone-ink: var(--color-section-civic-ink, #9A4520); }
.fp-tone-utility   { --fp-tone: var(--color-section-utility, #F5C030);   --fp-tone-ink: var(--color-section-utility-ink, #936C04); }

.fp a { color: inherit; text-decoration: none; }
[class*="fp-tone-"] { --tone: var(--fp-tone); --tone-ink: var(--fp-tone-ink, var(--fp-tone)); }
.fp a:hover, .fp a:focus-visible { color: var(--fp-tone-ink, var(--fp-tone)); }
.fp a:focus-visible { outline: 2px solid var(--color-focus, #0e5e59); outline-offset: 3px; }
.fp img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.fp ul { list-style: none; margin: 0; padding: 0; }
.fp h2, .fp h3, .fp h4, .fp p { margin: 0; }

/* Canvas rhythm: 28px between modules (was 40 — tightened Sept 10, 2026
   for the real archive, which fills every slot). No drawn divider: each
   module sits on a faint wash of its own section tone that fades out over
   its first 160px — the page reads as bands of colour, News terracotta,
   Sports ochre, Politics juniper, the way the Painted Desert's badlands
   read as bands. The flag's rule (below) carries the strata. */
.fp-canvas { column-gap: 32px; row-gap: 28px; }
.fp-b .fp { background: linear-gradient(to bottom, color-mix(in srgb, var(--fp-tone) 7%, transparent), transparent 160px); }
.fp-b:not(:first-child) .fp { padding-top: 4px; }
.fp-b .fp-bundle { background: var(--fp-surface); }

/* ── the flag: the signature ──────────────────────────────────────── */
.fp-flag {
	display: flex; align-items: baseline; gap: 14px;
	padding-bottom: 10px; margin-bottom: 14px;
	background: linear-gradient(to bottom, var(--fp-tone) 0 3px, transparent 3px 4px, color-mix(in srgb, var(--fp-tone) 55%, transparent) 4px 5.5px, transparent 5.5px 6.5px, color-mix(in srgb, var(--fp-tone) 28%, transparent) 6.5px 7.5px) no-repeat bottom / 100% 8px;
	font-family: var(--fp-accent); font-weight: 700;
	font-size: 21px; line-height: 1; letter-spacing: 2px; text-transform: uppercase;
	color: var(--fp-ink);
}
.fp-flag-more {
	margin-left: auto;
	font-family: var(--fp-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
	color: var(--fp-ink-3); white-space: nowrap;
}
.fp-flag-more:hover { color: var(--fp-tone-ink, var(--fp-tone)); }

/* ── shared text slots ────────────────────────────────────────────── */
.fp-kicker {
	font-family: var(--fp-accent); font-weight: var(--flag-weight, 600); font-size: 11.5px; line-height: 1; letter-spacing: 1.8px; text-transform: uppercase;
	color: var(--fp-tone-ink, var(--fp-tone)); margin-bottom: 8px;
}
.fp-deck {
	font-family: var(--fp-body); font-size: 15px; line-height: 1.45; color: var(--fp-ink-2);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	margin-top: 8px;
}
.fp-deck--lg { font-size: 19px; line-height: 1.45; -webkit-line-clamp: 3; max-width: 62ch; margin-top: 14px; }
.fp-deck--standfirst { font-size: 17px; -webkit-line-clamp: 3; max-width: 70ch; }
.fp-byline {
	font-family: var(--fp-ui); font-size: 11px; line-height: 1.3; letter-spacing: .4px;
	color: var(--fp-ink-3); margin-top: 8px;
}
.fp-byline .fp-sep { color: var(--fp-tone); }
.fp-caption { font-family: var(--fp-ui); font-size: 11px; color: var(--fp-ink-3); text-align: right; margin-top: 6px; }
.fp-lead-hed {
	font-family: var(--fp-display); font-weight: 700; font-size: 26px; line-height: 1.1; letter-spacing: -0.01em;
	text-wrap: balance;
}
.fp-standard--text .fp-lead-hed { font-size: 28px; }

/* ruled rows — Standard secondaries, Splash teasers, Briefs, Bundle coverage.
   A row is text with, when the story has one, an 88px thumbnail on the
   right (3:2), or a 52px mug (4:5) for a portrait picture — the obituary
   column's traditional treatment. */
.fp-rows { margin-top: 14px; }
.fp-row { border-top: 1px solid var(--fp-rule); padding: 10px 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 14px; align-items: start; }
.fp-row:last-child { padding-bottom: 0; }
/* A row with a picture: the text block centres on the picture, so a
   one-line headline sits level with its thumbnail instead of floating at
   the top of an empty box. */
.fp-row--thumb { grid-template-columns: minmax(0, 1fr) 104px; align-items: center; padding: 9px 0; }
.fp-row--mug { grid-template-columns: minmax(0, 1fr) 56px; }
.fp-row-text { min-width: 0; }
.fp-row-thumb { display: block; grid-column: 2; grid-row: 1; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2, #f5e4c4); }
.fp-row-thumb--mug { aspect-ratio: 4 / 5; }
.fp-row-thumb--mug img { object-position: center top; }
.fp-row-hed { font-family: var(--fp-display); font-weight: 700; font-size: 18px; line-height: 1.2; letter-spacing: -0.003em; }
.fp-row .fp-byline { margin-top: 5px; font-size: 11.5px; }
.fp-row-kicker { display: block; font-size: 10.5px; letter-spacing: 1.6px; margin-bottom: 5px; }

/* art frames — the shape is the spec's, not the image's */
.fp-art { display: block; position: relative; overflow: hidden; background: var(--paper-2, #f5e4c4); }
.fp-art--wide     { aspect-ratio: 2 / 1; max-height: 62vh; }
.fp-art--photo    { aspect-ratio: 3 / 2; }
.fp-art--video    { aspect-ratio: 16 / 9; }
.fp-art--portrait { aspect-ratio: 4 / 5; }
.fp-art--portrait img { object-position: center top; }
.fp-chip {
	position: absolute; left: 10px; bottom: 10px;
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--fp-accent); font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase;
	color: var(--sandstone-light, #fff4dc); background: rgba(23, 17, 13, .78); padding: 5px 9px 4px;
}
.fp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fp-tone); }

/* the pulse: the only motion on the page besides the reels */
.fp-pulse {
	display: inline-flex; align-items: center; gap: 6px; margin-right: 12px;
	font-family: var(--fp-accent); font-size: 13px; letter-spacing: 2px; color: var(--color-feedback-live, #b9281e);
}
.fp-pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-feedback-live, #b9281e); animation: fp-pulse 1.6s var(--ease-standard, ease) infinite; }
@keyframes fp-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .fp-pulse-dot { animation: none; } }

/* ── Splash ───────────────────────────────────────────────────────── */
.fp-splash-lead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 40px; }
.fp-splash-text { max-width: 20ch; }
.fp-splash-hed {
	font-family: var(--fp-display); font-weight: 700;
	font-size: clamp(40px, 5.2vw, 64px); line-height: 1.02; letter-spacing: -0.015em;
	text-wrap: balance;
}
/* Poster: the headline is the picture. A well (8 of 12 columns) for the
   headline block, and the teasers stacked as a ruled rail beside it so the
   page's width is structure, not emptiness. */
/* Poster: the Featured Stories flag and its rule stay over the lead column only; the rail
   (sponsor, then teasers) starts level with the flag and is set off by a soft vertical bar
   (Shawn, Oct 23 2026: the rule used to run across the ad). */
.fp-splash--poster { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-rows: max-content 1fr; grid-template-areas: "flag rail" "lead rail"; column-gap: 36px; }
.fp-splash--poster .fp-flag { grid-area: flag; align-self: start; }
.fp-splash--poster .fp-splash-lead { grid-area: lead; }
.fp-splash--poster .fp-splash-text { max-width: none; padding: 10px 0 8px; }
.fp-splash--poster .fp-splash-hed { font-size: clamp(44px, 5.6vw, 72px); max-width: 16ch; }
.fp-splash--poster .fp-teasers {
	grid-area: rail; display: block; margin-top: 0; border-top: 0; padding-top: 0;
	border-left: 4px solid color-mix(in srgb, var(--sandstone, #e9cf9f) 70%, transparent); padding-left: 26px;
}
.fp-splash--poster .fp-teasers .fp-row { border-top: 1px solid var(--fp-rule); padding: 12px 0; }
.fp-splash--poster .fp-teasers .fp-row:first-child { border-top: 0; padding-top: 4px; }
.fp-splash--poster .fp-teasers .fp-row + .fp-row::before { display: none; }
/* Wide: one composition. The photo takes 7 of 12 columns with the
   headline block beside it, the cutline under the photo, and the teasers
   as a three-across ruled strip beneath both — each teaser with its own
   thumbnail, so the top of the page is four pictures, not one. (Sept 10,
   2026: the side-rail arrangement left a blank under the photo whenever
   the rail ran longer; the strip fills the measure every week.) */
.fp-splash--wide {
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto auto auto;
	grid-template-areas: "flag flag" "art text" "cap ." "teasers teasers";
	column-gap: 32px; row-gap: 0;
}
/* The headline block lives in the art row only. Spanning it across the
   caption row too made the grid hand the caption row a share of the
   text's height — a 200px blank under the photo (found Sept 10, 2026). */
.fp-splash--wide .fp-flag { grid-area: flag; }
.fp-splash--wide .fp-splash-lead { display: contents; }
.fp-splash--wide .fp-art--wide { grid-area: art; align-self: start; max-height: none; aspect-ratio: 3 / 2; }
.fp-splash--wide .fp-caption { grid-area: cap; }
.fp-splash--wide .fp-splash-text { grid-area: text; max-width: none; padding-top: 2px; }
.fp-splash--wide .fp-splash-hed { font-size: clamp(30px, 3.4vw, 46px); max-width: none; }
.fp-splash--wide .fp-deck--lg { font-size: 16px; line-height: 1.5; -webkit-line-clamp: 6; margin-top: 12px; max-width: none; }
.fp-splash--wide .fp-teasers {
	grid-area: teasers; align-self: start; margin-top: 18px;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px;
	border-top: 1px solid var(--fp-ink); padding-top: 12px;
}
.fp-splash--wide .fp-teasers .fp-row { border-top: 0; padding: 0 0 2px; }
.fp-splash--wide .fp-teasers .fp-row-hed { font-size: 17px; }
.fp-splash--portrait .fp-splash-lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.fp-splash--portrait .fp-art--portrait { grid-column: 2; grid-row: 1; }
.fp-splash--portrait .fp-splash-text { grid-column: 1; grid-row: 1; max-width: none; align-self: center; }
.fp-splash--portrait .fp-splash-hed { font-size: clamp(34px, 4vw, 52px); }
.fp-splash .fp-byline { margin-top: 14px; font-size: 12px; }

.fp-teasers {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px;
	margin-top: 24px; border-top: 1px solid var(--fp-ink); padding-top: 12px;
}
.fp-teasers--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fp-teasers--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* The Featured Sponsor: a vertical rectangle (3:5) beside the lead in the
   wide state — its own grid column, stretched to the lead's photo + cutline
   height, the creative contained inside. In the other states it sits in
   the teaser row as a cell. */
.fp-splash--wide {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) minmax(0, 3fr);
	grid-template-rows: max-content auto auto auto;
	/* The flag and its rule cover the story columns only; the sponsor starts level with the
	   flag behind a soft bar (Shawn, Oct 23 2026: the rule used to run across the ad). */
	grid-template-areas: "flag flag ad" "art text ad" "cap . ad" "teasers teasers teasers";
}
.fp-splash--wide .fp-splash-sponsor { grid-area: ad; align-self: stretch; min-height: 0; border-left: 4px solid color-mix(in srgb, var(--sandstone, #e9cf9f) 70%, transparent); padding-left: 22px; margin-left: -8px; }
.fp-splash--wide .fp-flag { align-self: start; }
.fp-splash-sponsor .pdt-sponsor { position: relative; height: 100%; display: flex; flex-direction: column; margin: 0; padding: 10px 10px 8px; background: var(--fp-surface); border: 1px solid var(--fp-rule); }
.fp-splash-sponsor .pdt-sponsor-tag { flex: none; margin-bottom: 8px; }
.fp-splash-sponsor .pdt-sponsor-meta { flex: none; margin-top: 8px; }
.fp-splash-sponsor .pdt-sponsor-body { flex: 1 1 auto; min-height: 0; width: 100%; aspect-ratio: auto; transition: opacity .26s ease; }
.fp-splash-sponsor .pdt-sponsor-body > a { height: 100%; width: 100%; }
.fp-splash-sponsor .pdt-sponsor-body img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.fp-splash-sponsor .pdt-sponsor-house .pdt-sponsor-body > .pdt-house { height: 100%; width: 100%; }
.fp-teaser--sponsor { display: block; position: relative; list-style: none; }
.fp-teaser--sponsor .fp-splash-sponsor .pdt-sponsor-body { aspect-ratio: 3 / 5; height: auto; max-height: 400px; width: auto; margin: 0 auto; }
.fp-splash--poster .fp-teaser--sponsor { padding: 0 0 12px; }
@media (prefers-reduced-motion: reduce) { .fp-splash-sponsor .pdt-sponsor-body { transition: none; } }
.fp-teasers .fp-row { border-top: 0; padding: 0 0 2px; position: relative; }
.fp-teasers .fp-row + .fp-row::before { content: ""; position: absolute; left: -16px; top: 2px; bottom: 6px; border-left: 1px solid var(--fp-rule); }
.fp-teasers .fp-row-hed { font-size: 18px; }
.fp-splash--wide .fp-teasers .fp-row + .fp-row::before { display: block; }

/* ── Standard ─────────────────────────────────────────────────────── */
.fp-standard .fp-lead { display: grid; gap: 14px; }
.fp-standard--portrait .fp-lead { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; }
.fp-standard--portrait .fp-art--portrait { grid-column: 2; grid-row: 1; }
.fp-standard--portrait .fp-lead-text { grid-column: 1; grid-row: 1; }
/* full-width Standard: secondaries fan into two columns */
.fp-s6 .fp-standard .fp-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.fp-s6 .fp-standard .fp-row:nth-child(2) { border-top: 1px solid var(--fp-rule); }
.fp-s6 .fp-standard .fp-lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
/* full-width Standard with a photo: the photo takes the left column and the
   lead text plus the secondaries stack in the right, so the module is as
   tall as its photo and no taller */
.fp-s6 .fp-standard--art {
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr;
	grid-template-areas: "flag flag" "art text" "art rows"; column-gap: 32px;
}
.fp-s6 .fp-standard--art .fp-flag { grid-area: flag; }
.fp-s6 .fp-standard--art .fp-lead { display: contents; }
.fp-s6 .fp-standard--art .fp-art { grid-area: art; align-self: start; }
.fp-s6 .fp-standard--art .fp-lead-text { grid-area: text; }
.fp-s6 .fp-standard--art .fp-rows { grid-area: rows; display: block; align-self: start; margin-top: 16px; }
.fp-s6 .fp-standard--art .fp-row:nth-child(2) { border-top: 1px solid var(--fp-rule); }
.fp-s6 .fp-standard--art .fp-lead-hed { font-size: 30px; }
.fp-s6 .fp-standard--text .fp-lead { grid-template-columns: minmax(0, 1fr); }
/* text-only lead at full width: the headline on the left, the dek and byline
   beside it, so the lead uses the module's width instead of a corner of it */
.fp-s6 .fp-standard--text .fp-lead-text {
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 32px; align-items: start;
	grid-template-areas: "kicker ." "hed deck" "hed byline";
}
.fp-s6 .fp-standard--text .fp-kicker { grid-area: kicker; }
.fp-s6 .fp-standard--text .fp-lead-hed { grid-area: hed; font-size: 36px; max-width: none; }
.fp-s6 .fp-standard--text .fp-deck { grid-area: deck; margin-top: 4px; font-size: 16px; line-height: 1.5; -webkit-line-clamp: 4; }
.fp-s6 .fp-standard--text .fp-byline { grid-area: byline; align-self: start; }

/* ── Rail ─────────────────────────────────────────────────────────── */
.fp-rail-banner { margin: -6px 0 18px; }
.fp-rail-hed { font-family: var(--fp-display); font-weight: 700; font-size: 22px; line-height: 1.15; }
/* A rail with a few tiles spreads them across the module (each tile grows
   to its cap, the space between them grows evenly); a rail with many tiles
   fills the row at base size and clips the rest, as before. */
.fp-tiles { display: flex; gap: 16px; align-items: stretch; justify-content: space-between; overflow: hidden; }
.fp-bundle .fp-tiles { justify-content: flex-start; } /* two tiles sit together, not at opposite edges */
.fp-tile { flex: 1 0 auto; position: relative; background: var(--night, #17110d); }
.fp-tile--reel   { width: 150px; max-width: 236px; aspect-ratio: 9 / 16; }
.fp-tile--video  { width: 268px; max-width: 360px; aspect-ratio: 16 / 9; }
.fp-tile--square { width: 150px; max-width: 236px; aspect-ratio: 1 / 1; }
.fp-tile--photo  { width: 200px; max-width: 300px; aspect-ratio: 4 / 3; }
.fp-tile--text   { width: 200px; max-width: 300px; background: var(--fp-surface); border: 1px solid var(--fp-rule); }
.fp-tile-link { display: block; position: absolute; inset: 0; }
.fp-tile--text .fp-tile-link { position: static; padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 8px; height: 100%; box-sizing: border-box; }
.fp-tile-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(23, 17, 13, .92) 0%, rgba(23, 17, 13, .35) 45%, transparent 72%); }
.fp-tile-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.fp-tile-text .fp-chip { position: static; padding: 0; background: none; color: var(--ochre-light, #efbd48); }
.fp-tile-hed { font-family: var(--fp-display); font-weight: 700; font-size: 14px; line-height: 1.25; color: var(--sandstone-light, #fff4dc); }
.fp-tile--text .fp-tile-hed { color: var(--fp-ink); font-size: 15px; }
.fp-tile--text .fp-kicker { margin-bottom: 0; font-size: 11px; }
.fp-tile--text .fp-byline { margin-top: auto; }
.fp-tile-link:hover .fp-tile-hed { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fp-datechip {
	display: inline-flex; flex-direction: column; align-items: center; align-self: flex-start;
	background: var(--fp-tone); color: var(--sandstone-light, #fff4dc); padding: 5px 9px 4px; line-height: 1;
	font-family: var(--fp-accent);
}
.fp-datechip b { font-size: 20px; font-weight: 400; }
.fp-datechip i { font-style: normal; font-size: 10px; letter-spacing: 1.6px; }

/* ── Bundle ───────────────────────────────────────────────────────── */
.fp-bundle {
	background: var(--fp-surface); border: 1px solid var(--fp-rule); border-top: 3px solid var(--fp-tone);
	padding: 22px 26px 18px; box-sizing: border-box;
}
.fp-bundle-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kicker more" "hed more" "dek more"; align-items: start; column-gap: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--fp-rule); margin-bottom: 20px; }
.fp-kicker--bundle { grid-area: kicker; display: flex; align-items: center; }
.fp-bundle-hed { grid-area: hed; font-family: var(--fp-display); font-weight: 700; font-size: 34px; line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; max-width: 26ch; }
.fp-bundle-head .fp-deck { grid-area: dek; }
.fp-bundle-more { grid-area: more; align-self: end; margin-left: 0; }
.fp-bundle-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start; }
.fp-bundle--norows .fp-bundle-body { grid-template-columns: minmax(0, 1fr); }
.fp-bundle-lead { display: grid; gap: 14px; }
.fp-bundle--portrait .fp-bundle-lead { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 22px; align-items: start; }
.fp-bundle--portrait .fp-art--portrait { grid-row: 1; }
.fp-bundle--text .fp-lead-hed { font-size: 30px; }
.fp-bundle-rows { margin-top: 0; }
.fp-bundle-rows .fp-row:first-child { border-top: 0; padding-top: 0; }
.fp-bundle-media { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--fp-rule); }
.fp-strip-label { font-family: var(--fp-accent); font-size: 13px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--fp-ink-3); margin-bottom: 10px; }
.fp-bundle-foot {
	display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--fp-rule);
	font-family: var(--fp-ui); font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--fp-ink-3);
}
.fp-bundle-foot a { font-weight: 700; color: var(--fp-ink-2); }

/* ── mobile ───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
	.fp-splash--wide { display: block; }
	.fp-splash--wide .fp-flag, .fp-splash--wide .fp-art--wide, .fp-splash--wide .fp-caption, .fp-splash--wide .fp-splash-text, .fp-splash--wide .fp-teasers { grid-area: auto; }
	.fp-s6 .fp-standard--art .fp-flag, .fp-s6 .fp-standard--art .fp-art, .fp-s6 .fp-standard--art .fp-lead-text, .fp-s6 .fp-standard--art .fp-rows { grid-area: auto; }
	.fp-splash--wide .fp-splash-lead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.fp-splash--wide .fp-teasers { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 20px; border-top: 1px solid var(--fp-ink); padding-top: 0; }
	.fp-splash--wide .fp-teasers .fp-row { border-top: 1px solid var(--fp-rule); padding: 12px 0; }
	.fp-splash--wide .fp-teasers .fp-row:first-child { border-top: 0; }
	.fp-splash--wide .fp-teasers .fp-row + .fp-row::before { display: none; }
	.fp-s6 .fp-standard--art { display: block; }
	.fp-s6 .fp-standard--art .fp-lead { display: grid; }
	.fp-s6 .fp-standard--text .fp-lead-text { display: block; }
	.fp-tiles { justify-content: flex-start; }
	.fp-tile { flex: 0 0 auto; }

	.fp-canvas { row-gap: 32px; }
	.fp-flag { font-size: 20px; margin-bottom: 12px; }
	.fp-kicker { font-size: 11px; }
	.fp-deck--lg { font-size: 17px; -webkit-line-clamp: 2; }
	.fp-splash-hed, .fp-splash--portrait .fp-splash-hed { font-size: 32px; line-height: 1.05; max-width: none; }
	.fp-splash--portrait .fp-splash-lead { grid-template-columns: minmax(0, 1fr); }
	.fp-splash--portrait .fp-art--portrait { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; }
	.fp-splash--portrait .fp-splash-text { grid-column: 1; grid-row: 2; }
	.fp-teasers, .fp-teasers--2 { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 0; padding-top: 0; margin-top: 18px; }
	.fp-teasers .fp-row { border-top: 1px solid var(--fp-rule); padding: 12px 0; }
	.fp-teasers .fp-row + .fp-row::before { display: none; }
	.fp-teasers .fp-row-hed { font-size: 17px; }
	.fp-lead-hed, .fp-standard--text .fp-lead-hed, .fp-s6 .fp-standard--text .fp-lead-hed { font-size: 24px; }
	.fp-standard--portrait .fp-lead, .fp-s6 .fp-standard .fp-lead, .fp-s6 .fp-standard--text .fp-lead { grid-template-columns: minmax(0, 1fr); }
	.fp-standard--portrait .fp-art--portrait { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; }
	.fp-standard--portrait .fp-lead-text { grid-column: 1; grid-row: 2; }
	.fp-s6 .fp-standard .fp-rows { grid-template-columns: minmax(0, 1fr); }
	.fp-row { min-height: 44px; }
	.fp-tiles { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; padding-right: 24px; -webkit-overflow-scrolling: touch; }
	.fp-tile { scroll-snap-align: start; }
	.fp-tile--reel { width: 132px; } .fp-tile--video { width: 236px; }
	.fp-bundle { padding: 18px 16px 14px; }
	.fp-bundle-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kicker" "hed" "dek" "more"; }
	.fp-bundle-more { margin-top: 10px; }
	.fp-bundle-hed { font-size: 26px; }
	.fp-bundle-body, .fp-bundle--portrait .fp-bundle-lead { grid-template-columns: minmax(0, 1fr); }
	.fp-bundle--portrait .fp-art--portrait { aspect-ratio: 4 / 3; }
	.fp-bundle--text .fp-lead-hed { font-size: 24px; }
	.fp-bundle-rows { margin-top: 18px; }
	.fp-bundle-foot { flex-direction: column; gap: 6px; }
}

/* Poster with no teasers: the well takes the whole measure. */
.fp-splash--poster.fp-splash--noteasers { grid-template-columns: minmax(0, 1fr); grid-template-areas: "flag" "lead"; }
.fp-splash--poster.fp-splash--noteasers .fp-splash-hed { max-width: 24ch; }
.fp-splash--poster.fp-splash--noteasers .fp-deck--lg { max-width: 70ch; }

/* Half-width Standard with art: the photo sits beside the headline at 40%
   so an art module and a text module in the same row stay the same depth.
   Only a full-width Standard earns the big 3:2 photograph. */
.fp-s3 .fp-standard--art .fp-lead { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 18px; align-items: start; }
.fp-s3 .fp-standard--art .fp-art--photo { grid-column: 1; grid-row: 1; }
.fp-s3 .fp-standard--art .fp-lead-text { grid-column: 2; grid-row: 1; }
.fp-s3 .fp-standard--art .fp-lead-hed, .fp-s3 .fp-standard--portrait .fp-lead-hed { font-size: 24px; }
/* A portrait lead in a half module is a mug beside the headline, not a
   poster: cap it at 170px so the obituary column's lead does not tower
   over its own text. */
.fp-s3 .fp-standard--portrait .fp-lead { grid-template-columns: minmax(0, 1fr) 170px; }
.fp-s3 .fp-standard--portrait .fp-art--portrait { width: 170px; }
@media (max-width: 760px) {
	/* On a phone the mug stays a mug beside the headline (the generic
	   portrait rule above would turn it into a 4:3 banner). */
	.fp-s3 .fp-standard--portrait .fp-lead { grid-template-columns: minmax(0, 1fr) 112px; gap: 14px; }
	.fp-s3 .fp-standard--portrait .fp-art--portrait { width: 112px; aspect-ratio: 4 / 5; grid-column: 2; grid-row: 1; }
	.fp-s3 .fp-standard--portrait .fp-lead-text { grid-column: 1; grid-row: 1; }
}
.fp-s6 .fp-standard--art .fp-lead-hed, .fp-s6 .fp-standard--portrait .fp-lead-hed { font-size: 32px; }
.fp-s6 .fp-standard .fp-deck { max-width: 70ch; }
.fp-s6 .fp-standard--portrait .fp-lead { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 760px) {
	.fp-s3 .fp-standard--art .fp-lead { grid-template-columns: minmax(0, 1fr); }
	.fp-s3 .fp-standard--art .fp-art--photo, .fp-s3 .fp-standard--art .fp-lead-text { grid-column: 1; }
	.fp-s3 .fp-standard--art .fp-lead-text { grid-row: 2; }
}

/* Tiles keep their shape but may grow to 1.5x so a thin rail still reads as a band. */
.fp-tile { flex: 1 1 auto; }
.fp-tile--reel   { flex-basis: 150px; max-width: 225px; }
.fp-tile--video  { flex-basis: 268px; max-width: 400px; }
.fp-tile--square { flex-basis: 150px; max-width: 225px; }
.fp-tile--photo  { flex-basis: 200px; max-width: 300px; }
.fp-tile--text   { flex-basis: 200px; max-width: 300px; }
.fp-rail-banner { margin: 2px 0 18px; }
@media (max-width: 760px) { .fp-tile { flex: 0 0 auto; } }

/* Growth caps: a reel never exceeds 320px tall; the Bundle strip keeps base sizes. */
.fp-tile--reel   { max-width: 180px; }
.fp-tile--video  { max-width: 340px; }
.fp-tile--square { max-width: 180px; }
.fp-tile--photo  { max-width: 260px; }
.fp-tile--text   { max-width: 260px; }
.fp-bundle .fp-tile { flex-grow: 0; }

@media (max-width: 760px) {
	.fp-splash--poster, .fp-splash--poster.fp-splash--noteasers { grid-template-columns: minmax(0, 1fr); grid-template-areas: "flag" "lead" "rail"; }
	.fp-splash--poster .fp-splash-hed { font-size: 32px; max-width: none; }
	.fp-splash--poster .fp-splash-text { padding: 0; }
	.fp-splash--poster .fp-teasers { border-left: 0; padding-left: 0; margin-top: 18px; }
	.fp-splash--poster .fp-teasers .fp-row:first-child { border-top: 1px solid var(--fp-rule); padding-top: 12px; }
}

/* ── page frame: the canvas, the dateline, the preview bar ─────────── */
.fp-page { position: relative; padding: 18px 0 8px; color: var(--color-text, #1c1712); }
.fp-page img { max-width: 100%; height: auto; }
.fp-topline {
	display: flex; align-items: baseline; gap: 18px;
	border-top: 1px solid var(--color-text, #1c1712); border-bottom: 1px solid var(--rule, rgba(82, 50, 32, .18));
	padding: 8px 2px; margin-bottom: 26px;
	font-family: var(--font-ui, 'Libre Franklin', sans-serif); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
	color: var(--color-text-tertiary, #8a7a68);
}
.fp-topline-mid { color: var(--color-section-news-ink, #B55825); font-weight: 700; text-decoration: none; }
a.fp-topline-mid:hover { text-decoration: underline; text-underline-offset: 3px; }
.fp-topline-right { margin-left: auto; color: inherit; text-decoration: none; }
.fp-topline-right:hover { color: var(--color-section-news-ink, #B55825); }
.fp-topline:has(+ .fp-edition), .fp-topline:has(+ .fp-newsletter) { margin-bottom: 0; border-bottom: 0; }

/* ── the newsletter bar under the dateline ────────────────────────── */
.fp-newsletter { margin-bottom: 26px; }
.fp-page .pdt-newsletter--frontpage {
	margin: 0; padding: 10px 2px; background: none;
	border-top: 1px solid var(--fp-rule); border-bottom: 1px solid var(--rule, rgba(82, 50, 32, .18));
}
.fp-page .pdt-newsletter--frontpage .pdt-newsletter__inner { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); column-gap: 32px; align-items: center; }
.fp-page .pdt-newsletter--frontpage .pdt-newsletter__copy { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: baseline; }
.fp-page .pdt-newsletter--frontpage .pdt-newsletter__kicker { margin: 0; font-size: 11px; letter-spacing: 1.8px; color: var(--color-section-news-ink, #B55825); }
.fp-page .pdt-newsletter--frontpage .pdt-newsletter__heading { margin: 0; font-size: 18px; line-height: 1.15; }
.fp-page .pdt-newsletter--frontpage .pdt-newsletter__blurb { grid-column: 2; margin: 2px 0 0; font-family: var(--fp-ui); font-size: 11.5px; color: var(--fp-ink-3); }
.fp-page .pdt-newsletter--frontpage .tnp-subscription-minimal form { display: flex; gap: 0; margin: 0; }
.fp-page .pdt-newsletter--frontpage input[type=email] { flex: 1 1 auto; min-width: 0; padding: .55rem .8rem; border-radius: 0; border-right: 0; font-size: 14px; }
.fp-page .pdt-newsletter--frontpage input[type=submit], .fp-page .pdt-newsletter--frontpage .tnp-submit { padding: .55rem 1.1rem; border-radius: 0; font-size: 11px; letter-spacing: .14em; }
@media (max-width: 760px) {
	.fp-page .pdt-newsletter--frontpage .pdt-newsletter__inner { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
	.fp-page .pdt-newsletter--frontpage .pdt-newsletter__copy { grid-template-columns: minmax(0, 1fr); }
	.fp-page .pdt-newsletter--frontpage .pdt-newsletter__blurb { grid-column: 1; }
	.fp-page .pdt-newsletter--frontpage .tnp-subscription-minimal form { flex-direction: row; }
	.fp-page .pdt-newsletter--frontpage input[type=submit], .fp-page .pdt-newsletter--frontpage .tnp-submit { width: auto; }
}

/* ── this week's paper: a strip under the dateline, or the foot band ── */
.fp-edition {
	border-top: 1px solid var(--fp-rule); border-bottom: 1px solid var(--rule, rgba(82, 50, 32, .18));
	padding: 10px 2px 10px; margin-bottom: 26px;
	background: linear-gradient(to right, color-mix(in srgb, var(--fp-tone) 9%, transparent), transparent 60%);
}
.fp-edition-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 18px; align-items: center; }
/* The foot band: full width above the site footer, on the dark ground the
   newsletter band used, the page-one render at postcard size. */
.fp-edition--foot {
	--fp-tone: var(--color-section-utility-on-dark, #F5C030); --fp-ink: var(--sandstone-light, #fff4dc); --fp-ink-2: var(--sandstone, #e9cf9f); --fp-ink-3: rgba(255, 244, 220, .62);
	--fp-rule: rgba(255, 244, 220, .18);
	margin: 0; padding: 26px 0; border: 0; color: var(--fp-ink);
	background: var(--color-surface-inverse, #1c0e06);
	border-top: 4px solid var(--ochre, #d59a28);
}
.fp-edition--foot .fp-edition-inner { column-gap: 28px; }
.fp-edition--foot .fp-edition-cover { width: 112px; border-color: rgba(255, 244, 220, .25); box-shadow: 4px 4px 0 rgba(213, 154, 40, .45); }
.fp-edition--foot .fp-edition-hed { font-size: 28px; color: var(--fp-ink); }
.fp-edition--foot .fp-edition-hed:hover { color: var(--fp-tone); }
.fp-edition--foot .fp-kicker { color: var(--fp-tone); }
.fp-edition--foot .fp-edition-meta { color: var(--fp-ink-3); font-size: 12.5px; white-space: normal; }
.fp-edition--foot .fp-edition-read { font-size: 13px; color: var(--fp-tone); }
.fp-edition--foot .fp-flag-more { color: var(--fp-ink-2); }
.fp-edition--foot .fp-flag-more:hover { color: var(--fp-tone-ink, var(--fp-tone)); }
@media (max-width: 760px) {
	.fp-edition--foot .fp-edition-inner { grid-template-columns: auto minmax(0, 1fr); row-gap: 10px; }
	.fp-edition--foot .fp-edition-cover { width: 80px; }
	.fp-edition--foot .fp-edition-hed { font-size: 22px; }
}
.fp-edition-cover { display: block; width: 58px; border: 1px solid var(--fp-rule); background: #fff; box-shadow: 2px 2px 0 color-mix(in srgb, var(--fp-tone) 35%, transparent); }
.fp-edition-cover img { width: 100%; height: auto; object-fit: contain; display: block; }
.fp-edition-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fp-edition .fp-kicker { margin-bottom: 1px; color: var(--fp-ink-3); }
.fp-edition-hed { font-family: var(--fp-display); font-weight: 700; font-size: 20px; line-height: 1.1; }
.fp-edition-meta { font-family: var(--fp-ui); font-size: 11.5px; color: var(--fp-ink-3); letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-edition-links { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; white-space: nowrap; }
.fp-edition-read { font-family: var(--fp-accent); font-weight: var(--flag-weight, 600); font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--fp-tone); }
.fp-edition-read:hover { text-decoration: underline; text-underline-offset: 3px; }
.fp-edition .fp-flag-more { margin-left: 0; }
@media (max-width: 760px) {
	.fp-edition-inner { grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; }
	.fp-edition-links { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: baseline; }
	.fp-edition-meta { white-space: normal; }
}

/* ── Splash teasers as the second tier of the pyramid ─────────────── */
.fp-splash--wide .fp-teasers { margin-top: 22px; padding-top: 16px; }
.fp-teaser { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 14px; align-items: start; }
.fp-teaser--thumb { grid-template-columns: minmax(0, 1fr) 104px; align-items: center; }
.fp-teaser--thumb .fp-row-thumb { grid-column: 2; grid-row: 1; }
.fp-teaser + .fp-teaser::before { content: ""; position: absolute; left: -16px; top: 0; bottom: 4px; border-left: 1px solid var(--fp-rule); }
.fp-teaser .fp-art--photo { margin-bottom: 12px; }
/* The teaser text block: headline, two-line summary, byline, on an even
   8/6px rhythm so the three columns read as one line of type. */
.fp-teaser-hed { font-family: var(--fp-display); font-weight: 700; font-size: 22px; line-height: 1.12; letter-spacing: -0.008em; text-wrap: balance; }
.fp-deck--sm { font-size: 14.5px; line-height: 1.5; -webkit-line-clamp: 2; margin-top: 8px; }
.fp-teaser .fp-byline { margin-top: 7px; }
@media (max-width: 760px) {
	.fp-teaser + .fp-teaser::before { display: none; }
	.fp-teaser { padding: 12px 0; border-top: 1px solid var(--fp-rule); }
	.fp-teaser:first-child { border-top: 0; padding-top: 0; }
	.fp-teaser-hed { font-size: 19px; }
}

/* ── shaded panels: the packages sit on a sunken sheet ────────────── */
/* The In Depth band, the Briefs band and a single-reel Rail sit on a
   panel of the sunken paper tone, bled 22px past the text so the flag
   and the rules run to the panel's edge. The rest of the page stays on
   the open canvas, so the panels read as packages, not wallpaper. */
.fp-b-topics .fp, .fp-b-briefs .fp, .fp-b-rail .fp-rail--solo {
	background: color-mix(in srgb, var(--color-surface-sunken, #f5e4c4) 62%, var(--fp-surface));
	padding: 18px 22px 20px; box-sizing: border-box;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fp-tone) 14%, transparent);
}
.fp-b-topics .fp .fp-flag, .fp-b-briefs .fp .fp-flag, .fp-b-rail .fp-rail--solo .fp-flag { margin-bottom: 16px; }
/* outranks `.fp-b:not(:first-child) .fp { padding-top: 4px }` above */
.fp-b:not(:first-child).fp-b-topics .fp, .fp-b:not(:first-child).fp-b-briefs .fp, .fp-b:not(:first-child).fp-b-rail .fp-rail--solo { padding-top: 18px; }
.fp-b:not(:first-child).fp-sw .fp-rail--solo { padding: 4px 10px 14px; }
.fp-b.fp-sw .fp-rail--solo .fp-flag { margin-bottom: 14px; }
@media (max-width: 760px) {
	.fp-b-topics .fp, .fp-b-briefs .fp, .fp-b-rail .fp-rail--solo { padding: 14px 14px 16px; }
}

/* ── Topics: the "In Depth" band ──────────────────────────────────── */
/* Columns stretch to the tallest so "Full coverage" sits on one baseline. */
.fp-topics-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; align-items: stretch; }
.fp-topics--2 .fp-topics-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fp-topic-col { position: relative; min-width: 0; display: flex; flex-direction: column; }
.fp-topic-col + .fp-topic-col::before { content: ""; position: absolute; left: -16px; top: 0; bottom: 0; border-left: 1px solid var(--fp-rule); }
.fp-topic-head { padding-bottom: 12px; border-bottom: 2px solid var(--fp-ink); margin-bottom: 12px; }
.fp-topic-kicker { display: flex; align-items: center; margin-bottom: 6px; }
.fp-topic-hed { font-family: var(--fp-display); font-weight: 700; font-size: 24px; line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; }
/* Kicker → headline and headline → standfirst read as the same gap (the
   headline's leading eats part of its margin, so the standfirst gets more). */
.fp-topic-dek { font-family: var(--fp-body); font-size: 13.5px; line-height: 1.45; color: var(--fp-ink-2); padding-top: 9px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* padding, not margin: `.fp p { margin: 0 }` outranks this rule */
.fp-topic-lead { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 12px; align-items: start; }
.fp-topic-lead--thumb { grid-template-columns: minmax(0, 1fr) 104px; align-items: center; }
.fp-topic-lead--thumb .fp-row-thumb { grid-column: 2; grid-row: 1; }
.fp-topic-lead .fp-art--photo { margin-bottom: 10px; }
.fp-topic-lead-hed { font-family: var(--fp-display); font-weight: 700; font-size: 20px; line-height: 1.15; text-wrap: balance; }
.fp-topic-rows { margin-top: 10px; }
.fp-topic-rows .fp-row-hed { font-size: 17px; }
.fp-topic-more { display: block; align-self: flex-start; margin-top: auto; padding-top: 14px; font-family: var(--fp-accent); font-weight: var(--flag-weight, 600); font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--fp-tone); }
.fp-topic-more:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
	.fp-topics-cols, .fp-topics--2 .fp-topics-cols { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
	.fp-topic-col + .fp-topic-col::before { display: none; }
	.fp-topic-col + .fp-topic-col { padding-top: 22px; border-top: 1px solid var(--fp-rule); }
}

/* ── The wedge: one vertical video in a narrow column between News and
   Community. The reel fills the column, the title and a line of summary
   sit under it, and the panel stretches to the row's height with the
   text vertically centred so the column reads as tall as its neighbours. */
/* The flag sits on the same line as NEWS and COMMUNITY beside it: same
   size, same 4px from the top of the row, the panel's padding only below. */
.fp-sw .fp-rail--solo { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; padding: 4px 10px 14px; }
.fp-sw .fp-flag { font-size: 21px; letter-spacing: 2px; margin-bottom: 14px; }
.fp-sw .fp-flag-more { display: none; }
.fp-wedge { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; row-gap: 12px; }
.fp-wedge .fp-tiles { overflow: visible; }
.fp-wedge .fp-tile--reel { width: 100%; flex: 0 0 auto; max-width: none; }
.fp-wedge .fp-tile--reel .fp-tile-hed { display: none; } /* the title runs below at reading size */
.fp-wedge-text { padding: 2px 0 6px; }
.fp-wedge-hed { font-family: var(--fp-display); font-weight: 700; font-size: 18px; line-height: 1.18; letter-spacing: -0.005em; text-wrap: balance; }
.fp-wedge .fp-kicker { margin-bottom: 6px; }
.fp-wedge .fp-deck { font-size: 13px; line-height: 1.45; -webkit-line-clamp: 3; margin-top: 6px; }
.fp-wedge .fp-byline { margin-top: 6px; }
/* A solo rail that is not between two halves (an editor put it elsewhere)
   still renders as a band: reel beside its text. */
.fp-s6 .fp-wedge { flex-direction: row; align-items: center; column-gap: 26px; }
.fp-s6 .fp-wedge .fp-tile--reel { width: 168px; flex: 0 0 168px; }
.fp-s6 .fp-wedge-hed { font-size: 30px; }
.fp-s6 .fp-wedge .fp-deck { font-size: 16px; }
@media (max-width: 760px) {
	.fp-sw .fp-rail--solo { height: auto; }
	.fp-wedge, .fp-s6 .fp-wedge { flex-direction: row; align-items: start; column-gap: 14px; }
	.fp-wedge .fp-tile--reel, .fp-s6 .fp-wedge .fp-tile--reel { width: 132px; flex: 0 0 132px; }
	.fp-wedge-hed, .fp-s6 .fp-wedge-hed { font-size: 20px; }
}

/* ── Briefs: three ruled columns of rows ──────────────────────────── */
.fp-briefs-rows { margin-top: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; grid-auto-flow: row; }
.fp-briefs-rows .fp-row { padding: 10px 0; position: relative; }
.fp-briefs-rows .fp-row:nth-child(-n+3) { border-top: 0; padding-top: 0; }
.fp-briefs-rows .fp-row:last-child { padding-bottom: 10px; }
.fp-briefs-rows .fp-row:nth-child(3n+2)::before, .fp-briefs-rows .fp-row:nth-child(3n+3)::before { content: ""; position: absolute; left: -16px; top: 6px; bottom: 6px; border-left: 1px solid var(--fp-rule-soft); }
.fp-briefs-rows .fp-row:nth-child(-n+3)::before { top: 0; }
.fp-briefs .fp-row-hed { font-size: 17px; }
@media (max-width: 760px) {
	.fp-briefs-rows { grid-template-columns: minmax(0, 1fr); }
	.fp-briefs-rows .fp-row { border-top: 1px solid var(--fp-rule); padding: 10px 0; }
	.fp-briefs-rows .fp-row::before { display: none; }
	.fp-briefs-rows .fp-row:first-child { border-top: 0; padding-top: 0; }
}

/* ── a half-width module promoted to full width keeps its composition ──
   Its lead art was judged for a half frame; the photo stays beside the
   headline at 40% and the rows fan into two columns, so a 300px picture
   is never stretched across seven columns. */
.fp-s6 .fp-standard--promoted.fp-standard--art { display: block; }
.fp-s6 .fp-standard--promoted.fp-standard--art .fp-lead { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 18px; align-items: start; }
.fp-s6 .fp-standard--promoted.fp-standard--art .fp-art--photo { grid-column: 1; grid-row: 1; }
.fp-s6 .fp-standard--promoted.fp-standard--art .fp-lead-text { grid-column: 2; grid-row: 1; }
.fp-s6 .fp-standard--promoted .fp-lead-hed { font-size: 28px; }
.fp-s6 .fp-standard--promoted .fp-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: 16px; }
.fp-s6 .fp-standard--promoted .fp-row:nth-child(2) { border-top: 1px solid var(--fp-rule); }
@media (max-width: 760px) {
	.fp-s6 .fp-standard--promoted.fp-standard--art .fp-lead, .fp-s6 .fp-standard--promoted .fp-rows { grid-template-columns: minmax(0, 1fr); }
	.fp-s6 .fp-standard--promoted.fp-standard--art .fp-art--photo, .fp-s6 .fp-standard--promoted.fp-standard--art .fp-lead-text { grid-column: 1; }
	.fp-s6 .fp-standard--promoted.fp-standard--art .fp-lead-text { grid-row: 2; }
}
.fp-preview-bar {
	background: var(--night, #17110d); color: var(--sandstone-light, #fff4dc);
	font-family: var(--font-ui, 'Libre Franklin', sans-serif); font-size: 13px;
	padding: 10px 16px; margin-bottom: 14px; border-left: 4px solid var(--ochre, #d59a28);
}
.fp-preview-bar strong { color: var(--ochre-light, #efbd48); text-transform: uppercase; letter-spacing: 1.4px; font-size: 11.5px; }
.fp-preview-bar a { color: var(--turquoise-light, #2ba8a0); }
/* Twelve tracks (Sept 10, 2026; was six) so a row can be 5 + 2 + 5: two
   half modules with the video wedge between them. Half = 6, full = 12,
   wedge = 2, and a half beside a wedge gives up one track. */
.fp-canvas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row; column-gap: 28px; row-gap: 28px; }
.fp-b { min-width: 0; }
.fp-s3 { grid-column: span 6; }
.fp-s6 { grid-column: span 12; }
.fp-sw { grid-column: span 2; }
.fp-s3:has(+ .fp-sw), .fp-sw + .fp-s3 { grid-column: span 5; }
@media (max-width: 760px) {
	.fp-topline { flex-wrap: wrap; gap: 8px 14px; }
	.fp-canvas { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
	.fp-s3, .fp-s6, .fp-sw, .fp-s3:has(+ .fp-sw), .fp-sw + .fp-s3 { grid-column: span 1; }
}

/* ── breaking banner (self-inserting; inc/breaking-news.php) ─────────── */
.fp-breaking {
	display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "label ago hed" "label ago body"; column-gap: 18px; row-gap: 4px; align-items: baseline;
	background: var(--night, #17110d); color: var(--sandstone-light, #fff4dc);
	border-left: 6px solid var(--color-feedback-live, #b9281e); padding: 14px 20px 14px 18px;
}
.fp-breaking-label { grid-area: label; display: inline-flex; align-items: center; gap: 8px; font-family: var(--fp-accent); font-size: 15px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--color-feedback-live, #b9281e); white-space: nowrap; }
.fp-breaking-ago { grid-area: ago; font-family: var(--fp-ui); font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--sandstone, #e9cf9f); white-space: nowrap; }
.fp-breaking-hed { grid-area: hed; font-family: var(--fp-display); font-weight: 700; font-size: 24px; line-height: 1.15; color: inherit; text-decoration: none; }
a.fp-breaking-hed:hover { color: var(--ochre-light, #efbd48); }
.fp-breaking-body { grid-area: body; font-family: var(--fp-body); font-size: 15px; color: var(--sandstone, #e9cf9f); }
@media (max-width: 760px) {
	.fp-breaking { grid-template-columns: 1fr; grid-template-areas: "label" "hed" "body" "ago"; padding: 12px 14px; }
	.fp-breaking-hed { font-size: 20px; }
}

/* ── Phones: the same paper, folded tighter (Sept 10, 2026) ─────────────
   The mobile web page keeps the newspaper's grammar — flags, rules, serif
   headlines, one big picture per package — while the app stays a card
   feed. Every secondary picture becomes a side thumbnail so the page is a
   dense scroll of headlines, not a stack of photographs: the Splash lead
   and the full-width Sports lead keep their pictures; teasers, section
   leads in half modules and topic leads run photo-beside-headline. */
@media (max-width: 760px) {
	.fp-canvas { row-gap: 22px; }
	.fp-page { padding-top: 8px; }
	.fp-newsletter { margin-bottom: 18px; }
	.fp-flag { font-size: 19px; padding-bottom: 8px; margin-bottom: 10px; }
	.fp-rows { margin-top: 8px; }
	.fp-row { padding: 9px 0; }
	.fp-row--thumb { grid-template-columns: minmax(0, 1fr) 96px; }
	.fp-row-hed { font-size: 17px; }

	/* Splash: the picture, a 30px headline, three lines of deck, then the teasers as thumb rows */
	.fp-splash-hed, .fp-splash--wide .fp-splash-hed { font-size: 30px; line-height: 1.06; }
	.fp-splash--wide .fp-deck--lg { font-size: 15.5px; -webkit-line-clamp: 3; margin-top: 8px; }
	.fp-caption--cutline { font-size: 11.5px; }
	.fp-teaser, .fp-teaser--art, .fp-teaser--thumb { display: grid; grid-template-columns: minmax(0, 1fr) 112px; column-gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--fp-rule); }
	.fp-teasers .fp-teaser--sponsor { display: block; grid-template-columns: none; padding: 14px 0 4px; }
	.fp-splash--wide .fp-splash-sponsor { grid-area: auto; margin: 18px 0 0; border-left: 0; padding-left: 0; }
	.fp-splash-sponsor .pdt-sponsor { height: auto; }
	.fp-splash-sponsor .pdt-sponsor-body { aspect-ratio: 3 / 5; height: auto; max-height: 400px; width: auto; margin: 0 auto; }
	.fp-teaser:first-child { border-top: 0; padding-top: 2px; }
	.fp-teaser--art .fp-art--photo { grid-column: 2; grid-row: 1; margin: 0; aspect-ratio: 4 / 3; }
	.fp-teaser--art .fp-teaser-text, .fp-teaser--thumb .fp-teaser-text { grid-column: 1; grid-row: 1; }
	.fp-teaser-hed { font-size: 18px; line-height: 1.15; }
	.fp-teaser .fp-deck--sm { display: none; }
	.fp-teaser .fp-byline { margin-top: 5px; }
	.fp-splash--wide .fp-teasers { margin-top: 14px; padding-top: 0; }

	/* Half-module leads: photo beside the headline, not above it */
	.fp-s3 .fp-standard--art .fp-lead { grid-template-columns: minmax(0, 1fr) 128px; gap: 12px; align-items: center; }
	.fp-s3 .fp-standard--art .fp-art--photo { grid-column: 2; grid-row: 1; aspect-ratio: 4 / 3; }
	.fp-s3 .fp-standard--art .fp-lead-text { grid-column: 1; grid-row: 1; }
	.fp-s3 .fp-standard--art .fp-lead-hed, .fp-s3 .fp-standard--portrait .fp-lead-hed, .fp-s3 .fp-standard--text .fp-lead-hed { font-size: 21px; }
	.fp-s3 .fp-standard .fp-deck { -webkit-line-clamp: 2; font-size: 14px; }
	/* Full-width Sports keeps its big picture; its rows stack under it */
	.fp-s6 .fp-standard--art .fp-lead-hed { font-size: 24px; }

	/* Topics: standfirst two lines, lead as a thumb row, rows under it */
	.fp-topics-cols, .fp-topics--2 .fp-topics-cols { row-gap: 16px; }
	.fp-topic-col + .fp-topic-col { padding-top: 16px; }
	.fp-topic-hed { font-size: 21px; }
	.fp-topic-dek { -webkit-line-clamp: 2; font-size: 13px; padding-top: 6px; }
	.fp-topic-head { padding-bottom: 8px; margin-bottom: 4px; }
	.fp-topic-lead, .fp-topic-lead--art, .fp-topic-lead--thumb { grid-template-columns: minmax(0, 1fr) 112px; column-gap: 12px; align-items: center; padding: 8px 0; }
	.fp-topic-lead--art .fp-art--photo { grid-column: 2; grid-row: 1; margin: 0; aspect-ratio: 4 / 3; }
	.fp-topic-lead--art .fp-topic-lead-text, .fp-topic-lead--thumb .fp-topic-lead-text { grid-column: 1; grid-row: 1; }
	.fp-topic-lead-hed { font-size: 18px; }
	.fp-topic-lead .fp-deck--sm { display: none; }
	.fp-topic-rows { margin-top: 0; }
	.fp-topic-more { padding-top: 10px; }

	/* Briefs: kicker and headline only, thumb beside */
	.fp-briefs .fp-row-hed { font-size: 16.5px; }
}

/* Captions are a line, not a paragraph. */
.fp-caption { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 90ch; margin-left: auto; }
/* The lead photo's cutline: left-justified under the picture, bold, with
   the photographer's credit after it in small capitals (Shawn, Sept 10). */
.fp-caption--cutline { display: block; text-align: left; margin-left: 0; max-width: none; font-size: 12.5px; line-height: 1.4; color: var(--fp-ink-2); margin-top: 6px; -webkit-line-clamp: unset; overflow: visible; }
.fp-caption--cutline b { display: block; font-weight: 700; color: var(--fp-ink); }
.fp-credit { display: block; text-align: right; font-family: var(--fp-ui); font-weight: 700; font-size: 10.5px; letter-spacing: .9px; text-transform: uppercase; color: var(--fp-ink-2); margin-bottom: 3px; }

/* ── Sponsor: one ad card, half width ───────────────────────────────── */
.fp-b-sponsor .fp-sponsor-card { max-width: 420px; }
.fp-b-sponsor .fp-sponsor-card .story-card { margin: 0; }
.fp-s6.fp-b-sponsor .fp-sponsor-card { margin: 0 auto; }
.fp-b-sponsor .fp-sponsor--banner { background: none; padding: 0; }
.fp-b-sponsor .fp-sponsor-banner { max-width: 970px; margin: 0 auto; }
.fp-b-sponsor .fp-sponsor-banner .pdt-sponsor { margin: 0; }
/* A row of three squares (home_squares): centred, 300 each, stacking on phones. */
.fp-b-sponsor .fp-sponsor--squares { background: none; padding: 0; }
.fp-sponsor-squares { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.fp-sponsor-square { flex: 0 1 300px; max-width: 300px; }
.fp-sponsor-square .pdt-sponsor { margin: 0; }
@media (max-width: 720px) { .fp-sponsor-squares { gap: 14px; } }

/* ── Development Dashboard promo (template-parts/home/development-dashboard.php, Oct 23 2026) ──
   A full-width band under the lead module while the dashboard is new: the seven-band ribbon from
   the section tones, a serif headline, four numbers read from the dashboard's own data. */
.fp-devdash { grid-column: 1 / -1; color: var(--sandstone-light, #fff4dc); background: radial-gradient(ellipse at 12% 110%, rgba(184, 91, 53, .42) 0%, transparent 55%), radial-gradient(ellipse at 88% -10%, rgba(213, 154, 40, .22) 0%, transparent 60%), linear-gradient(135deg, #2c1a10, #17110d); border: 1px solid rgba(23, 17, 13, .4); border-radius: 3px; overflow: hidden; box-shadow: 0 10px 28px rgba(23, 17, 13, .25); }
.fp-devdash-ribbon { display: flex; height: 6px; }
.fp-devdash-ribbon i { flex: 1; }
.fp-devdash-ribbon i:nth-child(1) { background: var(--color-section-news, #C4622D); }
.fp-devdash-ribbon i:nth-child(2) { background: var(--color-accent-gold, #E8A820); }
.fp-devdash-ribbon i:nth-child(3) { background: var(--sandstone-dark, #C9A87A); }
.fp-devdash-ribbon i:nth-child(4) { background: var(--color-section-civic, #8A9BC8); }
.fp-devdash-ribbon i:nth-child(5) { background: var(--color-accent-teal, #1DADA0); }
.fp-devdash-ribbon i:nth-child(6) { background: var(--terracotta-dark, #9A4520); }
.fp-devdash-ribbon i:nth-child(7) { background: #F5C030; }
.fp-devdash-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px 36px; padding: 22px 26px 24px; align-items: center; }
.fp-devdash-kicker { font-family: var(--font-ui); font-weight: 700; font-size: 11.5px; letter-spacing: 1.8px; text-transform: uppercase; color: #E8A820; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fp-devdash-new { display: inline-block; background: var(--terracotta); color: #fff9ea; font-size: 10px; letter-spacing: 1.6px; padding: 4px 8px 3px; border-radius: 999px; line-height: 1; }
.fp-devdash-hed { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.08; letter-spacing: -.01em; margin: 0 0 10px; text-wrap: balance; }
.fp-devdash-hed a { color: #fff4dc; text-decoration: none; }
.fp-devdash-hed a:hover { color: #E8A820; }
.fp-devdash-dek { font-family: var(--font-body); font-size: 15.5px; line-height: 1.55; color: rgba(232, 201, 160, .88); margin: 0 0 16px; max-width: 58ch; }
.fp-devdash-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.fp-devdash-cta { font-family: var(--font-ui); font-weight: 700; font-size: 11.5px; letter-spacing: 1.8px; text-transform: uppercase; background: var(--terracotta); color: #fff; padding: 12px 18px; text-decoration: none; border-radius: 2px; }
.fp-devdash-cta:hover { background: #E8A820; color: #1c1712; }
.fp-devdash-note { font-family: var(--font-ui); font-size: 12.5px; color: rgba(232, 201, 160, .62); max-width: 34ch; }
.fp-devdash-kpis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fp-devdash-kpis li { background: var(--paper, #fff9ea); border: 0; border-top: 3px solid var(--color-section-news, #C4622D); padding: 12px 14px 11px; display: grid; gap: 3px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.fp-devdash-kpis li:nth-child(2) { border-top-color: var(--color-accent-gold, #E8A820); }
.fp-devdash-kpis li:nth-child(3) { border-top-color: var(--color-accent-teal, #1DADA0); }
.fp-devdash-kpis li:nth-child(4) { border-top-color: var(--color-section-civic, #8A9BC8); }
.fp-devdash-kpis b { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); line-height: 1; letter-spacing: -.01em; color: var(--ink, #1c1712); font-variant-numeric: tabular-nums; }
.fp-devdash-kpis span { font-family: var(--font-ui); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-tertiary, #786755); }
@media (max-width: 860px) {
	.fp-devdash-body { grid-template-columns: 1fr; padding: 18px 18px 20px; }
	.fp-devdash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.fp-devdash-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
	.fp-devdash-kpis b { font-size: 22px; }
}