/*
 Case-study spacing and hero system.
 8px foundation: 8, 16, 24, 32, 40, 48, 64, 72, 80.
 Visual rhythm: 72px chapters, 40px subsections, 32px visual groups,
 24px heading-to-copy, 16px paragraph-to-paragraph, 8px heading-to-description.
 The homepage navigation has its own shared stylesheet and is not overridden.
*/
body.portfolio-case {
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-9: 4.5rem;
  --space-10: 5rem;
  --chapter-space: var(--space-9);
  --subsection-space:var(--space-5);
  --group-space:var(--space-4);
  --paragraph-space:var(--space-2);
}
body.portfolio-case main p {margin-bottom:var(--paragraph-space)}
body.portfolio-case main p:last-child{margin-bottom:0}
body.portfolio-case main h2{margin-bottom:var(--space-3)}
body.portfolio-case main h3{margin-bottom:var(--space-2)}
body.portfolio-case main h4{margin-bottom:var(--space-2)}

/* Quality and InVision place their hero text inside a width-limited div.
   Draw the cream as a viewport-wide backdrop rather than coloring that div. */
body.case-quality .hero,body.case-invision .hero {
  position:relative;
  isolation:isolate;
  background:transparent!important;
  padding-top:var(--space-4);
  padding-bottom:var(--space-4);
}
body.case-quality .hero::before,body.case-invision .hero::before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:var(--cs-cream);
  z-index:-1;
  pointer-events:none;
}
/* The header line and hero text remain on the same content grid. */
body.case-quality .hero h1,body.case-invision .hero h1 {
  margin-top:var(--space-6)!important;
  margin-bottom:var(--space-3)!important;
}
body.case-quality .hero .lede,body.case-invision .hero .lede{margin-bottom:var(--space-4)!important}
body.case-quality .hero .meta,body.case-invision .hero .meta{margin-top:var(--space-4);padding:var(--space-2) 0}
body.case-quality .cover-placeholder,body.case-invision .cover{margin-top:var(--space-4)}
body.case-ai .case-hero .frame{padding-top:var(--space-4);padding-bottom:var(--space-8)}
body.case-ai .hero-reading{margin-top:var(--space-6)}
body.case-ai .hero-reading h1{margin-bottom:var(--space-3)}
body.case-ai .hero-reading>p{margin-top:0}

/* Quality: all sections share a consistent entrance and fixed boundaries. */
body.case-quality main section{padding-top:var(--chapter-space)!important}
body.case-quality main section:first-child{padding-top:var(--space-8)!important}
body.case-quality main section h2{margin-bottom:var(--space-3)!important}
body.case-quality main section h3{margin-bottom:var(--space-2)!important}
body.case-quality .three,body.case-quality .mechanisms,body.case-quality .outcomes{margin-top:var(--group-space);gap:var(--space-3)}
body.case-quality .three article,body.case-quality .mechanism,body.case-quality .outcome{padding-top:var(--space-2)}
body.case-quality .system-head{margin-bottom:var(--space-4)}
body.case-quality .sys-row{padding:var(--space-4) 0;gap:var(--space-4)}
body.case-quality .sys-cells{column-gap:var(--space-4);row-gap:var(--space-3)}
body.case-quality .system-note{margin-top:var(--space-3)}
body.case-quality .feature-intro{margin-bottom:var(--space-4)}
body.case-quality .case{padding:var(--space-6) 0!important}
body.case-quality .case:first-of-type{margin-top:0}
body.case-quality .case-content h3{margin-bottom:var(--space-1)!important}
body.case-quality .case-content h4{margin-bottom:var(--space-3)!important}
body.case-quality .case-content .key{margin:var(--space-3) 0!important;padding-top:0;padding-bottom:0}
body.case-quality .visual-grid{margin-top:var(--space-4);gap:var(--space-3)}
body.case-quality .visual figcaption{margin-top:var(--space-2)}
body.case-quality .micro-example{padding:var(--space-5) 0;gap:var(--space-4)}
body.case-quality .closing{margin-top:var(--space-4)}
body.case-quality .footer{margin-top:var(--space-10)}

