:root {
  --report-canvas-max: 1440px;
  --report-content-rail-max: 1288px;
  --report-content-gutter: clamp(24px, 5vw, 76px);
  --report-flow-gap: clamp(64px, 5.5vw, 88px);
  --report-page-start: clamp(48px, 5vw, 72px);
}

.report-canvas {
  position: relative;
  inset-inline-start: 50vw;
  width: min(100vw, var(--report-canvas-max));
  margin-inline: 0;
  transform: translateX(-50%);
}

.report-content-rail {
  width: min(
    calc(100% - var(--report-content-gutter) - var(--report-content-gutter)),
    var(--report-content-rail-max)
  );
  max-width: 100%;
  margin-inline: auto;
}

.report-full-width-band {
  width: 100%;
}

.report-vertical-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--report-flow-gap);
}

/*
 * Approved long-form alignment.
 *
 * These owner-scoped rules keep the 1440 px canvas centred against the
 * viewport (not the scrollbar-reduced document width), use one 1288 px rail,
 * and start the first heading 72 px below the report header.  Chapter openers
 * and source-approved full-width heroes are intentionally outside this list.
 */
:is(
  body.v4-page.risk-control-page .risk-control-canvas,
  body.v4-page.principles-page .principles-canvas,
  body.v4-page.esg-risk-integration-page .esg-risk-segment,
  body.v4-page.initiatives-page .initiatives-page__canvas,
  body.v4-page.human-capital-page .human-capital-page__canvas,
  body.v4-page.occupational-safety-page .occupational-safety-page__canvas,
  body.v4-page.sustainable-procurement-page .sustainable-procurement-page__canvas,
  body.v4-page.social-development-page .social-development-page__canvas
) {
  position: relative;
  inset-inline-start: 50vw;
  width: min(100vw, var(--report-canvas-max));
  max-width: var(--report-canvas-max);
  margin-inline: 0;
  transform: translateX(-50%);
}

:is(
  body.v4-page.risk-control-page .risk-s01__rail,
  body.v4-page.principles-page .principles-s01,
  body.v4-page.esg-risk-integration-page .esg-risk-segment__rail,
  body.v4-page.initiatives-page .initiatives-s01,
  body.v4-page.human-capital-page .human-capital-s01
) {
  padding-block-start: var(--report-page-start);
}

body.v4-page.occupational-safety-page [data-owner-segment="s01"] .safe-work-s01,
body.v4-page.sustainable-procurement-page [data-owner-segment="s01"] .procurement-owner-rail,
body.v4-page.social-development-page [data-owner-segment="s01"] .social-development-owner-rail {
  padding-block-start: var(--report-page-start);
}

body.v4-page.social-development-page [data-owner-segment="s01"] .social-development-s01 {
  padding-block-start: 0;
}

body.v4-page.social-development-page [data-owner-segment="s01"] .social-development-s01__rail {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* The materiality page has several source segments instead of one owner rail. */
:is(
  body.v4-page.materiality-stakeholders-page .report-page,
  body.v4-page.materiality-stakeholders-page .materiality-segment,
  body.v4-page.materiality-stakeholders-page .stakeholder-segment,
  body.v4-page.materiality-stakeholders-page main#page-content > .segment,
  body.v4-page.materiality-stakeholders-page .late-segment
) {
  position: relative;
  inset-inline-start: 50vw;
  width: min(
    calc(100vw - var(--report-content-gutter) - var(--report-content-gutter)),
    var(--report-content-rail-max)
  );
  max-width: var(--report-content-rail-max);
  margin-inline: 0;
  padding-inline: 0;
  transform: translateX(-50%);
}

body.v4-page.materiality-stakeholders-page .report-page {
  padding-block-start: var(--report-page-start);
}

body.v4-page.climate-page .climate-page__canvas {
  padding-block-start: var(--report-page-start);
}

body.v4-page.environmental-benchmarking-page .environmental-benchmarking-page__canvas {
  position: relative;
  inset-inline-start: 50vw;
  width: min(100vw, var(--report-canvas-max));
  max-width: var(--report-canvas-max);
  margin-inline: 0;
  padding: var(--report-page-start) var(--report-content-gutter) 104px;
  transform: translateX(-50%);
}

body.v4-page.environmental-benchmarking-page .environmental-segment-flow {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}