/*
Theme Name: LWI Classic
Description: Classic PHP theme for Living With Insight — no Elementor, no page builder. Class names are the layer names in LivingWithInsight.pen.
Version: 0.3
*/

/* LWI.pen fonts, self-hosted (POPIA: Google's font CDN exposes visitor IPs). Files from Assets/Fonts. */
/* Philosopher only exists in Regular and Bold, so the pen uses 400 and 700 only. */
@font-face {
	font-family: 'Philosopher';
	src: url('fonts/Philosopher-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Philosopher';
	src: url('fonts/Philosopher-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Philosopher';
	src: url('fonts/Philosopher-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Philosopher';
	src: url('fonts/Philosopher-BoldItalic.ttf') format('truetype');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Host Grotesk';
	src: url('fonts/HostGrotesk-VariableFont_wght.ttf') format('truetype');
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Host Grotesk';
	src: url('fonts/HostGrotesk-Italic-VariableFont_wght.ttf') format('truetype');
	font-weight: 300 800;
	font-style: italic;
	font-display: swap;
}

/* Old design fonts (LivingWithInsight.pen). Still used by the old page styles below; remove with them. */
/* Self-hosted (POPIA: Google's font CDN exposes visitor IPs). The exact files Google Fonts served, latin + latin-ext only. */
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/Lato-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/Lato-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Lato-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Lato-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Lato-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Lato-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/Poppins-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/Poppins-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Poppins-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Poppins-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Poppins-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Poppins-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Poppins-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Poppins-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/WorkSans-variable-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/WorkSans-variable-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/WorkSans-variable-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/WorkSans-variable-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/WorkSans-variable-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/WorkSans-variable-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/WorkSans-variable-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/WorkSans-variable-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Names and values are the LWI.pen variables. */
:root {
	--forest: #354120;
	--sage: #6b8240;
	--sage-tint: #d5dbce;
	--mist: #506d7a;
	--mist-tint: #dae6e8;
	--stone: #535b58;
	--stone-tint: #f0f2f1;
	--linen: #ffffff;
	--ocean: #1c2c33;
	--peach: #f4c09d;
	--peach-tint: #f2e9e1;
	--terracotta: #bc7d71;
	--lime: #d3d587;
	--brand-spotify: #1db954;
	--brand-apple-podcasts: #8a2dc4;

	--font-philosopher: 'Philosopher', Georgia, serif;
	--font-host-grotesk: 'Host Grotesk', system-ui, sans-serif;

	/*
	 * Sizes with a phone value in the pen slide from the phone size to the desktop size
	 * over 360px → 1140px, same clamp system as Yoked. Layout switches to phone under 1000px.
	 */
	--body-xsmall-size: 14px;
	--body-small-size: 16px;
	--body-size: clamp(1rem, 0.9423rem + 0.2564vw, 1.125rem);           /* 16 phone → 18 desktop */
	--body-large-size: 18px;
	--heading-small-size: clamp(1.2rem, 1.0615rem + 0.6154vw, 1.5rem);  /* 19.2 → 24 */
	--heading-size: clamp(1.5rem, 1.0385rem + 2.0513vw, 2.5rem);        /* 24 → 40 */
	--heading-large-size: clamp(2rem, 1.3077rem + 3.0769vw, 3.5rem);    /* 32 → 56 */

	/* Old design colours, not in LWI.pen. Still used by the old page styles below; remove with them. */
	--moss-tint: #d0e5de;
	--send-green: #a1c460;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--stone-tint);
	color: var(--forest);
	font-family: var(--font-host-grotesk);
	font-weight: 300;
	line-height: 1.5;
}

/* 1300 of content (the pen's wrap) plus 32 gutters each side. A wrap inside a wrap (as drawn) adds nothing. */
.wrap {
	max-width: calc(1300px + 64px);
	margin: 0 auto;
	padding: 0 32px;
}

.wrap .wrap {
	max-width: none;
	padding: 0;
}

/* Decorations that bleed past the screen edge (intro__gradient, front-page__flowers) don't make the page scroll sideways. */
.site-main {
	overflow-x: clip;
}

/* ---------- site-header (LWI.pen) ---------- */

/* nav is position: sticky at top, stays pinned on scroll (context note on site-header). */
.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	padding: 20px;
	line-height: normal;
}

/* Pages that open on a hero image: the header sits over it, as drawn (125 = 20 + 85 + 20). */
body:has(.page-hero, .hero-show, .post-hero) .site-header {
	margin-bottom: -125px;
}

/*
 * The pen's glass (glass.glsl shader over $sage) is the Silica plugin here, on its own layer
 * (.site-header__glass) so the pill itself doesn't become the backdrop root for anything inside it.
 */
.site-header__pill {
	position: relative;
	display: flex;
	align-items: center;
	width: min(100%, 1300px);
	height: 85px;
	margin: 0 auto;
	padding: 12px 40px;
	border-radius: 22px;
}

.site-header__glass {
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-color: color-mix(in srgb, var(--sage) 90%, transparent);
	backdrop-filter: blur(4px);
}

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

.site-header__logo {
	display: flex;
	align-items: center;
	gap: 20px;
	color: var(--linen);
	text-decoration: none;
}

.site-header__emblem svg {
	display: block;
	width: 44px;
	height: 49px;
}

.site-header__wordmark {
	font-family: var(--font-philosopher);
	font-size: var(--heading-small-size);
	font-weight: 400;
	color: var(--linen);
}

.site-header__wordmark span {
	font-weight: 700;
	color: var(--sage-tint);
}

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

.site-nav__item a {
	color: var(--linen);
	font-family: var(--font-host-grotesk);
	font-size: var(--body-small-size);
	font-weight: 300;
	text-decoration: none;
	white-space: nowrap;
}

.site-nav__item a:hover {
	color: var(--sage-tint);
}

.site-nav__item.is-current a {
	color: var(--sage-tint);
	font-weight: 500;
}

/* ---------- site-footer (LWI.pen) ---------- */

.site-footer {
	padding: 0 10px;
	background: var(--forest);
	line-height: normal;
}

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

.site-footer__emblem {
	color: var(--sage-tint);
}

.site-footer__emblem svg {
	display: block;
	width: 95px;
	height: 106px;
}

.site-footer__legal {
	margin: 0;
	color: var(--sage-tint);
	font-size: var(--body-small-size);
	font-weight: 500;
	text-align: center;
}

.site-footer__legal a {
	color: inherit;
}

/* ---------- site-header@phone / site-footer@phone ---------- */

@media (max-width: 999.98px) {
	.site-header {
		padding: 10px;
		pointer-events: none; /* the box keeps its height while the logo is hidden; only the pill takes taps */
	}

	body:has(.page-hero, .hero-show, .post-hero) .site-header {
		margin-bottom: -134px;
	}

	.site-header__pill {
		height: auto;
		padding: 16px 20px;
		border-radius: 16px;
		pointer-events: auto;
	}

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

	.site-header__logo {
		gap: 10px;
	}

	/*
	 * Logo above the nav. Hides when scrolling down, back when scrolling up (js/site.js sets inert).
	 * 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: -61px; /* the logo's 49px plus the 12px gap */
		opacity: 0;
		visibility: hidden;
	}

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

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

	.site-nav__list {
		justify-content: center;
		gap: clamp(16px, 100vw - 378px, 24px); /* 24 as drawn at 402; closes up on narrower phones so the nav fits */
	}

	.site-footer__inner {
		gap: 10px;
		padding: 40px 0 16px;
	}
}

/* The logo's margin and the header's padding move together, so the header keeps its height and the page doesn't jump. */
@media (prefers-reduced-motion: no-preference) {
	.site-header__logo {
		transition: margin-top 0.25s ease, opacity 0.25s ease, visibility 0.25s;
	}

	.site-header {
		transition: padding-bottom 0.25s ease;
	}
}

/* ---------- shared components (LWI.pen) ---------- */

/* txt-hero: two-tone heading. --first / --second / --gap are the pen's per-instance overrides. */
.intro__text > h1,
.about__block > h2 {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap, 10px);
	margin: 0;
	font-family: var(--font-philosopher);
	font-size: var(--heading-size);
	font-weight: 400;
	line-height: normal;
}

