/*
 * Epicore Field Notes — archive (Archive C) and single post (Post A).
 *
 * Measurements come from the handoff prototype, which the README names as the
 * source of truth for measurement and interaction. Tokens live in tokens.css.
 *
 * Two grounds, dashed dividers only, no shadows anywhere.
 */

/* ═══════════════════════════════════════════════════════════════════════
   1. Shell and shared primitives
   ═══════════════════════════════════════════════════════════════════════ */

.epicore-fn {
	background: var(--surface-page);

	/* The site header is absolutely positioned, so clear it. */
	padding-top: var(--nav-height);
}

.epicore-fn * {
	box-sizing: border-box;
}

/*
 * Site-wide global styles put every link on the mono face via
 * `a:where(:not(.wp-element-button))`. Because that lands on the anchor itself
 * it beats inheritance, so an editorial headline or paragraph that happens to
 * be a link switches to mono mid-flow. These anchors hand the surrounding face
 * back; anything that really is mono (chips, meta, tags, buttons) sets its own.
 */
.epicore-fn-featured__link,
.epicore-fn-card__link,
.epicore-fn-contents__link,
.epicore-fn-prose a,
.is-style-epicore-faq a:not(.wp-element-button),
.is-style-epicore-cta-panel a:not(.wp-element-button) {
	font-family: inherit;
}

/* Every Field Notes section sits in the 1440 frame with 36px gutters. */
.epicore-fn-section {
	max-width: calc(var(--content-width) + (2 * var(--page-gutter)));
	margin-inline: auto;
	padding-inline: var(--page-gutter);
}

.epicore-fn-mono {
	font-family: var(--font-mono);
	font-weight: var(--fw-mono);
	font-size: var(--fs-mono-xs);
	letter-spacing: var(--ls-mono);
	text-transform: uppercase;
	color: var(--text-muted);
}

.epicore-fn-mono--ink {
	color: var(--text-primary);
}

/* The 4px square that separates mono meta readouts. */
.epicore-fn-dot {
	flex: 0 0 auto;
	width: 4px;
	height: 4px;
	border-radius: 1px;
	background: var(--plot-point);
	opacity: 0.5;
}

/* ── Chips ─────────────────────────────────────────────────────────────── */

.epicore-fn-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: var(--radius-chip);
	font-family: var(--font-mono);
	font-weight: var(--fw-mono);
	font-size: var(--fs-mono-xs);
	letter-spacing: var(--ls-mono);
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	padding: 6px 9px;
}

.epicore-fn-chip--sm,
.epicore-fn-chip--md {
	gap: 8px;
	padding: 8px 12px;
	font-size: var(--fs-mono-sm);
}

.epicore-fn-chip--lg {
	gap: 8px;
	padding: 10px 14px;
	font-size: var(--fs-mono-sm);
}

.epicore-fn-chip--outline {
	padding: 8px 12px;
	font-size: var(--fs-mono-sm);
	border: 1px dashed var(--rule-dashed-ink);
	color: var(--text-muted);
	background: transparent;
}

.epicore-fn-chip__dot {
	width: 6px;
	height: 6px;
	border-radius: 1px;
	background: currentColor;
	opacity: 0.85;
}

.epicore-fn-chip-wrap {
	display: flex;
}

/* ── Hover: fade the whole target, wipe an accent underline under the text ── */

.epicore-fn-wipe {
	background-image: linear-gradient(var(--acc), var(--acc));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 2px;
	transition: background-size var(--dur-wipe) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
	.epicore-fn-wipe {
		transition: none;
	}
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.epicore-fn-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.5rem 2.25rem;
	border-radius: var(--radius-button);
	font-family: var(--font-mono);
	font-weight: var(--fw-mono);
	font-size: var(--fs-read-sm);
	letter-spacing: var(--ls-mono);
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity var(--dur-base) var(--ease-standard);
}

/* Match site CTA horizontal padding (theme button token: 2.25rem). */
.epicore-fn .wp-block-button__link {
	padding-left: 2.25rem;
	padding-right: 2.25rem;
}

.epicore-fn-button--outline {
	border: 1px solid var(--ink);
	color: var(--text-primary);
	background: transparent;
}

.epicore-fn-button:hover {
	opacity: var(--hover-opacity);
}

.epicore-fn-button:active {
	opacity: var(--press-opacity);
}

/* Focus ring is an addition — the source design specifies none.
 * WPCode sets `outline: none !important` on a/button site-wide. */
.epicore-fn a:focus-visible,
.epicore-fn button:focus-visible,
.epicore-fn .wp-block-button__link:focus-visible {
	outline: 2px solid var(--epicore-blue) !important;
	outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. Archive C — section header
   ═══════════════════════════════════════════════════════════════════════ */

.epicore-fn-archive__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 96px;
	flex-wrap: nowrap;
	padding-top: 80px;
}

