/* ==========================================================================
   Jam Pod — Base styles
   Design tokens live in theme.json → exposed as --wp--preset--* variables.
   Figma source of truth: frame 7:277 (Home, 1440w)
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	/* Panel backgrounds are chosen per podcast in ACF and written as an inline
	   style. This is only what a panel falls back to when no colour has been
	   picked yet — without it, cream-on-cream text would be unreadable. */
	--jp-panel-fallback: #003300;

	/* Type scale from the Figma variables (JAM pod, FrOeEyGIDm4pHGrfbEKfJm).
	   Merriweather throughout; weights Light 300 / Regular 400 / SemiBold 600 /
	   Bold 700. */
	--jp-h1: 32px;        --jp-h1-lh: 36px;
	--jp-h2: 24px;        --jp-h2-lh: 28px;
	--jp-h3: 20px;        --jp-h3-lh: 24px;
	--jp-body-lg: 18px;   --jp-body-lg-lh: 24px;
	--jp-body-md: 16px;   --jp-body-md-lh: 24px;
	--jp-body-sm: 14px;   --jp-body-sm-lh: 18px;
	--jp-body-xsm: 12px;  --jp-body-xsm-lh: 16px;

	/* Spacing scale */
	--jp-s100: 4px;   --jp-s150: 6px;   --jp-s200: 8px;   --jp-s300: 12px;
	--jp-s400: 16px;  --jp-s500: 20px;  --jp-s600: 24px;  --jp-s800: 32px;
	--jp-s1000: 40px; --jp-s1100: 44px; --jp-s1500: 60px; --jp-s2500: 100px;
	--jp-s3000: 120px;
}

