/* Only the two chapters changed by this release. Authored CSS loads last. */
#chapter-work[data-mode="social"] {top:35svh}
#chapter-work[data-mode="social"] .scene-context {padding-top:7svh}
#chapter-work[data-mode="social"] .scene-visual {position:relative;z-index:1}
#chapter-work[data-mode="social"] .scene-switcher {display:none}
#chapter-work[data-mode="social"] .mars-social {--social-media-height:clamp(170px,29svh,330px);max-width:410px}
#chapter-work[data-mode="social"] .mars-social :is(button,a,select,[tabindex]):focus-visible {outline:3px solid #ad382a;outline-offset:3px}

/* Every graphic series uses the same canvas and poster slots. Contents flattens
   the original renderer's different wing counts without changing its DOM. */
#chapter-work[data-mode="campaign"] {
  --campaign-gutter:clamp(120px,16vw,220px);
  --campaign-canvas-height:clamp(150px,28svh,290px);
  --campaign-poster-height:clamp(100px,23svh,230px);
  --campaign-gap:clamp(5px,.7vw,10px);
}
#chapter-work[data-mode="campaign"] .scene-layout {height:var(--campaign-canvas-height);min-height:var(--campaign-canvas-height)}
#chapter-work[data-mode="campaign"] .scene-visual {width:100%;height:100%;max-width:100%;padding:0}
#chapter-work[data-mode="campaign"] .campaign-series {
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) var(--campaign-gutter) repeat(6,minmax(0,1fr));
  grid-template-rows:minmax(0,1fr);align-items:center;justify-items:center;
  column-gap:var(--campaign-gap);width:100%;height:100%;box-sizing:border-box;padding:10px 0;
}
#chapter-work[data-mode="campaign"] .campaign-series .campaign-wing {display:contents}
#chapter-work[data-mode="campaign"] .campaign-series .greggs-poster {
  grid-row:1;width:100%;height:auto;min-height:0;max-height:var(--campaign-poster-height);
  max-width:calc(var(--campaign-poster-height) * 1587 / 2245);aspect-ratio:1587/2245;
  align-self:center;justify-self:center;margin:0;transform:rotate(-3deg);
}
#chapter-work[data-mode="campaign"] .campaign-wing:first-child .greggs-poster:nth-child(1) {grid-column:1 / span 2}
#chapter-work[data-mode="campaign"] .campaign-wing:first-child .greggs-poster:nth-child(2) {grid-column:3 / span 2;transform:rotate(2deg)}
#chapter-work[data-mode="campaign"] .campaign-wing:first-child .greggs-poster:nth-child(3) {grid-column:5 / span 2;transform:rotate(-1deg)}
#chapter-work[data-mode="campaign"] .campaign-wing:last-child .greggs-poster:nth-child(1) {grid-column:8 / span 2;transform:rotate(2deg)}
#chapter-work[data-mode="campaign"] .campaign-wing:last-child .greggs-poster:nth-child(2) {grid-column:10 / span 2;transform:rotate(-2deg)}
#chapter-work[data-mode="campaign"] .campaign-wing:last-child .greggs-poster:nth-child(3) {grid-column:12 / span 2;transform:rotate(3deg)}
#chapter-work[data-mode="campaign"] .campaign-series[data-count="5"] .campaign-wing:last-child .greggs-poster:nth-child(1) {grid-column:9 / span 2}
#chapter-work[data-mode="campaign"] .campaign-series[data-count="5"] .campaign-wing:last-child .greggs-poster:nth-child(2) {grid-column:11 / span 2}
#chapter-work[data-mode="campaign"] .campaign-series[data-count="4"] .campaign-wing:first-child .greggs-poster:nth-child(1) {grid-column:2 / span 2}
#chapter-work[data-mode="campaign"] .campaign-series[data-count="4"] .campaign-wing:first-child .greggs-poster:nth-child(2) {grid-column:4 / span 2}
#chapter-work[data-mode="campaign"] .campaign-series[data-count="4"] .campaign-wing:first-child .greggs-poster:nth-child(3) {grid-column:9 / span 2}
#chapter-work[data-mode="campaign"] .campaign-series[data-count="4"] .campaign-wing:last-child .greggs-poster {grid-column:11 / span 2}
#chapter-work[data-mode="campaign"] .campaign-series .greggs-poster:is(:hover,:focus-visible) {transform:translateY(-4px) rotate(0);z-index:2}
#chapter-work[data-mode="campaign"] .scene-switcher {
  width:calc((100% - var(--campaign-gutter)) / 2);max-width:none;
  min-height:44px;margin:14px 0 0;justify-content:flex-start;flex-direction:row;gap:8px;
}
/* Single artwork keeps the same outer canvas and control baseline. */
#chapter-work[data-mode="campaign"][data-treatment="website-capture"] .scene-layout {
  display:grid;grid-template-columns:minmax(0,1fr) var(--campaign-gutter) minmax(0,1fr);
  align-items:center;gap:var(--campaign-gap);
}
#chapter-work[data-mode="campaign"][data-treatment="website-capture"] .scene-visual {
  display:flex;flex-direction:column;justify-content:center;grid-column:3;align-self:center;
}
#chapter-work[data-mode="campaign"][data-treatment="website-capture"] .scene-art-button {
  width:100%;height:var(--campaign-poster-height);max-height:var(--campaign-poster-height);
  min-height:0;aspect-ratio:auto;margin:0;transform:none;
}
#chapter-work[data-mode="campaign"][data-treatment="website-capture"] .scene-art {max-height:100%;height:100%;object-fit:contain}

