/* HUMAN PERFORMANCE IN CONTEXT (/research/human-performance-in-context) --
   Loaded last and scoped to .page-report, so nothing here reaches the
   header, the footer, or any other route.

   Same band system as /research, /about, /method and /context:
   full-width sections, one inner container inset by --page-gutter and no
   max-width, so the wordmark, the H1, every band edge, the footer
   wordmark and the copyright rule share one left and right line. */

.page-report {
  --rp-pad-y: clamp(1.75rem, 2.4vw, 2.75rem);
  --rp-measure: 40rem;
  --rp-col-gap: clamp(2rem, 3vw, 3rem);
  --rp-rule: rgba(32, 51, 41, 0.14);
  --rp-rule-dark: rgba(239, 235, 224, 0.28);
}

/* BANDS ---------------------------------------------------------------- */

.page-report main { background: var(--paper); }

.rp-sec { padding-block: var(--rp-pad-y); }
.rp-shell { width: 100%; padding-inline: var(--page-gutter); }

.rp-sec--paper { background: var(--paper); }
.rp-sec--paper-light { background: var(--paper-light); }
.rp-sec--ink { background: var(--ink-green); }

/* TYPE ----------------------------------------------------------------
   H1 and H2 take the homepage's own declarations, so the first heading
   is the size of the homepage's first and every section heading matches
   its section headings. Each sits at (0,2,1) while `.page-report main p`
   is (0,1,2), so the paragraph rule cannot reach them. */

.page-report main .rp-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 var(--s3);
  max-width: none;
  line-height: 1.6;
}

.page-report main .rp-h1 {
  font-family: var(--display);
  font-weight: 500;
  /* Identical to the homepage hero H1. */
  font-size: clamp(3.5rem, 5.9vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: -0.008em;
  color: var(--ink-green);
  margin: 0 0 var(--s3);
  max-width: none;
}

.page-report main .rp-h2 {
  font-family: var(--display);
  font-weight: 500;
  /* Matches .growth-heading on the homepage. */
  font-size: clamp(2rem, 3.7vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.004em;
  color: var(--ink-green);
  margin: 0 0 var(--s3);
}

.page-report main p {
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--forest);
  max-width: var(--rp-measure);
  margin: 0 0 var(--s3);
}
.page-report main p:last-child { margin-bottom: 0; }

/* The line under each heading that carries the claim, set in the display
   face so it reads as part of the heading rather than as body copy. */
.page-report main .rp-display {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.05rem + 1.15vw, 1.9375rem);
  line-height: 1.24;
  letter-spacing: -0.002em;
  color: var(--ink-green);
  max-width: 46rem;
  margin: 0 0 var(--s3);
}

.page-report main .rp-topics {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rust);
  max-width: none;
  margin: 0 0 var(--s3);
}

/* Links take the site convention: no rule until hover, the same as
   .link-arrow, .crumbs a, .mt-link and .rs-link. */
.page-report main .rp-link {
  display: inline-block;
  margin-top: var(--s2);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--rust);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.page-report main .rp-link:hover { border-bottom-color: var(--rust); }
.page-report main .rp-link .arw { display: inline-block; transition: transform 220ms var(--ease); }
.page-report main .rp-link:hover .arw { transform: translateX(3px); }

/* The rust control the About and Research pages already close on. */
.page-report main .rp-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--s2);
  padding: 0.85rem 1.4rem;
  border: 1px solid var(--rust);
  background: var(--rust);
  color: var(--paper-light);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.page-report main .rp-cta:hover {
  border-color: #6F3217;
  background: #6F3217;
}
.page-report main .rp-cta .arw { display: inline-block; transition: transform 220ms var(--ease); }
.page-report main .rp-cta:hover .arw { transform: translateX(3px); }
/* The global focus ring is rust, which is invisible on a rust button
   (1:1). Ink green measures 11.9:1 on both cream grounds. */
.page-report main .rp-cta:focus-visible {
  outline: 2px solid var(--ink-green);
  outline-offset: 3px;
}

/* 1. HERO --------------------------------------------------------------
   The copy keeps the page's left line and the picture runs off the right
   edge of the viewport, so the band is filled by the pair rather than by
   a long line of prose. The shell drops its right inset to let it. */

