/* RESEARCH (/research) --------------------------------------------------
   Loaded last and scoped to .page-research, so nothing here reaches the
   header, the footer, or any other route.

   Same band system as /about, /method, /method/seed and /context:
   full-width sections, one inner container inset by --page-gutter and no
   max-width, which keeps the wordmark, the H1, every band edge, the
   footer wordmark and the copyright rule on a single left and right line
   at any width. */

.page-research {
  --rs-pad-y: clamp(1.25rem, 1.8vw, 2.25rem);
  --rs-measure: 40rem;
  --rs-col-gap: clamp(2rem, 3vw, 3rem);
  /* The light sage used by About's Current Focus, Method's Framework and
     the Widen the Frame card at home, rather than a second pale green. */
  --rs-sage: #E8EEE3;
  --rs-rule: rgba(32, 51, 41, 0.14);
  --rs-rule-dark: rgba(239, 235, 224, 0.28);
}

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

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

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

.rs-sec--paper { background: var(--paper); }
.rs-sec--paper-light { background: var(--paper-light); }
.rs-sec--sage { background: var(--rs-sage); }
.rs-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-research main
   p` is (0,1,2), so the paragraph rule cannot reach them. */

.page-research main .rs-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-research main .rs-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-research main .rs-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);
}
/* The report title is a link to the report, but it is a heading first:
   no colour change and no rule until hover. */
.page-research main .rs-h2 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.page-research main .rs-h2 a:hover { border-bottom-color: var(--rust); }

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

.page-research main .rs-lead {
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--olive);
  max-width: 52rem;
}

/* 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-research main .rs-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: none;
  margin: 0 0 var(--s3);
}

.page-research main .rs-meta {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--text-2);
  margin-bottom: var(--s3);
}

.page-research main .rs-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-research main .rs-link:hover { border-bottom-color: var(--rust); }
.page-research main .rs-link .arw { display: inline-block; transition: transform 220ms var(--ease); }
.page-research main .rs-link:hover .arw { transform: translateX(3px); }

/* The report band offers three ways in - the title, the picture and this
   pair. The two links are deliberately unequal: one is the way into the
   report, the other is what to do if you would rather wait for it. */
.page-research main .rs-lead-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--s3);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--rust);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.page-research main .rs-lead-link:hover { border-bottom-color: var(--rust); }
.page-research main .rs-lead-link .arw { transition: transform 220ms var(--ease); }
.page-research main .rs-lead-link:hover .arw { transform: translateX(3px); }
.page-research main .rs-report-cta { margin: 0; }

/* Quieter than the CTA above it: smaller, forest rather than rust, and no
   arrow, so the eye takes the report first and finds this second. */
.page-research main .rs-notify { margin: 0.55rem 0 0; }
.page-research main .rs-notify a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 400;
  text-decoration: none;
  color: var(--text-2);
  border-bottom: 1px solid transparent;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.page-research main .rs-notify a:hover {
  color: var(--forest);
  border-bottom-color: var(--forest);
}
.rs-notify-icon {
  width: 15px;
  height: 15px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The picture is a third route to the same page. It carries no text, so it
   is hidden from assistive tech and taken out of the tab order - the
   heading link above already goes there and is the one worth landing on. */
.rs-report-media-link { display: block; position: absolute; inset: 0; }

/* 1. PAGE HEAD --------------------------------------------------------- */

.rs-head { padding-block: clamp(1.75rem, 2.4vw, 2.5rem) clamp(1.5rem, 2vw, 2.25rem); }

/* 2. FORTHCOMING REPORT -----------------------------------------------
   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. */

.rs-report .rs-shell { padding-right: 0; }
.rs-report-grid {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  /* Tighter than the page's shared column gap: the picture sits right
     beside the copy here rather than across a ruled divide. */
  gap: clamp(1.5rem, 2.2vw, 2.25rem);
  align-items: center;
}
/* Out of flow and covering the cell, the same way the About hero and the
   How We Work photograph work. Left in flow the picture set the row
   height and left a band of empty cream above and below the copy - 128px
   taller than the text at 1440. Capping it fixed that but moved the slack
   sideways: the capped picture sat against the right edge with 188px of
   dead cream between it and the copy at 1440, and 423px at 1920. Filling
   the cell, the copy decides the height and the picture takes whatever
   width is left, so there is no gap on either axis - it is simply
   cropped top and bottom to the height the copy sets. */
/* The picture runs the full height of the band, not just of the row
   inside it. The cell stretches to the copy, then the negative block
   margin pulls the picture out through the band's own padding, top and
   bottom, so it meets the sections above and below with no cream
   between them. It is the same --rs-pad-y the band pads with, not a
   fixed number, so the two stay matched as the padding scales with the
   viewport. Stretch resolves height against the margin box, so the
   picture gains exactly the padding it cancels. */
.rs-report-media {
  position: relative;
  align-self: stretch;
  width: 100%;
  min-height: 260px;
  margin-block: calc(-1 * var(--rs-pad-y));
}
.rs-report-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Same crop scale, shifted down the source. The box is wider than the
     artwork, so cover overflows it vertically - 128px at 1440, 419px at
     1920 - and 50% split that evenly. At 72% roughly three quarters of
     the overflow comes off the top, which takes the empty ceiling above
     the window and gives the chair and the desk back at the bottom. */
  object-position: center 72%;
}

/* 3. THE QUESTIONS BEHIND THE WORK ------------------------------------- */

.rs-question-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rs-col-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.rs-question + .rs-question {
  border-left: 1px solid var(--rs-rule);
  padding-left: var(--rs-col-gap);
}
.page-research main .rs-num {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--rust);
  margin: 0 0 var(--s2);
  max-width: none;
}
/* The three questions are the point of the band, so they take the
   display face rather than another run of body text. */
.page-research main .rs-ask {
  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(--ink-green);
  max-width: none;
  margin: 0;
}

/* 4. THE STATE OF HUMAN LIFE ------------------------------------------
   Warm off-white for every piece of text on the ink ground, the eyebrow
   included: the inherited rust measures 2.1:1 there. The artwork sits
   outside the shell so it runs the full width of the band. */

.rs-state { padding-bottom: 0; color: var(--paper-on-dark); }
.page-research main .rs-state .rs-eyebrow { color: var(--paper-on-dark); }
.page-research main .rs-state .rs-h2 { color: var(--paper-light); }
.page-research main .rs-state .rs-display { color: var(--paper-light); }
.page-research main .rs-state p { color: var(--paper-on-dark); }

.rs-state-grid {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  column-gap: var(--rs-col-gap);
  align-items: start;
}
.rs-state-label { grid-column: 1 / -1; }
.rs-state-head { grid-column: 1; margin-bottom: 0; }
.rs-state-body {
  grid-column: 2;
  border-left: 1px solid var(--rs-rule-dark);
  padding-left: var(--rs-col-gap);
}
.page-research main .rs-state-body p { max-width: 42rem; }

/* The artwork is flattened onto --ink-green rather than carrying an
   alpha channel: WebP stores alpha losslessly, which held the 4096px
   file at 535KB whatever the quality, and it is 175KB opaque. That ties
   it to this band's colour - change --ink-green and the strip shows a
   hard edge, so the art has to be re-flattened with it. */
/* The strip is pulled up under the copy rather than set below it. Its
   own skyline sits well down inside the frame - across the x-range the
   two columns occupy, the shallowest clear margin at the top of the
   artwork is 33px at 1440 - so a 1.6vw pull (23px there) lands the
   frame's top edge inside the last line box while the drawing itself
   still starts about 9px below the copy. The pull is in vw because the
   artwork's height and that clear margin both scale with the viewport,
   so the clearance holds at every width.
   The overlap is seamless only because the art is flattened onto
   --ink-green (see below): the band colour and the empty part of the
   strip are the same pixel value, so there is no edge to see. */
.rs-state-art { margin-top: -1.6vw; }
.rs-state-art img { display: block; width: 100%; height: auto; }

/* 5, 6. LABEL BESIDE A STATEMENT --------------------------------------
   One shape for the two closing bands: the label in its own narrow
   column, a hairline, then the heading and the copy. */

.rs-split {
  display: grid;
  grid-template-columns: minmax(0, 22fr) minmax(0, 78fr);
  column-gap: var(--rs-col-gap);
  align-items: start;
}
.page-research main .rs-split .rs-eyebrow { margin-bottom: 0; max-width: none; }
.rs-split-body {
  border-left: 1px solid var(--rs-rule);
  padding-left: var(--rs-col-gap);
}
.rs-sec--sage .rs-split-body { border-left-color: rgba(32, 51, 41, 0.18); }
.page-research main .rs-split-body p { max-width: 46rem; }

/* The newsletter button, the same rust control the About page closes on. */
.page-research main .rs-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-research main .rs-cta:hover {
  border-color: #6F3217;
  background: #6F3217;
}
/* The global focus ring is rust, which is invisible on a rust button
   (1:1). Ink green measures 11.9:1 on this band's cream ground. */
.page-research main .rs-cta:focus-visible {
  outline: 2px solid var(--ink-green);
  outline-offset: 3px;
}

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

@media (max-width: 1024px) {
  .rs-question-grid { column-gap: clamp(1.5rem, 2.4vw, 2.25rem); }
  .rs-question + .rs-question { padding-left: clamp(1.5rem, 2.4vw, 2.25rem); }
}

@media (max-width: 960px) {
  .page-research main .rs-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 every label sits above its own block. */
  .rs-report .rs-shell { padding-right: var(--page-gutter); }
  .rs-report-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  /* Stacked: back into ordinary flow at its own ratio. */
  /* Stacked, the picture sits below the copy inside the band rather
     than beside it, so there is no band edge for it to meet. */
  .rs-report-media { max-width: 560px; position: static; align-self: auto; min-height: 0; margin-block: 0; }
  .rs-report-media-link { position: static; }
  .rs-report-media img { position: static; height: auto; aspect-ratio: 1328 / 1192; }

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

  /* Stacked, the copy runs the full width of the band, where the
     artwork's clear margin is thinnest (11% of its height at the far
     right). No overlap here - the strip goes back below the copy. */
  .rs-state-art { margin-top: clamp(1.25rem, 2.4vw, 2.25rem); }
  .rs-state-grid { grid-template-columns: minmax(0, 1fr); }
  .rs-state-head { grid-column: 1; margin-bottom: var(--s3); }
  .rs-state-body { grid-column: 1; border-left: 0; padding-left: 0; }

  .rs-split { grid-template-columns: minmax(0, 1fr); }
  .page-research main .rs-split .rs-eyebrow { margin-bottom: var(--s3); }
  .rs-split-body { border-left: 0; padding-left: 0; }

  /* 16px body, 17px lead. Each override repeats its desktop selector so
     it clears that rule's specificity. */
  .page-research main p { font-size: 1rem; }
  .page-research main .rs-lead { font-size: 1.0625rem; max-width: none; }
  .page-research main .rs-meta { font-size: 0.9375rem; }
}

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