/*
 * Theme-state and responsive component variants intentionally follow
 * their base rules.
 */

/* stylelint-disable no-descending-specificity */

:root {
	--chrnx-bg: #0d1117;
	--chrnx-surface: #151b23;
	--chrnx-surface-raised: #1b222c;
	--chrnx-text: #e6edf3;
	--chrnx-muted: #a1acb8;
	--chrnx-line: rgb(139 148 158 / 28%);
	--chrnx-accent: #7c6cf0;
	--chrnx-accent-soft: rgb(124 108 240 / 16%);
	--chrnx-green: #69c795;
	--chrnx-link: #a99df8;
	--chrnx-shadow: 0 1.5rem 4rem rgb(0 0 0 / 24%);
	--chrnx-radius: 1.25rem;
}

html[data-theme="light"] {
	--chrnx-bg: #f6f2e9;
	--chrnx-surface: #fffdf7;
	--chrnx-surface-raised: #fff;
	--chrnx-text: #25221f;
	--chrnx-muted: #625c54;
	--chrnx-line: rgb(70 61 51 / 18%);
	--chrnx-accent: #674ca4;
	--chrnx-accent-soft: rgb(103 76 164 / 12%);
	--chrnx-green: #327854;
	--chrnx-link: #60408e;
	--chrnx-shadow: 0 1.5rem 4rem rgb(70 61 51 / 12%);
}

@media (prefers-color-scheme: light) {

	:root:not([data-theme]) {
		--chrnx-bg: #f6f2e9;
		--chrnx-surface: #fffdf7;
		--chrnx-surface-raised: #fff;
		--chrnx-text: #25221f;
		--chrnx-muted: #625c54;
		--chrnx-line: rgb(70 61 51 / 18%);
		--chrnx-accent: #674ca4;
		--chrnx-accent-soft: rgb(103 76 164 / 12%);
		--chrnx-green: #327854;
		--chrnx-link: #60408e;
		--chrnx-shadow: 0 1.5rem 4rem rgb(70 61 51 / 12%);
	}
}

body,
html[data-theme="dark"] body,
html[data-theme="light"] body,
:root:not([data-theme]) body {
	background-color: var(--chrnx-bg);
	background-image:
		radial-gradient(circle at 90% 6%, color-mix(in srgb, var(--chrnx-accent) 16%, transparent), transparent 34rem),
		radial-gradient(circle at 8% 42%, color-mix(in srgb, var(--chrnx-green) 8%, transparent), transparent 30rem),
		linear-gradient(165deg, color-mix(in srgb, var(--chrnx-surface) 22%, transparent), transparent 42%, color-mix(in srgb, var(--chrnx-accent) 5%, transparent));
	background-position: center top, center 36rem, center;
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-size: 100% 48rem, 100% 54rem, 100% 100%;
	color: var(--chrnx-text);
}

.wp-site-blocks {
	overflow: clip;
}

.wp-site-blocks > main {
	margin-block-start: 0;
}

main a,
footer a {
	color: var(--chrnx-link);
	text-underline-offset: 0.2em;
	text-decoration-thickness: 0.08em;
}

.chrnx-primary-navigation a,
.chrnx-footer-navigation a {
	position: relative;
	color: var(--chrnx-muted);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.035em;
	text-decoration: none;
}

.chrnx-primary-navigation a::after,
.chrnx-footer-navigation a::after {
	position: absolute;
	right: 0.55rem;
	bottom: 0.3rem;
	left: 0.55rem;
	height: 2px;
	border-radius: 999px;
	background: currentcolor;
	content: "";
	opacity: 0;
	transform: scaleX(0.35);
	transform-origin: center;
}

.chrnx-primary-navigation a:hover,
.chrnx-primary-navigation a:focus-visible,
.chrnx-primary-navigation a[aria-current="page"],
.chrnx-footer-navigation a:hover,
.chrnx-footer-navigation a:focus-visible,
.chrnx-footer-navigation a[aria-current="page"] {
	color: var(--chrnx-green);
	text-decoration: none;
}

.chrnx-primary-navigation a:hover::after,
.chrnx-primary-navigation a:focus-visible::after,
.chrnx-primary-navigation a[aria-current="page"]::after,
.chrnx-footer-navigation a:hover::after,
.chrnx-footer-navigation a:focus-visible::after,
.chrnx-footer-navigation a[aria-current="page"]::after {
	opacity: 1;
	transform: scaleX(1);
}

.chrnx-site-footer__site {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.2;
}

.chrnx-site-footer__site a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 45px;
	color: var(--chrnx-text);
	text-decoration: none;
}

.chrnx-site-footer__site a::after {
	position: absolute;
	right: 0.1rem;
	bottom: 0.2rem;
	left: 0.1rem;
	height: 2px;
	border-radius: 999px;
	background: currentcolor;
	content: "";
	opacity: 0;
	transform: scaleX(0.35);
	transform-origin: center;
}

.chrnx-site-footer__site a:hover,
.chrnx-site-footer__site a:focus-visible {
	color: var(--chrnx-green);
	text-decoration: none;
}

.chrnx-site-footer__site a:hover::after,
.chrnx-site-footer__site a:focus-visible::after {
	opacity: 1;
	transform: scaleX(1);
}

.chrnx-site-footer__credit,
.chrnx-site-footer__line {
	color: var(--chrnx-muted);
	font-family: var(--wp--preset--font-family--metadata);
}

.wp-site-blocks h1,
.wp-site-blocks h2,
.wp-site-blocks h3,
.wp-site-blocks h4 {
	color: var(--chrnx-text);
	text-wrap: balance;
}

.wp-site-blocks p,
.wp-site-blocks li {
	text-wrap: pretty;
}

.chrnx-home > section,
.chrnx-home > .wp-block-group,
.chrnx-home > .wp-block-chrnx-featured-stories,
.chrnx-home > .wp-block-chrnx-journal-stream,
.chrnx-home > .wp-block-chrnx-latest-podcast {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-block: clamp(3.5rem, 7vw, 7rem);
}

.chrnx-home > * + * {
	border-top: 1px solid var(--chrnx-line);
}

.chrnx-home > .chrnx-home-intro {
	position: relative;
	display: grid;
	box-sizing: border-box;
	min-height: min(64vh, 42rem);
	align-content: center;
	padding-block: clamp(3rem, 5vh, 4rem);
	padding-right: clamp(0rem, 12vw, 9rem);
}

