/*
 * Dr. Suzanne — media landing (/media/)
 *
 * Loaded only on the drs_media post type archive, never on the term
 * archives, which keep the paginated grid from main.css. Tokens, buttons,
 * containers and the header all come from main.css; this file only
 * describes the landing's own sequence.
 *
 * 0. Page tone
 * 1. Filter chips + shared card frame
 * 2. Featured story
 * 3. Television reel + podcast panel
 * 4. Newsletters + quote
 * 5. Articles
 * 6. Responsive
 */

/* =========================== 0. Page tone =========================== */
/*
 * This page runs on a lighter, cooler ground than the site cream
 * (#F1E9D6). It is painted, not swapped at the token: --color-cream is
 * also the *text* colour on the dark podcast panel and on the mobile
 * menu, so redefining it here would take those down with the background.
 */
body.post-type-archive-drs_media {
	--drs-page-bg: #F5F2EA;
	/* Also on the body itself, so rubber-band scrolling past either end
	   does not flash the old cream from behind the page. */
	background: var(--drs-page-bg);
	overflow-x: hidden;
}

.drs-media-archive {
	background: var(--drs-page-bg);
	overflow-x: clip;
}

/* Keep the media hero genuinely viewport-wide even if another theme rule or
   a cached container width is applied at a large desktop breakpoint. */
.drs-media-archive .drs-mediabanner {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}
.drs-media-archive .drs-mediabanner__stage,
.drs-media-archive .drs-mediabanner__stage picture,
.drs-media-archive .drs-mediabanner__stage img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
}

/* The logo strip paints its own cream, so it needs telling separately —
   otherwise it reads as a band of the old colour across the page. */
.drs-media-archive .drs-logo-carousel {
	background: var(--drs-page-bg);
}

/*
 * The header here is the transparent hero variant that turns solid on
 * scroll, and it turns *site* cream — a visibly warmer bar sitting over
 * the new ground. Retoned for this page only; every other page keeps the
 * original, since this stylesheet loads nowhere else.
 */
.site-header.is-scrolled {
	background: var(--drs-page-bg);
}

/* ========================= 1. Filter chips ========================== */
/* On the landing the chips sit on the cream, directly under the logos. */
.drs-media-archive .drs-media-filters {
	padding-block: var(--space-md) 0;
}
.drs-media-archive .drs-media-filters__list {
	/* One track per chip, all equal, filling the container edge to edge.
	   Auto-flow instead of a fixed column count, so adding or retiring a
	   media type re-splits the row on its own. */
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	/* main.css closes this row with a rule underneath; here the chips
	   carry the shape and the line just sits there. */
	border-bottom: 0;
}
.drs-media-archive .drs-media-filters__link {
	/* Fills its track, so every chip ends up the same width. */
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.6rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-family: var(--font-body);
	font-size: var(--text-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-green);
	background: transparent;
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.drs-media-archive .drs-media-filters__link:hover,
.drs-media-archive .drs-media-filters__link:focus-visible {
	background: var(--color-cream-light);
	border-color: var(--color-green-soft);
}
.drs-media-archive .drs-media-filters__link.is-active {
	background: var(--color-green);
	border-color: var(--color-green);
	color: var(--color-cream);
}
.drs-media-archive .drs-media-filters__count {
	font-size: 0.85em;
	opacity: 0.6;
}

/* ---------------------- Shared card frame -------------------------- */
/*
 * One frame for the three grids — clips, issues and articles. Declared
 * once rather than three times because the whole point is that they stay
 * identical: the moment the padding drifts between them the page stops
 * reading as one system.
 *
 * Safe on the reel despite its cards being sized by calc(): box-sizing is
 * border-box site-wide, so the border and padding come out of the
 * computed flex-basis instead of adding to it.
 */
.drs-clip,
.drs-issue,
.drs-read {
	display: flex;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-medium);
	padding: 0.55rem 0.55rem 0.75rem;
	transition: border-color var(--transition-fast);
}
.drs-clip:hover,
.drs-clip:focus-within,
.drs-issue:hover,
.drs-issue:focus-within,
.drs-read:hover,
.drs-read:focus-within {
	border-color: var(--color-green-soft);
}

/* A step tighter than the frame's radius: what makes an inset picture
   look seated in the card rather than pasted onto it. */
.drs-clip__media,
.drs-issue__media,
.drs-read__media {
	border-radius: var(--radius-small);
}

/* The outward mark, filled rather than outlined — at this size an
   outlined disc vanishes against the card's own border. */
