/*
  CASE STUDY SINGLE-WIDTH LAYOUT
  The content canvas is ONE 960px-wide region. Section copy, cards, visuals,
  captions, and other content start and finish at those same two boundaries.
  Two / three columns are compositions inside the canvas, not separate widths.
  Existing page-specific grid stacking behavior remains in place.
*/
body.portfolio-case {
  --cs-content: 960px;
  --cs-measure: 960px;
  --cs-layout-width: min(960px, calc(100% - 6rem));
  --cs-layout-start: max(3rem, calc((100% - 960px)/2));
  --cs-after-breakout: 2rem;
}
/* Do not let text, hero copy or a secondary wrapper silently become narrower. */
body.portfolio-case :is(.shell,.read,.widefig,.narrowfig,.frame,.reading) {
  width:var(--cs-layout-width) !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
body.case-ai {--frame:var(--cs-layout-width);--read:var(--cs-layout-width)}
body.case-quality .portfolio-header-inner,body.case-invision .portfolio-header-inner {
  width:var(--cs-layout-width) !important;
}
/* InVision's main page elements and Quality's nested structures all share the canvas. */
body.case-invision main > :is(.shell,.read,.widefig,.narrowfig),
body.case-quality main section > :is(.shell,.read),
body.case-quality main :is(.shell,.read) > :is(.shell,.read,.nested-read),
body.case-ai .perspective-switch .reading,
body.case-ai .story-panel .reading,
body.case-ai .related-work .reading {
  width:var(--cs-layout-width) !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
/* Relative/nested reads must fill their parent's width rather than taking a
   second viewport-sized width and centering it again. */
body.case-quality main :is(.shell,.read) > :is(.read,.nested-read),
body.case-quality main .system-head > .read,
body.case-quality main .feature-intro > div {
  width:100% !important;
  max-width:none !important;
  margin-inline:0 !important;
}
/* Grid containers and their introductory copy have the exact same boundaries. */
body.portfolio-case main :is(.three,.mechanisms,.outcomes,.system,.feature-intro,.case,.case-content,
  .visual-grid,.micro-example,.quick,.people,.strategy-strip,.lifecycle-wrap,.touchpoints,
  .shift,.platform-story,.platform-segment,.metrics,.foundation-notes,.comparison,
  .development-rhythm,.direction-shift,.decision-visuals,.visual-thumb-grid,.ai-role-notes) {
  max-width:100% !important;
}
body.portfolio-case main :is(p,.lede,.story-intro,.story-section,.system-note,.key,.feature-intro > p,
  .case-content > p,.case-content .key,.statement,.ai-role-intro,.ai-role-thesis,
  .ai-role-signoff,.decision-visuals-top p,.foundation-note p,.comparison p) {
  max-width:none !important;
}
body.case-quality main .system-head .read p,
body.case-quality main .read > p,
body.case-quality main .shell > p,
body.case-quality main .case-content > p,
body.case-quality main .case-content .key,
body.case-quality main .micro-example > p { max-width:none !important; }
/* The AI inset visual and its inner prose should line up with the surrounding
   paragraphs, rather than project out 950px from a 760px text container. */
body.case-ai .ai-role-map {
  width:100% !important;
  max-width:none !important;
  left:auto !important;
  transform:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
body.case-ai .ai-role-thesis,body.case-ai .ai-role-intro,
body.case-ai .ai-role-signoff {max-width:none !important;}
body.case-ai .hero-reading,body.case-ai .hero-reading h1 {max-width:100% !important;}
/* Simple, repeatable spacing when content resumes after a block/grid/figure. */
body.portfolio-case main :is(.three,.mechanisms,.outcomes,.visual-grid,.micro-example,
  .people,.touchpoints,.strategy-strip,.shift,.quick,.lifecycle-wrap,.system,
  .foundation-notes,.comparison,.development-rhythm,.direction-shift,.decision-visuals,
  .ai-role-map,.evidence,.metrics,.ai-role-notes,.artifact-pair) +
  :is(p,h2,h3,h4,.key,.audience-takeaway,.section-note,.practice-outcome,.practice-closing) {
  margin-top:var(--cs-after-breakout) !important;
}
body.case-quality main .visual-grid + p,
body.case-quality main .mechanisms + p,
body.case-quality main .outcomes + p,
body.case-invision main .people + p,
body.case-invision main .shift + p {margin-top:var(--cs-after-breakout) !important;}
/* Do not inadvertently add two separate top lines and enormous blank areas. */
body.case-invision main .touchpoints + .team-alignment-heading {
  margin-top:3rem !important;
}
/* Maintain the same outer margin on small screens. */
@media(max-width:760px){
  body.portfolio-case {
    --cs-layout-width:calc(100% - 2.25rem);
    --cs-layout-start:1.125rem;
    --cs-after-breakout:1.5rem;
  }
  body.case-ai .ai-role-map {width:100% !important;}
  body.case-quality main .three,body.case-quality main .mechanisms,
  body.case-quality main .outcomes {grid-template-columns:1fr;}
}