.chrnx-home-intro::before {
	display: block;
	margin-bottom: 1.25rem;
	color: var(--chrnx-green);
	content: "CHR/NX · NIGHT WORKSHOP";
	font-family: var(--wp--preset--font-family--metadata);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
}

.chrnx-home-intro::after {
	position: absolute;
	right: 2%;
	bottom: 14%;
	width: clamp(5rem, 11vw, 8.5rem);
	aspect-ratio: 1;
	border: 1px solid var(--chrnx-line);
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.25rem var(--chrnx-accent-soft);
	content: "";
}

.chrnx-home-intro h1 {
	max-width: 18ch;
	margin: 0;
	font-size: clamp(2.35rem, 1.75rem + 2.8vw, 4.25rem);
	line-height: 1.08;
	letter-spacing: -0.035em;
}

.chrnx-home-intro p {
	max-width: 58ch;
	margin-top: 1.25rem;
	color: var(--chrnx-muted);
	font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.5rem);
}

.chrnx-featured-stories > h2,
.chrnx-journal-stream > h2,
.chrnx-home-projects h2,
.chrnx-home-music h2,
.chrnx-home-about-preview h2 {
	font-size: var(--wp--preset--font-size--x-large);
}

.chrnx-featured-stories__grid {
	align-items: stretch;
	margin-top: 2rem;
}

.chrnx-featured-story,
.chrnx-journal-card,
.chrnx-podcast-card,
.chrnx-related-card,
.chrnx-release-card {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--chrnx-line);
	border-radius: var(--chrnx-radius);
	background: color-mix(in srgb, var(--chrnx-surface) 92%, transparent);
	box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 8%);
}

.chrnx-featured-story__link,
.chrnx-journal-card__link,
.chrnx-podcast-card__link,
.chrnx-related-card__link {
	color: inherit;
	text-decoration: none;
}

.chrnx-featured-story__link:hover,
.chrnx-journal-card__link:hover,
.chrnx-podcast-card__link:hover,
.chrnx-related-card__link:hover {
	color: inherit;
}

.chrnx-featured-story__content,
.chrnx-journal-card__content,
.chrnx-podcast-card__content,
.chrnx-related-card__content {
	display: grid;
	gap: 0.75rem;
	padding: clamp(1.25rem, 2.5vw, 2rem);
}

.chrnx-featured-story__badge,
.chrnx-journal-card__badge,
.chrnx-podcast-card__badge,
.chrnx-related-card__badge,
.chrnx-page-kicker {
	color: var(--chrnx-green);
	font-family: var(--wp--preset--font-family--metadata);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/*
 * Break an unbroken token so it cannot widen the card, but never clip:
 * card titles stay fully readable by contract.
 */
.chrnx-featured-story__title,
.chrnx-journal-card__title,
.chrnx-podcast-card__title,
.chrnx-related-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	word-break: normal;
	overflow-wrap: anywhere;
}

.chrnx-featured-story__excerpt,
.chrnx-journal-card__excerpt,
.chrnx-podcast-card__excerpt,
.chrnx-related-card__excerpt {
	color: var(--chrnx-muted);
	word-break: normal;
	overflow-wrap: anywhere;
}

/* The placeholder ships as a <picture>, so the wrapper must fill the slot. */
.chrnx-featured-story__link > .chrnx-responsive-portrait,
.chrnx-journal-card__link > .chrnx-responsive-portrait,
.chrnx-podcast-card__link > .chrnx-responsive-portrait,
.chrnx-related-card__link > .chrnx-responsive-portrait,
.chrnx-release-card__art > .chrnx-responsive-portrait,
.chrnx-release-detail__art > .chrnx-responsive-portrait {
	display: block;
	width: 100%;
	height: 100%;
}

.chrnx-featured-story__fallback,
.chrnx-journal-card__fallback,
.chrnx-related-card__fallback {
	background-color: var(--chrnx-surface-raised);
	background-image:
		linear-gradient(145deg, transparent 0 48%, color-mix(in srgb, var(--chrnx-green) 35%, transparent) 49% 51%, transparent 52%),
		radial-gradient(circle at 76% 24%, var(--chrnx-accent-soft) 0 14%, transparent 15%);
}

/*
 * The placeholder sits at half opacity over the per-topic gradient, so a grid
 * of missing images still varies by topic instead of repeating one bright
 * wedge. Its dark corner is favoured in narrow card slots.
 */
.chrnx-featured-story__fallback,
.chrnx-journal-card__fallback,
.chrnx-podcast-card__fallback,
.chrnx-related-card__fallback {
	background-color: var(--chrnx-surface-raised);
	background-image:
		linear-gradient(135deg, transparent 0 46%, color-mix(in srgb, var(--chrnx-card-accent, var(--chrnx-green)) 35%, transparent) 47% 52%, transparent 53%),
		radial-gradient(circle at 72% 28%, color-mix(in srgb, var(--chrnx-card-accent, var(--chrnx-green)) 28%, transparent) 0 15%, transparent 16%);
	object-position: 22% 18%;
	opacity: 0.55;
}

.chrnx-featured-story__fallback.is-topic-code,
.chrnx-journal-card__fallback.is-topic-code,
.chrnx-related-card__fallback.is-topic-code {
	--chrnx-card-accent: #59c3c3;
}

.chrnx-featured-story__fallback.is-topic-projects,
.chrnx-journal-card__fallback.is-topic-projects,
.chrnx-related-card__fallback.is-topic-projects {
	--chrnx-card-accent: #4fb0a8;
}

.chrnx-featured-story__fallback.is-topic-research,
.chrnx-journal-card__fallback.is-topic-research,
.chrnx-related-card__fallback.is-topic-research {
	--chrnx-card-accent: #a5d66a;
}

.chrnx-featured-story__fallback.is-topic-gaming,
.chrnx-journal-card__fallback.is-topic-gaming,
.chrnx-related-card__fallback.is-topic-gaming {
	--chrnx-card-accent: #da7b45;
}

.chrnx-featured-story__fallback.is-topic-literature,
.chrnx-journal-card__fallback.is-topic-literature,
.chrnx-related-card__fallback.is-topic-literature {
	--chrnx-card-accent: #b88ad9;
}

.chrnx-featured-story__fallback.is-topic-life,
.chrnx-journal-card__fallback.is-topic-life,
.chrnx-related-card__fallback.is-topic-life {
	--chrnx-card-accent: #e0b75b;
}

.chrnx-featured-story__fallback.is-topic-podcasts,
.chrnx-journal-card__fallback.is-topic-podcasts,
.chrnx-podcast-card__fallback.is-topic-podcasts,
.chrnx-related-card__fallback.is-topic-podcasts {
	--chrnx-card-accent: #58a7d8;
}

