/*
Theme Name: Yoked Classic
Description: Classic PHP theme for Yoked Media — no Elementor, no drag-builder. Class names are the layer names in YokedWebsite.pen; tokens and sizes are read from its node data, not eyeballed.
Version: 0.3
*/

/* "Funnell" in Elementor and in the .pen file is this font — Google's Funnel Display. */
@font-face {
	font-family: 'Funnel Display';
	src: url('fonts/FunnelDisplay-VariableFont_wght.ttf') format('truetype');
	font-weight: 300 800;
	font-display: swap;
}

@font-face {
	font-family: 'Onest';
	src: url('fonts/Onest-VariableFont_wght.ttf') format('truetype');
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: 'Quicksand';
	src: url('fonts/Quicksand-VariableFont_wght.ttf') format('truetype');
	font-weight: 300 700;
	font-display: swap;
}

:root {
	--ink: #102423;         /* pen teal-900 */
	--teal-deep: #204745;   /* pen teal-800 */
	--teal-mid: #316c69;    /* pen teal-700 */
	--teal-soft: #418f8b;   /* pen teal-600 */
	--teal-400: #74c2be;    /* pen teal-400 */
	--teal: #51b3ae;        /* pen teal-main */
	--teal-light: #97d2cf;  /* pen teal-300 */
	--teal-pale: #b9e0de;   /* pen teal-200 */
	--teal-tint: #dcf0ef;   /* pen teal-100 */

	--gold: #f1c142;        /* pen yellow-main */
	--gold-light: #f4ce68;  /* pen yellow-300 */
	--gold-pale: #f7da8e;   /* pen yellow-400 */
	--gold-tint: #f9e6b3;   /* pen yellow-200 */
	--yellow-100: #fcf2d9;
	--yellow-600: #daa310;
	--yellow-700: #98710b;

	--cream: #f5f4f2;       /* pen bg — page background (Naming Convention §15 decision 10) */
	--bg-offwhite: #ede6da;
	--white: #ffffff;
	--off-white: #fcfcfc;
	--mist: #f5f8fa;
	--hairline: #80808012;
	--red: #d9340f;

	--font-display: 'Funnel Display', Georgia, serif;
	--font-ui: 'Onest', system-ui, sans-serif;
	--font-body: 'Quicksand', system-ui, sans-serif;

	/*
	 * The four sizes with a phone value in the pen (Naming Convention §16) slide from the
	 * phone size to the desktop size over 360px → 1140px (clamp system in Responsive Wins).
	 */
	--step-xs: 14px;        /* pen body-xsmall-size */
	--step-sm: 14.4px;
	--step-base: 16px;      /* pen body-small-size */
	--body-size: clamp(1rem, 0.9423rem + 0.2564vw, 1.125rem);    /* pen body-size: 16 phone → 18 desktop */
	--body-large-size: 20px;
	--step-md: 21px;
	--step-lg: clamp(1.2rem, 1.0615rem + 0.6154vw, 1.5rem);      /* pen heading-small-size: 19.2 → 24 */
	--step-xl: 25px;
	--step-2xl: 32px;
	--step-3xl: clamp(1.5rem, 1.0385rem + 2.0513vw, 2.5rem);     /* pen heading-size: 24 → 40 */
	--step-4xl: clamp(2rem, 1.3077rem + 3.0769vw, 3.5rem);       /* pen heading-large-size: 32 → 56 */

	--wrap: 1300px;
	--header-h: 125px;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--step-base);
	font-weight: 500;
	line-height: 1.44;
	color: var(--ink);
	background: var(--cream);
}

h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 500;
	color: var(--teal-deep);
	line-height: 1.2;
}

h1 { font-size: var(--step-4xl); }
h2 { font-size: var(--step-3xl); }
h3 { font-size: var(--step-lg); }

a {
	color: var(--teal-mid);
}

img {
	max-width: 100%;
	height: auto;
}

.wrap {
	width: min(100% - 40px, var(--wrap));
	margin-inline: auto;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Text in the pen uses each font's built-in line height unless a layer sets one. */
.site-header,
.site-footer,
.site-main > *:not(.prose) {
	line-height: normal;
}

.site-main {
	overflow-x: clip; /* clip, not hidden: hidden would stop position: sticky working */
}

/* ---------- icons ---------- */

.btn-cta svg { width: 22px; height: 22px; flex: none; }
.btn-med svg { width: 16px; height: 16px; flex: none; }
.btn-sml svg { width: 14px; height: 14px; flex: none; }

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

.btn-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 56px;
	padding: 0 24px 0 32px;
	border: 0;
	border-radius: 8px;
	background: var(--gold);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: var(--step-lg);
	font-weight: 400;
	line-height: normal;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.btn-cta:not([href]) {
	cursor: default;
}

.btn-cta[hidden] {
	display: none;
}

.btn-med {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	padding: 0 16px 0 24px;
	border-radius: 5px;
	background: var(--teal);
	color: var(--white);
	font-family: var(--font-body);
	font-size: var(--body-size);
	font-weight: 600;
	text-decoration: none;
}

.btn-med--nofill {
	gap: 4px;
	height: auto;
	padding: 0;
	background: none;
	font-weight: 700;
}

.btn-sml {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 40px;
	padding: 0 16px 0 20px;
	border: 0;
	border-radius: 5px;
	background: var(--teal);
	color: var(--white);
	font-family: var(--font-body);
	font-size: var(--step-base);
	font-weight: 600;
	cursor: pointer;
}

/*
 * Button hover (not drawn in the pen): a small lift and a slightly deeper shade of whatever colour
 * the button is, so it works for every per-show colour. Mouse only; the icon-less text link
 * (btn-med--nofill) just deepens. Reduced-motion visitors get the shade change without the slide.
 */
.btn-cta,
.btn-med,
.btn-sml,
.worksheet-single__download {
	transition: filter 0.2s ease, box-shadow 0.2s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.btn-cta,
	.btn-med,
	.btn-sml,
	.worksheet-single__download {
		transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
	}
}

@media (hover: hover) {
	.btn-cta[href]:hover,
	.btn-med:hover,
	.btn-sml:hover,
	.worksheet-single__download:hover {
		filter: brightness(0.92);
	}

	.btn-cta[href]:hover,
	.btn-med:not(.btn-med--nofill):hover,
	.btn-sml:hover,
	.worksheet-single__download:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 14px rgb(16 36 35 / 0.18);
	}

	.btn-cta[href]:active,
	.btn-med:not(.btn-med--nofill):active,
	.btn-sml:active,
	.worksheet-single__download:active {
		transform: none;
		box-shadow: none;
	}
}

/*
 * Fade in up (the old Elementor entrance animation) on the About and Connect sections: hidden until
 * js/site.js adds .is-visible as they scroll into view, then a short slide up, once. The scripting
 * query means no-JS visitors, and browsers that don't know it, just see the page as normal.
 */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.about__block,
	.connect__block {
		opacity: 0;
		transform: translateY(40px);
		transition: opacity 0.9s ease, transform 0.9s ease;
	}

	.about__block.is-visible,
	.connect__block.is-visible {
		opacity: 1;
		transform: none;
	}
}

/* ---------- site-header ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	padding: 20px;
}

/* In the pen the header sits over the top of every page (hero, collage). */
body:has(.page-hero, .hero-show, .post-hero, .collage) .site-header {
	margin-bottom: calc(-1 * var(--header-h));
}

/*
 * The Silica glass effect (the `silica` class) lives on a separate sibling
 * layer (.site-header__glass), not the pill itself: an element carrying its
 * own backdrop-filter becomes the "backdrop root" for its descendants, which
 * traps a nested glass element's (site-nav__submenu-pill) blur inside the
 * parent's own layer instead of letting it blur the real page behind it.
 */
.site-header__pill {
	position: relative;
	display: flex;
	align-items: center;
	width: min(100%, var(--wrap));
	height: 85px; /* fixed in the pen; the 81px logo is allowed to overflow the padding */
	margin: 0 auto;
	padding: 12px 24px;
	border-radius: 16px;
}

.site-header__glass {
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-color: #f9f8f9a1;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
}

.site-header__logo img {
	display: block;
	width: 162px;
	height: 81px;
	object-fit: contain;
}