body {
	margin: 0;
	background-color: var(--wp--preset--color--cream, #f8f1e7);
	color: var(--wp--preset--color--ink, #1f1f1f);
	font-family: var(--wp--preset--font-family--merriweather, "Merriweather", Georgia, serif);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease, opacity 0.2s ease;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: inherit;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--paper, #fffefa);
	clip-path: none;
	color: var(--wp--preset--color--ink, #1f1f1f);
	display: block;
	font-size: 14px;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Layout container matching Figma content width (1200px + gutters) */
.jp-container {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 20px;
}

/* ==========================================================================
   Jam Pod — Footer
   Figma: node 7:604 (Footer - content)
   bg #E4E1D3 · zone1: border-top 6px #2B4D00, pad 66/120/20
   zone2: border-top 1px #6D6D6D, pad 51/120/50 · zone3: pad 25.4/120, centered
   ========================================================================== */

.site-footer {
	background-color: var(--wp--preset--color--sand, #e4e1d3);
	color: var(--wp--preset--color--ink-soft, #333333);
}

.site-footer__inner {
	max-width: 1200px;
	margin-inline: auto;
	width: 100%;
}

/* Zone 1 — brand bar (Figma 11:429)
   8px #2B4D00 top border, then a 143px body: 51 top, the 72px logo, 20 bottom. */
.site-footer__brand-bar {
	border-top: 8px solid var(--wp--preset--color--green-dark, #2b4d00);
	border-bottom: 1px solid var(--wp--preset--color--green-dark, #2b4d00);
	padding: 51px 120px 20px;
}

.site-footer__brand-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

/* The footer now carries the same logo lockup as the header (Figma 4:496). */
.site-branding--footer {
	align-items: flex-start;
	text-align: left;
}

.footer-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px; /* Figma 11:428 */
}

.footer-nav a {
	display: inline-block;
	font-size: 16px;      /* Figma I11:422;11:412 */
	line-height: 24px;
	font-weight: 400;
	color: var(--wp--preset--color--ink, #1f1f1f);
}

.footer-nav a:hover {
	color: var(--wp--preset--color--green-dark, #2b4d00);
}

/* Zone 2 — social media (Figma 11:485): 249px body, py-44. */
.site-footer__social-bar {
	border-bottom: 1px solid var(--wp--preset--color--green-dark, #2b4d00);
	padding: 44px 120px;
}

.site-footer__social-inner {
	max-width: 1132px;   /* Figma 11:484 */
	margin-inline: auto;
	display: flex;
	justify-content: flex-end; /* Figma: items-end */
}

.site-footer__social-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 44px;           /* Figma 11:487 */
}

.site-footer__heading {
	margin: 0;
	font-size: 18px;     /* Figma 11:432 */
	line-height: 24px;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink, #1f1f1f);
}

.footer-social {
	display: flex;
	flex-direction: column;
	gap: 8px;            /* Figma 11:477 */
	padding: 0;
}

/* flex, not the default list-item — the body line-height would otherwise wrap
   each 25.6px row in a 26.4px line box and add ~4px per row. */
.footer-social li {
	display: flex;
}

.footer-social a {
	display: inline-flex;
	align-items: center;
	gap: 12px;           /* Figma 11:455 */
	font-size: 16px;     /* Figma 11:453 */
	line-height: 25.6px;
	color: var(--wp--preset--color--ink, #1f1f1f);
}

.footer-social a:hover {
	color: var(--wp--preset--color--green-dark, #2b4d00);
}

.footer-social svg {
	width: 18px;         /* Figma 4:547 */
	height: 18px;
	flex-shrink: 0;
}

/* Zone 3 — copyright (Figma 11:493): 72px, Merriweather Light. */
.site-footer__copyright {
	padding: 24px 10px;
	text-align: center;
}

.site-footer__copyright p {
	margin: 0;
	font-size: 16px;     /* Figma 11:492 */
	line-height: 24px;
	font-weight: 300;    /* Merriweather Light */
	color: var(--wp--preset--color--ink, #1f1f1f);
}

/* Footer responsive */
@media (max-width: 1280px) {
	.site-footer__brand-bar,
	.site-footer__social-bar {
		padding-inline: 40px;
	}
}

/* Mobile footer — Figma 15:1182 (390w, 448 tall). The gutters drop to 16px,
   the social block goes full width and left-aligned instead of being pinned
   right inside a 1132px box, and the copyright drops to 12/16. */
@media (max-width: 921px) {
	.site-footer__brand-bar,
	.site-footer__social-bar {
		padding-inline: var(--jp-s400);   /* Figma: px-16 */
	}

	/* padding-top stays at the desktop 51px: Figma's pt-60 is measured from
	   outside the 8px border, which it draws inside the box. */

	.site-footer__brand-row {
		align-items: flex-start;
	}

	.site-branding--footer .site-branding__logo {
		font-size: 24px;                  /* Figma 15:522 */
		line-height: 28px;
		margin-bottom: -2px;
	}

	.site-branding--footer .site-branding__tagline {
		font-size: 10px;                  /* Figma 15:524 */
		line-height: 28px;
	}

	.site-footer__social-inner {
		max-width: none;
		justify-content: flex-start;      /* Figma 15:1190: items-start */
	}

	.site-footer__copyright p {
		font-size: var(--jp-body-xsm);    /* Figma 15:1198: 12/16 Light */
		line-height: var(--jp-body-xsm-lh);
	}
}

/* ==========================================================================
   Jam Pod — Homepage blocks
   Figma: 7:347 (cards), 7:416 (top stories), 7:457/7:530 (posts rows)
   ========================================================================== */

/* Category cards — Figma 7:347.
   The section starts at y=221 under a 198px header, so the first card image
   lands on y=321 (123px below the header) and the section closes on y=911,
   where the "Top Stories" heading begins. Content is 485px (285 image + 200
   panel), hence 123 top / 105 bottom rather than a symmetric 100. */
/* Figma 9:199 — the opening row carries no Divider: 100px of padding above and
   below the 458px card row (192 -> 292 -> 750 -> 850). */
.jp-cards,
.jp-section.jp-posts-row--bare {
	padding: var(--jp-s2500) var(--jp-s3000);
}

/* Every page frame leaves its own gap between the last block and the footer,
   so the block that ends the page carries it.
   Home 7:277: masthead ends y=2904, footer starts y=2968 → 60 + 64. */
.site-main > .jp-posts-row:last-child {
	padding-bottom: 136px; /* 60 section + 76 to the footer (Figma 2849 -> 2925) */
}

.jp-cards__grid {
	max-width: 1200px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.jp-card__media {
	display: block;
}

.jp-card__img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.jp-card__panel {
	height: 200px;
	background-color: var(--jp-panel-fallback);
	padding: 44px 16px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}

.jp-card__title {
	margin: 0;
	font-size: 16px;
	line-height: 17.6px;
	font-weight: 600;
}

.jp-card__title a,
.jp-card__more {
	color: var(--wp--preset--color--cream, #f8f1e7);
}

.jp-card__more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	line-height: 15.4px;
	font-weight: 500;
}

.jp-card__more:hover,
.jp-card__title a:hover {
	color: var(--wp--preset--color--paper, #fffefa);
	opacity: 0.85;
}

/* Figma 7:416 / 7:457 / 7:530 — section pad 50/120, plus the 10px bottom
   slack the inner container carries (pb-[10px] on 7:417). */
/* Figma 9:374 / 11:202 / 11:289 — 60px padding, the 35px Divider, a 40px gap,
   then the content. Frame 57: 1543 +60 -> divider 1603, +35+40 -> content
   1678, +458 -> 2136, +60 -> 2196. */
.jp-section {
	padding: var(--jp-s1500) var(--jp-s3000);
}

.jp-section__header,
.jp-top-stories__row,
.jp-posts-row__grid {
	max-width: 1200px;
	margin-inline: auto;
}

/* The card rows are the one part of the home grid that is not 1200 wide:
   Figma 9:198 / 11:235 / 11:291 put four 284px cards with 20px gaps between
   them, which is 1196, centred at x=122. The divider above and the Top Stories
   row keep the full 1200 (9:472). */
.jp-posts-row__grid,
.jp-cards__grid {
	max-width: 1196px;
}

/* Divider component (Figma 9:256) — the section header is now a 35px row:
   a 4px left rule, the label in a px-12/py-4 box, a hairline, and an optional
   "View All" link. Replaces the old 3px/17.6px treatment. */
.jp-section__header {
	display: flex;
	align-items: center;
	gap: var(--jp-s400); /* Figma: gap 16 */
	height: 35px;
	margin-bottom: 40px;
}

.jp-section__label {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	border-left: 4px solid var(--wp--preset--color--green-dark, #2b4d00); /* Figma: border-width/md */
	padding: var(--jp-s100) var(--jp-s300); /* Figma: py-4 px-12 */
}

.jp-section__title {
	margin: 0;
	font-size: var(--jp-body-md);       /* Figma 9:306: 16/24 Bold */
	line-height: var(--jp-body-md-lh);
	font-weight: 700;
	color: var(--wp--preset--color--ink, #1f1f1f);
	white-space: nowrap;
}


.jp-section__rule {
	flex: 1 1 auto;
	height: 1px;
	background-color: #003300; /* Figma 7:425 — border-t #003300 */
}

/* Figma 7:459 spaces the rule unevenly on the rows that carry a View All link:
   it runs 242→1216 rather than the symmetric 16px the Top Stories header uses
   (238→1320). Reproduced with margins so the flexible rule keeps working. */
.jp-posts-row .jp-section__rule {
	margin-left: 5px;
	margin-right: 9px;
}

/* Figma 9:262/9:238 — "View All" sits in a 10px box, SemiBold 14/18 in the
   action green, 12px from its 14px arrow. */
.jp-section__more {
	display: inline-flex;
	align-items: center;
	gap: var(--jp-s300);
	padding: 10px;
	font-size: var(--jp-body-sm);
	line-height: var(--jp-body-sm-lh);
	font-weight: 600;
	color: #003300;
	white-space: nowrap;
}

.jp-section__more svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.jp-section__more:hover {
	color: var(--wp--preset--color--green-dark, #2b4d00);
}

.jp-top-stories__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 414px;
	gap: 20px;
}

.jp-featured {
	position: relative;
}

/* Top storie component (Figma 9:430) — 766x498, flat black overlay at 50%,
   caption pinned 28px in and 354px down. No date row any more. */
.jp-featured__link {
	position: relative;
	display: block;
	height: 498px;
	overflow: hidden;
}

.jp-featured__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jp-featured__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--ink, #1f1f1f);
	opacity: 0.5;
}

.jp-featured__content {
	position: absolute;
	left: 28px;
	top: 354px;
	right: 28px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--jp-s300);                /* Figma 9:426 */
	color: var(--wp--preset--color--paper, #fffefa);
}

.jp-featured__label {
	font-size: var(--jp-body-xsm);      /* Figma 9:427: 12/16 Bold */
	line-height: var(--jp-body-xsm-lh);
	font-weight: 700;
	text-transform: uppercase;
}

/* A heading tag now, so it needs the margin reset and — per theme.json's
   elements.heading, which colours h1–h6 directly — an explicit inherit to stay
   white on the image. Size and weight are unchanged. */
.jp-featured__title {
	margin: 0;
	font-size: var(--jp-h2);            /* Figma 9:429: 24/28 SemiBold */
	line-height: var(--jp-h2-lh);
	font-weight: 600;
	color: inherit;
}

/* CTA component (Figma 9:461) — replaces the newsletter box. 414x498 on the
   accent red, kicker and heading at the top, "View Site" pinned to the base. */
.jp-news {
	height: 498px;
	background-color: var(--wp--preset--color--accent-red, #b93a00);
	padding: var(--jp-s800);            /* 32 */
	color: var(--wp--preset--color--paper, #fffefa);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
}

.jp-news__head {
	display: flex;
	flex-direction: column;
	gap: var(--jp-s1500);               /* Figma 9:460: gap 60 */
}

.jp-news__kicker {
	margin: 0;
	font-size: var(--jp-body-sm);       /* Figma 9:452: 14/18 Regular */
	line-height: var(--jp-body-sm-lh);
	font-weight: 400;
}

.jp-news__title {
	margin: 0;
	font-size: var(--jp-h1);            /* Figma 9:451: 32/36 SemiBold */
	line-height: var(--jp-h1-lh);
	font-weight: 600;
	color: inherit;
}

.jp-news__link {
	display: inline-flex;
	align-items: center;
	gap: var(--jp-s300);                /* Figma 9:454: gap 12 */
	font-size: var(--jp-body-sm);       /* 14/18 SemiBold */
	line-height: var(--jp-body-sm-lh);
	font-weight: 600;
	color: var(--wp--preset--color--cream, #f8f1e7);
}

.jp-news__link svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}
/* Figma 7:457 — the card is 462px tall (202 image + 260 panel) and the grid
   wrapper adds ~24px below it to reach the 486px content box. Sizing the card
   at 486 instead made every card 24px too tall while the section still
   measured correctly. */
.jp-posts-row__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--jp-s500);
}

.jp-post-card__media {
	display: block;
}

/* Podcast card component (Figma 9:145) — 284x458: a 200px image over a 258px
   panel. The redesign drops the date row and tightens the type. */
.jp-post-card__img {
	width: 100%;
	height: 200px; /* Figma 9:131 */
	object-fit: cover;
	display: block;
}

/* Figma 9:132 — 258px panel, px-16 py-44, contents pushed apart so the
   "Listen podcast" link sits on the baseline of the card. */
.jp-post-card__panel {
	min-height: 258px;
	background-color: var(--jp-panel-fallback);
	padding: var(--jp-s1100) var(--jp-s400); /* 44 / 16 */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: var(--wp--preset--color--cream, #f8f1e7);
}

.jp-post-card__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--jp-s400); /* Figma 9:141: gap 16 */
}

.jp-post-card__label {
	font-size: var(--jp-body-xsm);      /* Figma 9:133: 12/16 Bold, no tracking */
	line-height: var(--jp-body-xsm-lh);
	font-weight: 700;
	text-transform: uppercase;
}

.jp-post-card__label a,
.jp-post-card__title a,
.jp-post-card__listen {
	color: inherit;
}

.jp-post-card__title {
	margin: 0;
	font-size: var(--jp-h3);            /* Figma 9:134: 20/24 Regular */
	line-height: var(--jp-h3-lh);
	font-weight: 400;
}

.jp-post-card__listen {
	display: inline-flex;
	align-items: center;
	gap: var(--jp-s150);                /* Figma 9:125: gap 6 */
	font-size: var(--jp-body-xsm);      /* Figma 9:122: 12/16 Bold */
	line-height: var(--jp-body-xsm-lh);
	font-weight: 700;
	white-space: nowrap;
}

.jp-post-card__listen svg {
	width: 17px;                        /* Figma 9:119 */
	height: 17px;
	flex-shrink: 0;
}

.jp-post-card__listen:hover,
.jp-post-card__title a:hover,
.jp-post-card__label a:hover {
	opacity: 0.85;
	color: inherit;
}
/* ==========================================================================
   Playlist archive — a country term listing its playlists
   Figma: 18:1091 (page), 18:1230 (Playlist item, desktop)
   Column 800px at x=320. Heading 312 (h36), list 388, rows 138 each,
   pagination 1690, footer 1938.
   ========================================================================== */

.jp-plist {
	max-width: 840px;      /* 800 column + 2x20 gutter */
	margin-inline: auto;
	padding: 120px 20px 200px; /* header ends 192 -> heading 312 */
}

.jp-plist__head {
	margin-bottom: var(--jp-s1000); /* Figma: 348 -> 388 */
}

.jp-plist__heading {
	margin: 0;
	font-size: var(--jp-h1);        /* Figma: 32/36 */
	line-height: var(--jp-h1-lh);
	font-weight: 600;
	color: var(--wp--preset--color--ink, #1f1f1f);
}

.jp-plist__row {
	display: flex;
	align-items: flex-start;
	gap: var(--jp-s600);            /* Figma 18:1230: gap 24 */
	padding: var(--jp-s1000) 0;     /* py-40 -> 138px row */
	border-bottom: 1px solid var(--wp--preset--color--green-dark, #2b4d00);
}

.jp-plist__kicker {
	width: 130px;                   /* Figma 18:1226 */
	flex-shrink: 0;
	font-size: var(--jp-body-xsm);  /* Figma 18:1227: 12/16 Light */
	line-height: var(--jp-body-xsm-lh);
	font-weight: 300;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-red, #b93a00);
}

.jp-plist__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--jp-s300);            /* Figma 18:1214: gap 12 */
}

.jp-plist__title {
	margin: 0;
	font-size: var(--jp-h3);        /* Figma 18:1207: 20/24 Medium */
	line-height: var(--jp-h3-lh);
	font-weight: 500;
	color: var(--wp--preset--color--ink, #1f1f1f);
}

.jp-plist__title a {
	color: inherit;
}

.jp-plist__title a:hover {
	color: var(--wp--preset--color--green-dark, #2b4d00);
}

.jp-plist__count {
	display: flex;
	align-items: center;
	gap: var(--jp-s150);            /* Figma 18:1209: gap 6 */
	height: 22px;
	margin: 0;
	padding-bottom: 1px;
	font-size: 14px;                /* Figma 18:1212: 14/21 */
	line-height: 21px;
	font-weight: 400;
	color: #003300;
}

.jp-plist__count svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.jp-plist__more {
	flex-shrink: 0;
	padding: 0;                     /* Figma 9:238 has no padding here */
}

.jp-plist .jp-pagination {
	margin-top: var(--jp-s1500);    /* Figma: list 1630 -> pagination 1690 */
}

.jp-block-placeholder {
	padding: 24px;
	border: 1px dashed var(--wp--preset--color--border-gray, #6d6d6d);
	text-align: center;
}

@media (max-width: 1280px) {
	.jp-cards,
	.jp-section,
	.jp-section.jp-posts-row--bare {   /* the bare row's own rule outranks .jp-section */
		padding-inline: 40px;
	}
}

@media (max-width: 1024px) {
	.jp-cards__grid,
	.jp-posts-row__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jp-top-stories__row {
		grid-template-columns: 1fr;
	}

	.jp-news {
		height: auto;
	}
}

/* Padding, grid columns and the top-story height for this range are set in the
   mobile blocks at the end of the file — this one only carries the CTA type. */
@media (max-width: 600px) {
	.jp-news__title {
		font-size: 26px;
		line-height: 1.15;
	}
}

/* ==========================================================================
   Jam Pod — Typography (Style guide: 12:515–12:524)
   H1–H6: Merriweather Bold, lh 110% · P: 24/18/16 (140%) · Small: Inter 14
   ========================================================================== */

/* Figma variables: H1 32/36 SemiBold, H2 24/28 SemiBold, H3 20/24 Regular.
   The old scale (28px H2, 1.1 line-heights) came from the superseded file. */
.site-main h1, .jp-h1 { font-size: var(--jp-h1); line-height: var(--jp-h1-lh); font-weight: 600; }
.site-main h2, .jp-h2 { font-size: var(--jp-h2); line-height: var(--jp-h2-lh); font-weight: 600; }
.site-main h3, .jp-h3 { font-size: var(--jp-h3); line-height: var(--jp-h3-lh); font-weight: 400; }
.site-main h4, .jp-h4 { font-size: var(--jp-body-lg); line-height: var(--jp-body-lg-lh); font-weight: 600; }
.site-main h5, .jp-h5 { font-size: var(--jp-body-md); line-height: var(--jp-body-md-lh); font-weight: 600; }
.site-main h6, .jp-h6 { font-size: var(--jp-body-sm); line-height: var(--jp-body-sm-lh); font-weight: 700; }

.jp-text-xl { font-size: var(--jp-h2); line-height: var(--jp-h2-lh); }
.jp-text-lg { font-size: var(--jp-body-lg); line-height: var(--jp-body-lg-lh); }
.site-main p, .jp-text-md { font-size: var(--jp-body-md); line-height: var(--jp-body-md-lh); }
.jp-text-sm { font-size: var(--jp-body-sm); line-height: var(--jp-body-sm-lh); }
.jp-text-xsm { font-size: var(--jp-body-xsm); line-height: var(--jp-body-xsm-lh); }

/* ==========================================================================
   Jam Pod — Episode player (reference: 15:1578)
   bg per-episode · pad 40/16/24 · column 600px centered · cover 180
   ========================================================================== */

.jp-player {
	padding: 40px 16px 24px; /* Figma: 40/16/24 */
	background-color: var(--jp-panel-fallback);
	color: #fff;
}

.jp-player__inner {
	max-width: 600px; /* Figma: 600px */
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.jp-player__cover {
	width: 180px;   /* Figma: 180x180 */
	height: 180px;
	object-fit: cover;
	margin-bottom: 24px; /* Figma: mb 24 */
	box-shadow: 0 11px 18px 1px rgba(33, 22, 6, 0.3); /* Figma 17:589 */
}

.jp-player__date {
	font-size: 16px;    /* Figma: 16/22 */
	line-height: 22px;
	margin: 0;
	opacity: 0.6;       /* Figma 17:592 */
}

.jp-player__title {
	font-size: 18px;    /* Figma: 18/24 */
	line-height: 24px;
	font-weight: 400;
	margin: 0;
	color: inherit;
}

.jp-player__meta {
	font-size: 15.5px;  /* Figma: 15.5/22 */
	line-height: 22px;
	margin: 8px 0 0;    /* Figma: gap 8 */
	/* Figma 17:597 carries no opacity — only the date above it is dimmed. */
}

.jp-player__deck {
	width: 100%;
	margin-top: 20px; /* Figma 17:598: 8px container gap + 12px pt */
	display: flex;
	flex-direction: column;
	gap: 16px;        /* Figma: gap 16 */
}

.jp-player__bar-wrap {
	display: flex;
	flex-direction: column;
	gap: 8px; /* Figma: gap 8 */
}

.jp-player__bar {
	position: relative;
	width: 100%;
	height: 2px;                       /* Figma: 2px */
	background: rgba(255,255,255,0.6); /* Figma: white @0.6 */
	border-radius: 9999px;
	cursor: pointer;
}

.jp-player__bar-fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0%;
	background: #fff;
	border-radius: 9999px;
}

.jp-player__knob {
	position: absolute;
	top: 50%;
	left: 0%;
	width: 20px;   /* Figma: 20x20 */
	height: 20px;
	background: #fff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.jp-player__times {
	display: flex;
	justify-content: space-between;
	font-size: 18px;    /* Figma 17:605/17:607 */
	line-height: 24px;
}

/* Figma 33:2016 / 33:2584 — the five button footprints touch: 50+56+84+56+48
   = 294, centred in the column. The padding is inside each footprint, so any
   flex gap pushes the row wider than the design. */
.jp-player__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
}

.jp-player__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
	flex-shrink: 0;
}

.jp-player__btn svg { display: block; }

/* Figma 17:608 — each button is an 8px pad around its glyph, so the visible
   circle is the glyph size, not the button footprint. */
.jp-player__btn--speed  { width: 50px; height: 50px; background: rgba(255,255,255,0.1); font-size: 18px; line-height: 27px; } /* Figma 17:609/17:611 */
.jp-player__btn--skip   { width: 56px; height: 56px; }                       /* Figma 17:612: p-8 + 40 glyph */
.jp-player__btn--skip svg { width: 40px; height: 40px; }                     /* Figma 17:613 */
.jp-player__btn--play   { width: 68px; height: 68px; margin: 8px; background: #fff; color: #1f1f1f; } /* Figma 17:617: 68 glyph, 84 footprint — the 8px pad also sets the row height */
.jp-player__btn--play svg { width: 34px; height: 34px; }
.jp-player__btn--volume { width: 48px; height: 48px; background: rgba(255,255,255,0.1); } /* Figma 17:627: 48, @0.1 */
.jp-player__btn--volume svg { width: 16px; height: 16px; }                   /* Figma 17:628 */

.jp-player__sc-frame { position: absolute; width: 1px; height: 1px; opacity: 0.01; pointer-events: none; left: -9999px; }

/* ==========================================================================
   Jam Pod — Episode content layout (reference: 15:1622)
   ========================================================================== */

.jp-episode {
	padding: 50px 120px;
}

.jp-episode__grid {
	max-width: 1200px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 60px;
}

.jp-episode__title {
	margin: 0 0 20px;
}

.jp-episode__content p {
	margin: 0 0 16px;
}

.jp-episode__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--wp--preset--color--border-gray, #6d6d6d);
}

.jp-episode__tag {
	display: inline-flex;
	padding: 6px 14px;
	border: 1px solid var(--wp--preset--color--ink, #1f1f1f);
	border-radius: 9999px;
	font-size: 13px;
}

.jp-episode__share {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 0 24px;
	border-bottom: 1px solid var(--wp--preset--color--border-gray, #6d6d6d);
}

.jp-episode__share-label {
	font-size: 16px;
	font-weight: 700;
	margin: 0;
}

.jp-episode__share a { display: flex; color: var(--wp--preset--color--ink, #1f1f1f); }
.jp-episode__share a:hover { color: var(--wp--preset--color--green-dark, #2b4d00); }
.jp-episode__share svg { width: 16px; height: 16px; }

/* More episodes list */
.jp-more {
	margin-top: 32px;
}

.jp-more__title {
	margin: 0 0 20px;
}

.jp-more__list {
	display: flex;
	flex-direction: column;
}

.jp-more__item {
	display: grid;
	grid-template-columns: 100px minmax(0, 1fr);
	gap: 20px;
	padding: 20px 0;
	border-bottom: 1px solid var(--wp--preset--color--border-gray, #6d6d6d);
}

.jp-more__thumb {
	width: 100px;
	height: 100px;
	object-fit: cover;
}

.jp-more__meta {
	font-size: 12px;
	line-height: 1.4;
	opacity: 0.75;
	margin: 0 0 6px;
}

.jp-more__item-title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
}

.jp-more__item-title a:hover { color: var(--wp--preset--color--green-dark, #2b4d00); }

.jp-more__excerpt {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	opacity: 0.85;
}

/* Episode responsive */
@media (max-width: 1280px) {
	.jp-episode { padding-inline: 40px; }
}

@media (max-width: 921px) {
	.jp-episode__grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 600px) {
	.jp-episode { padding-inline: 20px; }
	/* The old file shrank the skip buttons here; 33:2584 keeps them at 56 and
	   the 294px row still fits the 320px mobile column. */
}

/* ==========================================================================
   Jam Pod — Episode layout refinements (exact match to reference 15:1622)
   cols 288+600 gap 24 · pad 40/120/104 · hosts gap 24/12 · thumbs 140
   ========================================================================== */

.jp-episode {
	padding: 40px 120px 104px; /* Ref: pt 40, pb 104 */
}

.jp-episode__grid {
	grid-template-columns: 288px minmax(0, 600px); /* Ref: 288 + 600 */
	gap: 24px;                                      /* Ref: 24 */
}

.jp-episode__title {
	font-size: 28px;     /* Jam Pod H2 scale (ref uses its own 36.7) */
	line-height: 1.15;
	margin: 0 0 24px;    /* Ref: gap 24 */
}

.jp-episode__content p {
	font-size: 18px;     /* Jam Pod P Large (ref: enlarged lead text) */
	line-height: 1.5;
	margin: 0 0 18px;
}

.jp-episode__tags {
	margin-top: 24px;
	padding-bottom: 0;
	border-bottom: none;
}

.jp-episode__tag {
	padding: 8px 16px;   /* Ref: 8/16 */
	font-size: 14px;
}

.jp-episode__share {
	flex-wrap: wrap;
	gap: 8px 14px;                 /* Ref: icons gap 8 */
	margin-top: 40px;              /* Ref: section gap 40 */
	padding: 24px 0 0;
	border-top: 1px solid var(--wp--preset--color--border-gray, #6d6d6d); /* Ref: separator above */
	border-bottom: none;
}

.jp-episode__share-label {
	width: 100%;
	font-size: 18px;               /* Jam Pod H5 */
	margin-bottom: 8px;
}

.jp-episode__share svg { width: 20px; height: 20px; }

.jp-more {
	margin-top: 40px; /* Ref: gap 40 */
}

.jp-more__title {
	margin: 0 0 24px; /* Ref: gap 24 */
}

.jp-more__list {
	gap: 24px; /* Ref: items gap 24, no borders */
}

.jp-more__item {
	grid-template-columns: 140px minmax(0, 1fr); /* Ref: thumb 140 */
	gap: 20px;
	padding: 0;
	border-bottom: none;
}

.jp-more__thumb {
	width: 140px;   /* Ref: 140 */
	height: 140px;
}

@media (max-width: 921px) {
	.jp-episode__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Jam Pod — Block typography guards
   (.site-main h1–h6 globals must NOT override block components)
   ========================================================================== */

.site-main .jp-card__title {
	font-size: 16px;      /* Figma: 16 SemiBold */
	line-height: 17.6px;
	font-weight: 600;
}

.site-main .jp-card__title a {
	color: var(--wp--preset--color--cream, #f8f1e7);
}

/* Divider label (Figma 9:306) — one weight for every section now; the old
   file's Regular-vs-Bold split between Top Stories and the post rows is gone. */
.site-main .jp-section__title {
	font-size: var(--jp-body-md);
	line-height: var(--jp-body-md-lh);
	font-weight: 700;
}

/* CTA (Figma 9:451/9:452) — the heading is an h2 so it must outrank
   .site-main h2, and the kicker must outrank .site-main p. */
.site-main .jp-news__title {
	font-size: var(--jp-h1);
	line-height: var(--jp-h1-lh);
	font-weight: 600;
}

.site-main .jp-news__kicker {
	font-size: var(--jp-body-sm);
	line-height: var(--jp-body-sm-lh);
	font-weight: 400;
}

/* theme.json's elements.heading paints every h1-h6 with the ink colour, and it
   targets the element directly, so inheriting cream from the panel is not
   enough - headings inside coloured panels have to say so themselves. */
.site-main .jp-post-card__title,
.site-main .jp-post-card__title a,
.site-main .jp-post-card__label a,
.site-main .jp-news__title,
.site-main .jp-featured__title {
	color: inherit;
}

/* Heading level follows the document outline, size follows Figma. Because the
   `.site-main h2` / `.site-main h3` globals above outrank a bare class, every
   heading whose tag depends on where it sits needs its size pinned here — a
   card title is 20/24 whether it renders as h2 in a bare row or h3 under a
   section heading. */
.site-main .jp-post-card__title {
	font-size: var(--jp-h3);            /* Figma 9:134: 20/24 Regular */
	line-height: var(--jp-h3-lh);
	font-weight: 400;
}

.site-main .jp-featured__title {
	font-size: var(--jp-h2);            /* Figma 9:429: 24/28 SemiBold */
	line-height: var(--jp-h2-lh);
	font-weight: 600;
}

.site-main .jp-more__item-title {
	font-size: 16px;      /* Ref: H6 scale */
	line-height: 1.25;
	font-weight: 700;
}

.site-main .jp-more__item-title a {
	color: inherit;
}

.site-main .jp-episode__title {
	font-size: 28px;      /* Jam Pod H2 */
	line-height: 1.15;
	font-weight: 700;
}

/* Playlist rows — the `.site-main h2` / `.site-main p` globals above would
   otherwise win on specificity (Figma 15:246 and 17:438). */
.site-main .jp-plist__title {
	font-size: var(--jp-h3);
	line-height: var(--jp-h3-lh);
	font-weight: 500;
}

.site-main .jp-plist__count {
	font-size: 14px;
	line-height: 21px;
}

.site-main .jp-plist__heading {
	font-size: var(--jp-h1);   /* Figma 18:1091 heading: 32/36 SemiBold */
	line-height: var(--jp-h1-lh);
	font-weight: 600;
}

/* Player title guard (ref 15:1578: 18/24 Regular) */
.site-main .jp-player__title {
	font-size: 18px;
	line-height: 24px;
	font-weight: 400;
}

/* ==========================================================================
   Jam Pod — Post archive (Figma 7:1941)
   column 772 centered · row: img 230x188 + content, gap 20 · rows gap 40
   ========================================================================== */

/* ==========================================================================
   Episode archive — Figma 24:1462 (page), 24:1743 (Episode card, desktop)
   Column 800px at x=320; heading 312 (h36); rows are 188px tall (the image),
   image 230, body 527, gap 20.
   ========================================================================== */

.jp-archive {
	max-width: 840px;          /* 800 column + 2x20 gutter */
	margin-inline: auto;
	padding: 120px 20px 200px;
}

.site-main .jp-archive__title {
	font-size: var(--jp-h1);   /* 32/36 SemiBold */
	line-height: var(--jp-h1-lh);
	font-weight: 600;
	color: var(--wp--preset--color--ink, #1f1f1f);
	margin: 0 0 var(--jp-s1000);
}

/* Figma 30:2438 and 33:2057 both hold the rows in a 777px frame inside the
   800px column — the 230px image, a 20px gap and a 527px text column — so the
   row stops short of the column's right edge rather than filling it. */
.jp-arch-row {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr); /* Figma 24:1721 / 24:1741 */
	gap: var(--jp-s500);                          /* 20 */
	max-width: 777px;
	margin-bottom: var(--jp-s1000);
}

.jp-arch-row__img {
	width: 230px;
	height: 188px;
	object-fit: cover;
	display: block;
}

.jp-arch-row__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--jp-s300);       /* Figma 24:1741: gap 12 */
	height: 188px;
}

.jp-arch-row__meta {
	display: flex;
	align-items: center;
	gap: var(--jp-s600);       /* Figma 24:1739: gap 24 */
}

/* Both meta items are Light 12/16; only the colour differs. */
.jp-arch-row__date,
.jp-arch-row__cat {
	font-size: var(--jp-body-xsm);
	line-height: var(--jp-body-xsm-lh);
	font-weight: 300;
}

.jp-arch-row__date {
	color: var(--wp--preset--color--ink, #1f1f1f);
}

.jp-arch-row__cat {
	color: var(--wp--preset--color--accent-red, #b93a00);
	text-transform: uppercase;
}

.jp-arch-row__cat:hover {
	color: var(--wp--preset--color--green-dark, #2b4d00);
}

.site-main .jp-arch-row__title {
	margin: 0;
	font-size: var(--jp-h3);   /* Figma 24:1724: 20/24 Medium */
	line-height: var(--jp-h3-lh);
	font-weight: 500;
	color: var(--wp--preset--color--ink, #1f1f1f);
}

.jp-arch-row__title a {
	color: inherit;
}

.jp-arch-row__title a:hover {
	color: var(--wp--preset--color--green-dark, #2b4d00);
}

.jp-arch-row__excerpt {
	margin: 0;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	font-size: var(--jp-body-md);  /* Figma 24:1725: 16/24 */
	line-height: var(--jp-body-md-lh);
	color: var(--wp--preset--color--ink, #1f1f1f);
}

.jp-arch-row__listen {
	display: inline-flex;
	align-items: center;
	gap: var(--jp-s300);           /* Figma 24:1734: gap 12 */
	font-size: var(--jp-body-sm);  /* 14/18 SemiBold */
	line-height: var(--jp-body-sm-lh);
	font-weight: 600;
	color: #003300;
	white-space: nowrap;
}

.jp-arch-row__listen svg {
	width: 17px;                   /* Figma 24:1729 */
	height: 17px;
	flex-shrink: 0;
}

.jp-arch-row__listen:hover {
	color: var(--wp--preset--color--green-dark, #2b4d00);
}

/* Pagination — Figma: numbers 32 green, gap 32, arrows 48 */
.jp-pagination {
	margin-top: 60px;
	display: flex;
	justify-content: center;
}

.jp-pagination .nav-links {
	display: flex;
	align-items: center;
	gap: 24px; /* Figma: 24 */
}

/* Figma 18:1474 — the numbers are Inter, not Merriweather. Inter is declared in
   theme.json but is not self-hosted, so this falls back to the system sans
   until a font file is added to assets/fonts. */
.jp-pagination .page-numbers {
	font-family: var(--wp--preset--font-family--inter, "Inter"), system-ui, sans-serif;
	font-size: 32px;      /* Figma: 32 */
	line-height: 1.4;
	font-weight: 400;
	color: var(--wp--preset--color--green-dark, #2b4d00);
	margin: 0 16px;       /* Figma 18:1474: gap 32 */
}

.jp-pagination .page-numbers.current {
	font-weight: 600;     /* Figma 18:1475: SemiBold */
	letter-spacing: 2px;
}

.jp-pagination .page-numbers.dots {
	font-weight: 500;     /* Figma 18:1478: Medium */
}

.jp-pagination .page-numbers.prev,
.jp-pagination .page-numbers.next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;   /* Figma: 48 */
	height: 48px;
	margin: 0;
}

.jp-pagination svg {
	width: 14px;
	height: 30px;
	stroke: var(--wp--preset--color--green-dark, #2b4d00);
	stroke-width: 3;
	fill: none;
}


/* ==========================================================================
   Jam Pod — Episode single (Figma 33:1774: 800 col at x=320)
   ========================================================================== */

/* Figma 33:1774 — the episode column is 800px at x=320 and the player starts
   50px under the 192px header. */
.jp-pod {
	max-width: 840px;
	margin-inline: auto;
	padding: 50px 20px 0;
}

/* Player card - Figma 33:1994 is 800 wide around a 600px inner column, so
   the side padding is 100 rather than the old 40. */
.jp-pod__player.jp-player {
	padding: 39px 100px 40px;
}

.jp-pod .jp-player__times {
	font-size: 18px;    /* Figma: 18/24 */
	line-height: 24px;
}

.jp-pod .jp-player__btn--speed {
	font-size: 18px;    /* Figma: 18 */
}

/* Content card */
.jp-pod__content {
	background-color: var(--wp--preset--color--paper, #fffefa); /* Figma: #FFFEFA */
	padding: 39px 40px 40px; /* Figma: 39/40/40 */
}

.jp-pod__entry {
	max-width: 720px; /* Figma 33:2xxx - inner container is 720 now */
	margin-inline: auto;
}

.site-main .jp-pod__entry p {
	font-size: 16px;      /* Figma: 16/28.8 */
	line-height: 28.8px;
	color: #3d3d3d;
	margin: 0 0 25px;     /* Figma: gap 25 */
}

.site-main .jp-pod__entry blockquote {
	margin: 25px 0;
	border-left: 5px solid var(--jp-quote-border, #000); /* Figma: 5px #000 */
	padding: 21px 20px 20px;     /* Figma: 21/20/20 */
}

.site-main .jp-pod__entry blockquote p {
	font-size: 17.5px;      /* Figma: 17.5/31.7 */
	line-height: 31.7px;
	margin: 0;
}

/* More episodes — Figma 33:1774: article ends 1854.4, heading 1955.4 (h36),
   cards 2031.4, last card 2675.4, footer 2876. No separator rule any more. */
.jp-pod__more {
	padding: 101px 0 200px;
	max-width: 800px;
	margin-inline: auto;
}
/* Figma 33:1774 - "More episodes" is now the H1 token (32/36 SemiBold) with
   a 40px gap to the first card; the old 25.4px heading and rule are gone. */
.site-main .jp-pod__more-title {
	font-size: var(--jp-h1);
	line-height: var(--jp-h1-lh);
	font-weight: 600;
	color: var(--wp--preset--color--ink, #1f1f1f);
	margin: 0 0 var(--jp-s1000);
}

.jp-pod__more .jp-arch-row:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Jam Pod — About (Figma 7:1055)
   ========================================================================== */

/* About us section — Figma 15:1945: a 1200px column holding a 1200x520 hero,
   an 80px gap, then a two-column split. Hero sits 40px under the header. */
.jp-page-hero {
	max-width: 1240px;   /* 1200 + 2x20 gutter */
	margin: 40px auto 0;
	padding-inline: 20px;
}

.jp-page-hero__img {
	width: 100%;
	height: 520px;       /* Figma 15:1685 */
	object-fit: cover;
	display: block;
}

.jp-split {
	max-width: 1240px;
	margin-inline: auto;
	padding: 80px 20px 200px;  /* Figma: gap 80 after the hero, 200 to the footer */
}

.jp-split__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--jp-s500);        /* Figma 15:1895: gap 20 */
}

.jp-split__head {
	border-left: 2px solid var(--wp--preset--color--green-dark, #2b4d00); /* Figma: border-width/sm */
	padding-left: 18px;             /* Figma 15:1892: text sits 20 from the edge, stroke draws inside */
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: var(--jp-s400);            /* Figma: gap 16 */
}

.jp-split__kicker {
	margin: 0;
	font-size: var(--jp-body-xsm);  /* Figma 15:1890: 12/16 Regular, no tracking */
	line-height: var(--jp-body-xsm-lh);
	font-weight: 400;
	text-transform: uppercase;
	color: var(--wp--preset--color--green-dark, #2b4d00);
}

.site-main .jp-split__title {
	margin: 0;
	font-size: var(--jp-h1);        /* Figma 15:1891: 32/36 Regular */
	line-height: var(--jp-h1-lh);
	font-weight: 400;
	color: var(--wp--preset--color--ink, #1f1f1f);
}

.site-main .jp-split__body p {
	font-size: var(--jp-body-md);   /* Figma 15:1893: 16/24 Light */
	line-height: var(--jp-body-md-lh);
	font-weight: 300;
	color: var(--wp--preset--color--ink, #1f1f1f);
	margin: 0 0 var(--jp-body-md-lh);
}

.site-main .jp-split__body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Jam Pod — Contact (Figma 7:1460)
   ========================================================================== */

/* Figma 7:1460 — the 1200px container starts at x=120 with no inner padding,
   so the max-width carries the 20px responsive gutter on top of it. */
/* Contact — Figma 33:2787. The block sits 168px under the header, the text
   column is 551px, and the old three icon blocks collapse to a single inline
   "Mail: address" row. */
.jp-contact {
	max-width: 1240px;
	margin-inline: auto;
	padding: 168px 20px 265px;
}

.jp-contact__col {
	max-width: 551px;    /* Figma 33:2789 */
}

.site-main .jp-contact__title {
	margin: 0 0 var(--jp-s500);   /* Figma: title 360-407, intro 427 */
	font-size: 42px;
	line-height: 47px;
	font-weight: 400;
	color: var(--wp--preset--color--ink, #1f1f1f);
}

.jp-contact__intro {
	margin: 0 0 var(--jp-s1000);  /* Figma: intro ends 499, row 539 */
	font-size: var(--jp-body-md);
	line-height: var(--jp-body-md-lh);
	color: var(--wp--preset--color--ink, #1f1f1f);
}

.jp-contact__items {
	display: flex;
	flex-direction: column;
	gap: var(--jp-s500);
}

/* Figma 33:2789 Frame 135 — label and value on one 24px line, not stacked.
   Two different gaps in the row: icon → label 12 (33:3015 sits at x=36 after a
   24px icon), label → value 26 (33:3016 at x=111 after an 85px label group). */
.jp-contact__item {
	display: flex;
	align-items: center;
	column-gap: var(--jp-s300);
	min-height: 24px;
}

.jp-contact__icon {
	display: inline-flex;
	color: var(--wp--preset--color--green-dark, #2b4d00);
}

.site-main .jp-contact__item-title {
	margin: 0;
	font-size: var(--jp-body-md);
	line-height: var(--jp-body-md-lh);
	font-weight: 400;
	color: var(--wp--preset--color--ink, #1f1f1f);
	white-space: nowrap;
}

.jp-contact__item-sub {
	margin: 0 0 0 14px;   /* 12 column-gap + 14 = Figma's 26 */
	font-size: var(--jp-body-md);
	line-height: var(--jp-body-md-lh);
	color: var(--wp--preset--color--ink, #1f1f1f);
}

/* ==========================================================================
   Jam Pod — 404 (Figma 7:2306)
   ========================================================================== */

/* Figma 33:3204 — the 662px text column is unchanged from the old file (block
   324–676, button 628), but the shorter 474px footer moves the trailing gap
   from 200 to 152. The 20px gutter stays outside the column or the heading
   wraps and pushes the button down a line. */
.jp-404 {
	max-width: 702px;
	margin-inline: auto;
	padding: 132px 20px 152px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.jp-404__code,
.site-main .jp-404__text {
	width: 100%;
}

.jp-404__code {
	margin: 0 0 80px;     /* Figma: gap 80 */
	font-size: 120px;     /* Figma: 120 Bold */
	line-height: 1;
	font-weight: 700;
	color: var(--wp--preset--color--green-deep, #2d4f00);
}

.site-main .jp-404__text {
	margin: 0 0 60px;     /* Figma: gap 60 */
	font-size: 44px;      /* Figma: 44 Bold */
	line-height: 1;
	font-weight: 700;
	color: var(--wp--preset--color--green-deep, #2d4f00);
}

.jp-404__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 107px;   /* Figma: 107x48 */
	height: 48px;
	padding: 0 30px;
	background-color: var(--wp--preset--color--green-dark, #2b4d00);
	color: var(--wp--preset--color--paper, #fffefa);
	font-size: 16px;      /* Figma: 16/17.6 */
	line-height: 17.6px;
}

.jp-404__btn:hover {
	background-color: var(--wp--preset--color--green-deep, #2d4f00);
	color: var(--wp--preset--color--paper, #fffefa);
}

/* Pages responsive */
/* Figma 33:3368 — only the sentence shrinks on mobile (28/28, two lines); the
   120px code and both gaps (80, 60) are the desktop values, which is what puts
   the button at 518 and the footer at 830. */
@media (max-width: 921px) {
	.jp-404__code { margin-bottom: 80px; }
	.site-main .jp-404__text { font-size: 28px; line-height: 28px; margin-bottom: 60px; }
}

/* Page typography guards v2 */
.site-main .jp-split__kicker { font-size: var(--jp-body-xsm); line-height: var(--jp-body-xsm-lh); }
.site-main .jp-contact__intro,
.site-main .jp-contact__item-sub { font-size: var(--jp-body-md); line-height: var(--jp-body-md-lh); }
.site-main .jp-404__code { font-size: 120px; line-height: 1; }

/* News box guards (Figma 7:416) */

/* Player text guards (ref 15:1272) */
.site-main .jp-player__date { font-size: 16px; line-height: 22px; }
.site-main .jp-player__meta { font-size: 15.5px; line-height: 22px; }

/* ==========================================================================
   Jam Pod — Playlists (Figma 15:102)
   772 col · rows pad 40/0, border-bottom 1px #003300
   ========================================================================== */

.jp-plist-row {
	padding: 40px 0;                    /* Figma: 40/0/40 */
	border-bottom: 1px solid #003300;   /* Figma: 1px #003300 */
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;                          /* Figma: 24 */
}

.jp-plist-row:first-of-type {
	padding-top: 0;
}

.jp-plist-row__label {
	font-size: 12px;      /* Figma: 12 SemiBold */
	line-height: 21.6px;
	font-weight: 600;
	color: #cf412b;       /* Figma: #CF412B */
	white-space: nowrap;
	margin-right: 0;
}

.jp-plist-row__label:hover { color: var(--wp--preset--color--green-dark, #2b4d00); }

.jp-plist-row__main {
	flex: 1 1 auto;
	display: flex;
	gap: 24px;            /* Figma: 24 */
	align-items: flex-start;
}

.jp-plist-row__body {
	display: flex;
	flex-direction: column;
	gap: 12px;            /* Figma: 12 */
}

.site-main .jp-plist-row__name {
	margin: 0;
	font-size: 20px;      /* Figma: 20 Medium */
	line-height: 24.6px;
	font-weight: 500;
	color: var(--wp--preset--color--ink, #1f1f1f);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.jp-plist-row__name svg { width: 14px; height: 14px; color: #003300; } /* Figma: 14 */

.jp-plist-row__name a:hover { color: var(--wp--preset--color--green-dark, #2b4d00); }

.jp-plist-row__count {
	font-size: 14px;      /* Figma: 14/21 */
	line-height: 21px;
	color: var(--wp--preset--color--green-dark, #2b4d00);
	margin: 0;
}

.jp-plist-row__view {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-top: 8px;     /* Figma: pad 8/0/5 */
	font-size: 14px;      /* Figma: 14/15.4 */
	line-height: 15.4px;
	color: #003300;       /* Figma: #003300 */
	white-space: nowrap;
}

.jp-plist-row__view svg { width: 12px; height: 6px; stroke: currentColor; stroke-width: 2; fill: none; } /* Figma: 12x6 */

.jp-plist-row__view:hover { color: var(--wp--preset--color--green-dark, #2b4d00); }

@media (max-width: 600px) {
	.jp-plist-row { flex-direction: column; gap: 12px; }
	.jp-plist-row__main { flex-direction: column; gap: 8px; }
}

/* Playlists count guard */
.site-main .jp-plist-row__count { font-size: 14px; line-height: 21px; }

/* ==========================================================================
   Jam Pod — Global content typography (Style guide 12:290 "Post single")
   Headings: Merriweather Bold, lh 110% · Paragraphs: lh 140% · Lists: lh 120%
   Globally tunable via Theme Settings → Content Styles (CSS vars).
   ========================================================================== */

.jp-pod__entry {
	color: var(--jp-text, #3d3d3d);
}

.site-main .jp-pod__entry h1,
.site-main .jp-pod__entry h2,
.site-main .jp-pod__entry h3,
.site-main .jp-pod__entry h4,
.site-main .jp-pod__entry h5,
.site-main .jp-pod__entry h6 {
	font-family: var(--wp--preset--font-family--merriweather, Merriweather, serif);
	font-weight: 700;         /* Figma: Bold */
	line-height: 1.1;         /* Figma: 110% */
	color: var(--jp-heading, #3d3d3d);
	margin: 1.5em 0 0.6em;
}

.site-main .jp-pod__entry h1 { font-size: 32px; } /* Figma: H1 32 */
.site-main .jp-pod__entry h2 { font-size: 28px; } /* Figma: H2 28 */
.site-main .jp-pod__entry h3 { font-size: 24px; } /* Figma: H3 24 */
.site-main .jp-pod__entry h4 { font-size: 20px; } /* Figma: H4 20 */
.site-main .jp-pod__entry h5 { font-size: 18px; } /* Figma: H5 18 */
.site-main .jp-pod__entry h6 { font-size: 16px; } /* Figma: H6 16 */

.site-main .jp-pod__entry p {
	font-size: var(--jp-content-size, 16px); /* Figma: Paragraph Medium 16 */
	line-height: 1.4;                        /* Figma: 140% */
	color: var(--jp-text, #3d3d3d);
}

.site-main .jp-pod__entry a {
	color: var(--jp-link, #2b4d00);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.site-main .jp-pod__entry a:hover {
	color: #003300;
}

.site-main .jp-pod__entry ul,
.site-main .jp-pod__entry ol {
	margin: 0 0 24px;
	padding-left: 26px;
}

.site-main .jp-pod__entry li {
	font-size: var(--jp-content-size, 16px); /* Figma: List 16 */
	line-height: 1.2;                        /* Figma: 120% */
	color: var(--jp-text, #3d3d3d);
	margin-bottom: 10px;
}

.site-main .jp-pod__entry ol li::marker {
	font-weight: 700;   /* Figma: markers Bold */
	color: #1a211f;     /* Figma: #1A211F */
}

.site-main .jp-pod__entry ul {
	list-style-type: square; /* Figma: 9x9 square */
}

.site-main .jp-pod__entry ul li::marker {
	color: #003300;          /* Figma: #003300 */
}

.site-main .jp-pod__entry figure {
	margin: 32px 0;
}

.site-main .jp-pod__entry img {
	max-width: 100%;
	height: auto;
	display: block;
}

.site-main .jp-pod__entry figcaption {
	font-size: 16px;    /* Style guide examples: 16/140 */
	line-height: 1.4;
	color: var(--jp-text, #3d3d3d);
	margin-top: 12px;
}

.site-main .jp-pod__entry hr {
	border: 0;
	border-top: 1px solid #003300; /* site separator color */
	margin: 40px 0;
}

.site-main .jp-pod__entry strong { font-weight: 700; }
.site-main .jp-pod__entry em { font-style: italic; }




/* Blog single (regular posts) — Style guide H1 32 Bold */
.jp-pod--blog {
	padding-top: 90px;
}

.jp-blog-head {
	margin-bottom: 28px;
}

.site-main .jp-blog-title {
	font-size: 32px;      /* Style guide: H1 32 Bold */
	line-height: 1.1;     /* 110% */
	font-weight: 700;
	color: var(--jp-heading, #3d3d3d);
	margin: 10px 0 0;
}

/* ==========================================================================
   Jam Pod — Content blocks from Style guide 12:290 (part 2)
   Pull quotes · line quote · columns · buttons · galleries · wide images
   ========================================================================== */

/* Quote with dash line (Frame 20): 68px line + italic 16/140 */
.site-main .jp-pod__entry blockquote.jp-line,
.site-main .jp-pod__entry .wp-block-quote.is-style-plain,
.site-main .jp-pod__entry .wp-block-quote.is-style-jp-line {
	border: 0;
	padding: 0;
	margin: 32px 0;
	display: flex;
	align-items: flex-start;
	gap: 30px;               /* Figma: 30 */
}

.site-main .jp-pod__entry blockquote.jp-line::before,
.site-main .jp-pod__entry .wp-block-quote.is-style-plain::before,
.site-main .jp-pod__entry .wp-block-quote.is-style-jp-line::before {
	content: "";
	flex: 0 0 68px;          /* Figma: 68px line */
	height: 1px;
	background: #003300;     /* Figma: #003300 */
	margin-top: 11px;
}

.site-main .jp-pod__entry blockquote.jp-line p,
.site-main .jp-pod__entry .wp-block-quote.is-style-plain p,
.site-main .jp-pod__entry .wp-block-quote.is-style-jp-line p {
	font-style: italic;      /* Figma: Italic 16/140 */
	font-size: 16px;
	line-height: 1.4;
	margin: 0;
}

/* Pull quote (Rect 1390) — 757x110, 28/120 text.
   The 12:290 export has #0A121C pixels on all four edges (x=341 and x=1097,
   y=3484 and y=3593), and the text sits 20px inside on every side. */
.site-main .jp-pod__entry .wp-block-pullquote {
	border: 1px solid #0a121c;
	padding: 20px;
	margin: 40px 0;
	text-align: left;
}

.site-main .jp-pod__entry .wp-block-pullquote p {
	font-size: 28px;      /* Figma: 28 Regular */
	line-height: 1.2;     /* Figma: 120% */
	font-weight: 400;
	color: var(--jp-text, #3d3d3d);
	margin: 0;
}

.site-main .jp-pod__entry .wp-block-pullquote cite {
	display: inline-block;
	margin-top: 14px;
	font-style: normal;
	font-size: 16px;      /* Figma: Details 16/140 #0A121C */
	line-height: 1.4;
	color: #0a121c;
	border-bottom: 1px solid #003300; /* Figma: 32px underline #003300 */
	padding-bottom: 2px;
}

/* Two-column text (Vectors 63/64/65 + numbers): 18/140, divider #1A211F */
.site-main .jp-pod__entry .wp-block-columns {
	border-top: 1px solid #1a211f;    /* Figma: #1A211F rules */
	padding-top: 20px;
	margin: 40px 0;
	gap: 0;
	counter-reset: jp-col;
}

.site-main .jp-pod__entry .wp-block-column {
	counter-increment: jp-col;
	padding: 0 30px;                  /* Figma: gutter ~30 */
}

.site-main .jp-pod__entry .wp-block-column:first-child {
	padding-left: 0;
}

.site-main .jp-pod__entry .wp-block-column:last-child {
	padding-right: 0;
}

.site-main .jp-pod__entry .wp-block-column + .wp-block-column {
	border-left: 1px solid #1a211f;   /* Figma: 0x206 divider #1A211F */
}

.site-main .jp-pod__entry .wp-block-column::before {
	content: counter(jp-col);
	display: block;
	font-weight: 700;     /* Figma: Bold 18 #1A211F */
	font-size: 18px;
	line-height: 1.2;
	color: #1a211f;
	margin-bottom: 14px;
}

.site-main .jp-pod__entry .wp-block-column p {
	font-size: 18px;      /* Figma: Medium 18/140 */
	line-height: 1.4;
}

/* Buttons (Frames 21/22): pad 12/24, 18 SemiBold, radius 0 */
.site-main .jp-pod__entry .wp-block-button__link {
	background: #003300;  /* Figma: Primary #003300 */
	color: #fffefa;
	font-size: 18px;      /* Figma: 18 SemiBold */
	font-weight: 600;
	line-height: 1.2;
	padding: 12px 24px;   /* Figma: 12/24 */
	border-radius: 0;     /* Figma: 0 */
	text-decoration: none;
	display: inline-block;
}

.site-main .jp-pod__entry .is-style-outline .wp-block-button__link,
.site-main .jp-pod__entry .wp-block-button.is-style-outline > .wp-block-button__link {
	/* Figma Frame 22 is 205x46 and the export shows #003300 pixels on all four
	   edges — the secondary button is outlined, not bare text. */
	background: transparent;
	color: #003300;
	border: 1px solid #003300;
	padding: 11px 23px; /* keeps the outlined box on 46px */
}

.site-main .jp-pod__entry .wp-block-button__link:hover {
	background: var(--wp--preset--color--green-dark, #2b4d00);
	color: #fffefa;
}

/* Wide images & galleries: images run wider than the text column */
.site-main .jp-pod__entry figure.wp-block-image,
.site-main .jp-pod__entry .wp-block-gallery {
	width: 100%; /* Figma: white card inner 630 — images stay inside */
}

.site-main .jp-pod__entry figure.wp-block-image img {
	width: 100%;
}

.site-main .jp-pod__entry .wp-block-gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;     /* Figma: 2-up layouts */
	gap: 20px;
	margin-top: 32px;
	margin-bottom: 32px;
}

.site-main .jp-pod__entry .wp-block-gallery figure {
	margin: 0;
	width: auto;
	transform: none;
	margin-left: 0;
}

.site-main .jp-pod__entry .wp-block-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 820px) {
	.site-main .jp-pod__entry figure.wp-block-image,
	.site-main .jp-pod__entry .wp-block-gallery {
		width: 100%;
		margin-left: 0;
		transform: none;
	}
	.site-main .jp-pod__entry .wp-block-columns {
		display: block;
	}
	.site-main .jp-pod__entry .wp-block-column {
		padding: 0;
	}
	.site-main .jp-pod__entry .wp-block-column + .wp-block-column {
		border-left: 0;
		border-top: 1px solid #1a211f;
		margin-top: 20px;
		padding-top: 20px;
	}
}

/* Fonts management (Theme Settings → Fonts) */
.site-main .jp-pod__entry,
.site-main .jp-pod__entry p,
.site-main .jp-pod__entry li,
.site-main .jp-pod__entry blockquote p,
.site-main .jp-pod__entry figcaption {
	font-family: var(--jp-font-body, inherit);
}

.site-main .jp-pod__entry h1,
.site-main .jp-pod__entry h2,
.site-main .jp-pod__entry h3,
.site-main .jp-pod__entry h4,
.site-main .jp-pod__entry h5,
.site-main .jp-pod__entry h6,
.site-main .jp-blog-title {
	font-family: var(--jp-font-heading, var(--wp--preset--font-family--merriweather, Merriweather, serif));
}

/* ==========================================================================
   Mobile page layouts — Figma 390w frames
   15:1706 About · 18:1752 Playlist · 30:2456 Episodes · 33:2377 Episode
   33:3018 Contact · 33:3307 404
   Shared pattern: a 16px gutter around the column, under a 102px header.

   The gutter is what this block sets — never a fixed 390px column, or every
   screen between 390 and 921 would show the mobile layout as a narrow strip
   floating in the middle. Each container keeps its own desktop max-width and
   simply fills the viewport until it reaches it: 390 - 32 = the 358 the Figma
   frames draw, and it grows from there. Anything sized *from* that 358 (hero
   and top-story heights) is expressed as the ratio the desktop frame uses, so
   it stays correct at every width. Rules that only make sense once the layout
   actually stacks live in the 600px block at the end of this file.
   ========================================================================== */
@media (max-width: 921px) {

	/* --- Playlist archive (18:1752): content 182, pagination 1560, footer 1700 */
	.jp-plist {
		padding: 80px 16px 100px;
	}

	.jp-plist .jp-pagination {
		margin-top: var(--jp-s1500);
	}

	/* --- Episode archive (30:2456) */
	.jp-archive {
		padding: 80px 16px 100px;
	}

	.jp-arch-row__body {
		height: auto;
	}

	.jp-arch-row__excerpt {
		flex: 0 1 auto;
		overflow: visible;
	}

	/* --- Episode single (33:2377): player 152, panel inset 19, content 40 */
	.jp-pod {
		padding: 50px 16px 0;
	}

	/* Figma 33:2563 — the 320px inner column sits 19 in from a 358px panel. */
	.jp-pod__player.jp-player {
		padding: 39px 19px 40px;
	}

	/* Figma 33:2607 keeps the desktop 40px side padding around a 278 column. */
	.jp-pod__content {
		padding: 39px 40px 40px;
	}

	.jp-pod__entry {
		max-width: none;
	}

	.jp-pod__more {
		max-width: none;
		padding: 60px 0 100px;
	}

	/* --- Contact (33:3018): block 182, footer 830 */
	.jp-contact {
		padding: 80px 16px 347px;
	}

	/* --- 404 (33:3307): block 202, button 518, footer 830 */
	.jp-404 {
		padding: 100px 16px 264px;
	}

	/* --- About us (15:1706): section 142, hero 358x155 */
	.jp-page-hero {
		margin-top: var(--jp-s1000);
		padding-inline: var(--jp-s400);
	}

	/* 1200x520 on desktop, 358x155 at 390 — the same ratio, so express it once
	   instead of pinning a height that only holds at one width. */
	.jp-page-hero__img {
		height: auto;
		aspect-ratio: 1200 / 520;   /* Figma 15:1950: 358 -> 155 */
	}

	.jp-split {
		padding: var(--jp-s1500) var(--jp-s400) 100px;  /* Figma mobile gap 60 */
	}

	/* --- Post single. No 390 frame either; it reuses the episode single's
	   panel (33:2607: a 358 panel around a 278 column) and closes with the
	   100px every mobile page leaves above the footer. */
	.jp-pod--blog {
		padding-top: 50px;
		padding-bottom: 100px;
	}

	/* --- Home. Figma has no 390 frame for it, so it follows the pattern the
	   six mobile frames share: a 358 column inside a 16px gutter, 60px of
	   section padding, 80 under the header on the first block, 100 before the
	   footer on the last, and a 40px gap between stacked cards. */
	.jp-cards,
	.jp-section {
		padding: var(--jp-s1500) var(--jp-s400);
	}

	.jp-cards,
	.jp-section.jp-posts-row--bare {
		padding: 80px var(--jp-s400) var(--jp-s1500);
	}

	.site-main > .jp-posts-row:last-child {
		padding-bottom: 100px;
	}

	.jp-cards__grid,
	.jp-posts-row__grid {
		gap: var(--jp-s1000);
	}

	.jp-top-stories__row {
		grid-template-columns: 1fr;
		gap: var(--jp-s500);
	}

	/* The 766x498 top story keeps that ratio at any width (358 -> 233) and its
	   caption moves to the foot of the shorter frame. */
	.jp-featured__link {
		height: auto;
		aspect-ratio: 766 / 498;
	}

	.jp-featured__content {
		top: auto;
		bottom: var(--jp-s600);
	}

	/* The CTA stops being a fixed 498px column next to the story. */
	.jp-news {
		height: auto;
		padding: var(--jp-s600) var(--jp-s400);
	}

	.jp-news__head {
		gap: var(--jp-s1000);
		margin-bottom: var(--jp-s1000);
	}

	/* Card image matches the episode card (30:2671), the panel keeps its own
	   44/16 padding but no longer needs the 258px floor. */
	.jp-post-card__img {
		height: 188px;
	}

	.jp-post-card__panel {
		min-height: 0;
	}

	/* --- Pagination (18:2106): smaller arrows and numbers, tighter gap */
	.jp-pagination .nav-links {
		gap: var(--jp-s300);
	}

	.jp-pagination .page-numbers {
		font-size: 24px;
		margin: 0 8px;
	}

	.jp-pagination .page-numbers.prev,
	.jp-pagination .page-numbers.next {
		width: 40px;
		height: 40px;
	}
}

/* ==========================================================================
   Phone — where the multi-column compositions actually collapse.
   Everything above only narrows the gutter; these rules restack, so they stop
   at 600 and the 601-921 range keeps the side-by-side layouts at full width.
   Must stay last in the file: same specificity as the 921 block above it.
   ========================================================================== */
@media (max-width: 600px) {

	/* Episode row (24:1745) — image over text instead of 230 + column */
	.jp-arch-row {
		grid-template-columns: 1fr;
		gap: var(--jp-s500);
	}

	.jp-arch-row__img {
		width: 100%;
		height: 188px;              /* Figma 30:2671 */
	}

	/* Playlist row (18:1232) — only the kicker moves onto its own line; the
	   name/count column and View All stay paired underneath it. */
	.jp-plist__row {
		flex-wrap: wrap;
		gap: var(--jp-s600);
		padding: var(--jp-s500) 0;
	}

	.jp-plist__kicker {
		width: 100%;
	}

	/* About (15:1706) — the two-column split stacks */
	.jp-split__grid {
		grid-template-columns: 1fr;
		gap: var(--jp-s500);
	}

	/* Contact (33:3176) — the value drops under its label, 26 below */
	.jp-contact__col {
		max-width: none;
	}

	.jp-contact__item {
		flex-wrap: wrap;
		row-gap: 26px;
	}

	.jp-contact__item-sub {
		flex-basis: 100%;
		margin-left: 0;
	}

	/* Home — one card per row */
	.jp-cards__grid,
	.jp-posts-row__grid {
		grid-template-columns: 1fr;
	}
}