/* ==========================================================================
   SUDAIR PHARMA — EDITORIAL
   News, Articles, and the individual story pages.

   A NEW design, not an extension of the existing page components. It shares
   only the brand: the green, the neutral ramp, Roboto, and the container width.
   Everything structural here is its own.

   The governing idea is INSTITUTIONAL RESTRAINT — the register a global
   pharmaceutical company writes in. That is expressed as a set of rules the
   whole file obeys:

     · Almost no corner radius. 2px, and 0 on the large photography. Rounded
       cards are what makes a corporate page read as a blog.
     · No drop shadows anywhere. Separation comes from hairline rules and
       white space, which is how print editorial does it.
     · No gradients as decoration. One flat ink panel for the lead story.
     · Structure carried by RULES and MEASURE, not by boxes. Most of this page
       is text on white, divided by 1px lines.
     · Green is an accent, never a fill. It marks a category, a rule, a hover —
       it never becomes a coloured card.

   Scoped under .sud-ed, which exists only on the editorial pages.
   ========================================================================== */

.sud-ed {
	--ed-green: var(--sud-green-700, #006344);
	--ed-green-deep: var(--sud-green-900, #00301F);
	--ed-ink: var(--sud-ink, #0B1F17);
	--ed-body: var(--sud-body, #46574F);
	--ed-muted: var(--sud-muted, #5C6E66);
	--ed-line: var(--sud-line, #E3EAE6);
	--ed-line-strong: #C9D6CF;
	--ed-paper: #FFFFFF;
	--ed-paper-2: var(--sud-surface-2, #F4F8F6);
	--ed-ease: cubic-bezier(.22, 1, .36, 1);

	/* One measure for running text, used by every body column in the file. */
	--ed-measure: 68ch;

	--ed-gutter: clamp(1.25rem, 4vw, 2.5rem);

	color: var(--ed-body);
	font-family: var(--sud-font-body, Roboto, Arial, sans-serif);
}

.sud-ed *,
.sud-ed *::before,
.sud-ed *::after { box-sizing: border-box; }

.sud-ed__wrap {
	inline-size: 100%;
	max-inline-size: var(--sud-maxw, 1240px);
	margin-inline: auto;
	padding-inline: var(--ed-gutter);
}

/* Wide rail for the lead story, which is allowed to break the text column. */
.sud-ed__wrap--wide { max-inline-size: 1440px; }

/* --------------------------------------------------------------------------
   TYPE

   One display face at several weights. The hierarchy is carried by size,
   weight and letter-spacing rather than by colour, so the page still reads
   correctly in greyscale — a decent test of whether a corporate layout is
   actually structured or just tinted.
   -------------------------------------------------------------------------- */

.sud-ed .sud-ed__kicker {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0 0 1.25rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .18em;
	/* text-transform: uppercase removed — site uses normal capitalization */
	color: var(--ed-green);
}

.sud-ed .sud-ed__kicker::after {
	content: '';
	flex: 1 1 auto;
	block-size: 1px;
	background: var(--ed-line);
}

.sud-ed .sud-ed__masthead {
	font-size: clamp(2.25rem, 4.6vw, 4rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -.03em;
	color: var(--ed-ink);
	margin: 0;
	text-wrap: balance;
}

.sud-ed .sud-ed__standfirst {
	max-inline-size: 58ch;
	margin: 1.25rem 0 0;
	font-size: clamp(1.0625rem, 1.1vw, 1.25rem);
	line-height: 1.6;
	color: var(--ed-muted);
}

/* --------------------------------------------------------------------------
   METADATA

   Category and date. Set small, wide-tracked and in the muted neutral, with the
   category in green. This one pattern is reused on every card and every hero so
   the two sections read as one system.
   -------------------------------------------------------------------------- */

.sud-ed__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem .85rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .14em;
	/* text-transform: uppercase removed — site uses normal capitalization */
	line-height: 1.2;
}

.sud-ed__cat { color: var(--ed-green); }

.sud-ed__meta time,
.sud-ed__date { color: var(--ed-muted); font-weight: 600; letter-spacing: .1em; }

/* A hairline pip between category and date, drawn rather than typed. */
.sud-ed__meta .sud-ed__pip {
	inline-size: 3px;
	block-size: 3px;
	background: var(--ed-line-strong);
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   PAGE HEADER
   -------------------------------------------------------------------------- */

.sud-ed__head {
	padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2rem, 4vw, 3.25rem);
	border-block-end: 1px solid var(--ed-line);
}

/* --------------------------------------------------------------------------
   LEAD STORY

   The one moment of scale on the page. Asymmetric on purpose: the photograph
   takes the larger share and bleeds to the edge of the wide rail, while the
   copy sits in a narrow ink panel that overlaps it. The overlap is what stops
   this reading as a two-column template.
   -------------------------------------------------------------------------- */

.sud-ed__lead {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin-block: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 900px) {
	.sud-ed__lead {
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
		align-items: center;
	}
}

.sud-ed__lead-media {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--ed-paper-2);
	aspect-ratio: 16 / 10;
}

.sud-ed__lead-media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.2s var(--ed-ease);
}

/*
 * A flat ink panel, not a gradient. On desktop it pulls left over the image so
 * the two planes interlock; on small screens it simply follows the photograph.
 */
.sud-ed__lead-body {
	background: var(--ed-green-deep);
	color: #fff;
	padding: clamp(1.75rem, 3.4vw, 3.25rem);
}

@media (min-width: 900px) {
	.sud-ed__lead-body {
		margin-inline-start: clamp(-5rem, -4vw, -2rem);
		z-index: 1;
	}
}

.sud-ed__lead-body .sud-ed__cat { color: var(--sud-green-400, #85C66F); }
.sud-ed__lead-body .sud-ed__date { color: rgba(255, 255, 255, .7); }
.sud-ed__lead-body .sud-ed__meta .sud-ed__pip { background: rgba(255, 255, 255, .35); }

.sud-ed .sud-ed__lead-title {
	margin: 1rem 0 0;
	font-size: clamp(1.375rem, 2.1vw, 2rem);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -.02em;
	color: #fff;
	text-wrap: balance;
}

/*
 * The link inside the lead headline, which does not inherit that white on its
 * own.
 *
 * .sud-ed__link asks for `color: inherit`, but that is one class and Elementor's
 * kit styles every anchor at `.elementor-kit-5 a` — a class plus a tag, which
 * outranks it. So the anchor took the kit's link colour (#0B1F17) instead of the
 * heading's white. On the cards that goes unnoticed because their titles are
 * that same ink on a white background; on the lead it put near-black text on the
 * dark green panel and the headline all but disappeared.
 *
 * Two classes and a tag beats the kit's one class and a tag. Scoped to the lead
 * so the card titles keep rendering exactly as they do now.
 */
.sud-ed .sud-ed__lead-title a,
.sud-ed .sud-ed__lead-title .sud-ed__link {
	color: inherit;
}

.sud-ed .sud-ed__lead-excerpt {
	margin: 1rem 0 0;
	font-size: var(--sud-text-base, 1rem);
	line-height: 1.7;
	color: rgba(255, 255, 255, .82);
}

/* --------------------------------------------------------------------------
   LINKS AND HOVER

   The whole card is the target, via a covering pseudo-element on the title
   link. That keeps one link in the accessibility tree instead of three
   competing ones pointing at the same story.
   -------------------------------------------------------------------------- */

.sud-ed__link {
	color: inherit;
	text-decoration: none;
	background: none;
}

.sud-ed__link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
}

.sud-ed__lead,
.sud-ed__card { position: relative; }

@media (hover: hover) {
	.sud-ed__lead:hover .sud-ed__lead-media img,
	.sud-ed__card:hover .sud-ed__card-media img { transform: scale(1.04); }
}

.sud-ed__link:focus-visible::after {
	outline: 3px solid var(--sud-green-500, #43B649);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   THE GRID

   Cards with no border, no radius and no shadow. They are separated by a rule
   above each one, which is what a broadsheet does — the line belongs to the
   column, not to a box.
   -------------------------------------------------------------------------- */

.sud-ed__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(2rem, 3.4vw, 3.25rem) clamp(1.5rem, 2.6vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sud-ed__card {
	display: flex;
	flex-direction: column;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--ed-line-strong);
}

.sud-ed__card-media {
	position: relative;
	margin: 0 0 1.15rem;
	overflow: hidden;
	background: var(--ed-paper-2);
	aspect-ratio: 3 / 2;
	order: -1;
}

.sud-ed__card-media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.2s var(--ed-ease);
}

.sud-ed .sud-ed__card-title {
	margin: .7rem 0 0;
	font-size: clamp(1.0625rem, 1.15vw, 1.1875rem);
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -.01em;
	color: var(--ed-ink);
	text-wrap: balance;
	transition: color .25s var(--ed-ease);
}

@media (hover: hover) {
	.sud-ed__card:hover .sud-ed__card-title { color: var(--ed-green); }
}

.sud-ed .sud-ed__card-excerpt {
	margin: .65rem 0 0;
	font-size: .9375rem;
	line-height: 1.65;
	color: var(--ed-muted);

	/* Three lines, so the grid keeps a steady rhythm without cutting content
	   out of the database — the full text is always on the story page. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   ARTICLES INDEX

   The Articles have no photography on the reference site — none at all, not
   even in the body. Rather than invent imagery or leave grey holes where
   pictures should be, this index is deliberately typographic: a numbered
   editorial list where the type IS the design.
   -------------------------------------------------------------------------- */

.sud-ed__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-start: 1px solid var(--ed-line-strong);
}

.sud-ed__entry {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 3rem);
	padding-block: clamp(1.75rem, 3.4vw, 2.75rem);
	border-block-end: 1px solid var(--ed-line);
	transition: background-color .3s var(--ed-ease);
}

.sud-ed__index {
	font-size: clamp(1.5rem, 2.4vw, 2.25rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--ed-line-strong);
	font-variant-numeric: tabular-nums;
	transition: color .3s var(--ed-ease);
}

@media (hover: hover) {
	.sud-ed__entry:hover { background-color: var(--ed-paper-2); }
	.sud-ed__entry:hover .sud-ed__index { color: var(--ed-green); }
	.sud-ed__entry:hover .sud-ed__entry-title { color: var(--ed-green); }
}

.sud-ed .sud-ed__entry-title {
	margin: .6rem 0 0;
	font-size: clamp(1.25rem, 1.9vw, 1.75rem);
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -.02em;
	color: var(--ed-ink);
	text-wrap: balance;
	transition: color .3s var(--ed-ease);
}

.sud-ed .sud-ed__entry-excerpt {
	margin: .8rem 0 0;
	max-inline-size: 62ch;
	font-size: var(--sud-text-base, 1rem);
	line-height: 1.7;
	color: var(--ed-muted);
}

.sud-ed__more {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-block-start: 1.1rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	/* text-transform: uppercase removed — site uses normal capitalization */
	color: var(--ed-green);
}

.sud-ed__more svg { inline-size: 14px; block-size: 14px; transition: transform .3s var(--ed-ease); }

@media (hover: hover) {
	.sud-ed__entry:hover .sud-ed__more svg { transform: translateX(4px); }
}

/* --------------------------------------------------------------------------
   FILTERS

   Text, a rule, and a green underline for the current one. No pills, no
   rounded chips — those are the blog tell.
   -------------------------------------------------------------------------- */

.sud-ed__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0 clamp(1.25rem, 2.4vw, 2.25rem);
	margin-block: clamp(2rem, 3.4vw, 3rem) clamp(1.5rem, 2.6vw, 2.25rem);
	border-block-end: 1px solid var(--ed-line);
}

/*
 * The category names are long — "Academic Partnerships & Talent Development" is
 * wider than a phone on its own — so below the grid breakpoint the row becomes a
 * scroll strip rather than wrapping into stacked multi-line buttons. It bleeds
 * into the page gutter so the first and last item sit flush with the text
 * column, and the scrollbar itself is suppressed because the row is short enough
 * to read as a strip.
 *
 * Left to wrap, this row was the one thing on the page overflowing the viewport.
 */
@media (max-width: 860px) {
	.sud-ed__filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;

		margin-inline: calc(var(--ed-gutter) * -1);
		padding-inline: var(--ed-gutter);
	}

	.sud-ed__filters::-webkit-scrollbar { display: none; }

	.sud-ed .sud-ed__filter {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}

/*
 * Two classes, not one. The global kit styles buttons at .elementor-kit-5 button
 * — a tag-plus-class selector that outranks any single class — and gives them a
 * 20px radius and a fill. Left alone, every filter renders as a rounded pill,
 * which is the exact blog-chip look this design is meant to avoid.
 */
.sud-ed .sud-ed__filter {
	position: relative;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	min-block-size: 0;
	inline-size: auto;
	padding-block: .85rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	/* text-transform: uppercase removed — site uses normal capitalization */
	color: var(--ed-muted);
	text-decoration: none;
	background: none;
	border: 0;
	cursor: pointer;
	transition: color .25s var(--ed-ease);
}

.sud-ed .sud-ed__filter::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block-end: -1px;
	block-size: 2px;
	background: var(--ed-green);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--ed-ease);
}

.sud-ed .sud-ed__filter[aria-current="true"],
.sud-ed .sud-ed__filter:hover { color: var(--ed-ink); }

/*
 * WHITE ON THE HOVER PILL.
 *
 * The green pill under a hovered filter is not drawn here — it comes from the
 * global kit, which styles `.elementor-kit-5 button:hover, ... button:focus` at
 * (0,2,1). That outranks this file's `.sud-ed .sud-ed__filter` at (0,2,0), which
 * is why the rule above deliberately re-states `border-radius: 0` and
 * `background: none` for the resting state and still loses on hover.
 *
 * The colour never followed the fill: the rule directly above paints the label
 * `--ed-ink` on hover, which is near-black, so the hovered item was dark type on
 * a dark green ground. The count went with it, sitting at `--ed-line-strong`,
 * a pale grey that is no better against green.
 *
 * Both are turned white here — label and count — so the pill reads the way the
 * kit's own buttons do. Nothing else moves: the fill, the radius, the spacing,
 * the type and the active underline are all left to the rules that own them.
 *
 * Written at four classes (five for the count) to clear the (0,3,0) hover rule
 * immediately above, which would otherwise win on source order.
 */
.sud-ed .sud-ed__filters .sud-ed__filter:hover {
	color: #fff;
}

.sud-ed .sud-ed__filters .sud-ed__filter:hover .sud-ed__count {
	color: #fff;
}

.sud-ed .sud-ed__filter[aria-current="true"]::after { transform: scaleX(1); }

.sud-ed__count {
	margin-inline-start: .4rem;
	font-size: .6875rem;
	color: var(--ed-line-strong);
	font-variant-numeric: tabular-nums;
}

/* Hidden by the filter script. */
.sud-ed__card[hidden],
.sud-ed__entry[hidden] { display: none; }

.sud-ed__empty {
	padding-block: clamp(3rem, 6vw, 5rem);
	text-align: center;
	color: var(--ed-muted);
}

/* --------------------------------------------------------------------------
   SINGLE STORY
   -------------------------------------------------------------------------- */

.sud-ed__article { padding-block-end: clamp(3rem, 6vw, 6rem); }

.sud-ed__breadcrumb {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding-block: clamp(1.25rem, 2.4vw, 2rem);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .08em;
	/* text-transform: uppercase removed — site uses normal capitalization */
	color: var(--ed-muted);
}

.sud-ed__breadcrumb a { color: var(--ed-muted); text-decoration: none; }
.sud-ed__breadcrumb a:hover { color: var(--ed-green); }
.sud-ed__breadcrumb svg { inline-size: 12px; block-size: 12px; opacity: .5; }

/*
 * The headline sits in the text measure, not full-bleed. A 60ch headline over a
 * 1240px page is the single most common way corporate editorial goes wrong.
 */
.sud-ed__article-head {
	max-inline-size: var(--ed-measure);
	padding-block-end: clamp(1.75rem, 3vw, 2.5rem);
}

/*
 * NEWS DETAIL HEAD — the full container width, not the text measure.
 *
 * The rule above is the editorial default, and the note on it still stands for
 * the Articles: a headline set across a 1240px page is hard to read back to.
 * For the news stories the client asked for the opposite, and asked for it
 * specifically — the category, the date, the headline and the standfirst should
 * run the width the breadcrumb and the pager already run, so the top of the
 * story lines up with the container instead of stopping two thirds of the way
 * across it.
 *
 * `none`, not a number. The head is a plain block inside .sud-ed__wrap, so with
 * no cap it simply fills that wrap's content box — which is exactly where the
 * breadcrumb and the pager already sit, to the pixel, at every width. Nothing
 * here has to know what that width is, or be kept in step with it.
 *
 * Measured, with this page's headline:
 *
 *     1440   796 -> 1192px    headline 3 lines -> 2, standfirst 5 -> 4
 *     1024   697 ->  945px    headline 3 lines -> 2, standfirst 6 -> 4
 *      768   691 ->  691px    unchanged
 *      390   294 ->  294px    unchanged
 *
 * Below about 900px the column is already narrower than 68ch, so the cap was
 * never what decided the width and this rule does nothing at all. The phone
 * keeps the wrap's own side padding and the text never reaches the edge.
 *
 * The picture frame (.sud-ed__hero, 677px) and the story body (.sud-ed__body,
 * 846px) are untouched: they carry caps of their own and keep them.
 *
 * EVERY STORY ON THIS TEMPLATE, not only the news. This began as a news-only
 * rule; the Articles were then asked for the same treatment, so the `--news`
 * qualifier came off rather than being duplicated. The Articles keep their own
 * larger headline size — that is still news-only, below.
 */
.sud-ed .sud-ed__article-head {
	max-inline-size: none;
}

/*
 * TRACKING is .2px, not the -.03em this rule carried.
 *
 * At the sizes these headlines run — 48px on an Article, 32px on a news story —
 * -.03em is a little over a pixel of NEGATIVE letter-spacing, and both read as
 * cramped once the headline had the full container width to sit in. A fixed
 * .2px opens them very slightly and, being fixed rather than an em, stays the
 * same hairline at every size in the clamp instead of growing with the type.
 *
 * Family, size, weight, leading, colour and the balanced wrapping are all
 * unchanged.
 */
.sud-ed .sud-ed__article-title {
	margin: 1rem 0 0;
	font-size: clamp(1.875rem, 3.4vw, 3rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: .2px;
	color: var(--ed-ink);
	text-wrap: balance;
}

/*
 * NEWS DETAIL HEADLINE — one step smaller, and responsive all the way down.
 *
 * The rule above tops out at 48px and never goes below 30px. News headlines
 * here are long — 60 to 208 characters — so at 48px a typical one ran to five
 * lines on desktop, and because 30px is the floor, a phone column of ~264px
 * took the same headline to nine lines at 375px and eleven at 320px. The
 * headline, not the story, filled the first screen.
 *
 *     viewport     before           after
 *     1440px       48px  5 lines    32px  3 lines
 *     1024px       34.8px 4 lines   29.9px 3 lines
 *      768px       30px  3 lines    26.8px 3 lines
 *      375px       30px  9 lines    24px  7 lines
 *                                            (118-character headline)
 *
 * 24px -> 32px, scaling with the viewport between. The top of the range is the
 * approved reference: the same headline in three balanced lines. The bottom
 * keeps a clear step over the 17px standfirst beneath it on a phone.
 *
 * ONLY the size. Weight 800, the tracking, the 1.1 leading, the colour, the
 * balanced wrapping and the spacing around it are all the rule above's — the
 * .2px tracking now lives there because the Articles were asked for it too.
 *
 * News stories only — `--news` is set by sud_ed_single(). This is the one thing
 * that stays news-only: the Articles keep their larger 48px headline.
 */
.sud-ed .sud-ed__article--news .sud-ed__article-title {
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
}

.sud-ed .sud-ed__article-standfirst {
	margin: 1.25rem 0 0;
	font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
	line-height: 1.65;
	color: var(--ed-muted);
	font-weight: 400;
}

/*
 * The story's own picture, square corners, no shadow.
 *
 * NO FIXED RATIO HERE, DELIBERATELY.
 *
 * This box held 21:9 and filled it with `cover`, which reads well when every
 * picture is a wide press shot and badly otherwise: the photographs on these
 * stories are mostly 3:2, so a third of each was cut away, top and bottom, on
 * the story page — while the same picture sat whole on the index.
 *
 * So the picture sets the height and the column sets the width. Whatever shape
 * it arrives in, all of it is shown, at its own proportions, scaling with the
 * measure. The index cards keep their own ratios; this is the story page only.
 */
.sud-ed__hero {
	/*
	 * A FRAME, NOT A BANNER.
	 *
	 * This box used to take the wide rail — 1377px against a 796px reading
	 * measure — so a 3:2 photograph arrived 919px tall and owned the screen
	 * before a word of the story was read. It is now a framed media block set
	 * in from the measure and centred on it, so the picture illustrates the
	 * story rather than announcing it.
	 *
	 * Sized from --ed-measure, the article's own reading width, so the frame
	 * keeps its relationship to the TEXT at every width rather than to the
	 * window. 85% of the measure here; the breakpoints below give it the rest
	 * as the column narrows — tablet and phone were already close to the full
	 * column, so they gain less than the desktop does.
	 *
	 * The ground shows as the padding around the picture — that is the white
	 * space in the reference, not an extra panel.
	 */
	inline-size: 100%;
	max-inline-size: calc(var(--ed-measure) * 0.85);
	margin: 0 auto clamp(2rem, 4vw, 3.5rem);

	padding: clamp(0.7rem, 1.3vw, 1.15rem);
	border-radius: clamp(24px, 2.2vw, 32px);
	background: var(--ed-paper-2);
	box-shadow: 0 1px 2px rgba(11, 31, 23, .04), 0 14px 36px -18px rgba(11, 31, 23, .16);
	overflow: hidden;
	text-align: center;
}

.sud-ed__hero img {
	inline-size: 100%;
	block-size: auto;
	display: block;
	margin-inline: auto;

	/*
	 * The inner corner, a little tighter than the frame's, so the two curves
	 * sit concentrically rather than fighting.
	 */
	border-radius: clamp(14px, 1.4vw, 20px);

	/*
	 * No height cap. One was tried at 82vh and it fired on ordinary landscape
	 * pictures — a 3:2 at this measure is taller than that — which put white
	 * bars down each side instead. The height follows the picture, full stop.
	 * `contain` does nothing while that holds; it is here so that if anything
	 * ever constrains this box, the frame is letterboxed rather than cropped.
	 */
	object-fit: contain;
}

/*
 * As the column narrows the frame is allowed more of it, and keeps its corner
 * throughout. By the time the measure is the whole screen the frame is too,
 * less its own gutter.
 */
@media (max-width: 1100px) {
	.sud-ed__hero { max-inline-size: calc(var(--ed-measure) * 0.95); }
}

@media (max-width: 899px) {
	.sud-ed__hero { max-inline-size: 100%; }
}

@media (max-width: 640px) {
	.sud-ed__hero {
		max-inline-size: 100%;
		padding: 0.6rem;
		border-radius: 24px;
	}

	.sud-ed__hero img { border-radius: 16px; }
}

/*
 * The body. This is the one place where the reference's own HTML is printed
 * unchanged, so the rules here have to cover whatever it contains rather than
 * assume a shape.
 */
.sud-ed__body {
	max-inline-size: var(--ed-measure);
	font-size: clamp(1.0625rem, 1.05vw, 1.125rem);
	line-height: 1.78;
	color: var(--ed-body);
}

/*
 * NEWS DETAIL BODY — the container width, the same as the head above it.
 *
 * Second half of the change made at .sud-ed__article-head: the category, date,
 * headline and standfirst now run the full width of .sud-ed__wrap, and the
 * story underneath was still stopping at the 68ch measure, so the top of the
 * page and the rest of it no longer lined up. Both edges now agree.
 *
 * `none` again, for the same reason: the body is a plain block inside the same
 * wrap, so with no cap it lands on exactly the edges the head, the breadcrumb
 * and the pager already use, at every width, with no number to keep in step.
 *
 *     1440   846 -> 1192px        1024   846 -> 945px
 *      768   692 ->  692px         390   294 -> 294px
 *
 * Below about 900px the column is narrower than the measure anyway, so this
 * does nothing there and the phone keeps the wrap's own side padding.
 *
 * The picture frame is NOT affected. .sud-ed__hero sits outside this element
 * and keeps its own cap, which is still derived from --ed-measure. Nor is the
 * pager, which was already full width. None of the 23 news bodies carries an
 * inline image, so there is nothing inside here that a wider column enlarges.
 *
 * EVERY STORY ON THIS TEMPLATE, for the same reason as the head above: the
 * Articles were asked for the same width, so the `--news` qualifier came off.
 * Neither Article carries an inline image either — checked — so there is still
 * nothing inside the column that a wider measure enlarges.
 */
.sud-ed .sud-ed__body {
	max-inline-size: none;
}

.sud-ed__body > * + * { margin-block-start: 1.4em; }

.sud-ed__body p { margin: 0; }

.sud-ed__body h2,
.sud-ed__body h3,
.sud-ed__body h4 {
	color: var(--ed-ink);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.015em;
	margin-block-start: 2em;
}

.sud-ed__body h2 { font-size: 1.5em; }
.sud-ed__body h3 { font-size: 1.25em; }
.sud-ed__body h4 { font-size: 1.1em; }

.sud-ed__body a {
	color: var(--ed-green);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.sud-ed__body ul,
.sud-ed__body ol { padding-inline-start: 1.4em; }
.sud-ed__body li + li { margin-block-start: .5em; }
.sud-ed__body li::marker { color: var(--ed-green); }

.sud-ed__body img {
	max-inline-size: 100%;
	block-size: auto;
	display: block;
}

.sud-ed__body blockquote {
	margin-inline: 0;
	padding-inline-start: clamp(1.25rem, 2.4vw, 2rem);
	border-inline-start: 2px solid var(--ed-green);
	font-size: 1.15em;
	line-height: 1.6;
	color: var(--ed-ink);
}

.sud-ed__body strong,
.sud-ed__body b { color: var(--ed-ink); font-weight: 700; }

/* The reference bodies carry inline colour and font-size from their editor.
   Those are neutralised so the type system holds, without touching the words. */
.sud-ed__body [style*="color"] { color: inherit !important; }
.sud-ed__body [style*="font-size"] { font-size: inherit !important; }
.sud-ed__body [style*="font-family"] { font-family: inherit !important; }

/* --------------------------------------------------------------------------
   STORY FOOTER — previous / next
   -------------------------------------------------------------------------- */

.sud-ed__pager {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin-block-start: clamp(3rem, 6vw, 5rem);
	background: var(--ed-line);
	border-block: 1px solid var(--ed-line);
}

.sud-ed__pager-link {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.25rem, 2.2vw, 2rem);
	background: var(--ed-paper);
	text-decoration: none;
	transition: background-color .3s var(--ed-ease);
}

.sud-ed__pager-link:hover { background: var(--ed-paper-2); }
.sud-ed__pager-link--next { text-align: end; align-items: flex-end; }

.sud-ed__pager-label {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .14em;
	/* text-transform: uppercase removed — site uses normal capitalization */
	color: var(--ed-green);
}

.sud-ed .sud-ed__pager-title {
	margin: 0;
	font-size: clamp(.9375rem, 1.05vw, 1.0625rem);
	font-weight: 700;
	line-height: 1.35;
	color: var(--ed-ink);
}

/* An empty half keeps the grid symmetrical at the ends of the run. */
.sud-ed__pager-link--empty { pointer-events: none; }

/* --------------------------------------------------------------------------
   RESPONSIVE

   Each breakpoint is a deliberate layout, not a scaled-down desktop: the lead
   story unstacks its overlap, the grid steps 3 -> 2 -> 1, and the numbered
   list drops its numeral rail on phones where it would eat the measure.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.sud-ed__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
	/* The overlap only works when there are two columns to overlap. */
	.sud-ed__lead-media { aspect-ratio: 16 / 9; }
	.sud-ed__lead-body { margin-inline-start: 0; }


	.sud-ed__pager { grid-template-columns: minmax(0, 1fr); }
	.sud-ed__pager-link--next { text-align: start; align-items: flex-start; }
}

@media (max-width: 640px) {
	.sud-ed__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }

	/* Photography gets wider on a phone, not narrower — a 3:2 at full width
	   still reads, a shrunken 3-up does not. */
	.sud-ed__card-media { aspect-ratio: 16 / 10; }

	.sud-ed__lead-media { aspect-ratio: 4 / 3; }

	/* The numeral rail costs more than it gives at this width. */
	.sud-ed__entry { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
	.sud-ed__index { font-size: 1rem; }

	.sud-ed__filters { gap: 0 1.25rem; }
	.sud-ed__filter { font-size: .75rem; padding-block: .7rem; }
}

@media (min-width: 1600px) {
	/* On very large screens the measure holds and the rail widens, rather than
	   the type inflating to fill the window. */
	.sud-ed { --ed-measure: 72ch; }
}

@media (prefers-reduced-motion: reduce) {
	.sud-ed *,
	.sud-ed *::before,
	.sud-ed *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}

	.sud-ed__lead:hover .sud-ed__lead-media img,
	.sud-ed__card:hover .sud-ed__card-media img { transform: none; }
}