.drs-clip__mark,
.drs-issue__mark,
.drs-read__mark {
	display: grid;
	place-items: center;
	width: 27px;
	aspect-ratio: 1;
	border: 0;
	border-radius: 50%;
	background: var(--color-green);
	font-size: 0.78rem;
	color: var(--color-cream);
	transition: background var(--transition-fast), scale var(--transition-fast);
}
.drs-clip__hit:hover .drs-clip__mark,
.drs-clip__hit:focus-visible .drs-clip__mark,
.drs-issue__link:hover .drs-issue__mark,
.drs-issue__link:focus-visible .drs-issue__mark,
.drs-read__link:hover .drs-read__mark,
.drs-read__link:focus-visible .drs-read__mark {
	background: var(--color-ink);
	scale: 1.08;
}

/* ======================== 2. Featured story ========================= */
.drs-feature {
	padding-block: var(--space-lg);
	padding-bottom: 1rem;
}
.drs-feature__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(2rem, 4vw, 4.5rem);
	align-items: center;
}

.drs-feature__hit {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	color: inherit;
	font: inherit;
}
.drs-feature__frame {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius-large);
	background: var(--color-sand);
}
/* 16:9, the shape video stills actually come in — cropping a frame grab
   to a squarer box eats the sides of the shot. */
.drs-feature__frame img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.drs-feature__hit:hover .drs-feature__frame img,
.drs-feature__hit:focus-visible .drs-feature__frame img {
	transform: scale(1.03);
}

/* The disc is drawn rather than shipped as an asset: one circle, one
   triangle built from borders, so it stays crisp at any size. */
.drs-feature__play {
	position: absolute;
	inset: 50% auto auto 50%;
	translate: -50% -50%;
	width: clamp(56px, 5vw, 76px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgba(252, 251, 247, 0.92);
	box-shadow: 0 10px 30px rgba(23, 23, 19, 0.18);
	transition: transform var(--transition-fast), background var(--transition-fast);
}
.drs-feature__play::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 54%;
	translate: -50% -50%;
	border-style: solid;
	border-width: 0.55em 0 0.55em 0.9em;
	border-color: transparent transparent transparent var(--color-green);
	font-size: clamp(13px, 1.2vw, 17px);
}
.drs-feature__hit:hover .drs-feature__play,
.drs-feature__hit:focus-visible .drs-feature__play {
	transform: scale(1.08);
	background: var(--color-white);
}

.drs-feature__title {
	font-family: var(--font-display);
	font-size: var(--text-h2);
	line-height: 1.05;
	margin: 0.35em 0 0;
	text-wrap: balance;
}
.drs-feature__intro {
	max-width: 46ch;
	margin: 1.1rem 0 0;
	color: rgba(23, 23, 19, 0.78);
}
.drs-feature__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin: 1.3rem 0 0;
	font-size: var(--text-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-green);
}
.drs-feature__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-orange);
}
.drs-feature__outlet::before {
	content: "·";
	margin-right: 0.6rem;
}
.drs-feature__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.9rem;
}

/* ================ 3. Television reel + podcast panel ================ */
.drs-reel {
	padding-block: 1rem clamp(2rem, 3vw, 2.5rem);
	background: var(--drs-page-bg);
}
.drs-reel__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: stretch;
}
/* One half missing: the survivor takes the whole width. */
.drs-reel--solo .drs-reel__grid { grid-template-columns: minmax(0, 1fr); }

.drs-reel__head,
.drs-issues__head,
.drs-reads__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-sm);
	margin-bottom: 1.4rem;
}
.drs-reel__head,
.drs-pod__head,
.drs-issues__head,
.drs-reads__head {
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}
.drs-reel__head::after,
.drs-pod__head::after,
.drs-issues__head::after,
.drs-reads__head::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--color-border);
}
.drs-reel__tv,
.drs-pod-wrap {
	display: flex;
	min-width: 0;
	min-height: 0;
	flex-direction: column;
}
.drs-reel__heading,
.drs-issues__heading,
.drs-reads__heading {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	margin: 0;
}

/* Quieter than the site's default text link: at the top of a section the
   underline and the orange arrow compete with the heading beside them. */