.site-nav {
	position: relative;
	display: flex;
	flex: 1;
	justify-content: center;
	align-items: center;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__item {
	position: relative;
	display: flex;
	align-items: center;
}

.site-nav__item > a,
.site-nav__item > button {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--teal-deep);
	font-family: var(--font-body);
	font-size: var(--step-base);
	font-weight: 500;
	line-height: normal;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.site-nav__item > a:hover,
.site-nav__item > button:hover {
	color: var(--teal-mid);
}

.site-nav__item.is-current > a {
	color: var(--teal-mid);
	font-weight: 600;
}

.site-nav__item-caret {
	display: flex;
}

.site-nav__item-caret svg {
	width: 14px;
	height: 14px;
}

/*
 * The gap to the trigger is now padding-top on the submenu itself (was a bare
 * top offset before) so the pill sits lower without a dead zone between it and
 * the button — moving the mouse down into it no longer crosses empty space.
 */
.site-nav__submenu {
	position: absolute;
	top: 100%;
	padding-top: 40px;
	left: 72px;
	width: 194px;
	transform: translateX(-50%);
	
}

.site-nav__submenu[hidden] {
	display: none;
}

.site-nav__submenu-pill {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	margin: 0;
	padding: 20px 25px;
	list-style: none;
	border-radius: 16px;
	background-color: #f9f8f9a1;
}

.site-search {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 167px;
	padding: 10px;
	border: 1px solid #10242319;
	border-radius: 6px;
	transition: width 0.2s ease;
}

.site-search:focus-within {
	width: 250px;
	border-color: var(--ink);
}

.site-search__input {
	flex: 1;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--step-xs);
	font-weight: 500;
	line-height: normal;
}

.site-search__input::placeholder {
	color: var(--ink);
	opacity: 1;
}

.site-search__input:focus {
	outline: none;
}

.site-search__button {
	display: flex;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	cursor: pointer;
}

/* ---------- site-footer ---------- */

.site-footer {
	padding: 0 10px;
	background: var(--teal-deep);
}

/* Templates with no pen frame (page.php, index.php, worksheets) keep the old gap above the footer. */
body:not(:has(.page-hero, .hero-show, .post-hero, .collage)) .site-footer {
	margin-top: 80px;
}

.site-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	max-width: 1600px;
	padding: 40px 0 16px;
	margin: 0 auto;
}

.site-footer__emblem {
	width: 170px;
	height: 175px;
}

.site-footer__legal {
	margin: 0;
	color: var(--gold);
	font-size: var(--step-base);
	font-weight: 600;
	text-align: center;
}

.site-footer__legal a {
	color: inherit;
}

/* ---------- txt-hero, img-hero, page-hero ---------- */

.txt-hero {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 12px;
	width: 100%;
	height: 160px;
	margin: 0;
	background: linear-gradient(to top, var(--cream), #ede6da00);
	font-family: var(--font-display);
	font-size: var(--step-4xl);
	font-weight: 400;
	line-height: normal;
	text-align: center;
}

.txt-hero__word--first { color: var(--teal-soft); }
.txt-hero__word--second { color: var(--yellow-600); }

.img-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 302px;
	overflow: hidden;
	background: var(--bg-offwhite);
}

.img-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.2;
	filter: blur(5px);
}

.page-hero {
	position: relative;
	height: 302px;
}

.page-hero .txt-hero {
	position: absolute;
	top: 142px;
	left: 0;
}

.page-hero + .wrap {
	padding-block: 70px;
}

/* ---------- front-page ---------- */

.collage {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 9px;
	overflow: hidden;
}

.collage__row {
	display: flex;
	align-items: center;
	gap: 10px;
	overflow: hidden;
}

.collage__tile {
	flex: none;
	width: 194px;
	height: 194px;
	overflow: hidden;
	border-radius: 16px;
	/* Every tile moves one full pass (tile + 10px gap) left, then loops. */
	animation: collage-scroll 70s linear infinite;
}

.collage__row--b .collage__tile {
	animation-direction: reverse;
}

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

/* One pass = tiles × (tile width + 10px gap): 204px a tile on desktop, 107px on phone. */
@keyframes collage-scroll {
	to { transform: translateX(calc(var(--tiles, 13) * (-100% - 10px))); }
}

@media (prefers-reduced-motion: reduce) {
	.collage__tile { animation: none; }
}

.collage + .wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	padding-bottom: 70px;
}

/*
 * Card columns share the row: as many as fit at 340px+ each, stretched to fill it. Fixed 410px
 * columns (as drawn) left a lopsided gap on the right, or split the two columns to opposite
 * edges, anywhere between the phone layout and the full 3-across width (~1340px).
 */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	gap: 30px;
	width: 100%;
}

/* ---------- card-show ---------- */

.card-show {
	position: relative;
	display: flex;
	width: 100%;
	min-height: 480px; /* 480 as drawn; grows when the real blurb is longer than the pen's sample text */
	padding: 50px;
	overflow: hidden;
	border-radius: 16px;
}

.card-show--xchange { background: var(--ink); }
.card-show--the-human-story { background: var(--bg-offwhite); }

.card-show__photo,
.card-show__watermark {
	position: absolute;
	pointer-events: none;
}

.card-show__photo::before,
.card-show__photo::after,
.card-show__watermark::before,
.card-show__watermark::after {
	content: '';
	position: absolute;
	inset: 0;
}

.card-show__photo::before {
	background: var(--photo) center / cover no-repeat;
}

.card-show__watermark::before {
	background: url('images/logos/yoked-logo-alt-outlined.webp') center / cover no-repeat;
}

.card-show--xchange .card-show__photo {
	inset: 0;
}

.card-show--xchange .card-show__photo::after {
	background: linear-gradient(93.88deg, var(--ink), #10242300);
}

.card-show--xchange .card-show__watermark {
	top: 141px;
	left: 50px;
	width: 840px;
	height: 198px;
	opacity: 0.04;
}

/* 805×585 and 747×543 on the 480px card, as drawn; the heights follow the card if it grows. */
.card-show--the-human-story .card-show__photo {
	top: -17px;
	right: -183px;
	width: 805px;
	height: calc(100% + 105px);
}

.card-show--the-human-story .card-show__photo::before {
	opacity: 0.9;
	transform: scaleX(-1);
}

.card-show--the-human-story .card-show__watermark {
	top: -35.6px;
	left: -69.2px;
	width: 747px;
	height: calc(100% + 63px);
}

.card-show--the-human-story .card-show__watermark::before {
	opacity: 0.1;
}

/*
 * The fade over the photo and watermark is one overlay layer, drawn in the pen as hero-show__bg-overlay
 * inside the card (card-show.php); its gradient is the shared one next to post-show__bg-overlay.
 */

.card-show__inner {
	position: relative;
	display: flex;
	align-items: center;
	width: 916px;
	max-width: 100%; /* narrower than 916 + padding (~1060px screens): the text column shrinks instead of running off the card */
	min-height: 380px;
}

/* logo 400 + body 543 = 943: the drawn 916 was already 27px short here, which only showed once the card got narrow. */
.card-show--xchange .card-show__inner { width: 943px; }

.card-show--the-human-story .card-show__inner {
	gap: 30px;
}

.card-show__logo {
	flex: none;
	object-fit: contain;
}

.card-show--xchange .card-show__logo { width: 400px; height: 400px; }
.card-show--the-human-story .card-show__logo { width: 340px; height: 330px; }

.card-show__body {
	display: flex;
	flex: 0 1 543px;
	min-width: 0;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
	width: 543px;
}

.card-show__body > *,
.hero-show__body > *,
.post-show__body > * {
	flex-shrink: 0;
}

.card-show__title {
	margin: 0;
	font-size: var(--step-4xl);
	font-weight: 500;
	line-height: normal;
}

.card-show__excerpt {
	margin: 0;
	font-size: var(--body-size);
	font-weight: 500;
	line-height: 1.4;
	width: 100px;
}

.card-show__body .btn-cta {
	align-self: flex-start;
}

.card-show__divider {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
}

.card-show__listen {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 50.8px;
}

.card-show__also {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--step-lg);
	font-weight: 400;
}

.card-show--xchange .card-show__title,
.card-show--xchange .card-show__also { color: var(--cream); }
.card-show--xchange .card-show__excerpt { width: 500px; color: var(--teal-tint); }
.card-show--xchange .card-show__divider { background: var(--teal-mid); }

.card-show--the-human-story .card-show__title,
.card-show--the-human-story .card-show__also { color: var(--teal-mid); }
.card-show--the-human-story .card-show__excerpt { width: 500px; color: var(--teal-deep); }
.card-show--the-human-story .card-show__divider { background: var(--gold); }