.chrnx-featured-story__fallback.is-topic-music,
.chrnx-journal-card__fallback.is-topic-music,
.chrnx-related-card__fallback.is-topic-music {
	--chrnx-card-accent: #d36b3f;
}

.chrnx-journal-stream__topics {
	margin-block-start: 1.5rem;
}

.chrnx-journal-stream__topic {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--chrnx-line);
	border-radius: 999px;
	color: var(--chrnx-muted);
	font-family: var(--wp--preset--font-family--metadata);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}

.chrnx-journal-stream__topic:hover,
.chrnx-journal-stream__topic:focus-visible {
	border-color: var(--chrnx-green);
	color: var(--chrnx-green);
}

.chrnx-journal-stream__topic[aria-current="page"] {
	border-color: var(--chrnx-green);
	background: var(--chrnx-green);
	color: var(--chrnx-bg);
}

.chrnx-journal-stream__filters {
	align-items: end;
	margin-block: 2rem;
	padding: 1rem;
	border: 1px solid var(--chrnx-line);
	border-radius: 0.75rem;
	background: var(--chrnx-surface);
}

.chrnx-journal-stream__filters label {
	min-width: min(100%, 11rem);
	color: var(--chrnx-muted);
	font-family: var(--wp--preset--font-family--metadata);
	font-size: var(--wp--preset--font-size--small);
}

.chrnx-journal-stream__filters input,
.chrnx-journal-stream__filters select {
	min-height: 45px;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--chrnx-line);
	border-radius: 0.4rem;
	background: var(--chrnx-bg);
	color: var(--chrnx-text);
}

.chrnx-journal-stream__filters button,
.chrnx-subscribe-cta a {
	min-height: 45px;
	padding: 0.7rem 1.1rem;
	border: 0;
	border-radius: 999px;
	background: var(--chrnx-green);
	color: var(--chrnx-bg);
	font-weight: 700;
	text-decoration: none;
}

.chrnx-journal-stream__list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
}

.chrnx-journal-stream__list > li {
	min-width: 0;
}

.chrnx-journal-card__link {
	display: grid;
	grid-template-columns: minmax(7rem, 0.45fr) minmax(0, 1fr);
	height: 100%;
}

.chrnx-journal-card__fallback,
.chrnx-journal-card__image {
	height: 100%;
	min-height: 13rem;
	object-fit: cover;
}

.chrnx-home > .chrnx-home-projects,
.chrnx-home > .chrnx-home-music,
.chrnx-home > .wp-block-chrnx-latest-podcast,
.chrnx-home > .chrnx-home-about-preview,
.chrnx-home > .wp-block-chrnx-subscribe-cta {
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block: var(--wp--preset--spacing--60);
	border-top: 0;
}

/* Both wrappers now delegate their surface to the stage, so neither pads. */
.chrnx-home > .chrnx-home-music,
.chrnx-home > .chrnx-home-projects {
	padding-block: 0;
}

/*
 * ponytail: bare wrapper. The frame, background and min-height belong to
 * .chrnx-character-stage inside it; duplicating them here drew two
 * nested boxes.
 */
.chrnx-home-projects {
	position: relative;
}

.chrnx-selected-work__list {
	display: grid;
	gap: 0;
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--chrnx-line);
	list-style: none;
}

.chrnx-selected-work__item {
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--chrnx-line);
}

.chrnx-selected-work__title {
	margin: 0;
	overflow-wrap: anywhere;
}

.chrnx-selected-work__title a {
	color: inherit;
	text-decoration: none;
}

.chrnx-selected-work__title a:hover {
	text-decoration: underline;
}

.chrnx-selected-work__empty {
	margin: 0;
	color: var(--chrnx-muted);
}

.chrnx-responsive-portrait {
	display: block;
}

.chrnx-section-portrait {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 2rem 2rem rgb(0 0 0 / 28%));
}

.chrnx-home-music .wp-block-columns {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 34rem;
	padding: clamp(2rem, 6vw, 5rem);
	border: 1px solid rgb(197 88 35 / 35%);
	border-radius: calc(var(--chrnx-radius) * 1.5);
	background-color: #0d1117;
	background-image:
		linear-gradient(110deg, rgb(13 17 23 / 98%) 0 44%, rgb(13 17 23 / 66%) 68%, rgb(13 17 23 / 84%)),
		linear-gradient(145deg, #54260f, #0d1117 75%);
	box-shadow: 0 2rem 5rem rgb(0 0 0 / 28%);
	color: #e6edf3;
}

.chrnx-home-music__collage-layer {
	position: absolute;
	z-index: 0;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.chrnx-home-music__collage-layer::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgb(13 17 23 / 62%), rgb(13 17 23 / 8%));
	content: "";
}

.chrnx-home-music__collage-layer .chrnx-responsive-portrait,
.chrnx-home-music__collage {
	width: 100%;
	height: 100%;
}

.chrnx-home-music__collage {
	object-fit: cover;
	object-position: 72% 42%;
	filter: saturate(0.72) contrast(1.08);
	opacity: 0.72;
}

.chrnx-home-music h2 {
	color: #e6edf3;
}

.chrnx-home-music p {
	color: #c6ced7;
}

html[data-theme="light"] .chrnx-home-music h2,
html[data-theme="light"] .chrnx-home-music p {
	color: #e6edf3;
}

@media (prefers-color-scheme: light) {

	:root:not([data-theme]) .chrnx-home-music h2,
	:root:not([data-theme]) .chrnx-home-music p {
		color: #e6edf3;
	}
}

.chrnx-home-music .wp-block-column:first-child {
	z-index: 2;
}

.chrnx-home-music .wp-block-column:first-child > h2,
.chrnx-home-music .wp-block-column:first-child > p {
	position: relative;
	z-index: 2;
}

.chrnx-home-music .wp-block-column:last-child {
	position: relative;
	z-index: 2;
	align-self: end;
}

.chrnx-home-music .wp-block-column:last-child .chrnx-responsive-portrait {
	width: min(100%, 29rem);
	margin: auto auto 0;
	filter: drop-shadow(0 1.5rem 2rem rgb(0 0 0 / 42%));
}

.chrnx-home-music__art {
	max-height: 30rem;
	object-fit: contain;
	object-position: center bottom;
	filter: contrast(1.06) saturate(0.9);
}

