/* RESEARCH APPROACH (/method) -----------------------------------------
   Loaded last, after styles.css, site-refresh.css, mobile-fixes.css and
   footer-adjustments.css, and scoped to .page-method so nothing here
   reaches the header, the footer, or any other route.

   Same structural system as the About page, so the two read as one site:
   full-width bands, one inner container inset by --page-gutter (the value
   the header and footer already use) and no max-width, which puts the
   wordmark, the H1, every band edge, the footer wordmark and the
   copyright rule on a single left and right line at any width.

   The other rule carried over from About: a band is never left as one
   narrow column of prose in a wide field. Each one here is either a
   two-column grid, a four-across row of marks, or a 2x2 grid, so the
   width is filled with structure rather than with over-long lines. */

.page-method {
  --mt-gutter: var(--page-gutter);
  --mt-pad-y: clamp(1.5rem, 1.9vw, 2.25rem);
  --mt-measure: 40rem;
  --mt-col-gap: clamp(2rem, 2.5vw, 2.5rem);
  /* The same light sage as the About page's Current Focus band and the
     Widen the Frame card on the homepage, rather than a third green.
     Body text on it measures 10.9:1, the rust label 6.1:1. */
  --mt-sage: #E8EEE3;
  /* Rust at low alpha for the principle rules and the callout bar. */
  --mt-rule: rgba(139, 66, 31, 0.38);
}

/* Below 620px the header insets by 1rem while the footer keeps 1.25rem;
   these bring the footer to the header's value on this page only. */
/* The header and footer now take --page-gutter at every width, so the
   per-page footer corrections this block used to carry are gone. */

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

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

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

.mt-sec--paper { background: var(--paper); }
.mt-sec--paper-light { background: var(--paper-light); }
.mt-sec--sage { background: var(--mt-sage); }

/* TYPE ----------------------------------------------------------------
   One H1, one shared H2, one eyebrow, matching the About page's scale.
   Every one of these sits at (0,2,1) while `.page-method main p` is only
   (0,1,2), so the paragraph rule cannot reach the labels or the display
   text. Scoped to main so the footer's H2s keep their own treatment. */

.page-method main .mt-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;
}

.page-method main .mt-h1 {
  font-family: var(--display);
  font-weight: 500;
  /* The same declaration the homepage hero H1 uses. No width cap, so
     the headline runs the full band. */
  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-method main .mt-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-method main p {
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--forest);
  max-width: var(--mt-measure);
  margin: 0 0 var(--s3);
}
.page-method main p:last-child { margin-bottom: 0; }

.page-method main .mt-lead {
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--olive);
  max-width: 56rem;
}

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

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

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

/* 2. FRAMEWORK --------------------------------------------------------- */

/* A little less air than the other bands, now that the artwork is
   smaller and the band no longer needs the height. */
.mt-framework { padding-block: clamp(1.25rem, 1.5vw, 1.75rem); }

.mt-framework-grid {
  display: grid;
  /* The artwork column used to be a flat 0.46fr while the image itself
     is capped at 431px, so every pixel the column gained past that cap
     became empty space and pushed the copy further right as the screen
     widened: 126px between the two at 1440 and 297px at 1920. The
     column now stops where the image does. */
  grid-template-columns: minmax(0, min(431px, 42%)) minmax(0, 1fr);
  gap: clamp(1.5rem, 2.6vw, 2.75rem);
  align-items: center;
}
.mt-framework-media { width: 100%; }
.mt-framework-media img {
  display: block;
  width: 100%;
  height: auto;
  /* 15% down from the 507px the column was rendering it at. */
  max-width: 431px;
  object-fit: contain;
}
/* The six names are the framework, so they are set in the display face
   just under the heading rather than as another body paragraph. */
.page-method main .mt-layers {
  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);
}