.txt-hero__word--first {
	color: var(--first, var(--forest));
}

.txt-hero__word--second {
	color: var(--second, var(--sage));
}

.about__text,
.about__text--bold {
	color: var(--text, var(--forest));
	font-size: var(--body-size);
	font-weight: 300;
	line-height: normal;
	width: 90%;
}

.about__text p,
.about__text--bold p,
p.about__text--bold {
	margin: 0;
}

.about__text p + p,
.about__text--bold p + p {
	margin-top: 1lh;
}

/* btn-cta: the component is lime; --btn-* are the pen's per-instance overrides. */
.btn-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 56px;
	padding: 0 24px 0 32px;
	border: 1px solid var(--btn-border, transparent);
	border-radius: 8px;
	background: var(--btn-bg, var(--lime));
	color: var(--btn-text, var(--ocean));
	font-family: var(--font-philosopher);
	font-size: var(--heading-small-size);
	font-weight: 400;
	line-height: normal;
	text-decoration: none;
	white-space: nowrap;
}

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

.btn-cta svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.btn-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ocean);
	font-family: var(--font-philosopher);
	font-size: var(--heading-small-size);
	font-weight: 400;
	line-height: normal;
	text-decoration: none;
}

.btn-link svg {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.btn-med--nofill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--mist);
	font-size: var(--body-size);
	font-weight: 500;
	line-height: normal;
	text-decoration: none;
}

.btn-med--nofill svg {
	width: 16px;
	height: 16px;
}

