/* SPACEREL page-purpose surfaces and responsive spacing.
 * Scoped to #main-content: navigation, corporate footer and the amber
 * enquiry CTA remain owned by their established stylesheets.
 *
 * Warm service/editorial surface: #F6F5F2
 * White technical/reference surface: #FFFFFF
 * Charcoal heroes/footer: unchanged (#111315 / existing footer rule)
 * Amber enquiry CTA: unchanged (#FCA311).
 */
:root {
  --spacerel-surface-warm: #f6f5f2;
  --spacerel-surface-white: #ffffff;
  --spacerel-surface-ink: #16191c;
  --spacerel-surface-muted: #555d62;
  --spacerel-surface-rule: #dbdcd8;
}

/* Colour belongs to content, not site chrome or enquiry conversion areas. */
body.surface-warm #main-content {
  --paper: var(--spacerel-surface-warm);
  --ink: var(--spacerel-surface-ink);
  --paper-line: var(--spacerel-surface-rule);
  background: var(--spacerel-surface-warm);
  color: var(--spacerel-surface-ink);
  color-scheme: light;
}
body.surface-white #main-content {
  --paper: var(--spacerel-surface-white);
  --ink: var(--spacerel-surface-ink);
  --paper-line: #dedede;
  background: var(--spacerel-surface-white);
  color: var(--spacerel-surface-ink);
  color-scheme: light;
}

/* Full-width warm surface: supersede the legacy reading-surfaces rule that
   assigns #fff to #main-content. A narrower content wrapper must never be the
   only element carrying the warm background (white side gutters). */
body.reading-surfaces.surface-warm:not(.homepage) #main-content,
body.preserve-capability-background.surface-warm:not(.homepage) #main-content {
  background-color: var(--spacerel-surface-warm);
  --paper: var(--spacerel-surface-warm);
  --paper-line: var(--spacerel-surface-rule);
}
/* Normal light content follows the full-width parent, even where refinements
   previously assigned pure white to all .section elements. */
body.surface-warm:not(.homepage) #main-content .section.light-section:not(.final-cta),
body.surface-warm:not(.homepage) #main-content .research-body,
body.surface-warm:not(.homepage) #main-content .about-editorial,
body.surface-warm:not(.homepage) #main-content .about-editorial :is(.about-principles,.about-approach) {
  background-color: var(--spacerel-surface-warm);
}
/* Keep the research project's dark chapter blocks and amber enquiry panels. */
body.surface-warm.research-page #main-content .research-initiatives {
  background-color: #15191c;
}
body.surface-warm.research-page #main-content .research-related {
  background-color: #111315;
}

/* Homepage: preserve all dark bands, hero and CTA; lighten only cream/white
   presentation sections without altering their layout, hierarchy or images. */
body.homepage #main-content > .light-section,
body.homepage #main-content > .challenges-section {
  background: var(--spacerel-surface-warm);
  color: var(--spacerel-surface-ink);
  --paper: var(--spacerel-surface-warm);
  --paper-line: var(--spacerel-surface-rule);
}

/* Capabilities, industry sectors, standards overview and related services:
   warm editorial backgrounds. Keep all headers and hero shells charcoal. */
body.surface-warm #main-content > .section.light-section:not(.final-cta),
body.surface-warm #main-content > .section.capability-methods,
body.surface-warm #main-content > .technical-content,
body.surface-warm #main-content > .reliability-content,
body.surface-warm #main-content > .research-body,
body.surface-warm #main-content > .reliability-related,
body.surface-warm #main-content .research-body {
  background: var(--spacerel-surface-warm);
  color: var(--spacerel-surface-ink);
  --paper: var(--spacerel-surface-warm);
  --ink: var(--spacerel-surface-ink);
  --paper-line: var(--spacerel-surface-rule);
}
body.surface-warm.capability-overview #main-content > .technical-content,
body.surface-warm.capability-overview #main-content > .capability-methods,
body.surface-warm.capability-overview #main-content > .reliability-related {
  background: var(--spacerel-surface-warm);
  --paper-line: var(--spacerel-surface-rule);
}
body.surface-warm #main-content .technical-content :is(.technical-section,.technical-split) {
  border-color: var(--spacerel-surface-rule);
}
/* Preserve R&D's deliberately dark selected-development and related-work bands. */
body.surface-warm.research-page #main-content :is(.research-initiatives,.research-related) {
  background: #15191c;
  color: #f4f3ef;
  color-scheme: dark;
}
body.surface-warm.research-page #main-content .research-related {
  background: #111315;
}

