/* THE METHOD PAGE. It inherits the reading surface from writing.css and adds
   only what the nine steps need. The restraint is the argument: a page that
   claims measurement over admiration should not be the flashiest thing on the
   site. Wider than an article because the steps run in two columns, quiet
   everywhere else. */

.method {
  max-width: 860px;
  margin:0 auto;
}

.intro {
  margin-top:24px;
  font-size: 16px;
  line-height: 1.7;
  max-width: 62ch;
}

.band {
  margin-top: clamp(64px, 10vh, 130px);
  padding-top: clamp(20px, 3vh, 34px);
  border-top: 1px solid var(--line);
}

.kicker {
  margin-bottom:8px;
}

.band > h2 {
  margin:0 0 16px;
  max-width: 22ch;
}

.band > p {
  max-width: 62ch;
  margin:16px 0;
}

/* ---- the three pillars ---- */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  margin-top:32px;
}

.pillar h3 {
  /* 18-20px — reading scale, not display: stays on the ink */
  color: var(--text-primary);
  font-size: 20px;
  margin:8px 0 8px;
  line-height: 1.25;
}

.pillar p {
  font-size: 14px;
  line-height: 1.62;
  opacity: 0.82;
}

/* ---- the order ---- */

.order {
  font-size: 16px;
  line-height: 2;
}

.order a {
  text-decoration: none;
  border-bottom: 1px solid #d9d2ca;
}

.order a:hover {
  border-bottom-color: var(--ink);
}

.order-groups {
  display: flex;
  flex-wrap: wrap;
  gap:12px;
  align-items: baseline;
  margin-top:16px;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.order-groups em {
  opacity: 0.55;
  font-style: normal;
}

/* ---- the nine ---- */

.step-art {
  float: right;
  width: clamp(110px, 14vw, 170px);
  margin:4px 0 16px 24px;
}

.step {
  margin-top: clamp(46px, 7vh, 84px);
  padding-top: clamp(22px, 3vh, 34px);
  border-top: 1px solid var(--line);
}

.step-head {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2.4vw, 28px);
}

.step-n {
  font-size: clamp(34px, 6vw, 64px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  opacity: 0.28;
}

.step-head h3 {
  font-size: clamp(20px, 3vw, 26px);
  margin:4px 0 0;
  line-height: 1.15;
}

.step-tag {
  opacity: 0.55;
}

.step-body {
  margin-top:16px;
  max-width: 62ch;
}

.step-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  margin-top:24px;
}

.step-cols ul {
  list-style: none;
  padding:0;
  margin:8px 0 0;
}

.step-cols li {
  font-size: 14px;
  line-height: 1.5;
  padding:4px 0;
  border-bottom: 1px solid #eeeae4;
}

.files code {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.step-note {
  margin-top:8px;
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.65;
  max-width: 50ch;
}

.step-refuses {
  margin-top:20px;
  padding-left:16px;
  border-left: 2px solid var(--teal);
  font-size: 14px;
  line-height: 1.6;
  max-width: 60ch;
}

.step-refuses .label {
  opacity: 0.75;
  margin-right:4px;
}

/* ---- how to buy ---- */

.buy {
  margin-top:24px;
}

.buy-row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(14px, 2vw, 32px);
  padding:16px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.55;
  margin:0;
  max-width: none;
}

.buy-row .label {
  display: block;
  margin-bottom:4px;
  opacity: 0.55;
}

.closing-note {
  margin-top:24px;
}

/* ---- questions ---- */

.qa {
  margin-top:32px;
  max-width: 62ch;
}

.qa h3 {
  /* 18-20px — reading scale, not display: stays on the ink */
  color: var(--text-primary);
  font-size: 20px;
  margin-bottom:8px;
  line-height: 1.3;
}

.qa p {
  font-size: 16px;
  line-height: 1.65;
  opacity: 0.86;
}

.close-statement {
  font-size: clamp(20px, 3.2vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin:8px 0 16px;
  opacity: 1;
}

/* the primary action, the same solid pill as the homepage's .en-btn
   (panel audit 2, 17 Aug 2026: the service pages had one text-link CTA at
   the very bottom). Ink on white; olive is display-only. */
.btn {
  display: inline-block;
  padding:14px 28px;
  border-radius: 999px;
  background: var(--text-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 0;
  transition: background 0.25s ease;
}
.btn:hover {
  background: var(--text-accent);
  color: #fff;
}
.cta-row {
  display: flex;
  align-items: center;
  gap: 12px 24px;
  flex-wrap: wrap;
  margin: 24px 0 0;
}
.cta-row .quiet {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 809px) {
  .pillars,
  .step-cols,
  .buy-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .step-head {
    align-items: center;
  }
}