.pill-list {
	display: flex;
	flex-direction: column;
	gap: var(--pill-gap, 10px);
	width: 100%;
}

/* A row of pills (unnamed Frame 11 / 14 / 21 in the pen). */
.pill-list > ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pill-gap, 10px) var(--pill-gap, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.connect-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 30px;
	border-radius: 10px;
	background: var(--pill-bg, transparent);
	color: var(--forest);
	line-height: normal;
}

.connect-pill svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.connect-pill__label {
	font-size: var(--body-large-size);
	font-weight: 300;
}

strong.connect-pill__label {
	font-weight: 300;
}

/* card-post: one per post, the big card. No show badge. Width 740 as drawn; narrower screens shrink it. */
.card-post {
	width: 100%;
	max-width: 740px;
	border-radius: 14px;
	background: #fafafa;
	overflow: hidden;
	line-height: normal;
}

.card-post__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 30px 50px;
	border-left: 6px solid var(--sage);
}

.card-post__title {
	margin: 0;
	color: var(--ocean);
	font-family: var(--font-philosopher);
	font-size: var(--heading-small-size);
	font-weight: 700;
	line-height: 1.2;
}

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

.card-post__excerpt {
	margin: 0;
	color: var(--ocean);
	font-size: var(--body-size);
	line-height: 1.5;
}

.card-post__image-link {
	display: block;
}

.card-post__image {
	display: block;
	width: 100%;
	height: auto;
}

.card-post__meta-list {
	display: flex;
	align-items: center;
	gap: 14px;
}

.card-post__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--stone);
	font-size: var(--body-small-size);
	font-weight: 600;
}

.card-post__meta-item svg {
	width: 16px;
	height: 16px;
}

.card-post__footer .btn-med--nofill {
	font-weight: 700;
}

/* card-post--small: the front page card. Same parts as card-post, smaller (576 wide). */
.card-post--small {
	max-width: 576px;
	border-radius: 10px;
}

.card-post--small .card-post__body {
	gap: 12px;
	padding: 20px;
	border-left-width: 4px;
}

.card-post--small .card-post__title {
	line-height: normal;
}

.card-post--small .card-post__excerpt {
	font-size: var(--body-small-size);
	line-height: normal;
}

.card-post--small .card-post__meta-item {
	font-size: var(--body-xsmall-size);
}

.card-post--small .card-post__meta-item svg {
	width: 14px;
	height: 14px;
}

/* card-show--the-human-story@phone: a phone component in the pen, so its sizes are the pen's phone values on every screen. */
.card-show {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: 100%;
	padding: 24px;
	border-radius: 16px;
	background: var(--stone-tint);
	overflow: hidden;
	line-height: normal;
}

.card-show__watermark {
	position: absolute;
	top: -32px;
	left: -48px;
	z-index: -1;
	width: 693px;
	height: 629px;
}

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

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

.card-show__watermark::after {
	background: linear-gradient(3.358deg, #eef2ebb6 13.049%, #10242300 94.729%);
}

.card-show__logo {
	display: block;
	width: 220px;
	height: 213px;
	object-fit: contain;
}

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

.card-show__title {
	margin: 0;
	color: var(--mist);
	font-family: var(--font-philosopher);
	font-size: 32px;
	font-weight: 400;
	text-align: center;
}

.card-show__excerpt {
	margin: 0;
	color: var(--ocean);
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
	text-align: center;
}

.card-show .btn-cta {
	--btn-bg: var(--mist);
	--btn-text: var(--mist-tint);
	width: 100%;
	font-size: 19.2px;
}

.card-show__listen {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
	min-height: 51px;
}

.card-show__also {
	margin: 0;
	color: var(--mist);
	font-family: var(--font-philosopher);
	font-size: 19.2px;
}

.card-show__platforms {
	display: flex;
	gap: 15px;
}

.card-show__platforms a,
.card-show__platforms svg {
	display: block;
	width: 30px;
	height: 30px;
}

/* ---------- front-page (LWI.pen) ---------- */

.intro {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
}

/* Runs from the top of the page (behind the header) to the bottom of the intro, full screen width. */
.intro__gradient {
	position: absolute;
	top: -125px;
	bottom: 0;
	left: 50%;
	z-index: -1;
	width: 100vw;
	transform: translateX(-50%);
	background: linear-gradient(0deg, var(--mist-tint) 0%, var(--stone-tint) 100%);
}

.intro__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
	width: 455px;
	flex-shrink: 0;
}

.intro__photo {
	position: relative;
	width: 505px;
	height: 576px;
	flex-shrink: 0;
}

.intro__photo > img:not(.intro__botanical) {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
}

/* The flower artwork behind the photo, starting 149px above it (drawn under the header). */
.intro__botanical {
	position: absolute;
	top: -149px;
	left: 50%;
	z-index: -1;
	width: 589px;
	max-width: none;
	height: 720px;
	transform: translateX(-50%);
	pointer-events: none;
}

