/* ATC shared band components.
   ==========================================================================
   Loaded wherever these render: home page, episode and playbook posts.

   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.
   ========================================================================== */

/* ============================================================
   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.
   ============================================================ */

/* ===========================================================================
 * FORM CONTROLS: ALWAYS USE TWO CLASSES. Read this before styling any input,
 * button or select in an ATC component.
 *
 * The parent theme and the Customizer's inline stylesheet both style form
 * controls by ATTRIBUTE SELECTOR:
 *
 *   input[type="text"], input[type="email"], ... { border: ... }
 *   button[type="submit"]                        { color: #fff }
 *
 * Those are specificity (0,1,1). A single class is (0,1,0), so it LOSES, and
 * it loses silently: no error, no warning, and the stylesheet reads correctly.
 * The only way to see it is to inspect the computed style on the rendered page.
 *
 * This has cost real time three times:
 *   - the cheat sheet submit sat WHITE on yellow at 1.27:1 for weeks (phase 2)
 *   - the header SEARCH label shipped white on yellow (5 Sep)
 *   - the search field's border was never once the colour we specified, first
 *     as 2px black and then as a hairline; it wore the theme's rgba(0,0,0,.1)
 *     throughout (5 Sep)
 *
 * THE RULE: scope every form-control declaration with its component's block
 * class as well as the element class, e.g.
 *
 *   .atc-nav .atc-nav__searchfield { ... }     GOOD  (0,2,0), beats (0,1,1)
 *   .atc-nav__searchfield          { ... }     BAD   (0,1,0), silently lost
 *
 * Reach for !important only where two classes still is not enough, which so
 * far is only where the theme itself used !important.
 *
 * CSS cannot un-set another rule, only outrank it, so there is no central
 * reset that makes single-class rules safe. The convention IS the fix.
 * ======================================================================== */

/* ---------- 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 7: Free download
   ============================================================ */

/* THE PATTERN BEHIND THE FREE DOWNLOAD.
   Nathan, 7 Sep. NOT from the design, which leaves this band flat yellow: a
   deliberate addition, recorded so it is not "corrected" back.

   THE BRAND TILE IS WHITE BOLTS ON ELECTRIC YELLOW, and it took two wrong
   assets to get there. pattern-lightning-black.png is an OPAQUE BLACK tile
   whose marks are barely lighter than its own ground, meant to sit ON black:
   used here it did not tint the yellow, it replaced it, and the whole band
   turned black. Black ink on the yellow was legible but wrong: the brand puts
   WHITE bolts on yellow, not black ones.

   THIS TILE IS A RECONSTRUCTION, not the brand file. The real
   lightning-yellow-white.png lives in the Claude Design system; it could not be
   transferred here without hand-copying 65KB of base64, which is not something
   to do by hand for a brand asset. This is built from a single bolt cropped out
   of the design's own triple-lightning-bolt.png, recoloured white and tiled on
   a half-offset grid at the density measured off the real tile: 1920x1080, nine
   columns, bolts about 4% of tile height.

   SWAP IN THE REAL FILE when someone can drop it into assets/img/patterns/.
   The geometry of a single bolt is the design's; the spacing is measured
   rather than exact.

   THE -v2 SUFFIX IS LOAD-BEARING. An earlier, wrong version of this tile
   shipped under the plain name and browsers went on serving it from cache
   long after the file was replaced, so the band showed three giant bolts
   while the server was serving the fine pattern. Replacing an image in place
   does not invalidate anything: the stylesheet's ?ver= only busts the CSS,
   never the images it references. Version the FILENAME when the artwork
   changes.

   OPAQUE ON PURPOSE. The tile carries the band's yellow itself, so there is no
   ink-over-ground blending to get wrong and no opacity to tune. */

.atc-download {
	background-image: url('../img/patterns/lightning-yellow-white-v2.png');
	background-repeat: repeat;
	/* NATIVE SIZE. The tile is drawn at 1920x1080 with the bolts already at the
	   scale the brand uses, so scaling it down shrinks them into specks. */
	background-size: auto;
	background-position: center top;
}

/* The plate must stay opaque over it. It already sets its own background, but
   spelling it out here means a future transparency experiment on the plate
   cannot quietly let the pattern through behind the form. */