.chrnx-latest-podcast {
	position: relative;
	padding-inline: clamp(1.5rem, 5vw, 4rem);
	border: 1px solid color-mix(in srgb, #58a7d8 36%, var(--chrnx-line));
	border-radius: calc(var(--chrnx-radius) * 1.25);
	background-color: var(--chrnx-surface-raised);
	background-image: linear-gradient(135deg, color-mix(in srgb, #58a7d8 12%, transparent), transparent 58%);
	box-shadow: 0 1.25rem 3rem rgb(0 0 0 / 12%);
}

.chrnx-latest-podcast::before {
	display: block;
	margin-bottom: 1.5rem;
	color: var(--chrnx-green);
	content: "LATEST CONVERSATION";
	font-family: var(--wp--preset--font-family--metadata);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.chrnx-home-about-preview,
.chrnx-subscribe-cta {
	display: grid;
	align-items: start;
	gap: 2rem;
	padding-inline: clamp(1.5rem, 5vw, 4rem);
	border-radius: var(--chrnx-radius);
}

.chrnx-home-about-preview {
	grid-template-columns: minmax(12rem, 0.65fr) minmax(0, 1.35fr);
	border: 1px solid var(--chrnx-line);
	border-left: 0.35rem solid var(--chrnx-accent);
	background-color: var(--chrnx-surface);
	background-image: linear-gradient(105deg, var(--chrnx-accent-soft), transparent 48%);
}

.chrnx-subscribe-cta {
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	border: 1px solid color-mix(in srgb, var(--chrnx-green) 44%, var(--chrnx-line));
	background-color: var(--chrnx-surface-raised);
	background-image: linear-gradient(115deg, color-mix(in srgb, var(--chrnx-green) 14%, transparent), transparent 62%);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chrnx-green) 8%, transparent);
}

.chrnx-subscribe-cta__title,
.chrnx-subscribe-cta p {
	grid-column: 1;
	margin-block: 0;
}

.chrnx-subscribe-cta__link {
	grid-column: 2;
	grid-row: 1 / span 2;
}

.chrnx-home-about-preview p,
.chrnx-subscribe-cta p {
	max-width: 58ch;
	color: var(--chrnx-muted);
}

.chrnx-entry,
.chrnx-archive,
.chrnx-search,
.chrnx-not-found {
	padding-block: clamp(3.5rem, 7vw, 7rem);
}

.chrnx-entry > h1,
.chrnx-archive > h1,
.chrnx-search > h1,
.chrnx-not-found > h1 {
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: -0.035em;
}

.chrnx-entry--page > .wp-block-post-title,
.chrnx-archive > .wp-block-query-title {
	width: min(100%, var(--wp--style--global--content-size));
	margin-inline: auto;
	color: var(--chrnx-green);
	font-family: var(--wp--preset--font-family--metadata);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.chrnx-entry__meta {
	padding-block: 1rem;
	border-block: 1px solid var(--chrnx-line);
	color: var(--chrnx-muted);
}

.chrnx-entry pre {
	overflow-x: auto;
	padding: 1.25rem;
	border: 1px solid var(--chrnx-line);
	border-radius: 0.75rem;
	background: #090c10;
	color: #d9e7df;
	font-size: 0.9rem;
}

.chrnx-topic-hero {
	display: block;
	min-height: 0;
	overflow: visible;
	margin-bottom: 3rem;
	border: 0;
	background: none;
}

.chrnx-topic-hero__content {
	padding: clamp(2rem, 6vw, 5rem);
}

.chrnx-topic-hero__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--display);
}

.chrnx-topic-hero__art {
	align-self: end;
}

.chrnx-topic-hero__art .chrnx-section-portrait {
	max-height: 34rem;
	object-fit: contain;
	object-position: bottom;
}

.chrnx-music-landing,
.chrnx-podcast-landing,
.chrnx-about {
	position: relative;
}

.chrnx-music-landing > h2,
.chrnx-podcast-landing > h2,
.chrnx-about > h2 {
	font-size: var(--wp--preset--font-size--display);
}

.chrnx-music-landing__art {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(15rem, 0.75fr);
	overflow: hidden;
	margin-block: 3rem;
	border-radius: calc(var(--chrnx-radius) * 1.5);
	background: #15100d;
}

.chrnx-music-landing__art > img {
	width: 100%;
	height: 100%;
	max-height: 40rem;
	object-fit: cover;
}

.chrnx-music-landing__art .chrnx-responsive-portrait {
	align-self: end;
}

.chrnx-music-landing__portrait {
	max-height: 38rem;
	object-fit: contain;
	object-position: bottom;
}

/* Reads as a pull quote without claiming to quote anyone. */
.chrnx-music-note {
	position: relative;
	max-width: 46rem;
	margin-block: clamp(2rem, 5vw, 3.5rem);
	padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
	border-left: 3px solid var(--chrnx-accent);
	border-radius: 0 var(--chrnx-radius) var(--chrnx-radius) 0;
	background: color-mix(in srgb, var(--chrnx-surface) 90%, transparent);
	font-size: clamp(1.1rem, 1rem + 0.55vw, 1.45rem);
	line-height: 1.5;
	text-wrap: pretty;
}

.chrnx-music-note::before {
	position: absolute;
	top: -0.35em;
	left: 0.35rem;
	color: var(--chrnx-accent);
	content: "\201C";
	font-family: var(--wp--preset--font-family--heading);
	font-size: 5rem;
	line-height: 1;
	opacity: 0.28;
	pointer-events: none;
}

.chrnx-release-list {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Grunge release cards: torn light, heavy rule, dirt in the corners. */
.chrnx-release-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 1.75rem 1.5rem 1.5rem;
	border-color: color-mix(in srgb, var(--chrnx-accent) 30%, var(--chrnx-line));
	border-top: 3px solid var(--chrnx-accent);
	background-color: var(--chrnx-surface-raised);
	background-image:
		linear-gradient(118deg, transparent 0 44%, color-mix(in srgb, var(--chrnx-accent) 14%, transparent) 44.5% 46%, transparent 46.5%),
		linear-gradient(154deg, transparent 0 72%, color-mix(in srgb, var(--chrnx-green) 10%, transparent) 72.5% 73.5%, transparent 74%),
		radial-gradient(ellipse at 88% 6%, color-mix(in srgb, var(--chrnx-accent) 22%, transparent), transparent 58%),
		radial-gradient(ellipse at 4% 100%, rgb(0 0 0 / 34%), transparent 46%);
	transition: transform 160ms ease, border-color 160ms ease;
}

.chrnx-release-card::after {
	position: absolute;
	z-index: -1;
	inset: 0;
	background-image: repeating-linear-gradient(96deg, rgb(255 255 255 / 3.5%) 0 1px, transparent 1px 4px);
	content: "";
	mix-blend-mode: overlay;
	pointer-events: none;
}

.chrnx-release-card:hover {
	border-top-color: var(--chrnx-green);
	transform: translateY(-3px);
}

.chrnx-release-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.chrnx-release-card__art {
	display: block;
	overflow: hidden;
	margin-bottom: 1rem;
	border: 1px solid var(--chrnx-line);
	border-radius: calc(var(--chrnx-radius) * 0.6);
	aspect-ratio: 1;
}

.chrnx-release-card__cover,
.chrnx-release-card__fallback {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.chrnx-release-card__fallback,
.chrnx-release-detail__fallback {
	background-color: var(--chrnx-surface);
	background-image:
		linear-gradient(132deg, transparent 0 46%, color-mix(in srgb, var(--chrnx-accent) 42%, transparent) 47% 50%, transparent 51%),
		linear-gradient(28deg, transparent 0 64%, color-mix(in srgb, var(--chrnx-green) 26%, transparent) 65% 67%, transparent 68%),
		radial-gradient(circle at 70% 28%, color-mix(in srgb, var(--chrnx-accent) 34%, transparent), transparent 52%);
}

.chrnx-release-card__title {
	margin: 0 0 0.4rem;
	text-wrap: balance;
}

.chrnx-release-card__link:hover .chrnx-release-card__title {
	color: var(--chrnx-green);
}

.chrnx-release-card__status,
.chrnx-release-detail__status {
	margin: 0;
	color: var(--chrnx-muted);
	font-family: var(--wp--preset--font-family--metadata);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
}

/* Platform icons: only rendered when a URL exists, never as dead links. */
.chrnx-platform-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0.85rem 0 0;
	padding: 0;
	list-style: none;
}

.chrnx-platform-links__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border-radius: 0.35rem;
	color: var(--chrnx-muted);
	text-decoration: none;
}