.intro__content {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.intro__title {
	margin: 0;
	color: var(--sage);
	font-family: var(--font-philosopher);
	font-size: var(--heading-small-size);
	font-weight: 700;
	line-height: normal;
}

.intro__content .about__text {
	width: 259px;
	margin: 0;
	font-size: var(--body-small-size);
	font-weight: 300;
}

/*
 * Not drawn in the pen: the desktop intro needs 1343px of screen (455 + 505 + 259 + two 30 gaps + 64 of gutters).
 * Between the phone layout (under 1000) and that, the columns and photo scale down together, same layout.
 * The botanical scales with the photo (589/505 wide, 149/576 up).
 */
@media (min-width: 1000px) and (max-width: 1343.98px) {
	.intro__text {
		flex: 0 1 455px;
		width: auto;
		min-width: 0;
	}

	.intro__photo {
		flex: 0 1 505px;
		width: auto;
		min-width: 0;
		height: auto;
		aspect-ratio: 505 / 576;
	}

	.intro__botanical {
		top: -25.87%;
		width: 116.64%;
		height: auto;
	}

	.intro__content {
		flex: 1 1 259px;
		min-width: 0;
	}

	.intro__content .about__text {
		width: 100%;
		max-width: 259px;
	}
}

.site-main > .wrap > .wrap {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 100px;
	padding: 50px 0;
}

.about__col--r,
.about__col--l {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 100px;
	min-width: 0;
}

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

/* The quote under I'm Experienced (an unnamed p in the pen). */
.about__block > p:not([class]) {
	max-width: 562px;
	margin: 0;
	color: var(--ocean);
	font-family: var(--font-philosopher);
	font-size: var(--heading-small-size);
	line-height: 1.2;
}

/* The faded flower photo, drawn rotated a quarter turn and colour-burned into the page. Desktop only. */
.front-page__flowers {
	position: absolute;
	top: 792px;
	left: 872px;
	z-index: -1;
	width: 902px;
	height: 595px;
	transform: rotate(-90deg);
	transform-origin: top left;
	background: url('images/front-page-flowers.webp') center / cover no-repeat;
	mix-blend-mode: color-burn;
	pointer-events: none;
}

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

@media (max-width: 999.98px) {
	.site-main > .wrap {
		padding: 0 20px 70px;
	}

	.intro {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	/* Not on phone (removed in the pen). */
	.intro__gradient {
		display: none;
	}

	.intro__text,
	.intro__photo,
	.intro__content {
		width: 100%;
	}

	/* 362 x 413 as drawn: centred and not wider on bigger phones, so the photo isn't cropped. */
	.intro__photo {
		order: -1;
		align-self: center;
		width: min(100%, 362px);
		height: 413px;
	}

	/* The photo fades into the page at the bottom (the pen's radial gradient over it). */
	.intro__photo::after {
		content: '';
		position: absolute;
		inset: 0;
		background: radial-gradient(ellipse 256% 46% at 50% 100%, var(--stone-tint) 12%, transparent 100%);
		pointer-events: none;
	}

	/* Condensed on phone (as drawn): no About Me link, no right-hand block, no Learn More under Registered & Certified. */
	.intro__content,
	.intro__text > .btn-link,
	.home .about__col--l > .about__block > .btn-cta {
		display: none;
	}

	/* 354 x 433, 148 above the photo, as drawn. */
	.intro__botanical {
		top: -148px;
		width: 354px;
		height: 433px;
	}

	.site-main > .wrap > .wrap {
		flex-direction: column;
		gap: 40px;
		padding: 30px 0;
	}

	.about__col--r,
	.about__col--l {
		width: 100%;
		gap: 40px;
	}

	/*
	 * Front page: one column, 80 apart. The two desktop columns dissolve so the sections can be ordered across them:
	 * Experienced, Registered, Areas, Insights, Podcast.
	 */
	.home .site-main > .wrap > .wrap {
		gap: 80px;
		padding: 80px 0 30px;
	}

	.home .about__col--r,
	.home .about__col--l {
		display: contents;
	}

	.home .about__col--r > .about__block {
		order: 1;
	}

	.home .about__col--l > .about__block:last-child {
		order: 2;
	}

	.pill-list > ul {
		gap: 10px;
	}

	.front-page__flowers {
		display: none;
	}
}

/* ---------- page-hero (LWI.pen): img-hero with txt-hero laid over its bottom ---------- */

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

.img-hero {
	height: 100%;
	overflow: hidden;
	background: var(--stone-tint);
}

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

/* --fade is the page's background colour (the pen's per-page override on txt-hero). */
.txt-hero {
	position: absolute;
	top: 142px;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	width: 100%;
	height: 160px;
	margin: 0;
	background: linear-gradient(0deg, var(--fade, var(--stone-tint)) 0%, #ede6da00 100%);
	font-family: var(--font-philosopher);
	font-size: var(--heading-large-size);
	font-weight: 400;
	line-height: normal;
}

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

/* ---------- home (LWI.pen): post-grid ---------- */

/* Two columns of 576, 30 apart, as drawn. */
.post-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 576px));
	justify-content: center;
	gap: 30px;
}