/* Platform icon rows: {block}__platforms > icon-youtube / icon-spotify / icon-apple-podcasts */
.card-show__platforms,
.hero-show__platforms,
.post-show__platforms {
	display: flex;
	gap: 15px;
}

.icon-youtube,
.icon-spotify,
.icon-apple-podcasts {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
}

.icon-youtube svg,
.icon-spotify svg,
.icon-apple-podcasts svg {
	width: 30px;
	height: 30px;
}

/* Platform icons grow a little on hover (not drawn in the pen). Mouse only; no slide for reduced-motion visitors. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.card-show__platforms a,
	.hero-show__platforms a,
	.post-show__platforms a {
		transition: transform 0.2s ease;
	}

	.card-show__platforms a:hover,
	.hero-show__platforms a:hover,
	.post-show__platforms a:hover {
		transform: scale(1.15);
	}
}

/* btn-cta colours drawn on each instance in the pen */
.card-show--the-human-story .btn-cta,
.hero-show--the-human-story .btn-cta,
.post-show .btn-cta {
	background: var(--teal-soft);
	color: var(--teal-tint);
}

.hero-show--xchange .btn-cta {
	color: var(--teal-tint);
}

/* ---------- card-post, card-worksheet ---------- */

.card-post,
.card-worksheet {
	display: flex;
	flex-direction: column;
	height: auto; /* hugs its text; the pen's 560 was one sample excerpt. Masonry grids stagger the rest. */
	overflow: hidden;
	border-radius: 16px;
}

.card-post__media,
.card-worksheet__media {
	position: relative;
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	padding: 20px 0;
	overflow: hidden;
}

.card-post__media {
	height: 285px;
	background: var(--bg-offwhite);
}

.card-post__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-worksheet__media {
	height: 293px;
	background: var(--teal-deep);
}

.card-post__badge,
.card-worksheet__badge {
	position: absolute;
	top: 20px;
	left: 19px;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 6px;
	font-size: var(--step-xs);
	font-weight: 700;
}

.card-post__badge {
	background: var(--bg-offwhite);
	color: var(--teal-mid);
}

.card-worksheet__badge {
	background: var(--gold);
	color: var(--ink);
}

/* Paper stack: sheets are rotated about their top-left corner, as in the pen. */
.card-worksheet__paper-stack,
.post-worksheet__paper-stack,
.team-member__paper-stack {
	position: relative;
	display: block;
	flex: none;
}

.card-worksheet__sheet-back,
.card-worksheet__sheet-mid,
.card-worksheet__sheet-front,
.post-worksheet__sheet-back,
.post-worksheet__sheet-mid,
.post-worksheet__sheet-front,
.team-member__sheet-back,
.team-member__sheet-mid,
.team-member__photo {
	position: absolute;
	display: block;
	overflow: hidden;
	border-radius: 6px;
	transform-origin: 0 0;
}

.card-worksheet__sheet-front img,
.post-worksheet__sheet-front img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-worksheet__paper-stack { width: 372px; height: 100%; }
.card-worksheet__sheet-back { top: 431.62px; left: 325.23px; width: 324px; height: 411px; background: var(--teal-mid); transform: rotate(-174deg); }
.card-worksheet__sheet-mid { top: 403.42px; left: 361.39px; width: 324px; height: 411px; background: var(--teal-400); transform: rotate(-184deg); }
.card-worksheet__sheet-front { top: 15.15px; left: 23.69px; width: 324px; height: 454px; background: #d9d9d9; }

.card-post__body,
.card-worksheet__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	min-height: 0;
	padding: 20px;
	background: var(--bg-offwhite);
}

.card-post__title,
.card-worksheet__title {
	margin: 0;
	color: var(--ink);
	font-size: 24px; /* typed in the pen, not the heading-small variable, so it stays 24 on phone */
	font-weight: 600;
	line-height: normal;
}

.card-post__title a,
.card-worksheet__title a {
	color: inherit;
	text-decoration: none;
}

.card-post__meta,
.card-worksheet__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.card-post__meta-list,
.card-worksheet__meta-list,
.post-worksheet__meta-list,
.worksheet-single__meta {
	display: flex;
	flex-wrap: wrap; /* on very narrow screens a whole item drops to the next line, never half of one */
	align-items: center;
	gap: 4px 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.card-post__meta-item,
.card-worksheet__meta-item,
.post-worksheet__meta-item,
.worksheet-single__meta-item {
	display: flex;
	align-items: center;
	gap: 3px;
	color: var(--teal-soft);
	font-size: var(--step-xs);
	font-weight: 600;
	white-space: nowrap;
}

.card-post__meta-item svg,
.card-worksheet__meta-item svg,
.post-worksheet__meta-item svg,
.worksheet-single__meta-item svg {
	width: 14px;
	height: 14px;
}

.card-post__excerpt,
.card-worksheet__excerpt {
	flex: 1;
	min-height: 0;
	margin: 0;
	overflow: hidden;
	color: var(--teal-deep);
	font-size: var(--step-base);
	font-weight: 500;
}

.card-post__footer,
.card-worksheet__footer,
.post-worksheet__footer {
	display: flex;
	align-items: center;
	gap: 10px;
}

.card-post__footer { justify-content: space-between; }

.card-post .btn-med--nofill { color: var(--yellow-600); }
.card-worksheet .btn-med--nofill { color: var(--teal-mid); }
.post-worksheet .btn-med--nofill { color: var(--teal-deep); }

/* ---------- home (post-grid) ---------- */

.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	gap: 30px;
}

/*
 * Masonry (blog + Resources): js/site.js adds is-masonry and gives each card a grid-row-end span
 * for its own height, so cards hug their text and the next one tucks up under it. Without the
 * script the grid stays a normal equal-height-per-row grid.
 */
.is-masonry {
	grid-auto-rows: 1px;
	row-gap: 0;
	align-items: start;
}

.lazy-load {
	display: flex;
	grid-column: 1 / -1;
	justify-content: center;
	align-items: center;
	height: 31px;
	color: var(--teal-mid);
}

.lazy-load[hidden] {
	display: none;
}

.lazy-load__spinner {
	display: flex;
}

.lazy-load__spinner svg {
	width: 38px;
	height: 38px;
	animation: lazy-load-spin 1.2s linear infinite;
}

@keyframes lazy-load-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.lazy-load__spinner svg { animation-duration: 6s; }
}

/* WordPress's own page links, kept as the no-JS / search-engine fallback. */
.pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 40px;
}

/* ---------- single ---------- */

.post-hero {
	position: relative;
	z-index: 0;
	height: 144px;
}

.post-hero .img-hero,
.post-hero .txt-hero {
	position: absolute;
	left: 0;
	right: 0;
}

.post-hero .img-hero { top: 0; }
.post-hero .txt-hero { top: 142px; }

.post-single {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	width: min(100% - 40px, 1100px);
	padding-bottom: 60px;
}

.post-single__media {
	display: block;
	width: 100%;
	height: 600px;
	object-fit: cover;
	border-radius: 10px;
}

.post-single .prose {
	width: 100%;
	max-width: none;
	color: var(--ink);
	font-size: var(--body-size);
	font-weight: 500;
	line-height: normal;
}

.post-single .prose p {
	margin: 0 0 1.25em;
}

.post-single .prose > :last-child {
	margin-bottom: 0;
}

.post-show__actions {
	display: flex;
	gap: 24px;
}

.hero-show__listen,
.post-show__listen {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 50.8px;
}

.hero-show__also,
.post-show__also {
	margin: 0;
	color: var(--teal-mid);
	font-family: var(--font-display);
	font-size: var(--step-lg);
	font-weight: 400;
}

.post-single__nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.post-single__divider {
	width: 100%;
	margin: 15px 0;
	border-top: 2px solid var(--gold-light);
}

.post-single__nav-links {
	display: flex;
	width: 100%;
	overflow: hidden;
}

.post-single__nav-link--prev,
.post-single__nav-link--next {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 12px;
	min-width: 0;
	height: 45px;
	overflow: hidden;
	text-decoration: none;
}

.post-single__nav-link--next {
	justify-content: flex-end;
}