.epicore-fn-archive__intro {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.epicore-fn-archive__header h1 {
	margin: 0;
	font-family: var(--font-core);
	font-weight: var(--fw-core);
	font-size: var(--fs-h1);
	line-height: var(--lh-display);
	letter-spacing: -0.015em;
	color: var(--text-primary);
}

.epicore-fn-archive__deck {
	margin: 0;
	max-width: 520px;
	font-family: var(--font-core);
	font-weight: var(--fw-core);
	font-size: var(--fs-read);
	line-height: var(--lh-read);
	color: var(--text-muted);
	text-wrap: pretty;
}

/* The dashed hairline under the section header. */
.epicore-fn-archive__rule {
	padding-top: 48px;
}

.epicore-fn-archive__rule .wp-block-separator {
	margin-block: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. Archive C — featured post
   ═══════════════════════════════════════════════════════════════════════ */

.epicore-fn-featured {
	padding-top: 64px;
}

.epicore-fn-featured__link {
	display: grid;
	grid-template-columns: 676px 1fr;
	gap: 40px;
	align-items: center;
	color: inherit;
	text-decoration: none;
	border-radius: var(--radius-card);
}

.epicore-fn-featured__link:focus-visible {
	outline: 2px solid var(--epicore-blue);
	outline-offset: 4px;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--epicore-blue) 30%, transparent);
}

.epicore-fn-featured__media {
	display: block;
}

.epicore-fn-featured__image {
	display: block;
	height: 440px;
	border-radius: var(--radius-card);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: var(--gray-200);
	transition: opacity var(--dur-base) var(--ease-standard);
}

/* Missing featured image: small centered brand mark on light gray. */
.epicore-fn-media--placeholder {
	background-color: var(--gray-200);
	background-image: url("../images/epicore-logo.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 6.5rem auto;
}

.epicore-fn-featured__image.epicore-fn-media--placeholder {
	background-size: 8.75rem auto;
}

.epicore-fn-featured__link:hover .epicore-fn-featured__image,
.epicore-fn-featured__link:focus-visible .epicore-fn-featured__image {
	opacity: var(--hover-opacity);
}

.epicore-fn-featured__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.epicore-fn-featured__chips {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.epicore-fn-featured__title {
	display: block;
	margin: 0;
	font-family: var(--font-core);
	font-weight: var(--fw-core);
	font-size: var(--fs-editorial-md);
	line-height: var(--lh-read-tight);
	letter-spacing: -0.01em;
	color: var(--text-primary);
	text-wrap: pretty;
}

.epicore-fn-featured__title .epicore-fn-wipe {
	display: inline;
}

.epicore-fn-featured__link:hover .epicore-fn-wipe,
.epicore-fn-featured__link:focus-visible .epicore-fn-wipe {
	background-size: 100% 2px;
}

.epicore-fn-featured__deck {
	display: block;
	margin: 0;
	max-width: var(--measure);
	font-family: var(--font-core);
	font-weight: var(--fw-core);
	font-size: var(--fs-read);
	line-height: var(--lh-read);
	color: var(--text-muted);
	text-wrap: pretty;
}

.epicore-fn-featured__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   4. Archive C — filter row
   ═══════════════════════════════════════════════════════════════════════ */

.epicore-fn-index__filters {
	padding-top: 72px;
}

.epicore-fn-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.epicore-fn-filter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: var(--radius-chip);
	border: 1px dashed var(--tick-color);
	background: transparent;
	color: var(--text-muted);
	font-family: var(--font-mono);
	font-weight: var(--fw-mono);
	font-size: var(--fs-mono-sm);
	letter-spacing: var(--ls-mono);
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: opacity var(--dur-base) var(--ease-standard);
}

.epicore-fn-filter:hover {
	opacity: var(--hover-opacity);
}

.epicore-fn-filter:active {
	opacity: var(--press-opacity);
}

.epicore-fn-filter__dot {
	width: 6px;
	height: 6px;
	border-radius: 1px;
	background: var(--fn-accent);
}

.epicore-fn-filter__count {
	opacity: 0.6;
}

.epicore-fn-filter.is-selected {
	border-style: solid;
	border-color: var(--fn-accent);
	background: var(--fn-accent);
	color: var(--fn-accent-ink);
}

.epicore-fn-filter.is-selected .epicore-fn-filter__dot {
	background: var(--fn-accent-ink);
}

/* ═══════════════════════════════════════════════════════════════════════
   5. Archive C — card grid
   ═══════════════════════════════════════════════════════════════════════ */

.epicore-fn-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 32px;
	row-gap: 64px;
	padding-top: 64px;
}

.epicore-fn-grid[aria-busy="true"] {
	opacity: var(--hover-opacity);
	transition: opacity var(--dur-base) var(--ease-standard);
}

.epicore-fn-card__link {
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: inherit;
	text-decoration: none;
	border-radius: var(--radius-button);
}

.epicore-fn-card__link:focus-visible {
	outline: 2px solid var(--epicore-blue);
	outline-offset: 4px;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--epicore-blue) 30%, transparent);
}

.epicore-fn-card__media {
	display: block;
	height: 240px;
	border-radius: var(--radius-button);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: var(--gray-200);
	transition: opacity var(--dur-base) var(--ease-standard);
}

.epicore-fn-card__media.epicore-fn-media--placeholder {
	background-size: 6.5rem auto;
}

.epicore-fn-card__link:hover .epicore-fn-card__media,
.epicore-fn-card__link:focus-visible .epicore-fn-card__media {
	opacity: var(--hover-opacity);
}