/* The Insights page (home): one column of 740 cards, centred, 30 apart, as drawn. */
body.blog .post-grid {
	grid-template-columns: minmax(0, 740px);
}

/*
 * Masonry: 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 (the pen's two independent columns).
 * 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;
}

/* Not drawn in the pen (only named in post-grid's note): Yoked's spinner in LWI's mist. */
.lazy-load {
	display: flex;
	grid-column: 1 / -1;
	justify-content: center;
	align-items: center;
	height: 31px;
	color: var(--mist);
}

.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;
	color: var(--forest);
}

.pagination .nav-links a {
	color: var(--mist);
}

/* ---------- page-hero@phone / home@phone ---------- */

@media (max-width: 999.98px) {
	.page-hero {
		height: 206px;
	}

	.txt-hero {
		height: 64px;
	}

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

	.post-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- single (LWI.pen) ---------- */

/* The single's wrap is drawn as a 740 card (#fafafa, padding 30/50) on the page colour, 50 from the header and footer. */
body.single .site-main {
	padding-block: 50px;
}

body.single .site-main > .wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
	max-width: 740px;
	padding: 30px 50px;
	background: #fafafa;
	border-radius: 14px;
}

.post-single__back {
	color: var(--sage);
	font-family: 'Work Sans', sans-serif;
	font-size: var(--body-small-size);
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
}

.post-single__header .card-post__meta-item {
	font-size: var(--body-xsmall-size);
}

.post-single__header .card-post__meta-item svg {
	width: 14px;
	height: 14px;
}

