/* Shared presentation for case studies and Related Work. Artifact-specific styles
   remain responsible for diagrams, workflow states and interactive prototypes. */
.portfolio-shell main.portfolio-case-presentation{--case-ink:#123549;--case-muted:#526878;--case-teal:#075866;--case-line:#d3e1e7;--case-soft:#f5f9fb;--case-paper:#fff;--case-gutter:clamp(18px,2.1vw,38px);background:var(--case-canvas,var(--case-soft))}
html[data-theme=dark] .portfolio-shell main.portfolio-case-presentation{--case-ink:#eaf1f2;--case-muted:#bccdd7;--case-teal:#9bd6dc;--case-line:#496570;--case-soft:#1b303d;--case-paper:#10202c}
.portfolio-shell main.portfolio-case-presentation h1{font:700 clamp(34px,3vw,48px)/1.12 Manrope,sans-serif;letter-spacing:-.035em;color:var(--case-ink);margin:12px 0 16px;text-wrap:balance}
.portfolio-shell main.portfolio-case-presentation :is(.mf-section-heading h2,.mf-opening h2,.mf-deep-dive>header h2,.exhibit-stage-heading h2,.note-section-intro h2){font:700 clamp(25px,2vw,32px)/1.25 Manrope,sans-serif;letter-spacing:-.035em;color:var(--case-ink)}
.portfolio-shell main.portfolio-case-presentation :is(.mf-support,.brief-overview>p,.exhibit-stage-heading p,.exhibit-stage>p,.note-section-content>p,.mf-section-heading>p){font-size:16px;line-height:1.65;color:var(--case-muted)}
.portfolio-shell main.portfolio-case-presentation :is(.mf-meta,.case-kicker){font:700 .8rem/1.4 'DM Sans',sans-serif;letter-spacing:.055em;color:var(--case-teal);background:var(--case-soft);padding:6px 10px;display:inline-block;border-radius:3px}
.portfolio-shell main.portfolio-case-presentation :is(.mf-lead,.brief-hook,.summary-lead){font:700 clamp(18px,1.5vw,22px)/1.4 Manrope,sans-serif;color:var(--case-teal);border-left:3px solid #10a5b4;background:var(--case-soft);padding:14px 18px;margin:16px 0}
.portfolio-shell main.portfolio-case-presentation :is(.mf-section,.mf-deep-dive,.note-section,.exhibit-stage){background:var(--case-paper);border:1px solid var(--case-line);border-radius:5px}
.portfolio-shell main.portfolio-case-presentation :is(.mf-section-number,.stage-number){width:34px;height:34px;font:700 18px/1 Manrope,sans-serif;flex-shrink:0;border-radius:50%;background:#075866;color:#fff}
.portfolio-shell main.portfolio-case-presentation .mf-opening{padding:25px;background:var(--case-paper);border:1px solid var(--case-line);border-radius:5px;margin:0 0 20px}
.portfolio-shell main.portfolio-case-presentation .mf-opening>header{padding-top:0}
.portfolio-shell main.portfolio-case-presentation .mf-hero{background:var(--case-paper);border-bottom:1px solid var(--case-line);padding:0 0 28px}
.portfolio-shell main.portfolio-case-presentation .mf-canvas{background:var(--case-canvas,var(--case-soft))}
.portfolio-shell main.portfolio-case-presentation .mf-hero{padding:24px;border:1px solid var(--case-line);border-radius:5px}
.portfolio-shell main.portfolio-case-presentation :is(.brief-overview,.mf-hero-story,.story-hero-copy){min-width:0}
.portfolio-shell main.portfolio-case-presentation .case-context-panel{container:case-context / inline-size;min-width:0;padding:22px;background:var(--case-soft);border:1px solid var(--case-line);border-radius:5px;align-self:start}
.portfolio-shell main.portfolio-case-presentation .case-context-panel h2{font:700 .85rem/1.4 'DM Sans',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--case-teal);margin:0 0 16px}
.portfolio-shell main.portfolio-case-presentation .case-context-panel dl{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0}
.portfolio-shell main.portfolio-case-presentation .case-context-panel dl>div{display:block;min-width:0;border:0;border-top:1px solid var(--case-line);padding:13px 0}
.portfolio-shell main.portfolio-case-presentation .case-context-panel dl>div:first-child{border-top:0;padding-top:0}
.portfolio-shell main.portfolio-case-presentation .case-context-panel dl>div:last-child{padding-bottom:0}
.portfolio-shell main.portfolio-case-presentation .case-context-panel dt{font-size:15px;line-height:1.5;font-weight:700;color:var(--case-teal);margin:0 0 5px}
.portfolio-shell main.portfolio-case-presentation .case-context-panel dd{font-size:16px;line-height:1.6;color:var(--case-muted);margin:0;overflow-wrap:anywhere}
.portfolio-shell main.portfolio-case-presentation .case-context-panel .note-caption{font-size:14px;line-height:1.6}
@container case-context (min-width:460px){
 .portfolio-shell main.portfolio-case-presentation .case-context-panel dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
 .portfolio-shell main.portfolio-case-presentation .case-context-panel dl>div:nth-child(2){border-top:0;padding-top:0}
}
@container case-context (min-width:740px){
 .portfolio-shell main.portfolio-case-presentation .case-context-panel dl{grid-template-columns:repeat(3,minmax(0,1fr))}
 .portfolio-shell main.portfolio-case-presentation .case-context-panel dl>div:nth-child(3){border-top:0;padding-top:0}
}
@container portfolio-page (max-width:1200px){
 .portfolio-shell main.portfolio-case-presentation :is(.mf-hero,.note-hero){grid-template-columns:minmax(0,1fr);gap:24px}
 .portfolio-shell main.portfolio-case-presentation.five-stage-case>.case-brief{grid-template-columns:minmax(0,1fr);grid-template-areas:"heading" "overview" "context" "visual" "evidence" "beyond";gap:16px}
}
@container portfolio-page (min-width:1201px){
 .portfolio-shell main.portfolio-case-presentation :is(.mf-hero,.note-hero){grid-template-columns:minmax(0,1.5fr) minmax(340px,.9fr);gap:32px}
 .portfolio-shell main.portfolio-case-presentation.five-stage-case>.case-brief{grid-template-columns:minmax(0,1.5fr) minmax(340px,.9fr);column-gap:32px}
}
@media(max-width:600px){
 .portfolio-shell main.portfolio-case-presentation .mf-hero,.portfolio-shell main.portfolio-case-presentation .mf-opening{padding:18px 14px}
 .portfolio-shell main.portfolio-case-presentation .case-context-panel{padding:18px}
 .portfolio-shell main.portfolio-case-presentation h1{font-size:34px}
}
/* The introduction is part of the page canvas; only Context is boxed. */
.portfolio-shell main.portfolio-case-presentation .mf-hero{padding:0;border:0;border-radius:0;background:transparent}
.portfolio-shell main.portfolio-case-presentation.five-stage-case>.case-brief{background:var(--case-canvas,var(--case-soft))}
.portfolio-shell main.portfolio-case-presentation :is(.note-section-content>.note-takeaway,.mf-takeaway){color:var(--story-plum,#812579)}