/* 3. METHOD -----------------------------------------------------------
   The four marks run the full width of the band, which is what keeps
   this section from reading as a lone paragraph in an empty field. They
   are decorative: the four stage names are already in the heading. */

.mt-marks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  margin: clamp(1.1rem, 1.8vw, 1.6rem) 0 clamp(1.1rem, 1.8vw, 1.6rem);
  align-items: center;
  /* 115px between marks read as four unrelated dots; 92% of the row
     closes that to about 92px without clustering them at one end. */
  max-width: 92%;
}
.page-method .mt-marks .seed-mark {
  width: clamp(112px, 12.5vw, 180px);
  height: clamp(112px, 12.5vw, 180px);
  background-size: 100% 100%;
  margin: 0 auto;
}
.page-method .mt-marks .seed-mark img {
  width: 52%;
  height: 52%;
}

/* The two questions are a pivot in the argument, so they take a rust
   bar rather than another run of body text. */
/* One column, in reading order: the description, then the two
   questions, then the note about the protocol below it. */
/* The callout is this wrapper's last child, so `.page-method main
   p:last-child` zeroes its own bottom margin at (0,3,1) whatever the
   callout rule says. The space below it comes from the wrapper instead,
   matched to the callout's own top margin. */
.mt-method-cols { margin-bottom: clamp(1.5rem, 2.2vw, 2rem); }
.page-method main .mt-method-cols > p { max-width: 54rem; }

.page-method main .mt-callout {
  border-left: 2px solid var(--rust);
  padding: 0.15rem 0 0.15rem clamp(1rem, 1.6vw, 1.35rem);
  /* It was sitting on the same 16px rhythm as an ordinary paragraph,
     which gave the rule nothing to separate. Its own block margin
     collapses with the neighbours' rather than stacking on them. */
  margin-block: clamp(1.5rem, 2.2vw, 2rem);
}

.page-method main .mt-note { color: var(--text-2); }

/* 4. RESEARCH PRACTICE ------------------------------------------------- */

/* The four sit further in than the eyebrow, the heading and the closing
   line, which stay on the band's own edge. */
.mt-principles {
  display: grid;
  padding-left: clamp(1.25rem, 4.4vw, 4rem);
  /* 20% narrower than the band, so the pair of columns reads as a set
     rather than running the full width like the prose above it. */
  max-width: 75.5%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 4rem);
  row-gap: clamp(1.5rem, 2.4vw, 2.25rem);
  margin: clamp(1.1rem, 1.8vw, 1.6rem) 0 clamp(1.25rem, 2vw, 1.75rem);
  list-style: none;
  padding-block: 0;
}
.mt-principle { border-top: 1px solid var(--mt-rule); padding-top: var(--s3); }
.page-method main .mt-principle h3 {
  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(--s2);
}
.page-method main .mt-principle p {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
  max-width: none;
}

.page-method main .mt-closing { max-width: 56rem; }

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

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

@media (max-width: 620px) {
  .page-method main .mt-h2 { font-size: clamp(2rem, 10vw, 3rem); }
}

@media (max-width: 1024px) {
  /* Below the image's 431px cap the column is the binding constraint, so
     this keeps the fractional track it has always used here: 42% of the
     row minus the gap, which is 11px narrower than the base rule's
     min(431px, 42%) would give. */
  .mt-framework-grid { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); }
  .page-method main .mt-h1 { max-width: none; }
}

@media (max-width: 860px) {
  .mt-framework-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .mt-framework-media { max-width: 380px; }
  .mt-framework-media img { max-width: none; }

  .mt-marks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; max-width: none; }
  .page-method .mt-marks .seed-mark { width: 100%; max-width: 92px; height: auto; aspect-ratio: 1 / 1; }

  .mt-principles { grid-template-columns: minmax(0, 1fr); padding-left: 0; max-width: none; }

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

@media (max-width: 480px) {
  .mt-marks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.75rem; }
  .page-method .mt-marks .seed-mark { max-width: 104px; }
}