/**
 * Healthcare Empowered
 *
 * Colors, type scale and spacing presets live in theme.json. This file holds
 * the layout and component design that theme.json cannot express.
 *
 * 1.  Tokens and base
 * 2.  Header (topbar, masthead, navigation)
 * 3.  Hero
 * 4.  Issue contents box
 * 5.  Post cards and archives
 * 6.  Topic filters
 * 7.  Single post
 * 8.  Newsletter
 * 9.  Author card
 * 10. Footer
 * 11. Utilities, responsive, print
 */

/* ------------------------------------------------------------------ *
 * 1. Tokens and base
 * ------------------------------------------------------------------ */

:root {
	--he-mulberry: var( --wp--preset--color--mulberry, #660033 );
	--he-mulberry-dark: var( --wp--preset--color--mulberry-dark, #4a0025 );
	--he-poppy: var( --wp--preset--color--poppy, #ff4500 );
	/* Deeper poppy for anything that is TEXT or carries text (buttons, chips).
	   Brand poppy #ff4500 only reaches 3.4:1 on white, which fails WCAG AA for
	   the small uppercase labels this design uses. #cf3800 is the same hue at
	   4.98:1. Pure #ff4500 is still used for rules, underlines and borders,
	   where no contrast minimum applies. */
	--he-poppy-text: var( --wp--preset--color--poppy-deep, #cf3800 );
	--he-periwinkle: var( --wp--preset--color--periwinkle, #a6b0ed );
	--he-periwinkle-light: var( --wp--preset--color--periwinkle-light, #f3f4fb );
	--he-ink: var( --wp--preset--color--contrast, #1a1418 );
	--he-muted: var( --wp--preset--color--muted, #5b545a );
	--he-hairline: var( --wp--preset--color--hairline, #e6e1e3 );
	--he-surface: var( --wp--preset--color--surface, #faf7f8 );
	--he-sans: var( --wp--preset--font-family--sans, Inter, sans-serif );
	--he-serif: var( --wp--preset--font-family--serif, Georgia, serif );
	--he-measure: 46rem;
	--he-eyebrow-tracking: 0.2em;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Consistent focus ring across the theme. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-navigation a:focus-visible {
	outline: 3px solid var( --he-poppy );
	outline-offset: 2px;
}

.he-eyebrow,
.he-contents__title,
.he-topics__label,
.he-card__meta,
.he-reading-time {
	font-family: var( --he-sans );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var( --he-eyebrow-tracking );
	text-transform: uppercase;
	line-height: 1.4;
}

.he-eyebrow {
	margin: 0;
}

/* Bands stack flush against one another. Every section carries its own
   padding, so WordPress's root block gap would only insert stray white strips
   between the navigation, the hero, the topic band and the card grid. These
   selectors outrank core's :where()-wrapped layout rules. */
body .wp-site-blocks > *,
.he-header.wp-block-group > *,
.he-site-footer.wp-block-group > *,
main.wp-block-group > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Sections that should bleed to the window edge but keep inner alignment. */
.he-band {
	padding-left: var( --wp--style--root--padding-left, 1.5rem );
	padding-right: var( --wp--style--root--padding-right, 1.5rem );
}

/* ------------------------------------------------------------------ *
 * 2. Header
 * ------------------------------------------------------------------ */

.he-topbar {
	background-color: var( --he-mulberry-dark );
	color: #e8d7e0;
}

.he-topbar .he-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 2.25rem;
	flex-wrap: wrap;
}

.he-topbar p {
	margin: 0;
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.he-topbar a {
	color: var( --he-periwinkle );
	text-decoration: none;
}

.he-topbar a:hover {
	color: #fff;
	text-decoration: underline;
}

.he-masthead {
	background-color: #fff;
}

.he-masthead__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

/* Let the Site Logo block's own width setting govern (Site Editor > header >
   logo > width). Setting width here would override the block's HTML width
   attribute and shrink the logo to whatever max-height allowed. */
.he-masthead .wp-block-site-logo img,
.he-masthead .he-logo img {
	height: auto;
	max-width: 100%;
}

@media ( max-width: 600px ) {
	.he-masthead .wp-block-site-logo img,
	.he-masthead .he-logo img {
		width: 200px;
	}

	/* The actions row is set to nowrap by the block, which pushes the search
	   field and the newsletter button past the right edge on a phone. Let it
	   wrap onto its own line instead. Scoped tighter than core's .is-nowrap so
	   it wins without !important, and driven from CSS rather than the template
	   so it still applies to a header customised in the Site Editor. */
	.he-masthead .he-masthead__inner {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.85rem;
	}

	.he-masthead .he-masthead__actions {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.75rem;
		width: 100%;
	}

	.he-masthead .wp-block-search {
		flex: 1 1 12rem;
		max-width: 100%;
	}

	.he-masthead .wp-block-search__input {
		min-width: 0;
	}
}

.he-masthead__actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.he-masthead .wp-block-search__inside-wrapper {
	border: 1px solid var( --he-hairline );
}

.he-masthead .wp-block-search__input {
	border: 0;
	padding: 0.6rem 0.75rem;
	font-size: 0.875rem;
	min-width: 9rem;
}

.he-masthead .wp-block-search__button {
	background-color: var( --he-mulberry );
	color: #fff;
	border: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.6rem 1rem;
}

.he-nav {
	background-color: var( --he-mulberry );
}

.he-nav .wp-block-navigation {
	--wp--style--block-gap: 2.1rem;
	color: #fff;
}

.he-nav .wp-block-navigation .wp-block-navigation-item__content {
	color: #fff;
	text-decoration: none;
	padding-top: 1rem;
	padding-bottom: 1rem;
	border-bottom: 3px solid transparent;
	transition: border-color 0.15s ease;
}

.he-nav .wp-block-navigation .wp-block-navigation-item__content:hover,
.he-nav .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var( --he-poppy );
	color: #fff;
}

.he-nav .wp-block-navigation__responsive-container-open,
.he-nav .wp-block-navigation__responsive-container-close {
	color: #fff;
}

.he-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var( --he-mulberry );
	color: #fff;
	padding-top: 4rem;
}

.he-nav .wp-block-navigation__responsive-container.is-menu-open a {
	border-bottom: 0;
	font-size: 1.1rem;
}

/* ------------------------------------------------------------------ *
 * 3. Hero
 * ------------------------------------------------------------------ */

.he-hero {
	background-color: var( --he-mulberry );
	color: #fff;
	position: relative;
	overflow: hidden;
}

.he-hero::before,
.he-hero::after {
	content: "";
	position: absolute;
	pointer-events: none;
	opacity: 0.13;
}

/* The brand mark sits fully inside the hero: 3.5rem of clearance below the
   navigation bar and the same at the bottom, so it is never clipped at the top
   however tall the hero grows. */
.he-hero::before {
	width: 20rem;
	height: calc( 100% - 7rem );
	max-height: 24rem;
	right: 6rem;
	top: 3.5rem;
	background: var( --he-poppy );
	border-radius: 50% 0 0 50%;
}

.he-hero::after {
	width: 7rem;
	height: calc( 100% - 7rem );
	max-height: 24rem;
	right: -1rem;
	top: 3.5rem;
	background: var( --he-periwinkle );
}

.he-hero > * {
	position: relative;
	z-index: 2;
}

.he-hero .he-eyebrow,
.he-hero .wp-block-post-date,
.he-hero .wp-block-post-date a {
	color: var( --he-periwinkle );
	text-decoration: none;
}

.he-hero .wp-block-post-title,
.he-hero .wp-block-post-title a {
	color: #fff;
	text-decoration: none;
}

.he-hero .wp-block-post-title {
	font-size: clamp( 2rem, 1.3rem + 2.6vw, 3rem );
	line-height: 1.08;
	margin: 0.75rem 0 1.1rem;
}

.he-hero .wp-block-post-title a:hover {
	color: var( --he-periwinkle );
}

.he-hero .wp-block-post-excerpt,
.he-hero .wp-block-post-excerpt__excerpt {
	color: #ecdfe6;
	font-family: var( --he-serif );
	font-size: 1.0625rem;
	line-height: 1.65;
	max-width: 52ch;
}

.he-hero .wp-block-read-more {
	display: inline-block;
	margin-top: 1.5rem;
	background-color: var( --he-poppy-text );
	color: #fff;
	text-decoration: none;
	font-family: var( --he-sans );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 1rem 1.6rem;
	transition: background-color 0.15s ease;
}

.he-hero .wp-block-read-more:hover {
	background-color: #fff;
	color: var( --he-mulberry );
}

.he-hero .he-reading-time {
	color: var( --he-periwinkle );
}

/* ------------------------------------------------------------------ *
 * 4. Issue contents box
 * ------------------------------------------------------------------ */

.he-contents {
	margin: 0;
}

.he-contents__title {
	margin: 0 0 1rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var( --he-eyebrow-tracking );
	text-transform: uppercase;
}

.he-contents__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.he-contents__item {
	margin: 0;
	padding: 0.65rem 0;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.he-contents__item + .he-contents__item {
	border-top: 1px solid;
}

.he-contents__link {
	text-decoration: none;
}

.he-contents__link:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.he-contents__summary {
	font-family: var( --he-serif );
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0 0 1rem;
}

.he-contents__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.he-contents__chip {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.4rem 0.7rem;
}

.he-contents__empty {
	font-size: 0.9375rem;
	font-style: italic;
	margin: 0;
	opacity: 0.75;
}

/* Dark variant — sits on the mulberry hero. */
.he-contents--dark {
	border: 1px solid rgba( 166, 176, 237, 0.42 );
	padding: 1.6rem 1.5rem;
	color: #f2e9ee;
}

.he-contents--dark .he-contents__title {
	color: var( --he-periwinkle );
}

.he-contents--dark .he-contents__item + .he-contents__item {
	border-top-color: rgba( 166, 176, 237, 0.26 );
}

.he-contents--dark .he-contents__link {
	color: #f2e9ee;
}

.he-contents--dark .he-contents__link:hover {
	color: #fff;
}

.he-contents--dark .he-contents__chip {
	background: rgba( 255, 255, 255, 0.12 );
	color: #fff;
}

/* Light variant — sits on white, above the post body. */
.he-contents--light {
	border-left: 3px solid var( --he-periwinkle );
	background: var( --he-periwinkle-light );
	padding: 1.5rem 1.6rem;
}

.he-contents--light .he-contents__title {
	color: var( --he-mulberry );
}

.he-contents--light .he-contents__item + .he-contents__item {
	border-top-color: #dfe2f3;
}

.he-contents--light .he-contents__link {
	color: var( --he-ink );
}

.he-contents--light .he-contents__link:hover {
	color: var( --he-poppy-text );
}

.he-contents--light .he-contents__chip {
	background: #fff;
	color: var( --he-mulberry );
}

/* Two columns of links once there is room. */
@media ( min-width: 48em ) {
	.he-contents--light .he-contents__list {
		column-count: 2;
		column-gap: 2.5rem;
	}

	.he-contents--light .he-contents__item {
		break-inside: avoid;
	}

	.he-contents--light .he-contents__item + .he-contents__item {
		border-top: 0;
	}
}

/* ------------------------------------------------------------------ *
 * 5. Post cards and archives
 * ------------------------------------------------------------------ */

.he-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	border-top: 3px solid var( --he-poppy );
	padding-top: 1.1rem;
	margin-bottom: 2rem;
}

.he-section-head h2,
.he-section-head .wp-block-heading {
	margin: 0;
	font-size: 1.625rem;
	letter-spacing: -0.015em;
	color: var( --he-mulberry );
}

.he-section-head p {
	margin: 0;
}

.he-section-head a {
	color: var( --he-poppy-text );
	text-decoration: none;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.he-section-head a:hover {
	text-decoration: underline;
}

.he-cards .wp-block-post-template {
	gap: 1.6rem;
}

.he-card {
	background: #fff;
	border: 1px solid var( --he-hairline );
	padding: 1.75rem 1.6rem 1.85rem;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.he-card:hover {
	box-shadow: 0 10px 30px rgba( 102, 0, 51, 0.1 );
	transform: translateY( -3px );
}

.he-card .wp-block-post-terms {
	align-self: flex-start;
	background: #fff1ec;
	color: var( --he-poppy-text );
	padding: 0.35rem 0.6rem;
	margin-bottom: 0.9rem;
}

.he-card .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

.he-card .wp-block-post-title {
	font-size: 1.1875rem;
	line-height: 1.28;
	margin: 0 0 0.7rem;
}

.he-card .wp-block-post-title a {
	color: var( --he-mulberry );
	text-decoration: none;
}

.he-card .wp-block-post-title a:hover {
	color: var( --he-poppy-text );
}

.he-card .wp-block-post-excerpt {
	margin: 0 0 1.1rem;
}

.he-card .wp-block-post-excerpt__excerpt {
	font-size: 0.9375rem;
	line-height: 1.6;
}

.he-card .wp-block-post-excerpt__more-text {
	display: none;
}

.he-card__meta {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	color: #6f666c;
}

.he-card__meta .wp-block-post-date,
.he-card__meta .he-reading-time {
	color: #6f666c;
	font-size: 0.6875rem;
}

.he-card__meta .wp-block-post-date a {
	color: inherit;
	text-decoration: none;
}

.he-card__meta .he-sep {
	opacity: 0.6;
}

/* Pagination */
.wp-block-query-pagination {
	margin-top: 3rem;
	gap: 0.5rem;
	font-family: var( --he-sans );
	font-size: 0.8125rem;
	font-weight: 600;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	text-decoration: none;
	color: var( --he-mulberry );
	padding: 0.5rem 0.8rem;
	border: 1px solid var( --he-hairline );
}

.wp-block-query-pagination .current {
	background: var( --he-mulberry );
	border-color: var( --he-mulberry );
	color: #fff;
}

.wp-block-query-pagination a:hover {
	border-color: var( --he-poppy );
	color: var( --he-poppy-text );
}

.wp-block-query-no-results {
	font-family: var( --he-serif );
	color: var( --he-muted );
}

/* Archive / search page heading band */
.he-page-head {
	background: var( --he-mulberry );
	color: #fff;
}

.he-page-head .wp-block-query-title,
.he-page-head .wp-block-heading,
.he-page-head h1 {
	color: #fff;
	margin: 0;
}

.he-page-head .he-eyebrow {
	color: var( --he-periwinkle );
	margin-bottom: 0.6rem;
}

.he-page-head .wp-block-term-description p {
	color: #ecdfe6;
	font-family: var( --he-serif );
	max-width: 54ch;
}

/* ------------------------------------------------------------------ *
 * 6. Topic filters
 * ------------------------------------------------------------------ */

.he-topics {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	flex-wrap: wrap;
}

/* The periwinkle ground comes from the wrapping group so the chips stay
   inside the 1120px measure instead of running the full window width. */
.he-topics-band {
	background: var( --he-periwinkle );
}

.he-topics__label {
	color: var( --he-mulberry-dark );
	margin-right: 0.25rem;
}

.he-topics__chips {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.he-topics__chip {
	font-family: var( --he-sans );
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	padding: 0.5rem 1rem;
	border-radius: 100px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.he-topics--band .he-topics__chip {
	background: rgba( 255, 255, 255, 0.78 );
	color: var( --he-mulberry );
}

.he-topics--band .he-topics__chip:hover {
	background: #fff;
	color: var( --he-poppy-text );
}

.he-topics--plain .he-topics__chip {
	background: var( --he-surface );
	color: var( --he-mulberry );
	border: 1px solid var( --he-hairline );
}

.he-topics--plain .he-topics__chip:hover {
	border-color: var( --he-poppy );
	color: var( --he-poppy-text );
}

/* ------------------------------------------------------------------ *
 * 7. Single post
 * ------------------------------------------------------------------ */

.he-post-head {
	background: var( --he-mulberry );
	color: #fff;
}

.he-post-head .wp-block-post-title {
	color: #fff;
	margin: 0.75rem 0 1rem;
	max-width: 22ch;
}

.he-post-head .he-eyebrow,
.he-post-head .wp-block-post-date,
.he-post-head .wp-block-post-author-name,
.he-post-head .wp-block-post-author-name a,
.he-post-head .he-reading-time {
	color: var( --he-periwinkle );
}

.he-post-head .wp-block-post-terms a {
	color: var( --he-periwinkle );
	text-decoration: none;
}

.he-post-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	font-family: var( --he-sans );
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.he-post-meta .he-sep {
	opacity: 0.5;
}

/* Reading measure for post and page bodies. */
.he-entry.wp-block-post-content > *:not( .alignwide ):not( .alignfull ) {
	max-width: var( --he-measure );
	margin-left: auto;
	margin-right: auto;
}

.he-entry p,
.he-entry li,
.he-entry blockquote p,
.he-entry dd {
	font-family: var( --he-serif );
	font-size: 1.125rem;
	line-height: 1.75;
	color: #2a2328;
}

.he-entry p {
	margin-top: 0;
	margin-bottom: 1.4rem;
}

/* Section headings, matched to the card section heads. */
.he-entry h2 {
	margin-top: 3.25rem;
	margin-bottom: 1.4rem;
	padding-top: 1.1rem;
	border-top: 3px solid var( --he-poppy );
	font-size: clamp( 1.5rem, 1.2rem + 0.9vw, 1.875rem );
	color: var( --he-mulberry );
	scroll-margin-top: 5rem;
}

.he-entry h3 {
	margin-top: 2.25rem;
	margin-bottom: 0.9rem;
	scroll-margin-top: 5rem;
}

.he-entry ul,
.he-entry ol {
	padding-left: 1.15rem;
}

.he-entry li {
	margin-bottom: 1.5rem;
	padding-left: 0.35rem;
}

.he-entry li::marker {
	color: var( --he-periwinkle );
}

/* Bold, linked lead-in sentence that opens each item. */
.he-entry li > strong:first-child,
.he-entry li > p > strong:first-child {
	font-weight: 600;
}

/* Links read by colour alone at rest, per Wade. The underline returns on
   hover and on keyboard focus so there is still a non-colour cue. */
.he-entry a {
	color: var( --he-mulberry );
	text-decoration: none;
	text-decoration-color: var( --he-poppy );
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
	transition: color 0.12s ease;
}

.he-entry a:hover,
.he-entry a:focus-visible {
	color: var( --he-poppy-text );
	text-decoration: underline;
}

.he-entry blockquote {
	border-left: 3px solid var( --he-periwinkle );
	padding-left: 1.4rem;
	margin-left: 0;
	color: var( --he-muted );
}

.he-entry figure,
.he-entry .wp-block-image {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.he-entry hr,
.he-entry .wp-block-separator {
	border: 0;
	border-top: 1px solid var( --he-hairline );
	margin: 2.5rem auto;
}

.he-post-nav {
	border-top: 1px solid var( --he-hairline );
	padding-top: 1.5rem;
}

.he-post-nav .wp-block-post-navigation-link {
	font-family: var( --he-sans );
	font-size: 0.875rem;
	font-weight: 600;
}

.he-post-nav a {
	color: var( --he-mulberry );
	text-decoration: none;
}

.he-post-nav a:hover {
	color: var( --he-poppy-text );
	text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * 8. Newsletter
 * ------------------------------------------------------------------ */

.he-newsletter {
	background: var( --he-mulberry-dark );
	color: #fff;
}

.he-newsletter .wp-block-heading {
	color: #fff;
	margin: 0 0 0.6rem;
}

.he-newsletter p {
	color: #e2d2db;
	font-family: var( --he-serif );
	margin: 0;
	max-width: 46ch;
}

.he-newsletter .he-eyebrow {
	color: var( --he-periwinkle );
	margin-bottom: 0.7rem;
}

.he-newsletter .wp-block-button__link {
	background: var( --he-poppy-text );
	color: #fff;
}

.he-newsletter .wp-block-button__link:hover {
	background: #fff;
	color: var( --he-mulberry );
}

/* Kit / ConvertKit embeds dropped into the block. */
.he-newsletter .formkit-form,
.he-newsletter .seva-form {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	max-width: none !important;
}

.he-newsletter .formkit-input {
	border: 0;
	padding: 1rem;
	font-family: var( --he-sans );
}

.he-newsletter .formkit-submit {
	background: var( --he-poppy-text ) !important;
	border-radius: 0 !important;
}

/* Light variant for use inside the post flow. */
.he-newsletter--light {
	background: var( --he-periwinkle-light );
	border-top: 1px solid #e3e5f4;
	color: var( --he-ink );
}

.he-newsletter--light .wp-block-heading {
	color: var( --he-mulberry );
}

.he-newsletter--light p {
	color: #463f43;
}

.he-newsletter--light .he-eyebrow {
	color: var( --he-poppy-text );
}

/* ------------------------------------------------------------------ *
 * 9. Author card
 * ------------------------------------------------------------------ */

.he-author {
	background: var( --he-surface );
	border-top: 3px solid var( --he-mulberry );
	padding: 2rem 1.75rem;
}

.he-author__inner {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	flex-wrap: wrap;
}

.he-author .wp-block-avatar img,
.he-author__avatar img {
	border-radius: 50%;
	width: 88px;
	height: 88px;
	object-fit: cover;
	border: 3px solid #fff;
	box-shadow: 0 2px 10px rgba( 102, 0, 51, 0.12 );
}

.he-author__body {
	flex: 1 1 18rem;
}

.he-author__body .he-eyebrow {
	color: var( --he-poppy-text );
	margin-bottom: 0.45rem;
}

.he-author__body .wp-block-heading,
.he-author__body h2,
.he-author__body h3 {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	color: var( --he-mulberry );
}

.he-author__body p {
	font-family: var( --he-serif );
	font-size: 1rem;
	line-height: 1.65;
	color: var( --he-muted );
	margin: 0 0 0.9rem;
}

.he-author__links {
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
	font-family: var( --he-sans );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.he-author__links a {
	color: var( --he-mulberry );
	text-decoration: none;
	border-bottom: 2px solid var( --he-poppy );
	padding-bottom: 2px;
}

.he-author__links a:hover {
	color: var( --he-poppy-text );
}

/* ------------------------------------------------------------------ *
 * 10. Footer
 * ------------------------------------------------------------------ */

.he-footer {
	background: var( --he-mulberry );
	color: #f0e4eb;
}

.he-footer .he-logo img,
.he-footer .wp-block-image img {
	max-height: 2.5rem;
	width: auto;
	height: auto;
}

.he-footer p {
	color: #dcc9d5;
	font-size: 0.85rem;
	line-height: 1.65;
	margin: 0;
	max-width: 34ch;
}

.he-footer .wp-block-heading,
.he-footer h2,
.he-footer h3 {
	color: var( --he-periwinkle );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: var( --he-eyebrow-tracking );
	text-transform: uppercase;
	margin: 0 0 0.9rem;
}

.he-footer a {
	color: #f0e4eb;
	text-decoration: none;
	font-size: 0.875rem;
}

.he-footer a:hover {
	color: var( --he-periwinkle );
	text-decoration: underline;
}

.he-footer ul,
.he-footer .wp-block-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.he-footer li {
	margin-bottom: 0.55rem;
}

.he-footer .wp-block-categories,
.he-footer .wp-block-page-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.he-footer__legal {
	border-top: 1px solid rgba( 166, 176, 237, 0.28 );
	padding-top: 1.35rem;
	margin-top: 2.25rem;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.he-footer__legal p {
	font-size: 0.72rem;
	color: #c2a9b8;
	max-width: none;
}

/* ------------------------------------------------------------------ *
 * 11. Utilities, responsive, print
 * ------------------------------------------------------------------ */

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

.skip-link:focus {
	background-color: #fff;
	color: var( --he-mulberry );
	display: block;
	font-family: var( --he-sans );
	font-size: 0.875rem;
	font-weight: 700;
	left: 1rem;
	padding: 1rem 1.5rem;
	position: fixed;
	top: 1rem;
	z-index: 100000;
}

@media ( max-width: 781px ) {
	.he-masthead__inner {
		flex-wrap: wrap;
		gap: 1rem;
	}

	.he-topbar .he-topbar__inner {
		justify-content: center;
		text-align: center;
	}

	.he-hero::before,
	.he-hero::after {
		display: none;
	}

	.he-footer__legal {
		flex-direction: column;
	}

	.he-entry li {
		margin-bottom: 1.25rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.he-card,
	.he-hero .wp-block-read-more,
	.he-topics__chip {
		transition: none;
	}

	.he-card:hover {
		transform: none;
	}
}

@media print {
	.he-topbar,
	.he-nav,
	.he-topics,
	.he-newsletter,
	.he-footer,
	.he-post-nav,
	.wp-block-query-pagination {
		display: none !important;
	}

	.he-post-head,
	.he-hero {
		background: none !important;
		color: #000 !important;
	}

	.he-post-head .wp-block-post-title {
		color: #000 !important;
	}

	.he-entry a {
		color: #000;
		text-decoration: underline;
	}
}

/* ------------------------------------------------------------------ *
 * 12. Component details added after the first pass
 * ------------------------------------------------------------------ */

/* Hero two-column layout collapses cleanly on narrow screens. */
.he-hero__cols {
	align-items: flex-start;
}

@media ( max-width: 781px ) {
	.he-hero__cols {
		gap: 2rem;
	}
}

.he-hero .he-post-meta,
.he-hero .he-post-meta .wp-block-post-date {
	color: var( --he-periwinkle );
}

.he-post-meta p,
.he-card__meta p {
	margin: 0;
}

.he-sep {
	margin: 0;
	opacity: 0.5;
	line-height: 1;
}

/* Newsletter block layout. */
.he-newsletter__inner {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 3.5rem;
	align-items: center;
}

.he-newsletter__form .wp-block-buttons {
	margin-bottom: 0.75rem;
}

.he-newsletter__note {
	font-family: var( --he-sans ) !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.06em;
	opacity: 0.75;
}

@media ( max-width: 781px ) {
	.he-newsletter__inner {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
}

/* Knockout logo in the mulberry footer, served from the theme's own assets. */
.he-footer__logo {
	width: min( 15rem, 70vw );
	height: 3.25rem;
	margin-bottom: 1.1rem;
	background-image: url( "../images/logo-white.png" );
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}

.he-footer .wp-block-columns {
	gap: 3rem;
}

@media ( max-width: 781px ) {
	.he-footer .wp-block-columns {
		gap: 2.25rem;
	}
}

/* Search form on the search results page. */
.he-search-again {
	max-width: 26rem;
	margin-top: 1.25rem;
}

.he-search-again .wp-block-search__inside-wrapper {
	border: 1px solid rgba( 255, 255, 255, 0.35 );
}

.he-search-again .wp-block-search__input {
	background: rgba( 255, 255, 255, 0.1 );
	border: 0;
	color: #fff;
	padding: 0.7rem 0.9rem;
}

.he-search-again .wp-block-search__input::placeholder {
	color: rgba( 255, 255, 255, 0.6 );
}

.he-search-again .wp-block-search__button {
	background: var( --he-poppy-text );
	color: #fff;
	border: 0;
}

/* Comments */
.he-comments .wp-block-comments-title,
.he-comments .comment-reply-title {
	font-size: 1.25rem;
	color: var( --he-mulberry );
}

.he-comments .wp-block-comment-content p {
	font-family: var( --he-serif );
	font-size: 1rem;
}

.he-comments .wp-block-comment-author-name a {
	color: var( --he-mulberry );
	text-decoration: none;
	font-weight: 600;
}

.he-comments .wp-block-comment-date {
	font-size: 0.75rem;
	color: var( --he-muted );
}

.he-comments input[type="text"],
.he-comments input[type="email"],
.he-comments input[type="url"],
.he-comments textarea {
	border: 1px solid var( --he-hairline );
	padding: 0.7rem 0.85rem;
	font-family: var( --he-sans );
	width: 100%;
}

.he-comments .form-submit input[type="submit"] {
	background: var( --he-poppy-text );
	color: #fff;
	border: 0;
	font-family: var( --he-sans );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 1rem 1.6rem;
	cursor: pointer;
}

/* Editor canvas: give the dynamic blocks room to breathe. */
.he-ssr-preview > div {
	min-height: 1px;
}

/* ------------------------------------------------------------------ *
 * 13. Two-column homepage: roundups left, everything else right
 * ------------------------------------------------------------------ */

/* Both columns are 50% and the gap is zero, with the divider sitting between
   matching paddings. Putting the space inside the columns rather than in a
   flex gap means each column's content area is genuinely the same width, so
   titles wrap identically on both sides. */
.he-columns__inner {
	align-items: flex-start;
	gap: 0;
}

.he-columns__main {
	padding-right: 2.5rem;
}

/* Section heads sit in narrower columns, so the type steps down and long
   headings wrap on two lines without crowding the orange rule. */
.he-section-head--column h2,
.he-section-head--column .wp-block-heading {
	font-size: 1.25rem;
	line-height: 1.25;
	max-width: 22ch;
}

/* Cards stack vertically inside a column rather than sitting in a grid. */
.he-cardlist .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.he-cardlist .wp-block-post-template > li {
	margin: 0;
}

.he-cardlist .he-card {
	height: auto;
}

/* Rows line up across the two columns. Three things have to match for that to
   hold: the section heads must occupy the same height even though one wraps to
   two lines and the other does not, the gap between cards must be identical,
   and every card must be the same height regardless of how long its title and
   excerpt happen to be. Titles and excerpts are clamped to a fixed number of
   lines so a wordy post cannot push its card taller than the rest. */
.he-section-head--column {
	min-height: 4.5rem;
	align-items: flex-start;
}

.he-columns .he-card {
	/* The clamps bound the worst case at a three-line title plus a two-line
	   excerpt, which comes to roughly 273px at every column width the layout
	   uses. One floor above that covers all of them, so no per-breakpoint
	   tuning is needed and a long title can never break the alignment. */
	min-height: 17.5rem;
}

/* Keep a long category name on one line so it cannot add height either. */
.he-columns .he-card .wp-block-post-terms {
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Line limiting is done with max-height rather than -webkit-line-clamp. The
   title and excerpt are flex items inside the card, and a flex item has its
   display blockified: -webkit-box becomes flow-root, which silently disables
   clamping. A max-height expressed in em multiples of the element's own
   line-height is exact, and works the same in every browser. */
.he-columns .he-card .wp-block-post-title {
	line-height: 1.28;
	max-height: 3.84em; /* 3 lines */
	overflow: hidden;
}

.he-columns .he-card .wp-block-post-excerpt__excerpt {
	line-height: 1.6;
	max-height: 3.2em; /* 2 lines */
	overflow: hidden;
}

/* The right column has no reading time, so its meta row is shorter. Pinning
   the meta to the bottom of the card keeps both baselines level. */
.he-columns .he-card__meta {
	margin-top: auto;
	padding-top: 0.5rem;
}

/* Below the breakpoint the columns stack, so cards can size to content again. */
@media ( max-width: 781px ) {
	.he-section-head--column {
		min-height: 0;
	}

	.he-columns .he-card {
		min-height: 0;
	}
}

.he-columns .wp-block-query-pagination {
	margin-top: 1.75rem;
}

/* Aside gets a hairline on wide screens to separate the two streams. */
@media ( min-width: 782px ) {
	.he-columns__aside {
		border-left: 1px solid var( --he-hairline );
		padding-left: 2.5rem;
	}
}

@media ( max-width: 781px ) {
	.he-columns__inner {
		gap: 2.75rem;
	}

	.he-columns__main {
		padding-right: 0;
	}
}

@media ( max-width: 781px ) {
	.he-columns__inner {
		gap: 2.75rem;
	}

	.he-columns__aside {
		border-top: 1px solid var( --he-hairline );
		padding-top: 2.25rem;
	}
}