.epicore-fn-card__link:hover .epicore-fn-wipe,
.epicore-fn-card__link:focus-visible .epicore-fn-wipe {
	background-size: 100% 2px;
}

.epicore-fn-card__terms {
	display: flex;
	align-items: center;
	gap: 10px;
}

.epicore-fn-card__title {
	display: block;
	font-family: var(--font-core);
	font-weight: var(--fw-core);
	font-size: var(--fs-card);
	line-height: var(--lh-read-tight);
	color: var(--text-primary);
	text-wrap: pretty;
}

/* The underline must be only as wide as the text, not the grid cell. */
.epicore-fn-card__title .epicore-fn-wipe {
	display: inline;
}

.epicore-fn-card__excerpt {
	display: block;
	font-family: var(--font-core);
	font-weight: var(--fw-core);
	font-size: var(--fs-read-sm);
	line-height: var(--lh-read);
	color: var(--text-muted);
	text-wrap: pretty;
}

.epicore-fn-card__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
}

.epicore-fn-index__empty {
	grid-column: 1 / -1;
	margin: 0;
	font-family: var(--font-core);
	font-size: var(--fs-read);
	color: var(--text-muted);
}

.epicore-fn-index__more {
	display: flex;
	justify-content: center;
	padding-top: 72px;
	padding-bottom: 48px;
}

.epicore-fn-index__more[hidden] {
	display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   6. Dark CTA band — full-bleed on desktop, inset on mobile
   ═══════════════════════════════════════════════════════════════════════ */

.is-style-epicore-cta-band {
	margin-top: 56px;
	background: var(--surface-dark);
	padding: 88px var(--page-gutter) 96px;
}

.is-style-epicore-cta-band > :where(.wp-block-group__inner-container) {
	max-width: 1040px;
	margin-inline: auto;
}

.is-style-epicore-cta-band .epicore-fn-band__inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 64px;
	flex-wrap: wrap;
	max-width: 1040px;
	margin-inline: auto;
}

.epicore-fn-band__copy {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 600px;
}

.is-style-epicore-cta-band .is-style-epicore-eyebrow {
	color: var(--blue-200);
}

.epicore-fn-band__copy h2 {
	margin: 0;
	font-family: var(--font-core);
	font-weight: var(--fw-core);
	font-size: var(--fs-band);
	line-height: var(--lh-display);
	letter-spacing: -0.015em;
	color: var(--text-on-dark);
	text-wrap: pretty;
}

.epicore-fn-band__copy p:not(.is-style-epicore-eyebrow) {
	margin: 0;
	max-width: var(--measure-cta);
	font-family: var(--font-core);
	font-weight: var(--fw-core);
	font-size: var(--fs-read);
	line-height: var(--lh-read);
	color: var(--blue-200);
	text-wrap: pretty;
}

/* On the single post the band's inner content matches the reading column. */
.epicore-fn-single .is-style-epicore-cta-band .epicore-fn-band__inner {
	max-width: 1040px;
}