.chrnx-platform-links__link:hover,
.chrnx-platform-links__link:focus-visible {
	background: color-mix(in srgb, var(--chrnx-green) 18%, transparent);
	color: var(--chrnx-text);
}

/* Album page. */
.chrnx-release-detail__head {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
	align-items: start;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.chrnx-release-detail__head.is-bare {
	grid-template-columns: minmax(0, 22rem);
}

.chrnx-release-detail__art {
	position: relative;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--chrnx-accent) 34%, var(--chrnx-line));
	border-radius: var(--chrnx-radius);
	aspect-ratio: 1;
	box-shadow: var(--chrnx-shadow);
}

.chrnx-release-detail__cover,
.chrnx-release-detail__fallback {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.chrnx-release-detail__description {
	margin: 0.75rem 0 0;
	color: var(--chrnx-text);
}

.chrnx-release-detail__empty {
	padding: 2rem;
	border: 1px dashed var(--chrnx-line);
	border-radius: var(--chrnx-radius);
	color: var(--chrnx-muted);
}

/* Tracklist: number, player, then title. */
.chrnx-tracklist {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--chrnx-line);
	list-style: none;
}

/* Explicit columns so a track without audio keeps its title in place. */
.chrnx-tracklist__item {
	display: grid;
	gap: 0.5rem 1rem;
	grid-template-columns: 2.5rem minmax(0, 17rem) minmax(0, 1fr);
	align-items: center;
	padding-block: 1rem;
	border-bottom: 1px solid var(--chrnx-line);
}

.chrnx-tracklist__player {
	grid-column: 2;
}

.chrnx-tracklist__body {
	grid-column: 3;
}

.chrnx-tracklist__item:hover {
	background: color-mix(in srgb, var(--chrnx-accent) 7%, transparent);
}

.chrnx-tracklist__number {
	grid-column: 1;
	color: var(--chrnx-muted);
	font-family: var(--wp--preset--font-family--metadata);
	font-size: var(--wp--preset--font-size--small);
}

.chrnx-tracklist__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}

.chrnx-tracklist__title a {
	color: inherit;
	text-decoration: none;
}

.chrnx-tracklist__title a:hover {
	text-decoration: underline;
}

.chrnx-tracklist__body .chrnx-platform-links {
	margin-top: 0.25rem;
}

.chrnx-track-player {
	display: block;
	width: 100%;
	max-width: 17rem;
	height: 2.5rem;
}

/* Single track page. */
.chrnx-track-meta {
	display: grid;
	gap: 1rem 1.5rem;
	grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
	align-items: center;
	margin-block: 2rem;
	padding: 1.25rem;
	border: 1px solid color-mix(in srgb, var(--chrnx-accent) 30%, var(--chrnx-line));
	border-left: 3px solid var(--chrnx-accent);
	border-radius: var(--chrnx-radius);
	background: var(--chrnx-surface-raised);
}

.chrnx-track-meta__release {
	margin: 0;
}

.chrnx-track-meta__label,
.chrnx-track-meta__number {
	color: var(--chrnx-muted);
	font-family: var(--wp--preset--font-family--metadata);
	font-size: var(--wp--preset--font-size--small);
}

.chrnx-track-meta__number {
	display: block;
	margin-top: 0.35rem;
}

.chrnx-track-meta .chrnx-platform-links {
	margin-top: 0.35rem;
}

@media (max-width: 720px) {

	.chrnx-release-detail__head,
	.chrnx-track-meta {
		grid-template-columns: minmax(0, 1fr);
	}

	.chrnx-tracklist__item {
		grid-template-columns: 2.5rem minmax(0, 1fr);
	}

	.chrnx-tracklist__body {
		grid-column: 2;
	}

	.chrnx-tracklist__player {
		grid-row: 2;
		grid-column: 1 / -1;
	}

	.chrnx-track-player {
		max-width: none;
	}
}

.chrnx-podcast-landing > .chrnx-responsive-portrait {
	float: right;
	width: min(45%, 24rem);
	margin: -7rem 0 2rem 2rem;
}

.chrnx-podcast-landing [data-type="core/group"]:empty,
.chrnx-podcast-landing > .wp-block-group:empty,
.chrnx-podcast-show > .wp-block-group:empty {
	display: none;
}

.chrnx-journal-stream__empty,
.chrnx-not-found .wp-block-search,
.chrnx-search .wp-block-query-no-results {
	padding: 2rem;
	border: 1px dashed var(--chrnx-line);
	border-radius: var(--chrnx-radius);
	background: var(--chrnx-surface);
}

