/*
Theme Name: Beyond the Mic
Theme URI: https://beyondthemic.com
Author: Dog Drool Holdings
Description: Custom block theme for Beyond the Mic with Sean Dillon. Warm cinematic archive of remarkable human stories. Design per docs/mockup-style-map.md (BTM-10).
Version: 0.3.0
Requires at least: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: btm-theme
*/

/* ---------- document chrome: dark scrollbars/UA widgets on a dark site ---------- */
html{
	color-scheme:dark;
	background:#100c09;
	scrollbar-color:#4a3a24 #14100a;
}
::-webkit-scrollbar{width:13px;height:13px;background:#14100a;}
::-webkit-scrollbar-thumb{background:#4a3a24;border-radius:7px;border:3px solid #14100a;}
::-webkit-scrollbar-thumb:hover{background:#5d4a2e;}

/* ---------- shared vocabulary ---------- */
.btm-wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
.btm-grid-featured{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;}
.btm-grid-studio{display:grid;grid-template-columns:auto 1fr auto;gap:52px;align-items:center;}
.btm-grid-subscribe{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center;}
/* BTM-108: flex, not a fixed grid track count — the Explore and Connect
   columns each omit themselves (heading included) when their one link
   isn't live yet, and flex lets the remaining columns take the freed
   width instead of leaving a hole where a fixed grid track would. */
.btm-grid-footer{display:flex;flex-wrap:wrap;gap:40px;}
.btm-foot-brandwrap{flex:1 1 170px;}
.btm-foot-blurbwrap{flex:1.3 1 220px;}
.btm-foot-col{flex:1 1 150px;}
.btm-kicker{
	font-family:var(--wp--preset--font-family--display);
	font-weight:600;font-size:14px;letter-spacing:.22em;text-transform:uppercase;
	color:var(--wp--preset--color--gold-on-dark);
}
.btm-on-cream .btm-kicker,.btm-studio .btm-kicker{color:var(--wp--preset--color--gold-on-cream);}
.btm-kicker-rule::after{content:"";display:block;width:46px;height:2px;background:var(--wp--preset--color--gold);margin-top:10px;}
.btm-btn{
	display:inline-block;font-family:var(--wp--preset--font-family--display);
	font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;
	padding:13px 24px;text-decoration:none;border-radius:9px;transition:background .2s,color .2s,border-color .2s;
}
.btm-btn-gold{background:var(--wp--preset--color--gold);color:#181008;}
.btm-btn-gold:hover{background:var(--wp--preset--color--gold-on-dark);color:#181008;}
.btm-btn-line{border:1px solid rgba(242,234,217,.32);color:var(--wp--preset--color--ivory);}
.btm-btn-line:hover{border-color:var(--wp--preset--color--gold);color:var(--wp--preset--color--gold-on-dark);}
.btm-on-cream .btm-btn-line{border-color:#c9baa0;color:var(--wp--preset--color--ink-text);}
.btm-on-cream .btm-btn-line:hover{border-color:var(--wp--preset--color--gold-deep);color:var(--wp--preset--color--gold-on-cream);}

/* duotone unification for mixed thumbnails */
.btm-duo img{filter:grayscale(1) sepia(.62) saturate(1.85) hue-rotate(-12deg) brightness(.82) contrast(1.1);}
.btm-duo{background:#0d0906;}

/* photo credit line (renders only when credit exists — BTM-22) */
.btm-credit{font-family:var(--wp--preset--font-family--sans);font-size:11px;color:var(--wp--preset--color--taupe-dim);letter-spacing:.04em;}
/* episode-art credit modifier (BTM-22, design v4 approved by Reid+Sean 2026-09-11):
   phones 9px/.6, desktop (>=960px) 8px/.5 — quieter than the base .btm-credit line. */
.btm-episode-credit{margin:6px 0 0;font-size:9px;letter-spacing:.02em;opacity:.6}
@media (min-width:960px){.btm-episode-credit{font-size:8px;opacity:.5}}

/* visually-hidden label text (BTM-114): the standard WP recipe (matches
   get_search_form()'s own markup expectations) — off-screen until focused,
   never affects layout. */
.screen-reader-text{
	border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;
	overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;
}

/* ---------- header: brand left, nav right; floats over the hero on home ---------- */
.btm-header{background:rgba(16,12,9,.96);border-bottom:1px solid var(--wp--preset--color--ink-3);}
.btm-header a{text-decoration:none;}
/* full-bleed row, left-anchored — brand is quiet typeset site chrome */
/* BTM-202 (Reid, 2026-09-08): 20/16 -> 8/8 so the 84px lockup sits in a 100px row, 2px taller than the typeset brand's 98px — nothing below it moves. */
.btm-header-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:8px clamp(32px,4.5vw,84px) 8px;}
.btm-brand{display:block;line-height:0;}
.btm-brand img{display:block;height:84px;width:auto;}
/* BTM-244 (Reid, 2026-10-06): home only — the hero wordmark is gone and the lockup (lockup-cream-home-2x.png) grows into its space: top 16px, bottom about where the wordmark's bottom was. The h1 wrapper is layout-neutral and the img's negative bottom margin keeps its margin box at the row's 84px, so the nav, search icon and Listen now never re-center. */
.home .btm-brand-h1{margin:0;padding:0;font-size:inherit;line-height:0;flex:none;}
.home .btm-brand img{--btm-logo-h:calc(110px + 1.96*clamp(46px,5.5vw,64px));height:var(--btm-logo-h);width:auto;max-width:none;margin:8px 0 calc(76px - var(--btm-logo-h));}
.btm-brand-name{
	display:block;font-family:var(--wp--preset--font-family--serif);
	font-size:19px;line-height:1.05;letter-spacing:.12em;text-transform:uppercase;
	color:var(--wp--preset--color--ivory);
}
.btm-brand-credit{
	display:block;font-family:var(--wp--preset--font-family--display);font-weight:600;
	font-size:10px;letter-spacing:.32em;text-transform:uppercase;
	color:var(--wp--preset--color--gold-on-dark);margin-top:6px;
}
.home .btm-header{
	position:absolute;left:0;right:0;top:0;z-index:20;
	background:linear-gradient(180deg,rgba(16,12,9,.5) 0%,rgba(16,12,9,0) 100%);
	border-bottom:0;
}
.btm-nav{display:flex;align-items:center;flex-wrap:wrap;gap:26px;}
.btm-nav a{
	font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:14px;
	letter-spacing:.14em;text-transform:uppercase;color:var(--wp--preset--color--taupe);
}
.btm-nav a:hover{color:var(--wp--preset--color--ivory);}
.btm-nav a.btm-btn{color:#181008;}

/* BTM-113: mobile nav toggle + panel, unlocked at the 960px breakpoint
   below. Both are inert above 960px: the button stays display:none and
   .btm-nav-panel is display:contents, which drops the wrapper out of the
   box tree entirely so today's flex layout of the three links + Listen
   button is byte-for-byte unchanged on desktop. */
.btm-nav-toggle{
	display:none;flex-direction:column;align-items:center;justify-content:center;
	gap:5px;width:44px;height:44px;margin-left:auto;
	background:transparent;border:0;border-radius:9px;padding:0;cursor:pointer;
}
.btm-nav-toggle span{
	display:block;width:22px;height:2px;background:var(--wp--preset--color--ivory);
	transition:transform .22s ease,opacity .22s ease;
}
.btm-nav-toggle:hover span{background:var(--wp--preset--color--gold-on-dark);}
.btm-nav-toggle:focus-visible{outline:2px solid var(--wp--preset--color--gold);outline-offset:3px;}
.btm-nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.btm-nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.btm-nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.btm-nav-panel{display:contents;}

/* ---------- search entry + overlay (BTM-114) ----------
   Desktop icon (#btm-search-open) lives in the nav row, left of Listen
   Now; mobile swaps to an inline field at the top of #btm-nav-panel — see
   the max-width:960px block below for the swap. The overlay itself is a
   single instance, opened only from the desktop icon. */
.btm-search-toggle{
	display:inline-flex;align-items:center;justify-content:center;
	width:38px;height:38px;border-radius:9px;color:var(--wp--preset--color--taupe);
	transition:color .2s;
}
.btm-search-toggle:hover{color:var(--wp--preset--color--gold-on-dark);}
.btm-search-toggle:focus-visible{outline:2px solid var(--wp--preset--color--gold);outline-offset:2px;color:var(--wp--preset--color--gold-on-dark);}
.btm-search-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;}

/* mobile inline field (shown only <=960px, inside #btm-nav-panel) */
.btm-nav-search{display:none;}

.btm-search-overlay{
	position:fixed;inset:0;z-index:100;
	display:flex;align-items:flex-start;justify-content:center;
	padding:14vh 24px 24px;overflow-y:auto;
	background:rgba(16,12,9,.86);
	opacity:0;transition:opacity .22s ease;
}
/* The [hidden] attribute is how JS/no-JS toggle the overlay, but
   `display:flex` above has equal specificity to the UA stylesheet's
   `[hidden]{display:none}` and author styles win ties — without this,
   a "hidden" overlay still lays out at full-viewport size (position:
   fixed;inset:0) and silently eats clicks/taps on whatever sits under it.
   Caught live: #btm-search-open was unclickable end-to-end. */
.btm-search-overlay[hidden]{display:none;}
.btm-search-overlay.is-open{opacity:1;}
.btm-search-panel{
	position:relative;width:100%;max-width:560px;
	background:var(--wp--preset--color--ink-2);
	border:1px solid var(--wp--preset--color--ink-3);border-radius:12px;
	padding:32px clamp(20px,4vw,32px) 28px;
	transform:translateY(-12px);transition:transform .22s ease;
}
.btm-search-overlay.is-open .btm-search-panel{transform:translateY(0);}
.btm-search-close{
	position:absolute;top:14px;right:14px;width:36px;height:36px;
	display:inline-flex;align-items:center;justify-content:center;
	background:transparent;border:0;border-radius:8px;color:var(--wp--preset--color--taupe);cursor:pointer;
}
.btm-search-close:hover{color:var(--wp--preset--color--gold-on-dark);}
.btm-search-close:focus-visible{outline:2px solid var(--wp--preset--color--gold);outline-offset:2px;}
.btm-search-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;}
.btm-search-form{display:flex;gap:12px;margin-top:8px;}
.btm-search-form input[type=search],
.btm-nav-search input[type=search],
.btm-search-refine input[type=search]{
	appearance:none;-webkit-appearance:none;
}
.btm-search-form input[type=search]{
	flex:1;min-width:0;background:var(--wp--preset--color--cream);color:var(--wp--preset--color--ink-text);
	border:1px solid var(--wp--preset--color--cream-line);border-radius:9px;
	font-family:var(--wp--preset--font-family--sans);font-size:16px;
	padding:13px 16px;outline:none;
}
.btm-search-form input[type=search]::placeholder{color:var(--wp--preset--color--ink-muted);}
.btm-search-form input[type=search]:focus-visible{
	outline:2px solid var(--wp--preset--color--gold);outline-offset:2px;border-color:var(--wp--preset--color--gold);
}
/* body scroll lock while the overlay is open */
html.btm-search-lock,html.btm-search-lock body{overflow:hidden;}

/* results-page refine form (patterns/search-header.php): reuses the
   subscribe strip's .btm-field idiom (style guide §7) rather than a new
   component — hairline box, transparent input, solid gold button — just
   widened for a search query. */
/* .btm-field.btm-search-refine (not .btm-search-refine alone): .btm-field's
   own max-width:340px is declared later in this file, so a single-class
   override here would lose the cascade on source order alone despite equal
   specificity — the compound selector wins on specificity instead, order
   notwithstanding. */
.btm-field.btm-search-refine{max-width:480px;margin-top:22px;}
.btm-search-refine input[type=search]:focus-visible{
	outline:2px solid var(--wp--preset--color--gold);outline-offset:-2px;
}

/* 404 page's refine form (patterns/notfound.php, BTM-114): same
   .btm-field.btm-search-refine markup as the results page (shared via
   functions.php's btm_search_form_markup()), placed under the button row
   instead of a page head — wider and a touch more breathing room per
   Reid's approved mockup. Three classes beats the base rule's two on
   specificity alone, so this wins regardless of source order — same
   compound-selector reasoning as the base rule's own note above. */
.btm-field.btm-search-refine.btm-notfound-search{max-width:560px;margin-top:26px;}

.btm-search-head{margin-bottom:44px;}
.btm-search-head .btm-single-meta{margin:14px 0 0;}
.btm-search-head .btm-tagline{margin-top:20px;}

/* ---------- hero: left-anchored, banner full-bleed right (mockup model) ---------- */
.btm-hero{position:relative;overflow:hidden;background:var(--wp--preset--color--ink);}
.btm-hero-banner{
	position:absolute;inset:0;
	/* BTM-198 (Reid's review, 2026-09-08): cover cropped the D-104 composition
	   to the mic head at 1920px and wider. Sized by the hero's height the
	   whole image (head, stem, lamp glow, left melt) shows at every width;
	   anchored 80% toward the right so the mic sits right of the copy; the
	   image carries its own edge melts to ink, so its edges never show as a
	   seam. The <=960px block below has its own framing. */
	background-size:auto 100%;background-position:80% 0;background-repeat:no-repeat;
	background-image:
		radial-gradient(90% 75% at 70% 42%, rgba(74,52,28,.55) 0%, rgba(42,30,18,.28) 45%, rgba(16,11,7,0) 72%),
		radial-gradient(120% 120% at 68% 40%, #2a1e12 0%, #170f09 62%, #100b07 100%);
}
/* the melt: image fades under the text and into the ink — no seams, no borders */
.btm-hero-veil{position:absolute;inset:0;background:
	linear-gradient(90deg, #100c09 0%, #100c09 26%, rgba(16,12,9,.86) 42%, rgba(16,12,9,.35) 58%, rgba(16,12,9,.06) 74%, rgba(16,12,9,.28) 100%),
	linear-gradient(180deg, rgba(16,12,9,.55) 0%, rgba(16,12,9,0) 22%, rgba(16,12,9,0) 58%, #100c09 97%);}
/* BTM-62 (Reid, 2026-09-06): the hero used to eat the whole desktop fold —
   794px at 1440x900, so the Featured Conversation band opened below it and
   was entirely off-screen on a 1366x768 laptop. With the people-free hero
   there is no cast of faces that needs the room. A first pass took it to
   650px; Reid: "tighten it up a bit. It's a little too tall for what it is.
   That may change later when we add actual people to it." — so this second
   pass lands at ~583px. The top padding clears the floating header (98px) by
   36px, the wordmark is two clamp steps down from where it started, and the
   copy rhythm is tight. Every line stays readable and the CTAs stay on one
   row at 1440 and 1366. If people come back into the hero, this whole block
   is the thing to loosen again. */
.btm-hero-inner{position:relative;z-index:2;padding:110px clamp(32px,4.5vw,84px) 44px;}
/* BTM-244 (Reid, 2026-10-06): the .btm-wordmark h1 (clamp(46px,5.5vw,64px), line-height .98, two lines) is gone; this empty box keeps its exact height, so everything below it holds its position at every desktop width. */
.home .btm-wordmark-space{height:calc(1.96*clamp(46px,5.5vw,64px));}
.btm-subhead{
	font-family:var(--wp--preset--font-family--display);font-weight:600;
	font-size:17px;letter-spacing:.2em;text-transform:uppercase;
	/* BTM-12: max-width 420px -> 480px. Real Oswald is wider than the
	   DIN Condensed/Arial Narrow fallback it replaced, so "SMART
	   CONVERSATIONS THAT STAY WITH YOU." wrapped to a second line at
	   1440/1366, adding 27px to .btm-hero's height (Reid approved 584px
	   there, 2026-09-06). 480px is the minimum width that keeps it on one
	   line — tested in 20px steps (440 still wraps, 480 doesn't). Inert at
	   ≤960px: the hero-inner's own padding already leaves less than 420px
	   of room there, so mobile is unaffected either way. No other BTM-62
	   hero constant (padding, wordmark clamp, margins, button row) touched.
	*/
	color:var(--wp--preset--color--gold-on-dark);max-width:480px;line-height:1.6;margin:14px 0 0;
}
.btm-tagline{font-size:19px;line-height:1.55;color:#ece2cc;max-width:34ch;margin:13px 0 0;}
/* BTM-312 (Reid, 2026-11-14): the guest line sits on ONE line wherever the column is wide enough (it needs about 462px; max-width was 460px, which dropped "KNOW." alone to a second line). On phones it cannot fit, so text-wrap:balance breaks it as two even lines ("ACTORS, AUTHORS, ARTISTS." / "PEOPLE YOU NEED TO KNOW."). */
.btm-facets{
	font-family:var(--wp--preset--font-family--sans);font-size:12.5px;
	letter-spacing:.16em;text-transform:uppercase;color:var(--wp--preset--color--taupe);
	max-width:none;line-height:1.9;margin:13px 0 0;text-wrap:balance;
}
.btm-hosted{
	font-family:var(--wp--preset--font-family--display);font-weight:600;
	font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;
	color:var(--wp--preset--color--gold-on-dark);margin:11px 0 0;
}
.btm-hero-desc{font-family:var(--wp--preset--font-family--sans);font-size:14px;color:var(--wp--preset--color--taupe);max-width:46ch;margin:14px 0 0;}
.btm-slotnote{position:absolute;right:16px;bottom:12px;z-index:2;font-family:var(--wp--preset--font-family--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,234,217,.45);}

/* ---------- sections ---------- */
.btm-sec{padding:78px 0;}
.btm-on-cream{background:var(--wp--preset--color--cream);color:var(--wp--preset--color--ink-text);}
.btm-on-cream h1,.btm-on-cream h2,.btm-on-cream h3{color:var(--wp--preset--color--ink-text);}
.btm-on-cream p{color:var(--wp--preset--color--ink-body);}
.btm-on-cream a{color:var(--wp--preset--color--gold-on-cream);}

/* centered section head — serif letterspaced caps between hairlines */
.btm-center-head{
	display:flex;align-items:center;gap:28px;
	font-family:var(--wp--preset--font-family--serif);font-weight:400;
	font-size:21px;letter-spacing:.22em;text-transform:uppercase;
	color:var(--wp--preset--color--ink-text);text-align:center;margin:0;
}
.btm-center-head::before,.btm-center-head::after{content:"";flex:1;height:1px;background:var(--wp--preset--color--cream-line);}

/* featured conversation */
.btm-featured-quote{
	font-style:italic;font-size:21px;line-height:1.4;color:#443b2c;
	border-left:2px solid var(--wp--preset--color--gold);padding-left:18px;margin:20px 0 0;
}
/* BTM-12: featured portrait column widened 290->360 max so the current-
   episode art reads clearly senior to the Start Here archive cards
   (candidate A capped those to ~212px); the New Episodes column gives up
   50px of its own max (290->240) to pay for it, leaving the 1.5fr
   headline column ~512px->~492px — a ~4% narrowing, still comfortably
   readable. Mobile is untouched: the 960px media query below collapses
   this to a single column regardless of these values. */
.btm-grid-featured3{display:grid;grid-template-columns:minmax(300px,360px) 1.5fr minmax(200px,240px);gap:44px;align-items:start;}
.btm-epi-col{border-left:1px solid var(--wp--preset--color--cream-line);padding-left:36px;}
.btm-epi-list{list-style:none;margin:20px 0 0;padding:0;}
.btm-epi-list li{margin:0 0 18px;}
.btm-epi-list a{display:flex;gap:14px;align-items:center;text-decoration:none;}
.btm-epi-thumb{flex:none;width:56px;height:56px;border-radius:9px;overflow:hidden;background:#1a130c;}
/* BTM-207 (2026-09-08): portraits are pre-graded files (portrait-style.py); the CSS grade would apply twice. */
.btm-epi-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.btm-epi-title{font-family:var(--wp--preset--font-family--sans);font-size:13.5px;line-height:1.45;color:var(--wp--preset--color--ink-body);}
.btm-epi-list a:hover .btm-epi-title{color:var(--wp--preset--color--gold-on-cream);}
.btm-epi-all{font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--wp--preset--color--gold-on-cream);text-decoration:none;}
.btm-featured-slot{
	aspect-ratio:4/5;border-radius:12px;
	background:linear-gradient(160deg,#241a10 0%,#120c07 70%,#0d0805 100%);
	overflow:hidden;
}
.btm-featured-slot img{width:100%;height:100%;object-fit:cover;display:block;}
/* BTM-207 (2026-09-08): portraits are pre-graded files (portrait-style.py); the CSS grade would apply twice. */

/* Responsive embeds (BTM-186). add_theme_support('responsive-embeds')
   (functions.php btm_theme_setup()) only adds a `wp-embed-responsive` class
   to <body> — checked live on dev 2026-09-05: it ships no CSS of its own.
   This is the theme's half of the contract, verbatim from core's own
   how-to guide (developer.wordpress.org, "Theme support: Responsive
   embedded content"): scoped under body.wp-embed-responsive so it only
   ever touches a core embed block WP itself marked with the aspect
   classes below. Confirmed live: this alone fixes the two measured core
   embed-block overflows (post 3459's YouTube block, post 3851's Vimeo
   block) — their iframes keep their fixed width/height attributes, but
   the padding-top box now sizes them. It does NOT touch a bare pasted
   `<iframe>` with no wp-block-embed wrapper (post 12169's YouTube iframe,
   the shape btm_responsive_content_embeds() below handles). */
.wp-embed-responsive .wp-has-aspect-ratio{overflow:hidden;position:relative;}
.wp-embed-responsive .wp-has-aspect-ratio iframe,
.wp-embed-responsive .wp-has-aspect-ratio object,
.wp-embed-responsive .wp-has-aspect-ratio embed{position:absolute;top:0;left:0;width:100%;height:100%;}
.wp-embed-responsive .wp-embed-aspect-21-9 .wp-block-embed__wrapper{padding-top:42.85%;}
.wp-embed-responsive .wp-embed-aspect-18-9 .wp-block-embed__wrapper{padding-top:50%;}
.wp-embed-responsive .wp-embed-aspect-16-9 .wp-block-embed__wrapper{padding-top:56.25%;}
.wp-embed-responsive .wp-embed-aspect-4-3 .wp-block-embed__wrapper{padding-top:75%;}
.wp-embed-responsive .wp-embed-aspect-1-1 .wp-block-embed__wrapper{padding-top:100%;}
.wp-embed-responsive .wp-embed-aspect-9-16 .wp-block-embed__wrapper{padding-top:177.77%;}
.wp-embed-responsive .wp-embed-aspect-1-2 .wp-block-embed__wrapper{padding-top:200%;}

/* Fixed-width legacy iframes with no core wrapper (BTM-186): the render-time
   splice in btm_responsive_content_embeds() (functions.php) wraps each one
   in `<div class="btm-embed" style="aspect-ratio: W / H">` and drops the
   iframe's own width/height so this sizes it instead. */
.btm-embed{max-width:100%;}
.btm-embed iframe{width:100%;height:100%;}

/* latest-conversation band extras (BTM-107): native player + follow row.
   The audio element is the page's only media widget and sits on cream, so
   it opts out of the site-wide dark color-scheme — without this the UA
   draws dark controls on the light field. */
.btm-player{margin:22px 0 0;}
.btm-player audio{display:block;width:100%;max-width:560px;color-scheme:light;}
.btm-latest-guest{
	font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:12.5px;
	letter-spacing:.14em;text-transform:uppercase;color:var(--wp--preset--color--gold-on-cream);
	margin:10px 0 0;
}
/* follow-the-show: plain links as quiet pills — no badge widgets (rule 2) */
.btm-follow{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin-top:22px;}
.btm-follow-label{
	font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:11px;
	letter-spacing:.16em;text-transform:uppercase;color:var(--wp--preset--color--ink-muted);
	flex-basis:100%;margin:0;
}
/* BTM-203 (2026-09-08): the label's flex-basis:100% gives it its own line and this zero-height item forces the wrap after Spotify. Row-gap is 0 and each pill carries its own 10px margin-top instead, because a flex row-gap also surrounds the empty break line and doubled the space between the two pill rows (measured 20px on dev). */
.btm-follow-br{flex-basis:100%;height:0;}
.btm-follow a{
	font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:12px;
	letter-spacing:.1em;text-transform:uppercase;color:var(--wp--preset--color--ink-text);
	border:1px solid #c9baa0;padding:7px 13px;text-decoration:none;border-radius:7px;
	margin-top:8px;
}
.btm-follow a:hover{border-color:var(--wp--preset--color--gold-deep);color:var(--wp--preset--color--gold-on-cream);}

/* start here — Sean's curated six; intro line is his, verbatim */
.btm-start-intro{
	font-style:italic;font-size:17px;line-height:1.5;text-align:center;
	color:var(--wp--preset--color--ink-muted);max-width:52ch;margin:18px auto 0;
}
.btm-cards.btm-cards-6{grid-template-columns:repeat(3,1fr);max-width:680px;margin-inline:auto;} /* compound beats the 4-col base below regardless of order; BTM-12: capped so archive-card art reads subordinate to the featured portrait (3 cols @ 22px gap => ~212px/card, ~half the featured art's area at 1440); below 960px the 2-col media query's own width already fits the wrap, so this cap is inert on mobile */
.btm-start-more{text-align:center;margin-top:36px;}
/* BTM-112: the /episodes/ archive's Start Here band (patterns/start-here-archive.php)
   sits inside page-episodes.html's <main>, which — unlike front-page.html's <main> —
   carries `.btm-single`'s own clamp(20px,5vw,32px) left/right padding. Left alone,
   that padding would stack with .btm-wrap's flat 32px below, narrowing the card grid
   below 960px (where .btm-cards-6's 680px cap is inert and the wrap's own width is
   what sizes the cards — measured 132px cards instead of HOME's 152px at 390px wide).
   This cancels main's padding behind the band with an equal negative margin (alignfull
   is still required in the markup to escape the theme's is-layout-constrained 1180px
   cap first), so .btm-wrap is the only padding in play — same math as HOME, and the
   band's cream fill bleeds to the true viewport edge instead of stopping at main's
   own gutter. */
#start-here-archive.alignfull{margin-left:clamp(-32px,-5vw,-20px);margin-right:clamp(-32px,-5vw,-20px);}

/* stories grid — four dark rounded cards on the cream field */
.btm-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px;}
.btm-card{
	text-decoration:none;display:block;background:#141009;
	border-radius:12px;overflow:hidden;
	transition:transform .25s;
}
.btm-card:hover{transform:translateY(-4px);}
.btm-card-photo{position:relative;aspect-ratio:4/5;background:linear-gradient(165deg,#2a1e12 0%,#15100a 60%,#0e0906 100%);}
.btm-card-photo img{width:100%;height:100%;object-fit:cover;display:block;}
/* Reid, 2026-10-06 (BTM-24 item 7): a slot with no portrait shows the episode's published card, else the show logo (btm_portrait_img). A card is landscape: the big slot takes the card's own shape at full width instead of forcing it into the 4:5 frame ("do not try to conform it to portrait sizing"); the grid around it is unchanged. The 56px list thumbs and the 4:5 story cards keep their frame and show the card's left half, where the guest is. */
.btm-featured-slot:has(img.btm-art-fallback){aspect-ratio:auto;align-self:start;}   /* the img sits inside a <picture> (AVIF sources), so no child combinator */
.btm-featured-slot img.btm-art-fallback{height:auto;object-fit:unset;}
.btm-epi-thumb img.btm-art-fallback,.btm-card-photo img.btm-art-fallback{object-position:left center;}
.btm-card-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,9,5,.08) 55%,rgba(13,9,5,.55) 100%);}
.btm-card-panel{padding:14px 15px 16px;min-height:132px;}
.btm-card-meta{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.btm-card-cat{font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--wp--preset--color--gold-on-dark);}
.btm-card h3{font-size:19px;line-height:1.15;margin:6px 0 6px;color:var(--wp--preset--color--ivory);}
.btm-card-meta{font-family:var(--wp--preset--font-family--sans);font-size:12.5px;line-height:1.5;color:var(--wp--preset--color--taupe);}
.btm-card-listen{font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--wp--preset--color--gold-on-dark);margin-top:10px;}

/* studio band — parchment, circular host portrait, quote center */
.btm-studio{background:#ece2cd;color:var(--wp--preset--color--ink-text);position:relative;}
.btm-studio-portrait{width:170px;height:170px;border-radius:50%;overflow:hidden;flex:none;border:1px solid #cbbb9d;}
.btm-studio-portrait img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05) brightness(.96);}
.btm-studio blockquote{font-style:italic;font-size:24px;line-height:1.4;color:#241c10;max-width:34ch;margin:14px 0 0;border:0;padding:0;}
.btm-studio p{font-family:var(--wp--preset--font-family--sans);font-size:14px;color:#5a4c34;max-width:52ch;}
.btm-studio-mic{align-self:center;text-align:center;}
.btm-studio-mic img{width:190px;height:auto;display:block;margin:0 auto 18px;}
/* BTM-92 (2026-09-06, Reid's approved MVP mockup): round logo badge that
   replaces the studio-mic art in this column. BTM-62 (2026-09-07): the
   badge content is now the gold lockup PNG (assets/img/badge-gold-380.png,
   scripts/brand/make-gold-badge.py) instead of the inverted SVG lockup —
   this ring/circle is unchanged, only what fills it changed. The img rule
   below overrides the older `.btm-studio-mic img` rule (still kept for the
   pre-BTM-92 mic-art restore path in docs/removed-and-deferred.md) so the
   badge image fills the ring exactly instead of picking up its margin.*/
/* BTM-206 (2026-09-08): bottom margin dropped with the notes button; the badge now centres in its column. */
.btm-badge-mic{width:190px;height:190px;border-radius:50%;background:var(--wp--preset--color--ink);border:1px solid var(--wp--preset--color--gold-on-dark);display:flex;align-items:center;justify-content:center;margin:0 auto;flex:none;box-sizing:border-box;}
.btm-badge-mic img{width:100%;height:100%;margin:0;object-fit:cover;border-radius:50%;display:block;}
.btm-arch-study img{filter:none !important;}
.btm-studio .btm-btn-line{border-color:#b9a683;color:var(--wp--preset--color--ink-text);}

/* archive band */
.btm-archive{background:var(--wp--preset--color--ink);}
.btm-grid-arch{display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center;}
.btm-arch-ph{
	display:block;aspect-ratio:4/3;border:1px solid var(--wp--preset--color--ink-3);
	background:radial-gradient(90% 90% at 35% 30%,#2c2014 0%,#181109 55%,#0e0906 100%);
	overflow:hidden;
}
.btm-arch-ph img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;}
.btm-tags{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 28px;padding:0;list-style:none;}
.btm-tags a{
	font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:12.5px;
	letter-spacing:.1em;text-transform:uppercase;color:var(--wp--preset--color--taupe);
	border:1px solid rgba(242,234,217,.2);padding:8px 14px;text-decoration:none;border-radius:7px;
}
.btm-tags a:hover{border-color:var(--wp--preset--color--gold);color:var(--wp--preset--color--gold-on-dark);}

/* reviews — real approved quotes only (BTM-115 fix); hidden entirely when the pool is empty */
.btm-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:42px;margin-top:44px;}
.btm-stars{color:var(--wp--preset--color--gold-on-cream);letter-spacing:3px;font-size:15px;}
.btm-quote p{font-style:italic;font-size:18px;line-height:1.5;}
.btm-quote-src{font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--wp--preset--color--ink-muted);}
/* No-JS fallback: the server sends the whole pool, so cap the visible draw in CSS.
   The script removes the surplus nodes outright, after which this never matches. */
.btm-quotes:not(.btm-quotes-drawn) .btm-quote:nth-child(n+4){display:none;}

/* subscribe strip */
.btm-subscribe{background:var(--wp--preset--color--ink-2);border-top:1px solid var(--wp--preset--color--ink-3);}
.btm-field{display:flex;border:1px solid rgba(242,234,217,.3);max-width:340px;}
.btm-field input{background:transparent;border:0;color:var(--wp--preset--color--ivory);font-family:var(--wp--preset--font-family--sans);font-size:14px;padding:14px 16px;flex:1;outline:none;}
.btm-field button{border:0;background:var(--wp--preset--color--gold);color:#181008;font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:0 22px;cursor:pointer;}
.btm-field button:hover{background:var(--wp--preset--color--gold-on-dark);}

/* footer — light per the concept */
.btm-footer{background:var(--wp--preset--color--cream);border-top:1px solid var(--wp--preset--color--cream-line);color:var(--wp--preset--color--ink-text);padding:56px 0 28px;}
.btm-footer a{color:var(--wp--preset--color--ink-body);text-decoration:none;font-family:var(--wp--preset--font-family--sans);font-size:14px;}
.btm-footer a:hover{color:var(--wp--preset--color--gold-on-cream);}
/* BTM-12: was <h5> — Lighthouse's heading-order audit flagged the jump
   (every other heading on the page tops out at h2/h3, so the first h5 in
   document order skipped h4). Tag changed to h2 (never skips regardless of
   what precedes it on any given page — episode pages with no in-content
   headings go straight from h1); the visual size below is unchanged, this
   selector rename is the only edit. */
.btm-footer h2{font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--wp--preset--color--gold-on-cream);margin:0 0 12px;}
.btm-foot-brand{font-family:var(--wp--preset--font-family--serif);font-size:26px;line-height:1.08;letter-spacing:.1em;text-transform:uppercase;color:var(--wp--preset--color--ink-text);}
.btm-foot-sub{font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--wp--preset--color--gold-on-cream);margin-top:8px;}
.btm-foot-blurb{font-family:var(--wp--preset--font-family--sans);font-size:14px;color:var(--wp--preset--color--ink-muted);max-width:38ch;margin:0;}
.btm-foot-legal{margin-top:40px;padding-top:18px;border-top:1px solid var(--wp--preset--color--cream-line);text-align:center;font-family:var(--wp--preset--font-family--sans);font-size:12.5px;color:var(--wp--preset--color--ink-muted);}
.btm-foot-legal a{font-size:inherit;color:inherit;} /* DDH link sits quietly in the legal line (BTM-56); hover gold via .btm-footer a:hover */
.btm-foot-sep{margin:0 2px;opacity:.55;} /* BTM-96: separates the Privacy Policy link from the DDH attribution without competing with it */
/* Sean's positioning line (BTM-109, built by BTM-108): the footer's
   muted-ink text color — Sean's "white" meant the theme color (Reid,
   2026-09-04). Legal-line size, directly above it. */
.btm-foot-position{font-family:var(--wp--preset--font-family--sans);font-size:12.5px;color:var(--wp--preset--color--ink-muted);margin:0 0 8px;}

/* social row (BTM-75/BTM-108): five small monochrome icons, low visual weight */
.btm-foot-social{display:flex;flex-wrap:wrap;gap:18px;margin-top:32px;}
.btm-foot-social a{display:inline-flex;color:var(--wp--preset--color--ink-body);}
.btm-foot-social a:hover{color:var(--wp--preset--color--gold-on-cream);}
.btm-foot-social svg{width:20px;height:20px;fill:currentColor;stroke:none;}

/* visually hidden but announced — accessible label alongside a decorative icon */
.btm-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* transcript (BTM-4 contract) */
.btm-transcript{border:1px solid var(--wp--preset--color--ink-3);margin:36px 0 0;}
.btm-transcript summary{
	cursor:pointer;padding:16px 20px;background:var(--wp--preset--color--ink-2);
	font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:13px;
	letter-spacing:.18em;text-transform:uppercase;color:var(--wp--preset--color--gold-on-dark);
}
.btm-transcript-body{padding:6px 22px 18px;}
.btm-transcript-body p{font-size:15.5px;line-height:1.7;color:#cfc4b0;max-width:70ch;}

/* gallery-mount: project artifact (cover/poster/still) — natural color on
   an ink panel, NEVER duotoned, NEVER a portrait slot (BTM-35). */
.btm-project-mount{
	margin:40px auto 0;max-width:340px;padding:20px;
	background:var(--wp--preset--color--ink-2);
	border:1px solid var(--wp--preset--color--ink-3);
	border-radius:10px;text-align:center;box-shadow:0 12px 34px rgba(0,0,0,.4);
}
.btm-project-mount .btm-project-img{
	display:block;width:100%;height:auto;border-radius:4px;
	filter:none; /* natural color — the noir grade never touches artifacts */
}
.btm-project-credit{
	margin:12px 0 0;font-family:var(--wp--preset--font-family--sans);
	font-size:12px;letter-spacing:.04em;color:var(--wp--preset--color--taupe);
}

/* single episode */
.btm-single-meta{font-family:var(--wp--preset--font-family--sans);font-size:13px;color:var(--wp--preset--color--taupe);letter-spacing:.03em;}
.btm-single .wp-block-post-content{max-width:70ch;}
.btm-single .wp-block-post-content p{line-height:1.7;}

/* 404 — was an empty <main> before BTM-96; ways forward on the ink field */
.btm-notfound{background:var(--wp--preset--color--ink);padding:120px 0 140px;}
.btm-notfound h1{color:var(--wp--preset--color--ivory);}

/* standalone pages (Press, Studio, Privacy...) — same reading column as an
   episode, no post furniture; gold hairline in the .btm-kicker-rule idiom */
/* Reading-column gutter (BTM-131, extended to episodes by BTM-132). theme.json
   sets no root padding and the constrained layout only supplies max-width, so
   below ~792px every one of these surfaces ran edge-to-edge — the contact form
   was the symptom, /privacy-policy/ and every episode page had it too. The
   gutter belongs to the template, not to any block inside it. `.btm-single` is
   the shared hook: page.html carries `btm-single btm-page`, single.html carries
   `btm-single`, so one rule covers pages and episodes alike. Matches .btm-wrap
   (32px) at width, easing to 20px on small phones. */
.btm-single{padding-left:clamp(20px,5vw,32px);padding-right:clamp(20px,5vw,32px);}

/* Safety net for genuinely unbreakable tokens (long URLs in show notes). The
   nbsp-joined episode copy is normalised at render time instead — see
   btm_normalize_nbsp() in functions.php; this only catches what survives. */
.btm-single .wp-block-post-content{overflow-wrap:break-word;}
.btm-page-title::after{content:"";display:block;width:46px;height:2px;background:var(--wp--preset--color--gold);margin-top:18px;}
.btm-page .wp-block-post-content h2{font-size:27px;margin:40px 0 0;}
.btm-page .wp-block-post-content h3{font-size:21px;margin:32px 0 0;}
.btm-page .wp-block-post-content figure{margin:28px 0 0;}
.btm-page .wp-block-post-content img{border-radius:9px;}

/* ---------- single episode page (BTM-194) ----------
   The episode surface sits on the INK field like every other inner page (the
   body background is theme.json's `ink`), so everything here takes the
   dark-field half of each token pair: gold-on-dark for accents, taupe for
   meta, ink-3 for hairlines. Existing vocabulary only — .btm-kicker,
   .btm-kicker-rule, .btm-btn/-gold/-line, .btm-epi-list and the LOCKED
   portrait grade are reused rather than re-cut, and the few overrides below
   exist because .btm-epi-list was written for the cream featured band.
   No new transitions are introduced, so the prefers-reduced-motion block
   further down still lists every transition in this file. */

.btm-episode-main{max-width:70ch;min-width:0;}

/* breadcrumb: small display caps, nav-weight tracking (.14em) from the
   letterspacing vocabulary. A flex row so the taxonomy-category wrapper,
   which is a <div> because that is the element every reader of this page
   keys on, still sits inline with the rest of the trail. */
.btm-crumbs{
	display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;
	font-family:var(--wp--preset--font-family--display);
	font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
	color:var(--wp--preset--color--taupe);
}
.btm-crumbs a{color:var(--wp--preset--color--taupe);text-decoration:none;}
.btm-crumbs a:hover{color:var(--wp--preset--color--gold-on-dark);}
.btm-crumb-sep{color:var(--wp--preset--color--taupe-dim);}

/* No .btm-episode-kicker rule: BTM-194 removed the format kicker under the
   breadcrumb (it repeated the breadcrumb's own last segment). Its 24px
   margin-top now belongs to the title below, so the breadcrumb keeps the
   same clearance it always had. */
.btm-episode-title{font-size:clamp(32px, 5vw, 52px);margin:24px 0 0;overflow-wrap:break-word;}

/* facts row: the sans meta idiom, same values as .btm-single-meta. Separators
   are aria-hidden so a screen reader hears the facts, not a run of dots. */
.btm-episode-facts{
	display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;margin-top:14px;
	font-family:var(--wp--preset--font-family--sans);
	font-size:13px;letter-spacing:.03em;color:var(--wp--preset--color--taupe);
}
.btm-episode-facts .btm-facts-sep{color:var(--wp--preset--color--taupe-dim);}
.btm-episode-themes{display:flex;flex-wrap:wrap;gap:0 8px;}
.btm-episode-facts a{color:var(--wp--preset--color--gold-on-dark);text-decoration:none;}
.btm-episode-facts a:hover{color:var(--wp--preset--color--ivory);}

/* art: the episode's own tile, uncropped at its natural aspect inside the
   reading column (style guide §5 — promo tiles are banned from design
   surfaces, an episode page may show its own art). `is-badge` is the 7
   generic show tiles serving 69 posts: still shown, never removed, but at
   badge width so the page does not open on a placeholder posing as a hero. */
.btm-episode-art{margin:36px 0 0;}
/* max-width, not width: the imported tiles are 640px wide and the reading
   column is wider than that on a desktop, so width:100% would upscale a
   640px JPEG to 739px and soften it. Uncropped at its natural aspect AND at
   its natural size, down to the column's width on smaller screens. */
.btm-episode-art img{display:block;width:auto;max-width:100%;height:auto;border-radius:12px;}
.btm-episode-art.is-badge{max-width:320px;margin-right:auto;}

.btm-episode .wp-block-post-content{margin-top:36px;}

/* The player's light color-scheme is set for the HOME band, which sits on
   cream (see .btm-player above, BTM-107). Here it sits on ink, so it takes
   the site-wide dark scheme instead and the UA draws dark controls on the
   dark field. Same element, same markup — only the field it lands on
   differs. */
.btm-episode .btm-player audio{color-scheme:dark;}

/* listen row: sits directly under the native player, inside the body, because
   that is where btm_episode_player() puts the player (functions.php,
   btm_episode_listen_row). line-height is pinned so the <button> and the two
   <a>s are the same height — a button does not inherit the body's 1.6. */
.btm-episode-listen{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 0;}
.btm-episode-listen .btm-btn{line-height:1.2;padding:12px 18px;}
.btm-episode-listen button.btm-btn{-webkit-appearance:none;appearance:none;border:0;cursor:pointer;}

/* the LOCKED segment labels (docs/copy-deck.md), marked by
   btm_segment_label_headings() and styled in the kicker idiom with the
   kicker's own 46x2 gold rule. The words are never touched, including a
   trailing colon the archive wrote. */
.btm-episode .wp-block-post-content .btm-seg-label{
	font-family:var(--wp--preset--font-family--display);
	font-weight:600;font-size:14px;letter-spacing:.22em;text-transform:uppercase;
	line-height:1.3;color:var(--wp--preset--color--gold-on-dark);
	margin:52px 0 0;
}
.btm-episode .wp-block-post-content .btm-seg-label::after{
	content:"";display:block;width:46px;height:2px;
	background:var(--wp--preset--color--gold);margin-top:10px;
}
.btm-episode .wp-block-post-content .btm-seg-label + p{margin-top:20px;}

/* previous / next: the sans meta idiom, not buttons. Core renders the label
   and the title as siblings on one line ("Next story People Magazine Senior
   Crime Editor..."), so the label takes the small display-caps eyebrow
   treatment on its own line and the title reads as the link. Core also
   renders an EMPTY div when a post has no neighbour (the oldest episode has
   no previous) — hidden rather than left as a gap. */
.btm-episode .wp-block-post-navigation-link{
	font-family:var(--wp--preset--font-family--sans);
	font-size:14px;letter-spacing:.03em;line-height:1.5;
	color:var(--wp--preset--color--taupe);margin-top:26px;
}
.btm-episode .wp-block-post-navigation-link:empty{display:none;}
.btm-episode .post-navigation-link__label{
	display:block;margin-bottom:4px;
	font-family:var(--wp--preset--font-family--display);
	font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
	color:var(--wp--preset--color--taupe-dim);
}
.btm-episode .wp-block-post-navigation-link a{color:var(--wp--preset--color--taupe);text-decoration:none;}
.btm-episode .wp-block-post-navigation-link a:hover{color:var(--wp--preset--color--gold-on-dark);}

/* sidebar. Stacked under the notes by default; a right column at 960px and
   up (below). Absent when it has nothing to say — IN THIS EPISODE renders
   only when a fact exists, so a page with neither box drops the whole column
   rather than leaving a hairline over empty space. */
.btm-episode-aside{
	margin-top:56px;padding-top:28px;
	border-top:1px solid var(--wp--preset--color--ink-3);
}
.btm-episode-aside:not(:has(> *)){display:none;}
.btm-episode-box + .btm-episode-box{margin-top:44px;}
.btm-episode .btm-episode-boxhead{font-size:14px;line-height:1.3;margin:0;}

.btm-episode-dl{
	margin:20px 0 0;font-family:var(--wp--preset--font-family--sans);
	font-size:13.5px;line-height:1.5;
}
.btm-episode-dl dt{
	font-family:var(--wp--preset--font-family--display);
	font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
	color:var(--wp--preset--color--taupe-dim);
}
.btm-episode-dl dd{margin:5px 0 0;color:var(--wp--preset--color--ivory);}
.btm-episode-dl dd + dt{margin-top:18px;}

/* .btm-epi-list was cut for the cream featured band; on ink it needs the
   dark-field text tokens. Rows carry a date under the title here, and the
   thumb is omitted (not emptied) when a post has no btm_portrait. */
.btm-episode .btm-epi-list{margin-top:20px;}
.btm-episode .btm-epi-list li{margin-bottom:20px;}
.btm-episode .btm-epi-list a{align-items:flex-start;}
.btm-episode .btm-epi-title{color:var(--wp--preset--color--taupe);}
.btm-episode .btm-epi-list a:hover .btm-epi-title{color:var(--wp--preset--color--gold-on-dark);}
.btm-episode .btm-epi-date{
	display:block;margin-top:4px;font-size:12px;letter-spacing:.03em;
	color:var(--wp--preset--color--taupe-dim);
}

@media (min-width:960px){
	.btm-episode-grid{
		display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0 40px;
		align-items:start;max-width:calc(70ch + 340px);margin-left:auto;margin-right:auto;
	}
	/* nothing to show in the column: give the measure back to the notes */
	.btm-episode-grid:not(:has(.btm-episode-aside > *)){
		grid-template-columns:minmax(0,1fr);max-width:70ch;
	}
	.btm-episode-aside{
		margin-top:0;padding-top:0;border-top:0;
		border-left:1px solid var(--wp--preset--color--ink-3);padding-left:36px;
	}
}

/* ---------- contact form (BTM-131) ----------
   Jetpack Forms ships almost no front-end styling for this classic markup:
   grunion.css sets its input rules inside :where() (zero specificity) and has
   no rule for .pushbutton-wide at all, so the form rendered as raw browser
   widgets. Everything below is the theme's own vocabulary — ink surfaces,
   display caps labels, the gold pill from .btm-btn-gold — applied to Jetpack's
   class names. No plugin files are touched, so a Jetpack update cannot lose it;
   the only coupling is the class names, which are stable public markup. */
.btm-page .jetpack-contact-form-container{max-width:640px;}
/* :not(.submission-success) is load-bearing, not decoration — Jetpack hides the
   form on a successful AJAX submit with `.contact-form.submission-success
   {display:none}`, which this rule would otherwise out-specify and leave the
   submitted form on screen underneath the thank-you panel. */
/* width:100% is required, not tidiness — the container carries Jetpack's
   is-layout-flex, so the <form> is a row flex item and shrink-to-fits to its
   widest field otherwise, which is what made the fields look stunted. */
.btm-page .jetpack-contact-form-container .contact-form:not(.submission-success){
	display:flex;flex-direction:column;gap:26px;width:100%;
}
.btm-page .jetpack-contact-form-container .contact-form{
	--jetpack--contact-form--border-radius:9px;
}
.btm-page .jetpack-contact-form-container .grunion-field-wrap{width:100%;}

/* labels — the site's label language (display caps, gold), not body serif */
.btm-page .jetpack-contact-form-container .grunion-field-label{
	display:block;margin-bottom:9px;
	font-family:var(--wp--preset--font-family--display);
	font-weight:600;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
	color:var(--wp--preset--color--gold-on-dark);
}
/* the required marker is a footnote, not a shout — Jetpack's own text, quieted */
.btm-page .jetpack-contact-form-container .grunion-label-required{
	font-family:var(--wp--preset--font-family--sans);
	font-weight:400;font-size:11px;letter-spacing:.04em;text-transform:none;
	color:var(--wp--preset--color--taupe-dim);margin-left:.5em;
}
/* the "(optional)" marker (BTM-210 review kick-back) — same footnote
   treatment as .grunion-label-required just above, on purpose kept as its
   own class rather than reusing that one: identical declarations, but this
   span is theme-rendered (inc/contact-form.php), not Jetpack's own markup. */
.btm-page .jetpack-contact-form-container .btm-label-optional{
	font-family:var(--wp--preset--font-family--sans);
	font-weight:400;font-size:11px;letter-spacing:.04em;text-transform:none;
	color:var(--wp--preset--color--taupe-dim);margin-left:.5em;
}

/* fields — ink surface, ivory text; 16px holds iOS off the zoom-on-focus */
.btm-page .jetpack-contact-form-container .contact-form input[type=text],
.btm-page .jetpack-contact-form-container .contact-form input[type=email],
.btm-page .jetpack-contact-form-container .contact-form textarea{
	width:100%;box-sizing:border-box;
	background:var(--wp--preset--color--ink-2);
	border:1px solid rgba(242,234,217,.24);border-radius:9px;
	padding:14px 16px;
	font-family:var(--wp--preset--font-family--sans);font-size:16px;line-height:1.5;
	color:var(--wp--preset--color--ivory);
	transition:border-color .2s,box-shadow .2s,background .2s;
}
/* explicit height, not auto: the block authors the textarea with rows="20",
   so `height:auto` hands it a ~500px box. Resize stays available. */
.btm-page .jetpack-contact-form-container .contact-form textarea{
	display:block;height:200px;min-height:120px;resize:vertical;
}
.btm-page .jetpack-contact-form-container .contact-form :is(input,textarea):hover{border-color:rgba(242,234,217,.4);}
.btm-page .jetpack-contact-form-container .contact-form :is(input,textarea):focus{
	outline:none;background:var(--wp--preset--color--ink-3);
	border-color:var(--wp--preset--color--gold);
	box-shadow:0 0 0 3px rgba(193,150,63,.24);
}

/* Jetpack emits `<p class='contact-submit'>` and then puts a <div> inside it,
   so the HTML parser closes the paragraph early: the submit button is really a
   direct child of the form, and two empty <p> shells are left behind as flex
   items, each collecting a 26px gap. Drop the shells rather than compensate
   with negative margins. (Verified against the live DOM, not assumed.) */
.btm-page .jetpack-contact-form-container .contact-form > p:empty,
.btm-page .jetpack-contact-form-container .contact-form > p.contact-submit:not(:has(button)){
	display:none;
}

/* submit — the site's gold pill (LISTEN NOW), sized to itself, not the column.
   align-self is what does the sizing: as a direct flex child the button is
   stretched by align-items:stretch, and width:auto alone cannot beat it. */
.btm-page .jetpack-contact-form-container .contact-form button[type=submit]{
	display:inline-block;align-self:flex-start;width:auto;min-width:190px;cursor:pointer;border:0;
	font-family:var(--wp--preset--font-family--display);
	font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;
	padding:14px 30px;border-radius:9px;
	background:var(--wp--preset--color--gold);color:#181008;
	transition:background .2s;
}
.btm-page .jetpack-contact-form-container .contact-form button[type=submit]:hover{background:var(--wp--preset--color--gold-on-dark);}
.btm-page .jetpack-contact-form-container .contact-form button[type=submit]:focus-visible{
	outline:2px solid var(--wp--preset--color--ivory);outline-offset:3px;
}

/* validation — per-field message under the field, and the form-level summary.
   Warm brick rather than signal red: 6.3:1 on the ink field, still clearly an
   error, still in the palette. Jetpack toggles .has-errors / .show-errors. */
.btm-page .jetpack-contact-form-container .contact-form{--jetpack--contact-form--error-color:#e0745a;}
.btm-page .jetpack-contact-form-container .contact-form__input-error{
	color:#e0745a;font-family:var(--wp--preset--font-family--sans);font-size:13.5px;
}
.btm-page .jetpack-contact-form-container .contact-form :is(input,textarea)[aria-invalid=true]{
	border-color:#e0745a;
}
.btm-page .jetpack-contact-form-container .contact-form :is(input,textarea)[aria-invalid=true]:focus{
	box-shadow:0 0 0 3px rgba(224,116,90,.24);
}
.btm-page .jetpack-contact-form-container .contact-form__error{
	background:#2a1610;border:1px solid rgba(224,116,90,.45);border-radius:9px;
	color:#f2d9d0;font-family:var(--wp--preset--font-family--sans);font-size:14px;
	line-height:1.5;padding:14px 16px;
}
.btm-page .jetpack-contact-form-container .contact-form__error a{color:#f2d9d0;}
.btm-page .jetpack-contact-form-container .contact-form__error ul{margin-top:6px;}

/* success — the AJAX panel that replaces the form; same ink panel idiom as
   .btm-transcript, left-aligned with the form rather than centred on 600px */
.btm-page .jetpack-contact-form-container .contact-form-submission{
	max-width:640px;margin:0;
	background:var(--wp--preset--color--ink-2);
	border:1px solid var(--wp--preset--color--ink-3);
	border-left:2px solid var(--wp--preset--color--gold);
	border-radius:9px;padding:28px 30px 30px;
}
.btm-page .jetpack-contact-form-container .contact-form-submission h4{
	font-family:var(--wp--preset--font-family--serif);font-weight:400;
	font-size:25px;line-height:1.2;margin:14px 0 14px;
	color:var(--wp--preset--color--ivory);
}
.btm-page .jetpack-contact-form-container .jetpack_forms_contact-form-custom-success-message{
	font-family:var(--wp--preset--font-family--sans);font-size:15px;line-height:1.6;
	color:#cfc4b0;
}
.btm-page .jetpack-contact-form-container .contact-form-submission .go-back-message .link{
	font-family:var(--wp--preset--font-family--display);
	font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
	color:var(--wp--preset--color--gold-on-dark);
}

/* "Prefer email?" line (BTM-210) — rendered by the theme onto the block's
   own output (inc/contact-form.php), directly above the form. Quiet body
   line, same taupe/gold-on-dark idiom as .btm-about-contact below. */
.btm-contact-email-line{
	margin:0 0 22px;font-family:var(--wp--preset--font-family--sans);
	font-size:15px;line-height:1.5;color:var(--wp--preset--color--taupe);
}
.btm-contact-email-line a{color:var(--wp--preset--color--gold-on-dark);}
.btm-contact-email-line a:hover{color:var(--wp--preset--color--ivory);}

/* select (BTM-210, "Who you are") — same ink-surface/border/focus-ring
   language as the text/email/textarea fields above.

   The ink surface, border and radius live on .contact-form__select-wrapper
   (the DIV grunion.css itself actually paints), NOT on <select>. Measured
   via getComputedStyle on the live page: grunion.css carries
   `.contact-form :is(:where(.contact-form__select-element-wrapper),
   :where(.contact-form__select-wrapper select)){background:inherit
   !important;border:0!important;border-width:0!important;...}` — the
   !important beats ANY specificity, so a background/border rule aimed at
   <select> itself (an earlier version of this block did exactly that) is
   silently defeated: the select stays transparent and what actually renders
   is the wrapper DIV's own default (grunion's `field`-keyword background,
   its default #8c8f94 border). Chevron colour and focus-ring were the only
   parts still visibly "off" at that point — go back further and the whole
   box was never our colours to begin with, just a plausible-looking
   coincidence against the dark page background. `:focus-within` /
   `:has()` on the wrapper stand in for `<select>`'s own :focus/
   [aria-invalid] since the select itself carries no visible box to style. */
.btm-page .jetpack-contact-form-container .contact-form .contact-form__select-wrapper{
	background:var(--wp--preset--color--ink-2);
	border-color:rgba(242,234,217,.24);
	transition:border-color .2s,box-shadow .2s,background .2s;
}
.btm-page .jetpack-contact-form-container .contact-form .contact-form__select-wrapper:hover{
	border-color:rgba(242,234,217,.4);
}
.btm-page .jetpack-contact-form-container .contact-form .contact-form__select-wrapper:focus-within{
	background:var(--wp--preset--color--ink-3);
	border-color:var(--wp--preset--color--gold);
	box-shadow:0 0 0 3px rgba(193,150,63,.24);
}
.btm-page .jetpack-contact-form-container .contact-form .contact-form__select-wrapper:has(select[aria-invalid=true]){
	border-color:#e0745a;
}
.btm-page .jetpack-contact-form-container .contact-form .contact-form__select-wrapper:has(select[aria-invalid=true]):focus-within{
	box-shadow:0 0 0 3px rgba(224,116,90,.24);
}
.btm-page .jetpack-contact-form-container .contact-form select{
	width:100%;box-sizing:border-box;appearance:none;-webkit-appearance:none;-moz-appearance:none;
	padding:14px 40px 14px 16px;
	font-family:var(--wp--preset--font-family--sans);font-size:16px;line-height:1.5;
	color:var(--wp--preset--color--ivory);cursor:pointer;
}
/* the browser's own focus outline paints on <select> itself (the real
   focused element), not on the wrapper div above — suppress it there so
   the wrapper's box-shadow ring is the only focus indicator, exactly like
   every other field. */
.btm-page .jetpack-contact-form-container .contact-form select:focus{outline:none;}
/* Options in the OPEN dropdown list always read full ivory — real choices
   must stay readable regardless of what's currently selected. */
.btm-page .jetpack-contact-form-container .contact-form select option{
	background:var(--wp--preset--color--ink-2);color:var(--wp--preset--color--ivory);
}
/* The CLOSED select's own displayed text, though, reads muted while the
   empty placeholder option ("Select an option") is what's actually
   selected (BTM-210 review kick-back) — the same placeholder-vs-value
   distinction ::placeholder gives a text input, applied via :has() since a
   <select> has no ::placeholder pseudo-element of its own. taupe-dim, not
   the ink-muted token the search field's placeholder uses: ink-muted is
   this theme's muted-on-CREAM tone (.btm-search-form's input sits on a
   cream field even though its panel is ink) — on this dark ink-2/ink-3
   surface, taupe-dim is the family already doing this exact job elsewhere
   in this same form (.grunion-label-required, the "(required)" footnote,
   two rules up). Once a real option is chosen this rule no longer matches
   and the base rule's ivory takes back over. */
.btm-page .jetpack-contact-form-container .contact-form select:has(option[value=""]:checked){
	color:var(--wp--preset--color--taupe-dim);
}
.btm-page .jetpack-contact-form-container .contact-form .contact-form__select-element-wrapper{
	display:block;width:100%;
}
.btm-page .jetpack-contact-form-container .contact-form .jetpack-field-dropdown__icon{
	color:var(--wp--preset--color--gold);pointer-events:none;
}

/* About page (BTM-109) — bio/story + policy links, inside page-about.html's
   760px title group. Portrait reuses .btm-studio-portrait as-is (same
   170px circle + true b/w filter as the FROM THE STUDIO band, style-guide
   §5's one exception to the guest duotone grade) rather than duplicating
   its sizing/filter values here. */
.btm-about-portrait{margin:0 0 28px;}
.btm-about-portrait .btm-credit{display:block;margin-top:10px;}
.btm-about-body h2{font-size:27px;margin:0 0 18px;}
.btm-about-body p{line-height:1.7;}
.btm-about-body p + p{margin-top:20px;}
.btm-about-contact,.btm-about-policies{font-size:14px;color:var(--wp--preset--color--taupe);margin-top:32px;}
.btm-about-contact a,.btm-about-policies a{color:var(--wp--preset--color--gold-on-dark);}
.btm-about-contact a:hover,.btm-about-policies a:hover{color:var(--wp--preset--color--ivory);}
.btm-about-policies{margin-top:12px;}
/* Reviews band on /about/ (BTM-109): page-about.html's <main> is
   "constrained" (front-page.html's is "default"), so without `alignfull`
   the reviews section is capped at the theme's 1180px content-size and
   centered, leaving dark gutters either side at wide viewports instead of
   the true full-bleed band HOME renders — same fix as
   #start-here-archive.alignfull (patterns/start-here-archive.php), scoped
   to this wrapper only so patterns/reviews.php itself (shared with HOME,
   whose <main> has no such padding to cancel) is untouched. */
.btm-about-proof.alignfull{margin-left:clamp(-32px,-5vw,-20px);margin-right:clamp(-32px,-5vw,-20px);}

@media (max-width:600px){
	/* on a phone the pill is the only action on screen — let it own the row */
	.btm-page .jetpack-contact-form-container .contact-form button[type=submit]{
		align-self:stretch;width:100%;
	}
}

/* /episodes/ top row (patterns/episodes-toprow.php, BTM-196): format pills +
   Random button + dek, stacked under the h1 with the mockup's own spacing
   rhythm rather than the .btm-tags/.btm-tagline defaults tuned for other
   contexts (the archive band, the search/notfound empty states). */
.btm-episodes-toprow{margin-top:24px;}
.btm-episodes-toprow .btm-tags{margin:0 0 18px;}
.btm-episodes-toprow-actions{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 18px;}
.btm-episodes-toprow .btm-tagline{margin:0;}

/* /episodes/ season picker (patterns/episodes-toprow.php, BTM-83): sits in
   the actions row beside Random conversation and is built to read as its
   twin — the same hairline box, 9px radius, gold hover border and 50px
   height as .btm-btn-line, the same display caps. Inside: the "Season"
   label in the format pills' taupe caps, a hairline, then the native
   <select> stripped of its OS box (transparent, ivory caps, gold chevron) so
   the browser's own menu still does the picking. Focus rings the whole box,
   the contact form's gold ring (.btm-page .jetpack-contact-form-container).
   The Show button is the .btm-field gold segment; with JavaScript on
   (.is-auto, set by the inline script) it is visually hidden — the
   .screen-reader-text recipe — until it takes keyboard focus, when it shows
   again, so focus never lands on something invisible. */
.btm-season{
	display:inline-flex;flex-wrap:wrap;align-items:stretch;min-height:50px;max-width:100%;box-sizing:border-box;margin:0;
	border:1px solid rgba(242,234,217,.32);border-radius:9px;overflow:hidden;
	transition:border-color .2s,box-shadow .2s;
}
.btm-season:hover{border-color:var(--wp--preset--color--gold);}
.btm-season:focus-within{border-color:var(--wp--preset--color--gold);box-shadow:0 0 0 3px rgba(193,150,63,.24);}
.btm-season-label{
	display:flex;align-items:center;padding:0 14px 0 18px;cursor:pointer;
	font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:12.5px;
	letter-spacing:.1em;text-transform:uppercase;color:var(--wp--preset--color--taupe);
	border-right:1px solid rgba(242,234,217,.16);
}
.btm-season-pick{position:relative;display:flex;flex:1;}
.btm-season-pick::after{
	content:"";position:absolute;right:19px;top:50%;width:7px;height:7px;margin-top:-6px;
	border-right:1.5px solid var(--wp--preset--color--gold-on-dark);border-bottom:1.5px solid var(--wp--preset--color--gold-on-dark);
	transform:rotate(45deg);pointer-events:none;
}
.btm-season select{
	appearance:none;-webkit-appearance:none;-moz-appearance:none;
	flex:1;min-width:0;margin:0;border:0;border-radius:0;background:transparent;
	padding:12px 46px 12px 16px;cursor:pointer;
	font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:14px;
	letter-spacing:.12em;text-transform:uppercase;color:var(--wp--preset--color--ivory);
}
.btm-season select:focus{outline:none;}
/* the OPEN menu: plain readable options on the ink surface, as the contact
   form's select does */
.btm-season select option{background:var(--wp--preset--color--ink-2);color:var(--wp--preset--color--ivory);text-transform:none;letter-spacing:normal;}
/* flex-grow + the form's flex-wrap: on a phone too narrow for all three
   parts in a row (no JavaScript, under ~390px), Show drops to a full-width
   gold bar along the bottom of the box instead of being squeezed */
.btm-season-go{
	flex:1 0 auto;min-height:44px;
	border:0;margin:0;background:var(--wp--preset--color--gold);color:#181008;cursor:pointer;
	font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:13px;
	letter-spacing:.12em;text-transform:uppercase;padding:0 20px;
}
.btm-season-go:hover{background:var(--wp--preset--color--gold-on-dark);}
.btm-season-go:focus-visible{outline:2px solid var(--wp--preset--color--ink);outline-offset:-5px;}
.btm-season.is-auto .btm-season-go:not(:focus){
	border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;
	overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;
}
/* the list a season choice lands on (page-episodes.html's #episode-list,
   patterns/episodes-season-head.php). The season's kicker heading takes
   40px above it (its margin collapses through the loop wrapper, so the
   wrapper's own 24px gap is replaced, not added to) — clear of the cream
   Start Here band on page 1 and of the dek on later pages. Arrival leaves
   32px of ink above the heading; with no heading ("All seasons") the cards
   sit 24px under the band, so 20px keeps the band's edge off screen.
   Keyed off the id: core's `:root :where(.is-layout-flow) > :first-child`
   (specificity 0,2,0) zeroes a first child's top margin and outranks a
   lone class. */
#episode-list{scroll-margin-top:20px;}
#episode-list:has(> .btm-season-head){scroll-margin-top:32px;}
#episode-list > .btm-season-head{font-size:14px;line-height:1.3;margin:40px 0 0;}

/* archive template grid */
.btm-archive-grid .wp-block-post-template{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.btm-archive-grid .wp-block-post{margin:0;}

/* motion restraint (style guide §6: "all disabled under prefers-reduced-motion").
   BTM-12: the original block only covered the card lift and the mobile nav
   toggle/panel — every other transition in the file (buttons, the subscribe
   pill, contact-form focus rings, the press-page button) kept animating.
   Every transition: declaration in this stylesheet is listed here so the
   rule stays true as new ones are added. No @keyframes/animation exist in
   this theme, so transitions are the whole surface. */
@media (prefers-reduced-motion:reduce){
	.btm-card,.btm-card:hover{transition:none;transform:none;}
	.btm-nav-toggle span,.btm-nav-panel,.btm-nav-panel.is-open{transition:none;}
	.btm-search-overlay,.btm-search-panel,.btm-search-overlay.is-open .btm-search-panel,.btm-search-toggle,.btm-search-close{transition:none;}
	.btm-btn,
	.btm-field button,
	.btm-season,
	.btm-page .jetpack-contact-form-container .contact-form :is(input,textarea),
	.btm-press-page .btm-pp-path,
	.btm-press-page .btm-pp-path-title{
		transition:none;
	}
	.btm-press-page .btm-pp-path:hover{transform:none;}
}

/* responsive */
@media (max-width:960px){
	/* BTM-62: 300px band + a 150px dead gap pushed the CTAs off a 390x844
	   fold. At 198px the band is shorter than the image's own aspect at this
	   width, so `cover` fills on WIDTH and there is no horizontal crop left to
	   position — background-size zooms back in to keep the mic reading at the
	   scale it had, and background-position picks the part of that zoom to
	   show (the mic sits right of centre, lower half). */
	/* BTM-198 + BTM-201 (Reid's review, 2026-09-08): the strip is back at 198px and framed for the D-104 hero (brand/hero/d104-hero-2560.jpg): auto 300px, 74% 22px shows the whole mic head with its glow under the header row. The CTA row no longer depends on the strip's height for the fold (see the order rules below). */
	.btm-hero-banner{position:relative;width:100%;height:198px;background-size:auto 300px;background-position:74% 22px;background-repeat:no-repeat;}
	.btm-hero-veil{background:linear-gradient(0deg,var(--wp--preset--color--ink) 12%,rgba(16,12,9,.35) 60%);}
	/* BTM-12 CORRECTION: an earlier pass here read .btm-facets as a
	   regression (2 lines -> 3) and added a letter-spacing override to force
	   it back to 2. That was wrong — checked against the actual pre-font
	   screenshot (btm12/before/mobile-390x844/home.png) and against Reid's
	   own BTM-62-LIVE-3 reference: facets was ALREADY 3 lines at 390px
	   before any font change. No fix belongs here; removed. */
	/* BTM-12: three OTHER mobile elements did regress, all for the same
	   reason (real Oswald renders wider than the DIN Condensed/Arial Narrow
	   fallback it replaced) and all confirmed against BTM-62-LIVE-3:
	   - .btm-brand-credit ("WITH SEAN DILLON", header) wrapped 1 line -> 2.
	   - the header "Listen now" button wrapped 1 line -> 2.
	   - the hero's gold CTA ("Listen to the latest conversation") wrapped
	     1 line -> 2, which alone added ~23px to .btm-hero's height.
	   The header credit and header button share ONE cause: the header row
	   is a tight flex line (brand + toggle + button, 326px total at 390px),
	   and the button's default 24px horizontal padding left too little room
	   for the brand block, wrapping BOTH the button's own text and the
	   credit beneath it. Reducing just the button's padding freed enough
	   width to fix both — confirmed by testing letter-spacing:0 and
	   smaller-step padding first; nothing short of ~13px of padding removed
	   put the button back on one line, and padding alone (no letter-spacing
	   change) was enough for both. The hero CTA already spans the full
	   326px available (it's alone on its flex row), so only its own padding
	   could add room; 20px is the largest value (smallest change from 24px)
	   that still fits, tested in 1-2px steps. Together these bring
	   .btm-hero back to exactly 776px (Reid's approved figure) once
	   .btm-facets is left at its correct, untouched 3 lines. */
	.btm-header .btm-btn{padding:13px 11px;}
	.btm-hero-inner .btm-btn-gold{padding:13px 20px;}
	/* BTM-201 (Reid, 2026-09-08): below 960px the hero's Listen button is hidden — the header's Listen now links to the same latest episode and is already on screen; hiding it lifts Random conversation 62px. */
	.btm-hero-inner .btm-btn-gold{display:none;}
	/* BTM-201 (Reid's review, 2026-09-08, "make sure Random conversation is above the fold"):
	   below 960px the CTA row moves up under the subhead, so Random conversation ends
	   at about 475px on every phone class (375x667 Safari fold ~553px, 390x844 ~664px);
	   the tagline, facet line and hosted line follow the buttons. Desktop order is untouched. */
	.btm-hero-inner > div{display:flex;flex-direction:column;}
	.btm-hero-cta{order:1;}
	.btm-tagline,.btm-facets,.btm-hosted{order:2;}
	.btm-tagline{margin-top:24px;}
	.btm-cards,.btm-cards.btm-cards-6{grid-template-columns:repeat(2,1fr);}
	.btm-quotes{grid-template-columns:1fr;}
	.btm-archive-grid .wp-block-post-template{grid-template-columns:repeat(2,1fr);}
	/* BTM-83: 16px keeps iOS Safari from zooming the page when the season
	   menu takes focus (same reason as the contact form's 16px fields) */
	.btm-season select{font-size:16px;letter-spacing:.08em;}
	.btm-brand img{height:84px;width:auto;}
	/* BTM-244 (Reid, 2026-10-06): home phones — the spacer goes and the subhead starts exactly where the wordmark did (its 14px top margin would leave a gap under the strip), so the copy moves up; the lockup is as large as the row allows without nearing the hamburger: 118px, stepping down below ~360px wide (never under today's 84px), top unchanged at 8px. */
	.home .btm-wordmark-space{display:none;}
	.home .btm-hero-inner .btm-subhead{margin-top:0;}
	.home .btm-brand img{--btm-logo-h:clamp(84px,calc((100vw - 235px) / 1.06),118px);margin-top:0;margin-bottom:calc(84px - var(--btm-logo-h));}
	.btm-hero-ghost{display:none;}
	.btm-hero-inner{padding-top:26px;}	/* BTM-62: was 150px */
	.btm-grid-featured,.btm-grid-subscribe,.btm-grid-arch{grid-template-columns:1fr;}
	.btm-grid-studio{grid-template-columns:1fr;gap:24px;}
	.btm-studio-portrait{width:120px;height:120px;}
	.btm-grid-featured3{grid-template-columns:1fr;}
	.btm-epi-col{border-left:0;padding-left:0;border-top:1px solid var(--wp--preset--color--cream-line);padding-top:24px;}
	.btm-nav{gap:16px;}
	/* Reid, 2026-10-06 (phone home page): the hamburger sat between the lockup and Listen now; it now takes the far right of the row, Listen now to its left. `order` only — the markup (toggle before <nav>, BTM-113) is unchanged. */
	.btm-nav-toggle{display:inline-flex;order:2;margin-left:0;}
	.btm-nav{margin-left:auto;}
	/* BTM-114: the desktop search icon hides — the panel below carries an
	   inline search field instead, so the header row's width budget (see
	   the BTM-12 note above this block) is untouched by search at any
	   mobile width. */
	.btm-search-toggle{display:none;}
	.btm-nav-panel .btm-nav-search{
		display:flex;gap:10px;padding:14px 0 18px;
	}
	.btm-nav-search input[type=search]{
		flex:1;min-width:0;background:var(--wp--preset--color--ink);color:var(--wp--preset--color--ivory);
		border:1px solid var(--wp--preset--color--ink-3);border-radius:9px;
		font-family:var(--wp--preset--font-family--sans);font-size:15px;
		padding:11px 14px;outline:none;
	}
	.btm-nav-search input[type=search]::placeholder{color:var(--wp--preset--color--taupe);}
	.btm-nav-search input[type=search]:focus-visible{
		outline:2px solid var(--wp--preset--color--gold);outline-offset:2px;border-color:var(--wp--preset--color--gold);
	}
	.btm-nav-search-submit{
		flex:0 0 auto;width:44px;height:44px;border-radius:9px;border:0;cursor:pointer;
		background:var(--wp--preset--color--gold);color:#181008;
		display:inline-flex;align-items:center;justify-content:center;
	}
	.btm-nav-search-submit:hover{background:var(--wp--preset--color--gold-on-dark);}
	.btm-nav-search-submit:focus-visible{outline:2px solid var(--wp--preset--color--gold);outline-offset:2px;}
	.btm-nav-search-submit svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;}
	/* .btm-header is position:absolute already on home (line ~78); giving
	   it position:relative here too makes it the positioning context for
	   .btm-nav-panel on INNER pages as well, so `top:100%` below lands the
	   panel flush under the header row on both header variants. */
	.btm-header{position:relative;}
	.btm-nav-panel{
		display:flex;flex-direction:column;
		position:absolute;top:100%;left:0;right:0;z-index:30;
		/* Solid, not the header's translucent .96/.98 — the header bar sits
		   over a scrim gradient it was designed for, but this panel sits
		   directly over live page content (a title, the hero photo), and
		   review (BTM-113) called that ghost-through a defect, not a
		   convention. Same ink the header itself is drawn from. */
		background:var(--wp--preset--color--ink);
		border-bottom:1px solid var(--wp--preset--color--ink-3);
		padding:4px clamp(32px,4.5vw,84px) 20px;
		opacity:0;visibility:hidden;transform:translateY(-8px);
		transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;
	}
	.btm-nav-panel.is-open{
		opacity:1;visibility:visible;transform:translateY(0);
		transition:opacity .22s ease,transform .22s ease;
	}
	.btm-nav-panel a{display:block;padding:18px 0;border-top:1px solid var(--wp--preset--color--ink-3);}
	.btm-nav-panel a:first-child{border-top:0;}
	.btm-grid-footer{flex-direction:column;gap:32px;}
	/* Column layout reuses .btm-foot-brandwrap/-blurbwrap/-col's flex-basis
	   from the row layout above; stacked vertically that basis reads as a
	   min-height, stretching each block and opening dead space between
	   sections. Reset to content-sized (BTM-108 mobile screenshot review,
	   2026-09-04). */
	.btm-foot-brandwrap,.btm-foot-blurbwrap,.btm-foot-col{flex:0 0 auto;}
	.btm-foot-social{justify-content:center;}
}

/* BTM-12: narrower phones (checked at 360x780) still wrapped the header
   credit, the header "Listen now" button, and the hero CTA even after the
   max-width:960px fixes above sized them for 390px — there just isn't
   enough row/button width left at 360 for the same padding values. Kept
   as its own narrower breakpoint rather than widening the 960px block's
   values, so the 390-and-up rules above are untouched (verified: 390 and
   1440/1366 measurements did not change when this block was added).
   - .btm-header-row's gap 24px->9px (minimum tested in 1px steps) frees
     enough width for BOTH the header credit and the header button back
     to one line — same shared-cause relationship as the 390 fix, just
     needing a bigger reduction at this width.
   - The hero CTA's own padding 24px->5px (minimum tested in 1px steps;
     6px still wrapped) is what's needed once the row gap above no longer
     helps it (the CTA is alone on its own flex row, so only its own
     padding can add room). Drops .btm-hero to 805px at 360x780 — there
     is no approved figure for 360 (only 1440/1366/390 have one), so this
     is reported rather than tuned to a target. */
@media (max-width:375px){
	.btm-header-row{gap:9px;}
	.btm-hero-inner .btm-btn-gold{padding:13px 5px;}
}

/* ============================================================================
   Press page, theme-built (BTM-253 option A): templates/
   page-press-page.html + patterns/press.php. Nothing here reads the legacy
   blob. The BTM-191 render-time restyle it replaced has been retired.

   Reuses the decisions made in the retired BTM-191 kit mapping: full-bleed bands
   alternating ink and cream/parchment, field-aware tokens, gold display-caps
   labels, serif gold numbers, dark-island cards (#141009) that keep their
   dark colors on any field, 12px card radius. Buttons are the theme's own
   .btm-btn/-gold/-line.

   WIDTH: the pattern's root (.btm-pp) is alignfull inside the template's
   760px title group, so it escapes the 760px cap and runs at the group's
   own width (the 1180px content size, same width the BTM-191 restyle
   chose for the kit). The page title is widened to match so its left edge
   lines up with every band below it.

   FULL BLEED: each band paints its field as ONE border-image with a
   100vmax horizontal outset. The outset is ink overflow, never scrollable
   overflow (unlike a -50vw pseudo-element), so a classic always-visible
   scrollbar cannot produce a sideways scroll. One paint also means no seam:
   a background plus a clipped box-shadow anti-aliased differently on
   fractional band edges and left a 1px tick at the column edges (seen in
   the first preview screenshots).

   The site header is not sticky on inner pages (no position:sticky/fixed on
   .btm-header), so the anchors' scroll-margin-top only clears the admin bar
   for logged-in viewers and leaves a little air above the band.
   ============================================================================ */
.btm-press-page .btm-page-title{max-width:none;}
.btm-press-page .btm-pp{
	/* dark field defaults (ink bands) */
	--pp-heading: var(--wp--preset--color--ivory);
	--pp-body: #cfc4b0;
	--pp-muted: var(--wp--preset--color--taupe);
	--pp-kicker: var(--wp--preset--color--gold-on-dark);
	--pp-hairline: var(--wp--preset--color--ink-3);
	--pp-bg: var(--wp--preset--color--ink);
	margin-top: 8px;
	color: var(--pp-body);
}
.btm-press-page .btm-pp *{box-sizing:border-box;}
.btm-press-page .btm-pp :where(h2,h3,p,ul,li){margin:0;padding:0;}
.btm-press-page .btm-pp ul{list-style:none;}

/* -- bands + fields -- */
.btm-press-page .btm-pp-band{
	padding: 72px 0;
	border-image: linear-gradient(var(--pp-bg),var(--pp-bg)) fill 0 / 0 / 0 100vmax;
	color: var(--pp-body);
}
.btm-press-page .btm-pp-ink{--pp-bg: var(--wp--preset--color--ink);}
.btm-press-page .btm-pp-ink2{--pp-bg: var(--wp--preset--color--ink-2);}
.btm-press-page .btm-pp-cream,
.btm-press-page .btm-pp-parchment{
	--pp-heading: var(--wp--preset--color--ink-text);
	--pp-body: var(--wp--preset--color--ink-body);
	--pp-muted: var(--wp--preset--color--ink-muted);
	--pp-kicker: var(--wp--preset--color--gold-on-cream);
	--pp-hairline: var(--wp--preset--color--cream-line);
	--pp-bg: var(--wp--preset--color--cream);
}
.btm-press-page .btm-pp-parchment{--pp-bg: #ece2cd;} /* the studio field, style guide §3 */
.btm-press-page .btm-pp-anchor{scroll-margin-top:32px;}

/* -- dark-island cards: fixed dark colors on any field -- */
.btm-press-page .btm-pp-card{
	--pp-heading: var(--wp--preset--color--ivory);
	--pp-body: #cfc4b0;
	--pp-muted: var(--wp--preset--color--taupe);
	--pp-kicker: var(--wp--preset--color--gold-on-dark);
	background: #141009;
	border: 1px solid var(--wp--preset--color--ink-3);
	border-radius: 12px;
	color: var(--pp-body);
}

/* -- labels: gold display caps; section labels carry the 46x2 gold rule -- */
.btm-press-page .btm-pp-kicker,
.btm-press-page .btm-pp-label,
.btm-press-page .btm-pp-sublabel{
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--pp-kicker);
}
.btm-press-page .btm-pp-kicker{font-size:14px;letter-spacing:.22em;}
.btm-press-page .btm-pp-label{font-size:14px;letter-spacing:.22em;margin-bottom:36px;}
.btm-press-page .btm-pp-label::after{content:"";display:block;width:46px;height:2px;background:var(--wp--preset--color--gold);margin-top:10px;}
.btm-press-page .btm-pp-sublabel{font-size:13px;letter-spacing:.2em;margin-bottom:18px;}

/* -- serif numbers, field-aware gold -- */
.btm-press-page .btm-pp-num{
	display: block;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	line-height: 1;
	color: var(--pp-kicker);
}

/* -- prose -- */
.btm-press-page .btm-pp-prose p{font-size:17px;line-height:1.7;color:var(--pp-body);max-width:62ch;}
.btm-press-page .btm-pp-prose p + p{margin-top:18px;}

/* -- buttons: the theme's own; long labels wrap inside the pill, never overflow -- */
.btm-press-page .btm-pp .btm-btn{max-width:100%;text-align:center;line-height:1.3;}

/* -- 1. hook -- */
.btm-press-page .btm-pp-hook{padding-top:48px;}
.btm-press-page .btm-pp-hook-grid{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center;}
.btm-press-page .btm-pp-headline{
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: clamp(30px,4.2vw,48px);
	line-height: 1.15;
	color: var(--pp-heading);
	max-width: 22ch;
	margin-top: 16px;
}
.btm-press-page .btm-pp-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;}
.btm-press-page .btm-pp-logo img{display:block;width:200px;max-width:100%;height:auto;}

/* -- 2. path chooser: two equal cards, in-page anchors -- */
.btm-press-page .btm-pp-paths{padding:40px 0;}
.btm-press-page .btm-pp-paths-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.btm-press-page .btm-pp-path{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 28px 72px 28px 28px;
	border-color: rgba(242,234,217,.18);
	text-decoration: none;
	transition: border-color .2s,transform .2s;
}
.btm-press-page .btm-pp-path::after{
	content: "\2193";
	position: absolute;
	right: 28px;
	top: 50%;
	margin-top: -14px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 22px;
	line-height: 28px;
	color: var(--wp--preset--color--gold-on-dark);
}
.btm-press-page .btm-pp-path:hover{border-color:var(--wp--preset--color--gold);transform:translateY(-4px);}
.btm-press-page .btm-pp-path:focus-visible{border-color:var(--wp--preset--color--gold);outline:2px solid var(--wp--preset--color--gold);outline-offset:3px;}
.btm-press-page .btm-pp-path-title{font-family:var(--wp--preset--font-family--serif);font-size:clamp(24px,2.6vw,30px);line-height:1.15;color:var(--pp-heading);transition:color .2s;}
.btm-press-page .btm-pp-path:hover .btm-pp-path-title{color:var(--wp--preset--color--gold-on-dark);}
.btm-press-page .btm-pp-path-desc{font-family:var(--wp--preset--font-family--sans);font-size:15px;line-height:1.5;color:var(--pp-muted);}

/* -- 3. show overview + stats strip -- */
.btm-press-page .btm-pp-about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start;}
.btm-press-page .btm-pp-tagline{font-family:var(--wp--preset--font-family--serif);font-style:italic;font-size:clamp(24px,2.8vw,32px);line-height:1.25;color:var(--pp-heading);}
.btm-press-page .btm-pp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px;padding-top:40px;border-top:1px solid var(--pp-hairline);text-align:center;}
.btm-press-page .btm-pp-stats .btm-pp-num{font-size:clamp(34px,4vw,48px);}
.btm-press-page .btm-pp-stat-label{display:block;margin-top:10px;font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--pp-muted);}

/* -- 4. publicists: guest grid, callout, booking -- */
.btm-press-page .btm-pp-guests{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.btm-press-page .btm-pp-guest{display:flex;flex-direction:column;gap:6px;padding:20px 18px;}
.btm-press-page .btm-pp-guest-num{font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:12px;letter-spacing:.06em;color:var(--pp-kicker);}
.btm-press-page .btm-pp-guest-name{font-family:var(--wp--preset--font-family--serif);font-size:18px;line-height:1.2;color:var(--pp-heading);}
.btm-press-page .btm-pp-guest-desc{font-family:var(--wp--preset--font-family--sans);font-size:13px;line-height:1.45;color:var(--pp-muted);}
.btm-press-page .btm-pp-more,
.btm-press-page .btm-pp-browse{margin-top:24px;text-align:center;font-family:var(--wp--preset--font-family--serif);font-style:italic;font-size:16px;color:var(--pp-muted);}
.btm-press-page .btm-pp-browse{margin-top:10px;font-style:normal;}
.btm-press-page .btm-pp-callout{margin-top:56px;padding:32px 36px;max-width:760px;border:1px solid rgba(242,234,217,.18);border-radius:12px;}
.btm-press-page .btm-pp-callout h3{font-family:var(--wp--preset--font-family--serif);font-weight:400;font-size:clamp(22px,2.4vw,27px);line-height:1.2;color:var(--pp-heading);margin-bottom:14px;}
.btm-press-page .btm-pp-callout p{font-size:17px;line-height:1.7;color:var(--pp-body);}
.btm-press-page .btm-pp-book{margin-top:28px;}
.btm-press-page .btm-pp-book-addr{margin-top:12px;font-family:var(--wp--preset--font-family--sans);font-size:15px;letter-spacing:.02em;color:var(--pp-muted);}

/* -- 5. brands: audience, rankings, placements, host, close -- */
.btm-press-page .btm-pp-block + .btm-pp-block{margin-top:64px;}
.btm-press-page .btm-pp-audience{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.btm-press-page .btm-pp-bigstat{padding:28px;text-align:center;}
.btm-press-page .btm-pp-bigstat .btm-pp-num{font-size:56px;}
.btm-press-page .btm-pp-bigstat p{margin-top:10px;font-family:var(--wp--preset--font-family--sans);font-size:15px;line-height:1.5;color:var(--pp-muted);}
.btm-press-page .btm-pp-gender{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:18px;font-family:var(--wp--preset--font-family--sans);font-size:15px;color:var(--pp-body);}
.btm-press-page .btm-pp-gender strong{font-weight:600;color:var(--pp-heading);}
.btm-press-page .btm-pp-countries li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--pp-hairline);font-family:var(--wp--preset--font-family--sans);font-size:15px;color:var(--pp-body);}
.btm-press-page .btm-pp-countries li:first-child{padding-top:0;}
.btm-press-page .btm-pp-countries li:last-child{border-bottom:0;}
.btm-press-page .btm-pp-pct{font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:14px;letter-spacing:.04em;color:var(--pp-kicker);}
.btm-press-page .btm-pp-ranks{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.btm-press-page .btm-pp-rank{padding:24px 14px;text-align:center;}
.btm-press-page .btm-pp-rank .btm-pp-num{font-size:38px;margin-bottom:10px;}
.btm-press-page .btm-pp-rank-cat{display:block;font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:11.5px;letter-spacing:.08em;line-height:1.4;text-transform:uppercase;color:var(--pp-muted);}
.btm-press-page .btm-pp-note{font-family:var(--wp--preset--font-family--sans);font-size:14px;line-height:1.5;color:var(--pp-muted);}
.btm-press-page .btm-pp-note-center{margin-top:20px;text-align:center;}
.btm-press-page .btm-pp-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.btm-press-page .btm-pp-tier{padding:26px;}
.btm-press-page .btm-pp-tier-name{display:block;font-family:var(--wp--preset--font-family--serif);font-size:22px;line-height:1.2;color:var(--pp-heading);}
.btm-press-page .btm-pp-tier-len{display:block;margin:6px 0 12px;font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--pp-kicker);}
.btm-press-page .btm-pp-tier p{font-family:var(--wp--preset--font-family--sans);font-size:15px;line-height:1.6;color:var(--pp-body);}
.btm-press-page .btm-pp-tier-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:24px;}
.btm-press-page .btm-pp-host-grid{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:start;}
.btm-press-page .btm-pp-host .btm-about-portrait{margin:0;}
.btm-press-page .btm-pp-host-name{font-family:var(--wp--preset--font-family--serif);font-size:32px;line-height:1.15;color:var(--pp-heading);}
.btm-press-page .btm-pp-meta{margin:8px 0 22px;font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--pp-muted);}
.btm-press-page .btm-pp-close{padding:88px 0;text-align:center;}
.btm-press-page .btm-pp-close h2{font-family:var(--wp--preset--font-family--serif);font-style:italic;font-weight:400;font-size:clamp(22px,2.6vw,28px);line-height:1.3;color:var(--pp-heading);}
.btm-press-page .btm-pp-talk{margin:10px 0 26px;font-family:var(--wp--preset--font-family--serif);font-size:clamp(40px,5.5vw,60px);line-height:1.1;color:var(--pp-kicker);}
.btm-press-page .btm-pp-close-mail a{font-family:var(--wp--preset--font-family--sans);font-size:18px;color:var(--pp-heading);}
.btm-press-page .btm-pp-close-mail a:hover{color:var(--wp--preset--color--gold-on-dark);}

/* -- 6. listener voices: patterns/reviews.php brings its own cream
   section and 78px rhythm; the band alone paints the cream (the section's
   own fill is cleared so the edge is painted once, no seam). Its .btm-wrap
   gutter is dropped because main already supplies one. -- */
.btm-press-page .btm-pp-proof{padding:0;}
.btm-press-page .btm-pp-proof .btm-on-cream{background:transparent;}
.btm-press-page .btm-pp-proof .btm-wrap{padding:0;}

/* -- 7. foot -- */
.btm-press-page .btm-pp-foot{padding:64px 0 72px;text-align:center;}
.btm-press-page .btm-pp-foot .btm-btn{margin-bottom:28px;}
.btm-press-page .btm-pp-foot-line{font-family:var(--wp--preset--font-family--sans);font-size:13px;letter-spacing:.03em;color:var(--wp--preset--color--taupe-dim);}
.btm-press-page .btm-pp-foot-line + .btm-pp-foot-line{margin-top:6px;}

@media (max-width:960px){
	.btm-press-page .btm-pp-guests{grid-template-columns:repeat(3,1fr);}
	.btm-press-page .btm-pp-about-grid,
	.btm-press-page .btm-pp-audience{grid-template-columns:1fr;gap:28px;}
}
@media (max-width:700px){
	.btm-press-page .btm-pp-band{padding:52px 0;}
	.btm-press-page .btm-pp-hook{padding-top:36px;}
	.btm-press-page .btm-pp-paths{padding:32px 0;}
	.btm-press-page .btm-pp-proof{padding:0;}
	.btm-press-page .btm-pp-close{padding:64px 0;}
	.btm-press-page .btm-pp-hook-grid{grid-template-columns:1fr;gap:36px;}
	.btm-press-page .btm-pp-logo img{width:150px;}
	.btm-press-page .btm-pp-paths-grid{grid-template-columns:1fr;gap:14px;}
	.btm-press-page .btm-pp-path{padding:22px 60px 22px 22px;}
	.btm-press-page .btm-pp-path::after{right:22px;}
	.btm-press-page .btm-pp-stats{grid-template-columns:repeat(2,1fr);row-gap:32px;margin-top:40px;padding-top:32px;}
	.btm-press-page .btm-pp-tiers{grid-template-columns:1fr;gap:14px;}
	.btm-press-page .btm-pp-host-grid{grid-template-columns:1fr;gap:28px;}
	.btm-press-page .btm-pp-callout{padding:24px 22px;}
	.btm-press-page .btm-pp-block + .btm-pp-block{margin-top:52px;}
}
@media (max-width:600px){
	.btm-press-page .btm-pp-guests{grid-template-columns:repeat(2,1fr);gap:12px;}
	.btm-press-page .btm-pp-guest{padding:16px 14px;}
	.btm-press-page .btm-pp-guest-name{font-size:17px;}
	.btm-press-page .btm-pp-ranks{grid-template-columns:repeat(2,1fr);gap:12px;}
	.btm-press-page .btm-pp-rank:last-child{grid-column:1 / -1;}
}