/* About uses the shared split-screen guides in assets/css/main.css. */
.es-about { --es-about-brown: var( --wp--preset--color--contrast, #3d251d ); --es-about-cream: var( --wp--preset--color--base, #f0eeed ); --es-about-mist: var( --wp--preset--color--mist, #dbd0d4 ); position: relative; background: var( --es-about-brown ); color: var( --es-about-cream ); }
.es-about p, .es-about h2 { margin: 0; }
.es-about__story { display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ); align-items: start; }
.es-about__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
/* Mobile-image <picture> (eleventh_space_picture) adds no box; img rules and crops apply as before. */
.es-about picture { display: contents; }
.es-about__sticky img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.es-about__rail { position: absolute; top: 50%; left: 1.5rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.125rem; line-height: 0.9375rem; text-transform: uppercase; transform: translate( -50%, -50% ) rotate( -90deg ); }
.es-about__rail::after { content: none; }
.es-about__chapters { padding: 0 var( --es-split-gutter-x ); }

/* Source order stays image → heading → copy for the mobile stack. */
.es-about__chapter { display: flex; flex-direction: column; align-items: flex-start; min-height: 100vh; min-height: 100svh; padding-block: var( --es-split-gutter-y ); }
.es-about__media { position: relative; flex: none; width: var( --es-split-image-width ); aspect-ratio: 339 / 424; overflow: hidden; align-self: flex-end; }
.es-about__chapter-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.es-about__title { margin-top: var( --es-split-gap ); font-family: var( --wp--preset--font-family--display, "formiga", serif ); font-size: 2rem; font-weight: 400; letter-spacing: -0.015625rem; line-height: 1.1; }
.es-about__copy { max-width: var( --es-split-copy-width ); margin: 0; font-family: var( --wp--preset--font-family--body, "work-sans", sans-serif ); font-size: 1rem; font-weight: 400; letter-spacing: -0.015625rem; line-height: 1.25; }
.es-about__copy p + p { margin-top: 1.25rem; }
.es-about__copy .es-about__aside { color: var( --es-about-mist ); }

/* Top-aligned heading / image; the copy ends on the shared bottom guide. */
@media ( min-width: 768px ) {
	.es-about:not( .es-about--editor, .es-about--preview ) .es-about__title { grid-area: 1 / 1 / 2 / 2; margin-top: 0; }
	.es-about:not( .es-about--editor, .es-about--preview ) .es-about__media { grid-area: 1 / 2 / 3 / 3; justify-self: end; align-self: start; }
	.es-about:not( .es-about--editor, .es-about--preview ) .es-about__copy { grid-area: 3 / 1 / 4 / 3; align-self: end; }
	/* Figma image-fill transforms, including zoom (position alone cannot match them). */
	.es-about__chapter--foundations .es-about__chapter-image { position: absolute; width: 278%; height: 139%; max-width: none; left: -100.48%; top: -21.99%; object-fit: fill; }
	.es-about__chapter--eleven .es-about__chapter-image { position: absolute; width: 236%; height: 125.46%; max-width: none; left: 0; top: -21.01%; object-fit: fill; }
}

@media ( min-width: 768px ) and ( max-width: 1200px ) {
	.es-about:not( .es-about--editor, .es-about--preview ) .es-about__media { grid-area: 2 / 1 / 3 / 2; }
	.es-about:not( .es-about--editor, .es-about--preview ) .es-about__copy { grid-area: 3 / 1 / 4 / 2; }
}

@media ( min-width: 768px ) and ( max-height: 800px ), ( min-width: 768px ) and ( max-width: 1100px ) {
	.es-about__copy { font-size: 0.875rem; }
	.es-about__copy p + p { margin-top: 0.875rem; }
}

.es-about--editor .es-about__sticky { height: 42rem; }
.es-about--editor .es-about__chapters { padding-inline: clamp( 1.5rem, 4vw, 3rem ); }
.es-about--editor .es-about__chapter { min-height: 34rem; padding: 3rem 0; }
.es-about--editor .es-about__copy { font-size: 0.8125rem; }
.es-about--editor .es-about__title { margin-top: 1.5rem; font-size: 1.625rem; }
.es-about--editor .es-about__copy p + p { margin-top: 0.875rem; }
.es-about--editor .es-about__media { width: clamp( 8rem, 14vw, 11rem ); }
.es-block-media-control { margin-bottom: 1.5rem; }
.es-block-media-control img { display: block; width: 100%; max-height: 10rem; margin-bottom: 0.5rem; object-fit: cover; }

/*
 * Mobile (Figma "04-About", 402×2762): plain stack, 18px gutters. Label + rule,
 * sticky image inset (367×447), then per chapter image → heading → body → 1px rule.
 */
@media ( width < 768px ) {
	.es-about__story { display: block; padding: 0 1.125rem; }
	.es-about__sticky { position: relative; height: auto; padding-top: 6.5rem; overflow: visible; }
	.es-about__sticky img { aspect-ratio: 367 / 447; height: auto; }
	.es-about__rail { position: absolute; top: 4.25rem; left: 0; right: 0; display: flex; align-items: center; gap: 1.125rem; font-size: 0.6875rem; letter-spacing: 0.125rem; transform: none; }
	.es-about__rail::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.6; }
	.es-about__chapters { padding: 0; }
	.es-about__chapter { min-height: auto; padding: clamp( 1.5rem, 4svh, 2.5rem ) 0; }
	.es-about__chapter + .es-about__chapter { border-top: 1px solid rgba( 240, 238, 237, 0.25 ); }
	.es-about__media { width: 100%; height: auto; aspect-ratio: 367 / 447; align-self: stretch; margin-top: 0; }
	/* The frame runs staircase (sticky) image → Foundations copy; the desktop inset image for chapter 1 has no mobile counterpart. */
	.es-about__chapter--foundations .es-about__media { display: none; }
	/* Override the heading reset and desktop chapter margins before the Foundations exception. */
	.es-about__chapter .es-about__title { margin-top: 2rem; margin-bottom: 1rem; }
	.es-about__chapter--foundations .es-about__title { margin-top: 0; }
	.es-about__chapter--eleven .es-about__title { order: 0; align-self: flex-start; text-align: left; }
	.es-about__title { font-size: 1.375rem; }
	.es-about__copy { max-width: none; font-size: 0.875rem; line-height: 1.35; }
	.es-about__copy p + p { margin-top: 0.75rem; }
	.es-about--editor .es-about__chapters { padding: 0; }
	.es-about--editor .es-about__chapter { padding: 2rem 0; }
	.es-about--editor .es-about__sticky { height: auto; }
}
.es-about--preview { height: auto; min-height: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.es-about--preview .es-about__story { display: grid; height: 100%; padding: 0; }
.es-about--preview .es-about__sticky { position: sticky; height: 100%; }
.es-about--preview .es-about__chapters { padding-inline: clamp( 1rem, 3vw, 2rem ); }
.es-about--preview .es-about__chapter { min-height: 100%; padding-top: 2rem; }