/* Load after site.css. The diagram has no semantic or interactive content. */
.method[data-approach-motion] {
  --approach-ink: #202020;
  --approach-soft: #747474;
  --approach-line: #c9c9c9;
  --approach-paper: var(--paper, #f4f4f4);
  overflow: clip;
}
.method[data-approach-motion] .process-rail { display: none; }
.method[data-approach-motion] .section-heading { margin-bottom: 8px; }
.method[data-approach-motion] .approach-stage { position: relative; }
.method[data-approach-motion] .approach-route {
  height: clamp(142px, 13.8vw, 202px);
  position: relative;
  margin-bottom: 12px;
  pointer-events: none;
}
.method[data-approach-motion] .approach-route > svg { overflow: visible; width: 100%; height: 100%; }
.method[data-approach-motion] .approach-survey {
  stroke: #dedede;
  stroke-width: 1;
  stroke-dasharray: 2 7;
  vector-effect: non-scaling-stroke;
}
.method[data-approach-motion] .approach-trace-base,
.method[data-approach-motion] .approach-trace {
  stroke: var(--approach-line);
  stroke-width: 1.15;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.method[data-approach-motion] .approach-trace { stroke: var(--approach-ink); stroke-width: 1.7; }
.method[data-approach-motion] .approach-station-cross {
  stroke: #c4c4c4;
  stroke-width: 1;
  fill: none;
  transition: stroke .3s;
}
.method[data-approach-motion] .approach-station-ring {
  fill: var(--approach-paper);
  stroke: #a8a8a8;
  stroke-width: 1;
  transition: stroke .3s, fill .3s;
}
.method[data-approach-motion] .approach-station-core { fill: #b0b0b0; transition: fill .3s; }
.method[data-approach-motion] .approach-station[data-state="completed"] .approach-station-core,
.method[data-approach-motion] .approach-station[data-state="current"] .approach-station-core { fill: var(--approach-ink); }
.method[data-approach-motion] .approach-station[data-state="completed"] .approach-station-ring,
.method[data-approach-motion] .approach-station[data-state="current"] .approach-station-ring,
.method[data-approach-motion] .approach-station[data-state="completed"] .approach-station-cross { stroke: var(--approach-ink); }
.method[data-approach-motion] .approach-marker-paper { fill: var(--approach-paper); }
.method[data-approach-motion] .approach-marker-frame { stroke: var(--approach-ink); fill: none; stroke-width: 1.5; }
.method[data-approach-motion] .approach-marker-letter { fill: var(--approach-ink); }
.method[data-approach-motion] .process {
  gap: clamp(24px, 3vw, 46px);
  position: relative;
  margin: 0;
}
.method[data-approach-motion] .process > li {
  border-top: 0;
  padding: 0 0 22px;
  border-bottom: 1px solid #cecece;
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: border-color .35s;
}
.method[data-approach-motion] .process > li::before,
.method[data-approach-motion] .process > li::after { display: none; }
.method[data-approach-motion] .process > li[data-approach-state="current"],
.method[data-approach-motion] .process > li[data-approach-state="completed"] { border-bottom-color: #666; }
.method[data-approach-motion] .process > li[data-approach-state] .process-number {
  color: #989898;
  font-family: Cormorant, Georgia, serif;
  font-size: clamp(44px, 4.4vw, 64px);
  font-weight: 500;
  letter-spacing: -.04em;
  margin-bottom: 15px;
  transition: color .35s;
}
.method[data-approach-motion] .process > li[data-approach-state="current"] .process-number,
.method[data-approach-motion] .process > li[data-approach-state="completed"] .process-number { color: var(--approach-ink); }
.method[data-approach-motion] .process h3 { font-size: clamp(27px, 2.6vw, 36px); font-weight: 500; line-height: 1.06; }
.method[data-approach-motion] .process p { font-size: 16px; line-height: 1.65; margin-top: 17px; color: #666; }
@media (min-width: 760px) and (max-width: 1000px) {
  .method[data-approach-motion] .process { gap: 22px; }
  .method[data-approach-motion] .process p { font-size: 15px; }
}
@media (max-width: 759px) {
  .method[data-approach-motion] .section-heading { margin-bottom: 38px; }
  .method[data-approach-motion] .approach-route { position: absolute; inset: 0 auto 0 0; width: 54px; height: auto; margin: 0; }
  .method[data-approach-motion] .process { grid-template-columns: 1fr; gap: 27px; margin-left: 80px; }
  .method[data-approach-motion] .process > li { padding-bottom: 24px; }
  .method[data-approach-motion] .process > li:last-child { padding-bottom: 0; border-bottom: 0; }
  .method[data-approach-motion] .process > li[data-approach-state] .process-number { font-size: 42px; line-height: 1; margin-bottom: 11px; }
  .method[data-approach-motion] .process h3 { font-size: 31px; line-height: 1.07; }
  .method[data-approach-motion] .process p { font-size: 16px; line-height: 1.65; margin-top: 13px; }
}
@media (max-width: 379px) {
  .method[data-approach-motion] .process { margin-left: 70px; }
  .method[data-approach-motion] .approach-route { width: 46px; }
  .method[data-approach-motion] .process h3 { font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  .method[data-approach-motion] .approach-marker { display: none; }
  .method[data-approach-motion] .process > li,
  .method[data-approach-motion] .process-number,
  .method[data-approach-motion] .approach-station * { transition: none; }
}