/* Stock recipes only. Custom grids, explicit type overrides and media framing
   retain their own controls. This contract is shared with the Studio preview. */
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout{
 display:grid!important;grid-template-columns:minmax(0,var(--layout-frame-aside,40fr)) minmax(0,var(--layout-frame-media,60fr));grid-template-rows:minmax(0,1fr);
 width:var(--layout-frame-width,100%)!important;max-width:100%;height:var(--layout-frame-height,100%)!important;min-height:0!important;max-height:100%!important;
 margin:auto!important;gap:var(--layout-frame-gap,clamp(24px,4vw,72px))!important;align-items:center!important;overflow:clip!important;
 flex:none!important;min-width:0;aspect-ratio:auto;direction:ltr;container-type:size;
}
/* Image + text reads as one document in portrait. The rectangle follows the
   copy's intrinsic height; only its image has a bounded size. Explicit frame
   heights and cinematic sequences retain their authored presentation. */
@media(orientation:portrait){
 :is(html,#story-layout-defaults):not(.project-cinema-scroll) body.page-project-detail #project-story>.story-slide:has([data-portrait-flow]:not([style*="--layout-frame-height"])){
  --portrait-reading:1;overflow-y:auto!important;justify-content:flex-start!important;
 }
 :is(html,#story-layout-defaults).project-native-scroll body.page-project-detail #project-story>.story-slide:has([data-portrait-flow]:not([style*="--layout-frame-height"])){
  height:auto!important;min-height:var(--story-viewport-height,100svh)!important;max-height:none!important;
 }
 :is(html,#story-layout-defaults):not(.project-cinema-scroll) body.page-project-detail #project-story [data-portrait-flow]:not([style*="--layout-frame-height"]),
 :is(html,#story-layout-defaults):not(.project-cinema-scroll) body.page-project-detail #project-story [data-portrait-flow]:not([style*="--layout-frame-height"])>.story-layout{
  height:auto!important;max-height:none!important;flex:none!important;container-type:inline-size;overflow:visible!important;
 }
 :is(html,#story-layout-defaults):not(.project-cinema-scroll) body.page-project-detail #project-story [data-portrait-flow]:not([style*="--layout-frame-height"]) .story-layout__media{
  height:min(42svh,calc(100cqw / var(--layout-media-ratio,1)))!important;max-height:none!important;
 }
 :is(html,#story-layout-defaults):not(.project-cinema-scroll) body.page-project-detail #project-story [data-portrait-flow]:not([style*="--layout-frame-height"]) :is(.story-copy,.story-copy__body){
  height:auto!important;max-height:none!important;flex:none!important;overflow:visible!important;
  mask-image:none!important;-webkit-mask-image:none!important;
 }
}
/* One measurable outer canvas, shared by every stock layout and Studio. The
   inner rectangle can change proportions without changing the slide size. */
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout-boundary{
 display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;flex:1 1 0;min-width:0;min-height:0;width:100%;height:100%;max-width:1600px;max-height:100%;margin:auto;container-type:size;overflow:clip;
}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout :is(.story-layout__media,.story-layout__aside,.story-layout__diagram,.story-copy){
 min-width:0;min-height:0;box-sizing:border-box;
}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout__media{
 grid-column:2;grid-row:1;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;
 gap:clamp(12px,2vw,28px)!important;width:100%!important;height:100%!important;max-height:100%!important;align-self:center;
}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout__media[data-media-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout__media[data-media-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout__media[data-media-count="4"]{grid-template:repeat(2,minmax(0,1fr))/repeat(2,minmax(0,1fr))!important}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout__aside{
 grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,3vh,32px);
 height:auto;max-height:100%;width:100%;direction:ltr;overflow:clip;
}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout__diagram{
 height:min(32dvh,300px);flex:0 1 auto;width:100%;min-height:64px;
}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout .story-copy{
 display:flex!important;flex-direction:column!important;align-items:stretch;justify-content:flex-start;gap:0!important;
 width:100%;max-width:52ch;min-height:0;height:auto;max-height:100%!important;flex:0 1 auto!important;
 padding:0!important;overflow:hidden!important;direction:ltr;scrollbar-gutter:auto;
}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout .story-copy h2{
 font-size:clamp(26px,2.8vw,48px)!important;line-height:1.12!important;margin:0 0 14px!important;max-width:none;
 flex:0 0 auto;overflow:visible;text-wrap:balance;
}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout .story-copy__body{
 width:100%;max-width:none!important;min-height:0;max-height:none!important;flex:0 1 auto;
 font-size:clamp(14px,1.15vw,18px)!important;line-height:1.5!important;overflow-y:auto!important;overflow-x:hidden!important;
 scrollbar-width:thin;overscroll-behavior:contain;touch-action:pan-y;mask-image:none!important;-webkit-mask-image:none!important;
}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout .story-copy__body p{font-size:inherit!important;line-height:inherit!important;margin:0 0 .7em}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout .story-copy__body p:last-child{margin-bottom:0}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout .story-copy :is(h2,.story-eyebrow,.story-copy__body,p){max-width:100%!important;overflow-wrap:anywhere;box-sizing:border-box}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout .story-media__item{
 width:100%!important;height:100%!important;max-height:100%!important;min-height:0!important;aspect-ratio:auto!important;margin:0!important;order:0;grid-area:auto!important;overflow:clip!important;
}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout .story-image-viewport{min-width:0;min-height:0;max-width:100%;max-height:100%;overflow:clip!important}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout .story-media__item :is(img,video){
 width:100%!important;height:100%!important;max-height:100%!important;min-height:0;aspect-ratio:auto;object-fit:var(--framing-fit,contain)!important;
}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout .story-media__item:has(>.story-image-caption){grid-template-rows:minmax(0,1fr) 14px!important;gap:6px!important}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout .story-image-caption{height:14px;min-height:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout:is(.story-layout--image,.story-layout--pair,.story-layout--grid,.story-layout--comparison,.story-layout--triptych){
 grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:24px!important;
}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout:is(.story-layout--image,.story-layout--pair,.story-layout--grid,.story-layout--comparison,.story-layout--triptych)>.story-layout__media{grid-column:1;grid-row:1}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout:is(.story-layout--image,.story-layout--pair,.story-layout--grid,.story-layout--comparison,.story-layout--triptych)>.story-layout__aside{grid-column:1;grid-row:2;max-height:28cqh}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--no-copy:not(.story-layout--diagram){grid-template: minmax(0,1fr)/minmax(0,1fr)}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--no-copy>.story-layout__media{grid-column:1/-1}
/* Text-free stock slides share symmetric insets, not the historical zero-gutter
   image treatment. Contained single images sit on the page's centre axis. */
:is(html,#story-layout-defaults) body.page-project-detail #project-story>.story-slide:has(.story-layout--no-copy:not(.story-layout--diagram):not(.story-layout--bleed)){
 padding-left:calc(var(--project-frame-left,28px) + 22px)!important;
 padding-right:calc(var(--project-frame-left,28px) + 22px)!important;
}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--no-copy:not(.story-layout--diagram)>.story-layout__media[data-media-count="1"]{
 grid-area:1/1/-1/-1;place-self:center;min-width:0;
}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--no-copy:not(.story-layout--diagram):not(.story-layout--bleed)>.story-layout__media[data-media-count="1"] :is(img,video){
 object-fit:var(--framing-fit,contain)!important;
}
/* Equal landscape crop windows: different source ratios must not create an
   unequal visible pair. Editor framing/focal points remain authoritative. */
@media(orientation:landscape){
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--no-copy:not(.story-layout--diagram)>.story-layout__media[data-media-count="2"]{
  grid-template: minmax(0,1fr)/repeat(2,minmax(0,1fr))!important;align-items:stretch;
 }
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--no-copy:not(.story-layout--diagram)>.story-layout__media[data-media-count="2"] :is(img,video){
  object-fit:var(--framing-fit,cover)!important;
 }
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--no-copy:not(.story-layout--diagram)>.story-layout__media[data-media-count="2"]:has(.story-image-caption)>.story-media__item{
  display:grid;grid-template-rows:minmax(0,1fr) 14px!important;gap:6px!important;
 }
}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--diagram.story-layout--no-copy>.story-layout__media{grid-column:2}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--text-only{grid-template:minmax(0,1fr)/minmax(0,1fr);max-width:960px}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--text-only>.story-layout__aside{grid-column:1;grid-row:1}
/* Mirroring carries the original-width tracks with their content, never swaps
   widths or changes typography. Portrait order can be overridden separately. */
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-slide--mirrored .story-layout{direction:rtl}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout__media>.story-media__item{direction:ltr}
/* The full-bleed equivalent keeps the diagram and text in the same recipe.
   Only the main image frame reaches the edges; diagrams are never cropped. */
:is(html,#story-layout-defaults) body.page-project-detail #project-story>.story-slide:has(.story-layout--bleed){padding:0!important}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--bleed{max-width:none;gap:0!important}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout-boundary:has(>.story-layout--bleed){max-width:none}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--bleed>.story-layout__aside{padding:80px clamp(24px,4vw,72px) 52px}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--bleed>.story-layout__media{gap:0!important}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--bleed>.story-layout__media :is(img,video){object-fit:var(--framing-fit,cover)!important}

/* Portrait is determined by the shape of the screen, not just a phone-width
   breakpoint. The same centred, image-first stack works on tall desktops. */
@media(orientation:portrait){
 :is(html,#story-layout-defaults) body.page-project-detail #project-story>.story-slide:has(.story-layout){padding:88px clamp(24px,5vw,52px) 48px!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout{
  display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;
  max-width:720px;gap:var(--layout-frame-gap,clamp(12px,2dvh,22px))!important;direction:ltr!important;
 }
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout__aside{display:contents!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout__media{
  order:1!important;flex:none!important;height:min(58cqh,calc(100cqw / var(--layout-media-ratio,1)))!important;
  max-height:58%!important;gap:var(--layout-frame-gap,12px)!important;
 }
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--diagram>.story-layout__media{height:min(42cqh,calc(100cqw / var(--layout-media-ratio,1)))!important;max-height:42%!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout__diagram{
  order:2!important;flex:none!important;width:min(100%,var(--layout-copy-width,100%));height:24cqh!important;min-height:0;max-height:24%;
 }
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout .story-copy{
  order:3!important;flex:0 1 auto!important;align-self:center!important;width:min(100%,var(--layout-copy-width,100%));
  max-width:none;max-height:calc(42cqh - 24px)!important;
 }
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--diagram .story-copy{max-height:calc(34cqh - 24px)!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout .story-copy h2{font-size:clamp(23px,4.6vw,40px)!important;line-height:1.12!important;margin-bottom:10px!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout .story-copy__body{font-size:clamp(14px,2.1vw,18px)!important;line-height:1.5!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--text-only .story-copy{max-height:100%!important;width:100%}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--no-copy:not(.story-layout--diagram)>.story-layout__media{height:100%!important;max-height:100%!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout[data-portrait-order=text_first] .story-copy{order:0!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout[data-portrait-order=diagram_first] .story-layout__diagram{order:0!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-slide--mirrored .story-layout{flex-direction:column-reverse!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story>.story-slide:has(.story-layout--bleed){padding:0!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--bleed{max-width:none;justify-content:flex-start!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--bleed>.story-layout__media{height:58cqh!important;max-height:58%!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--bleed.story-layout--diagram>.story-layout__media{height:48cqh!important;max-height:48%!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--bleed .story-copy{width:calc(100% - 56px);max-width:664px;max-height:calc(32cqh - 48px)!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--bleed .story-layout__diagram{width:calc(100% - 56px);height:22cqh!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--bleed.story-layout--no-copy>.story-layout__media{height:100%!important;max-height:100%!important}
 /* A portrait pair is two equal-width, equal-height crop windows, never two
    narrow images floating alongside one another. Its height stays bounded. */
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--pair>.story-layout__media{
  grid-template:repeat(2,minmax(0,1fr))/minmax(0,1fr)!important;height:58cqh!important;
 }
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--pair.story-layout--no-copy>.story-layout__media{height:100%!important;max-height:100%!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--pair>.story-layout__media :is(img,video){object-fit:var(--framing-fit,cover)!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--pair.story-layout--bleed>.story-layout__media{gap:0!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-slide--mirrored .story-layout--pair>.story-layout__media>.story-media__item:first-child{order:2!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-slide--mirrored .story-layout--pair>.story-layout__media>.story-media__item:nth-child(2){order:1!important}
 /* The dedicated double-bleed template follows the same portrait stacking. */
 html body.page-project-detail #project-story .story-bleed-layout>.story-media--double_bleed{flex-direction:column}
}
@media(orientation:landscape) and (max-height:550px){
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout .story-copy h2{font-size:23px!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout .story-copy__body{font-size:13px!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout__diagram{height:18dvh;min-height:36px}
}
/* Two independent desktop sequences share one fixed frame in portrait. The
   outgoing image stays opaque until the incoming image has finished fading. */
:is(html,#story-layout-defaults) body.page-project-detail #project-story [data-paired-gallery]{position:relative;isolation:isolate;direction:ltr}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout [data-gallery-column]{grid-area:1/1!important;visibility:hidden;opacity:0;pointer-events:none}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout [data-gallery-column=right]{grid-area:1/2!important}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout [data-gallery-first]{visibility:inherit;opacity:1}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout [data-gallery-ready] [data-gallery-column]{visibility:hidden;opacity:0}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout [data-paired-gallery] :is(.gallery-current,.gallery-incoming){visibility:inherit;opacity:1;pointer-events:auto}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout [data-paired-gallery] .gallery-incoming{z-index:2;pointer-events:none}
.project-gallery-controls{position:absolute;z-index:3;bottom:calc(10px - var(--gallery-control-rise,0px));left:calc(25% - 60px);width:120px;display:flex;align-items:center;justify-content:center;gap:2px;background:transparent;color:white;direction:ltr;padding:3px}
.project-gallery-controls[data-gallery-side=right]{left:calc(75% - 60px)}
.project-gallery-controls[data-gallery-side=combined]{left:auto;right:10px}
.project-gallery-controls button{all:unset;box-sizing:border-box;display:grid;place-items:center;cursor:pointer;width:32px;height:32px;border-radius:50%;color:white;text-shadow:0 1px 4px #0008;touch-action:manipulation;font:16px/1 sans-serif}
.project-gallery-controls button:hover{background:rgba(255,255,255,.18)}
.project-gallery-controls button:focus-visible{outline:2px solid white;outline-offset:1px}
.project-gallery-controls button[data-gallery-pause]{font-size:11px}
.project-gallery-controls [hidden]{display:none!important}
.project-gallery-controls[hidden]{display:none!important}
.gallery-incoming .story-image-caption{visibility:hidden}
@media(orientation:landscape){
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-slide--mirrored [data-paired-gallery]{direction:rtl}
 .story-slide--mirrored .project-gallery-controls[data-gallery-side=left]{left:calc(75% - 60px)}
 .story-slide--mirrored .project-gallery-controls[data-gallery-side=right]{left:calc(25% - 60px)}
}
:is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--diagram_image_pair .story-layout__diagram{height:min(34dvh,340px)}
/* The wide diagram / two-image recipe: a quiet supporting column, two equal
   dominant crop windows and one shared top/bottom edge. No viewport-sized
   diagram, floating square images or text extending beyond the composition. */
@media(orientation:landscape){
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout{
  height:min(var(--layout-frame-height,100%),calc(100cqw * var(--layout-frame-width-factor,1) / var(--layout-frame-ratio,var(--layout-default-ratio,.01))))!important;
 }
 /* A single main image and its supporting column share a compact rectangle.
    Previously the image letterboxed inside a viewport-tall frame, leaving
    the diagram above the *visible* photograph despite both boxes fitting. */
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout:is(.story-layout--text_image,.story-layout--statement,.story-layout--statement_image,.story-layout--image_text_image){
  --layout-default-ratio:1.75;
 }
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout:is(.story-layout--text_image,.story-layout--statement,.story-layout--statement_image,.story-layout--image_text_image)>.story-layout__media :is(img,video){
  object-fit:var(--framing-fit,cover)!important;
 }
 /* The caption stays underneath the photo, outside the diagram/copy frame. */
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout:has(>.story-layout__media>.story-media__item>.story-image-caption){
  --layout-caption-space:20px;
 }
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout:is(.story-layout--text_image,.story-layout--statement,.story-layout--statement_image,.story-layout--diagram)>.story-layout__aside{
  max-height:calc(100% - var(--layout-caption-space,0px));
 }
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--diagram_image_pair{
  --layout-default-ratio:2.4;
  height:min(var(--layout-frame-height,100%),calc(100cqw * var(--layout-frame-width-factor,1) / var(--layout-frame-ratio,var(--layout-default-ratio))))!important;
  grid-template-columns:minmax(0,var(--layout-frame-aside,25fr)) minmax(0,var(--layout-frame-media,75fr));
  gap:var(--layout-frame-gap,clamp(16px,1.5vw,28px))!important;
 }
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout-boundary:not([style*="--layout-frame-"])>.story-layout--diagram_image_pair{max-width:min(100%,240cqh)}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--diagram_image_pair>.story-layout__media{gap:var(--layout-frame-gap,clamp(12px,1vw,20px))!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--diagram_image_pair>.story-layout__media :is(img,video){object-fit:var(--framing-fit,cover)!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--diagram>.story-layout__aside{
  height:calc(100% - var(--layout-caption-space,0px));display:grid;grid-template-rows:minmax(0,var(--layout-frame-diagram,40%)) minmax(0,1fr);gap:var(--layout-frame-gap,clamp(12px,2cqh,24px));align-items:start;align-self:start;
 }
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--diagram .story-layout__diagram{
  width:100%;height:100%!important;max-height:100%;min-height:0;justify-self:center;align-self:center;overflow:clip;
 }
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--diagram_image_pair .story-layout__diagram{width:76%;max-width:280px}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--diagram .story-copy{height:100%;max-width:100%;align-self:start}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--diagram.story-layout--no-copy>.story-layout__aside{grid-template-rows:minmax(0,1fr)}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--bleed{height:100%!important;width:100%!important;max-width:none!important;gap:0!important}
}
@media(orientation:portrait){
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout [data-paired-gallery] :is(img,video){object-fit:var(--framing-fit,cover)!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--diagram_image_pair>[data-paired-gallery]{grid-template:minmax(0,1fr)/minmax(0,1fr)!important}
 /* Share a near-square crop across the combined slideshow. The width also
    bounds the copy, while the remaining height keeps diagram/text in-frame.
    A caption's 20px row sits outside the image. Full bleed stays edge-to-edge. */
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--diagram_image_pair:not(.story-layout--bleed){
  --layout-square-media-height:min(52cqh,calc(100cqw + 20px));
  --layout-square-media-width:min(100cqw,calc((var(--layout-square-media-height) - 20px) * 1.15));
 }
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--diagram_image_pair:not(.story-layout--bleed)>[data-paired-gallery]{
  height:var(--layout-square-media-height)!important;max-height:52%!important;width:var(--layout-square-media-width)!important;
 }
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout [data-gallery-column]{grid-area:1/1!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout [data-gallery-first]:not(:first-child){visibility:hidden;opacity:0}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout [data-paired-gallery] :is(.gallery-current,.gallery-incoming){visibility:inherit;opacity:1}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--diagram_image_pair:not(.story-layout--bleed) .story-layout__diagram{height:20cqh!important;max-height:20%;width:var(--layout-square-media-width)!important}
 :is(html,#story-layout-defaults) body.page-project-detail #project-story .story-layout--diagram_image_pair:not(.story-layout--bleed) .story-copy{max-height:calc(28cqh - 2 * var(--layout-frame-gap,clamp(12px,2dvh,22px)))!important;width:min(var(--layout-square-media-width),var(--layout-copy-width,100%))!important}
}