.post-single__nav-link--prev > span,
.post-single__nav-link--next > span {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.post-single__nav-link--prev svg,
.post-single__nav-link--next svg {
	flex: none;
	width: 21px;
	height: 21px;
	color: #d5d8dc;
}

.post-single__nav-divider {
	flex: none;
	width: 100px;
}

.post-single__nav-label {
	color: var(--ink);
	font-size: var(--step-base);
	font-weight: 600;
}

.post-single__nav-title {
	overflow: hidden;
	color: var(--teal);
	font-size: var(--step-base);
	font-weight: 700;
	white-space: nowrap;
}

/* ---------- post-show ---------- */

.post-show {
	position: relative;
	display: flex;
	width: 100%;
	height: 275px;
	overflow: hidden;
	border-radius: 16px;
	background: var(--bg-offwhite);
}

.post-show__bg-l,
.post-show__bg-r,
.hero-show__bg-l,
.hero-show__bg-r {
	position: relative;
	flex: 1;
}

.post-show__bg-l::before,
.post-show__bg-r::before,
.hero-show__bg-l::before,
.hero-show__bg-r::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
}

.post-show__bg-l { opacity: 0.1; }
.post-show__bg-r { opacity: 0.6; }

.post-show__bg-l::before {
	width: 100%;
	height: 288px;
	background: url('images/yoked-media-placeholder.webp') center / cover;
	filter: blur(20px);
}

.post-show__bg-r::before {
	width: 553px;
	height: 282px;
	background: url('images/yoked-media-placeholder.webp') center / cover;
}

.post-show__bg-overlay,
.post-show__wrap {
	position: absolute;
	inset: 0;
}

.post-show__bg-overlay,
.card-show--the-human-story .hero-show__bg-overlay,
.hero-show--the-human-story .hero-show__bg-overlay {
	background: linear-gradient(to left, #ede6da00, var(--bg-offwhite) 45%, var(--bg-offwhite) 60%, #ede6da00);
}

.post-show__inner {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	height: 100%;
	padding: 20px;
}

.post-show__logo {
	flex: none;
	width: 199px;
	height: 191px;
	object-fit: contain;
}

.post-show__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
	height: 100%;
}

.post-show__heading {
	display: flex;
	flex-direction: column;
}

.post-show__kicker {
	margin: 0;
	color: var(--teal-mid);
	font-size: var(--body-size);
	font-weight: 500;
}

.post-show__title {
	margin: 0;
	color: var(--teal-mid);
	font-size: var(--step-3xl);
	font-weight: 500;
	line-height: normal;
}

/* ---------- player-pill, player-dock ---------- */

.player-pill {
	padding: 10px 20px;
	border-radius: 16px;
}

.post-show .player-pill {
	width: 100%;
}

/*
 * post-show--the-human-story / post-show--xchange: the two variants drawn in the pen.
 * Human Story keeps the cream box and gets the hosts photo on the right; Xchange is a dark
 * box with its show photo across the full width, cream text and the yellow button.
 */
.post-show--the-human-story .post-show__bg-l { opacity: 0.2; }

.post-show--the-human-story .post-show__bg-r::before {
	background-image: url('images/team-and-hosts/yoked-media-hosts-lincoln-shaamiela.webp');
}

.post-show--xchange {
	background: var(--ink);
}

.post-show--xchange .post-show__bg-l,
.post-show--xchange .post-show__bg-overlay {
	display: none;
}

.post-show--xchange .post-show__bg-r {
	opacity: 0.4;
}

.post-show--xchange .post-show__bg-r::before {
	top: -3.5px; /* drawn 282 tall, centred in the 275 box */
	width: 100%;
	height: 282px;
	background-image: url('images/shows/hero-xchange.webp');
}

.post-show--xchange .post-show__kicker,
.post-show--xchange .post-show__title,
.post-show--xchange .post-show__also {
	color: var(--cream);
}

.post-show--xchange .btn-cta {
	background: var(--gold);
	color: var(--ink);
}

/*
 * Sticky on both show pages (Naming Convention §15 decision 1). The dock sits in
 * main after show-hosts and is pulled up into the bottom of that section, where
 * the pen draws it; until you scroll that far it's stuck to the bottom of the screen.
 */
.player-dock {
	--dock-h: 124px;
	position: sticky;
	bottom: 0;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	height: var(--dock-h);
	margin-top: calc(-1 * var(--dock-h) - 50px); /* back up over show-hosts' bottom padding + border */
	margin-bottom: 50px;
	padding: 20px;
}

.player-dock .player-pill {
	width: 808px;
	max-width: 100%;
}

/* ---------- show pages (hero-show, show-hosts) ---------- */

.hero-show {
	position: relative;
	display: flex;
	height: 702px;
	overflow: hidden;
}

.hero-show--the-human-story { background: var(--cream); }
.hero-show--xchange { background: var(--ink); }

.hero-show__bg-l { opacity: 0.2; }
.hero-show__bg-r { opacity: 0.6; }

.hero-show__bg-l::before {
	width: 100%;
	height: 605px;
	background: url('images/yoked-media-placeholder.webp') center / cover;
	filter: blur(20px);
}

.hero-show__bg-r::before {
	width: 100%;
	height: 773px;
	background: var(--photo) center / cover no-repeat;
}

.hero-show--xchange .hero-show__bg-l {
	display: none;
}

.hero-show--xchange .hero-show__bg-r::before {
	top: auto;
	left: auto;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 712px;

}

/* Only in the phone hero (hero-show--the-human-story@phone / hero-show--xchange@phone). */
.hero-show__photo,
.hero-show__watermark,
.hero-show__divider {
	display: none;
}

.hero-show__bg-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	overflow: hidden;
}

.hero-show__wrap {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: min(100%, var(--wrap));
	height: 480px;
	padding: 50px;
	overflow: hidden;
	border-radius: 16px;
}

.hero-show__inner {
	display: flex;
	align-items: center;
	gap: 70px;
	width: 100%;
	height: 100%;
}

.hero-show__logo {
	flex: none;
	width: 389px;
	height: 100%;
	object-fit: contain;
}

.hero-show__body {
	display: flex;
	flex: 1;
	min-width: 0; /* flex items default to min-width:auto, which let hero-show__excerpt's fixed width overflow narrower desktop viewports instead of shrinking */
	flex-direction: column;
	justify-content: space-around;
	gap: 24px;
}

.hero-show__body .btn-cta {
	align-self: flex-start;
}

.hero-show__title {
	margin: 0;
	font-size: var(--step-4xl);
	font-weight: 500;
	line-height: normal;
}

.hero-show__excerpt {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: min(531px, 100%);
	font-size: var(--body-size);
	font-weight: 500;
	line-height: 1.4;
}

.hero-show__excerpt-text-short p,
.hero-show__excerpt-text-full p,
.hero-show__excerpt-text-full-inline p {
	margin: 0 0 1em;
}

.hero-show__excerpt-text-short p:last-child,
.hero-show__excerpt-text-full p:last-child,
.hero-show__excerpt-text-full-inline p:last-child {
	margin-bottom: 0;
}

.hero-show__excerpt-text-full-inline {
	display: none;
}

.hero-show__read-more {
	align-self: flex-start;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--font-body);
	font-size: var(--body-size);
	font-weight: 700;
	cursor: pointer;
}

.hero-show--the-human-story .hero-show__title { color: var(--teal-mid); }
.hero-show--the-human-story .hero-show__excerpt { color: var(--teal-deep); }
.hero-show--the-human-story .hero-show__read-more { color: var(--teal-soft); }
.hero-show--xchange .hero-show__title { color: var(--cream); }
.hero-show--xchange .hero-show__excerpt,
.hero-show--xchange .hero-show__also { color: var(--teal-tint); }
.hero-show--xchange .hero-show__read-more { color: var(--gold); }

/*
 * Human Story's full copy is short enough to just show outright (RUESY override in
 * the pen replaces the short text with the full text and disables hero-show__read-more
 * on that instance). Xchange's copy stays too long for this and keeps the read-more/pill.
 */
@media (min-width: 1000px) {
	.hero-show--the-human-story .hero-show__excerpt {
		width: min(645px, 100%);
	}

	.hero-show--the-human-story .hero-show__excerpt-text-short,
	.hero-show--the-human-story .hero-show__read-more,
	.hero-show--the-human-story .hero-show__excerpt-pill {
		display: none;
	}

	.hero-show--the-human-story .hero-show__excerpt-text-full-inline {
		display: block;
	}
}

