/* ============================================================
   editorial.css — Guardian-style editorial broadsheet
   Loaded only on the homepage (scoped via body.home).
   Layered after responsive.css so tokens here win.
   ============================================================ */


/* ---------- Page-scoped token overrides ----------
   Shared tokens come from tokens.css (:root). Only genuine homepage
   divergences are listed here. */
body.home {
	/* Colour — homepage runs on pure white, not the default warm paper */
	--paper: #FFFFFF;

	/* Spacing — the homepage uses a HALF-scale for the three smallest steps
	   (2/4/8) where every other page uses 4/8/12. Pre-existing divergence,
	   preserved verbatim so this refactor is visually neutral. Reconcile as
	   its own pass — unifying these will reflow homepage spacing. */
	--s-1: 2px;
	--s-2: 4px;
	--s-3: 8px;

	/* Type scale (fluid) */
	--fs-kicker: 0.55rem;
  --fs-kicker-breaking: 0.8rem;
	--fs-byline: 0.7rem;
	--fs-river-hed: 1.05rem;
	--fs-package-hed: clamp(1.25rem, 1.8vw, 1.7rem);
	--fs-lead-hed: clamp(1rem, 1.7vw, 1.3rem);
	--fs-splash-hed: clamp(1.8rem, 5.2vw, 3rem);
	--fs-standfirst: 1rem;
  --fs-standfirst-mobile: 0.8rem;
  --fs-hed-mobile: 0.9rem
}

/* ---------- Page base (homepage only) ---------- */
body.home {
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.55;
	font-variant-numeric: lining-nums;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.home a {
	color: var(--ink);
	text-decoration: none;
	background-image: linear-gradient(var(--ink), var(--ink));
	background-repeat: no-repeat;
	background-size: 0 1px;
	background-position: 0 100%;
	transition: background-size 180ms ease, color 180ms ease;
}

body.home a:hover,
body.home a:focus-visible {
	color: var(--link-hover);
	background-image: linear-gradient(var(--link-hover), var(--link-hover));
	background-size: 100% 1px;
}

body.home *:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ---------- Typography primitives ---------- */
body.home .kicker {
	font-family: var(--font-furniture);
	font-size: var(--fs-kicker);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ink);
}

body.home .kicker--breaking {
	color: var(--accent);
  font-size: var(--fs-kicker-breaking);
  font-weight: 600;
}

body.home .kicker--breaking::before {
	content: '\25AE';
	display: inline-block;
	margin-right: 0.4em;
	color: var(--accent);
}

body.home .hed {
	font-family: var(--font-display);
	font-weight: 800;
	font-variation-settings: 'opsz' 144;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: var(--s-2) 0 var(--s-3);
}

body.home .hed--breaking {
  font-size: var(--fs-splash-hed);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
} 
body.home .hed--splash {
	font-size: var(--fs-splash-hed);
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -0.02em;
}

body.home .hed--lead {
	font-size: var(--fs-lead-hed);
}

body.home .hed--package {
	font-size: var(--fs-package-hed);
}

body.home .hed--river {
	font-size: var(--fs-river-hed);
	line-height: 1.2;
	font-variation-settings: 'opsz' 24;
}

body.home .standfirst {
	font-family: var(--font-body);
	font-size: var(--fs-standfirst);
	line-height: 1.5;
	color: var(--ink-soft);
	margin: 0 0 var(--s-3);
}

body.home .byline {
	font-family: var(--font-furniture);
	font-size: var(--fs-byline);
	letter-spacing: 0.08em;
	color: var(--muted);
}

body.home .byline .sep {
	margin: 0 0.4em;
	color: var(--muted);
}

/* ---------- Section labels (full-bleed black bars) ---------- */
body.home .story-grid--horizontal {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: clamp(16px, 1.6vw, 28px);
}


body.home .story-grid--vertical {
    display: flex;
    flex-direction: column;
}

body.home .story-card {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    min-width: 0;
}

body.home .story-card__media { display: block; margin-bottom: var(--s-2); }
body.home .story-card__img {
    display: block;
    width: 100%;
    object-fit: cover;
    aspect-ratio: 3 / 2;
}

body.home .story-card__body { display: contents; }

body.home .story-grid--horizontal.story-grid--cols-2 .hed--story { font-size: clamp(1rem, 1.7vw, 1.4rem); }
body.home .story-grid--horizontal.story-grid--cols-3 .hed--story { font-size: clamp(1.05rem, 1.4vw, 1.25rem); }
body.home .story-grid--horizontal.story-grid--cols-4 .hed--story { font-size: var(--fs-river-hed); }
body.home .story-grid--horizontal.story-grid--cols-5 .hed--story { font-size: 0.95rem; }
body.home .hed--story { line-height: 1.15; font-variation-settings: 'opsz' 24; }