.drs-reel__all,
.drs-issues__all,
.drs-reads__all {
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: rgba(69, 84, 56, 0.8);
}
.drs-reel__all:hover,
.drs-reel__all:focus-visible,
.drs-issues__all:hover,
.drs-issues__all:focus-visible,
.drs-reads__all:hover,
.drs-reads__all:focus-visible {
	color: var(--color-green);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.drs-reel__all .drs-textlink__arrow,
.drs-issues__all .drs-textlink__arrow,
.drs-reads__all .drs-textlink__arrow {
	margin-left: 0.35em;
	color: inherit;
}

/* ---- The reel ---- */
.drs-reel__rail {
	/* Cards are sized from these two so a whole number of them lands in
	   the track; the breakpoints then only change how many. Fractional
	   counts leave a sliver of the next card showing, which is what tells
	   the reader the strip scrolls. */
	--drs-clip-gap: clamp(0.75rem, 1.4vw, 1.15rem);
	--drs-clip-per-view: 4;

	display: flex;
	align-items: stretch;
	gap: var(--drs-clip-gap);
	margin: 0;
	padding: 0 0 0.5rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.drs-reel__rail::-webkit-scrollbar { display: none; }
.drs-reel__rail:focus-visible {
	outline: 2px solid var(--color-green);
	outline-offset: 4px;
}
.drs-clip {
	flex: 0 0 calc(
		(100% - (var(--drs-clip-per-view) - 1) * var(--drs-clip-gap))
		/ var(--drs-clip-per-view)
	);
	scroll-snap-align: start;
}
.drs-clip__hit {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	text-decoration: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
.drs-clip__mark {
	align-self: flex-end;
	margin-top: auto;
}
.drs-clip__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--color-sand);
}
/*
 * Portrait cards, as in the reference. Every still in the library is
 * landscape (4:3 or 16:9), so cover crops the sides rather than the top
 * and bottom: the full height of the frame survives — chyron included —
 * and roughly the outer 20% of each side is lost. Broadcast framing puts
 * the subject near the middle, so centring is the safest default; the
 * odd clip where she stands off to one side can be nudged per-post with
 * object-position if it ever matters.
 */
.drs-clip__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
	transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.drs-clip__hit:hover .drs-clip__media img,
.drs-clip__hit:focus-visible .drs-clip__media img { transform: scale(1.05); }

/* A thin ring over the still rather than a solid white disc: the disc
   punches a hole in the frame at this card size and reads heavier than
   anything else in the row. */
.drs-clip__play {
	position: absolute;
	inset: auto 0.55rem 0.55rem auto;
	width: 28px;
	aspect-ratio: 1;
	border: 1px solid rgba(252, 251, 247, 0.95);
	border-radius: 50%;
	background: rgba(23, 23, 19, 0.22);
	transition: background var(--transition-fast), scale var(--transition-fast);
}
.drs-clip__play::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 56%;
	translate: -50% -50%;
	border-style: solid;
	border-width: 4px 0 4px 6px;
	border-color: transparent transparent transparent var(--color-white);
}
.drs-clip__hit:hover .drs-clip__play,
.drs-clip__hit:focus-visible .drs-clip__play {
	background: rgba(23, 23, 19, 0.42);
	scale: 1.06;
}
/*
 * Titles are set in the display face rather than bold body copy: at this
 * size the bold sans reads as a UI label and crowds the card, which is
 * what made the row look untidy against the reference.
 *
 * Both the title and the outlet hold two lines and one line of space
 * whether or not they have anything to put there. Ten of the fourteen
 * clips carry no outlet, so without the reserved room the cards end at
 * different heights and the row loses its baseline.
 */
.drs-clip__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(2 * 1.3em);
	font-family: var(--font-display);
	font-size: 0.92rem;
	font-weight: 400;
	line-height: 1.25;
	color: var(--color-green);
}
.drs-clip__outlet {
	display: block;
	min-height: 1.35em;
	font-size: 0.62rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: rgba(23, 23, 19, 0.45);
}

.drs-reel__controls {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.85rem;
}
/* A miniature scrollbar: the thumb travels with the reel's real scroll
   position, which rail.js writes into --drs-rail-progress. Decorative
   for assistive tech — the arrows and the track itself already work. */
.drs-reel__progress {
	position: relative;
	flex: 0 0 auto;
	width: 90px;
	height: 2px;
	background: var(--color-border);
	overflow: hidden;
}
.drs-reel__progress::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 34%;
	/* Travels the remaining 66% of the track as the reel scrolls. */
	translate: calc(var(--drs-rail-progress, 0) * 194%) 0;
	background: var(--color-green);
	transition: translate 120ms linear;
}

/* ---- The podcast panel ---- */
.drs-pod {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	padding: clamp(1rem, 1.8vw, 1.5rem);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-medium);
	background: rgba(255, 255, 255, 0.28);
	color: var(--color-green);
}
.drs-pod__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.drs-pod__heading {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	margin: 0;
	color: var(--color-green);
}
.drs-pod__all {
	font-size: var(--text-label);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(241, 233, 214, 0.75);
	white-space: nowrap;
}
.drs-pod__all:hover,
.drs-pod__all:focus-visible {
	color: var(--color-cream);
	text-decoration: underline;
}

/*
 * Three episodes tall, the rest reached by scrolling. The height is set
 * so the fourth row is cut rather than hidden — a half-visible row is
 * what tells the reader there is more without needing a label for it.
 *
 * overscroll-behavior stops the page from taking over once the list hits
 * its end, which otherwise makes the panel feel like it swallows scrolls.
 */