.post-single__header {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.post-single__header h1 {
	margin: 0;
	color: var(--forest);
	font-family: var(--font-philosopher);
	font-size: var(--heading-size);
	font-weight: 400;
	line-height: normal;
}

.post-single {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.post-single__divider {
	padding: 15px 0;
}

.post-single__divider span {
	display: block;
	width: min(1100px, 100%);
	border-top: 2px solid var(--sage);
}

/* The post's own text (the_content). The pen draws plain paragraphs with a blank line between. */
.prose {
	color: var(--forest);
	font-size: var(--body-size);
	font-weight: 300;
	line-height: normal;
}

.prose > * {
	margin: 0;
}

.prose > * + * {
	margin-top: 1lh;
}

.prose a {
	color: inherit;
}

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

/* ---------- single@phone ---------- */

@media (max-width: 999.98px) {
	body.single .site-main {
		padding-block: 0;
	}

	body.single .site-main > .wrap {
		padding: 30px 20px 70px;
	}
}

/* ---------- page-about (LWI.pen) ---------- */

/* Pages with a hero (about, connect): the two columns sit straight in the wrap, no extra padding. */
.page-hero + .wrap > .wrap {
	padding: 0;
}

/* about__text--bold is drawn 565 wide (not the full column). */
.about__text--bold {
	max-width: 565px;
}

.about__illustration {
	display: block;
	max-width: 100%;
	height: auto;
}

/*
 * page-about@phone: one column, 80 apart, padding 30 / 20 / 70. The two desktop columns dissolve so the sections
 * can be ordered across them: Approach, Intention, Areas, Registrations, Practice, Spiritual Psychology,
 * Mindfulness, Relationship Counselling, Reiki. Columns: r = Approach, Intention, Registrations, Mindfulness, Reiki;
 * l = Areas, Practice, Spiritual Psychology, Relationship Counselling.
 */
@media (max-width: 999.98px) {
	.page-hero + .wrap:has(> .wrap > .about__col--r) {
		padding: 30px 20px 70px;
	}

	.page-hero + .wrap > .wrap {
		gap: 80px;
	}

	.page-hero + .wrap > .wrap > .about__col--r,
	.page-hero + .wrap > .wrap > .about__col--l {
		display: contents;
	}

	.page-hero + .wrap > .wrap > .about__col--r > .about__block:nth-child(1) { order: 1; }
	.page-hero + .wrap > .wrap > .about__col--r > .about__block:nth-child(2) { order: 2; }
	.page-hero + .wrap > .wrap > .about__col--l > .about__block:nth-child(1) { order: 3; }
	.page-hero + .wrap > .wrap > .about__col--r > .about__block:nth-child(3) { order: 4; }
	.page-hero + .wrap > .wrap > .about__col--l > .about__block:nth-child(2) { order: 5; }
	.page-hero + .wrap > .wrap > .about__col--l > .about__block:nth-child(3) { order: 6; }
	.page-hero + .wrap > .wrap > .about__col--r > .about__block:nth-child(4) { order: 7; }
	.page-hero + .wrap > .wrap > .about__col--l > .about__block:nth-child(4) { order: 8; }
	.page-hero + .wrap > .wrap > .about__col--r > .about__block:nth-child(5) { order: 9; }

	/* Areas of Expertise pills: all the same 20% sage, 40 tall, 5 apart. */
	.about__col--l .pill-list {
		--pill-gap: 5px;
	}

	.about__col--l .connect-pill {
		--pill-bg: color-mix(in srgb, var(--sage) 20%, transparent);
		min-height: 40px;
		padding: 0 15px;
	}

	/* Registrations & Certifications: the description sits above the bold name. */
	.about__col--r .about__hours-slot {
		flex-direction: column-reverse;
		gap: 5px;
	}

	.about__col--r .about__hours-mode {
		flex: none;
	}
}

/* about__hours is a dl: rows of a dt (day) and a dd (times), hairlines between rows. */
.about__hours {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	line-height: normal;
}

.about__hours-row {
	display: flex;
	flex-direction: column;
	gap: var(--row-gap, 10px);
	padding: 14px 0;
	border-top: 1px solid var(--sage-tint);
}

.about__hours-row:last-child {
	border-bottom: 1px solid var(--sage-tint);
}

.about__hours-day {
	color: var(--forest);
	font-size: var(--day-size, var(--heading-small-size));
	font-weight: var(--day-weight, 500);
}

.about__hours-times {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.about__hours-slot {
	display: flex;
	gap: 16px;
	font-size: var(--body-size);
}

.about__hours-time {
	color: var(--ocean);
	font-weight: 500;
	white-space: nowrap;
}

.about__hours-mode {
	flex: var(--mode-flex, 1);
	color: var(--stone);
}

/* A slot with no time (Every consecutive, Education) lets its text run the full width. */
.about__hours-mode:only-child {
	flex: 1;
}

/* ---------- page-contact (LWI.pen) ---------- */

/* The wrap holds the two columns directly: photo (499) and practice + form (700), 100 apart. */
.page-hero + .wrap:has(> .connect__col--l) {
	display: flex;
	align-items: stretch;
	gap: 100px;
}

/* The photo column is as tall as the right-hand column; the photo fills it. */
.connect__col--l {
	display: flex;
	flex: 0 0 499px;
	flex-direction: column;
}

.connect__block {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 20px;
}

.connect__emblem {
	display: block;
	flex: 1;
	width: 100%;
	min-height: 0;
	height: 100%;
	border-radius: 10px;
	object-fit: cover;
}

.connect__col--r {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 100px;
	min-width: 0;
	max-width: 700px;
}

.connect__col--r .connect__block {
	flex: none;
}

.connect__heading {
	margin: 0;
	color: var(--ocean);
	font-family: var(--font-philosopher);
	font-size: var(--heading-size);
	font-weight: 400;
	line-height: normal;
}

/* ---------- contact-form (LWI.pen) ---------- */

.contact-form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	width: 100%;
	line-height: normal;
}

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

.contact-form__notice {
	margin: 0;
	color: var(--ocean);
	font-weight: 500;
}

.contact-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

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

.float-label-input__label {
	color: var(--ocean);
	font-size: var(--body-size);
}

.float-label-input__field {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 10px;
	border: 1px solid var(--mist);
	border-radius: 5px;
	background: var(--mist-tint);
}

/* The message box is drawn 139 tall, the star top-left. */
.float-label-input__field:has(textarea) {
	align-items: flex-start;
	height: 139px;
}

.float-label-input__icon {
	display: flex;
	flex-shrink: 0;
	color: #d9340f;
}

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

.float-label-input__field input,
.float-label-input__field textarea {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ocean);
	font: inherit;
	font-size: var(--body-small-size);
	resize: none;
}

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

.float-label-input__field:focus-within {
	outline: 2px solid var(--mist);
	outline-offset: 1px;
}

.float-label-input__field input:focus,
.float-label-input__field textarea:focus {
	outline: none;
}

.btn-sml {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 40px;
	padding: 0 16px 0 20px;
	border: 0;
	border-radius: 8px;
	background: var(--ocean);
	color: var(--mist-tint);
	font-family: var(--font-host-grotesk);
	font-size: var(--body-small-size);
	font-weight: 500;
	cursor: pointer;
}

.btn-sml svg {
	width: 14px;
	height: 14px;
}

/* ---------- page-the-human-story (LWI.pen): hero-show, episode list, show-hosts, player-dock ---------- */

.hero-show {
	position: relative;
	display: flex;
	height: 702px;
	overflow: hidden;
	background: var(--stone-tint);
}

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

.hero-show__bg-l::before,
.hero-show__bg-r::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: var(--photo) center / cover no-repeat;
}

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

