/* ============================================================
   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 .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);
}



/* 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 .most-read {
	border-left: 1px solid var(--ink);
	padding-left: var(--s-5);
}
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 .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) it stretches to a taller neighbour and
   the image grows to fill the gap, but is also capped by --single-story-cap so
   its own hero image can't tower over a shorter neighbour (e.g. a lead-pair)
   and strand a big band of whitespace beside it. object-fit: cover crops the
   image at both extremes rather than squashing it. */
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 {
		flex: 1 1 auto;
		min-height: 0;
		margin-bottom: var(--s-2);
	}
	body.home .home-block--half.home-block--single-story .single-story__img {
		height: 100%;
		aspect-ratio: auto;
		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 .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;
  }

	/* ---- 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);
  }


  /* 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 .most-read ol {
		column-count: 1;
	}

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