/* ---- Image left rules for vertical story grids -------- */
body.home .story-grid--vertical .story-card {
    flex-direction: row;
    align-items: center;
    gap: var(--s-4);    
    border-bottom: 1px solid var(--border-dark)
}
body.home .story-grid--vertical .story-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    flex: 1 1 auto;
    min-width: 0;
}
body.home .story-grid--vertical .story-card .standfirst { display: none; }
/* Fixed-ish thumbnail so a full-width vertical grid doesn't blow the image up
   to 40% of a ~1100px block. The mobile block below re-widens it to 40% of the
   (narrow) phone viewport. */
body.home .story-grid--vertical .story-card__media { 
  flex: 0 0 clamp(120px, 14vw, 180px); 
  margin-bottom: 0; 
  padding: var(--s-4);
}
body.home .story-grid--vertical .story-card .story-card__img {
    height: auto;
    aspect-ratio: 3 / 2;
    box-sizing: border-box;
}
body.home .story-grid--vertical .story-card .hed { margin: 0; min-height: 0; }

/* body.home .section-bar { */
/* 	background: var(--ink); */
/* 	color: var(--paper); */
/* 	font-family: var(--font-furniture); */
/* 	font-weight: 700; */
/* 	text-transform: uppercase; */
/* 	letter-spacing: 0.18em; */
/* 	font-size: 0.78rem; */
/* 	padding: var(--s-3) var(--s-5); */
/* 	margin: var(--s-1) 0 var(--s-4) 0; */
/* } */

/* New bar type styling */
body.home .section-bar {
    font-family: var(--font-furniture);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    border-bottom: 2px solid var(--ink);
    padding-bottom: var(--s-2);
    margin-bottom: var(--s-4);
}
/* ---------- Hairlines ---------- */
body.home .rule {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: var(--s-5) 0;
}

/* ---------- Homepage grid ---------- */
body.home #contentGrid {
	display: block;
	background: var(--paper);
}

body.home .homepage {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(16px, 1.6vw, 28px) clamp(16px, 1.6vw, 32px);
	max-width: clamp(1100px, calc(60vw + 280px), 1440px);
	margin: 0 auto;
	padding: var(--s-3) clamp(16px, 4vw, 72px) var(--s-9);
	/* Cells size to their natural content — the equal-heights JS below
	   then caps the taller neighbour of each half/half pair. Without this,
	   grid's default `stretch` would make both cells the same height and
	   the JS couldn't tell which is shorter. */
	align-items: start;
}

/* Width-aware block wrappers. Each saved block becomes one .home-block; it
   is placed directly in the 12-col .homepage grid via its width class. Two
   consecutive halves pack onto the same row; a half next to a full starts a
   new row with empty space beside the half.                                   */
body.home .home-block {
	min-width: 0;
}

/* Utility class applied by the height-equalizer JS — hides trailing list
   items in a taller half-block so its height matches the shorter neighbour.
   Never applied to footer CTAs (they sit outside the trimmable list). */
body.home .is-hidden-by-fit { display: none !important; }
body.home .home-block--full {
	grid-column: 1 / -1;
}
body.home .home-block--half {
	grid-column: span 6;
}

/* Splash */
body.home .splash {
	display: grid;
}

body.home .breaking {
	display: grid;
  grid-auto-flow: column;
  padding: var(--s-6);
  background-color: var(--paper);
  border-left: 4px solid var(--accent);
  transition: all 0.3s ease-in-out;
}

body.home .breaking:hover {
  background-color: var(--tint);
}

body.home .splash--horizontal {
  display: grid;
  grid-auto-flow: column;
  gap: var(--s-5);                /* space between image and headline (row-gap on the mobile stack) */
  padding: var(--s-6);
  background-color: var(--paper);
  border-left: 4px solid var(--accent);
  transition: all 0.3s ease-in-out;
}

/* config.imageSide === 'left' (splash.php → .splash--img-left): flip the image
   to the left. DOM is body-then-media, so grid auto-flow puts media on the right
   by default; pulling media ahead with `order` reverses the two columns. The
   accent bar moves to the right so it stays on the text side, not the image.
   (On phones .splash--horizontal switches to grid-auto-flow: row, so this just
   places the image on top — a fine hero stack; both side borders are cleared in
   the mobile block below.) */
body.home .splash--horizontal.splash--img-left {
  border-left: 0;
  border-right: 4px solid var(--accent);
}
body.home .splash--horizontal.splash--img-left .splash__media { order: -1; }

/* TODO: .splash--horizontal (config.orientation === 'horizontal', set in
   resources/views/partials/blocks/splash.php) — mirror the .breaking box
   above: grid-auto-flow: column, padding, background-color, border-left
   accent, :hover tint. Keep .splash__img's own aspect-ratio rules below
   (don't copy .breaking__img's ~L324/329). Also add the @media
   (max-width: 640px) stack override next to .breaking's mobile block
   (~L983-1006) so splash--horizontal collapses the same way on phones. */


body.home .breaking__media,
body.home .splash__media {
	display: block;
	overflow: hidden;
}