.chrnx-journal-stream__pagination a,
.chrnx-journal-stream__pagination span {
	display: inline-flex;
	min-width: 45px;
	min-height: 45px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--chrnx-line);
	border-radius: 50%;
}

.chrnx-journal-stream__pagination .current {
	background: var(--chrnx-green);
	color: var(--chrnx-bg);
}

@media (hover: hover) {

	.chrnx-featured-story,
	.chrnx-journal-card,
	.chrnx-podcast-card,
	.chrnx-related-card {
		transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
	}

	.chrnx-featured-story:hover,
	.chrnx-journal-card:hover,
	.chrnx-podcast-card:hover,
	.chrnx-related-card:hover {
		border-color: color-mix(in srgb, var(--chrnx-green) 62%, var(--chrnx-line));
		box-shadow: var(--chrnx-shadow);
		transform: translateY(-0.25rem);
	}
}

@media (max-width: 900px) {

	.chrnx-journal-stream__list,
	.chrnx-release-list {
		grid-template-columns: 1fr;
	}

	.chrnx-topic-hero {
		grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.6fr);
	}
}

@media (max-width: 599px) {

	.chrnx-home > section,
	.chrnx-home > .wp-block-group,
	.chrnx-home > .wp-block-chrnx-featured-stories,
	.chrnx-home > .wp-block-chrnx-journal-stream,
	.chrnx-home > .wp-block-chrnx-latest-podcast {
		padding-block: 3.5rem;
	}

	.chrnx-home > .chrnx-home-intro {
		min-height: auto;
		align-content: start;
		padding-block: 2.5rem;
		padding-right: 0;
	}

	.chrnx-home-intro h1 {
		font-size: clamp(2.2rem, 10vw, 2.75rem);
	}

	.chrnx-home-intro::after {
		display: none;
	}

	.chrnx-journal-stream__filters,
	.chrnx-home-about-preview,
	.chrnx-subscribe-cta {
		display: grid;
		grid-template-columns: 1fr;
	}

	.chrnx-journal-stream__filters label,
	.chrnx-journal-stream__filters input,
	.chrnx-journal-stream__filters select,
	.chrnx-journal-stream__filters button {
		width: 100%;
	}

	.chrnx-journal-card__link {
		grid-template-columns: 1fr;
	}

	.chrnx-journal-card__fallback,
	.chrnx-journal-card__image {
		min-height: 10rem;
	}

	.chrnx-home-music .wp-block-columns {
		padding: 2rem 1.5rem 0;
	}

	.chrnx-home > .chrnx-home-music,
	.chrnx-home > .chrnx-home-projects {
		padding-block: 0;
	}

	.chrnx-home-music__collage {
		object-position: 60% center;
		opacity: 0.56;
	}

	.chrnx-home-music .wp-block-column:last-child .chrnx-responsive-portrait {
		width: min(82%, 20rem);
	}

	.chrnx-home-about-preview,
	.chrnx-subscribe-cta {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.chrnx-subscribe-cta__link {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
	}

	.chrnx-topic-hero {
		min-height: 36rem;
		grid-template-columns: 1fr;
	}

	.chrnx-topic-hero__art {
		width: min(88%, 24rem);
		margin: -4rem auto 0;
	}

	.chrnx-music-landing__art {
		grid-template-columns: 1fr;
	}

	.chrnx-music-landing__art > img {
		max-height: 24rem;
	}

	.chrnx-podcast-landing > .chrnx-responsive-portrait {
		float: none;
		width: min(85%, 22rem);
		margin: 0 auto 2rem;
	}

}

@media (prefers-reduced-motion: reduce) {

	.chrnx-featured-story,
	.chrnx-journal-card,
	.chrnx-podcast-card,
	.chrnx-related-card {
		transition: none;
	}

	.chrnx-featured-story:hover,
	.chrnx-journal-card:hover,
	.chrnx-podcast-card:hover,
	.chrnx-related-card:hover {
		transform: none;
	}
}

/* Shared character-led section frame. */

.chrnx-character-stage {
	--chrnx-character-accent: var(--chrnx-accent);
	--chrnx-character-halo: color-mix(in srgb, var(--chrnx-character-accent) 30%, transparent);
	--chrnx-character-wash: color-mix(in srgb, var(--chrnx-character-accent) 12%, transparent);
	--chrnx-character-shadow: drop-shadow(0 1.75rem 1.5rem rgb(0 0 0 / 32%));
	--chrnx-character-copy-surface: rgb(21 27 35 / 88%);
	position: relative;
	display: grid;
	box-sizing: border-box;
	min-height: clamp(30rem, 44vw, 38rem);
	grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
	isolation: isolate;
	overflow: clip;
	border: 1px solid color-mix(in srgb, var(--chrnx-character-accent) 32%, var(--chrnx-line));
	border-radius: calc(var(--chrnx-radius) * 1.5);
	background-color: var(--chrnx-surface);
	background-image: linear-gradient(125deg, var(--chrnx-surface) 0 45%, var(--chrnx-character-wash) 100%);
	box-shadow: var(--chrnx-shadow);
	color: var(--chrnx-text);
}

.chrnx-character-stage__atmosphere {
	position: absolute;
	z-index: 0;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.chrnx-character-stage__atmosphere::before {
	position: absolute;
	top: 8%;
	right: -4%;
	width: min(48rem, 62%);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, var(--chrnx-character-halo) 0 24%, transparent 68%);
	content: "";
	filter: blur(0.2rem);
}

.chrnx-character-stage__atmosphere::after {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(112deg, transparent 0 49%, var(--chrnx-character-wash) 49.5% 50.5%, transparent 51%),
		linear-gradient(28deg, transparent 0 72%, color-mix(in srgb, var(--chrnx-character-accent) 18%, transparent) 72.5% 74%, transparent 74.5%),
		radial-gradient(ellipse at 78% 100%, rgb(0 0 0 / 20%) 0 12%, transparent 42%);
	content: "";
}

.chrnx-character-stage__content {
	position: relative;
	z-index: 2;
	display: grid;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	align-content: center;
	align-self: stretch;
	grid-column: 1;
	grid-row: 1;
	margin: 0 !important;
	padding: clamp(2rem, 5vw, 5rem);
	color: var(--chrnx-text);
}

.chrnx-character-stage__content::before {
	position: absolute;
	z-index: 1;
	inset: 0;
	background-color: var(--chrnx-character-copy-surface);
	content: "";
	pointer-events: none;
}

.chrnx-character-stage__content > :not(.chrnx-responsive-portrait) {
	position: relative;
	z-index: 2;
}

.chrnx-character-stage__content > :first-child {
	margin-block-start: 0;
}

.chrnx-character-stage__content > :last-child {
	margin-block-end: 0;
}

.chrnx-character-stage__art {
	position: relative;
	z-index: 3;
	display: flex;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	height: 100%;
	align-self: end;
	align-items: end;
	justify-content: center;
	grid-column: 2;
	grid-row: 1;
	margin: 0;
}

/*
 * The copy surface stays solid so text contrast stays guaranteed and testable.
 * This strip continues it into the art column so the panel stops ending in a
 * hard vertical line. It lives inside the art column to avoid overflowing the
 * stage, and sits under the character. Text never reaches it.
 */
.chrnx-character-stage__art::after {
	position: absolute;
	z-index: 0;
	top: 0;
	bottom: 0;
	left: 0;
	width: clamp(2rem, 14%, 6rem);
	background-image: linear-gradient(to right, var(--chrnx-character-copy-surface), transparent);
	content: "";
	pointer-events: none;
}

.chrnx-character-stage__art::before {
	position: absolute;
	z-index: 1;
	right: 5%;
	bottom: -1.25rem;
	left: 5%;
	height: 4.5rem;
	border-radius: 50%;
	background: radial-gradient(ellipse, rgb(0 0 0 / 38%), transparent 68%);
	content: "";
	filter: blur(0.55rem);
}

.chrnx-character-stage__art > .chrnx-responsive-portrait {
	position: relative;
	z-index: 2;
	display: flex;
	width: 100%;
	height: 100%;
	align-items: end;
	justify-content: center;
	margin: 0;
}

.chrnx-character-stage__art img {
	display: block;
	width: 100%;
	height: auto;
	max-height: clamp(28rem, 44vw, 38rem);
	object-fit: contain;
	object-position: center bottom;
	filter: var(--chrnx-character-shadow) saturate(0.96) contrast(1.04);
}

/*
 * An echo, not a second subject: pushed to the edge and faint enough that it
 * reads as depth. At 0.34 next to the primary it looked like a duplicate.
 */
.chrnx-character-stage__secondary-art {
	position: absolute;
	z-index: 1;
	right: 2%;
	bottom: 0;
	width: min(24%, 15rem);
	height: auto;
	opacity: 0.13;
	filter: saturate(0.25) contrast(1.12) blur(1px);
}

.chrnx-character-stage__atmosphere > .chrnx-responsive-portrait {
	position: absolute;
	z-index: 1;
	inset: 0;
	width: 100%;
	height: 100%;
}

.chrnx-character-stage__atmosphere .chrnx-character-stage__collage {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 68% center;
	filter: saturate(0.68) contrast(1.08);
	opacity: 0.46;
}

.chrnx-music-landing .chrnx-character-stage__content > .chrnx-responsive-portrait:has(.chrnx-character-stage__collage) {
	position: absolute;
	z-index: 0;
	inset: 0 auto 0 0;
	width: calc(100% / 0.55);
	height: 100%;
	overflow: hidden;
	margin: 0 !important;
	opacity: 0.28;
}

.chrnx-music-landing .chrnx-character-stage__content > h2,
.chrnx-music-landing .chrnx-character-stage__content > p {
	position: relative;
	z-index: 2;
}

.chrnx-music-landing .chrnx-character-stage__collage {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.72) contrast(1.08);
}

