/* Shared case-study image system, from the approved Editorial gallery. */
.editorial-draft {
  --chapter-strong: #303b98;
  --chapter-soft: #e8f1ea;
  --chapter-accent: #35734c;
  --chapter-on-strong: #fff;
  --chapter-secondary: rgba(255,255,255,.72);
  --chapter-rule: rgba(255,255,255,.25);
  --chapter-soft-rule: rgba(30,70,45,.18);
}
[data-case-theme="map"] {
  --chapter-strong: #31c4ec;
  --chapter-soft: #eaf8fc;
  --chapter-accent: #00617c;
  --chapter-on-strong: #102d3b;
  --chapter-secondary: #173e50;
  --chapter-rule: rgba(16,45,59,.24);
  --chapter-soft-rule: rgba(0,97,124,.18);
}
[data-case-theme="sidekicker"] {
  --chapter-strong: #41c6f1;
  --chapter-soft: #edf9fd;
  --chapter-accent: #00637f;
  --chapter-on-strong: #102d3b;
  --chapter-secondary: #173e50;
  --chapter-rule: rgba(16,45,59,.24);
  --chapter-soft-rule: rgba(0,99,127,.18);
}
[data-case-theme="birchal"] {
  --chapter-strong: #223ad3;
  --chapter-soft: #eef0fc;
  --chapter-accent: #223ad3;
  --chapter-soft-rule: rgba(34,58,211,.18);
}
[data-case-theme="ai"] {
  --chapter-strong: #35734c;
  --chapter-soft: #e9f1eb;
  --chapter-accent: #35734c;
}
.gallery-feature, .iteration-record {
  --accent: var(--chapter-accent);
  --accent-soft: var(--chapter-soft);
  --blue: var(--chapter-accent);
  --blue-soft: var(--chapter-soft);
}
/* The original folio's summary cards and typography remain the baseline. */
.project-summary { max-width: 950px; margin: 0 auto 56px; padding: 0 56px; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 10px; }
.project-summary > .summary-item { min-width: 0; grid-column: span 3; }
.project-summary[data-summary-cards="3"] > .summary-item { grid-column: span 4; }
.project-summary > .summary-meta, .project-summary > .summary-product { grid-column: 1 / -1; }
.project-summary[data-summary-cards] > .summary-meta { grid-column: 1 / -1; }
.summary-item { background: var(--sidebar-bg); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }
.summary-label { font-family: var(--sans); font-weight: 600; font-size: 16px; color: var(--ink); margin-bottom: 8px; }
.summary-label em { font-family: var(--serif); font-weight: 400; font-style: italic; color: var(--muted); margin-left: 6px; }
.summary-item p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.summary-details { margin: 0; }
.summary-meta .summary-details { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 0; }
.summary-details > div { min-width: 0; padding: 0 14px; border-left: 1px solid var(--line); }
.summary-details > div:first-child { border-left: 0; padding-left: 0; }
.summary-details > div:last-child { padding-right: 0; }
.summary-details dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.summary-details dd { margin: 0; font-size: 14.5px; color: var(--ink); }
.summary-metrics { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 0; background: var(--sidebar-bg); border: 1px solid var(--line); border-radius: 10px; }
.summary-metrics > div { padding: 18px 20px; border-left: 1px solid var(--line); }
.summary-metrics > div:first-child { border-left: 0; }
.summary-metrics b { display: block; margin-bottom: 8px; font: 500 38px/1 var(--serif); color: var(--ink); }
.summary-metrics strong { display: block; font-size: 14.5px; color: var(--ink); font-weight: 600; }
.summary-metrics span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.editorial-gallery img { display: block; max-width: 100%; height: auto; }
.case-content .editorial-gallery-group { margin: 48px 0 64px; }
.case-content figure.editorial-gallery { margin-block: 0; margin-inline: calc(50% - 50cqw); }
/* Measure breakout panels against the actual scroll canvas, not the viewport
   (which also contains the portfolio sidebar). Text stays in its own column. */
