/* Page composition. Shared primitives live in ../../design-system/. */
body { text-rendering: optimizeLegibility; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 4px; }
.cover :focus-visible { outline-color: var(--on-dark); }
.progress-bar { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--signal); z-index: 100; transition: width .06s linear; }
.h-section { text-wrap: balance; }
.top .eyebrow { margin-bottom: var(--s-16); }
.top h2 { margin-bottom: var(--s-24); }
.body-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-64); align-items: start; }
.body-2col p, .top > p { font-size: var(--body-size); line-height: 1.65; color: var(--text-primary); }

/* COVER — depth slab */
.cover .inner { max-width: var(--content-wide); margin: 0 auto; padding: var(--s-96) var(--gutter); position: relative; z-index: 2; }
.cover h1 { --cover-title-size: clamp(44px, 5vw, 72px); --cover-title-leading: 1.05; --cover-title-tracking: -0.025em; max-width: 18ch; }
.cover .lede { max-width: var(--content-text); margin-top: var(--s-32); }

/* CONTEXT — bg; full-width editorial prose */
.brief { background: var(--bg); }
.brief .top { margin-bottom: var(--s-32); }

/* ROLES — sage; a wider operation around office monitoring */
.users { background: var(--sage); }
.users .top { margin-bottom: var(--s-48); }
.users .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-48); align-items: start; }
.users .avatar { width: 84px; height: auto; border-radius: 50%; margin-bottom: var(--s-24); box-shadow: 0 8px 20px -8px rgba(28,27,24,0.28); }
.users .role { font: 600 13px/1.5 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--primary); margin-bottom: var(--s-12); }
.users h3 { font: 700 22px/1.25 var(--f-display); letter-spacing: -.01em; margin-bottom: var(--s-12); text-wrap: balance; }
.users .col p { font-size: var(--body-size); line-height: 1.65; }

/* STRUCTURE — surface; reconstruction retains only the monitoring relationship */
.ia { background: var(--surface); }
.ia .top { margin-bottom: var(--s-32); }
.ia .model { max-width: var(--content-std); margin: var(--s-48) auto 0; }
.ia .root-wrap { text-align: center; }
.ia .root { display: inline-block; font: 900 16px/1.5 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark); background: var(--depth); padding: var(--s-12) var(--s-32); border-radius: var(--r-sm); }
.ia .root-wrap::after { content: ""; display: block; width: 2px; height: var(--s-32); background: var(--indigo); margin: 0 auto; }
.ia .branches { position: relative; padding-top: var(--s-32); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-48); align-items: start; }
.ia .branches::before { content: ""; position: absolute; top: 0; left: calc(25% - 12px); right: calc(25% - 12px); height: var(--s-24); border: 2px solid var(--indigo); border-bottom: none; }
.ia .b-head { font: 600 13px/1.5 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--indigo); text-align: center; margin-bottom: var(--s-24); }
.ia .node { background: var(--frost); border-radius: var(--r-md); padding: var(--s-16) var(--s-20); }
.ia .node + .node { margin-top: var(--s-12); }
.ia .n-name { font: 700 17px/1.3 var(--f-display); }
.ia .nest { position: relative; padding-left: var(--s-32); padding-top: var(--s-16); }
.ia .nest::before { content: ""; position: absolute; left: var(--s-16); top: 0; height: calc(var(--s-16) + 27px); width: var(--s-16); border-left: 2px solid var(--indigo); border-bottom: 2px solid var(--indigo); }
.ia .model .figure-caption { margin-top: var(--s-32); }

/* INTERFACE — bg; dense original artifacts take the wide track */
.product { background: var(--bg); }
.product .top { max-width: calc(var(--content-wide) - 2 * var(--gutter)); margin: 0 auto var(--s-48); }
.product .screen-link { display: block; background: var(--surface); border-radius: var(--r-xl); padding: var(--s-32); box-shadow: var(--shadow-heavy); }
.product img { width: 100%; height: auto; border-radius: var(--r-md); }
.product .figure-caption { max-width: calc(var(--content-wide) - 2 * var(--gutter)); margin: var(--s-24) auto 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-64); }
.product .pair { margin-top: var(--s-80); display: grid; gap: var(--s-80); }

/* OUTCOME — sage; deliverable and reported funding retain separate columns */
.result-story { background: var(--sage); }
.result-story .top { margin-bottom: var(--s-32); }

@media (max-width: 1024px) {
  .cover .inner { padding: var(--s-80) var(--gutter); }
}
@media (max-width: 900px) {
  .body-2col { grid-template-columns: 1fr; gap: var(--s-24); }
  .users .grid { grid-template-columns: 1fr; gap: var(--s-48); }
  .users .col { max-width: var(--content-text); }
  .h-section br { display: none; }
  .product .h-section br { display: initial; }
  .product .figure-caption { grid-template-columns: 1fr; gap: var(--s-12); }
}
@media (max-width: 640px) {
  :root { --section-pad-y: var(--s-64); }
  .cover h1 { --cover-title-size: clamp(36px, 9vw, 48px); max-width: none; }
  .top { margin-bottom: var(--s-32); }
  .ia .root-wrap { text-align: left; }
  .ia .root-wrap::after { margin-left: var(--s-32); }
  .ia .branches { display: block; margin-left: var(--s-32); padding: 0 0 0 var(--s-24); }
  .ia .branches::before { display: none; }
  .ia .branch { position: relative; }
  .ia .branch::before { content: ""; position: absolute; left: calc(-1 * var(--s-24)); top: 10px; width: var(--s-16); height: 2px; background: var(--indigo); }
  .ia .branch::after { content: ""; position: absolute; left: calc(-1 * var(--s-24)); top: 0; width: 2px; height: calc(100% + var(--s-32)); background: var(--indigo); }
  .ia .branch:last-child::after { height: 10px; }
  .ia .branch + .branch { margin-top: var(--s-32); }
  .ia .b-head { text-align: left; margin-bottom: var(--s-16); }
  .ia .node { padding: var(--s-16); }
  .ia .nest { padding-left: var(--s-24); }
  .ia .nest::before { left: var(--s-8); }
  .product .screen-link { padding: var(--s-8); border-radius: var(--r-md); }
  .product img { border-radius: var(--r-sm); }
  .product .pair { margin-top: var(--s-48); gap: var(--s-48); }
}