/* WordPress emits an unlayered :where(figure) margin. Keep this override scoped
   to the new case studies; do not change approved homepage figure behavior. */
.case-study .case-hero__visual { margin: 0 auto; }
.case-study .case-visual-story figure { margin: 0; }

@layer components {
	/* Work and case studies share the approved global scale, never homepage rules. */
	.portfolio-eyebrow {
		display: flex;
		align-items: center;
		gap: var(--fg-space-3);
		color: var(--fg-color-text-muted);
		font-size: var(--fg-font-size-xs);
		font-weight: var(--fg-font-weight-medium);
		letter-spacing: var(--fg-letter-spacing-meta);
		text-transform: uppercase;
	}
	.portfolio-eyebrow::before {
		content: "";
		inline-size: var(--fg-space-6);
		block-size: 1px;
		flex: 0 0 auto;
		background: var(--fg-brand-primary);
	}
	.portfolio-intro {
		display: grid;
		gap: var(--fg-space-6);
		padding-block: var(--fg-section-space-compact) var(--fg-section-space-standard);
	}
	.portfolio-intro h1 {
		max-inline-size: 18ch;
		letter-spacing: var(--fg-letter-spacing-display);
		line-height: var(--fg-line-height-tight);
	}
	.work-entry {
		padding-block: var(--fg-space-6) var(--fg-section-space-standard);
		border-block-start: var(--fg-border);
	}
	.work-entry__heading {
		display: grid;
		grid-template-columns: 2rem minmax(0, 1fr);
		gap: var(--fg-space-3) var(--fg-space-4);
		align-items: baseline;
		margin-block-end: var(--fg-space-6);
	}
	.work-entry__number {
		color: var(--fg-color-text-muted);
		font-family: var(--fg-font-mono);
		font-size: var(--fg-font-size-xs);
	}
	.work-entry__heading h2 { font-size: var(--fg-font-size-section); line-height: var(--fg-line-height-tight); }
	.work-entry__heading h2 a { text-decoration: none; }
	.work-entry__heading h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
	.work-entry__category { grid-column: 2; color: var(--fg-color-text-muted); font-size: var(--fg-font-size-sm); }
	.work-entry__body { display: grid; gap: var(--fg-space-6); }
	.work-entry__visual { display: block; min-inline-size: 0; }
	.work-entry__visual img { inline-size: 100%; border-radius: var(--fg-radius-xs); }
	.work-entry__details { display: grid; gap: var(--fg-space-5); align-content: end; }
	.work-entry__details p { max-inline-size: 43ch; color: var(--fg-color-text-muted); }
	.work-entry__details .fg-text-action { justify-self: start; }
	.work-entry--dark-frame .work-entry__visual { padding: var(--fg-space-4); border: 1px solid var(--fg-color-border-strong); background: var(--fg-color-surface-secondary); }
	.work-index__empty { padding-block-end: var(--fg-section-space-standard); }
	.project-cta { padding-block: var(--fg-section-space-standard); border-block-start: var(--fg-border); }
	.project-cta__inner { display: flex; align-items: start; justify-content: space-between; gap: var(--fg-space-6); flex-direction: column; }
	.project-cta h2 { max-inline-size: 16ch; line-height: var(--fg-line-height-tight); }
	.case-hero { padding-block: var(--fg-space-6) var(--fg-section-space-compact); }
	.case-breadcrumb { display: flex; gap: var(--fg-space-3); flex-wrap: wrap; color: var(--fg-color-text-muted); font-size: var(--fg-font-size-sm); }
	.case-breadcrumb a { text-decoration: none; }
	.case-breadcrumb a:hover { text-decoration: underline; }
	.case-breadcrumb [aria-current] { color: var(--fg-color-text); }
	.case-hero__intro { display: grid; gap: var(--fg-space-6); padding-block: var(--fg-space-8) var(--fg-space-7); }
	.case-hero__identity { display: grid; align-content: start; gap: var(--fg-space-5); }
	.case-hero h1 { letter-spacing: var(--fg-letter-spacing-display); overflow-wrap: break-word; }
	.case-hero__details { display: grid; gap: var(--fg-space-5); align-content: end; }
	.case-hero__summary { max-inline-size: 46ch; color: var(--fg-color-text-muted); font-size: var(--fg-font-size-lg); }
	.case-hero__details .fg-text-action { justify-self: start; }
	.case-hero__year { color: var(--fg-color-text-muted); font-family: var(--fg-font-mono); font-size: var(--fg-font-size-sm); }
	.case-hero__visual img { inline-size: 100%; border-radius: var(--fg-radius-xs); }
	.case-study--portrait-device .case-hero__visual { max-inline-size: 38rem; margin-inline: auto; }
	.case-study--editorial-wide .case-hero__visual { max-inline-size: 66rem; margin-inline: auto; }
	.case-study--dark-frame .case-hero__visual { max-inline-size: 72rem; margin-inline: auto; padding: var(--fg-space-4); border: 1px solid var(--fg-color-border-strong); background: var(--fg-color-surface-secondary); }
	.case-story:empty { display: none; }
	.case-story-section { display: grid; gap: var(--fg-space-5); padding-block: var(--fg-space-7); border-block-start: var(--fg-border); }
	.case-story-section h2 { font-size: var(--fg-font-size-xl); }
	.case-story-section__content { max-inline-size: 64ch; }
	.case-story-section__content > * + * { margin-block-start: var(--fg-space-5); }
	.case-story-section__content h3 { margin-block-start: var(--fg-space-7); font-size: var(--fg-font-size-lg); }
	.case-story-section__content h4 { font-size: var(--fg-font-size-body); }
	.case-story-section__content ul, .case-story-section__content ol { padding-inline-start: var(--fg-space-5); }
	.case-story-section__content li + li { margin-block-start: var(--fg-space-2); }
	.case-story-section__content blockquote { padding-inline-start: var(--fg-space-5); border-inline-start: 1px solid var(--fg-brand-primary); }
	.case-technologies ul { display: flex; flex-wrap: wrap; gap: var(--fg-space-3) var(--fg-space-6); padding: 0; margin: 0; list-style: none; color: var(--fg-color-text-muted); }
	.case-visual-story { display: grid; gap: var(--fg-space-6); padding-block-end: var(--fg-space-7); }
	.case-visual-story img { inline-size: 100%; }
	@media (min-width: 48rem) {
		.work-entry__heading { grid-template-columns: 3rem minmax(0, 1fr); }
		.work-entry__body { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--fg-grid-gap); }
		.work-entry__visual { grid-column: 1 / span 8; }
		.work-entry__details { grid-column: 9 / -1; }
		.work-entry--portrait-device .work-entry__visual { grid-column: 2 / span 5; }
		.work-entry--portrait-device .work-entry__details { grid-column: 8 / -1; align-self: center; }
		.work-entry--editorial-wide .work-entry__visual { grid-column: 3 / -1; }
		.work-entry--editorial-wide .work-entry__details { grid-column: 1 / span 7; margin-block-start: var(--fg-space-5); }
		.work-entry--dark-frame .work-entry__visual { grid-column: 5 / -1; }
		.work-entry--dark-frame .work-entry__details { grid-column: 1 / span 4; grid-row: 1; align-self: center; }
		.work-entry--text-only .work-entry__details { grid-column: 2 / span 8; }
		.project-cta__inner { flex-direction: row; align-items: center; }
		.case-hero__intro { padding-block: var(--fg-space-9) var(--fg-space-8); }
		.case-story-section { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--fg-space-7); }
		.case-visual-story { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
		.case-visual-story figure:only-of-type { grid-column: 1 / -1; }
	}
	@media (min-width: 64rem) {
		.portfolio-intro { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--fg-grid-gap); }
		.portfolio-intro .portfolio-eyebrow { grid-column: 1 / span 3; align-self: start; margin-block-start: var(--fg-space-3); }
		.portfolio-intro h1 { grid-column: 4 / -1; }
		.work-entry__heading { grid-template-columns: 4rem minmax(0, 1.5fr) minmax(0, 1fr); margin-block-end: var(--fg-space-7); }
		.work-entry__category { grid-column: 3; justify-self: end; text-align: end; }
		.work-entry--interface-dominant .work-entry__visual { grid-column: 1 / span 9; }
		.work-entry--interface-dominant .work-entry__details { grid-column: 10 / -1; }
		.work-entry--portrait-device .work-entry__visual { grid-column: 2 / span 4; }
		.work-entry--portrait-device .work-entry__details { grid-column: 8 / span 4; }
		.work-entry--dark-frame .work-entry__visual { padding: var(--fg-space-6); }
		.case-hero__intro { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--fg-space-9); }
		.case-hero__identity { align-content: center; }
		.case-hero__details { align-content: center; }
		.case-study--dark-frame .case-hero__visual { padding: var(--fg-space-7); }
	}
}