@media(max-width:760px) {
  #chapter-work[data-mode="social"] {top:34svh;width:calc(100vw - 48px);max-width:calc(100vw - 48px)}
  #chapter-work[data-mode="social"] .scene-layout {display:block;min-height:0}
  #chapter-work[data-mode="social"] .scene-context {display:none}
  #chapter-work[data-mode="social"] .scene-visual {grid-column:auto;width:100%;max-width:100%}
  #chapter-work[data-mode="social"] .mars-social {display:flex;flex-direction:column;height:34svh;min-height:240px;max-height:330px;max-width:300px}
  #chapter-work[data-mode="social"] .mars-social__platforms {flex:none;margin-bottom:7px}
  #chapter-work[data-mode="social"] .mars-social__panel {min-height:0;flex:1}
  #chapter-work[data-mode="social"] .mars-social__post {display:flex;flex-direction:column;height:100%}
  #chapter-work[data-mode="social"] .mars-social__post-header {flex:none;min-height:37px;padding:3px 8px;gap:6px}
  #chapter-work[data-mode="social"] .mars-social__avatar {width:24px;height:24px;flex-basis:24px}
  #chapter-work[data-mode="social"] .mars-social__identity span {display:none}
  #chapter-work[data-mode="social"] .mars-social__collection {flex:none}
  #chapter-work[data-mode="social"] .mars-social__collection-button {min-height:27px;padding:4px 7px}
  #chapter-work[data-mode="social"] .mars-social__media {flex:1;min-height:70px;height:auto}
  #chapter-work[data-mode="social"] .mars-social__post-footer {position:relative;flex:none;padding:0 10px 7px}
  #chapter-work[data-mode="social"] .mars-social__caption {display:none}
  #chapter-work[data-mode="social"] .mars-social__details {position:absolute;bottom:8px;left:9px;right:9px;z-index:4;margin:0!important;padding:10px;border:1px solid #cbc4b9;border-radius:8px;background:#fffcf8;box-shadow:0 3px 20px #0003}
  #chapter-work[data-mode="social"] .mars-social__selected-picker {margin-top:0}
  #chapter-work[data-mode="social"] .mars-social__selected-picker select {min-height:28px;height:28px;padding:3px 6px}
  #chapter-work[data-mode="social"] .mars-social__sheet {height:100%;display:flex;flex-direction:column}
  #chapter-work[data-mode="social"] .mars-social__sheet-header {padding:8px 11px;flex:none}
  #chapter-work[data-mode="social"] .mars-social__screenshot-button {flex:1;min-height:0;overflow:hidden}
  #chapter-work[data-mode="social"] .mars-social__screenshot {width:100%;height:100%;object-fit:contain}
  #chapter-work[data-mode="social"] .mars-social__screen-choices {padding:7px 8px 0;flex:none}
  #chapter-work[data-mode="social"] .mars-social__screen-choice {min-height:30px;padding:4px 5px}
  #chapter-work[data-mode="social"] .mars-social__image-hint {padding:4px 8px 7px;flex:none}
  #chapter-work[data-mode="campaign"] {
    --campaign-gutter:64px;--campaign-gap:8px;
    --campaign-canvas-height:clamp(164px,25svh,224px);
    --campaign-poster-height:10.5svh;
    top:40svh;width:calc(100vw - 48px);max-width:calc(100vw - 48px);
  }
  #chapter-work[data-mode="campaign"] .campaign-series {
    grid-template-columns:repeat(2,minmax(0,1fr)) var(--campaign-gutter) repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));gap:8px var(--campaign-gap);padding:4px 0;
  }
  #chapter-work[data-mode="campaign"] .campaign-series .greggs-poster {
    width:100%;max-width:min(calc((100vw - 144px) / 4),calc(var(--campaign-poster-height) * 1587 / 2245));transform:none;
  }
  #chapter-work[data-mode="campaign"] .campaign-wing:first-child .greggs-poster:nth-child(1) {grid-column:1;grid-row:1}
  #chapter-work[data-mode="campaign"] .campaign-wing:first-child .greggs-poster:nth-child(2) {grid-column:2;grid-row:1}
  #chapter-work[data-mode="campaign"] .campaign-wing:first-child .greggs-poster:nth-child(3) {grid-column:1 / 3;grid-row:2}
  #chapter-work[data-mode="campaign"] .campaign-wing:last-child .greggs-poster:nth-child(1) {grid-column:4;grid-row:1}
  #chapter-work[data-mode="campaign"] .campaign-wing:last-child .greggs-poster:nth-child(2) {grid-column:5;grid-row:1}
  #chapter-work[data-mode="campaign"] .campaign-wing:last-child .greggs-poster:nth-child(3) {grid-column:4 / 6;grid-row:2}
  #chapter-work[data-mode="campaign"] .campaign-series[data-count="5"] .campaign-wing:last-child .greggs-poster:nth-child(1) {grid-column:4;grid-row:1}
  #chapter-work[data-mode="campaign"] .campaign-series[data-count="5"] .campaign-wing:last-child .greggs-poster:nth-child(2) {grid-column:5;grid-row:1}
  #chapter-work[data-mode="campaign"] .campaign-series[data-count="4"] .campaign-wing:first-child .greggs-poster:nth-child(1) {grid-column:1 / 3;grid-row:1}
  #chapter-work[data-mode="campaign"] .campaign-series[data-count="4"] .campaign-wing:first-child .greggs-poster:nth-child(2) {grid-column:1 / 3;grid-row:2}
  #chapter-work[data-mode="campaign"] .campaign-series[data-count="4"] .campaign-wing:first-child .greggs-poster:nth-child(3) {grid-column:4 / 6;grid-row:1}
  #chapter-work[data-mode="campaign"] .campaign-series[data-count="4"] .campaign-wing:last-child .greggs-poster {grid-column:4 / 6;grid-row:2}
  #chapter-work[data-mode="campaign"] .scene-switcher {
    width:calc((100% - var(--campaign-gutter)) / 2);max-width:none;
    margin:10px 0 0;flex-direction:row;min-height:44px;
  }
  #chapter-work[data-mode="campaign"] .scene-pick {width:100%;min-height:44px;white-space:normal}
  #chapter-work[data-mode="campaign"][data-treatment="website-capture"] .scene-art-button {height:100%;max-height:var(--campaign-canvas-height)}

}
@media(max-height:700px) and (min-width:761px) {
  #chapter-work[data-mode="social"] {top:34svh}
  #chapter-work[data-mode="social"] .mars-social {--social-media-height:20svh}
}

@media(prefers-reduced-motion:reduce) {
  #chapter-work[data-mode="campaign"] .campaign-series .greggs-poster:is(:hover,:focus-visible) {transform:none}
}