/* About: keep the compact editorial three-column structure. Alternate surfaces
   via true white inset content panels, not oversized full-bleed white stripes. */
body.surface-warm #main-content .about-editorial,
body.surface-warm #main-content .about-editorial :is(.about-principles,.about-approach) {
  background: var(--spacerel-surface-warm);
  color: var(--spacerel-surface-ink);
}
body.surface-warm #main-content .about-editorial :is(.technical-callout,.download-box,.branch-panel) {
  background: #fff;
  border-color: var(--spacerel-surface-rule);
  color: var(--spacerel-surface-ink);
}

/* Technical standards, long-form resources, case studies and general methods:
   neutral pure-white reading area. Toolkit/calculators already use pure white;
   retain their independent field/table backgrounds. */
body.surface-white #main-content > .section.light-section:not(.final-cta),
body.surface-white #main-content > .technical-content,
body.surface-white #main-content > .resource-article,
body.surface-white #main-content .resource-article,
body.surface-white #main-content .resource-article > .technical-content,
body.surface-white #main-content > .research-body {
  background: var(--spacerel-surface-white);
  color: var(--spacerel-surface-ink);
  --paper: var(--spacerel-surface-white);
  --paper-line: #dedede;
}
body.surface-white #main-content .technical-content .technical-section {
  border-color: #dedede;
}

/* Section rhythm. Unlike the old broad .section rule, these only adjust
   boundaries and technical block padding, not the hero, footer, or amber CTA.
   Preserve design-specific hero-to-first-section spacing on Reliability. */
body.homepage #main-content > .section:not(.final-cta):not(.principles-section) {
  padding-block: clamp(44px, 4vw, 60px);
}
body:not(.homepage) #main-content > .section:not(.final-cta):not(.research-initiatives) {
  padding-block: clamp(48px, 4vw, 64px);
}
body:not(.homepage) #main-content > .technical-content > .technical-section,
body:not(.homepage) #main-content > .technical-content > .technical-split,
body:not(.homepage) #main-content .research-body .technical-content > .technical-section {
  padding-block: clamp(38px, 3vw, 48px);
}
/* First blocks already have deliberate hero-to-content padding on the container. */
body:not(.homepage) #main-content > .technical-content > .technical-section:first-child,
body:not(.homepage) #main-content .research-body .technical-content > .technical-section:first-child {
  padding-top: 0;
}
body.capability-overview.reliability-page #main-content > .reliability-content {
  padding-top: clamp(60px, 4.5vw, 76px);
}
body.capability-overview.reliability-page #main-content > .reliability-content > section:first-child {
  padding-top: 0;
}
@media (max-width: 1100px) {
  body.homepage #main-content > .section:not(.final-cta):not(.principles-section) { padding-block: 44px; }
  body:not(.homepage) #main-content > .section:not(.final-cta):not(.research-initiatives) { padding-block: 44px; }
}
@media (max-width: 760px) {
  body.homepage #main-content > .section:not(.final-cta):not(.principles-section) { padding-block: 34px; }
  body:not(.homepage) #main-content > .section:not(.final-cta):not(.research-initiatives) { padding-block: 36px; }
  body:not(.homepage) #main-content > .technical-content > .technical-section,
  body:not(.homepage) #main-content > .technical-content > .technical-split,
  body:not(.homepage) #main-content .research-body .technical-content > .technical-section { padding-block: 32px; }
  body.capability-overview.reliability-page #main-content > .reliability-content { padding-top: 52px; }
}
@media print {
  body.surface-warm #main-content,
  body.surface-warm #main-content > .section.light-section,
  body.surface-warm #main-content > .technical-content,
  body.surface-warm #main-content .research-body,
  body.surface-warm #main-content .about-editorial {
    background: white;
    color: black;
  }
}