.epicore-fn-band__inner .wp-block-button__link:focus-visible {
	outline: 2px solid var(--blue-200) !important;
	outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════
   7. Post A — header
   ═══════════════════════════════════════════════════════════════════════ */

.epicore-fn-single__header {
	padding-top: 72px;
}

.epicore-fn-breadcrumb {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 32px;
}

.epicore-fn-breadcrumb__link {
	text-decoration: underline !important;
	text-underline-offset: 0.2em;
	transition: opacity var(--dur-base) var(--ease-standard);
}

.epicore-fn-breadcrumb__link:hover {
	opacity: var(--hover-opacity);
}

.epicore-fn-breadcrumb__link:focus-visible {
	outline: 2px solid var(--epicore-blue) !important;
	outline-offset: 3px;
}

.epicore-fn-breadcrumb__sep {
	font-family: var(--font-mono);
	font-weight: var(--fw-mono);
	font-size: var(--fs-mono-xs);
	color: var(--text-muted);
}

.epicore-fn-single__masthead {
	max-width: 1040px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.epicore-fn-single__masthead .wp-block-post-title {
	margin: 0;
	font-family: var(--font-core);
	font-weight: var(--fw-core);
	font-size: var(--fs-h1);
	line-height: var(--lh-display);
	letter-spacing: -0.015em;
	color: var(--text-primary);
	text-wrap: pretty;
}

.epicore-fn-single__deck,
.epicore-fn-single__deck p {
	margin: 0;
	max-width: var(--measure);
	font-family: var(--font-core);
	font-weight: var(--fw-core);
	font-size: var(--fs-deck);
	line-height: var(--lh-read-tight);
	color: var(--text-muted);
	text-wrap: pretty;
}

/* Core adds a "read more" link to post excerpts; the design has none. */
.epicore-fn-single__deck .wp-block-post-excerpt__more-text {
	display: none;
}

.epicore-fn-byline {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-top: 8px;
	border-top: 1px dashed var(--rule-dashed-soft);
}

.epicore-fn-byline .epicore-fn-author-avatar {
	margin-top: 20px;
}

/* Shared author avatar — headshot or initials (sm / md / lg). */
.epicore-fn-author-avatar {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 50%;
	background: var(--blue-050);
	font-family: var(--font-mono);
	font-weight: var(--fw-mono);
	letter-spacing: var(--ls-mono);
	color: var(--epicore-blue);
	text-transform: uppercase;
}

.epicore-fn-author-avatar--sm {
	width: 44px;
	height: 44px;
	font-size: var(--fs-mono-sm);
}

.epicore-fn-author-avatar--md {
	width: 120px;
	height: 120px;
	font-size: var(--fs-h2);
}

.epicore-fn-author-avatar--lg {
	width: 160px;
	height: 160px;
	font-size: var(--fs-h1);
}

.epicore-fn-author-avatar--photo {
	padding: 0;
	background: var(--gray-200);
	color: transparent;
}

.epicore-fn-author-avatar__img,
.epicore-fn-author-avatar--photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.epicore-fn-byline__name {
	display: inline-block;
	align-self: flex-start;
	width: fit-content;
	max-width: 100%;
	text-decoration: underline !important;
	text-underline-offset: 0.2em;
	transition: opacity var(--dur-base) var(--ease-standard);
}

.epicore-fn-byline__name:hover {
	opacity: var(--hover-opacity);
}

.epicore-fn-byline__name:focus-visible {
	outline: 2px solid var(--epicore-blue) !important;
	outline-offset: 3px;
}

.epicore-fn-byline__text {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.epicore-fn-byline__line {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════
   8. Post A — hero, inset to the reading column
   ═══════════════════════════════════════════════════════════════════════ */

.epicore-fn-hero {
	padding-top: 48px;
}

.epicore-fn-hero .wp-block-post-featured-image {
	max-width: var(--col-read);
	margin-inline: auto;
	margin-bottom: 0;
}

.epicore-fn-hero .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 460px;
	object-fit: cover;
	border-radius: var(--radius-card);
}

.epicore-fn-hero .wp-block-post-featured-image.epicore-fn-media--placeholder {
	height: 460px;
	border-radius: var(--radius-card);
	background-size: 8.75rem auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   9. Post A — body grid and contents rail
   ═══════════════════════════════════════════════════════════════════════ */

.epicore-fn-body {
	display: grid;
	grid-template-columns: 1fr minmax(0, var(--col-read)) 1fr;
	column-gap: 0;
	align-items: start;
	padding-top: 0px;
}

.epicore-fn-contents {
	--fn-rail-pull: 508px;

	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 232px;
	justify-self: end;
	padding-right: 56px;
	position: sticky;
	top: 84px;
}

/* Pull the rail up so it starts level with the hero, but only when there is one. */
.epicore-fn-single:has(.epicore-fn-hero .wp-block-post-featured-image) .epicore-fn-contents {
	margin-top: calc(-1 * var(--fn-rail-pull));
}

.epicore-fn-contents__track {
	height: 2px;
	background: var(--rule-dashed-soft);
}

.epicore-fn-contents__progress {
	height: 2px;
	width: 0;
	background: var(--acc);
	transition: width var(--dur-base) var(--ease-standard);
}

.epicore-fn-contents__list {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-left: 1px dashed var(--tick-color);
}

.epicore-fn-contents__link {
	display: grid;
	grid-template-columns: 18px 1fr;
	align-items: start;
	gap: 10px;
	padding: 8px 0;
	margin-left: -5px;
	text-decoration: none;
	transition: opacity var(--dur-base) var(--ease-standard);
}

.epicore-fn-contents__link:hover {
	opacity: var(--hover-opacity);
}

.epicore-fn-contents__dot {
	width: 9px;
	height: 9px;
	border-radius: 2px;
	background: var(--gray-300);
	margin-top: 5px;
	flex-shrink: 0;
	transition: background-color var(--dur-base) var(--ease-standard);
}

.epicore-fn-contents__text {
	font-family: var(--font-core);
	font-weight: var(--fw-core);
	font-size: 14px;
	line-height: 1.35;
	color: var(--text-muted);
	text-wrap: pretty;
	transition: color var(--dur-base) var(--ease-standard);
}

.epicore-fn-contents__item.is-active .epicore-fn-contents__dot {
	background: var(--acc);
}

.epicore-fn-contents__item.is-active .epicore-fn-contents__text {
	color: var(--text-primary);
}

.epicore-fn-contents__foot {
	border-top: 1px dashed var(--rule-dashed);
	padding-top: 16px;
	line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════
   10. Post A — reading column
   ═══════════════════════════════════════════════════════════════════════ */

/* The 720px reading column: post body plus the tag row beneath it. */
.epicore-fn-col {
	grid-column: 2;
	min-width: 0;
	max-width: 100%;
}

.epicore-fn-prose {
	min-width: 0;
	max-width: 100%;
}

.epicore-fn-prose > * {
	margin-block: 0;
}

.epicore-fn-prose > * + * {
	margin-top: 28px;
}

.epicore-fn-prose p {
	font-family: var(--font-core);
	font-weight: var(--fw-core);
	font-size: var(--fs-read);
	line-height: var(--lh-read);
	color: var(--text-body);
	text-wrap: pretty;
}

.epicore-fn-prose h2 {
	font-family: var(--font-core);
	font-weight: var(--fw-core);
	font-size: var(--fs-h2);
	line-height: var(--lh-read-tight);
	letter-spacing: -0.01em;
	color: var(--text-primary);
	text-wrap: pretty;

	/* Clear the fixed header when the contents rail scrolls to a section. */
	scroll-margin-top: 96px;
}

.epicore-fn-prose h3 {
	font-family: var(--font-core);
	font-weight: var(--fw-core);
	font-size: var(--fs-editorial-sm);
	line-height: var(--lh-read-tight);
	color: var(--text-primary);
}

/* Reference markers in the body copy. */
.epicore-fn-prose sup {
	font-family: var(--font-mono);
	font-weight: var(--fw-mono);
	font-size: 11px;
	color: var(--epicore-blue);
}

.epicore-fn-prose a:not(.wp-block-button__link) {
	color: var(--text-accent);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.epicore-fn-prose ul,
.epicore-fn-prose ol {
	font-family: var(--font-core);
	font-weight: var(--fw-core);
	font-size: var(--fs-read);
	line-height: var(--lh-read);
	color: var(--text-body);
	padding-left: 1.2em;
}

/* ═══════════════════════════════════════════════════════════════════════
   11. Block styles (is-style-epicore-*)
       Not scoped under .epicore-fn — the style class is already namespaced,
       and pattern-inserter previews have no .epicore-fn ancestor.
   ═══════════════════════════════════════════════════════════════════════ */

/* Dashed dividers — 1px inside cards, 2px between blocks, 3px between sections.
 * !important on width beats core `.wp-block-separator:not(.is-style-wide)` (100px). */
.wp-block-separator.is-style-epicore-dashed,
.wp-block-separator.is-style-epicore-dashed-2,
.wp-block-separator.is-style-epicore-dashed-3 {
	border: 0;
	border-top-style: dashed;
	background: none;
	opacity: 1;
	width: 100% !important;
	max-width: none;
	margin-block: 20px;
	margin-top: 32px;
}

.wp-block-separator.is-style-epicore-dashed {
	border-top-width: 1px;
	border-top-color: var(--tick-color);
}

.wp-block-separator.is-style-epicore-dashed-2 {
	border-top-width: 2px;
	border-top-color: var(--rule-dashed-ink);
}

.wp-block-separator.is-style-epicore-dashed-3 {
	border-top-width: 3px;
	border-top-color: var(--rule-dashed-soft);
}

/* Eyebrow and deck helpers.
 * Element + class matches `.epicore-fn-prose p|h2|…` (0,1,1). A bare
 * `.is-style-epicore-*` loses that fight after the `.epicore-fn` unscope. */
:is(p, h1, h2, h3, h4, h5, h6).is-style-epicore-eyebrow {
	margin: 0;
	font-family: var(--font-mono);
	font-weight: var(--fw-mono);
	font-size: var(--fs-mono-xs);
	letter-spacing: var(--ls-mono);
	text-transform: uppercase;
	color: var(--text-muted);
}

:is(p, h1, h2, h3, h4, h5, h6).is-style-epicore-eyebrow a {
	color: inherit;
	text-decoration: underline !important;
	text-underline-offset: 0.2em;
	transition: opacity var(--dur-base) var(--ease-standard);
}

:is(p, h1, h2, h3, h4, h5, h6).is-style-epicore-eyebrow a:hover {
	opacity: var(--hover-opacity);
}

:is(p, h1, h2, h3, h4, h5, h6).is-style-epicore-eyebrow a:focus-visible {
	outline: 2px solid var(--epicore-blue) !important;
	outline-offset: 3px;
}

:is(p, h1, h2, h3, h4, h5, h6).is-style-epicore-deck {
	margin: 0;
	max-width: var(--measure);
	font-family: var(--font-core);
	font-weight: var(--fw-core);
	font-size: var(--fs-read);
	line-height: var(--lh-read);
	color: var(--text-muted);
	text-wrap: pretty;
}

/* Figure — rounded image with a mono uppercase caption. */
.wp-block-image.is-style-epicore-figure,
.wp-block-image.is-style-epicore-figure-dark {
	margin: 24px 0 12px;
}

.wp-block-image.is-style-epicore-figure img,
.wp-block-image.is-style-epicore-figure-dark img {
	width: 100%;
	border-radius: var(--radius-card);
}

/*
 * Fig. 02 in the sample post is a conference slide with a white background, so
 * it sits contained on the ink ground rather than cropped.
 */
.wp-block-image.is-style-epicore-figure-dark img {
	background: var(--ink);
	object-fit: contain;
}

.wp-block-image.is-style-epicore-figure figcaption,
.wp-block-image.is-style-epicore-figure-dark figcaption {
	margin-top: 12px;
	font-family: var(--font-mono);
	font-weight: var(--fw-mono);
	font-size: var(--fs-mono-xs);
	letter-spacing: var(--ls-mono);
	text-transform: uppercase;
	color: var(--text-muted);
	text-align: left;
	text-wrap: pretty;
}

/* Pull quote. */
.wp-block-pullquote.is-style-epicore-quote {
	margin: 32px 0;
	padding: 0 0 0 24px;
	border: 0;
	border-left: 2px solid var(--acc, var(--epicore-blue));
	text-align: left;
}

.wp-block-pullquote.is-style-epicore-quote p {
	font-family: var(--font-core);
	font-weight: var(--fw-core);
	font-size: var(--fs-h2);
	line-height: var(--lh-read-tight);
	letter-spacing: -0.01em;
	color: var(--text-primary);
	text-wrap: pretty;
}

.wp-block-pullquote.is-style-epicore-quote cite {
	display: block;
	margin-top: 16px;
	font-family: var(--font-mono);
	font-weight: var(--fw-mono);
	font-size: var(--fs-mono-xs);
	font-style: normal;
	letter-spacing: var(--ls-mono);
	text-transform: uppercase;
	color: var(--text-muted);
}

/*
 * Numbered reference row — editable number + citation via epicore/reference.
 * Handoff (Post A): mono xs / muted / lh 1.6 / gap 12; index in epicore-blue.
 * Explicit child rules beat `.epicore-fn-prose p|a` and editor defaults.
 */
.epicore-fn-reference,
.wp-block-epicore-reference {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 0;
	font-family: var(--font-mono);
	font-weight: var(--fw-mono);
	font-size: var(--fs-mono-xs);
	letter-spacing: var(--ls-mono);
	line-height: 1.6;
	color: var(--text-muted);
	text-transform: none;
	text-wrap: pretty;
}

.epicore-fn-prose > .epicore-fn-reference + .epicore-fn-reference,
.epicore-fn-prose > .wp-block-epicore-reference + .wp-block-epicore-reference,
.epicore-fn-reference + .epicore-fn-reference,
.wp-block-epicore-reference + .wp-block-epicore-reference {
	margin-top: 14px;
}

/* Inside the references Group, flex gap alone owns vertical rhythm. */
.epicore-fn-references .epicore-fn-reference + .epicore-fn-reference,
.epicore-fn-references .wp-block-epicore-reference + .wp-block-epicore-reference {
	margin-top: 0;
}

.epicore-fn-reference__number {
	flex-shrink: 0;
	font-family: var(--font-mono);
	font-weight: var(--fw-mono);
	font-size: var(--fs-mono-xs);
	letter-spacing: var(--ls-mono);
	line-height: 1.6;
	color: var(--epicore-blue);
	text-transform: none;
}

.epicore-fn-reference__text {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-family: var(--font-mono);
	font-weight: var(--fw-mono);
	font-size: var(--fs-mono-xs);
	letter-spacing: var(--ls-mono);
	line-height: 1.6;
	color: var(--text-muted);
	text-transform: none;
	text-wrap: pretty;
}

.epicore-fn-reference__text p {
	margin: 0;
	font-family: var(--font-mono);
	font-weight: var(--fw-mono);
	font-size: var(--fs-mono-xs);
	letter-spacing: var(--ls-mono);
	line-height: 1.6;
	color: var(--text-muted);
	text-transform: none;
	text-wrap: pretty;
}

.epicore-fn-prose .epicore-fn-reference a:not(.wp-block-button__link),
.epicore-fn-prose .wp-block-epicore-reference a:not(.wp-block-button__link),
.epicore-fn-reference a,
.wp-block-epicore-reference a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	border-bottom: none;
}

/* References section wrapper (Group with class epicore-fn-references). */
.epicore-fn-references {
	margin-top: 48px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.epicore-fn-references > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.epicore-fn-references > .wp-block-separator.is-style-epicore-dashed,
.epicore-fn-references > .wp-block-separator.is-style-epicore-dashed-2,
.epicore-fn-references > .wp-block-separator.is-style-epicore-dashed-3 {
	margin-block: 0;
}

.epicore-fn-prose > .epicore-fn-references {
	margin-top: 48px;
}

.epicore-fn-references .epicore-fn-references__group {
	font-family: var(--font-mono);
	font-weight: var(--fw-mono);
	font-size: var(--fs-mono-xs);
	letter-spacing: var(--ls-mono);
	text-transform: uppercase;
	color: var(--text-primary);
}

/* Extra breath before a new group heading (after citations). */
.epicore-fn-references .epicore-fn-reference + .epicore-fn-references__group,
.epicore-fn-references .wp-block-epicore-reference + .epicore-fn-references__group {
	margin-top: 6px !important;
}

/* Tag row — dashed outline chips. */
.wp-block-post-terms.is-style-epicore-tags {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 32px;
}

.wp-block-post-terms.is-style-epicore-tags .wp-block-post-terms__prefix {
	font-family: var(--font-mono);
	font-weight: var(--fw-mono);
	font-size: var(--fs-mono-xs);
	letter-spacing: var(--ls-mono);
	text-transform: uppercase;
	color: var(--text-muted);
	margin-right: 6px;
}

.wp-block-post-terms.is-style-epicore-tags a {
	font-family: var(--font-mono);
	font-weight: var(--fw-mono);
	font-size: var(--fs-mono-xs);
	letter-spacing: var(--ls-mono);
	text-transform: uppercase;
	color: var(--text-muted);
	text-decoration: none;
	padding: 7px 10px;
	border-radius: var(--radius-chip);
	border: 1px dashed var(--tick-color);
	transition: opacity var(--dur-base) var(--ease-standard);
}

.wp-block-post-terms.is-style-epicore-tags a:hover {
	opacity: var(--hover-opacity);
}

.wp-block-post-terms.is-style-epicore-tags .wp-block-post-terms__separator {
	display: none;
}

/* Inline tinted CTA panel. */
.is-style-epicore-cta-panel {
	margin: 32px 0 8px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	background: var(--surface-tint);
	border-radius: var(--radius-card);
	padding: 48px 56px 52px;
}

.is-style-epicore-cta-panel > * {
	margin-top: 0;
	margin-bottom: 0;
}

.is-style-epicore-cta-panel .is-style-epicore-eyebrow {
	color: var(--epicore-blue);
}

.is-style-epicore-cta-panel h2,
.is-style-epicore-cta-panel h3 {
	margin: 0;
	font-family: var(--font-core);
	font-weight: var(--fw-core);
	font-size: var(--fs-h2);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--text-primary);
	text-wrap: pretty;
}

.is-style-epicore-cta-panel p:not(.is-style-epicore-eyebrow) {
	margin: 0;
	max-width: var(--measure-cta);
	font-family: var(--font-core);
	font-weight: var(--fw-core);
	font-size: var(--fs-read);
	line-height: var(--lh-read);
	color: var(--text-primary);
}

.is-style-epicore-cta-panel .wp-block-buttons {
	gap: 16px;
}

/* Outline CTAs inherit white from global button accents — force ink on the tinted panel. */
.is-style-epicore-cta-panel .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--ink);
	color: var(--text-primary);
	background: transparent;
}

/* FAQ accordion — eyebrow, dashed rule, collapsible Q&A.
 * Eyebrow → rule uses the same 14px stack as .epicore-fn-references. */
.is-style-epicore-faq {
	margin-top: 56px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.is-style-epicore-faq > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.is-style-epicore-faq > .wp-block-separator.is-style-epicore-dashed,
.is-style-epicore-faq > .wp-block-separator.is-style-epicore-dashed-2,
.is-style-epicore-faq > .wp-block-separator.is-style-epicore-dashed-3 {
	margin-block: 0;
}

.is-style-epicore-faq .wp-block-accordion {
	margin: 0;
}

.is-style-epicore-faq .wp-block-accordion-item {
	margin: 0;
	border-bottom: 1px dashed var(--rule-dashed-soft);
}

.is-style-epicore-faq .wp-block-accordion-heading {
	margin: 0;
	font-family: var(--font-core);
	font-weight: var(--fw-core);
	font-size: var(--fs-faq);
	line-height: var(--lh-read-tight);
	color: var(--text-primary);
	text-wrap: pretty;
}

.is-style-epicore-faq .wp-block-accordion-heading__toggle {
	gap: 16px;
	padding: 16px 0;
	align-items: flex-start;
}

.is-style-epicore-faq .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

.is-style-epicore-faq .wp-block-accordion-heading__toggle-icon {
	flex-shrink: 0;
	margin-top: 0.15em;
	font-weight: var(--fw-core);
	line-height: 1;
}

.is-style-epicore-faq .wp-block-accordion-panel {
	margin: 0;
}

.is-style-epicore-faq .wp-block-accordion-panel > * {
	margin: 0;
}

.is-style-epicore-faq .wp-block-accordion-panel > * + * {
	margin-top: 12px;
}

.is-style-epicore-faq .wp-block-accordion-panel p {
	padding-bottom: 16px;
	font-size: var(--fs-read-sm);
	line-height: var(--lh-read);
	color: var(--text-muted);
	text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════════════════════
   12. Post A — keep reading
   ═══════════════════════════════════════════════════════════════════════ */

.epicore-fn-related {
	padding-top: 64px;
}

.epicore-fn-related__label {
	display: block;
	margin-bottom: 20px;
}

.epicore-fn-related__grid {
	border-top: 2px dashed var(--rule-dashed-ink);
	padding-top: 40px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 32px;
	row-gap: 48px;
}

.epicore-fn-card--related .epicore-fn-card__media {
	height: 200px;
}

/* ═══════════════════════════════════════════════════════════════════════
   13. Authors — archive + single
   ═══════════════════════════════════════════════════════════════════════ */

.epicore-fn-author-archive__list {
	padding-top: 48px;
	padding-bottom: 64px;
}

.epicore-fn-author-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 32px;
	row-gap: 48px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.epicore-fn-author-card {
	margin: 0;
}

.epicore-fn-author-card__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	color: inherit;
	text-align: center;
	text-decoration: none !important;
	border-radius: var(--radius-button);
	transition: opacity var(--dur-base) var(--ease-standard);
}

.epicore-fn-author-card__link:hover {
	opacity: var(--hover-opacity);
}

.epicore-fn-author-card__link:focus-visible {
	outline: 2px solid var(--epicore-blue) !important;
	outline-offset: 4px;
}

.epicore-fn-author-card__name {
	margin: 0;
	font-family: var(--font-core);
	font-weight: var(--fw-core);
	font-size: var(--fs-h2);
	line-height: var(--lh-tight, 1.25);
	letter-spacing: -0.01em;
	text-align: center;
}

.epicore-fn-author-card__link:hover .epicore-fn-author-card__name {
	text-decoration: underline;
}

.epicore-fn-author-card .epicore-fn-author__job {
	font-size: var(--fs-mono-sm);
	text-align: center;
}

.epicore-fn-author__job {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-mono-sm);
	letter-spacing: var(--ls-mono);
	text-transform: uppercase;
	color: var(--text-muted);
	white-space: normal;
}

.epicore-fn-author-single__header {
	padding-top: 48px;
}

.epicore-fn-author-single__masthead {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 32px;
	width: 100%;
	max-width: 100%;
	padding-top: 40px;
	margin-inline: 0;
}

.epicore-fn-author-single__masthead.is-layout-flex {
	justify-content: flex-start;
}

.epicore-fn-author-single__identity {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-inline: 0;
}

.epicore-fn-author-single__identity .wp-block-post-title {
	margin: 0;
}

.epicore-fn-author-single__bio {
	padding-top: 40px;
}

.epicore-fn-author-single__bio .epicore-fn-prose,
.epicore-fn-author-single__bio .wp-block-post-content {
	max-width: var(--col-read);
	margin-inline: 0;
}

.epicore-fn-author-posts {
	padding-top: 64px;
}

.epicore-fn-author-posts__label {
	display: block;
	margin-bottom: 20px;
}

.epicore-fn-author-posts__grid {
	border-top: 2px dashed var(--rule-dashed-ink);
	padding-top: 40px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 32px;
	row-gap: 64px;
}

/* ═══════════════════════════════════════════════════════════════════════
   14. Featured stacks before the shared mobile breakpoint
       (676px media column needs room; $break-wide pair = 1279px)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
	.epicore-fn-featured {
		padding-top: 48px;
	}

	.epicore-fn-featured__link {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.epicore-fn-featured__image {
		height: 360px;
	}

	.is-style-epicore-cta-band .epicore-fn-band__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 28px;
		width: 100%;
		max-width: none;
	}

	.epicore-fn-single .is-style-epicore-cta-band .epicore-fn-band__inner {
		width: 100%;
		max-width: none;
	}

	.is-style-epicore-cta-band .epicore-fn-band__copy {
		width: 100%;
		max-width: none;
	}

	.is-style-epicore-cta-band .wp-block-buttons {
		width: 100%;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   14. Below $break-wide — contents rail needs the side column
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1279px) {
	.epicore-fn-contents {
		display: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   15. Mobile 390
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 781px) {
	.epicore-fn-archive__header {
		flex-wrap: wrap;
		gap: 20px;
		padding-top: 48px;
	}

	.epicore-fn-archive__rule {
		padding-top: 32px;
	}

	.epicore-fn-featured {
		padding-top: 40px;
	}

	.epicore-fn-featured__image {
		height: 260px;
	}

	.epicore-fn-index__filters {
		padding-top: 40px;
	}

	.epicore-fn-grid {
		grid-template-columns: 1fr;
		row-gap: 48px;
		padding-top: 40px;
	}

	.epicore-fn-card__media {
		height: 220px;
	}

	.epicore-fn-index__more {
		padding-top: 48px;
		padding-bottom: 32px;
	}

	/* The band stays inset on mobile and its buttons stack full-width. */
	.is-style-epicore-cta-band {
		margin-top: 40px;
		margin-inline: var(--page-gutter);
		border-radius: var(--radius-card);
		padding: 56px 20px 64px;
	}

	.is-style-epicore-cta-band .epicore-fn-band__inner {
		flex-wrap: wrap;
		gap: 28px;
	}

	.is-style-epicore-cta-band .wp-block-buttons {
		flex-direction: column;
		width: 100%;
	}

	.is-style-epicore-cta-band .wp-block-button,
	.is-style-epicore-cta-panel .wp-block-button {
		width: 100%;
	}

	.is-style-epicore-cta-band .wp-block-button__link,
	.is-style-epicore-cta-panel .wp-block-button__link {
		width: 100%;
		text-align: center;
		white-space: normal;
	}

	.epicore-fn-single__header {
		padding-top: 40px;
	}

	.epicore-fn-single__masthead {
		max-width: 100%;
	}

	.epicore-fn-hero {
		padding-top: 32px;
	}

	.epicore-fn-hero .wp-block-post-featured-image img {
		height: 260px;
	}

	.epicore-fn-hero .wp-block-post-featured-image.epicore-fn-media--placeholder {
		height: 260px;
		background-size: 6.5rem auto;
	}

	.epicore-fn-body {
		grid-template-columns: 1fr;
		/* padding-top: 40px; */
	}

	.epicore-fn-col {
		grid-column: 1;
	}

	.is-style-epicore-cta-panel {
		padding: 32px 24px 36px;
	}

	.is-style-epicore-cta-panel .wp-block-buttons {
		flex-direction: column;
		width: 100%;
	}

	.epicore-fn-related__grid {
		grid-template-columns: 1fr;
		row-gap: 40px;
	}

	.epicore-fn-author-archive__grid,
	.epicore-fn-author-posts__grid {
		grid-template-columns: 1fr;
	}

	.epicore-fn-author-single__masthead {
		flex-direction: column;
		align-items: flex-start;
	}
}