/* ATC home page bands.
   ==========================================================================
   Front page only. Depends on components.css for the shared furniture.

   SPLIT OUT OF homepage-bands.css ON 7 SEP 2026. That file was 60KB and
   front-page only, which was right while the bands existed only there. The
   episode and playbook templates reuse the cheat sheet, play strip, episode
   cards and newsletter, so those rules had to stop being homepage property
   without dragging the homepage's other half along with them.

   HOW THE SPLIT WAS DECIDED: by the LEFTMOST .atc- class in each comma-part
   of each selector, because that is what scopes the rule. `.atc-finder
   .atc-eyebrow--ink` is a finder rule, not an eyebrow rule. Grouped
   selectors were split across both files, so `.atc-episodes__heading,
   .atc-finder__heading` became one line in each.

   The split was verified declaration by declaration: every (media context,
   selector, declarations) triple in the original appears in exactly one of
   the two files, none invented, none lost.
   ========================================================================== */

/* ============================================================
   Module 14: Nathan
   ============================================================ */

.atc-host__grid {
	display: grid;
	grid-template-columns: minmax(220px, .6fr) minmax(300px, 1.4fr);
	gap: 52px;
	align-items: end;
}

.atc-host__portrait {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	box-sizing: border-box;
	padding: 36px 20px 0;
	overflow: hidden;
	border-radius: 20px;
	/* Black, not yellow: the portrait carries a dark ground and read as a
	   floating box on yellow. Decision taken in the design handoff. */
	background-color: var(--atc-black, #0A0A0A);
	background-image: url("../img/patterns/smiley-mic-cursor-phone-black.png");
	background-size: cover;
	background-position: center;
	box-shadow: 10px 10px 0 0 var(--atc-yellow, #FFE600);
}

.atc-host__portrait img { display: block; width: 100%; max-width: 270px; height: auto; }

.atc-host__eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }

.atc-host__eyebrow span {
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--atc-ink-600, #565656);
}

.atc-host__icon { height: 52px; width: auto; }

.atc-host__title {
	margin: 0 0 16px;
	font-size: 36px; font-weight: 800; text-transform: uppercase;
	line-height: 1.02; letter-spacing: -.02em;
}

.atc-host__lede {
	margin: 0 0 14px;
	font-size: 18px; line-height: 1.6;
	color: var(--atc-ink-700, #2E2E2E);
	max-width: 56ch;
}

.atc-host__creds {
	margin: 6px 0 22px;
	font-size: 11px; font-weight: 800; line-height: 1.9;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--atc-ink-600, #565656);
}

/* ============================================================
   Module 15: Sponsorship
   ============================================================ */

.atc-sponsorship { padding-top: 88px; padding-bottom: 88px; }

.atc-sponsorship__grid {
	display: grid;
	grid-template-columns: minmax(300px, 1.1fr) minmax(260px, .9fr);
	gap: 56px;
	align-items: center;
}

.atc-sponsorship__title {
	margin: 0 0 24px;
	font-size: 54px; font-weight: 800; text-transform: uppercase;
	line-height: 1; letter-spacing: -.02em;
	color: var(--atc-white, #FFFFFF);
	text-wrap: balance;
}

/* LABELS, NOT PILLS. These four are not links and never were, so a bordered
   rounded shape read as a set of buttons and invited a click that does
   nothing. Nathan, 5 Sep: pills are for actions. Spacing separates them now;
   no border, no radius, no separator glyph (a glyph strands itself at the
   start of a wrapped line). */

.atc-sponsorship__formats {
	display: flex; flex-wrap: wrap; gap: 12px 32px;
	margin: 0; padding: 0; list-style: none;
}

.atc-sponsorship__formats li {
	padding: 0;
	font-size: 14px; font-weight: 800;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--atc-white, #FFFFFF);
	white-space: nowrap;
}

.atc-sponsorship__card {
	padding: 34px;
	border-radius: 20px;
	background: var(--atc-yellow, #FFE600);
	color: var(--atc-black, #0A0A0A);
	box-shadow: 10px 10px 0 0 var(--atc-white, #FFFFFF);
}

.atc-sponsorship__cardtitle {
	margin: 0 0 14px;
	font-size: 28px; font-weight: 800; text-transform: uppercase;
	line-height: 1.04; letter-spacing: -.02em;
}

.atc-sponsorship__cardcopy {
	margin: 0 0 26px;
	font-size: 17px; line-height: 1.55;
	color: var(--atc-ink-700, #2E2E2E);
}

/* No focus style: the cover is no longer focusable, because it is no longer a
   link. Leaving a focus ring on a plain div advertises an interaction that does
   not exist. */

/* ============================================================
   Tablet, roughly 720 to 1000px: two-up becomes single column
   where the handoff calls for it.
   ============================================================ */

@media only screen and (max-width: 1000px) {
	.atc-sponsorship__title { font-size: 42px; }
}

@media only screen and (max-width: 767px) {
	.atc-sponsorship { padding-top: 56px; padding-bottom: 56px; }

	.atc-host__grid, .atc-sponsorship__grid { grid-template-columns: 1fr; gap: 32px; }

	.atc-host__title { font-size: 28px; }

	.atc-host__lede { font-size: 16px; }

	.atc-sponsorship__title { font-size: 30px; }

	.atc-sponsorship__card { padding: 26px; box-shadow: 6px 6px 0 0 var(--atc-white, #FFFFFF); }

	/* The desktop pill size dominates this band on a phone: four of them wrap
	   to two rows and compete with the headline. Scale them back to supporting
	   labels, which is what they are. */

	.atc-sponsorship__formats { gap: 10px 22px; }

	.atc-sponsorship__formats li {
		font-size: 12px;
		letter-spacing: .12em;
	}

	.atc-finder__head { gap: 14px; }

	.atc-finder__icon { height: 42px; }
}

.atc-host .atc-host__lede { color: var(--atc-ink-700) !important; }

.atc-host .atc-host__creds { color: var(--atc-ink-600) !important; }

.atc-sponsorship .atc-sponsorship__cardcopy { color: var(--atc-ink-700) !important; }

.atc-sponsorship .atc-eyebrow--yellow { color: var(--atc-yellow)   !important; }

/* ============================================================
   PHASE 4 — the bands WordPress can already fill.

   One override note that applies to every dark band below. The
   site's Customizer CSS carries:

       body.home p { color: var(--clr_black) !important }

   so every paragraph on the front page is forced black at a
   specificity a plain class cannot beat. Copy on a black ground
   therefore has to restate its colour with !important. Same trap
   that turned the download band's body copy black on black in
   phase 2; the fix is the same and is deliberate, not cargo cult.
   ============================================================ */

/* ============================================================
   Module 3: hero
   ============================================================ */

.atc-hero { padding: 64px 24px 72px; }

.atc-hero__masthead {
	margin: 0 0 34px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .14em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--atc-ink-400, #A3A3A3) !important;
}

.atc-hero__grid {
	display: grid;
	grid-template-columns: minmax(320px, 1.25fr) minmax(280px, 1fr);
	gap: 56px;
	align-items: start;
}

.atc-hero .atc-hero__meta {
	margin: 0 0 18px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--atc-yellow, #FFE600) !important;
}

.atc-hero__title {
	margin: 0 0 22px;
	font-size: clamp(34px, 4.6vw, 60px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -.02em;
	text-transform: uppercase;
	text-wrap: balance;
}

.atc-hero__title a { color: var(--atc-white, #FFFFFF); text-decoration: none; }

.atc-hero__title a:hover, .atc-hero__title a:focus { color: var(--atc-yellow, #FFE600); }

.atc-hero .atc-hero__hook {
	margin: 0 0 34px;
	max-width: 52ch;
	font-size: 18px;
	line-height: 1.6;
	color: var(--atc-ink-300, #CFCFCF) !important;
}

.atc-hero .atc-hero__subscribelabel {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--atc-ink-400, #A3A3A3) !important;
}

.atc-hero__platforms {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.atc-hero__platforms li { margin: 0; }

.atc-hero__platform {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 22px;
	border: 2px solid var(--atc-white, #FFFFFF);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--atc-white, #FFFFFF);
	transition: background 200ms var(--atc-ease, cubic-bezier(.22,1,.36,1)),
	            color 200ms var(--atc-ease, cubic-bezier(.22,1,.36,1));
}

.atc-hero__platform:hover, .atc-hero__platform:focus {
	background: var(--atc-yellow, #FFE600);
	border-color: var(--atc-yellow, #FFE600);
	color: var(--atc-black, #0A0A0A);
}

/* The mark takes its colour from the pill, so it flips to black on hover
   rather than staying white and disappearing into the yellow. */

.atc-hero__platformicon { flex: 0 0 auto; display: block; }

/* The cover sits 34px down so its top edge lines up with the episode title
   rather than with the meta line above it. */

.atc-hero__aside { padding-top: 34px; }

.atc-hero__cover { display: block; }

.atc-hero__cover img {
	display: block;
	width: 100%;
	/* 16:9, NOT SQUARE. Every episode and playbook cover is authored 1920x1080
	   with the title set across the full width and the guests spread along it.
	   Forcing 1/1 here and letting object-fit: cover centre-crop it threw away
	   about 44% of the width, taking the ends of the title and the outer
	   guests with it, so the band looked wrong even when it had picked the
	   right episode. The episode cards were already 16/9, which is why they
	   looked right and these two did not. Nathan, 7 Sep: "it's using the
	   wide-width cover". */
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border: 3px solid var(--atc-yellow, #FFE600);
	border-radius: 20px;
	/* Lifts it off the black. Same sticker offset the playbook artwork already
	   uses on the same ground, so the two dark bands rhyme. Hard offset, no
	   blur: the brand allows a yellow or white shadow on black, never a soft
	   one. */
	box-shadow: 10px 10px 0 0 var(--atc-yellow, #FFE600);
}

/* SQUARE WHEN THE SOURCE IS SQUARE. atc_square_art is the 1400x1400 podcast
   cover; the fallback is the 16:9 banner. The modifier class says which one
   arrived, so this never squares a wide image, which is the crop bug fixed
   earlier today. */

.atc-hero__cover--square img {
	aspect-ratio: 1 / 1;
}

.atc-finder__heading, .atc-watch__heading {
	margin: 0;
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.02em;
	text-transform: uppercase;
	color: var(--atc-black, #0A0A0A);
}

/* ============================================================
   Module 9: find your episode
   ============================================================ */

.atc-finder { padding: 80px 24px; }

/* Icon beside the heading, the same device as the paper-plane on the
   newsletter band and the speech-bubble on community. flex-end so the icon
   sits on the heading's baseline rather than floating above the eyebrow. */

.atc-finder__head {
	margin-bottom: 26px;
	display: flex;
	align-items: flex-end;
	gap: 22px;
}

.atc-finder__icon { flex: 0 0 auto; height: 60px; width: auto; display: block; }

.atc-finder__headtext { min-width: 0; }

.atc-finder .atc-eyebrow--ink { color: var(--atc-ink-700, #2E2E2E) !important; }

.atc-finder__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}

.atc-finder__chip {
	padding: 10px 20px;
	background: transparent;
	border: 2px solid var(--atc-black, #0A0A0A);
	border-radius: 999px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--atc-black, #0A0A0A);
	cursor: pointer;
	transition: background 160ms var(--atc-ease, cubic-bezier(.22,1,.36,1)),
	            color 160ms var(--atc-ease, cubic-bezier(.22,1,.36,1));
}

.atc-finder__chip:hover { background: rgba(10, 10, 10, .1); }

.atc-finder__chip.is-active {
	background: var(--atc-black, #0A0A0A);
	color: var(--atc-yellow, #FFE600);
}

.atc-finder__chip:focus-visible { outline: 3px solid var(--atc-black, #0A0A0A); outline-offset: 3px; }

.atc-finder .atc-finder__sort {
	margin: 0 0 24px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--atc-ink-700, #2E2E2E) !important;
}

.atc-finder__list {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	background: var(--atc-white, #FFFFFF);
	border: 2px solid var(--atc-black, #0A0A0A);
	border-radius: 20px;
	box-shadow: 8px 8px 0 0 var(--atc-black, #0A0A0A);
}

.atc-finder__row { margin: 0; border-top: 2px solid var(--atc-ink-200, #E6E6E6); }

.atc-finder__row:first-child { border-top: 0; }

.atc-finder__row.is-hidden { display: none; }

/* Two actions per row now: the link opens the episode, the play button plays
   it. The row is the flex container so the button sits where the arrow was. */

.atc-finder__row { display: flex; align-items: center; gap: 12px; padding-right: 18px; }

.atc-finder__link {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 0 18px 22px;
	text-decoration: none;
	color: var(--atc-black, #0A0A0A);
	transition: background 160ms var(--atc-ease, cubic-bezier(.22,1,.36,1));
}

.atc-finder__link:hover, .atc-finder__link:focus { background: var(--atc-ink-100, #F2F2F2); color: var(--atc-black, #0A0A0A); }

.atc-finder__thumb {
	flex: 0 0 auto;
	display: block;
	width: 54px;
	height: 54px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--atc-ink-200, #E6E6E6);
}

.atc-finder__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.atc-finder__text { flex: 1 1 auto; min-width: 0; }

.atc-finder__title {
	display: block;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.01em;
	text-transform: uppercase;
}

.atc-finder__meta {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--atc-ink-600, #565656);
}

.atc-finder .atc-finder__empty {
	margin: 22px 0 0;
	font-size: 15px;
	color: var(--atc-ink-700, #2E2E2E) !important;
}

/* ============================================================
   Module 11: watch
   ============================================================ */

.atc-watch { padding: 80px 24px; }

.atc-watch__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 34px;
}

/* ============================================================
   Module 13: latest playbook
   ============================================================ */

.atc-playbook { padding: 76px 24px; }

.atc-playbook__grid {
	display: grid;
	grid-template-columns: minmax(200px, .7fr) minmax(300px, 1.3fr);
	gap: 44px;
	align-items: center;
}

.atc-playbook__art { display: block; }

.atc-playbook__art img {
	display: block;
	width: 100%;
	/* 16:9, NOT SQUARE. Every episode and playbook cover is authored 1920x1080
	   with the title set across the full width and the guests spread along it.
	   Forcing 1/1 here and letting object-fit: cover centre-crop it threw away
	   about 44% of the width, taking the ends of the title and the outer
	   guests with it, so the band looked wrong even when it had picked the
	   right episode. The episode cards were already 16/9, which is why they
	   looked right and these two did not. Nathan, 7 Sep: "it's using the
	   wide-width cover". */
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 20px;
	box-shadow: 10px 10px 0 0 var(--atc-yellow, #FFE600);
}

.atc-playbook .atc-playbook__meta {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--atc-yellow, #FFE600) !important;
}

.atc-playbook__title {
	margin: 0 0 18px;
	font-size: clamp(26px, 3.2vw, 40px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.02em;
	text-transform: uppercase;
	text-wrap: balance;
}

.atc-playbook__title a { color: var(--atc-white, #FFFFFF); text-decoration: none; }

.atc-playbook__title a:hover, .atc-playbook__title a:focus { color: var(--atc-yellow, #FFE600); }

.atc-playbook .atc-playbook__hook {
	margin: 0 0 26px;
	max-width: 52ch;
	font-size: 17px;
	line-height: 1.6;
	color: var(--atc-ink-300, #CFCFCF) !important;
}

/* ============================================================
   Phase 4 — tablet
   ============================================================ */

@media only screen and (max-width: 991px) {
	.atc-hero__grid { grid-template-columns: 1fr 300px; gap: 34px; }

	.atc-playbook__grid { grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.2fr); gap: 30px; }

	.atc-finder__title { font-size: 20px; }
}

/* ============================================================
   Phase 4 — mobile

   The hero reorders so the words land before the image, per the
   mobile artboard: meta, title, hook, artwork, player, then the
   platform pills splitting the width.
   ============================================================ */

@media only screen and (max-width: 767px) {
	.atc-hero { padding: 40px 20px 48px; }

	.atc-hero__masthead { margin-bottom: 24px; font-size: 11px; }

	.atc-hero__grid { display: flex; flex-direction: column; gap: 0; }

	.atc-hero__main { display: contents; }

	.atc-hero__meta { order: 1; }

	.atc-hero__title { order: 2; font-size: 29px; }

	.atc-hero__hook { order: 3; margin-bottom: 24px; font-size: 16px; }

	.atc-hero__aside { order: 4; padding-top: 0; }

	.atc-hero__subscribe { order: 5; margin-top: 24px; }

	/* Equal-width pills. The grid cells were already equal; the anchors inside
	   were inline-block, so each shrank to its own word and "Apple" sat narrow
	   and left inside its cell, reading as misalignment. Filling the cell fixes
	   the width AND leaves room for proper side padding. */

	.atc-hero__platforms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

	.atc-hero__platform { width: 100%; padding: 11px 10px; font-size: 11px; letter-spacing: .04em; gap: 6px; }

	.atc-hero__platformicon { width: 15px; height: 15px; }

	.atc-finder { padding: 56px 20px; }

	.atc-finder__chips { gap: 8px; }

	.atc-finder__chip { padding: 8px 14px; font-size: 11px; letter-spacing: .06em; }

	.atc-finder__list { border-radius: 16px; box-shadow: 5px 5px 0 0 var(--atc-black, #0A0A0A); }

	.atc-finder__link { gap: 14px; padding: 14px 16px; }

	.atc-finder__thumb { width: 42px; height: 42px; }

	.atc-finder__title { font-size: 17px; }

	.atc-watch { padding: 56px 20px; }

	.atc-watch__head { gap: 16px; margin-bottom: 24px; }

	.atc-playbook { padding: 56px 20px; }

	/* Cover moves BELOW the title and ABOVE the description, so the words land
	   before the image exactly as they do in the hero.

	   The meta, title, hook and player all live inside .atc-playbook__body,
	   which would normally make them un-orderable against the artwork outside
	   it. display:contents dissolves that wrapper so all five become siblings
	   of the flex container and a single order sequence can interleave them. */

	.atc-playbook__grid { display: flex; flex-direction: column; gap: 0; }

	.atc-playbook__body { display: contents; }

	.atc-playbook .atc-playbook__meta { order: 1; }

	.atc-playbook__title { order: 2; }

	.atc-playbook__art { order: 3; display: block; max-width: 240px; margin: 4px 0 22px; }

	.atc-playbook .atc-playbook__hook { order: 4; }
}

/* ---------------------------------------------------------------------------
 * Guest name and company (Phase 7).
 *
 * The design puts the guest in three places, and every one of them was showing
 * a date or nothing at all because the data did not exist until now. GA4 says
 * people search this archive by guest and brand name, so this is the line that
 * answers how the audience actually thinks about an episode.
 *
 * All three degrade to nothing rather than to an empty element: playbooks have
 * no guest by design, and some episodes have a name but no company because the
 * post would not corroborate the one the transcript claimed.
 * ------------------------------------------------------------------------- */

/* Hero: name, then company beneath, as the design draws it. */

.atc-hero__guest {
	margin: 0 0 18px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.atc-hero__guestname {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: .01em;
	color: var(--atc-white, #FFFFFF);
}

.atc-hero__guestco {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	/* ink-400 on the black hero is 8.1:1, so it reads as secondary without
	   dropping below AA for small text. */
	color: var(--atc-ink-400, #A3A3A3);
}

@media (max-width: 767px) {
	.atc-hero__guest { margin-bottom: 14px; }

	.atc-hero__guestname { font-size: 16px; }
}

/* ---------------------------------------------------------------------------
 * Hero guest: correct position, and on one line.
 *
 * TWO BUGS IN ONE. The hero's children are laid out by explicit CSS `order`
 * (meta 1, title 2, hook 3, subscribe 5) because .atc-hero__main is
 * display:contents and the children sit directly in the band's grid. A new
 * element with no order declared defaults to 0, which sorts it BEFORE
 * everything, so the guest appeared above the episode number instead of under
 * the headline. Slot 4 was free, so the hook moves there and the guest takes 3.
 *
 * And Nathan wants the name and company on ONE line rather than stacked. The
 * design stacks them because it carries a role as well ("Founder, Gifted"); we
 * only have name and company, and stacked those read as two orphaned fragments.
 *
 * The separator is a ::before on the company, not a character in the markup, so
 * it disappears by itself on the episodes that have a name but no corroborated
 * company. There are 34 of those, and a trailing "·" on every one of them would
 * be worse than no separator at all.
 * ------------------------------------------------------------------------- */

.atc-hero__guest {
	order: 3;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0;
}

.atc-hero__hook { order: 4; }

.atc-hero__guestco::before {
	content: "·";
	margin: 0 8px;
	color: var(--atc-ink-600, #565656);
}

/* ---------------------------------------------------------------------------
 * Finder chips: one scrolling row, at every width.
 *
 * They wrapped onto two or three lines, which pushed the episode list down the
 * page and made the control look bigger than the thing it filters. A single
 * row that slides keeps the list where the eye already is.
 *
 * flex-wrap:nowrap plus overflow-x:auto on the container only. The PAGE never
 * scrolls sideways; the chip row does. That distinction matters, because a
 * horizontally scrolling body is the bug this looks like at a glance.
 *
 * The scrollbar is hidden because it sits over the chips at this height and
 * looks like a defect. Hiding it is safe here and only here: the row is not the
 * only route to this content, every chip is reachable by keyboard tabbing
 * (which scrolls it into view natively), and nothing is lost if a visitor never
 * scrolls it. It would not be safe on a long scrolling region.
 *
 * scroll-padding keeps a focused chip off the very edge when tabbed to.
 * ------------------------------------------------------------------------- */

.atc-finder__chips {
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-padding-inline: 24px;
	/* Momentum on iOS, and stops the row hijacking vertical page scroll. */
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: none;          /* Firefox */
	-ms-overflow-style: none;       /* old Edge */
	/* Room for the last chip's focus ring, which would otherwise be clipped by
	   the scroll container. */
	padding-bottom: 4px;
}

.atc-finder__chips::-webkit-scrollbar { display: none; }

/* Chips must not shrink to fit, or "International Expansion" compresses into an
   unreadable sliver instead of scrolling. */

.atc-finder__chip {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Playbook band, mobile: left align the column.
 *
 * The band stacks into a flex column that inherits align-items:center from the
 * band inner, so the two children NARROWER than the column get centred: the
 * "PLAYBOOK · EP 655 · FRI 28 AUG" eyebrow and the artwork. The title and the
 * hook are full width, so they already looked left aligned, which is why this
 * read as an alignment bug on only some of the elements rather than all of it.
 *
 * text-align was never the cause; it computes to start throughout.
 * ------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.atc-playbook__grid { align-items: flex-start; }

	.atc-playbook__art { margin-left: 0; margin-right: 0; }
}