/*
 * hero-show__excerpt-pill: glass card the pen draws hidden over hero-show__wrap
 * (enabled: false), showing the full excerpt on "Read more". Horizontal position matches
 * the pen's Dee9c coords translated into wrap-relative insets (wrap is 1300x480, pill
 * flush with the right edge). Vertically centered and sized to its content (up to the
 * pen's drawn height) rather than stretched, so short copy doesn't leave dead space.
 */
.hero-show__excerpt-pill {
	position: absolute;
	top: 50%;
	right: 0;
	left: 490px;
	transform: translateY(-50%);
	height: auto;
	max-height: 446px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 30px;
	border-radius: 16px;
	background: #f9f8f9c9;
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	color: var(--teal-deep);
}

.hero-show__excerpt-pill[hidden] {
	display: none;
}

.hero-show__excerpt-text-full {
	overflow-y: auto;
	max-height: 100%;
}

.hero-show__excerpt-pill-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	cursor: pointer;
}

.hero-show__excerpt-pill-close svg {
	width: 100%;
	height: 100%;
}

.hero-show__header {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 12px;
	width: 100%;
	height: 100px;
}

.hero-show--the-human-story .hero-show__header { background: linear-gradient(to top, var(--cream), #ede6da00); }
.hero-show--xchange .hero-show__header { background: var(--cream); }

.hero-show__header-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	width: min(100%, var(--wrap));
	margin: 0;
	padding: 10px;
	font-size: var(--step-3xl);
	font-weight: 400;
	line-height: normal;
}

.hero-show__header-word--first { color: var(--teal-soft); }
.hero-show__header-word--second { color: var(--yellow-600); }

.hero-show + .wrap {
	padding: 20px 0 50px;
}

.show-hosts {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* 50px as drawn (less the 2px border the pen draws inside), plus room for the player-dock in the bottom of this band. */
	padding: 48px 0 calc(48px + 124px);
	background: var(--teal-tint);
	border-top: 2px solid var(--teal-soft);
	border-bottom: 2px solid var(--teal-soft);
}

.show-hosts__inner {
	display: flex;
	gap: 20px;
	width: min(100% - 40px, var(--wrap));
}

.show-hosts__body {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	flex-direction: column;
	justify-content: space-around;
	gap: 30px;
	min-height: 433.53px;
}

.show-hosts__heading {
	display: flex;
	flex-direction: column;
	margin: 0;
	font-weight: 400;
}

.show-hosts__label {
	color: var(--teal-mid);
	font-size: var(--step-lg);
}

.show-hosts__names {
	color: var(--teal-deep);
	font-size: var(--step-3xl);
	font-weight: 500;
}

.show-hosts__bio {
	display: flex;
	flex-direction: column;
	gap: 14.39px;
	width: 549px;
	max-width: 100%;
}

.show-hosts__text {
	margin: 0;
	color: var(--ink);
	font-size: var(--body-size);
	font-weight: 500;
}

.show-hosts__text--bold {
	font-weight: 700;
}

/* Shares the row with the bio and stops at the drawn 650px: fixed at 650 it ran off the edge between 1000px and ~1300px. */
.show-hosts__photo {
	flex: 1 1 0;
	min-width: 0;
	max-width: 650px;
	object-fit: cover;
	border-radius: 16px;
}

/* ---------- post-worksheet ---------- */

/*
 * post-worksheet: desktop only (card-worksheet takes over on phone, see the phone
 * breakpoint). Sits after the text inside post-single__column and sticks to the bottom
 * of the screen while you read, then settles into place at the end of the text.
 * The column wraps the prose AND the promo (Elementor's "stay in column"), so it can
 * only stick inside the text: it never rides up over the title, image or post-show box.
 * No negative-margin runway: sticky counts the margin box, so a negative margin let the
 * card ride up over whatever sat above the column.
 */
.post-single__column {
	width: 100%;
}

.post-worksheet-card {
	display: none;
}

.post-worksheet {
	position: sticky;
	bottom: 20px;
	z-index: 5;
	margin-top: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	width: 100%;
	min-height: 155px;
	padding: 20px;
	overflow: hidden;
	border-radius: 16px;
	background: #ede6dad1;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.post-worksheet__paper-stack { width: 229px; height: 133px; margin: -9px 0; /* the pen clips the stack inside a 155px box: 133 - 18 keeps the box at 155 */ }
.post-worksheet__sheet-back { top: 233.18px; left: 186.04px; width: 176px; height: 223px; background: var(--teal-mid); transform: rotate(-174deg); }
.post-worksheet__sheet-mid { top: 217.86px; left: 205.68px; width: 176px; height: 223px; background: var(--teal-400); transform: rotate(-184deg); }
.post-worksheet__sheet-front { top: 6.92px; left: 22.22px; width: 176px; height: 247px; background: #d9d9d9; }

.post-worksheet__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
}

.post-worksheet__heading,
.card-worksheet--promo .card-worksheet__title {
	display: flex;
	align-items: center;
	gap: 10px;
}

.post-worksheet__heading svg,
.card-worksheet--promo .card-worksheet__title svg {
	flex: none;
	width: 27px;
	height: 24px;
	color: var(--red);
}

.post-worksheet__footer { gap: 30px; }

.post-worksheet__title {
	margin: 0;
	color: var(--teal-deep);
	font-family: var(--font-ui);
	font-size: 24px; /* typed in the pen, so it doesn't shrink on phone */
	font-weight: 600;
	line-height: 1.27;
}

.post-worksheet__excerpt {
	margin: 0;
	color: var(--ink);
	font-size: var(--step-base);
	font-weight: 500;
	line-height: 1.44;
}

/* ---------- page-signoff ---------- */

.page-signoff {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.page-signoff::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--photo) center / cover no-repeat;
	opacity: 0.2;
}

.page-signoff__wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(100% - 40px, 1140px);
	height: 338px; /* fixed in the pen; a three-line quote runs into the bottom padding there too */
	padding: 100px 0;
}

.page-signoff__quote {
	width: 798px;
	max-width: 100%;
	margin: 0;
	color: var(--teal-mid);
	font-family: var(--font-display);
	font-size: var(--step-3xl);
	font-weight: 400;
	text-align: center;
}

/* ---------- page-about ---------- */

.about {
	display: flex;
	gap: 100px;
}

.about__col--l,
.about__col--r {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: 100px;
}

.about__col--l {
	flex: none;
	width: 650px;
}

.about__col--r {
	flex: 1;
	min-width: 0;
	padding-top: 100px;
}

.about__block {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
}

.about__heading {
	margin: 0;
	font-size: var(--step-3xl);
	font-weight: 500;
	line-height: normal;
}

.about__heading--soft {
	color: var(--teal-soft);
	font-size: 24px; /* typed in the pen, so it doesn't shrink on phone */
	font-weight: 600;
}

.about__text,
.about__list-text {
	margin: 0;
	color: var(--ink);
	font-size: var(--body-size);
	font-weight: 500;
}

.about__text p,
.connect__text p {
	margin: 0;
}

.about__text p + p,
.connect__text p + p {
	margin-top: 1.25em;
}

.about__text--bold {
	max-width: 461px;
	font-weight: 700;
}

.about__divider {
	display: block;
	width: 100%;
	object-fit: contain;
}

.about__photo {
	display: block;
	width: 100%;
	height: 487px;
	object-fit: cover;
	border-radius: 20px;
}

.about__list {
	display: flex;
	flex-direction: column;
	gap: 14.39px;
}

.about__list-item {
	display: flex;
	flex-direction: column;
}

.about__list-title {
	margin: 0;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--step-base);
	font-weight: 700;
	line-height: normal;
}

.about__emblem-band {
	width: 100%;
	height: 323px;
	background: url('images/logos/yoked-logo-emblem.webp') center / contain no-repeat;
}

/* ---------- page-connect ---------- */

.connect {
	display: flex;
	gap: 100px;
}

.connect__col--l,
.connect__col--r {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.connect__col--l {
	flex: 1;
	min-width: 0;
	gap: 150px;
	padding: 100px 0;
}

.connect__col--r {
	flex: none;
	width: 700px;
	gap: 100px;
}

.connect__block {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
}

.connect__col--l > .connect__block:first-child {
	gap: 50px;
}

.connect__heading {
	margin: 0;
	font-size: var(--step-3xl);
	font-weight: 500;
	line-height: normal;
}

.connect__emblem,
.connect__image,
.connect__divider {
	display: block;
	object-fit: contain;
}

.connect__intro {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 500px;
	max-width: 100%;
}

.connect__lead {
	margin: 0;
	color: var(--teal-soft);
	font-family: var(--font-ui);
	font-size: var(--step-lg);
	font-weight: 500;
}

.connect__text {
	margin: 0;
	color: var(--ink);
	font-size: var(--body-size);
	font-weight: 500;
}

.connect__text--bold {
	font-size: var(--step-base);
	font-weight: 700;
}

.connect__reasons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 618px;
	max-width: 100%;
}