.drs-pod__list {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: 0;
	/* Room for the scrollbar so it never sits on the play buttons. */
	padding: 0 0.5rem 0 0;
	list-style: none;
	flex: 1 1 auto;

	min-height: 0;
	max-height: none;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--color-green-soft) rgba(69, 84, 56, 0.08);
}
.drs-pod__list:focus-visible {
	outline: 2px solid var(--color-green);
	outline-offset: 3px;
}
.drs-pod__list::-webkit-scrollbar { width: 6px; }
.drs-pod__list::-webkit-scrollbar-track {
	background: rgba(69, 84, 56, 0.08);
	border-radius: 999px;
}
.drs-pod__list::-webkit-scrollbar-thumb {
	background: var(--color-green-soft);
	border-radius: 999px;
}
.drs-pod__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.85rem;
	padding: 0.5rem 0;
	border-top: 1px solid var(--color-border);
}
.drs-pod__item:first-child { border-top: 0; }

.drs-pod__art {
	display: block;
	width: 42px;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--radius-small);
	background: var(--color-sand);
}
.drs-pod__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.drs-pod__body { min-width: 0; }
.drs-pod__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.84rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	color: var(--color-green);
}
.drs-pod__title:hover,
.drs-pod__title:focus-visible {
	color: var(--color-green);
	text-decoration: underline;
}
.drs-pod__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.2rem;
	font-size: 0.7rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: rgba(69, 84, 56, 0.62);
}

.drs-pod__play {
	display: grid;
	place-items: center;
	width: 34px;
	aspect-ratio: 1;
	padding: 0;
	border: 1px solid var(--color-green-soft);
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background var(--transition-fast), border-color var(--transition-fast);
}
.drs-pod__play:hover,
.drs-pod__play:focus-visible {
	background: var(--color-green);
	border-color: var(--color-green);
}
.drs-pod__play-icon {
	width: 0;
	height: 0;
	margin-left: 2px;
	border-style: solid;
	border-width: 4px 0 4px 7px;
	border-color: transparent transparent transparent var(--color-green);
}
.drs-pod__play:hover .drs-pod__play-icon,
.drs-pod__play:focus-visible .drs-pod__play-icon {
	border-left-color: var(--color-cream);
}

.drs-pod__browse {
	display: block;
	margin-top: 1.2rem;
	padding: 0.8rem 1rem;
	border: 1px solid rgba(241, 233, 214, 0.4);
	border-radius: var(--radius-small);
	font-size: var(--text-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: var(--color-cream);
	transition: background var(--transition-fast), color var(--transition-fast);
}
.drs-pod__browse:hover,
.drs-pod__browse:focus-visible {
	background: var(--color-cream);
	color: var(--color-green);
}

/* ===================== 4. Newsletters + quote ======================= */
.drs-issues {
	padding-block: clamp(2rem, 3vw, 2.5rem) clamp(4.5rem, 6.5vw, 6.5rem);
}
/*
 * Same two-column split as the television/podcast band above, with the
 * same gap, so the quote box lands exactly under the podcast panel and
 * the cards line up with the reel. Matching by construction rather than
 * by a tuned fraction, which would drift as the gap is viewport-relative.
 */
.drs-issues__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: stretch;
	height: clamp(29rem, 35vw, 31rem);
}
.drs-issues__grid--nopanel { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.drs-issues__rail-wrap {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
}

.drs-issues__cards {
	--drs-issue-gap: clamp(1rem, 1.8vw, 1.6rem);
	--drs-issues-per-view: 2;
	display: flex;
	align-items: stretch;
	gap: var(--drs-issue-gap);
	margin: 0;
	padding: 0 0 0.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.drs-issues__cards::-webkit-scrollbar { display: none; }
.drs-issues__cards:focus-visible {
	outline: 2px solid var(--color-green);
	outline-offset: 4px;
}
.drs-issues__cards .drs-issue {
	flex: 0 0 calc(
		(100% - (var(--drs-issues-per-view) - 1) * var(--drs-issue-gap))
		/ var(--drs-issues-per-view)
	);
	scroll-snap-align: start;
}

.drs-issues__controls {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1rem;
}
.drs-issues__progress {
	position: relative;
	flex: 0 0 auto;
	width: 90px;
	height: 2px;
	background: var(--color-border);
	overflow: hidden;
}
.drs-issues__progress::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 34%;
	translate: calc(var(--drs-rail-progress, 0) * 194%) 0;
	background: var(--color-green);
	transition: translate 120ms linear;
}

.drs-issue__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	gap: 0.7rem;
	text-decoration: none;
	color: inherit;
}
.drs-issue__media {
	display: block;
	overflow: hidden;
	background: var(--color-sand);
}
.drs-issue__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.drs-issue__link:hover .drs-issue__media img,
.drs-issue__link:focus-visible .drs-issue__media img { transform: scale(1.05); }