.chrnx-home-projects .chrnx-character-stage,
.is-topic-code .chrnx-character-stage {
	--chrnx-character-accent: #59c3c3;
}

.is-topic-research .chrnx-character-stage {
	--chrnx-character-accent: #a5d66a;
}

.is-topic-literature .chrnx-character-stage {
	--chrnx-character-accent: #b88ad9;
}

.chrnx-home-music .chrnx-character-stage,
.chrnx-music-landing .chrnx-character-stage,
.is-topic-music .chrnx-character-stage {
	--chrnx-character-accent: #d36b3f;
}

.chrnx-home-music .chrnx-character-stage,
.chrnx-music-landing .chrnx-character-stage {
	--chrnx-character-copy-surface: rgb(13 17 23 / 86%);
	background-color: #0d1117;
	background-image: linear-gradient(125deg, #0d1117 0 45%, rgb(84 38 15 / 72%) 100%);
	color: #e6edf3;
}

html[data-theme="light"] .chrnx-character-stage {
	--chrnx-character-copy-surface: rgb(255 253 247 / 90%);
}

html[data-theme="light"] .chrnx-home-music .chrnx-character-stage,
html[data-theme="light"] .chrnx-music-landing .chrnx-character-stage {
	--chrnx-character-copy-surface: rgb(13 17 23 / 86%);
}

@media (prefers-color-scheme: light) {

	:root:not([data-theme]) .chrnx-character-stage {
		--chrnx-character-copy-surface: rgb(255 253 247 / 90%);
	}

	:root:not([data-theme]) .chrnx-home-music .chrnx-character-stage,
	:root:not([data-theme]) .chrnx-music-landing .chrnx-character-stage {
		--chrnx-character-copy-surface: rgb(13 17 23 / 86%);
	}
}

.chrnx-home-music .chrnx-character-stage__content,
.chrnx-home-music .chrnx-character-stage__content h2,
.chrnx-home-music .chrnx-character-stage__content p,
.chrnx-music-landing .chrnx-character-stage__content,
.chrnx-music-landing .chrnx-character-stage__content h2,
.chrnx-music-landing .chrnx-character-stage__content p,
.chrnx-music-landing .chrnx-character-stage__content a {
	color: #e6edf3;
}

.chrnx-podcast-landing .chrnx-character-stage,
.is-topic-podcasts .chrnx-character-stage,
.is-topic-silicon-ranch .chrnx-character-stage {
	--chrnx-character-accent: #58a7d8;
}

/* Music and Podcast landing stage composition. */

.chrnx-music-landing .chrnx-character-stage,
.chrnx-podcast-landing .chrnx-character-stage {
	min-height: min(38rem, 100vh);
}

.chrnx-podcast-landing {
	width: min(calc(100vw - 2rem), var(--wp--style--global--wide-size));
	max-width: none;
	margin-inline: calc((100% - min(calc(100vw - 2rem), var(--wp--style--global--wide-size))) / 2);
}

.chrnx-entry--page:has(.chrnx-music-landing) > .wp-block-post-title,
.chrnx-entry--page:has(.chrnx-podcast-landing) > .wp-block-post-title {
	text-align: center;
}

/* Landscape backdrops sit behind everything and stay quiet under the copy. */
.chrnx-character-stage__atmosphere > .chrnx-responsive-atmosphere {
	position: absolute;
	z-index: 0;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.chrnx-character-stage__backdrop {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	opacity: 0.62;
}

.chrnx-music-landing .chrnx-character-stage__atmosphere > .chrnx-responsive-portrait,
.chrnx-podcast-landing .chrnx-character-stage__atmosphere > .chrnx-responsive-portrait {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.chrnx-music-landing .chrnx-character-stage__atmosphere img,
.chrnx-podcast-landing .chrnx-character-stage__atmosphere img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.chrnx-music-landing .chrnx-character-stage__atmosphere img {
	opacity: 0.58;
}

.chrnx-podcast-landing .chrnx-character-stage__atmosphere img {
	opacity: 0.5;
}

.chrnx-music-landing .chrnx-character-stage__atmosphere::after,
.chrnx-podcast-landing .chrnx-character-stage__atmosphere::after {
	background-image:
		linear-gradient(90deg, rgb(13 17 23 / 82%) 0 36%, rgb(13 17 23 / 22%) 72%, rgb(13 17 23 / 48%)),
		linear-gradient(180deg, transparent 62%, rgb(0 0 0 / 34%));
}

.chrnx-music-landing .chrnx-character-stage__content,
.chrnx-podcast-landing .chrnx-character-stage__content {
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: normal;
}

.chrnx-music-landing .chrnx-character-stage__content > h2,
.chrnx-podcast-landing .chrnx-character-stage__content > h2 {
	margin-inline: auto;
	text-align: center;
}

.chrnx-music-landing .chrnx-character-stage__art,
.chrnx-podcast-landing .chrnx-character-stage__art {
	align-self: end;
	overflow: hidden;
}

.chrnx-music-landing .chrnx-character-stage__art img,
.chrnx-podcast-landing .chrnx-character-stage__art img {
	max-height: min(46rem, 100vh);
	object-fit: contain;
	object-position: center bottom;
}

.chrnx-podcast-landing > .wp-block-chrnx-latest-podcast {
	position: relative;
	width: 100%;
	max-width: none;
	margin-block-start: clamp(1.5rem, 4vw, 3rem);
	margin-inline: 0;
}

/* End Music and Podcast landing stage composition. */

.chrnx-about .chrnx-character-stage,
.is-topic-life .chrnx-character-stage {
	--chrnx-character-accent: #e0b75b;
}

.is-topic-gaming .chrnx-character-stage {
	--chrnx-character-accent: #da7b45;
}

.chrnx-topic-hero__fallback {
	position: absolute;
	right: 9%;
	bottom: 0;
	width: min(36%, 24rem);
	aspect-ratio: 0.78;
	border: 1px solid color-mix(in srgb, var(--chrnx-character-accent) 46%, transparent);
	border-bottom: 0;
	border-radius: 48% 48% 0 0;
	background:
		radial-gradient(circle at 50% 26%, var(--chrnx-character-halo) 0 14%, transparent 15%),
		linear-gradient(145deg, var(--chrnx-character-wash), transparent 62%);
	box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 18%);
}

@media (max-width: 780px) {

	.chrnx-topic-hero {
		min-height: 0;
	}

	.chrnx-character-stage {
		min-height: 0;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}

	.chrnx-character-stage__content {
		align-self: start;
		grid-column: 1;
		grid-row: 1;
		padding: clamp(1.5rem, 7vw, 3rem);
	}

	.chrnx-character-stage__art {
		width: 76%;
		height: clamp(20rem, 100vw, 34rem);
		justify-self: end;
		grid-column: 1;
		grid-row: 2;
		margin: 0;
	}

	.chrnx-character-stage__art img {
		max-height: 100%;
	}

	.chrnx-character-stage__secondary-art {
		display: none;
	}

	.chrnx-character-stage__atmosphere::before {
		top: auto;
		right: -18%;
		bottom: 0;
		width: 100%;
	}

	.chrnx-character-stage__atmosphere .chrnx-character-stage__collage {
		object-position: 62% center;
		opacity: 0.34;
	}

	.chrnx-music-landing .chrnx-character-stage__content > .chrnx-responsive-portrait:has(.chrnx-character-stage__collage) {
		width: 100%;
		height: calc(100% + clamp(20rem, 100vw, 34rem));
	}
}

@media (prefers-reduced-motion: reduce) {

	.chrnx-character-stage,
	.chrnx-character-stage *,
	.chrnx-character-stage::before,
	.chrnx-character-stage::after {
		animation: none !important;
		transition: none !important;
	}
}

/* Subscribe form: rendered only when a provider endpoint is configured. */
.chrnx-subscribe-form {
	max-width: 42rem;
	margin-block: clamp(2rem, 5vw, 3rem);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border: 1px solid color-mix(in srgb, var(--chrnx-green) 30%, var(--chrnx-line));
	border-left: 3px solid var(--chrnx-green);
	border-radius: var(--chrnx-radius);
	background: var(--chrnx-surface-raised);
}

.chrnx-subscribe-form__title {
	margin: 0 0 0.5rem;
}

.chrnx-subscribe-form__note {
	margin: 0 0 1.25rem;
	color: var(--chrnx-muted);
}

.chrnx-subscribe-form__form {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
}

.chrnx-subscribe-form__label {
	grid-column: 1 / -1;
	color: var(--chrnx-muted);
	font-family: var(--wp--preset--font-family--metadata);
	font-size: var(--wp--preset--font-size--small);
}

.chrnx-subscribe-form__input {
	box-sizing: border-box;
	width: 100%;
	min-height: 45px;
	padding-inline: 0.75rem;
	border: 1px solid var(--chrnx-line);
	border-radius: 0.35rem;
	background: var(--chrnx-bg);
	color: var(--chrnx-text);
	font: inherit;
}

.chrnx-subscribe-form__button {
	min-height: 45px;
	padding-inline: 1.25rem;
	border: 0;
	border-radius: 0.35rem;
	background: var(--chrnx-green);
	color: var(--chrnx-bg);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.chrnx-subscribe-form__button:hover {
	background: color-mix(in srgb, var(--chrnx-green) 82%, var(--chrnx-text));
}

@media (max-width: 599px) {

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

/* Where a show can be heard, above its latest episode. */
.chrnx-show-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
	margin-block: 1.5rem;
}

.chrnx-show-links__label {
	margin: 0;
	color: var(--chrnx-muted);
	font-family: var(--wp--preset--font-family--metadata);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.chrnx-show-links .chrnx-platform-links {
	margin: 0;
}