/* InVision: same chapter cadence and figure rhythm without flattening its compositions. */
body.case-invision main > section.section,
body.case-invision main > section.section.intro,
body.case-invision main > section.section.section-tight,
body.case-invision main > section.platform-story,
body.case-invision main > section.ecosystem-vision,
body.case-invision main > section.metricwrap,
body.case-invision main > section.end {
  padding-top:var(--chapter-space)!important;
}
/* These are continuations inside the same chapter, not new chapters. */
body.case-invision main > section.section.section-tight,
body.case-invision main > section.platform-story,
body.case-invision main > section.ecosystem-vision {padding-top:var(--subsection-space)!important}
body.case-invision .section h2,body.case-invision .end h2,
body.case-invision .metricwrap h2{margin-bottom:var(--space-3)!important}
body.case-invision .subsection{margin-top:var(--subsection-space)}
body.case-invision .quick,body.case-invision .people,body.case-invision .touchpoints,
body.case-invision .strategy-strip{margin-top:var(--group-space)}
body.case-invision .quick .item{padding:var(--space-2) 0;gap:var(--space-3)}
body.case-invision .people{gap:var(--space-4);margin-bottom:var(--space-3)}
body.case-invision .people article{padding-top:var(--space-2)}
body.case-invision .touchpoints article{padding:var(--space-2) 0}
body.case-invision .touchpoints + .team-alignment-heading{margin-top:var(--space-8)!important}
body.case-invision .figure,body.case-invision .widefig.figure,
body.case-invision .narrowfig.figure{margin-top:var(--group-space)}
body.case-invision .paired{margin-top:var(--group-space)}
body.case-invision .paired .figure{margin-top:0}
body.case-invision .platform-segment{gap:var(--space-4);padding-bottom:var(--space-4);margin-bottom:var(--space-4)}
body.case-invision .ecosystem-figure{margin-top:var(--group-space)!important;margin-bottom:var(--space-3)!important}
body.case-invision .lifecycle-wrap{margin-top:var(--group-space)}
body.case-invision .metrics{margin-top:var(--group-space);gap:var(--space-4);padding:var(--space-3) 0}
body.case-invision .metricwrap{margin-top:0!important;border-top:0!important}
body.case-invision .end{padding-bottom:var(--space-10)!important}

/* AI: retain original editorial pattern and tab behavior, align its chapters and prose. */
body.case-ai .story-body{padding-top:var(--space-6);padding-bottom:var(--space-8)}
body.case-ai .story-intro{padding-bottom:var(--space-4)}
body.case-ai .story-intro h2{margin-bottom:var(--space-3)}
body.case-ai .story-section{padding:var(--space-6) 0!important}
body.case-ai .story-section h3{margin-bottom:var(--space-3)!important}
body.case-ai .story-section p{margin-bottom:var(--space-2)}
body.case-ai .story-section p:last-child{margin-bottom:0}
body.case-ai .foundation-notes,body.case-ai .development-rhythm,
body.case-ai .direction-shift,body.case-ai .comparison{margin:var(--group-space) 0}
body.case-ai .evidence{margin:var(--space-4) 0!important;padding-top:var(--space-2)}
body.case-ai .decision-visuals{margin:var(--group-space) 0}
body.case-ai .decision-visuals-top{margin-bottom:var(--space-3)}
body.case-ai .ai-role-map{margin-top:var(--group-space)}
body.case-ai .ai-role-thesis{margin-bottom:var(--space-4)}
body.case-ai .ai-role-notes{row-gap:var(--space-4)}
body.case-ai .related-work{padding:var(--space-8) 0}

@media(max-width:760px){
  body.portfolio-case{--chapter-space:var(--space-6);--subsection-space:var(--space-4);--group-space:var(--space-3)}
  body.case-quality .hero,body.case-invision .hero{padding-top:var(--space-3);padding-bottom:var(--space-3)}
  body.case-quality .hero h1,body.case-invision .hero h1{margin-top:var(--space-4)!important}
  body.case-quality main section:first-child{padding-top:var(--space-6)!important}
  body.case-quality .case{padding:var(--space-5) 0!important}
  body.case-quality .sys-row{padding:var(--space-3) 0}
  body.case-invision .platform-segment{gap:var(--space-2)}
  body.case-invision .touchpoints + .team-alignment-heading{margin-top:var(--space-6)!important}
  body.case-ai .case-hero .frame{padding-top:var(--space-3);padding-bottom:var(--space-6)}
  body.case-ai .story-body{padding-top:var(--space-4);padding-bottom:var(--space-6)}
  body.case-ai .story-intro{padding-bottom:var(--space-3)}
  body.case-ai .story-section{padding:var(--space-5) 0!important}
  body.case-ai .related-work{padding:var(--space-6) 0}
}