body.home .splash__img,
body.home .lead__img,
body.home .breaking__img,
body.home .river-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 3 / 2;
	/* border: 1px solid var(--ink); */
}

body.home .breaking__img { aspect-ratio: 12 / 6; }
body.home .splash__img { aspect-ratio: 12 / 6; }
body.home .lead__img { aspect-ratio: 16 / 10; }
body.home .lead .is-empty { aspect-ratio: 16 / 10; }

body.home .home-block--full.home-block--breaking .breaking__img {
  max-height: clamp(300px, 32vw, 440px);
}
body.home .home-block--full.home-block--splash .splash__img {
  max-height: min(40vh, 440px);
}

/* Half-width splash: match its row-neighbour's height instead of letting the
   hero image blow the block taller (which leaves the shorter neighbour — e.g. a
   vertical story-grid, non-trimmable by the height-equalizer JS — floating with
   a gap beneath it). Trick: pull the image out of flow so the splash's height is
   driven by its *text* only; the block then stretches to the row height and the
   image crops (object-fit: cover) to fill whatever space is left. Works both
   ways, but usually pulls the taller splash DOWN to a shorter grid.
   Desktop-only — below 1025px half-blocks go full-width and stack, so we leave
   the natural 12/6 image alone (mirrors .home-block--half.home-block--single-story). */
@media (min-width: 1025px) {
  body.home .home-block--half.home-block--splash { align-self: stretch; }

  body.home .home-block--half.home-block--splash .splash {
    grid-template-rows: 1fr auto;   /* media absorbs slack, body natural at bottom */
    height: 100%;
  }
  body.home .home-block--half.home-block--splash .splash__media {
    position: relative;
    overflow: hidden;
    min-height: clamp(160px, 16vw, 200px);   /* floor so a very short grid can't shrink it to a sliver */
  }
  body.home .home-block--half.home-block--splash .splash__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;   /* out of flow → contributes no height; object-fit crops */
  }
}

/* config.overlay (splash.php → .splash--overlay): hero treatment. The image
   becomes the full block and the copy sits over it — legibility comes from the
   Cloudinary darken baked into the image (OVERLAY_DIM_EFFECT in
   HomepageBlockRenderer), not a CSS scrim. The block has no intrinsic height of
   its own — it fills whatever the row gives it and crops (object-fit: cover) to
   suit, closing the gap in either direction without the crop-strip hack above.
   Applies at every width; selectors carry .splash--overlay so they out-specify
   the half-width rules when both match. */
body.home .home-block--splash .splash--overlay {
  position: relative;
  display: flex;
  align-items: flex-end;          /* copy pinned to the bottom */
  height: 100%;
  min-height: 200px;   /* small, flat backstop only — the headline body is the real
                          floor, so the minimum tracks content/neighbour, not the
                          viewport (a vw-scaled floor made short heroes too tall) */
  overflow: hidden;
  grid-template-rows: none;       /* undo the half-crop grid if it also applies */
}
body.home .home-block--half.home-block--splash .splash--overlay { align-self: stretch; }

/* Full-width overlay hero has no row-neighbour to stretch to, so it would
   otherwise collapse to the min-height floor. Drive its height from the width
   via a cinematic aspect-ratio instead. Scoped to --full so the tuned
   half-width behaviour above is untouched. */
body.home .home-block--full.home-block--splash .splash--overlay {
  aspect-ratio: 21 / 6;
  height: auto;                 /* let aspect-ratio own the height, not height:100% */
}
/* The general full-width splash caps image height (~440px, ~L349); in overlay
   the image is the full bleed, so lift that cap or it clips a taller hero. */
body.home .home-block--full.home-block--splash .splash--overlay .splash__img {
  max-height: none;
}

body.home .home-block--splash .splash--overlay .splash__media {
  position: absolute;
  inset: 0;
  min-height: 0;
  overflow: hidden;
}
body.home .home-block--splash .splash--overlay .splash__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  transition: transform 600ms ease;   /* Ken-Burns zoom on hover, see below */
}
/* No-image fallback: the hatch .is-empty is too light for white type, so paint
   it dark and drop its border. */
body.home .home-block--splash .splash--overlay .is-empty {
  background: var(--ink-soft);
  border: 0;
}
body.home .home-block--splash .splash--overlay .splash__body {
  position: relative;   /* paints above the absolutely-positioned image */
  padding: var(--s-6);
  background: none;
  color: var(--paper);
}
body.home .home-block--splash .splash--overlay .hed--splash a,
body.home .home-block--splash .splash--overlay .kicker {
  color: var(--paper);
}
/* In the dimmed hero the hover affordance is a zoom on the whole card (below),
   not the global sliding underline (drawn in --ink / flipping to brand red — both
   dead on the dark image). Suppress that underline and keep the headline plain
   white in every state so it doesn't fight the zoom. */
body.home .home-block--splash .splash--overlay .splash__body a,
body.home .home-block--splash .splash--overlay .splash__body a:hover,
body.home .home-block--splash .splash--overlay .splash__body a:focus-visible {
  color: var(--paper);
  background-image: none;
}