/* Flex rather than the absolute positioning this used before: the mark
   is a row of its own at the end, so it lands on the card's floor no
   matter how many lines the title takes. */
.drs-issue__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	flex: 1 1 auto;
	padding-inline: 0.35rem;
}
.drs-issue__kicker {
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(69, 84, 56, 0.55);
}
/* Three lines maximum: one long headline in the row was pushing every
   other card — and the quote panel — down to match it. */
.drs-issue__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(3 * 1.24em);
	font-family: var(--font-display);
	font-size: clamp(1rem, 0.94rem + 0.25vw, 1.2rem);
	font-weight: 400;
	line-height: 1.24;
	color: var(--color-green);
}
/* Sits on the card floor whatever the title runs to. */
.drs-issue__mark {
	align-self: flex-end;
	margin-top: auto;
}

/* Full-width editorial close: the signature replaces the cut-out portrait,
   while quiet concentric lines give the green field depth without competing
   with the words. */
.drs-quote {
	position: relative;
	display: block;
	margin: clamp(3.5rem, 6vw, 6rem) 0 0;
	overflow: hidden;
	border-radius: var(--radius-large);
	background:
		radial-gradient(circle at 92% 15%, transparent 0 7.5rem, rgba(241, 233, 214, 0.08) 7.55rem 7.65rem, transparent 7.7rem 12rem, rgba(241, 233, 214, 0.06) 12.05rem 12.15rem, transparent 12.2rem),
		var(--color-green);
	color: var(--color-cream);
}

.drs-quote__body {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) minmax(12rem, 0.38fr);
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2.5rem);
	min-height: clamp(18rem, 25vw, 24rem);
	padding: clamp(2.5rem, 5vw, 5rem);
}
/*
 * The line-height is what keeps this honest: at 8rem the glyph's ink is
 * only the top third of the em box, so a normal line-height would reserve
 * ~150px of mostly empty space above the quote. Half the font size leaves
 * the mark its visual weight without the hole under it.
 */
.drs-quote__mark {
	display: block;
	align-self: start;
	font-family: var(--font-display);
	font-size: clamp(5rem, 8vw, 8rem);
	line-height: 0.65;
	color: var(--color-orange);
}
.drs-quote__text {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 2.75vw, 3.6rem);
	font-weight: 400;
	line-height: 1.03;
	letter-spacing: -0.035em;
	color: var(--color-cream);
}
.drs-quote__signature {
	display: block;
	width: min(100%, 20rem);
	height: auto;
	justify-self: end;
}

/* =========================== 5. Articles ============================ */
.drs-reads {
	padding-block: clamp(4.5rem, 6.5vw, 6.5rem);
	background: #eee9dd;
}
.drs-reads__grid {
	--drs-read-gap: clamp(1rem, 1.8vw, 1.6rem);
	--drs-reads-per-view: 4;
	display: flex;
	gap: var(--drs-read-gap);
	align-items: stretch;
	margin: 0;
	padding: 0 0 0.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.drs-reads__grid::-webkit-scrollbar { display: none; }
.drs-reads__grid:focus-visible {
	outline: 2px solid var(--color-green);
	outline-offset: 4px;
}
.drs-reads__grid .drs-read {
	flex: 0 0 calc(
		(100% - (var(--drs-reads-per-view) - 1) * var(--drs-read-gap))
		/ var(--drs-reads-per-view)
	);
	scroll-snap-align: start;
}
.drs-reads__controls {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1rem;
}
.drs-reads__progress {
	position: relative;
	flex: 0 0 auto;
	width: 90px;
	height: 2px;
	overflow: hidden;
	background: var(--color-border);
}
.drs-reads__progress::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 34%;
	translate: calc(var(--drs-rail-progress, 0) * 194%) 0;
	background: var(--color-green);
	transition: translate 120ms linear;
}
/* Lead stories keep their typographic emphasis without forcing their
   cards to span two rows and creating a large empty lower half. */
.drs-read--lead { grid-row: auto; }

/* width, not just height: the card is now a flex row and a lone item in
   it sizes to its content, so without this the link stops short of the
   frame and the picture never reaches the card's edges. */
.drs-read__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	gap: 0.7rem;
	text-decoration: none;
	color: inherit;
}
.drs-read__media {
	display: block;
	overflow: hidden;
	background: var(--color-sand);
}
.drs-read__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* A shared ratio keeps every article card compact and orderly. */
.drs-read--lead .drs-read__media img { aspect-ratio: 4 / 3; }
.drs-read__link:hover .drs-read__media img,
.drs-read__link:focus-visible .drs-read__media img { transform: scale(1.04); }

