.method-section {
  position: relative;
  overflow: clip;
  padding-block: clamp(96px, 10vw, 160px) clamp(76px, 8vw, 128px);
  color: var(--cream);
  background: radial-gradient(ellipse at 6% 42%, #38261d 0, transparent 47%), var(--ink);
  scroll-margin-top: 24px;
}
.method-section .method-intro,
.process-section .process-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(36px, 5vw, 80px);
}
.method-section .section-kicker { color: var(--light); }
.method-section .section-title,
.process-section .section-title {
  margin: 22px 0 0;
  font-family: 'Shippori Mincho B1', 'Hiragino Mincho ProN', serif;
  font-size: clamp(32px, 3.25vw, 52px);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: .015em;
  font-feature-settings: 'palt';
  overflow-wrap: break-word;
}
.method-section .method-heading-accent { color: var(--light); display: inline-block; white-space: nowrap; }
.method-section .body-copy,
.process-section .body-copy {
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .035em;
  overflow-wrap: break-word;
}
.method-section .method-lead {
  max-width: 32em;
  margin: 0 0 5px;
  color: #d0c3b8;
}
.method-section .method-list {
  list-style: none;
  padding: 0 0 0 38px;
  margin: clamp(64px, 7vw, 106px) 0 0;
}
.method-section .method-level {
  --route-progress: 1;
  --level-focus: .65;
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(0, 2fr);
  column-gap: clamp(32px, 5vw, 80px);
  padding: 48px 0 56px;
  border-top: 1px solid #e8b7a52e;
}
.method-section .method-level:last-child { padding-bottom: 0; }
.method-section .method-level::before {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  left: -31px;
  top: 74px;
  border: 1px solid #cd9475;
  border-radius: 50%;
  background: rgba(232, 183, 165, var(--level-focus));
  box-shadow: 0 0 0 7px var(--ink);
  z-index: 1;
}
.method-section .method-route-segment {
  position: absolute;
  width: 1px;
  height: 100%;
  left: -26px;
  top: 80px;
}
.method-section .method-route-segment::before,
.method-section .method-route-segment::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #e8b7a52b;
}
.method-section .method-route-segment::after {
  background: linear-gradient(to bottom, var(--light), var(--accent));
  transform: scaleY(var(--route-progress));
  transform-origin: center top;
}
.method-section .method-level-number {
  align-self: start;
  color: #c9957a;
  font-family: 'Shippori Mincho B1', 'Hiragino Mincho ProN', serif;
  font-size: clamp(108px, 11.5vw, 180px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.08em;
  font-feature-settings: 'palt';
}
.method-section .method-level-body { min-width: 0; padding-top: 13px; }
.method-section .method-duration {
  display: block;
  color: var(--light);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .09em;
}
.method-section .method-level h3 {
  max-width: 23em;
  margin: 15px 0 17px;
  font-family: 'Shippori Mincho B1', 'Hiragino Mincho ProN', serif;
  font-size: clamp(25px, 2.25vw, 34px);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .025em;
  font-feature-settings: 'palt';
}
.method-section .method-level .body-copy {
  max-width: 37em;
  margin: 0;
  color: #d0c3b8;
}

.process-section {
  padding-block: clamp(96px, 9vw, 144px) clamp(96px, 10vw, 156px);
  color: var(--ink);
  background: var(--cream);
  scroll-margin-top: 24px;
}
.process-section .section-kicker { color: #a04830; }
.process-section .process-lead {
  max-width: 32em;
  margin: 0 0 5px;
  color: #675e55;
}
.process-section .process-list {
  --process-gap: clamp(24px, 3vw, 48px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--process-gap);
  margin: clamp(60px, 6.5vw, 98px) 0 0;
  padding: 0;
  list-style: none;
}
.process-section .process-step { --step-progress: 1; position: relative; min-width: 0; }
.process-section .process-step:not(:last-child)::before,
.process-section .process-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 25px;
  left: 74px;
  width: calc(100% + var(--process-gap) - 74px);
  height: 1px;
  background: #c45a3e2e;
}
.process-section .process-step:not(:last-child)::after {
  background: var(--accent);
  transform: scaleX(var(--step-progress));
  transform-origin: left center;
}
.process-section .process-number {
  width: max-content;
  margin: 0 0 32px;
  color: #a04830;
  font-family: 'Shippori Mincho B1', 'Hiragino Mincho ProN', serif;
  font-size: 43px;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.process-section .process-step h3 {
  margin: 0 0 17px;
  font-size: clamp(19px, 1.55vw, 23px);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .015em;
}
.process-section .process-step .body-copy { margin: 0; color: #675e55; }

@media (max-width: 1050px) {
  .method-section .method-intro,
  .process-section .process-intro { grid-template-columns: 1fr; gap: 28px; }
  .method-section .method-lead,
  .process-section .process-lead { max-width: 43em; }
  .method-section .method-level { grid-template-columns: 150px minmax(0, 1fr); column-gap: 36px; }
  .process-section .process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; }
  .process-section .process-step:nth-child(2)::before,
  .process-section .process-step:nth-child(2)::after { display: none; }
  .process-section .process-step h3 { font-size: 22px; }
}

@media (max-width: 700px) {
  .method-section { padding-block: 82px 78px; }
  .method-section .section-title,
  .process-section .section-title { font-size: clamp(29px, 7.6vw, 38px); line-height: 1.6; letter-spacing: .005em; }
  .method-section .method-list { padding-left: 25px; margin-top: 48px; }
  .method-section .method-level { grid-template-columns: 90px minmax(0, 1fr); gap: 0 12px; padding: 32px 0 40px; }
  .method-section .method-level::before { left: -23px; top: 67px; width: 10px; height: 10px; box-shadow: 0 0 0 5px var(--ink); }
  .method-section .method-route-segment { left: -19px; top: 72px; }
  .method-section .method-level-number { grid-column: 1; grid-row: 1; font-size: 86px; line-height: 1; }
  .method-section .method-level-body { display: contents; }
  .method-section .method-duration { grid-column: 2; grid-row: 1; align-self: center; padding-top: 2px; font-size: 11px; line-height: 1.9; letter-spacing: .04em; }
  .method-section .method-level h3 { grid-column: 1 / -1; margin: 20px 0 14px; font-size: 24px; line-height: 1.65; letter-spacing: .015em; }
  .method-section .method-level .body-copy { grid-column: 1 / -1; }
  .process-section { padding-block: 82px 78px; }
  .process-section .process-list { grid-template-columns: 1fr; gap: 0; margin-top: 46px; }
  .process-section .process-step { display: grid; grid-template-columns: 45px minmax(0, 1fr); column-gap: 19px; padding-bottom: 38px; }
  .process-section .process-step:last-child { padding-bottom: 0; }
  .process-section .process-number { margin: 0; font-size: 34px; }
  .process-section .process-step h3 { margin: 0 0 13px; font-size: 21px; line-height: 1.65; }
  .process-section .process-step:not(:last-child)::before,
  .process-section .process-step:not(:last-child)::after { display: block; left: 17px; top: 52px; width: 1px; height: calc(100% - 52px); }
  .process-section .process-step:not(:last-child)::after { transform: scaleY(var(--step-progress)); transform-origin: center top; }
}

@media (max-width: 370px) {
  .method-section .method-level { grid-template-columns: 78px minmax(0, 1fr); column-gap: 10px; }
  .method-section .method-level-number { font-size: 78px; }
  .method-section .method-level h3 { font-size: 22px; }
  .process-section .process-step { grid-template-columns: 40px minmax(0, 1fr); column-gap: 15px; }
  .process-section .process-number { font-size: 31px; }
  .process-section .process-step h3 { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .method-section .method-level { --route-progress: 1 !important; --level-focus: .65 !important; }
  .method-section .method-level-number { transform: none !important; }
  .process-section .process-step { --step-progress: 1 !important; }
}
