@layer components {
	.news { padding-top: var(--section-gap); }
	.news__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }

	/* ---- Lead story: black photographic card (design DNA) ---- */
	.story-lead {
		position: relative;
		background: var(--black-deep);
		color: var(--white-text);
		max-width: 100%;
		aspect-ratio: var(--ratio-hero-mobile);
		overflow: hidden;
		isolation: isolate;
	}
	.story-lead__link { display: block; height: 100%; }
	.story-lead__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: -2; }
	.story-lead__fade { position: absolute; inset: 0; background: var(--overlay-card-floor); z-index: -1; }
	.story-lead__body {
		position: absolute; left: 0; right: 0; bottom: 0;
		display: flex; flex-direction: column; align-items: flex-start;
		padding: var(--pad-card);
	}
	.story-lead__title {
		margin-top: var(--sp-3);
		font-family: var(--font-display);
		font-weight: var(--fw-black);
		font-size: var(--fs-h2);
		line-height: var(--lh-display);
		letter-spacing: var(--ls-tight);
		text-transform: uppercase;
	}
	.story-lead__subtitle {
		margin-top: var(--sp-2);
		font-size: var(--fs-h3);
		font-weight: var(--fw-semi);
		line-height: var(--lh-tight);
		letter-spacing: 0.005em;
	}
	.story-lead__deck {
		margin-top: var(--sp-3);
		max-width: 44rem;
		font-family: var(--font-serif);
		font-size: var(--fs-small);
		line-height: var(--lh-serif);
		color: var(--on-dark-muted);
	}
	.story-lead__body .btn { margin-top: var(--sp-4); }

	/* ---- Secondary stack: white cards, image left ---- */
	.news__stack { display: grid; gap: var(--sp-4); }
	.story-row { background: var(--white-card); border: var(--bw-hair) solid var(--gray-line); box-shadow: var(--shadow-card); }
	.story-row__link { display: grid; grid-template-columns: 38% 1fr; height: 100%; }
	.story-row__media { position: relative; overflow: hidden; min-height: 140px; }
	.story-row__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
	.story-row__body { display: flex; flex-direction: column; align-items: flex-start; padding: var(--pad-card); gap: 6px; color: var(--gray-ink); }
	.story-row__title {
		font-family: var(--font-display);
		font-weight: var(--fw-extra);
		font-size: var(--fs-h4);
		line-height: var(--lh-tight);
		letter-spacing: 0.005em;
	}
	.story-row__deck { font-family: var(--font-serif); font-size: var(--fs-small); line-height: var(--lh-serif); color: var(--gray-body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
	.story-row__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.story-row__body .textlink { margin-top: auto; padding-top: 6px; }

	@media (min-width: 768px) {
		.story-lead { aspect-ratio: var(--ratio-lead); }
		.news__stack { grid-template-columns: 1fr; }
	}

	@media (min-width: 1024px) {
		.news__grid { grid-template-columns: 58fr 42fr; align-items: start; }
		/* The lead card owns the height. The stack is boxed to it and can never push it taller. */
		.story-lead { aspect-ratio: var(--ratio-lead); height: auto; }
		.news__stack { height: 0; min-height: 100%; align-self: stretch; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
		.story-row { overflow: hidden; min-height: 0; }
		.story-row__link { grid-template-columns: minmax(170px, 42%) 1fr; }
		.story-row__media { min-height: 0; }
		.story-row__body { padding: 14px var(--sp-4); gap: 3px; }
		.story-row__deck { display: none; }
		.story-row__body .textlink { padding-top: 4px; }
	}
	@media (min-width: 1280px) {
		.story-row__link { grid-template-columns: minmax(200px, 44%) 1fr; }
		.story-row__body { padding: var(--sp-4) 20px; gap: 4px; }
		.story-row__deck { display: -webkit-box; -webkit-line-clamp: 2; font-size: 0.9375rem; line-height: 1.5; }
	}
}