.atc-download__plate { background-color: var(--atc-black, #0A0A0A); }

/* PHASE 10: THE COVER MOVED INSIDE THE PLATE.
   The mockup runs this band as two columns, the black plate beside the cover
   sitting on the yellow. Nathan, 5 Sep: "I want the PDF image to be in the
   block." So the outer grid is now a single column and the plate carries the
   two-column split internally.

   A DELIBERATE DEPARTURE FROM THE DESIGN, recorded so nobody restores it. */

.atc-download__grid {
	display: grid;
	grid-template-columns: 1fr;
}

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

	/* Copy on the left, cover on the right, form full width beneath both. The
	   form spanning the whole plate is not incidental: it is the thing the band
	   exists to feed, and giving it the full width keeps it the widest, most
	   obvious target in the block. */
	display: grid;
	grid-template-columns: minmax(0, 1fr) 248px;
	column-gap: 56px;
	align-items: start;
}

/* THE HEADLINE IS MEANT TO WRAP. Nathan, 7 Sep: the cover "looks like it is
   pushed into the corner... I'd rather have the headline come over two lines
   and give that playbook a bit of space." A single long line ran the copy right
   up to the cover and left it wedged against the plate's edge. The narrower
   copy column and the wider gutter do the work; this cap stops a future shorter
   headline from straightening back out and undoing it. */

.atc-download__title { max-width: 20ch; }

.atc-download__badges, .atc-download__title, .atc-download__summary, .atc-download__benefits { grid-column: 1; }

/* Spans from the badge row down past the bullets, so the cover reads against
   the whole block of copy rather than floating beside one paragraph.

   CENTRED IN THAT SPAN, not pinned to its top. With align-self: start the
   cover sat hard against the plate's top-right corner while the copy carried
   on well below it, so it read as stranded rather than paired with the text.
   Nathan, 7 Sep: "make the PDF image a bit more centralised so it's not out
   there on its own." Centring is what actually anchors it, because the copy
   block is taller than the cover. */

.atc-download__cover {
	grid-column: 2;
	grid-row: 1 / span 4;
	align-self: center;
}

.atc-download__embed, .atc-download__note { grid-column: 1 / -1; }

.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. */

/* CENTRED IN A COLUMN WIDER THAN ITSELF, which is what actually fixed the
   "pushed into the corner" look. The first attempt widened the gutter AND the
   cover, and a bigger picture in the same corner reads as more crowded, not
   less. The column is 248px and the cover 196px, so it clears the plate's edge
   by the 34px padding plus 26px of its own, and the yellow shadow has room to
   fall without touching the rim. */

.atc-download__cover {
	display: block;
	position: relative;
	max-width: 196px;
	justify-self: center;
	margin: 0;
}

.atc-download__sheet { position: absolute; display: block; border-radius: 3px; }

/* THE PAPER TREATMENT WAS DRAWN AGAINST YELLOW and now sits on the black
   plate, where #1C1C1C against #0A0A0A is almost invisible. Lifted so the two
   offset sheets still read as paper behind the cover rather than as a smudge. */

/* The paper stack moved to the TOP LEFT. It used to offset down and right,
   which is now where the yellow shadow sits: the two devices were stacked on
   top of each other and the sheets just muddied the yellow. Offsetting the
   other way keeps the "several pages" read and leaves the shadow clean. */

.atc-download__sheet--back { top: -7px; left: -7px; right: 7px; bottom: 7px; background: #2A2A2A; border: 1px solid #444444; }

.atc-download__sheet--mid { top: -3px; left: -3px; right: 3px; bottom: 3px; background: #383838; border: 1px solid #555555; }

.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;
	/* A HARD YELLOW OFFSET, not the soft black one this had. Nathan, 7 Sep:
	   "give the playbook maybe a yellow shadow, not a black shadow, so it
	   stands out from the background." A black shadow on the near-black plate
	   was doing nothing at all. Yellow also puts it back in step with the rest
	   of the page, where every other card uses a hard offset rather than a
	   blur. */
	box-shadow: 10px 10px 0 0 var(--atc-yellow, #FFE600);
}

/* 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-download__title { font-size: 34px; }

	.atc-download__plate { padding: 30px; }

	.atc-download__plate { grid-template-columns: minmax(0, 1fr) 180px; column-gap: 40px; }
}

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

	/* Single column. The plate spanned both tracks anyway, so the two-column
	   grid only ever left the cover stranded on its own row. */

	/* COVER UNDER THE HEADLINE ON MOBILE (Nathan, 5 Sep). The plate collapses
	   to one column and the cover keeps its source position, which is already
	   right after the title. No `order` needed: the markup was written in the
	   mobile order on purpose, and desktop rearranges it with grid-row. */

	.atc-download__plate {
		grid-template-columns: 1fr;
		padding: 24px;
	}

	.atc-download { background-size: 1100px auto; }

	.atc-download__cover {
		grid-column: 1;
		grid-row: auto;
		max-width: 172px;
		margin: 10px 0 26px 8px;
	}

	.atc-download__title { max-width: none; }

	.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; }

/* 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 {
	/* The theme styles button[type="submit"] white at (0,1,1), which beats a
	   single class, so this rendered white on the yellow plate: 1.27 to 1, and
	   unreadable. It has been that way since phase 2, and it took sweeping the
	   rendered page for contrast to find, because the CSS reads correctly on
	   its own. */
	color: var(--atc-black) !important;
	min-height: 56px !important;
}

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

/* ============================================================
   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 {
	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-play--card {
	padding: 9px 14px;
	background: var(--atc-yellow, #FFE600);
	border-bottom: 2px solid var(--atc-black, #0A0A0A);
}

.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; }

.atc-play--row { flex: 0 0 auto; }

.atc-play--row .atc-play__btn { width: 40px; height: 40px; }

.atc-play--row .atc-play__icon { border-width: 6px 0 6px 10px; margin-left: 2px; }

.atc-play--row.is-playing .atc-play__icon { width: 3px; height: 12px; box-shadow: 7px 0 0 0 currentColor; transform: translateX(-3px); }

.atc-play--playbook {
	max-width: 520px;
	padding: 11px 16px;
	background: var(--atc-yellow, #FFE600);
	border-radius: 999px;
}

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

@media only screen and (max-width: 991px) {
	.atc-episodes { padding: 64px 22px; }
}

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

	/* Mobile card: SQUARE artwork left, title beside it with room to be read in
	   full, and the play strip as its own full-width band underneath.

	   The first attempt laid all three out in one row, which gave the play
	   strip a third of the width and squeezed the title into a column so
	   narrow it truncated. Grid puts art and title on row 1 and spans the
	   strip across row 2, so the title gets everything left of the artwork and
	   the strip gets the full card. */

	.atc-episodes__card {
		display: grid;
		grid-template-columns: 104px 1fr;
		grid-template-areas: "art body" "play play";
		align-items: start;
		border-radius: 16px;
		box-shadow: 5px 5px 0 0 var(--atc-black, #0A0A0A);
	}

	/* The cover is SQUARE but the title beside it is not a fixed height: titles
	   in the same row of three run to three, four and five lines. So the cover
	   centres against whatever the title turns out to be, rather than sitting
	   top-aligned above a pocket of empty white.

	   The divider lives on the CELL, not the image, so it still runs the full
	   height of the card while the square cover floats centred inside it.
	   Hard-coding four lines would leave the same gap back on every three-line
	   title, which is most of them. */

	.atc-episodes__art {
		grid-area: art;
		align-self: stretch;
		display: flex;
		align-items: center;
		border-right: 2px solid var(--atc-black, #0A0A0A);
	}

	.atc-episodes__art img {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		border-bottom: 0;
		border-right: 0;
	}

	/* Centre the words against the cover too, so a short title does not hang
	   off the top of a card that the artwork is setting the height of. */

	.atc-episodes__body { align-self: center; }

	.atc-episodes__body { grid-area: body; padding: 12px 14px; }

	.atc-episodes__cardtitle { font-size: 16px; line-height: 1.2; }

	.atc-episodes .atc-episodes__cardmeta { margin-bottom: 6px; font-size: 10px; }

	.atc-play--card {
		grid-area: play;
		padding: 9px 14px;
		border-bottom: 0;
		border-top: 2px solid var(--atc-black, #0A0A0A);
	}

	.atc-play--playbook { order: 5; }

	.atc-play--playbook { padding: 9px 14px; }
}

/* ============================================================
   THE PLAY STRIP — hero, cards and playbook

   Built on a <button>, not an <a>, and that is the fix rather
   than a workaround. The theme paints a background on anchor
   hover (the black box that jutted out under the play circle in
   UAT) and a visited/active colour (the circle and label going
   grey mid-playback). A button inherits neither, so both bugs
   disappear at the source instead of being fought with another
   round of !important.

   The track and the times are real. Position and duration come
   off the audio element once playback starts, so nothing here is
   drawn from invented data. Before the first play the total
   shows --:-- honestly, and fills in the moment metadata loads.
   ============================================================ */

.atc-play {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--atc-font, "Poppins", -apple-system, sans-serif);
}

/* ---------- the button ---------- */

.atc-play__btn {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--atc-black, #0A0A0A);
	color: var(--atc-yellow, #FFE600);
	cursor: pointer;
	transition: transform 200ms var(--atc-ease, cubic-bezier(.22,1,.36,1));
}

.atc-play__btn:hover { transform: scale(1.06); }

.atc-play__btn:focus-visible { outline: 3px solid var(--atc-yellow, #FFE600); outline-offset: 3px; }

.atc-play--card .atc-play__btn:focus-visible, .atc-play--playbook .atc-play__btn:focus-visible { outline-color: var(--atc-black, #0A0A0A); }

/* Play glyph drawn as a triangle, so the strip carries no icon-font
   dependency and cannot inherit the theme's .mf styling. */

.atc-play__icon {
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 0 7px 12px;
	border-color: transparent transparent transparent currentColor;
	margin-left: 3px;
}

/* Pause: two bars, via a box-shadow second bar so it stays one element. */

.atc-play.is-playing .atc-play__icon {
	width: 4px;
	height: 14px;
	margin-left: 0;
	border: 0;
	background: currentColor;
	box-shadow: 8px 0 0 0 currentColor;
	transform: translateX(-4px);
}

.atc-play.is-loading .atc-play__btn { opacity: .55; }

.atc-play.is-error .atc-play__btn { background: var(--atc-ink-500, #767676); cursor: not-allowed; }

/* ---------- label, track, time ---------- */

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

.atc-play__label {
	display: block;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--atc-black, #0A0A0A);
}

.atc-play__track {
	position: relative;
	height: 8px;
	margin-top: 8px;
	border-radius: 999px;
	background: var(--atc-ink-200, #E6E6E6);
	overflow: hidden;
}

.atc-play__fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 999px;
	background: var(--atc-black, #0A0A0A);
	transition: width 220ms linear;
}

.atc-play__time {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
	color: var(--atc-ink-600, #565656);
}

/* ---------- variants ---------- */

.atc-play--hero .atc-play__btn { width: 56px; height: 56px; }

.atc-play--hero .atc-play__label { font-size: 13px; }

.atc-play--card .atc-play__btn { width: 34px; height: 34px; }

.atc-play--card .atc-play__icon { border-width: 5px 0 5px 9px; margin-left: 2px; }

.atc-play--card.is-playing .atc-play__icon { width: 3px; height: 11px; box-shadow: 6px 0 0 0 currentColor; transform: translateX(-3px); }

.atc-play--card .atc-play__label { font-size: 11px; }

.atc-play--card .atc-play__track { height: 6px; margin-top: 6px; background: rgba(10, 10, 10, .25); }

.atc-play--card .atc-play__time { font-size: 10px; }

.atc-play--playbook .atc-play__btn { width: 44px; height: 44px; }

.atc-play--playbook .atc-play__label { font-size: 12px; }

.atc-play--playbook .atc-play__track { background: rgba(10, 10, 10, .25); }

/* The yellow grounds want ink on black, not the ink-600 default. */

.atc-play--card .atc-play__time, .atc-play--playbook .atc-play__time { color: rgba(10, 10, 10, .7); }

@media (prefers-reduced-motion: reduce) {
	.atc-play__btn, .atc-play__fill { transition: none; }
}

@media only screen and (max-width: 767px) {
	.atc-play { gap: 11px; }

	.atc-play--hero .atc-play__btn { width: 48px; height: 48px; }

	.atc-play--hero .atc-play__label { font-size: 12px; letter-spacing: .06em; }

	.atc-play__time { font-size: 10px; }
}

/* A strip whose audio will not load. Better a visible dead control than a
   button that silently does nothing: on 3 Sep a stale Buzzsprout id on staging
   made a content problem look like a broken player. */

.atc-play.is-error .atc-play__label { text-decoration: line-through; opacity: .7; }

@keyframes atc-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ============================================================
   The newsletter, on its own band
   ------------------------------------------------------------
   The band's headline IS the latest issue's headline. That is
   the design's argument: evidence that something went out on
   Monday, rather than a standing ask to subscribe.

   Mockup values: #F2F2F2 ground, two equal columns, 48px gutter,
   34px uppercase 800 headline, and the subscribe card as white
   with a 2px rule and an 8px yellow offset shadow.
   ============================================================ */

.atc-newsletter {
	padding: 80px 24px;
	background: var(--atc-ink-100, #F2F2F2);
}

.atc-newsletter__grid {
	display: grid;
	grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
	gap: 48px;
	align-items: center;
}

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

.atc-newsletter__eyebrowrow .atc-eyebrow { margin: 0; }

/* The design's paper-plane artwork, same reasoning as the speech bubble. */

.atc-newsletter__icon {
	flex: 0 0 auto;
	height: 56px;
	width: auto;
	display: block;
}

.atc-newsletter__title {
	margin: 0 0 12px;
	font-size: clamp(24px, 3.2vw, 34px);
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--atc-black, #0A0A0A);
	text-wrap: balance;
}

.atc-newsletter__standfirst {
	margin: 0 0 16px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--atc-ink-600, #565656);
	max-width: 48ch;
}

.atc-newsletter__read {
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--atc-black, #0A0A0A);
	text-decoration: none;
	border-bottom: 2px solid var(--atc-yellow, #FFE600);
	padding-bottom: 3px;
}

.atc-newsletter__read:hover, .atc-newsletter__read:focus { color: var(--atc-black, #0A0A0A); border-bottom-width: 4px; }

.atc-newsletter__card {
	background: var(--atc-white, #FFFFFF);
	border: 2px solid var(--atc-black, #0A0A0A);
	border-radius: 20px;
	box-shadow: 8px 8px 0 0 var(--atc-yellow, #FFE600);
	padding: 30px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.atc-newsletter__cardtitle {
	margin: 0 0 4px;
	font-size: 22px;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--atc-black, #0A0A0A);
}

/* beehiiv's own subscribe control, which is what actually takes the
   subscription and renders the success state. It reports 52px tall.
   The iframe is left transparent so the card's white ground shows
   through rather than a second panel appearing inside it.

   Anything INSIDE the frame is themed in beehiiv, not here. If the
   field or button look wrong, that is an embed setting in beehiiv. */

.atc-newsletter__embed { width: 100%; }

.atc-newsletter__proof {
	margin: 2px 0 0;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--atc-ink-500, #767676);
}

@media (max-width: 900px) {
	.atc-newsletter__grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 767px) {
	.atc-newsletter { padding: 48px 18px; }
}

/* ---------------------------------------------------------------------------
 * Cheat sheet capture: the beehiiv embed.
 *
 * The hand-built form this band used to carry is gone. Submitting a beehiiv
 * form is what triggers that cheat sheet's delivery automation, so the capture
 * has to BE the beehiiv form rather than post to it. The .atc-download__form,
 * __input and __submit rules further up are now unused; they are left in place
 * because the band's success/note colours still key off the same block.
 *
 * SAME LOADER BUG AS THE FOOTER AND NEWSLETTER. beehiiv's loader nests a sizing
 * div inside a positioning div and leaves the INNER one at height:0, which
 * clips a perfectly correct form to nothing. Both levels have to be unpinned,
 * which is why the selector is not a direct child.
 *
 * These rules live HERE and not in chrome.css, unlike the newsletter's copies
 * of them, because chrome.css only loads under the chrome preview gate while
 * this band loads under the front page gate. Today both gates say yes at the
 * same time; the day they do not, the band would render an invisible form.
 * ------------------------------------------------------------------------- */

.atc-download__embed { width: 100%; }

.atc-download__embed div {
	height: auto !important;
	overflow: visible !important;
}

.atc-download__embed iframe {
	/*
	 * The form is STACKED now, field above a full width button, so this matches
	 * the footer and newsletter frames: field 56 + gap 12 + button 42 = 110,
	 * and 120 leaves room for the success message that replaces it.
	 *
	 * Why stacked. Side by side, the button needed about 134px to keep
	 * "SEND ME THE PDF" on one line and only got 122 at phone width, so it broke
	 * to two lines on every phone. No amount of plate padding could buy that
	 * back: even edge to edge, a 375px screen only reaches about 350. beehiiv's
	 * direction token is not responsive, so it is stacked at every width, which
	 * Nathan preferred to shortening the label.
	 */
	height: 120px !important;
	width: 100%;
	display: block;
	border: 0;
	background: transparent;
	margin: 0;
}

/* The frame above no longer carries 44px of dead space, so the note's original
   16px sat on top of a gap that was already closed. */

.atc-download .atc-download__note { margin-top: 10px; }

/* Episode cards: one line, "Name, Company". */

.atc-episodes__cardguest {
	margin: 6px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--atc-ink-600, #565656);
}

/* ===========================================================================
   EPISODE HERO. From the Episode Page design, "Episode post" screen.

   NOT .atc-hero. That is the home page hero and lives in homepage.css: same
   family, different component. This one carries a breadcrumb and a guest row,
   and its grid is 1.3fr/1fr rather than the home page's ratio. Sharing the
   class would have meant loading homepage.css on every episode to reach it.

   PARAGRAPH COLOUR NEEDS !important AT TWO CLASSES. The Customizer CSS forces
   p colour, and it prints AFTER the stylesheets, so at equal specificity it
   wins. `body.home p` does not match here, but the same trap is one rule away
   and this is the pattern the home page bands settled on after shipping
   black-on-black twice.
   =========================================================================== */
.atc-ephero { padding: 44px 24px 72px; }

.atc-ephero__crumbs {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin: 0 0 34px;
	font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.atc-ephero__crumbs a { color: var(--atc-grey-mid, #767676); text-decoration: none; }
.atc-ephero__crumbs a:hover, .atc-ephero__crumbs a:focus { color: var(--atc-yellow, #FFE600); }
.atc-ephero__crumbnow { color: var(--atc-ink-300, #A3A3A3); }

/* THE META LINE OWNS ROW 1 OF THE LEFT COLUMN, and the cover starts in row 2
   alongside the headline, because the cover should align with the HEADLINE and
   not with the meta line above it.

   Structural rather than a nudge. Pushing the aside down by the 39px the meta
   line currently measures would be correct only while it stays exactly one
   line high; a longer date or a narrower column wraps it and the alignment
   drifts by a line with nothing to show why. As a real grid row, the row's own
   height IS the offset, whatever it turns out to be.

   row-gap is 0 on purpose: the meta line carries its own margin-bottom, and a
   row gap here would add to it rather than replace it. */
.atc-ephero__grid {
	display: grid;
	grid-template-columns: minmax(320px, 1.3fr) minmax(280px, 1fr);
	grid-template-rows: auto 1fr;
	column-gap: 56px; row-gap: 0;
	align-items: start;
}
.atc-ephero__meta  { grid-column: 1; grid-row: 1; }
.atc-ephero__main  { grid-column: 1; grid-row: 2; }
.atc-ephero__aside { grid-column: 2; grid-row: 2; }

.atc-ephero__meta {
	margin: 0 0 18px;
	font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
	color: var(--atc-yellow, #FFE600);
}
.atc-ephero__title {
	margin: 0 0 22px;
	font-size: clamp(34px, 4.4vw, 58px); font-weight: 800;
	letter-spacing: -.02em; text-transform: uppercase;
	color: var(--atc-white, #FFFFFF);
	text-wrap: balance;
}
.atc-ephero__guest {
	margin: 0 0 20px;
	font-size: 18px; font-weight: 800;
	color: var(--atc-white, #FFFFFF);
}
.atc-ephero .atc-ephero__hook {
	margin: 0 0 30px; max-width: 54ch;
	font-size: 19px; line-height: 1.55;
	color: var(--atc-ink-200, #CFCFCF) !important;
}
.atc-ephero__subscribe { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.atc-ephero__subscribelabel {
	font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
	color: var(--atc-ink-300, #A3A3A3);
}
.atc-ephero__platforms { display: flex; gap: 10px; flex-wrap: wrap; }
.atc-ephero__platform {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 11px 18px; border-radius: 999px;
	border: 2px solid var(--atc-white, #FFFFFF);
	font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
	color: var(--atc-white, #FFFFFF); text-decoration: none;
	transition: background 180ms var(--atc-ease, cubic-bezier(.22,1,.36,1)), color 180ms var(--atc-ease, cubic-bezier(.22,1,.36,1));
}
.atc-ephero__platform:hover, .atc-ephero__platform:focus {
	background: var(--atc-white, #FFFFFF); color: var(--atc-black, #0A0A0A);
}
.atc-ephero__platform:focus-visible { outline: 3px solid var(--atc-yellow, #FFE600); outline-offset: 3px; }

.atc-ephero__aside { display: flex; flex-direction: column; gap: 20px; }
.atc-ephero__cover img { display: block; width: 100%; height: auto; border-radius: 20px; }

@media only screen and (max-width: 900px) {
	/* STACK, and put the artwork FIRST. On a narrow screen the cover is the
	   fastest signal of which episode this is, and the design's own mobile
	   artboard leads with it. */
	/* SINGLE COLUMN: release the explicit row/column placement or the meta
	   line and the aside stay pinned to tracks that no longer exist, and the
	   stack comes out in the wrong order. Placement released first, THEN
	   order applied, so the cover still leads on a narrow screen. */
	.atc-ephero__grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 22px; }
	.atc-ephero__grid > * { grid-column: auto; grid-row: auto; }
	.atc-ephero__meta { margin-bottom: 0; }
	.atc-ephero__aside { order: -1; }
	.atc-ephero__cover img { max-width: 320px; margin: 0 auto; }
}
@media only screen and (max-width: 767px) {
	.atc-ephero { padding: 28px 18px 48px; }
	.atc-ephero__crumbs { margin-bottom: 22px; font-size: 10px; }
	.atc-ephero .atc-ephero__hook { font-size: 17px; margin-bottom: 24px; }
	.atc-ephero__subscribe { align-items: flex-start; flex-direction: column; gap: 12px; }
	/* 44px MINIMUM TOUCH TARGET. The theme forces short heights on controls,
	   which put the home page's pills under the threshold on a real phone. */
	.atc-ephero__platform { min-height: 44px; }
}

/* ===========================================================================
   EPISODE PAGE, BELOW THE BODY. Slice 2.

   .atc-episodes__* is reused verbatim for the related row: those rules already
   live in this file because the home page and the post templates share them,
   which is the whole reason the band CSS was split. The tags and the community
   list are new, because the home page equivalents (.atc-finder__chip and the
   .atc-community marquee) live in homepage.css and are a different treatment.
   =========================================================================== */
.atc-eptags { margin: 44px 0 0; padding: 26px 0 0; border-top: 2px solid var(--atc-ink-200, #E6E6E6); }
.atc-eptags__label {
	margin: 0 0 14px;
	font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
	color: var(--atc-ink-600, #565656);
}
/* LIST-STYLE ON THE ITEMS, NOT JUST THE LIST. list-style:none on the ul alone
   left the markers showing, because the theme sets list-style on li directly
   and that wins. ::marker is cleared too, since a browser can still paint one
   from the item's own box. */
.atc-eptags__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.atc-eptags__list li { list-style: none; }
.atc-eptags__list li::marker { content: none; }
.atc-eptags__list li::before { content: none; display: none; }
/* NOT LINKS. A topic has no archive to point at, and a chip that looks
   clickable and is not costs more trust than a plain label. Make them links
   the day topics get their own pages. */
.atc-eptags__tag {
	/* Centred in the pill, per Nathan on 7 Sep. inline-flex so the centring
	   also holds when a long tag wraps to two lines. */
	display: inline-flex; align-items: center; justify-content: center; text-align: center;
	padding: 9px 18px; border-radius: 999px;
	border: 2px solid var(--atc-black, #0A0A0A);
	font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	color: var(--atc-black, #0A0A0A);
}

.atc-eprelated { padding: 56px 24px; background: var(--atc-white, #FFFFFF); }

.atc-eptalk { padding: 56px 24px 64px; background: var(--atc-grey-bg, #F2F2F2); }
.atc-eptalk__title {
	margin: 0 0 22px;
	font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -.02em;
	color: var(--atc-black, #0A0A0A);
}
.atc-eptalk__list { margin: 0 0 26px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.atc-eptalk__item {
	background: var(--atc-white, #FFFFFF);
	border: 2px solid var(--atc-black, #0A0A0A);
	border-radius: 14px;
	padding: 14px 18px;
	font-size: 16px; font-weight: 800;
}
.atc-eptalk__item a { color: var(--atc-black, #0A0A0A); text-decoration: none; }
.atc-eptalk__item a:hover, .atc-eptalk__item a:focus { text-decoration: underline; }

@media only screen and (max-width: 767px) {
	.atc-eprelated { padding: 40px 18px; }
	.atc-eptalk { padding: 40px 18px 48px; }
	/* 44px MINIMUM TOUCH TARGET, the same trap the home page pills hit. */
	.atc-eptags__tag { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ===========================================================================
   EPISODE BODY: the design's two-column grid.

   minmax(320px,1.3fr) / minmax(280px,1fr) is the design's own declaration.
   The rail is sticky so the newsletter and the cheat sheet stay in view down
   a long transcript, which is the point of putting capture in a rail rather
   than at the foot of the page.
   =========================================================================== */
.atc-epbody { padding: 64px 24px 56px; background: var(--atc-white, #FFFFFF); }
.atc-epbody__grid {
	display: grid;
	/* RAIL FIXED AT 340px, not the design's minmax(280px,1fr). The fluid
	   version gave it 448px at 1280 and Nathan asked for it thinner. A fixed
	   rail also stops the reading column shrinking on wider screens: the main
	   column takes the remainder instead of both scaling together. */
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 64px;
	align-items: start;
}
.atc-epbody__heading {
	margin: 0 0 22px;
	font-size: clamp(24px, 2.6vw, 30px); font-weight: 800;
	letter-spacing: -.02em; text-transform: uppercase;
	color: var(--atc-black, #0A0A0A);
}

/* STICKY, but only where there is room to scroll past it. position: sticky on
   a rail taller than the viewport pins it at the wrong point and it never
   moves, so the max-height guard keeps it honest. */
.atc-epbody__rail {
	display: flex; flex-direction: column; gap: 20px;
	/* CLEARS THE STICKY HEADER. .atc-nav is position:sticky, top:0, about 80px
	   tall, so a rail stuck at 24px slid underneath it. Nathan, 7 Sep: "bring
	   down the guest box so that it doesn't overlap the sticky header". The
	   value is the nav's height plus breathing room, not a guess at what
	   looked right. */
	position: sticky; top: 104px;
}
/* THE NEWSLETTER CARD IS YELLOW, not white. Measured off the design:
   background #FFE600, 2px black border, radius 18, padding 24. I built it
   white with a yellow shadow, which is the SPONSOR card's treatment from the
   home page, not this one. */
.atc-eprail__card {
	background: var(--atc-yellow, #FFE600);
	border: 2px solid var(--atc-black, #0A0A0A);
	border-radius: 18px;
	padding: 24px;
}
.atc-eprail__eyebrow {
	display: block; margin: 0 0 14px;
	font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
	color: var(--atc-ink-600, #565656);
}
.atc-eprail__cover {
	display: block; width: 100%; height: auto; margin: 0 0 18px;
	border-radius: 10px;
	box-shadow: 6px 6px 0 0 var(--atc-yellow, #FFE600);
}
.atc-eprail__title {
	margin: 0 0 8px;
	font-size: 20px; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase;
	color: var(--atc-black, #0A0A0A);
}
.atc-eprail .atc-eprail__note,
.atc-eprail__card .atc-eprail__note {
	margin: 0 0 14px;
	font-size: 15px;
	color: var(--atc-ink-700, #2E2E2E) !important;
}

@media only screen and (max-width: 1000px) {
	/* ONE COLUMN, AND THE RAIL STOPS BEING STICKY. A sticky element in a
	   single-column stack pins itself over the content below it. */
	.atc-epbody__grid { grid-template-columns: 1fr; gap: 40px; }
	.atc-epbody__rail { position: static; }
}
@media only screen and (max-width: 767px) {
	.atc-epbody { padding: 40px 18px; }
	.atc-eprail__card { padding: 22px 18px; }
}

/* ---------------------------------------------------------------------------
   GUEST CARD. White with a hard shadow, per the design; the newsletter card
   beside it is the yellow one. Every row is optional, because the data behind
   them arrives at different times.
   --------------------------------------------------------------------------- */
.atc-eprail__card--guest {
	background: var(--atc-white, #FFFFFF);
	border-radius: 18px;
	box-shadow: 6px 6px 0 0 var(--atc-black, #0A0A0A);
}
.atc-eprail__avatar {
	display: block; width: 84px; height: 84px;
	border-radius: 16px; object-fit: cover;
	margin: 0 0 14px;
}
.atc-eprail__guestname {
	margin: 0 0 4px;
	font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em;
	color: var(--atc-black, #0A0A0A);
}
.atc-eprail__guestrole {
	margin: 0 0 12px;
	font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	color: var(--atc-ink-600, #565656);
}
.atc-eprail__card--guest .atc-eprail__guestbio {
	margin: 0 0 18px;
	font-size: 15px; line-height: 1.55;
	color: var(--atc-ink-600, #565656) !important;
}
.atc-eprail__guestlinks { display: flex; flex-wrap: wrap; gap: 8px; }
.atc-eprail__guestlink {
	border: 2px solid var(--atc-black, #0A0A0A);
	border-radius: 999px;
	padding: 11px 16px;
	font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	color: var(--atc-black, #0A0A0A); text-decoration: none;
}
.atc-eprail__guestlink:hover, .atc-eprail__guestlink:focus { background: var(--atc-yellow, #FFE600); }

/* ---------------------------------------------------------------------------
   BEEHIIV IFRAME HEIGHT: A WORKAROUND, AND IT SHOULD NOT BE PERMANENT.

   beehiiv's loader sets the iframe to 2000px, asks the child to measure, and
   applies the answer. In this rail the answer never arrives, so the form sits
   at the 2000px placeholder and the subscribe button is pushed far below the
   card. The two other beehiiv embeds on the same page, in the download band
   and the footer, settle at 120px normally.

   NOT the container: the same failure happens with a different form in this
   slot. NOT width, sticky, or grid blowout; each was tested and ruled out.
   Every dynamic test is useless here, because beehiiv only initialises embeds
   that exist when its loader runs, so an injected embed never sizes whatever
   is wrong with it. That invalidated most of my diagnosis.

   120px is the height these forms settle at everywhere else. Pinning it makes
   the card correct now. Remove this the day the embed sizes itself.
   --------------------------------------------------------------------------- */
.atc-eprail__card iframe[src*="beehiiv"] {
	height: 120px !important;
	min-height: 0;
}
@media only screen and (max-width: 1000px) {
	.atc-eprail__card iframe[src*="beehiiv"] { height: 168px !important; }
}


/* ===========================================================================
   COMMUNITY BAND, moved here from homepage.css on 7 Sep.

   The episode page uses the same scrolling marquee, so this stopped being
   home page property. MOVED, not copied: two marquees drifting apart is the
   trap the parent theme's duplicated min.css already set. The atc-marquee
   keyframes travel with it, because the animation is the component.
   =========================================================================== */

/* ============================================================
   In the community right now
   ------------------------------------------------------------
   Values taken from the Claude Design mockup: white ground,
   80px band padding, the thread list as a marquee between two
   2px black rules, 18px uppercase 800 titles, 10px yellow
   square as the separator, 38s linear loop.

   THE TRACK IS PRINTED TWICE and the animation moves it by
   -50%, which is what makes the loop seamless. The duplicate is
   aria-hidden and untabbable. Do not "tidy up" the second copy.

   The whole marquee stops under prefers-reduced-motion and
   falls back to a wrapping list, because perpetual horizontal
   motion is exactly what that setting exists to switch off.
   ============================================================ */

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

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

/* The design's own speech-bubble artwork. An earlier version drew this
   in CSS to save a request; it did not look like the icon, so the real
   asset wins. width:auto keeps its aspect ratio: the source is 240x181,
   not square, and forcing a square box squashed it. */

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

.atc-community__title {
	margin: 0;
	font-size: clamp(26px, 3.4vw, 36px);
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--atc-black, #0A0A0A);
}

.atc-community__ticker {
	border-top: 2px solid var(--atc-black, #0A0A0A);
	border-bottom: 2px solid var(--atc-black, #0A0A0A);
	padding: 22px 0;
	overflow: hidden;
	margin-bottom: 34px;
}

.atc-community__track {
	display: flex;
	width: max-content;
	gap: 44px;
	animation: atc-marquee 38s linear infinite;
}

.atc-community__ticker:hover .atc-community__track, .atc-community__ticker:focus-within .atc-community__track { animation-play-state: paused; }

.atc-community__set {
	display: flex;
	align-items: center;
	gap: 44px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.atc-community__set li {
	display: flex;
	align-items: center;
	gap: 44px;
}

.atc-community__thread {
	font-size: 18px;
	font-weight: 800;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--atc-black, #0A0A0A);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.atc-community__thread:hover, .atc-community__thread:focus-visible { border-bottom-color: var(--atc-yellow, #FFE600); }

.atc-community__thread:focus-visible { outline: 3px solid var(--atc-yellow, #FFE600); outline-offset: 4px; }

.atc-community__tick {
	flex: 0 0 10px;
	height: 10px;
	background: var(--atc-yellow, #FFE600);
}

.atc-community__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.atc-community__pitch {
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
	color: var(--atc-ink-600, #565656);
	max-width: 56ch;
}

/* Lavender is the community accent in the design system, and this is
   the only band on the page permitted to use it.

   .atc-btn is geometry only and carries NO padding: every modifier
   supplies its own. This one did not, which is why it first rendered as
   a cramped pill with the words against the edges. Padding and the
   offset black shadow match .atc-btn--outline so it reads as the same
   family of control. */

.atc-community__cta {
	flex: 0 0 auto;
	padding: 16px 30px;
	background: var(--atc-lavender, #C2A6FA);
	border: 2px solid var(--atc-black, #0A0A0A);
	color: var(--atc-black, #0A0A0A);
	box-shadow: 4px 4px 0 0 var(--atc-black, #0A0A0A);
}

.atc-community__cta:hover, .atc-community__cta:focus {
	color: var(--atc-black, #0A0A0A);
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 0 var(--atc-black, #0A0A0A);
}

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

@media (prefers-reduced-motion: reduce) {
	.atc-community__track {
		animation: none;
		width: 100%;
		flex-wrap: wrap;
	}

	/* With no motion the second copy is duplicate content, not a loop. */

	.atc-community__set[aria-hidden="true"] { display: none; }

	.atc-community__set { flex-wrap: wrap; gap: 18px 28px; }

	.atc-community__set li { gap: 28px; }

	.atc-community__thread { white-space: normal; }
}

@media (max-width: 767px) {
	.atc-community { padding: 48px 18px; }

	.atc-community__head { gap: 16px; }

	.atc-community__icon { height: 44px; }

	.atc-community__cta { width: 100%; text-align: center; }

	.atc-community__foot { align-items: flex-start; }
}

/* ---------------------------------------------------------------------------
   RAIL PLAY BAR. The hero's play strip scrolls away after the first screen,
   and on a 60 minute episode that is most of the visit. This one rides down
   with the sticky rail so the episode is always one click away.
   --------------------------------------------------------------------------- */
.atc-play--rail {
	display: flex; align-items: center; gap: 14px;
	background: var(--atc-black, #0A0A0A);
	border-radius: 999px;
	padding: 10px 18px 10px 10px;
}
.atc-play--rail .atc-play__btn {
	flex: 0 0 auto; width: 42px; height: 42px;
	background: var(--atc-yellow, #FFE600);
}
.atc-play--rail .atc-play__icon { border-left-color: var(--atc-black, #0A0A0A); }
.atc-play--rail .atc-play__label,
.atc-play--rail .atc-play__time {
	color: var(--atc-white, #FFFFFF) !important;
}
.atc-play--rail .atc-play__label { font-size: 12px; }
.atc-play--rail .atc-play__track { background: rgba(255,255,255,.25); }
.atc-play--rail .atc-play__fill { background: var(--atc-yellow, #FFE600); }

/* The related row gains an eyebrow above its heading, so the head becomes a
   stacked block rather than a single line. */
.atc-eprelated .atc-episodes__headtext { display: flex; flex-direction: column; gap: 8px; }

/* ---------------------------------------------------------------------------
   CONTENTS LIST. Shipped with the markup and no rules at all, so it rendered
   as a raw browser <details> with the default triangle.

   The native marker has to be removed twice: list-style on the summary for
   Firefox and standards browsers, and ::-webkit-details-marker for Safari.
   Removing only one leaves the triangle in the other.
   --------------------------------------------------------------------------- */
.atc-chapters {
	background: var(--atc-white, #FFFFFF);
	border: 2px solid var(--atc-black, #0A0A0A);
	border-radius: 18px;
	overflow: hidden;
}
.atc-chapters__summary {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 16px 18px;
	cursor: pointer;
	list-style: none;
	font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
	color: var(--atc-black, #0A0A0A);
}
.atc-chapters__summary::-webkit-details-marker { display: none; }
.atc-chapters__summary:focus-visible {
	outline: 3px solid var(--atc-yellow, #FFE600); outline-offset: -3px;
}
.atc-chapters__summary:hover { background: var(--atc-yellow, #FFE600); }

/* The count doubles as the disclosure indicator: the chevron after it turns
   when the list opens, so there is one control rather than two things to read. */
.atc-chapters__count {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 11px; font-weight: 800;
	color: var(--atc-ink-600, #565656);
}
.atc-chapters__count::after {
	content: ""; width: 8px; height: 8px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); margin-top: -3px;
	transition: transform 160ms var(--atc-ease, cubic-bezier(.22,1,.36,1));
}
.atc-chapters[open] .atc-chapters__count::after { transform: rotate(-135deg); margin-top: 2px; }

.atc-chapters__list {
	margin: 0; padding: 6px 0 10px;
	list-style: none;
	counter-reset: atc-ch;
	border-top: 2px solid var(--atc-black, #0A0A0A);
}
.atc-chapters__item { list-style: none; counter-increment: atc-ch; }
.atc-chapters__item::marker { content: none; }

.atc-chapters__link {
	display: flex; gap: 10px; align-items: baseline;
	padding: 9px 18px;
	font-size: 14px; line-height: 1.4; font-weight: 600;
	color: var(--atc-black, #0A0A0A); text-decoration: none;
}
/* The number comes from a counter, not the markup, so a row that later gains a
   timestamp can drop it without renumbering anything. */
.atc-chapters__link::before {
	content: counter(atc-ch);
	flex: 0 0 auto; min-width: 18px;
	font-size: 11px; font-weight: 800;
	color: var(--atc-ink-300, #A3A3A3);
}
.atc-chapters__link:hover, .atc-chapters__link:focus {
	background: var(--atc-yellow, #FFE600);
	text-decoration: none;
}
.atc-chapters__time {
	flex: 0 0 auto;
	font-size: 11px; font-weight: 800; letter-spacing: .06em;
	color: var(--atc-ink-600, #565656);
	font-variant-numeric: tabular-nums;
}
.atc-chapters__label { flex: 1 1 auto; }

@media (prefers-reduced-motion: reduce) {
	.atc-chapters__count::after { transition: none; }
}

/* ---------------------------------------------------------------------------
   TRANSCRIPT. Same disclosure pattern as the contents list, in the article
   rather than the rail, and quieter: this is reference material, not a
   feature. Grey ground so it reads as an appendix to the write-up above it.
   --------------------------------------------------------------------------- */
.atc-transcript {
	max-width: var(--atc-measure, 680px);
	margin: 40px 0 0;
	background: var(--atc-ink-100, #F2F2F2);
	border: 2px solid var(--atc-black, #0A0A0A);
	border-radius: 16px;
	overflow: hidden;
}
.atc-transcript__summary {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 16px 20px;
	cursor: pointer;
	list-style: none;
	font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
	color: var(--atc-black, #0A0A0A);
}
.atc-transcript__summary::-webkit-details-marker { display: none; }
.atc-transcript__summary:hover { background: var(--atc-yellow, #FFE600); }
.atc-transcript__summary:focus-visible { outline: 3px solid var(--atc-yellow, #FFE600); outline-offset: -3px; }

/* SAYS IT IS AUTO-GENERATED, on the summary rather than buried at the end.
   These are real people's words transcribed by machine, with the errors that
   implies, and the reader should know that before reading rather than after. */
.atc-transcript__hint {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 10px; font-weight: 800; letter-spacing: .1em;
	color: var(--atc-ink-600, #565656);
}
.atc-transcript__hint::after {
	content: ""; width: 8px; height: 8px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); margin-top: -3px;
	transition: transform 160ms var(--atc-ease, cubic-bezier(.22,1,.36,1));
}
.atc-transcript[open] .atc-transcript__hint::after { transform: rotate(-135deg); margin-top: 2px; }

/* CAPPED AND SCROLLABLE. 7,000 words unrolled pushes every band below it off
   the bottom of the page; the reader loses the related episodes, the community
   and the footer behind a wall of speech. */
.atc-transcript__body {
	max-height: 70vh;
	overflow-y: auto;
	padding: 4px 20px 20px;
	border-top: 2px solid var(--atc-black, #0A0A0A);
	background: var(--atc-white, #FFFFFF);
}
.atc-transcript__body p {
	margin: 0 0 14px;
	font-size: 15px; line-height: 1.6;
	color: var(--atc-ink-700, #2E2E2E) !important;
}
/* The speaker name is the only thing scanned when skimming a transcript. */
.atc-transcript__body p b {
	display: inline-block; margin-right: 4px;
	font-weight: 800;
	color: var(--atc-black, #0A0A0A);
}

@media only screen and (max-width: 767px) {
	.atc-transcript__body { max-height: 60vh; padding: 4px 14px 16px; }
	.atc-transcript__summary { padding: 14px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
	.atc-transcript__hint::after { transition: none; }
}

/* ---------------------------------------------------------------------------
   SPONSOR BAND ON POST PAGES: flat, not a card.

   Scoped to .atc-epsponsors so the home page keeps the bordered card, which is
   its signed-off treatment. Here the same markup loses the frame: no border,
   no shadow, no white plate.

   The badge stops being a pill too. It straddles the card's top rule by
   design, and a pill floating where there is no longer a rule to straddle
   reads as a leftover rather than a label.
   --------------------------------------------------------------------------- */
.atc-epsponsors .atc-sb--gold { padding: 8px 24px 48px; }
.atc-epsponsors .atc-sb__card {
	background: transparent;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	text-align: center;
}
.atc-epsponsors .atc-sb__badge {
	position: static;
	display: block;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0 0 22px;
	color: var(--atc-ink-600, #565656);
	font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.atc-epsponsors .atc-sb__caption { margin-top: 20px; }

@media only screen and (max-width: 767px) {
	.atc-epsponsors .atc-sb--gold { padding: 4px 18px 36px; }
}

/* ---------------------------------------------------------------------------
   ANCHOR TARGETS CLEAR THE STICKY HEADER.

   .atc-nav is sticky at top 0 and about 80px tall, so a contents-list click
   scrolled the heading to y=0 and straight underneath it: the reader landed
   on a heading they could not see. scroll-margin-top reserves that space on
   the TARGET, which is the only fix that works for both a click and a page
   loaded with a #hash already in the URL.
   --------------------------------------------------------------------------- */
.entry-content h2[id],
.entry-content h3[id],
.atc-epbody__main h2[id],
.atc-epbody__main h3[id] {
	scroll-margin-top: 104px;
}

/* ---------------------------------------------------------------------------
   SEPARATION BELOW THE ARTICLE.

   Everything under the body was white on white on white: the article ran into
   the sponsors, into the related row, into the community, and only the footer
   changed tone. Nathan, 7 Sep: "it's all a bit white at the bottom".

   A rule ends the article, then the grounds alternate, so each band reads as a
   separate thing rather than more page.
   --------------------------------------------------------------------------- */
.atc-epsponsors {
	border-top: 2px solid var(--atc-black, #0A0A0A);
	margin-top: 8px;
}
.atc-eprelated {
	background: var(--atc-ink-100, #F2F2F2);
	border-top: 2px solid var(--atc-ink-200, #E6E6E6);
}
/* The community band closes the page against the black footer, so it keeps a
   white ground and a rule of its own rather than sitting in the same grey as
   the row above it. */
body.single-post .atc-community {
	background: var(--atc-white, #FFFFFF);
	border-top: 2px solid var(--atc-ink-200, #E6E6E6);
	border-bottom: 2px solid var(--atc-black, #0A0A0A);
}