.connect__reasons-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.connect-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 40px;
	padding: 0 15px;
	border-radius: 5px;
	color: var(--cream);
}

.connect-pill__icon {
	display: flex;
	justify-content: center;
	width: 16px;
	font-size: 14px;
	line-height: 1;
}

.connect-pill__label {
	font-size: var(--step-base);
	font-weight: 700;
}

.team-member {
	display: flex;
	align-items: center;
	overflow: hidden;
	border-radius: 16px;
}

.team-member__photo-wrap {
	position: relative;
	display: flex;
	flex: none;
	flex-direction: column;
	justify-content: center;
	width: 215px;
	height: 246px;
}

.team-member__paper-stack { width: 100%; height: 100%; }
.team-member__sheet-back { top: 225.42px; left: 188.69px; width: 182px; height: 192px; background: var(--sheet-back); transform: rotate(-174deg); }
.team-member__sheet-mid { top: 215.44px; left: 209.43px; width: 190px; height: 202px; background: var(--sheet-mid); transform: rotate(-184deg); }
.team-member__photo { top: 25.36px; left: 21.16px; width: 177px; height: 194px; object-fit: cover; }

.team-member__badge {
	position: absolute;
	top: 179px;
	left: 46px;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 6px;
	background: var(--badge-bg);
}

.team-member__role {
	color: var(--badge-text);
	font-size: var(--step-base);
	font-weight: 700;
}

.team-member__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	width: 383px;
	padding: 24px;
}

.team-member__title {
	width: 291px;
	max-width: 100%;
	margin: 0;
	color: var(--ink);
	font-size: 24px; /* typed in the pen, so it doesn't shrink on phone */
	font-weight: 600;
	line-height: normal;
}

.team-member__excerpt {
	width: 291px;
	max-width: 100%;
	margin: 0;
	color: var(--teal-mid);
	font-size: var(--step-base);
	font-weight: 500;
}

.contact-form {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	width: 100%;
}

.contact-form__row {
	display: flex;
	gap: 20px;
}

.contact-form__row > * {
	flex: 1;
	min-width: 0;
}

.contact-form .btn-sml {
	align-self: flex-start;
	background: var(--teal-soft);
}

.float-label-input {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 100%;
}

.float-label-input__label {
	color: var(--teal-soft);
	font-size: var(--body-size);
	font-weight: 700;
}

.float-label-input__field {
	display: flex;
	gap: 4px;
	padding: 10px;
	border: 1px solid var(--teal-400);
	border-radius: 5px;
	background: var(--cream);
}

.float-label-input__icon {
	display: flex;
	flex: none;
	width: 14px;
	height: 20px;
	align-items: center;
	color: var(--red);
}

.float-label-input__icon svg {
	width: 14px;
	height: 14px;
}

.float-label-input__field input,
.float-label-input__field textarea {
	flex: 1;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--teal-deep);
	font-family: var(--font-body);
	font-size: var(--step-base);
	font-weight: 600;
	line-height: normal;
}

.float-label-input__field textarea {
	height: 117px;
	resize: vertical;
}

.float-label-input__field input::placeholder,
.float-label-input__field textarea::placeholder {
	color: var(--teal-deep);
	opacity: 1;
}

.connect-form__hp {
	position: absolute;
	left: -9999px;
}

.form-notice {
	margin: 0;
	padding: 12px 16px;
	border-radius: 10px;
}

.form-notice--ok  { background: var(--teal-tint); color: var(--teal-deep); }
.form-notice--bad { background: var(--gold-tint); color: var(--ink); }

/* ---------- popup-subscribe ---------- */

/*
 * popup-subscribe (MtnCb) and popup-subscribe@phone (GGA3K). The padding sits on __inner, not the
 * dialog, so a click on the dialog itself can only mean the dark area around it (closes the popup).
 * The pen draws no dark area: the dim is my pick, change it in ::backdrop.
 */
.popup-subscribe {
	width: min(677px, calc(100vw - 32px));
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: var(--white);
	box-shadow: 2px 8px 7px rgba(0, 0, 0, 0.2);
}

.popup-subscribe::backdrop {
	background: rgba(16, 36, 35, 0.5);
}

.popup-subscribe__close {
	position: absolute;
	top: 24px;
	right: 31px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: #515962;
	cursor: pointer;
}

.popup-subscribe__close svg {
	width: 15px;
	height: 15px;
}

.popup-subscribe__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 50px;
}

.popup-subscribe__title {
	margin: 0;
	color: var(--teal-deep);
	font-family: var(--font-display);
	font-size: var(--step-3xl);
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
}

.popup-subscribe__title-short {
	display: none;
}

.popup-subscribe__form,
.popup-subscribe__fields {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: 100%;
}

.popup-subscribe__form[hidden] {
	display: none;
}

.popup-subscribe .btn-sml {
	background: var(--teal-soft);
}

/* The pen's labels are 23px and its fields 40px tall including the border. */
.popup-subscribe .float-label-input__label {
	line-height: normal;
}

.popup-subscribe .float-label-input__field {
	box-sizing: border-box;
	align-items: center;
	height: 40px;
}

.popup-subscribe .form-notice {
	width: 100%;
	text-align: center;
}

@media (max-width: 999.98px) {
	.popup-subscribe {
		width: min(302px, calc(100vw - 32px));
	}

	.popup-subscribe__close {
		top: 3px;
		right: 29px;
	}

	.popup-subscribe__inner {
		gap: 20px;
		padding: 15px 20px;
	}

	.popup-subscribe__title-long {
		display: none;
	}

	.popup-subscribe__title-short {
		display: inline;
	}

	.popup-subscribe__fields {
		gap: 10px;
	}
}

/* ---------- page-privacy ---------- */

.legal {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.legal__section {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.legal__heading {
	margin: 0;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--step-base);
	font-weight: 700;
	line-height: normal;
}

.legal__text {
	margin: 0;
	color: var(--ink);
	font-size: var(--step-base);
	font-weight: 500;
}

.legal__text--bold {
	font-weight: 700;
}

.legal__table {
	width: 1139px;
	max-width: 100%;
	border-collapse: collapse;
}

.legal__table th,
.legal__table td {
	height: 52.61px;
	padding: 15px;
	border: 1px solid #80808080;
	color: var(--ink);
	font-size: 14.4px;
}

.legal__table th {
	font-weight: 700;
	text-align: center;
}

.legal__table td {
	font-weight: 500;
	text-align: left;
}

.legal__table tbody tr:first-child td {
	background: #80808012;
}

.legal__updated {
	margin: 0;
	color: var(--ink);
	font-size: var(--body-size);
	font-weight: 700;
}

/* ---------- templates with no pen frame (page.php, index.php, worksheets) ---------- */

.page-article__title,
.archive-head__title {
	font-size: var(--step-4xl);
	text-align: center;
	margin: 48px 0 32px;
}

.page-article__media img {
	border-radius: 16px;
}

.prose {
	max-width: 75ch;
	margin-inline: auto;
	line-height: 1.44;
}

.prose h2 {
	font-size: var(--step-2xl);
	margin-top: 40px;
}

.prose h3 {
	font-family: var(--font-ui);
	font-size: var(--step-md);
	color: var(--teal-mid);
	margin-top: 28px;
}

.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px 20px; }

.prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 24px;
}

.prose th, .prose td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--hairline);
	vertical-align: top;
}

.prose th {
	font-family: var(--font-ui);
	color: var(--teal-deep);
}

.worksheet-single__excerpt {
	margin: 0 0 12px;
}

.worksheet-single__meta {
	margin-bottom: 16px;
}

.worksheet-single {
	display: flex;
	gap: 40px;
	padding: 48px 0;
}

.worksheet-single__media img {
	display: block;
	width: 320px;
	border-radius: 14px;
	object-fit: cover;
}

.worksheet-single__title {
	font-family: var(--font-display);
	color: var(--teal-mid);
	margin: 0 0 16px;
}

.worksheet-single__download {
	display: inline-block;
	margin-top: 24px;
	padding: 10px 24px;
	background: var(--gold);
	color: var(--ink);
	border-radius: 10px;
	text-decoration: none;
	font-family: var(--font-ui);
}