/* Whole-hero affordance: a slow Ken-Burns zoom on the image. Fired from the
   article so hovering the image OR the headline (separate <a>s to the same
   story) both trigger it; .splash--overlay's overflow:hidden clips the scale.
   :focus-within gives keyboard users the same cue. */
body.home .home-block--splash .splash--overlay:hover .splash__img,
body.home .home-block--splash .splash--overlay:focus-within .splash__img {
  transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
  body.home .home-block--splash .splash--overlay .splash__img { transition: none; }
  body.home .home-block--splash .splash--overlay:hover .splash__img,
  body.home .home-block--splash .splash--overlay:focus-within .splash__img { transform: none; }
}
/* Brand red goes muddy on the dark image — warm the "Featured" kicker up.
   (The splash kicker renders as .kicker--breaking; see HomepageBlockRenderer.) */
body.home .home-block--splash .splash--overlay .kicker--breaking {
  color: #ffb5a5;
}
body.home .home-block--splash .splash--overlay .kicker--breaking::before {
  color: #ffb5a5;
}
body.home .home-block--splash .splash--overlay .standfirst {
  color: rgba(255, 255, 255, 0.86);
}
body.home .home-block--splash .splash--overlay .byline {
  color: rgba(255, 255, 255, 0.66);
}



/* Keep all leads on one row visually aligned: clamp headline to 2 lines
   and standfirst to 2 lines so uneven copy lengths don't leave short cards
   floating above taller ones. */
body.home .lead .hed--lead {
	overflow: hidden;
	min-height: calc(2 * var(--fs-lead-hed) * 1.15);
}