.drs-read__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	flex: 1 1 auto;
}
.drs-read__kicker {
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-green-soft);
}
.drs-read__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--font-body);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.3;
	min-height: calc(3 * 1.3em);
}
.drs-read--lead .drs-read__title { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.3rem); }

.drs-read__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: 0.7rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: rgba(23, 23, 19, 0.5);
}

/* -------------------- Unified editorial typography ----------------- */
/* Media follows the site's Galeria Sans headings and Proxima Nova labels. */
.drs-mediabanner__title,
.drs-feature__title,
.drs-reel__heading,
.drs-pod__heading,
.drs-issues__heading,
.drs-reads__heading {
	font-family: "Galeria Sans", "Helvetica Neue", Arial, sans-serif;
	font-weight: 500;
	letter-spacing: -0.025em;
}

.drs-quote__text {
	font-family: "Galeria Sans", "Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	letter-spacing: -0.035em;
}

.drs-mediabanner__title {
	line-height: 0.82;
}

.drs-feature__title {
	font-size: clamp(2.7rem, 4.4vw, 5.25rem);
	line-height: 0.94;
}

.drs-reel__heading,
.drs-pod__heading,
.drs-issues__heading,
.drs-reads__heading {
	font-size: clamp(2.8rem, 3.7vw, 4.4rem);
	line-height: 0.94;
}

.drs-clip__title,
.drs-pod__title,
.drs-issue__title,
.drs-read__title,
.drs-read--lead .drs-read__title {
	font-family: "Galeria Sans", "Helvetica Neue", Arial, sans-serif;
	font-size: clamp(0.96rem, 0.9rem + 0.2vw, 1.08rem);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.005em;
}

.drs-clip__outlet,
.drs-pod__meta,
.drs-issue__kicker,
.drs-read__kicker,
.drs-read__foot,
.drs-feature__meta,
.drs-reel__all,
.drs-pod__all,
.drs-pod__browse,
.drs-issues__all,
.drs-reads__all {
	font-family: var(--font-body);
	font-weight: 600;
	letter-spacing: 0.1em;
}

/* All media sections use the same plain, non-italic title system. */
.drs-reel__heading,
.drs-pod__heading,
.drs-issues__heading,
.drs-reads__heading {
	font-family: "Galeria Sans", "Helvetica Neue", Arial, sans-serif;
	font-size: clamp(1.9rem, 2.3vw, 2.55rem);
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.025em;
}
.drs-clip__title,
.drs-pod__title {
	font-size: clamp(0.84rem, 0.79rem + 0.14vw, 0.95rem);
	font-style: normal;
	font-weight: 400;
	line-height: 1.3;
}

/* ========================== 6. Responsive =========================== */
@media (max-width: 1100px) {
	.drs-reel__grid { grid-template-columns: minmax(0, 1fr); }
	/* The reel now has the full width, so it holds more before the cards
	   grow past the size the stills can actually fill. */
	.drs-reel__rail { --drs-clip-per-view: 3; }
	.drs-issues__cards { --drs-issues-per-view: 2; }
}

@media (max-width: 900px) {
	.drs-feature__grid { grid-template-columns: minmax(0, 1fr); }
	.drs-reel__rail { --drs-clip-per-view: 3; }
	.drs-issues__grid,
	.drs-issues__grid--nopanel {
		grid-template-columns: minmax(0, 1fr);
		height: auto;
	}
	.drs-issues__cards { --drs-issues-per-view: 4; }
	.drs-pod__list { max-height: 18rem; }
	.drs-reads__grid { --drs-reads-per-view: 2; }
	.drs-read--lead { grid-row: span 1; }
	.drs-read--lead .drs-read__media img { aspect-ratio: 4 / 3; }
}