.editorial-draft .scroll-area { container-type: inline-size; }
.gallery-feature { width: 100cqw; margin-inline: calc(50% - 50cqw); display: grid; grid-template-columns: 90px minmax(0, 1fr); grid-template-rows: auto auto; gap: 26px 40px; padding: 70px clamp(36px, 5cqw, 80px); overflow: hidden; background: var(--chapter-soft); }
.gallery-label { grid-row: 1 / 3; border-right: 1px solid var(--chapter-soft-rule); align-self: stretch; }
.gallery-label span { font: 500 30px/1 var(--serif); }
.case-content .gallery-label p { margin: 12px 0 0; font: 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; writing-mode: vertical-rl; color: var(--accent); }
.gallery-image { min-width: 0; }
.gallery-image img { width: 100%; height: auto; max-height: none; border-radius: 10px; box-shadow: 0 20px 50px -30px rgba(20,50,30,.48); }
.gallery-caption { grid-column: 2; display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 8px 20px; padding-top: 20px; border-top: 1px solid var(--chapter-soft-rule); }
.case-content .editorial-gallery > .gallery-caption { max-width: none; margin: 0; padding: 20px 0 0; border: 0; border-top: 1px solid var(--chapter-soft-rule); color: inherit; font: inherit; }
.editorial-gallery > figcaption, .supporting-strip .artefact > figcaption { letter-spacing: normal; }
.editorial-gallery > figcaption::before, .supporting-strip .artefact > figcaption::before { content: none; }
.gallery-caption > span { grid-row: 1 / 3; }
.gallery-caption > span, .gallery-copy > span { font: 10px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.gallery-caption strong { font: 500 24px/1.15 var(--serif); color: var(--ink); }
.case-content .gallery-caption p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.feature-blue { color: var(--chapter-on-strong); background: var(--chapter-strong); }
.feature-portrait { grid-template-columns: 90px minmax(0,.7fr) minmax(0,1fr); grid-template-rows: auto; align-items: center; }
.feature-portrait .gallery-label { grid-row: auto; border-color: var(--chapter-rule); }
.feature-portrait .gallery-label { grid-column: 1; grid-row: 1; }
.feature-portrait .gallery-copy { grid-column: 2; grid-row: 1; }
.feature-portrait .gallery-image { grid-column: 3; grid-row: 1; }
.feature-portrait .gallery-label p, .feature-portrait .gallery-copy > span { color: var(--chapter-secondary); }
.gallery-copy { padding-bottom: 0; }
.case-content .editorial-gallery > .gallery-copy { max-width: none; margin: 0; padding: 0; border: 0; color: inherit; font: inherit; }
.case-content .gallery-copy h3 { max-width: 11ch; margin: 10px 0 16px; font: 500 clamp(35px,5cqw,54px)/1.03 var(--serif); color: var(--chapter-on-strong); }
.case-content .gallery-copy p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--chapter-secondary); }
.portrait-gallery { height: 585px; align-self: end; overflow: hidden; border: 8px solid rgba(255,255,255,.14); border-bottom: 0; border-radius: 12px 12px 0 0; background: #fff; box-shadow: 0 30px 80px rgba(10,15,60,.35); }
.portrait-gallery img { border-radius: 0; box-shadow: none; }
.supporting-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.artefact { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.supporting-strip > figure.artefact { margin: 0; }
.artefact-image { height: 150px; overflow: hidden; border-radius: 6px; background: #f3f3f1; }
.artefact-image img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.supporting-strip .artefact > figcaption { display: block; max-width: none; margin: 10px 0 2px; padding: 0; border: 0; color: var(--ink); font: 12px/1.5 var(--sans); }
/* Explicit crop targets: budget/chart, service cards, MVP summary/categories,
   expense states, staff status/unplanned rows, and modal value/calculation. */
.customer-gallery .artefact:first-child img { object-position: center 20%; }
.customer-gallery .artefact:last-child img { object-position: center 85%; }
.discovery-gallery .artefact:first-child img { object-position: center 8%; }
.discovery-gallery .artefact:last-child img { object-position: center 80%; }
.expenses-gallery .artefact:last-child img { object-position: right 30%; }
.staff-gallery .artefact:first-child img { object-position: right 20%; }
.staff-gallery .artefact:last-child img { object-position: center bottom; }
.funding-gallery .artefact:first-child img { width: 175%; max-width: none; height: auto; transform: translate(-22%,-15%); }
.funding-gallery .artefact:last-child img { width: 175%; max-width: none; height: auto; transform: translate(-22%,-35%); }
.case-content .iteration-record > figcaption { margin: 18px 0 0; color: var(--muted); font: 13px/1.55 var(--sans); }
.case-content .iteration-record { margin: 40px 0 56px; }
.iteration-strip { display: grid; grid-template-columns: .8fr 1.1fr 1.1fr; gap: 12px; }
.iteration-strip > div { min-width: 0; padding: 18px 12px; border: 1px solid var(--line); border-radius: 10px; background: #f5f5f3; display: grid; grid-template-rows: 28px 160px; align-items: center; }
.iteration-strip > div:last-child { border: 2px solid var(--accent); background: var(--chapter-soft); }
.iteration-strip span { align-self: start; font: 10px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.iteration-strip img { width: 100%; max-height: 160px; object-fit: contain; border-radius: 5px; }
@container (max-width: 820px) {
  .project-summary > .summary-item, .project-summary[data-summary-cards="3"] > .summary-item { grid-column: span 6; }
  .project-summary[data-summary-cards] > .summary-meta, .project-summary > .summary-product { grid-column: 1 / -1; }
  .summary-meta .summary-details { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .summary-details > div { border: 0; padding: 0; }
  .feature-portrait { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); }
  .feature-portrait .gallery-label { display: none; }
  .feature-portrait .gallery-copy { grid-column: 1; }
  .feature-portrait .gallery-image { grid-column: 2; }
  .gallery-feature { padding: 36px 24px; gap: 24px; }
}
@container (max-width: 640px) {
  .gallery-feature,.feature-portrait { grid-template-columns: 1fr; grid-template-rows: auto; padding: 36px 24px; }
  .gallery-label { display: none; }
  .gallery-caption { grid-column: 1; grid-template-columns: 1fr; }
  .gallery-caption > span { grid-row: auto; }
  .feature-portrait .gallery-copy { grid-column: 1; grid-row: 1; }
  .feature-portrait .gallery-image { grid-column: 1; grid-row: 2; }
  .portrait-gallery { width: 100%; height: 460px; }
}
@media (max-width: 860px) {
  .project-summary { padding: 0 24px; }
}
@media (max-width: 760px) {
  .summary-metrics { grid-template-columns: 1fr; }
  .summary-metrics > div { border-left: 0; border-top: 1px solid var(--line); }
  .summary-metrics > div:first-child { border-top: 0; }
  .gallery-feature,.feature-portrait { grid-template-columns: 1fr; grid-template-rows: auto; padding: 36px 24px; }
  .gallery-label { display: none; }
  .gallery-caption { grid-column: 1; grid-template-columns: 1fr; }
  .gallery-caption > span { grid-row: auto; }
  .feature-portrait .gallery-copy { grid-column: 1; grid-row: 1; }
  .feature-portrait .gallery-image { grid-column: 1; grid-row: 2; }
  .gallery-copy { padding-bottom: 0; }
  .portrait-gallery { height: 460px; width: 100%; }
}
@media (max-width: 560px) {
  .project-summary > .summary-item, .project-summary[data-summary-cards="3"] > .summary-item { grid-column: 1 / -1; }
  .summary-meta .summary-details { grid-template-columns: 1fr; gap: 0; }
  .summary-details > div { padding: 10px 0; border-top: 1px solid var(--line); }
  .summary-details > div:first-child { border-top: 0; padding-top: 0; }
  .supporting-strip,.iteration-strip { grid-template-columns: 1fr; }
  .artefact-image { height: 180px; }
  .portrait-gallery { height: 400px; }
  .gallery-feature { padding: 30px 18px; }
  .case-content .gallery-copy h3 { font-size: 36px; }
}

/* Supporting research and comparison records retain their full composition. */
.supporting-strip--records .artefact-image { height: 180px; }
.supporting-strip--records .artefact-image img { object-fit: contain; object-position: center; }
.feature-product .gallery-image { align-self: center; }
.diagram-canvas { overflow-x: auto; color: var(--ink); }
.diagram-canvas svg { display: block; width: 100%; min-width: 560px; height: auto; }
.diagram-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.diagram-mobile { display: none; }
@media (max-width: 600px) {
  .practice-gallery .diagram-canvas svg { display: none; }
  .diagram-mobile { display: grid; gap: 12px; }
  .diagram-mobile > div { padding: 20px; border: 1px solid var(--chapter-soft-rule); border-radius: 9px; background: #fff; }
  .diagram-mobile > div:last-child { background: var(--chapter-soft); }
  .diagram-mobile span { font: 11px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
  .case-content .diagram-mobile p { margin: 10px 0 0; font-size: 14px; line-height: 1.5; }
  .diagram-mobile strong { display: block; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); font: 500 22px/1.2 var(--serif); }
}