body.home .lead .standfirst {
	font-size: 0.95rem;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.home .is-empty {
	width: 100%;
	aspect-ratio: 3 / 2;
	background:
		repeating-linear-gradient(
			135deg,
			var(--tint) 0 12px,
			var(--paper-pure) 12px 24px
		);
	border: 1px solid var(--ink);
}

body.home .breaking__body {
  padding: var(--s-4) var(--s-5) var(--s-4) 0;
  max-width: 92%;
}
body.home .single-story__body,
body.home .splash__body {
	/* Hed hangs into the picture for that print-splash feel */
	/* margin-top: -28px; */
	background: var(--paper);
	/* padding: var(--s-5) var(--s-5) 0 0; */
	/* max-width: 92%; */
}

body.home .breaiking__body .hed,
body.home .splash__body .hed {
	margin-top: var(--s-2);
}

/* Most read */
body.home .most-read {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	height: 100%;
}

/* Half-width most-read reads as a rail (left border). Full-width most-read
   gets a top-rule treatment instead. */
body.home .home-block--half.home-block--most-read-generated .most-read,
body.home .home-block--half.home-block--most-read .most-read {
	border-left: 1px solid var(--ink);
	padding-left: var(--s-5);
}
body.home .home-block--full.home-block--most-read-generated .most-read,
body.home .home-block--full.home-block--most-read .most-read {
	padding-top: var(--s-4);
}
body.home .home-block--full.home-block--most-read-generated .most-read ol,
body.home .home-block--full.home-block--most-read .most-read ol {
  column-count: 2;
  column-gap: var(--s-4);
  list-style-position: inside;
}

body.home .most-read__list {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
}

body.home .most-read__footer {
	margin-top: auto;
	padding-top: var(--s-4);
	border-top: 1px solid rgba(10, 10, 10, 0.18);
	font-family: var(--font-furniture);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.78rem;
}

body.home .most-read__footer a {
	color: var(--ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

body.home .most-read__footer a:hover { color: var(--accent); }

body.home .most-read__label {
	font-family: var(--font-furniture);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.78rem;
	border-bottom: 2px solid var(--ink);
	padding-bottom: var(--s-2);
	margin-bottom: var(--s-4);
}

body.home .most-read__item {
	display: grid;
	grid-template-columns: 2.4rem 1fr;
	gap: var(--s-3);
	padding: var(--s-2) 0;
	border-top: 1px solid rgba(10, 10, 10, 0.18);
	align-items: start;
}

body.home .most-read__item:first-child { border-top: 0; padding-top: 0; }

body.home .most-read__num {
	font-family: var(--font-display);
	font-weight: 800;
	font-variation-settings: 'opsz' 144;
	font-size: 1.8rem;
	line-height: 0.9;
	color: var(--accent);
}

body.home .most-read__link {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	color: var(--ink);
}

/* Lead-pair: the wrapper lays out its inner .lead articles as a horizontal row,
   with auto-flow columns sharing the available width equally so every lead —
   and therefore every lead image — is the same size. This holds at both full
   and half width; the responsive block below stacks them vertically on narrow
   viewports. */
body.home .home-block--lead-pair {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: clamp(16px, 1.6vw, 28px);
}

body.home .lead {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	min-width: 0;
}

body.home .lead__media {
	display: block;
	margin-bottom: var(--s-3);
}

/* Text wrapper around kicker / headline / teaser / date. Transparent at desktop
   width (display:contents makes its children behave as direct flex children of
   the card, so the stacked layout is unchanged); the phone block below turns it
   into a real flex column so the text can sit beside the image. */
body.home .river-card__body,
body.home .lead__body {
	display: contents;
}

/* Single story — a standalone featured card. Mirrors the lead card at full
   width. When half-width (desktop only) the hero is capped by
   --single-story-cap so it can't tower over a shorter neighbour (e.g. a
   lead-pair) and strand a big band of whitespace beside it. The image height
   stays purely width-driven (aspect-ratio + cap, cover-cropped) rather than
   filling the stretched cell: two half-width single-stories side by side then
   put their body text at the same height whatever their copy lengths, and any
   leftover height falls at the bottom of the shorter card. */
body.home .single-story {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	min-width: 0;
}
body.home .single-story__media {
	display: block;
	margin-bottom: var(--s-3);
}
body.home .single-story__img {
	display: block;
	width: 100%;
	object-fit: cover;
	aspect-ratio: 16 / 10;
}

@media (min-width: 1025px) {
	body.home .home-block--half.home-block--single-story {
		align-self: stretch;
		display: flex;
		flex-direction: column;
	}
	body.home .home-block--half.home-block--single-story .single-story {
		flex: 1 1 auto;
	}
	body.home .home-block--half.home-block--single-story .single-story__media {
		margin-bottom: var(--s-2);
	}
	body.home .home-block--half.home-block--single-story .single-story__img {
		max-height: var(--single-story-cap, clamp(190px, 19vw, 250px));
	}
}

/* Latest river — internal grid of story cards */
body.home .river {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(16px, 1.6vw, 28px);
}

body.home .river-card {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	padding-top: var(--s-3);
}

body.home .river-card__media {
	display: block;
	margin-bottom: var(--s-2);
}

body.home .standfirst--small {
	font-size: 0.95rem;
	line-height: 1.45;
}

/* More news — dense 2-col list, no images */
body.home .more-news {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 clamp(24px, 3vw, 48px);
}

body.home .more-news__item {
	display: grid;
	grid-template-columns: 6rem 1fr;
	gap: var(--s-4);
	align-items: baseline;
	padding: var(--s-4) 0;
	border-top: 1px solid rgba(10, 10, 10, 0.18);
}

body.home .more-news__link {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.25;
}

/* Jobs — editorial "lead + index"
   The first row is a featured lead (logo/monogram, Promoted tag, display-serif
   role); the rest fall into a compact typographic index. Borrows the
   homepage's lead-story + headlines grammar rather than reading as a flat list. */
body.home .jobs-classifieds {
	padding: var(--s-4) var(--s-4) var(--s-3);
	min-width: 0;
}

body.home .jobs-classifieds__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-4);
	margin-bottom: var(--s-3);
	padding-bottom: var(--s-2);
	/* border-bottom: 1px solid rgba(10, 10, 10, 0.25); */
}

body.home .jobs-classifieds__eyebrow {
	font-family: var(--font-furniture);
	font-size: 0.62rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
	order: 2;
}

body.home .jobs-classifieds__title {
	font-family: var(--font-furniture);
	font-weight: 700;
	font-size: clamp(1.2rem, 1.7vw, 1.5rem);
	line-height: 1;
	margin: 0;
	order: 1;
}

/* Featured lead */
body.home .jobs-classifieds__lead {
	display: grid;
	grid-template-columns: 3rem 1fr;
	gap: var(--s-3);
	align-items: start;
	padding: var(--s-1) 0 var(--s-2);
}

body.home .jobs-classifieds__lead--promoted {
	background: linear-gradient(to right, var(--tint) 0%, transparent 92%);
	border-left: 3px solid var(--accent);
	margin: 0 calc(var(--s-4) * -1) var(--s-2);
	padding: var(--s-3) var(--s-4);
}

body.home .jobs-classifieds__logo {
	display: block;
	width: 3rem;
	height: 3rem;
	background: var(--ink);
	overflow: hidden;
}
/* Logo is a link but must not pick up the global underline-slide animation. */
body.home .jobs-classifieds__logo,
body.home .jobs-classifieds__logo:hover {
	background-image: none;
}

body.home .jobs-classifieds__logo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--paper-pure);
}

body.home .jobs-classifieds__monogram {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-family: var(--font-furniture);
	font-weight: 800;
	font-size: 1.2rem;
	letter-spacing: 0.02em;
	color: var(--paper);
}

body.home .jobs-classifieds__lead-body { min-width: 0; }

body.home .jobs-classifieds__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-bottom: var(--s-2);
}

body.home .jobs-classifieds__promoted {
	display: inline-block;
	font-family: var(--font-furniture);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent);
	border: 1px solid var(--accent);
	padding: 2px 6px;
}

