/* ------------------------------------------------------------------ *
 *  method.html only. Reuses style.css for every token, the .nav/
 *  .foot/.reveal rules, and the base body background/color/font -
 *  this file adds only what's unique to this page's content.
 *
 *  Font-size clamps below are matched to values DESIGN.md already
 *  documents/uses elsewhere (not freehand numbers) - see the
 *  Headline/Label class descriptions and .zones-inner's word/label
 *  scale.
 * ------------------------------------------------------------------ */

/* .nav normally sits inside .hero with z-index/position:relative to
   float over the photo. This page has no photo - a hairline border
   stands in for the hero's implicit separation from the page below. */
.nav-plain {
  position: static;
  border-bottom: 1px solid var(--line);
}

.method-page {
  padding: clamp(3rem, 8vh, 5rem) clamp(1.3rem, 4vw, 3.2rem) clamp(4rem, 10vh, 6rem);
}
.method-page-inner { max-width: 720px; margin: 0 auto; }

.method-page-eyebrow {
  font-family: var(--mono);
  font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.9rem;
}

.method-page h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.08;
  margin: 0 0 clamp(1.6rem, 4vh, 2.4rem);
  color: var(--ink);
}
.method-page h1 em { font-style: italic; }

.method-page-lead {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.5;
  margin: 0 0 clamp(2.4rem, 6vh, 3.4rem);
  color: var(--ink-soft);
}

.method-page-body { display: flex; flex-direction: column; gap: clamp(2.4rem, 6vh, 3.4rem); }
.method-page-body h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  margin: 0 0 0.8rem;
  color: var(--ink);
}
.method-page-body p {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 1rem;
  max-width: 62ch;
}
.method-page-body p:last-child { margin-bottom: 0; }
.method-page-body em { color: var(--ink); font-style: italic; }