@media (max-width: 700px) {
	/* Five equal tracks stop holding "Newsletter" plus its count here, so
	   the row wraps onto three instead of squeezing. */
	.drs-media-archive .drs-media-filters__list {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.drs-issues__cards { --drs-issues-per-view: 2; }
	.drs-reel__rail { --drs-clip-per-view: 2; }
	.drs-quote__body {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
	}
	.drs-quote__mark { line-height: 0.45; }
	.drs-quote__signature {
		width: min(70%, 15rem);
		justify-self: start;
	}
	.drs-feature__actions .drs-button { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 480px) {
	.drs-media-archive .drs-media-filters__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.drs-reads__grid { --drs-reads-per-view: 1.2; }
	.drs-issues__cards { --drs-issues-per-view: 1.2; }
	.drs-reel__rail { --drs-clip-per-view: 1.2; }
}

/* Media reading and navigation, shared across the existing sections. */
html:has(body.post-type-archive-drs_media) { overflow-x: clip; }
.drs-media-archive .drs-logo-carousel { contain: paint; }
.drs-reel__rail, .drs-issues__cards, .drs-reads__grid { padding-bottom: 0; }
.drs-media-archive .is-unavailable { cursor: default; }
.drs-clip__hit, .drs-pod__hit, .drs-feature__hit { position: relative; }
.drs-media-archive .is-unavailable .drs-card-action { color: #637052; }
.drs-media-archive .is-unavailable :is(.drs-issue__mark, .drs-read__mark) { background: transparent; border: 1px solid var(--color-border); color: #637052; }
.drs-pod__pending { font: 0.72rem var(--font-body); max-width: 4rem; color: #637052; }
.drs-mediabanner__explore {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	min-height: 44px;
	margin-top: 1.8rem;
	border-bottom: 1px solid rgba(247, 240, 223, 0.55);
	font-family: var(--font-body);
	font-size: 0.9rem;
	text-decoration: none;
	color: var(--color-cream);
}
.drs-mediabanner__explore:hover { color: var(--color-cream); border-color: var(--color-accent); }
#television, #newsletter, #podcast, #article { scroll-margin-top: 7rem; }
.drs-feature { padding-block: clamp(3rem, 5vw, 5rem) 2rem; }
.drs-feature__title { font-weight: 400; line-height: 1.04; font-size: clamp(2.4rem, 3.6vw, 4rem); }
.drs-feature__intro { font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.5; }
.drs-reel { padding-bottom: 2rem; }
.drs-issues { padding-block: 2rem clamp(3.5rem, 5vw, 5rem); }
.drs-reads { padding-block: clamp(3.5rem, 5vw, 5rem); }
.drs-issues__grid { height: auto; }
.drs-reel__heading, .drs-issues__heading, .drs-pod__heading, .drs-reads__heading {
	font-size: clamp(1.9rem, 2.5vw, 2.65rem);
	line-height: 1.15;
}
.drs-reel__head, .drs-issues__head, .drs-pod__head, .drs-reads__head { margin-bottom: 1.4rem; }
.drs-clip, .drs-issue, .drs-read {
	min-width: 0;
	padding: 0.65rem;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.38);
	transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.drs-clip:hover, .drs-issue:hover, .drs-read:hover,
.drs-clip:focus-within, .drs-issue:focus-within, .drs-read:focus-within {
	border-color: var(--color-green-soft);
	background: #faf8f2;
	box-shadow: 0 4px 16px rgba(45, 56, 36, 0.06);
}
.drs-clip__hit, .drs-issue__link, .drs-read__link { gap: 1rem; }
.drs-clip__media { aspect-ratio: 16 / 9; flex: none; background: #20231e; }
.drs-issue__media, .drs-read__media { aspect-ratio: 4 / 3; flex: none; }
.drs-clip__media img, .drs-issue__media img, .drs-read__media img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}
.drs-clip__media img { object-fit: contain; }
.drs-clip__hit:hover .drs-clip__media img, .drs-clip__hit:focus-visible .drs-clip__media img { transform: none; }
.drs-issue__body, .drs-read__body { padding-inline: 0.35rem; gap: 0.5rem; }
.drs-clip__title, .drs-issue__title, .drs-read__title {
	font-size: 1.08rem;
	font-weight: 400;
	line-height: 1.4;
	min-height: 4.2em;
	-webkit-line-clamp: 3;
	color: var(--color-green);
}
.drs-clip__title { padding-inline: 0.35rem; }
.drs-issue__kicker, .drs-read__kicker, .drs-pod__meta {
	font-size: 0.66rem;
	font-weight: 400;
	letter-spacing: 0.07em;
	line-height: 1.4;
	color: #637052;
	overflow-wrap: anywhere;
}
.drs-card-action {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.7rem;
	margin-top: auto;
	padding-block: 0.5rem 0.15rem;
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--color-green);
}
.drs-clip__hit > .drs-card-action { padding-inline: 0.35rem; }
.drs-card-action time { display: none; }
.drs-card-action .drs-clip__mark, .drs-card-action .drs-issue__mark, .drs-card-action .drs-read__mark {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	margin: 0;
	font: 1.1rem Arial, sans-serif;
}
.drs-media-controls, .drs-pod__hint {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 44px;
	margin: 1.1rem 0 0;
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--color-green);
}
.drs-media-controls__count { min-width: 4.2rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.drs-media-controls__progress {
	position: relative;
	width: clamp(3rem, 8vw, 7rem);
	height: 2px;
	overflow: hidden;
	background: var(--color-border);
}
.drs-media-controls__progress::after {
	content: "";
	position: absolute;
	inset-block: 0;
	left: var(--drs-thumb-left, 0%);
	width: var(--drs-thumb-width, 20%);
	background: var(--color-green);
}
.drs-media-controls__buttons { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.drs-media-controls [hidden] { display: none; }
.drs-media-controls .drs-railbtn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--color-green-soft);
	border-radius: 50%;
	background: transparent;
	color: var(--color-green);
	font: 1.3rem Arial, sans-serif;
	cursor: pointer;
}
.drs-media-controls .drs-railbtn:not(:disabled):hover { background: var(--color-green); color: var(--color-cream); }
.drs-media-controls .drs-railbtn:disabled { opacity: 0.35; cursor: default; }
.drs-media-controls__pause { padding: 0 0.6rem; min-height: 44px; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; }
.drs-media-controls__pause:hover { text-decoration: underline; text-underline-offset: 4px; }
.drs-media-archive :is(a, button, [tabindex]):focus-visible { outline: 2px solid var(--color-green); outline-offset: 3px; }
.drs-mediabanner a:focus-visible { outline-color: var(--color-cream); }
.drs-pod { position: relative; padding: 0; min-height: 22rem; border-radius: 12px; background: rgba(255, 255, 255, 0.38); }
.drs-pod__list { position: absolute; inset: 0.8rem; padding: 0 0.5rem 0 0; max-height: none; scrollbar-gutter: stable; }
.drs-pod__list::-webkit-scrollbar { width: 8px; }
.drs-pod__item { display: block; flex: 0 0 auto; padding: 0; }
.drs-pod__hit {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.9rem;
	width: 100%;
	min-height: 94px;
	padding: 0.9rem 0.4rem;
	border: 0;
	border-radius: 4px;
	background: transparent;
	font: inherit;
	text-align: left;
	text-decoration: none;
	color: var(--color-green);
	cursor: pointer;
}
.drs-pod__hit:hover, .drs-pod__hit:focus-visible { background: #ecefE5; color: var(--color-green); }
.drs-pod__art { width: 48px; height: 48px; }
.drs-pod__title { display: block; overflow: visible; font-size: 1rem; line-height: 1.4; font-weight: 400; }
.drs-pod__listen { display: flex; align-items: center; gap: 0.5rem; font: 0.75rem var(--font-body); }
.drs-pod__arrow { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--color-green-soft); border-radius: 50%; font: 1.1rem Arial, sans-serif; }
.drs-pod__hit:hover .drs-pod__arrow { background: var(--color-green); color: var(--color-cream); }
.drs-pod__hint { justify-content: space-between; }
.drs-quote { margin-top: clamp(3.5rem, 5vw, 5rem); border-radius: 18px; }
.drs-quote__body { grid-template-columns: auto minmax(0, 1fr) minmax(10rem, 0.28fr); min-height: 0; padding: clamp(2rem, 4vw, 4rem); }
.drs-quote__text { font-size: clamp(1.6rem, 2.3vw, 2.6rem); line-height: 1.3; letter-spacing: -0.02em; }
.drs-quote__signature { max-width: 14rem; }
@media (min-width: 901px) and (max-width: 1150px) { .drs-pod__listen > span:first-child { display: none; } }
@media (max-width: 900px) {
	.drs-issues__grid { gap: 3rem; }
	.drs-issues__cards { --drs-issues-per-view: 2; }
	.drs-pod { flex: none; height: 26rem; min-height: 0; }
	.drs-quote__body { grid-template-columns: auto minmax(0, 1fr); }
	.drs-quote__signature { grid-column: 2; justify-self: start; width: 12rem; }
}
@media (max-width: 480px) {
	.drs-issues__cards { --drs-issues-per-view: 1.12; }
	.drs-reel__rail { --drs-clip-per-view: 1.12; }
	.drs-reads__grid { --drs-reads-per-view: 1.12; }
	.drs-media-controls { gap: 0.6rem; }
	.drs-media-controls__progress { flex: 1; max-width: 4rem; }
	.drs-media-controls__count { min-width: 3.2rem; }
	.drs-pod__hit { grid-template-columns: 42px minmax(0, 1fr) 30px; gap: 0.65rem; }
	.drs-pod__hit.is-unavailable { grid-template-columns: 42px minmax(0, 1fr) 4rem; }
	.drs-pod__art { width: 42px; height: 42px; }
	.drs-pod__listen > span:first-child { display: none; }
	.drs-pod__arrow { width: 30px; height: 30px; }
	.drs-pod__title { font-size: 0.95rem; }
	.drs-quote__body { gap: 0.8rem; padding: 1.7rem; }
	.drs-quote__mark { font-size: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
	.drs-media-archive *, .drs-media-archive *::before, .drs-media-archive *::after { scroll-behavior: auto; transition: none; }
}