body.home .jobs-classifieds__new {
	display: inline-block;
	font-family: var(--font-furniture);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent);
	background: var(--paper);
  border: 1px solid var(--accent);
  border-radius: 5px;
	padding: 2px 6px;
}

body.home .jobs-classifieds__lead-role {
	font-family: var(--font-furniture);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	margin: 0 0 var(--s-1);
}

body.home .jobs-classifieds__lead-role a { color: var(--ink); }
body.home .jobs-classifieds__lead-role a:hover { color: var(--link-hover); }

/* Shared meta line (lead + index) */
body.home .jobs-classifieds__meta {
	font-family: var(--font-furniture);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-soft);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	align-items: baseline;
}

body.home .jobs-classifieds__city,
body.home .jobs-classifieds__cat { color: var(--muted); font-weight: 500; }
body.home .jobs-classifieds__sep { 
  color: var(--accent); 
}

/* Index — the remaining roles, two columns at full width */
body.home .jobs-classifieds__index {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 clamp(24px, 3vw, 48px);
	border-top: 1px solid var(--ink);
}

body.home .jobs-classifieds__index-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--s-2) 0;
	border-top: 1px solid rgba(10, 10, 10, 0.14);
}

/* The first row of a 2-col grid shouldn't draw a redundant rule under the
   section's own top border. */
body.home .jobs-classifieds__index-item:nth-child(1),
body.home .jobs-classifieds__index-item:nth-child(2) { border-top: 0; }

body.home .jobs-classifieds__index-role {
	font-family: var(--font-furniture);
	font-weight: 700;
	font-size: 0.92rem;
	line-height: 1;
	margin-top: 4px;
  margin-bottom: 1px;
}

body.home .jobs-classifieds__index-role a { color: var(--ink); }
body.home .jobs-classifieds__index-role a:hover { color: var(--link-hover); }

body.home .jobs-classifieds__promoted--inline,
body.home .jobs-classifieds__new--inline {
	font-size: 0.5rem;
	letter-spacing: 0.16em;
	padding: 1px 4px;
	margin-left: 0.4em;
	vertical-align: 0.18em;
}

body.home .jobs-classifieds__more {
	display: inline-block;
	margin-top: var(--s-3);
	font-family: var(--font-furniture);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--ink);
	padding-bottom: 2px;
}
body.home .jobs-classifieds__more:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Half-width jobs panel — stack the index into one column, shrink the lead so
   a pair with splash / lead-pair stays balanced. */
body.home .home-block--half.home-block--jobs .jobs-classifieds { padding: var(--s-3); }
body.home .home-block--half.home-block--jobs .jobs-classifieds__lead {
	grid-template-columns: 2.5rem 1fr;
	gap: var(--s-2);
}
body.home .home-block--half.home-block--jobs .jobs-classifieds__logo { width: 2.5rem; height: 2.5rem; }
body.home .home-block--half.home-block--jobs .jobs-classifieds__monogram { font-size: 1rem; }
body.home .home-block--half.home-block--jobs .jobs-classifieds__lead--promoted {
	margin-left: calc(var(--s-3) * -1);
	margin-right: calc(var(--s-3) * -1);
	padding: var(--s-1);
}
body.home .home-block--half.home-block--jobs .jobs-classifieds__lead-role { font-size: 1.05rem; }
body.home .home-block--half.home-block--jobs .jobs-classifieds__index {
	grid-template-columns: minmax(0, 1fr);
}
body.home .home-block--half.home-block--jobs .jobs-classifieds__index-item:nth-child(2) {
	border-top: 1px solid rgba(10, 10, 10, 0.14);
}

/* River / more-news internal column variants */
body.home .river--cols-2 { grid-template-columns: repeat(2, 1fr); }
body.home .river--cols-3 { grid-template-columns: repeat(3, 1fr); }
body.home .river--cols-4 { grid-template-columns: repeat(4, 1fr); }
body.home .more-news--cols-1 { grid-template-columns: 1fr; }
body.home .more-news--cols-2 { grid-template-columns: 1fr 1fr; }

/* When river / more-news are forced into a half-width block, collapse their
   internal column count so story cards stay readable. */
body.home .home-block--half .river { grid-template-columns: 1fr; }
body.home .home-block--half .more-news { grid-template-columns: 1fr; }

/* Ad banner block (full bleed within max-width) */
body.home .ad-block {
	display: flex;
	justify-content: center;
  padding: var(--s-3) 0;
  border-top: 0.5px solid var(--border-dark);
  border-bottom: 0.5px solid var(--border-dark);
  margin: 0px;
}
body.home .ad-block img { max-width: 100%; height: auto; display: block; }
/* responsive.css positions .ad728/.ad320 absolutely over a placeholder image
   that reserves the slot height. The editorial ad block has no placeholder, so
   keep the ad in normal flow — otherwise the container collapses to 0 height and
   the absolute ad overlaps the content below. */
body.home .ad-block .ad728container,
body.home .ad-block .ad320container { position: static; }
body.home .ad-block .ad.ad728,
body.home .ad-block .ad.ad320 { position: static; }

