/* ============================================================
   Add To Cart homepage bands.

   Shared furniture for the rebuilt homepage. Every band is a
   template part registered through atc_core_front_page_bands and
   rendered by Megaphone's front-page loop.

   Bands own their full markup: Megaphone emits its .megaphone-section
   wrapper INSIDE each of its own template parts, not in front-page.php,
   so a band inherits no grey ground, no 50px padding and no 1202px
   container. Nothing here needs !important or a negative-margin escape.

   Values come from the design handoff. Where the handoff and the brand
   tokens agree, the token wins so there is one source of truth.
   ============================================================ */

/* ---------- band shell ---------- */

.atc-band {
	width: 100%;
	box-sizing: border-box;
	padding: 80px 24px;
	background: var(--atc-white, #FFFFFF);
	color: var(--atc-black, #0A0A0A);
	font-family: var(--atc-font, "Poppins", -apple-system, sans-serif);
}

.atc-band--dark { background: var(--atc-black, #0A0A0A); color: var(--atc-white, #FFFFFF); }
.atc-band--yellow { background: var(--atc-yellow, #FFE600); }

.atc-band__inner {
	max-width: var(--atc-content-max, 1102px);
	margin: 0 auto;
}

/* ---------- shared type ---------- */

.atc-eyebrow {
	margin: 0 0 16px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--atc-ink-600, #565656);
}
.atc-eyebrow--yellow { color: var(--atc-yellow, #FFE600); }

/* ---------- shared buttons ---------- */

.atc-btn {
	display: inline-block;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 200ms var(--atc-ease, cubic-bezier(.22,1,.36,1)),
	            box-shadow 200ms var(--atc-ease, cubic-bezier(.22,1,.36,1));
}
.atc-btn:focus-visible { outline: 3px solid var(--atc-yellow, #FFE600); outline-offset: 3px; }

.atc-btn--outline {
	padding: 14px 26px;
	border: 2px solid var(--atc-black, #0A0A0A);
	color: var(--atc-black, #0A0A0A);
	box-shadow: 4px 4px 0 0 var(--atc-black, #0A0A0A);
}
.atc-btn--outline:hover,
.atc-btn--outline:focus { color: var(--atc-black, #0A0A0A); transform: translate(-2px,-2px); box-shadow: 6px 6px 0 0 var(--atc-black, #0A0A0A); }

.atc-btn--black {
	padding: 18px 34px;
	background: var(--atc-black, #0A0A0A);
	color: var(--atc-white, #FFFFFF);
	font-size: 13px;
}
.atc-btn--black:hover,
.atc-btn--black:focus { color: var(--atc-white, #FFFFFF); transform: translate(-2px,-2px); }

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

.atc-sponsorship__formats {
	display: flex; flex-wrap: wrap; gap: 10px;
	margin: 0; padding: 0; list-style: none;
}
.atc-sponsorship__formats li {
	padding: 10px 20px;
	border: 2px solid var(--atc-white, #FFFFFF);
	border-radius: 999px;
	font-size: 13px; font-weight: 800;
	letter-spacing: .1em; 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);
}

/* ============================================================
   Module 7: Free download
   ============================================================ */

.atc-download__grid {
	display: grid;
	grid-template-columns: minmax(300px, 1.15fr) minmax(240px, .85fr);
	gap: 56px;
	align-items: center;
}

.atc-download__plate {
	padding: 34px;
	border-radius: 20px;
	background: var(--atc-black, #0A0A0A);
	color: var(--atc-white, #FFFFFF);
}

.atc-download__badges { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.atc-download__badge {
	/* Outlined, not solid, so it does not compete with the yellow submit. */
	padding: 9px 20px;
	border: 2px solid var(--atc-yellow, #FFE600);
	border-radius: 999px;
	color: var(--atc-yellow, #FFE600);
	font-size: 15px; font-weight: 800;
	letter-spacing: .14em; text-transform: uppercase;
	white-space: nowrap;
}
.atc-download__meta {
	font-size: 11px; font-weight: 800;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--atc-ink-400, #A3A3A3);
}

.atc-download__title {
	margin: 0 0 18px;
	font-size: 44px; font-weight: 800; text-transform: uppercase;
	line-height: 1.02; letter-spacing: -.02em;
	color: var(--atc-white, #FFFFFF);
}

.atc-download__summary {
	margin: 0 0 20px;
	font-size: 17px; line-height: 1.55;
	color: var(--atc-ink-300, #CFCFCF);
	max-width: 46ch;
}

.atc-download__benefits { display: flex; flex-direction: column; gap: 10px; margin: 0 0 26px; padding: 0; list-style: none; }
.atc-download__benefits li {
	display: flex; gap: 12px; align-items: flex-start;
	font-size: 16px; line-height: 1.5;
	color: var(--atc-white, #FFFFFF);
}
.atc-download__benefits li::before {
	content: "";
	flex: 0 0 10px; height: 10px; margin-top: 7px;
	background: var(--atc-yellow, #FFE600);
}

.atc-download__form { display: flex; gap: 12px; flex-wrap: wrap; }
.atc-download__input {
	flex: 1 1 240px; min-width: 0; height: 56px; box-sizing: border-box;
	padding: 0 18px;
	border: 2px solid var(--atc-white);
	border-radius: 8px;
	/* White field on the black plate: reads as a real input rather than a
	   hollow outline, and matches how people expect a form to look. */
	background: var(--atc-white);
	color: var(--atc-black);
	font-family: inherit; font-size: 16px;
}
/* ink-600 not ink-400: on white, ink-400 is 2.6:1 and fails AA. */
.atc-download__input::placeholder { color: var(--atc-ink-600); opacity: 1; }
.atc-download__input:focus-visible { outline: 3px solid var(--atc-yellow, #FFE600); outline-offset: 2px; }

.atc-download__submit {
	flex: 0 0 auto; height: 56px; padding: 0 30px;
	border: none; border-radius: 999px; cursor: pointer;
	background: var(--atc-yellow, #FFE600);
	color: var(--atc-black, #0A0A0A);
	font-family: inherit; font-size: 12px; font-weight: 800;
	letter-spacing: .12em; text-transform: uppercase;
	transition: transform 200ms var(--atc-ease, cubic-bezier(.22,1,.36,1));
}
.atc-download__submit:hover { transform: translate(-2px,-2px); }
.atc-download__submit:focus-visible { outline: 3px solid var(--atc-white, #FFFFFF); outline-offset: 3px; }

.atc-download__note {
	margin: 16px 0 0;
	font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--atc-ink-400, #A3A3A3);
}
.atc-download__success {
	margin: 16px 0 0;
	font-size: 15px; line-height: 1.55;
	color: var(--atc-white, #FFFFFF);
}
.atc-download__success strong { color: var(--atc-yellow, #FFE600); }

/* Cover: paper, not sticker. Two offset sheets suggest a stapled report. */
.atc-download__cover { display: block; position: relative; max-width: 320px; margin: 0 auto; }
.atc-download__sheet { position: absolute; display: block; border-radius: 3px; }
.atc-download__sheet--back { top: 7px; left: 7px; right: -7px; bottom: -7px; background: #1C1C1C; border: 1px solid #3A3A3A; }
.atc-download__sheet--mid  { top: 3px; left: 3px; right: -3px; bottom: -3px; background: #262626; border: 1px solid #4A4A4A; }
.atc-download__cover img {
	position: relative; display: block; width: 100%; height: auto;
	aspect-ratio: 210 / 297; object-fit: cover;
	border: 1px solid #4A4A4A; border-radius: 3px;
	/* The one soft shadow on the page. Everything else is a hard offset. */
	box-shadow: 0 24px 48px rgba(0, 0, 0, .6);
}
.atc-download__cover:focus-visible { outline: 3px solid var(--atc-black, #0A0A0A); outline-offset: 6px; }

/* ============================================================
   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; }
	.atc-download__title { font-size: 34px; }
	.atc-download__plate { padding: 30px; }
	.atc-download__grid { grid-template-columns: 1fr 210px; gap: 30px; }
}

@media only screen and (max-width: 767px) {
	.atc-band { padding: 56px 18px; }
	.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: 8px; }
	.atc-sponsorship__formats li {
		padding: 7px 14px;
		border-width: 2px;
		font-size: 11px;
		letter-spacing: .08em;
	}

	/* Single column. The plate spanned both tracks anyway, so the two-column
	   grid only ever left the cover stranded on its own row. */
	.atc-download__grid { grid-template-columns: 1fr; gap: 22px; }
	.atc-download__cover { order: -1; max-width: 200px; margin: 0 auto; }
	.atc-download__plate { padding: 24px; }
	.atc-download__title { font-size: 26px; }
	.atc-download__form { flex-direction: column; }
	/* flex-basis becomes HEIGHT once the form is a column, so the 240px basis
	   made the input a 240px-tall box. Reset it and let the height rule win. */
	.atc-download__input { flex: 0 0 auto; width: 100%; }
	.atc-download__submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.atc-btn, .atc-download__submit { transition: none; }
	.atc-btn:hover, .atc-download__submit:hover { transform: none; }
}

/* ============================================================
   Paragraph colour, deliberately !important.

   The theme sets paragraph colour with !important at a specificity a
   single component class cannot beat, so EVERY <p> inside a band
   rendered black regardless of what this file asked for. On the
   download band's black plate that meant black-on-black body copy at
   a contrast ratio of 1.06, i.e. invisible.

   Measured on staging: a (0,2,0) selector loses without !important and
   wins with it. Non-paragraph elements (li, span) are unaffected, which
   is why the bullets and meta labels were always correct.

   These are the only !important declarations in this file. Each is
   scoped to its own band so nothing leaks to the rest of the site. If a
   future band adds body copy in a <p>, it needs a line here too.
   ============================================================ */

.atc-download .atc-download__summary { color: var(--atc-ink-300) !important; }
.atc-download .atc-download__note    { color: var(--atc-ink-400) !important; }
.atc-download .atc-download__success { color: var(--atc-white)   !important; }
.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; }

/* The theme also overrides form control background and border with
   !important, the same way it does paragraph colour. Without these the
   email field renders transparent with a faint hairline instead of the
   white field it is meant to be. Scoped, and the only input override here. */
.atc-download .atc-download__input {
	background: var(--atc-white) !important;
	border: 2px solid var(--atc-white) !important;
	color: var(--atc-black) !important;
	/* The theme also forces a shorter height on form controls, leaving the
	   input at 40px and the submit at 36px, both under the 44px minimum
	   touch target. */
	min-height: 56px !important;
}
.atc-download .atc-download__submit {
	min-height: 56px !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-block;
	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 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%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 3px solid var(--atc-yellow, #FFE600);
	border-radius: 20px;
}

.atc-hero__player {
	margin-top: 18px;
	padding: 14px;
	background: var(--atc-white, #FFFFFF);
	border-radius: 16px;
}

/* megaphone_play_button() emits <a><i class="mf mf-play"></i>Label</a>, so the
   icon element is the circle and the anchor is the row. */
.atc-hero__play {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--atc-black, #0A0A0A);
}
.atc-hero__play:hover,
.atc-hero__play:focus { color: var(--atc-black, #0A0A0A); }
.atc-hero__play .mf {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--atc-black, #0A0A0A);
	color: var(--atc-yellow, #FFE600);
	font-size: 18px;
	transition: transform 200ms var(--atc-ease, cubic-bezier(.22,1,.36,1));
}
.atc-hero__play:hover .mf { transform: scale(1.06); }

/* ============================================================
   Module 6: latest episodes
   ============================================================ */

.atc-episodes { padding: 88px 24px; }

.atc-episodes .atc-eyebrow { color: var(--atc-ink-600, #565656) !important; }

.atc-episodes__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}

.atc-episodes__heading,
.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);
}

.atc-episodes__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 28px;
}

.atc-episodes__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--atc-white, #FFFFFF);
	border: 2px solid var(--atc-black, #0A0A0A);
	border-radius: 20px;
	box-shadow: 6px 6px 0 0 var(--atc-black, #0A0A0A);
	transition: transform 200ms var(--atc-ease, cubic-bezier(.22,1,.36,1)),
	            box-shadow 200ms var(--atc-ease, cubic-bezier(.22,1,.36,1));
}
.atc-episodes__card:hover {
	transform: translate(-3px, -3px);
	box-shadow: 9px 9px 0 0 var(--atc-black, #0A0A0A);
}

.atc-episodes__art { display: block; }
.atc-episodes__art img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-bottom: 2px solid var(--atc-black, #0A0A0A);
}

.atc-episodes__playbar {
	padding: 10px 14px;
	background: var(--atc-yellow, #FFE600);
	border-bottom: 2px solid var(--atc-black, #0A0A0A);
}
.atc-episodes__play {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--atc-black, #0A0A0A);
}
.atc-episodes__play:hover,
.atc-episodes__play:focus { color: var(--atc-black, #0A0A0A); }
.atc-episodes__play .mf {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--atc-black, #0A0A0A);
	color: var(--atc-yellow, #FFE600);
	font-size: 12px;
}

.atc-episodes__body { padding: 20px; }
.atc-episodes .atc-episodes__cardmeta {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--atc-ink-600, #565656) !important;
}
.atc-episodes__cardtitle {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.01em;
	text-transform: uppercase;
}
.atc-episodes__cardtitle a { color: var(--atc-black, #0A0A0A); text-decoration: none; }

.atc-episodes__more { margin-top: 36px; text-align: center; }

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

.atc-finder { padding: 80px 24px; }
.atc-finder__head { margin-bottom: 26px; }
.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; }

.atc-finder__link {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 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__arrow { flex: 0 0 auto; font-size: 22px; }

.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%;
	aspect-ratio: 1 / 1;
	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;
}

.atc-playbook__player {
	max-width: 520px;
	padding: 12px 16px;
	background: var(--atc-yellow, #FFE600);
	border-radius: 999px;
}
.atc-playbook__play {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--atc-black, #0A0A0A);
}
.atc-playbook__play:hover,
.atc-playbook__play:focus { color: var(--atc-black, #0A0A0A); }
.atc-playbook__play .mf {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--atc-black, #0A0A0A);
	color: var(--atc-yellow, #FFE600);
	font-size: 15px;
}

/* ============================================================
   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-episodes { padding: 64px 22px; }
	.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; }

	.atc-hero__platforms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.atc-hero__platform { padding: 11px 6px; text-align: center; font-size: 11px; letter-spacing: .06em; }

	.atc-episodes { padding: 56px 20px; }
	.atc-episodes__head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 28px; }
	.atc-episodes__grid { grid-template-columns: 1fr; gap: 20px; }

	/* The mobile artboard turns the cards horizontal: thumbnail left,
	   words right, and no play bar at this size. */
	.atc-episodes__card { flex-direction: row; align-items: stretch; border-radius: 16px; box-shadow: 5px 5px 0 0 var(--atc-black, #0A0A0A); }
	.atc-episodes__art { flex: 0 0 108px; }
	.atc-episodes__art img { height: 100%; aspect-ratio: auto; border-bottom: 0; border-right: 2px solid var(--atc-black, #0A0A0A); }
	.atc-episodes__playbar { display: none; }
	.atc-episodes__body { padding: 14px 16px; }
	.atc-episodes__cardtitle { font-size: 17px; }

	.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-finder__arrow { font-size: 18px; }

	.atc-watch { padding: 56px 20px; }
	.atc-watch__head { gap: 16px; margin-bottom: 24px; }

	.atc-playbook { padding: 56px 20px; }
	.atc-playbook__grid { grid-template-columns: 1fr; gap: 26px; }
	.atc-playbook__art { max-width: 240px; }
	.atc-playbook__player { padding: 10px 14px; }
	.atc-playbook__play { font-size: 11px; letter-spacing: .06em; }
}