.hero-show__bg-l::before {
	width: 100%;
	height: 605px;
	filter: blur(10px);
}

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

.hero-show__bg-r::before {
	width: 980px;
	height: 773px;
}

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

.hero-show__bg-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	background: linear-gradient(-90deg, #ede6da00 0%, var(--stone-tint) 50%, #ede6da00 100%);
}

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

.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;
	flex-direction: column;
	justify-content: space-around;
	align-items: flex-start;
	gap: 24px;
	min-width: 0;
}

.hero-show__title {
	margin: 0;
	color: var(--ocean);
	font-family: var(--font-philosopher);
	font-size: var(--heading-large-size);
	font-weight: 400;
	line-height: normal;
}

.hero-show__excerpt {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: min(645px, 100%);
}

.hero-show__excerpt p {
	margin: 0;
	color: var(--ocean);
	font-size: var(--body-size);
	line-height: 25px;
}

/* Desktop shows the full text outright (the pen switches Read more off there). */
.hero-show__excerpt-text-short,
.hero-show__read-more {
	display: none;
}

.hero-show__read-more {
	align-self: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--stone);
	font-family: var(--font-host-grotesk);
	font-size: var(--body-small-size);
	font-weight: 500;
	cursor: pointer;
}

.hero-show .btn-cta {
	--btn-bg: var(--mist);
	--btn-text: var(--linen);
}

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

.hero-show__also {
	margin: 0;
	color: var(--ocean);
	font-family: var(--font-philosopher);
	font-size: var(--heading-small-size);
	line-height: normal;
}

.hero-show__platforms {
	display: flex;
	gap: 15px;
}

.hero-show__platforms a,
.hero-show__platforms svg {
	display: block;
	width: 30px;
	height: 30px;
}

.hero-show__header {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	width: 100%;
	height: 100px;
	background: linear-gradient(0deg, var(--stone-tint) 0%, #ede6da00 100%);
}

.hero-show__header-wrap {
	--first: var(--ocean);
	--second: var(--mist);
	display: flex;
	align-items: center;
	gap: 6px;
	width: min(100%, 1300px);
	margin: 0;
	padding: 10px;
	font-family: var(--font-philosopher);
	font-size: var(--heading-size);
	font-weight: 400;
	line-height: normal;
}

/* The episode list: the Buzz Player plugin's own markup, only placed here. */
.hero-show + .wrap {
	padding-top: 20px;
	padding-bottom: 50px;
}

/* show-hosts: 50 top and bottom as drawn, plus room for the player-dock in the bottom of this band. */
.show-hosts {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 50px 0 calc(50px + var(--dock-h));
	background: var(--mist-tint);
	line-height: normal;
}

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

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

.show-hosts__heading {
	display: flex;
	flex-direction: column;
	margin: 0;
	font-family: var(--font-philosopher);
	font-weight: 400;
}

.show-hosts__label {
	color: var(--mist);
	font-size: var(--heading-small-size);
}

.show-hosts__names {
	color: var(--ocean);
	font-size: var(--heading-size);
}

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

.show-hosts__text,
.show-hosts__text--bold {
	margin: 0;
	color: var(--ocean);
	font-size: var(--body-size);
}

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

.show-hosts__photo {
	flex: 1 1 0;
	min-width: 0;
	max-width: 650px;
	height: 434px;
	border-radius: 16px;
	object-fit: cover;
}

/*
 * player-dock (DECIDED in its pen note): stuck to the bottom of the screen from page load. It sits in
 * main after show-hosts and is pulled up into the bottom of that section, where the pen draws it.
 * The plugin owns everything inside player-pill; only the wrapper is styled.
 */
/* --dock-h: 124 as drawn; taller on phone, where the plugin stacks its controls under the title. */
:root {
	--dock-h: 124px;
}

.player-dock {
	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);
	margin-bottom: 50px;
	padding: 20px;
}

.player-pill {
	width: 808px;
	max-width: 100%;
	min-height: 84px;
	padding: 10px 20px;
	border-radius: 24px;
	background-color: color-mix(in srgb, var(--stone-tint)70%, transparent);
}

/* ---------- page-the-human-story@phone (hero-show--the-human-story@phone) ---------- */