/* Custom HTML block */
body.home .custom-block {
	min-width: 0;
}
body.home .custom-block__body {
	font-family: var(--font-body);
	line-height: 1.55;
	padding: var(--s-4) 0;
}
body.home .custom-block__body p { margin: 0 0 var(--s-3); }
body.home .custom-block__body a { color: var(--ink); text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	body.home .home-block--half { grid-column: 1 / -1; }

	body.home .home-block--half.home-block--most-read-generated .most-read,
	body.home .home-block--half.home-block--most-read .most-read {
		border-left: 0;
		border-top: 2px solid var(--ink);
		padding-left: 0;
		padding-top: var(--s-4);
	}
	body.home .river { grid-template-columns: repeat(2, 1fr); }
	body.home .home-block--lead-pair { grid-auto-flow: row; grid-auto-columns: auto; }
}

@media (max-width: 640px) {
	body.home .homepage { padding: var(--s-5) var(--s-4) var(--s-7); }

	/* One column for every multi-card block on phones. */
	body.home .river { grid-template-columns: 1fr; }
	body.home .more-news,
	body.home .more-news--cols-2 { 
    grid-template-columns: 1fr; 
  }
	body.home .more-news__item { 
    gap: var(--s-2); 
    padding: var(--s-2) var(--s-3) 0 var(--s-3);
  }
  body.home .more-news__link {
    font-size: 0.9rem;
  }
	body.home .home-block--lead-pair { grid-auto-flow: row; grid-template-columns: 1fr; }

	/* Full-width jobs index collapses to a single column (the half-width panel
	   already does this higher up). Put the rule back under the 2nd role since
	   it is no longer sitting in the grid's first row. */
	body.home .jobs-classifieds__index { grid-template-columns: minmax(0, 1fr); }
	body.home .jobs-classifieds__index-item:nth-child(2) {
		border-top: 1px solid rgba(10, 10, 10, 0.14);
	}

	/* Splash stays a stacked hero — full-bleed image on top, headline below. */
	body.home .single-story__body,
  body.home .splash__breaking,
  body.home .splash__body {
	  padding: var(--s-2) 0 0 0;
  }

  /* Overlay hero on phones: the desktop 12/5 letterbox is too short here (it
     floors at 200px and crushes the headline). Give it a taller, portrait-ish
     frame and unify full + half — both are full-bleed single columns on mobile.
     Content taller than the ratio still grows the block. Both selectors match
     the desktop aspect rule's specificity (0,4,1) but sit later in the source,
     so they win inside this query. */
  body.home .home-block--full.home-block--splash .splash--overlay,
  body.home .home-block--half.home-block--splash .splash--overlay {
    aspect-ratio: 4 / 5;
    height: auto;
    min-height: 0;
  }
  /* The overlay body keeps its inset here (out-ranks the edge-to-edge splash
     rule above); just trim it slightly for narrow screens. */
  body.home .home-block--splash .splash--overlay .splash__body {
    padding: var(--s-5);
  }

	/* ---- Compact "media object" rows: image left, text block right --------
	   Applies to river cards and lead heroes only — single-story keeps its
	   stacked image-on-top layout. The teaser is dropped so each row reads as
	   image + kicker / headline / date; a fixed image width and aspect ratio
	   keep every thumbnail identical in size, whatever the headline length. The
	   __body wrapper (transparent on desktop) becomes the flex column that
	   stacks the text next to the image. */
	body.home .river-card,
	body.home .lead {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--s-4);
		border-bottom: 1px solid var(
		--border-light);
		padding: 10px 10px 10px 0px;
	}
	body.home .river-card__body,
	body.home .lead__body {
		display: flex;
		flex-direction: column;
		gap: var(--s-2);
		flex: 1 1 auto;
		min-width: 0;
	}
	body.home .river-card .standfirst,
	body.home .lead .standfirst {
		display: none;
	}
	body.home .river-card__media,
	body.home .lead__media {
		flex: 0 0 40%;
		margin-bottom: 0;
	}
	/* Fixed thumbnail — identical width (40%) and 3:2 ratio for every card. The
	   descendant selectors also outrank the per-type `.lead .is-empty` aspect
	   rule so empty slots stay the same size as real images; border-box keeps
	   the placeholder's 1px border from making it larger. */
	body.home .river-card .river-card__img,
	body.home .lead .lead__img {
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
		box-sizing: border-box;
    padding: var(--s-2);
	}
	body.home .river-card .hed,
	body.home .lead .hed {
		margin: 0;
		min-height: 0;
	}

  body.home .standfirst {
    font-size: var(--fs-standfirst-mobile);
  }

  body.home .splash--horizontal {
    grid-auto-flow: row;
		/* padding: 0 var(--s-4) var(--s-4); */
    border-left: 0;
    border-radius: 20px;
    padding: 40px
  }
  /* img-left moves the accent to border-right via a more specific desktop rule
     (0,3,1), so a plain .splash--horizontal reset can't clear it — match that
     specificity here or the red bar survives into the rounded-box mobile view. */
  body.home .splash--horizontal.splash--img-left { border-right: 0; }


  /* Breaking news: Renders as a stack on mobile */
  body.home .breaking {
		grid-auto-flow: row;
		/* padding: 0 var(--s-4) var(--s-4); */
    border-left: 0;
    background-color: rgba(255, 109, 0, 0.09);
    border-radius: 20px;
    padding: 40px
	}
	body.home .breaking__media {
		order: -1;
		margin: 0 calc(var(--s-4) * -1);
	}
	body.home .breaking__img {
		aspect-ratio: 16 / 9;
		height: auto;
	}
	body.home .breaking__body {
		padding: var(--s-3) 0 0;
		max-width: 100%;
	}
	body.home .hed--breaking {
		font-size: clamp(1.5rem, 6.5vw, 2rem);
	}


	/* Roomier touch targets in the text-only lists. */
	body.home .most-read__item { padding: var(--s-3) 0; }
	body.home .jobs-classifieds__index-item { padding: var(--s-2) 0; }

  body.home .jobs-classifieds,
	body.home .home-block--half.home-block--jobs .jobs-classifieds {
		padding: var(--s-3) var(--s-3) var(--s-2);
	}
	body.home .jobs-classifieds__head { margin-bottom: var(--s-2); }
	body.home .jobs-classifieds__title { font-size: 1.05rem; }
	body.home .jobs-classifieds__eyebrow { font-size: 0.55rem; letter-spacing: 0.16em; }

	body.home .jobs-classifieds__lead,
	body.home .home-block--half.home-block--jobs .jobs-classifieds__lead {
		grid-template-columns: 2.25rem 1fr;
		gap: var(--s-2);
	}
	body.home .jobs-classifieds__logo,
	body.home .home-block--half.home-block--jobs .jobs-classifieds__logo {
		width: 2.25rem;
		height: 2.25rem;
	}
	body.home .jobs-classifieds__monogram,
	body.home .home-block--half.home-block--jobs .jobs-classifieds__monogram {
		font-size: 0.95rem;
	}
	/* Keep the promoted band's bleed matched to the panel's new padding. */
	body.home .jobs-classifieds__lead--promoted,
	body.home .home-block--half.home-block--jobs .jobs-classifieds__lead--promoted {
		margin-left: calc(var(--s-3) * -1);
		margin-right: calc(var(--s-3) * -1);
		padding: var(--s-2) var(--s-3);
	}
	body.home .jobs-classifieds__lead-role,
	body.home .home-block--half.home-block--jobs .jobs-classifieds__lead-role {
		font-size: 0.9rem;
	}

	body.home .jobs-classifieds__index-role { font-size: 0.82rem; line-height: 1.15; }
	body.home .jobs-classifieds__meta { font-size: 0.6rem; gap: var(--s-1); }
	body.home .jobs-classifieds__promoted,
	body.home .jobs-classifieds__new { font-size: 0.55rem; padding: 1px 5px; }
	body.home .jobs-classifieds__more { font-size: 0.6rem; margin-top: var(--s-2); }


  body.home .most-read__link {
    font-size: 0.9rem;
  }

  body.home .most-read__footer {
    font-size: 0.6rem;
  }

  body.home .most-read__num { font-size: 1.2rem; }

    /* Both story-grid orientations collapse to image-left rows on phones;
       prominence is delegated to splash / single-story (image-on-top). */
    body.home .story-grid--horizontal,
    body.home .story-grid--vertical {
        display: flex;
        flex-direction: column;
        gap: var(--s-2);
    }
    body.home .story-grid .story-card {
        flex-direction: row;
        align-items: center;
        gap: var(--s-4);
        border-bottom: 1px solid var(--border-dark);    
    }
    body.home .story-grid .story-card__body {
        display: flex;
        flex-direction: column;
        gap: var(--s-1);
        flex: 1 1 auto;
        min-width: 0;
    }
    body.home .story-grid .story-card .standfirst { display: none; }
    body.home .story-grid .story-card__media { 
      flex: 0 0 40%; 
      margin-bottom: 0;
      padding: var(--s-4);
    }
    body.home .story-grid .story-card .story-card__img {
        height: auto;
        aspect-ratio: 3 / 2;
        box-sizing: border-box;
    }
    body.home .story-grid .story-card .hed { 
      margin: 0; min-height: 0;
      font-size: var(--fs-hed-mobile);
    }

    body.home .ad-block {
      padding: var(--s-1);
      margin: 0px;
    }
}

@media (max-width: 480px) {
	

	/* A full-width most-read list drops from two numbered columns to one. */
  body.home .home-block--full.home-block--most-read-generated .most-read ol,
	body.home .home-block--full.home-block--most-read .most-read ol {
		column-count: 1;
	}

	/* Slightly smaller numeral so it doesn't dominate the narrow row. */
}