.rp-hero .rp-shell { padding-right: 0; }
.rp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
  gap: var(--rp-col-gap);
  align-items: center;
}
.rp-hero-copy { padding-block: clamp(0.5rem, 1.2vw, 1.25rem); }
.rp-hero-media { width: 100%; display: flex; justify-content: flex-end; }
.rp-hero-media img { display: block; width: 100%; height: auto; }

/* 2. WHAT COULD CHANGE THE ANSWER --------------------------------------
   Warm off-white for every piece of text on the ink ground, the eyebrow
   included: the inherited rust measures 2.1:1 there. */

.rp-outcomes { color: var(--paper-on-dark); }
.page-report main .rp-outcomes .rp-eyebrow { color: var(--paper-on-dark); }
.page-report main .rp-outcomes .rp-h2 { color: var(--paper-light); }
.page-report main .rp-outcomes .rp-display { color: var(--paper-light); }
.page-report main .rp-outcomes p { color: var(--paper-on-dark); }

.rp-outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rp-col-gap);
  list-style: none;
  margin: clamp(1.25rem, 2.2vw, 2rem) 0 0;
  padding: 0;
}
.rp-outcome + .rp-outcome {
  border-left: 1px solid var(--rp-rule-dark);
  padding-left: var(--rp-col-gap);
}
/* The three outcomes are the argument, so they take the display face at
   the size the section lines use rather than another run of body text. */
.page-report main .rp-outcome-head {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.05rem + 1.15vw, 1.9375rem);
  line-height: 1.2;
  letter-spacing: -0.002em;
  color: var(--paper-light);
  margin: 0 0 var(--s2);
}
.page-report main .rp-outcome p { font-size: 1.0625rem; line-height: 1.55; max-width: none; margin: 0; }

/* The closing line belongs to all three columns, so the rule runs the
   full width of the band while the sentence keeps a reading measure. */
.page-report main .rp-outcome-close {
  margin-top: clamp(1.5rem, 2.4vw, 2.25rem);
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
  border-top: 1px solid var(--rp-rule-dark);
  max-width: 62rem;
}

/* 3. HOW THE EVIDENCE IS EXAMINED -------------------------------------- */

.rp-evidence { padding-bottom: clamp(1.25rem, 1.8vw, 1.75rem); }
.page-report main .rp-evidence-body { max-width: 52rem; }

/* 4. PUBLICATION UPDATE -----------------------------------------------
   Shares the cream ground with the band above it, so a hairline inside
   the shell separates the two rather than a change of colour. */

.rp-update { padding-top: clamp(1.5rem, 2.2vw, 2rem); }
.rp-update .rp-shell { border-top: 1px solid var(--rp-rule); padding-top: clamp(1.75rem, 2.8vw, 2.75rem); }
.rp-update-grid {
  display: grid;
  grid-template-columns: minmax(0, 26fr) minmax(0, 74fr);
  gap: var(--rp-col-gap);
  align-items: center;
}
.rp-update-media { width: 100%; }
.rp-update-media img { display: block; width: 100%; max-width: 260px; height: auto; }

/* RESPONSIVE ----------------------------------------------------------- */

@media (max-width: 960px) {
  .page-report main .rp-h1 { font-size: clamp(3.4rem, 12.5vw, 4.2rem); }
}

@media (max-width: 860px) {
  /* Stacked: the picture returns inside the page's side gutters and no
     longer bleeds, and each block sits under its own label. */
  .rp-hero .rp-shell { padding-right: var(--page-gutter); }
  .rp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .rp-hero-media { max-width: 620px; justify-content: flex-start; }

  .rp-outcome-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .rp-outcome + .rp-outcome {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--rp-rule-dark);
    padding-top: var(--s3);
  }

  .rp-update-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .rp-update-media img { max-width: 220px; }

  /* 16px body. Each override repeats its desktop selector so it clears
     that rule's specificity. */
  .page-report main p { font-size: 1rem; }
  .page-report main .rp-outcome p { font-size: 1rem; }
}

@media (max-width: 620px) {
  .page-report main .rp-h2 { font-size: clamp(2rem, 10vw, 3rem); }
  .page-report main .rp-cta { width: 100%; justify-content: center; }
}