@media (max-width: 999.98px) {
	.hero-show {
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		gap: 20px;
		height: 895px;
	}

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

	/* The phone hero is one column straight in the hero: logo, body, header. */
	.hero-show__bg-overlay,
	.hero-show__wrap,
	.hero-show__inner {
		display: contents;
	}

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

	.hero-show__photo {
		top: 105.9px;
		left: -216.848px;
		width: 817px;
		height: 748px;
	}

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

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

	.hero-show__photo::after {
		background: linear-gradient(-89.298deg, var(--stone-tint) 0.068%, #10242300 45.477%);
	}

	.hero-show__watermark {
		top: 0;
		left: -24px;
		width: 449px;
		height: 854px;
		background: linear-gradient(179.244deg, var(--stone-tint) 12.541%, #1b2e2d00 33.974%, #11252402 54.03%, var(--stone-tint) 82.04%);
	}

	.hero-show__logo {
		position: relative;
		width: 273px;
		height: 264px;
	}

	.hero-show__body {
		position: relative;
		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__excerpt p {
		font-size: 16px;
		font-weight: 500;
		line-height: 22px;
	}

	/* Short text + Read more; Read more expands to the full text (js/site.js adds is-open). */
	.hero-show__excerpt-text-short,
	.hero-show__read-more {
		display: block;
	}

	.hero-show__excerpt-text-full,
	.hero-show__excerpt.is-open .hero-show__excerpt-text-short,
	.hero-show__excerpt.is-open .hero-show__read-more {
		display: none;
	}

	.hero-show__excerpt.is-open .hero-show__excerpt-text-full {
		display: block;
	}

	.hero-show__body .btn-cta {
		width: 100%;
	}

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

	.hero-show__header {
		position: relative;
		height: 54px;
	}

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

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

	:root {
		--dock-h: 168px;
	}

	.show-hosts {
		padding: 50px 20px calc(50px + var(--dock-h));
	}

	.show-hosts__inner {
		flex-direction: column;
		gap: 30px;
		width: 100%;
	}

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

	.show-hosts__bio {
		width: 100%;
	}

	.show-hosts__photo {
		flex: none;
		width: 100%;
		max-width: none;
		height: 241px;
	}
}

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

@media (max-width: 999.98px) {
	body.page .page-hero + .wrap {
		padding: 30px 20px 70px;
	}

	.page-hero + .wrap > .wrap {
		padding: 0;
	}

	.about__hours-time {
		white-space: normal;
	}

	/* page-contact@phone: photo on top (full width, 420 tall), then practice and form; fields stacked. */
	.page-hero + .wrap:has(> .connect__col--l) {
		flex-direction: column;
		gap: 40px;
	}

	.connect__col--l {
		flex: none;
	}

	.connect__emblem {
		flex: none;
		height: 420px;
	}

	.connect__col--r {
		gap: 40px;
		max-width: none;
	}

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

.divider {
	display: block;
	width: 48px;
	height: 2px;
	margin: 0 0 20px;
}

.divider--light {
	background: var(--linen);
}

.divider--accent {
	background: var(--send-green);
}

/* Trio (text / photo / text) sections — Spiritual Psychology, Mindfulness */

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

.trio__text {
	background: var(--linen);
	padding: 72px 56px;
}

.trio__heading {
	font-family: 'Work Sans', sans-serif;
	font-weight: 300;
	font-size: 1.4rem;
	margin: 0 0 12px;
}

.trio__text p {
	font-size: 1.05rem;
	margin: 0 0 12px;
}

.trio__photo {
	background-size: cover;
	background-position: center;
	min-height: 400px;
}

/* Event / group session section — Spiritual Psychology */

.event {
	background: var(--forest);
	color: var(--linen);
	padding: 72px 0;
	text-align: center;
}

.event__heading {
	font-family: 'Work Sans', sans-serif;
	font-weight: 300;
	font-size: 1.5rem;
	margin: 0 0 4px;
}

.event .divider {
	margin-left: auto;
	margin-right: auto;
}

.event__intro {
	font-size: 1.05rem;
	margin: 0 0 32px;
}

.event__content {
	max-width: 640px;
	margin: 0 auto;
	text-align: left;
}

.event__subheading {
	font-family: 'Work Sans', sans-serif;
	font-weight: 300;
	font-size: 1.2rem;
	margin: 24px 0 8px;
}

.event__content p {
	font-size: 1rem;
	margin: 0 0 8px;
}

.event__content ul {
	margin: 0 0 8px;
	padding-left: 20px;
}

.event__content li {
	font-size: 1rem;
	padding: 2px 0;
}

.event__content a {
	color: var(--send-green);
}

/* Blog listing */

.blog-list {
	padding: 72px 0;
}

.blog-list__empty {
	background: var(--linen);
	padding: 48px;
	text-align: center;
	font-size: 1.1rem;
}

.blog-list__pagination {
	display: flex;
	gap: 16px;
	justify-content: center;
}

.blog-list__pagination a,
.blog-list__pagination span {
	color: var(--forest);
	font-family: 'Work Sans', sans-serif;
}

@media (max-width: 900px) {
	.trio {
		grid-template-columns: 1fr;
	}
}

/* WhatsApp floating button */

.whatsapp-float {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 56px;
	height: 56px;
	background: #25d366;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	z-index: 999;
}

/* Host Grotesk: anything heavier than 300 is 500. strong sits at the default bolder step; the Blubrry episode list is plugin markup, so only its weights are set here. */
.event__content strong,
.bsp-episode-list__title,
.bsp-episode-list__meta {
	font-weight: 500;
}