/*
 * ---------- phone (under 1000px) ----------
 * The @phone frames and components in YokedWebsite.pen (Naming Convention §16), drawn at 402px
 * wide. Used under 1000px and fluid in between: sections fill the width, and the four text sizes
 * slide via the clamped tokens in :root. Sizes below are the pen's phone values.
 */
@media (max-width: 999.98px) {
	:root {
		--header-h: 150px;
	}

	/* site-header@phone: logo above the nav, smaller; no search. */
	.site-header {
		padding: 10px;
		pointer-events: none; /* the box keeps its height while the logo is hidden; only the pill takes taps */
	}

	.site-header__pill {
		height: auto;
		padding: 19px 23px; /* 20px / 24px as drawn, less the 1px border the pen draws inside */
		pointer-events: auto;
	}

	.site-header__inner {
		flex-direction: column;
		gap: 10px;
	}

	.site-header__logo img {
		width: 116px;
		height: 58px;
	}

	/*
	 * Hides when scrolling down, back when scrolling up (js/site.js sets inert on the logo).
	 * The header's bottom padding takes the room the pill gives up, so the page under it doesn't jump.
	 */
	.site-header__logo[inert] {
		margin-top: -68px; /* the logo's 58px plus the 10px gap */
		opacity: 0;
		visibility: hidden;
	}

	.site-header:has(.site-header__logo[inert]) {
		padding-bottom: 78px;
	}

	.site-nav {
		flex: none;
		align-self: stretch;
	}

	.site-nav__list {
		gap: clamp(20px, 100vw - 362px, 40px); /* 40 as drawn at 402; closes up on narrower phones so the nav fits */
	}

	.site-search {
		display: none;
	}

	.site-footer__emblem {
		width: 107px;
		height: 110px;
	}

	/* ---------- heroes ---------- */

	.page-hero,
	.page-hero .img-hero {
		height: 206px;
	}

	.page-hero .txt-hero {
		height: 64px;
	}

	.page-hero + .wrap:not(.legal) {
		padding-block: 20px;
	}

	/* ---------- front-page@phone ---------- */

	.collage {
		gap: 10px;
	}

	.collage__tile {
		width: 97px;
		height: 97px;
	}

	.collage + .wrap {
		gap: 20px;
	}

	.collage + .wrap .txt-hero {
		height: 60px;
	}

	.card-grid {
		grid-template-columns: 1fr;
	}

	/* card-show--xchange@phone / card-show--the-human-story@phone: logo on top, text below. */
	.card-show {
		min-height: 0;
		padding: 24px;
	}

	.card-show__inner {
		flex-direction: column;
		align-items: center;
		gap: 20px;
		width: 100%;
		min-height: 0;
	}

	.card-show__title,
	.card-show .card-show__excerpt {
		text-align: center;
	}

	.card-show--xchange .card-show__logo {
		width: 213px;
		height: 213px;
	}

	.card-show--the-human-story .card-show__logo {
		width: 220px;
		height: 213px;
	}

	.card-show__body {
		flex: none;
		align-items: center;
		gap: 16px;
		width: 100%;
	}

	.card-show .card-show__excerpt {
		width: auto;
	}

	.card-show__body .btn-cta {
		align-self: stretch;
	}

	.card-show__listen {
		justify-content: space-between;
	}

	/* The photo is drawn 1283 wide, its right edge 22.4px past the card's right edge. */
	.card-show--xchange .card-show__photo::before {
		left: auto;
		right: -22.4px;
		width: 1283px;
	}

	.card-show--xchange .card-show__photo::before {
		opacity: 0.6;
	}

	.card-show--xchange .card-show__photo::after {
		display: none;
	}

	.card-show--xchange .card-show__watermark {
		top: 275px;
		left: 0;
		width: 100%;
		height: 120px;
	}

	/*
	 * Host photo faded behind the logo (§16 decision 5): 923×572 and 449×644 on the 603px card, as
	 * drawn. On wider screens they stretch to keep covering the card, so no edges show.
	 */
	.card-show--the-human-story .card-show__photo {
		top: -47px;
		right: auto;
		left: calc(50% + 20px - max(923px, 100% + 40px) / 2);
		width: max(923px, 100% + 40px);
		height: calc(100% - 31px);
	}

	.card-show--the-human-story .card-show__photo::before {
		opacity: 0.34;
	}

	.card-show--the-human-story .card-show__photo::after {
		background: linear-gradient(89.23deg, var(--yellow-100) 0%, #10242300 45.9%);
	}

	/* The phone card has no overlay layer; the hero's phone rule below would turn the shared class into display: contents. */
	.card-show .hero-show__bg-overlay {
		display: none;
	}

	.card-show--the-human-story .card-show__watermark {
		top: -32px;
		right: -39px;
		left: -48px;
		width: auto;
		height: calc(100% + 41px);
	}

	.card-show--the-human-story .card-show__watermark::before {
		opacity: 0.03;
	}

	.card-show--the-human-story .card-show__watermark::after {
		background: linear-gradient(4.37deg, var(--yellow-100) 12.9%, #10242300 95.4%);
	}

	/* ---------- home@phone ---------- */

	.post-grid {
		grid-template-columns: 1fr;
	}

	/* ---------- page-the-human-story@phone / page-the-xchange@phone ---------- */

	/* hero-show--*@phone: photo behind, then logo, body and the Episode List heading stacked at the bottom. */
	.hero-show {
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		gap: 20px;
		height: auto;
		min-height: 854px; /* 854 as drawn. The real blurb is longer than the pen's sample text, so the */
		padding-top: 174px; /* hero grows and keeps the 174px drawn above the logo, clear of the header */
	}

	.hero-show--the-human-story {
		background: var(--bg-offwhite);
	}

	.hero-show__bg-l,
	.hero-show__bg-r {
		display: none;
	}

	.hero-show__bg-overlay,
	.hero-show__wrap,
	.hero-show__inner {
		display: contents;
	}

	.hero-show__photo,
	.hero-show__watermark {
		position: absolute;
		display: block;
		pointer-events: none;
	}

	.hero-show__photo::before,
	.hero-show__photo::after {
		content: '';
		position: absolute;
		inset: 0;
	}

	.hero-show__photo::before {
		background: var(--photo) center / cover no-repeat;
	}

	.hero-show__logo,
	.hero-show__body,
	.hero-show__header {
		position: relative; /* above the photo */
	}

	/* 817 wide from x -217, as drawn; stretches on wider screens to keep covering the hero. */
	.hero-show--the-human-story .hero-show__photo {
		top: 106px;
		bottom: 0;
		left: calc(50% - 9.35px - max(817px, 100% + 19px) / 2);
		width: max(817px, 100% + 19px);
	}

	.hero-show--the-human-story .hero-show__photo::before {
		opacity: 0.2;
	}

	.hero-show--the-human-story .hero-show__photo::after {
		background: linear-gradient(270.77deg, var(--yellow-100) 0%, #10242300 45.4%);
	}

	/* Drawn with its image at 0%, so only the top and bottom fade shows. */
	.hero-show--the-human-story .hero-show__watermark {
		inset: 0 -23px 0 -24px;
		background: linear-gradient(177.26deg, var(--bg-offwhite) 13.4%, #1b2e2d00 34.5%, #11252402 54.2%, var(--bg-offwhite) 81.7%);
	}

	.hero-show--xchange .hero-show__photo {
		inset: 0;
	}

	.hero-show--xchange .hero-show__photo::before {
		left: auto;
		width: 1784px;
		opacity: 0.4;
	}

	.hero-show--the-human-story .hero-show__logo {
		width: 273px;
		height: 264px;
	}

	.hero-show--xchange .hero-show__logo {
		width: 280px;
		height: 271px;
	}

	.hero-show__body {
		flex: none;
		align-items: center;
		justify-content: flex-start;
		gap: 16px;
		width: 100%;
		padding: 0 20px;
	}

	.hero-show__excerpt {
		width: 100%;
		text-align: center;
	}

	.hero-show__read-more {
		align-self: center;
	}

	.hero-show__body .btn-cta {
		align-self: stretch;
	}

	/*
	 * hero-show__excerpt-pill@phone: wrap is display:contents here, so the pill's
	 * position:absolute resolves against .hero-show itself (402x854 as drawn) instead.
	 * Pushed down from the pen's y:66 to clear the sticky site-header (~148px), which
	 * otherwise sits on top of the pill's close button and blocks it from being tapped.
	 * Resets the desktop rule's vertical-centering/hug-height (not wanted at this size).
	 */
	.hero-show__excerpt-pill {
		top: 160px;
		left: 33.5px;
		right: 33.5px;
		bottom: 90px;
		transform: none;
		max-height: none;
	}

	/* hero-show--xchange@phone colours; the desktop instance uses teal-100 for both */
	.hero-show--xchange .btn-cta { color: var(--ink); }
	.hero-show--xchange .hero-show__also { color: var(--cream); }

	.hero-show__listen {
		justify-content: space-between;
		width: 100%;
	}

	.hero-show__divider {
		display: block;
		width: 100%;
		height: 1px;
		margin: 0;
		border: 0;
	}

	.hero-show--the-human-story .hero-show__divider { background: var(--gold); }
	.hero-show--xchange .hero-show__divider { background: var(--teal-mid); }

	.hero-show__header {
		height: 54px;
	}

	.hero-show__header-wrap {
		gap: 5px;
		width: 100%;
		padding: 0 20px;
	}

	.hero-show + .wrap {
		padding: 20px 0 10px;
	}

	/* show-hosts: bio above the photo, photo full width. */
	.show-hosts__inner {
		flex-direction: column;
		gap: 30px;
	}

	.show-hosts__body {
		flex: none;
		min-height: 0;
	}

	.show-hosts__bio {
		width: auto;
	}

	.show-hosts__photo {
		flex: none;
		max-width: none;
		width: 100%;
		height: auto;
		aspect-ratio: 650 / 433.53;
	}

	.player-dock .player-pill {
		width: 100%;
	}

	/* ---------- page-about@phone ---------- */

	.about {
		flex-direction: column;
		gap: 50px;
	}

	.about__col--l,
	.about__col--r {
		flex: none;
		gap: 30px;
		width: auto;
		padding-top: 0;
	}

	.about__text--bold {
		max-width: none;
	}

	.about__photo {
		height: auto;
		aspect-ratio: 650 / 487;
	}

	.about__emblem-band {
		display: none;
	}

	/* page-signoff (About, Connect) */
	.page-signoff__wrap {
		width: 100%;
		height: auto;
		padding: 100px 20px;
	}

	.page-signoff__quote {
		width: 100%;
	}

	/* ---------- page-connect@phone ---------- */

	.connect {
		flex-direction: column;
		gap: 50px;
	}

	.page-hero + .wrap.connect {
		padding-block: 30px;
	}

	.connect__col--l {
		flex: none;
		gap: 30px;
		padding: 0;
	}

	.connect__col--r {
		gap: 50px;
		width: auto;
	}

	.connect__col--l > .connect__block:first-child {
		gap: 20px;
	}

	.connect__emblem {
		display: none;
	}

	.connect__image {
		width: 100%;
		height: 182px;
	}

	.connect__reasons {
		width: auto;
	}

	.connect__reasons-row {
		flex-direction: column;
		align-items: flex-start;
	}

	/* team-member: photo above the name and text, with no gap between them. */
	.team-member {
		flex-direction: column;
		align-items: stretch;
		/* The drawn links row (team-member__links, not built yet) keeps the text off the rounded
		   corner in the pen; without it the corner clip would cut the excerpt's last line. */
		overflow: visible;
	}

	.team-member__photo-wrap {
		width: 100%;
		height: 238px;
	}

	.team-member__content {
		width: auto;
		padding: 0;
	}

	.team-member__title,
	.team-member__excerpt {
		width: auto;
	}

	.contact-form__row {
		flex-direction: column;
	}

	/*
	 * ---------- waiting for design ----------
	 * The Xchange episode list and hosts, worksheets, page.php and index have no phone frame yet.
	 * They get the shared pieces above; these rules only keep them from overflowing (carried over
	 * from the old narrow-screen stopgap).
	 */

	/*
	 * post-show--the-human-story@phone / post-show--xchange@phone: the show logo on top, the wide
	 * side images become one 20% wash over the whole box.
	 */
	.post-show {
		height: auto;
	}

	.post-show::before {
		content: '';
		position: absolute;
		inset: 0;
		opacity: 0.2;
		pointer-events: none;
	}

	.post-show--the-human-story::before {
		background: url('images/team-and-hosts/yoked-media-hosts-lincoln-shaamiela.webp') center / cover;
	}

	.post-show--xchange::before {
		background: url('images/shows/hero-xchange.webp') center / cover;
	}

	.post-show__inner {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 10px;
		width: 100%;
		height: fit-content;
	}

	.post-show__logo {
		width: 132px;
		height: 127px;
	}

	.post-show__body {
		width: 100%;
		max-width: 100%;
		height: fit-content;
		align-items: center;
		justify-content: flex-start;
		gap: 10px;
	}

	.post-show__heading {
		align-items: center;
		width: 100%;
	}

	.post-show__kicker {
		text-align: center;
	}

	.post-show__title {
		width: 100%;
		height: auto;
		text-align: center;
		font-size: var(--step-lg);
	}

	.post-show__actions {
		flex-direction: column;
		align-items: center;
		gap: 10px;
		width: 100%;
	}

	.post-show .btn-cta {
		font-size: var(--step-lg);
	}

	.post-show__listen {
		flex-direction: column;
		gap: 0;
	}

	.post-show__also {
		font-size: var(--step-base);
	}

	.post-show--xchange .post-show__kicker,
	.post-show--xchange .post-show__title,
	.post-show--xchange .post-show__also {
		color: var(--bg-offwhite); /* the phone frame uses #ede6da, the desktop one cream */
	}

	.post-show__wrap {
		position: relative;
		min-width: 0; /* new: without it the player's one-line title pushed the box wider than the screen (it was cut off) */
	}

	.post-show__bg-l,
	.post-show__bg-r,
	.post-show__bg-overlay {
		display: none;
	}

	.post-single__media {
		height: 250px;
		margin-top: 20px;
	}

	/* card-worksheet (s4oHcb) takes over from the sticky post-worksheet promo on phone. */
	.post-worksheet {
		display: none;
	}

	.post-worksheet-card {
		display: block;
	}

	.card-worksheet {
		width: 100%;
		height: auto;
	}

	/* HPv0J: the promo body (the worksheet tied to a blog post): heart title, no date, meta left and Download right. */
	.card-worksheet--promo .card-worksheet__title {
		color: var(--teal-deep);
		font-family: var(--font-ui);
		font-size: var(--step-lg);
		line-height: 1.27;
	}

	.card-worksheet--promo .card-worksheet__footer {
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.page-hero + .wrap.legal {
		padding: 40px 20px;
	}

	.legal {
		gap: 36px;
	}

	/*
	 * legal__table@phone (AN9kw): the table becomes a stack of cards, one per row, each
	 * row's cells turned into label/value fields. thead is dropped; each td's data-label
	 * attribute (added in the PHP) supplies the field label via ::before.
	 */
	.legal__table {
		display: flex;
		flex-direction: column;
		gap: 14px;
		width: 100%;
	}

	.legal__table thead {
		display: none;
	}

	.legal__table tbody {
		display: contents;
	}

	.legal__table tr {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 16px;
		border: 1px solid #80808080;
		border-radius: 8px;
	}

	.legal__table tbody tr:first-child {
		background: #80808012;
	}

	.legal__table tbody tr:first-child td {
		background: none;
	}

	.legal__table td {
		height: auto;
		padding: 0;
		border: 0;
	}

	.legal__table td::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 3px;
		color: var(--ink);
		font-size: 11.5px;
		font-weight: 700;
		letter-spacing: 0.3px;
	}

	.legal__heading {
		min-width: 0; /* long heading ("Who we share it with...") was pushing .legal__section wider than the screen */
	}
}

/*
 * player-dock on phone: Buzz Player stacks its dock into two rows at 600px and under,
 * which makes the dock 162px tall instead of 124px (the plugin decides this, not the theme).
 */
@media (max-width: 600px) {
	.player-dock {
		--dock-h: 162px;
	}

	.show-hosts {
		padding-bottom: calc(48px + 162px);
	}
}

@media (max-width: 999.98px) and (prefers-reduced-motion: no-preference) {
	.site-header {
		transition: padding-bottom 0.25s ease;
	}

	.site-header__logo {
		transition: margin-top 0.25s ease, opacity 0.25s ease, visibility 0.25s;
	}
}