.es-work { position: relative; /* No explicit width: alignfull relies on auto width plus the negative root-padding margins core sets; width:100% left a 2×24px strip. */ background: var( --wp--preset--color--contrast, #3d251d ); color: var( --wp--preset--color--base, #f0eeed ); }
.es-work figure, .es-work p { margin: 0; }
.es-work__rail { position: sticky; top: 50svh; height: 0; z-index: 2; pointer-events: none; }
.es-work__rail p { position: absolute; left: 2rem; font-family: var( --wp--preset--font-family--body, "work-sans", sans-serif ); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.125rem; line-height: 0.9375rem; text-transform: uppercase; white-space: nowrap; color: var( --wp--preset--color--base, #f0eeed ); transform: translate( -50%, -50% ) rotate( -90deg ); }
.es-work__track { display: grid; }
.es-work__track--mobile { display: none; }
.es-work__scene { position: relative; min-width: 0; min-height: 100svh; overflow: hidden; background: var( --wp--preset--color--contrast, #3d251d ); }
.es-work__scene--split { display: grid; grid-template-columns: 48% 52%; }
.es-work__media { position: relative; min-width: 0; width: 100%; height: 100%; min-height: inherit; overflow: hidden; }
.es-work__media img { display: block; width: var( --work-zoom, 100% ); max-width: none; height: 100%; object-fit: cover; object-position: var( --work-x, 50% ) var( --work-y, 50% ); transform: scaleX( var( --work-stretch, 1 ) ); transform-origin: var( --work-x, 50% ) center; }
.es-work__caption { position: absolute; z-index: 1; max-width: min( 52rem, calc( 100% - 4rem ) ); font-family: var( --wp--preset--font-family--body, "work-sans", sans-serif ); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.125rem; line-height: 0.9375rem; text-align: center; text-transform: uppercase; color: #fff; pointer-events: none; }
.es-work__caption--one { top: 5.5%; left: 50%; width: 95%; transform: translateX( -50% ); }
.es-work__caption--two { right: 1.5rem; bottom: 2.5%; width: 95%; }
.es-work__caption--three { right: 2%; bottom: 3.5%; left: 2%; max-width: none; }
.es-work__caption--four { top: 3%; left: 12%; text-align: left; }
.es-work__caption--five { top: 2.5%; right: 2%; left: 2%; max-width: none; }
.es-work__caption--six { right: 2%; bottom: 10%; left: 2%; max-width: none; }
.es-work__caption--seven { right: 3%; bottom: 2.5%; left: 3%; max-width: none; text-align: left; }
.es-work__cursor { display: none; }

@media ( min-width: 768px ) and ( prefers-reduced-motion: no-preference ) {
	.es-work--ready .es-work__stage { position: sticky; top: 0; width: 100%; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; }
	.es-work--ready .es-work__rail { position: absolute; top: 50%; left: 0; }
	.es-work--ready .es-work__track--desktop { display: flex; width: 100%; height: 100%; /* Scenes size against the stage, not the track (max-content made 100% circular). */ transform: translate3d( 0, 0, 0 ); }
	.es-work--ready .es-work__scene { flex: 0 0 100%; width: 100%; min-height: 0; height: 100%; }
	.es-work--ready.es-work--near .es-work__track { will-change: transform; }
}

@media ( hover: hover ) and ( pointer: fine ) and ( min-width: 768px ) and ( prefers-reduced-motion: no-preference ) {
	.es-work--ready.es-work--cursor-active .es-work__stage { cursor: none; }
	.es-work--ready .es-work__cursor { position: fixed; top: 0; left: 0; z-index: 4; display: block; width: 9px; height: 10px; overflow: hidden; opacity: 0; transform: translate3d( -50%, -50%, 0 ); pointer-events: none; }
	.es-work--ready .es-work__cursor img { display: block; width: 17px; max-width: none; height: 10px; }
	.es-work--ready.es-work--cursor-active .es-work__cursor { opacity: 1; }
	.es-work--ready .es-work__cursor.is-right img { transform: translateX( -8px ); }
}

/* Desktop with reduced motion: no pin, scenes stack vertically. */
@media ( min-width: 768px ) and ( prefers-reduced-motion: reduce ) {
	.es-work__scene--split { display: block; }
	.es-work__scene--split .es-work__media { height: 75svh; min-height: 0; }
}

.es-work__label, .es-work__arrows { display: none; }

/* Each mobile composition owns its clipped snap frame, independent of order.
 * Figma frames: 402 × 765; inset media: x54, width294, height220. */
@media ( width < 768px ) {
	.es-work[data-mobile-scenes="0"] { display: none; }
	.es-work__rail, .es-work__track--desktop { display: none; }
	.es-work__stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
	.es-work__track--mobile { display: flex; position: relative; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.es-work__track::-webkit-scrollbar { display: none; }
	.es-work__track--mobile .es-work__scene { display: block; flex: 0 0 100%; width: 100%; height: 100%; min-height: 0; overflow: hidden; contain: paint; scroll-snap-align: start; scroll-snap-stop: always; background: #2d1810; }
	.es-work__track--mobile .es-work__media { position: absolute; inset: 0; width: auto; height: auto; min-height: 0; }
	.es-work__track--mobile .es-work__scene--split .es-work__media:first-child { bottom: 50%; }
	.es-work__track--mobile .es-work__scene--split .es-work__media:nth-child(2) { top: 50%; }
	.es-work__track--mobile .es-work__scene--split-top .es-work__media:first-child { bottom: auto; height: 48.104575%; }
	.es-work__track--mobile .es-work__scene--split-top .es-work__media:nth-child(2) { inset: 58.823529% 13.432836% auto; height: 28.75817%; }
	.es-work__track--mobile .es-work__scene--split-bottom .es-work__media:first-child { inset: 14.248366% 13.432836% auto; height: 28.75817%; }
	.es-work__track--mobile .es-work__scene--split-bottom .es-work__media:nth-child(2) { top: auto; height: 48.104575%; }
	.es-work__caption { display: none; }
	.es-work__label { position: absolute; top: 10.457516%; left: 1.125rem; right: 1.125rem; z-index: 2; display: flex; align-items: center; gap: 1.125rem; margin: 0; font-family: var( --wp--preset--font-family--body, "work-sans", sans-serif ); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.125rem; line-height: 1; text-transform: uppercase; color: #fff; pointer-events: none; }
	.es-work__label::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.7; }
	.es-work__arrows { position: absolute; right: 0.375rem; bottom: calc( 0.5rem + env( safe-area-inset-bottom, 0px ) ); z-index: 2; display: flex; align-items: center; gap: 0.25rem; font-family: var( --wp--preset--font-family--body, "work-sans", sans-serif ); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.125rem; color: #fff; }
	.es-work__arrow { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
	.es-work__arrow:disabled { opacity: 0.35; cursor: default; }
	.es-work__count { min-width: 2.5rem; text-align: center; font-weight: 600; opacity: 0.8; }
}

.es-work__arrows[hidden] { display: none; }
.es-work--editor { min-height: 0; overflow: visible; }
.es-work--editor .es-work__track { display: grid; grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) ); gap: 12px; padding: 12px; box-sizing: border-box; }
.es-work--editor .es-work__scene { width: 100%; height: auto; aspect-ratio: 16 / 9; min-height: 0; }
.es-work--editor .es-work__scene--split { display: grid; }
.es-work--editor .es-work__media { position: relative; inset: auto; width: 100%; height: 100%; min-height: 0; }

/* Editor previews use the selected layout at any editor canvas width. */
.es-work--editor-mobile .es-work__scene { display: block; aspect-ratio: 402 / 765; background: #2d1810; }
.es-work--editor-mobile .es-work__media { position: absolute; inset: 0; width: auto; height: auto; }
.es-work--editor-mobile .es-work__scene--split .es-work__media:first-child { bottom: 50%; }
.es-work--editor-mobile .es-work__scene--split .es-work__media:nth-child(2) { top: 50%; }
.es-work--editor-mobile .es-work__scene--split-top .es-work__media:first-child { bottom: auto; height: 48.104575%; }
.es-work--editor-mobile .es-work__scene--split-top .es-work__media:nth-child(2) { inset: 58.823529% 13.432836% auto; height: 28.75817%; }
.es-work--editor-mobile .es-work__scene--split-bottom .es-work__media:first-child { inset: 14.248366% 13.432836% auto; height: 28.75817%; }
.es-work--editor-mobile .es-work__scene--split-bottom .es-work__media:nth-child(2) { top: auto; height: 48.104575%; }
.es-work-editor__toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px; background: #fff; color: #1e1e1e; font: 13px/1.5 sans-serif; }
.es-work-editor__views { display: flex; gap: 4px; }
.es-work .es-work-editor__preview-label { margin-bottom: 6px; font: 12px/1.5 sans-serif; }
.es-work-editor__preview-slide { min-width: 0; }
.es-work-editor__thumbnail { display: block; width: 100%; max-height: 140px; object-fit: cover; margin-bottom: 12px; }
.es-work-editor__help { font-size: 12px; line-height: 1.5; color: #757575; }
.es-work-editor__mode, .es-work-editor__slide { border-top: 1px solid #ddd; margin-top: 16px; padding-top: 16px; }
.es-work-editor__mode h3, .es-work-editor__slide h3 { font-size: 13px; margin: 0 0 12px; }
.es-work-editor__image .components-base-control { margin-top: 12px; }
.es-work-editor__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.es-work-editor__slide { padding-bottom: 16px; }