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

   Same structure as /method and /about: full-width bands, 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-seed {
  --sd-pad-y: clamp(1.5rem, 1.9vw, 2.25rem);
  --sd-measure: 46rem;
  --sd-col-gap: clamp(1.5rem, 2.5vw, 2.5rem);
  /* The light sage used by the Current Focus band on About, the
     Framework band on Method and the Widen the Frame card at home. */
  --sd-sage: #E8EEE3;
  --sd-rule: rgba(32, 51, 41, 0.16);
}

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

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

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

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

/* TYPE ----------------------------------------------------------------
   The H1 and the step headings use the homepage's own declarations, so
   the first heading here is the same size as the homepage's and the
   subsequent ones match the homepage's section headings. Each of these
   sits at (0,2,1) while `.page-seed main p` is (0,1,2), so the
   paragraph rule cannot reach the labels or the display text. */

.page-seed main .sd-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-seed main .sd-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);
  /* Wide enough for two full lines, with the break left to the browser
     so neither line is left short. */
  max-width: 56rem;
  text-wrap: balance;
}

.page-seed main .sd-h2 {
  font-family: var(--display);
  font-weight: 500;
  /* A step label, not a band heading: one notch under the homepage
     .growth-heading scale (clamp(2rem, 3.7vw, 3.4rem)) so the four
     words sit with their paragraphs instead of announcing a section. */
  font-size: clamp(1.75rem, 2.9vw, 2.75rem);
  line-height: 1.06;
  letter-spacing: -0.004em;
  text-transform: uppercase;
  color: var(--ink-green);
  margin: 0 0 var(--s1);
}

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

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

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

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

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

/* 2, 4, 5. LABEL BESIDE PROSE ------------------------------------------
   The eyebrow sits in its own narrow column with the prose beside it, so
   the band is filled by the pair rather than by one long line. */

.sd-split {
  display: grid;
  grid-template-columns: minmax(0, 0.23fr) minmax(0, 0.77fr);
  gap: var(--sd-col-gap);
  align-items: start;
}
.page-seed main .sd-split .sd-eyebrow { margin-bottom: 0; }

/* 3. THE FOUR STEPS ---------------------------------------------------- */

.sd-steps-list {
  list-style: none;
  margin: clamp(0.25rem, 0.5vw, 0.45rem) 0 0;
  padding: 0;
}
.sd-step {
  display: grid;
  /* The mark column is wide enough to hold the mark at full size and
     centre it, so each one reads as belonging to the text beside it
     rather than floating at the band's edge. */
  grid-template-columns: minmax(0, 0.19fr) minmax(0, 0.81fr);
  /* Tighter than --sd-col-gap (which the SEED intro split still uses):
     the smaller mark needs less air beside it. */
  gap: clamp(1.125rem, 1.9vw, 1.875rem);
  align-items: center;
  padding-block: clamp(0.45rem, 0.7vw, 0.7rem);
}
.sd-step + .sd-step { border-top: 1px solid var(--sd-rule); }

/* Scoped to this band so the other four keep the shared --sd-pad-y. */
.sd-steps { padding-block: clamp(1.125rem, 1.45vw, 1.75rem); }

/* The same wash-and-icon mark the four-across row on /method uses, at
   the size this layout needs. */
.page-seed .sd-step .seed-mark {
  width: clamp(118px, 11.5vw, 168px);
  height: clamp(118px, 11.5vw, 168px);
  background-size: 100% 100%;
  margin: 0 auto;
}
.page-seed .sd-step .seed-mark img { width: 52%; height: 52%; }

/* 4. WHAT SEED IS FOR --------------------------------------------------
   Warm off-white for every piece of text on the ink ground, the eyebrow
   included: the inherited rust measures 2.1:1 there. */

.sd-for { color: var(--paper-on-dark); }
.page-seed main .sd-for .sd-eyebrow { color: var(--paper-on-dark); }
.page-seed main .sd-for p { color: var(--paper-on-dark); max-width: 52rem; }

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

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

@media (max-width: 860px) {
  .sd-split { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .page-seed main .sd-split .sd-eyebrow { margin-bottom: var(--s2); }

  .sd-step { grid-template-columns: minmax(0, 1fr); gap: var(--s3); align-items: start; }
  .page-seed .sd-step .seed-mark { width: 118px; height: 118px; margin: 0; }

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

@media (max-width: 620px) {
  .page-seed main .sd-h2 { font-size: clamp(1.75rem, 8.5vw, 2.5rem); }
  .page-seed main .sd-link { width: 100%; }
}