/* CitySite consumes DS tokens with AFARS's case-reading relationships. */
/* Match AFARS hero spacing without changing shared case-page defaults. */
body[data-project-page="citysite"] .case-hero { padding-top: clamp(16px, 2.25vw, 32px); }
body[data-project-page="citysite"] .case-hero > .case-deck { margin-top: calc(var(--hero-deck-gap) / 2); }
body[data-project-page="citysite"] .case-hero > .case-tags { margin-top: calc(clamp(20px, 2.5vw, var(--eyebrow-heading-gap)) / 2); }
body[data-project-page="citysite"] .case-hero > .case-cover { margin-top: clamp(24px, 3.5vw, 48px); }
body[data-project-page="citysite"] #expansion { border-block: 0; }
body[data-project-page="citysite"] #expansion > .comparison-card + .comparison-card { position: relative; }
body[data-project-page="citysite"] #expansion > .comparison-card + .comparison-card::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--section-gap) / -2); border-left: var(--quiet-border);
}
@media (max-width: 820px) {
  body[data-project-page="citysite"] #expansion > .comparison-card + .comparison-card::before {
    top: calc(var(--section-gap) / -2); bottom: auto; left: 0; right: 0; border-left: 0; border-top: var(--quiet-border);
  }
}
body[data-project-page="citysite"] figure > figcaption { margin-top: var(--caption-gap); text-align: center; }
body[data-project-page="citysite"] .critical-decision .validation-decision-grid {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
  grid-template-rows: repeat(4,auto); column-gap: var(--section-gap); row-gap: var(--grid-gap);
  border-top: 0; margin-top: var(--section-gap); padding-top: var(--section-gap);
}
body[data-project-page="citysite"] .critical-decision .validation-decision-grid .decision-card {
  display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: subgrid; grid-row: 1 / span 4;
  gap: var(--grid-gap); padding-inline: 0; align-items: start; position: relative;
}
body[data-project-page="citysite"] .critical-decision .validation-decision-grid .decision-card:first-child { padding-left: 0; }
body[data-project-page="citysite"] .critical-decision .validation-decision-grid .decision-card:last-child { padding-right: 0; }
body[data-project-page="citysite"] .critical-decision .validation-decision-grid .decision-card + .decision-card::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--section-gap) / -2); border-left: var(--quiet-border); }
body[data-project-page="citysite"] .critical-decision .validation-decision-grid .decision-card > :is(h4,p) { margin: 0; }
body[data-project-page="citysite"] .critical-decision .validation-decision-grid .decision-card > * { grid-column: 1; }
body[data-project-page="citysite"] .critical-decision .validation-decision-grid .decision-card > :nth-child(1) { grid-row: 1; }
body[data-project-page="citysite"] .critical-decision .validation-decision-grid .decision-card > :nth-child(2) { grid-row: 2; }
body[data-project-page="citysite"] .critical-decision .validation-decision-grid .decision-card > :nth-child(3) { grid-row: 3; }
body[data-project-page="citysite"] .critical-decision .validation-decision-grid .decision-card > :nth-child(4) { grid-row: 4; }
body[data-project-page="citysite"] .critical-decision .validation-decision-grid .case-diagram { margin-top: 0; }
body[data-project-page="citysite"] .critical-decision :is(.decision-card h4,.qa-final-editorial h4) {
  font-size: var(--type-subsection); font-weight: var(--type-ui-weight); line-height: var(--type-subsection-leading);
}
body[data-project-page="citysite"] .critical-decision .qa-final-editorial {
  display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr);
  gap: var(--grid-gap) var(--content-gap); border-top: var(--quiet-border);
  margin-top: var(--section-gap); padding-top: var(--section-gap); background: transparent;
}
body[data-project-page="citysite"] .qa-final-editorial > :is(span,h4,p) { grid-column: 1; margin: 0; }
body[data-project-page="citysite"] .qa-final-editorial > .case-diagram { grid-column: 2; grid-row: 1 / span 6; margin: 0; }
body[data-project-page="citysite"] .qa-final-editorial > span { font-size: var(--type-eyebrow-size); font-weight: var(--type-eyebrow-weight); line-height: var(--type-eyebrow-leading); letter-spacing: var(--type-eyebrow-tracking); }
@media (max-width: 720px) {
  body[data-project-page="citysite"] .critical-decision .validation-decision-grid { grid-template-columns: minmax(0,1fr); grid-template-rows: none; row-gap: var(--section-gap); }
  body[data-project-page="citysite"] .critical-decision .validation-decision-grid .decision-card { grid-row: auto; grid-template-rows: none; padding-inline: 0; }
  body[data-project-page="citysite"] .critical-decision .validation-decision-grid .decision-card + .decision-card { border-left: 0; border-top: var(--quiet-border); padding-top: var(--section-gap); }
  body[data-project-page="citysite"] .critical-decision .validation-decision-grid .decision-card + .decision-card::before { display: none; }
  body[data-project-page="citysite"] .critical-decision .qa-final-editorial { grid-template-columns: minmax(0,1fr); }
  body[data-project-page="citysite"] .qa-final-editorial > .case-diagram { grid-column: 1; grid-row: auto; }
}
body[data-project-page="citysite"] #expansion .closing-question {
  font-family: var(--font-editorial);
  font-size: var(--type-editorial-subsection);
  font-weight: var(--type-editorial-weight);
  line-height: var(--type-section-leading);
  letter-spacing: var(--body-tracking);
  color: var(--ink);
}
body[data-project-page="citysite"] .case-deck { font-size: 20px; }
body[data-project-page="citysite"] .case-project-type { margin-top: var(--grid-gap); }
body[data-project-page="citysite"] .design-validation { margin-top: var(--content-group-gap); }
body[data-project-page="citysite"] .design-validation > .eyebrow { margin-bottom: var(--grid-gap); }
body[data-project-page="citysite"] .workflow-comparison { display: grid; grid-template-columns: minmax(0,1229fr) minmax(0,4105fr); gap: var(--section-gap); margin-top: var(--section-gap); align-items: start; }
body[data-project-page="citysite"] .workflow-comparison .case-diagram { margin: var(--grid-gap) 0 0; aspect-ratio: 4105 / 2040; }
body[data-project-page="citysite"] .workflow-comparison > div:first-child .case-diagram { aspect-ratio: 1229 / 2040; }
body[data-project-page="citysite"] .workflow-comparison .case-image-trigger { height: 100%; }
body[data-project-page="citysite"] .workflow-comparison img { width: 100%; height: 100%; object-fit: contain; object-position: left top; }
@media (max-width: 720px) {
  body[data-project-page="citysite"] .workflow-comparison { grid-template-columns: minmax(0,1fr); }
  body[data-project-page="citysite"] .workflow-comparison > div:first-child { width: calc(100% * 1229 / 4105); }
}
body[data-project-page="citysite"] .diagram-source-note { margin-bottom: var(--grid-gap); color: var(--muted); }
body[data-project-page="citysite"] .workflow-primary { width: 70%; margin-inline: auto; }
body[data-project-page="citysite"] .swimlane-scroll { width: 100%; max-width: 100%; border: 0; }
body[data-project-page="citysite"] .swimlane-scroll img { width: 100%; max-width: 100%; height: auto; }
body[data-project-page="citysite"] .swimlane-scroll .case-image-trigger { width: 100%; max-width: 100%; }
body[data-project-page="citysite"] .swimlane-scroll:focus-visible { outline: 3px solid var(--blue); outline-offset: var(--space-tight); }
body[data-project-page="citysite"] .validation-decision-grid .decision-card:not(.decision-final) .case-diagram { width: 70%; margin-inline: auto; }
body[data-project-page="citysite"] .decision-sequence .decision-final { margin-top: var(--section-gap); grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); }
body[data-project-page="citysite"] .north-star-role:nth-of-type(1) > div > span { color: var(--blue); }
body[data-project-page="citysite"] .north-star-role:nth-of-type(2) > div > span { color: #b74b8e; }
body[data-project-page="citysite"] .north-star-role:nth-of-type(3) > div > span { color: #7655ad; }
body[data-project-page="citysite"] .north-star-video { object-fit: contain; }
body[data-project-page="citysite"] { --h2-before-gap: 20px; }
body[data-project-page="citysite"] :is(.case-title,.story-content h2) { text-wrap: wrap; }
body[data-project-page="citysite"] .story-content { min-width: 0; }
body[data-project-page="citysite"] .story-content > h2 { max-width: none; margin: 0 0 var(--h2-after-gap); }
body[data-project-page="citysite"] .case-sections .story-row > .eyebrow { margin: 0; }
body[data-project-page="citysite"] :is(.case-toc a,.case-sections .story-row > .eyebrow) { text-transform: none; }
body[data-project-page="citysite"] .story-content p { margin: 0; }
body[data-project-page="citysite"] .story-content p + p { margin-top: var(--grid-gap); }
body[data-project-page="citysite"] .story-content :is(h3,h4) { margin: 0 0 var(--component-heading-after); }
body[data-project-page="citysite"] :is(.research-copy,.validation-finding > div,.north-star-role > div) > span { display: block; margin-bottom: var(--space-small); }
body[data-project-page="citysite"] .research-findings { gap: var(--content-group-gap); margin-top: var(--content-group-gap); }
body[data-project-page="citysite"] .validation-finding { margin-top: var(--content-group-gap); padding-top: 0; }
body[data-project-page="citysite"] .north-star-role { margin-top: var(--content-group-gap); }
body[data-project-page="citysite"] .outcome-block { margin-top: var(--content-group-gap); }
body[data-project-page="citysite"] .story-content .outcome-label { margin-bottom: var(--card-content-gap); }
body[data-project-page="citysite"] .story-content .outcome-label + p { margin-top: 0; }
body[data-project-page="citysite"] .story-content :is(.closing-question,.model-emphasis) { margin-top: var(--section-gap); }
body[data-project-page="citysite"] .story-content > h3.model-emphasis { font-family: var(--font-editorial); font-size: var(--type-editorial-subsection); font-weight: var(--type-editorial-weight); line-height: var(--type-section-leading); margin-bottom: 0; }
body[data-project-page="citysite"] .expansion-comparison + p { margin-top: var(--section-gap); }
body[data-project-page="citysite"] .north-star-editorial > span { display: block; margin-bottom: var(--grid-gap); }
body[data-project-page="citysite"] .north-star-editorial { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body[data-project-page="citysite"] .validation-chips span { font-family: var(--font-sans); font-size: var(--small-title-size); font-weight: var(--small-title-weight); line-height: var(--small-title-leading); letter-spacing: var(--small-title-tracking); color: var(--muted); padding: var(--tag-padding-y) var(--tag-padding-x); border-radius: var(--tag-radius); }
/* Supporting refinements stay subordinate to the existing approval sequence. */
body[data-project-page="citysite"] .decision-sequence.validation-decision-grid .decision-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
body[data-project-page="citysite"] :is(.supporting-refinements,.critical-decision) { margin-top: var(--content-group-gap); }
body[data-project-page="citysite"] :is(.supporting-refinements,.critical-decision) > .eyebrow { margin-bottom: var(--grid-gap); }
body[data-project-page="citysite"] .testing-metadata { margin-block: var(--section-gap) var(--grid-gap); }
body[data-project-page="citysite"] .testing-metadata + p { margin-top: 0; }
body[data-project-page="citysite"] .compact-refinements { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--section-gap); }
body[data-project-page="citysite"] .compact-refinements article { min-width: 0; }
body[data-project-page="citysite"] .compact-refinements .case-diagram { margin-top: var(--section-gap); }
body[data-project-page="citysite"] :is(.case-title,.story-content h2,.workflow-placeholder) { overflow-wrap: anywhere; }
body[data-project-page="citysite"] .workflow-placeholder { min-width: 0; min-height: 0; aspect-ratio: 16 / 9; padding: var(--content-gap); }
body[data-project-page="citysite"] .role-video { margin: 0; min-width: 0; }
body[data-project-page="citysite"] .role-video video { border-radius: 20px; box-shadow: var(--project-hover-shadow); }
body[data-project-page="citysite"] #reframe { border: 0; }
body[data-project-page="citysite"] .role-video figcaption { margin-top: var(--caption-gap); color: var(--muted); }
body[data-project-page="citysite"] .decision-sequence .decision-final .case-diagram { grid-row: 1 / span 5; }
body[data-project-page="citysite"] .decision-sequence .decision-final > :is(h4,p,span) { grid-column: 1; }
body[data-project-page="citysite"] .decision-card .type-small-heading { color: var(--ink); }
@media (max-width: 820px) {
  body[data-project-page="citysite"] .workflow-primary { width: 100%; }
  body[data-project-page="citysite"] .swimlane-scroll img { min-width: 0; }
  body[data-project-page="citysite"] .research-finding:nth-of-type(3) > .case-diagram { width: 50%; margin-inline: auto; }
  body[data-project-page="citysite"] .research-finding,
  body[data-project-page="citysite"] .research-finding-reverse { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 720px) {
  body[data-project-page="citysite"] .decision-sequence.validation-decision-grid .decision-final { grid-template-columns: minmax(0,1fr); }
  body[data-project-page="citysite"] .compact-refinements { grid-template-columns: minmax(0,1fr); }
  body[data-project-page="citysite"] .decision-sequence .decision-final > :is(h4,p,span),
  body[data-project-page="citysite"] .decision-sequence .decision-final .case-diagram { grid-column: auto; grid-row: auto; }
  body[data-project-page="citysite"] .workflow-placeholder { aspect-ratio: auto; min-height: 12rem; }
}