/* One editorial field; no card surfaces. Static content is the default. */
#approach { --method-ink: #34332f; --method-muted: #89847c; }
#approach { padding-block: clamp(40px,5vw,64px); }
#approach .approach-heading { margin-bottom: 28px; }
#approach .approach-heading h2 { font-size: clamp(28px,3vw,40px); line-height: 1.15; letter-spacing: -.035em; }
#approach .method-runway { overflow-anchor: none; }
#approach .method-topline { display: flex; justify-content: space-between; gap: 24px; padding-block: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--secondary); }
#approach .method-topline a { color: var(--charcoal); }
#approach .method-chapters { list-style: none; padding: 0; margin: 0; }
#approach .method-chapter { position: relative; padding-block: 32px 48px; border-bottom: 1px solid var(--line); scroll-margin-top: 120px; }
#approach .method-label { display: flex; align-items: baseline; gap: 16px; color: var(--red); font-size: 11px; line-height: 1.6; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 18px; }
#approach .method-label > span { font-variant-numeric: tabular-nums; }
#approach .method-copy h3,#approach .method-finale h3 { font-size: clamp(30px,3.7vw,52px); font-weight: 500; line-height: 1.12; letter-spacing: -.045em; }
#approach .method-headline > span { display: block; }
#approach .method-proof { font-size: 15px; line-height: 1.55; color: var(--secondary); max-width: 48ch; margin-top: 14px; }
#approach .method-snapshot { width: 100%; max-height: 330px; display: block; color: var(--method-ink); margin-block: 16px; }
#approach .method-static-result strong { display: block; font-family: var(--sc-font-display); font-size: 22px; font-weight: 500; line-height: 1.3; }
#approach .method-static-result > span { display: block; margin-top: 12px; font-size: 15px; color: var(--secondary); line-height: 1.55; }
#approach .method-nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; padding-top: 24px; }
#approach .method-nav a { position: relative; border-top: 1px solid var(--line); padding-top: 12px; font-size: 13px; line-height: 1.35; color: var(--secondary); display: grid; grid-template-columns: 20px 1fr; column-gap: 8px; align-content: start; min-height: 62px; }
#approach .method-nav-number { font-size: 10px; line-height: 1.8; font-variant-numeric: tabular-nums; }
#approach .method-nav-concept { grid-column: 2; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; color: var(--method-muted); }
#approach .method-nav a::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: var(--red); transform: scaleX(var(--step-progress,0)); transform-origin: left; }
#approach .method-nav a[aria-current="step"] { color: var(--charcoal); }
#approach .method-nav a[aria-current="step"] .method-nav-number { color: var(--red); }
#approach .method-nav a:focus-visible,#approach .method-topline a:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; }
#approach .method-bottomline { display: flex; justify-content: space-between; align-items: end; font-size: 10px; color: var(--secondary); }
#approach .method-counter { font-variant-numeric: tabular-nums; }
#approach .method-visual svg { display: block; width: 100%; height: 100%; overflow: visible; }
#approach .method-visual text { font-family: var(--sc-font-text); font-size: 12px; fill: var(--secondary); letter-spacing: .035em; }
#approach .method-visual .drawing-note { fill: var(--red); font-size: 14px; }
#approach .method-visual .drawing-small { font-size: 10px; letter-spacing: .075em; opacity: .32; }
#approach .method-visual .drawing-annotation { font-size: 14px; letter-spacing: .015em; }
#approach .method-visual .drawing-number { font-size: 11px; fill: var(--charcoal); font-variant-numeric: tabular-nums; }

/* The drawing and captions share one fixed composition throughout the story. */
#approach .method-runway.is-interactive { height: calc(var(--method-height) + var(--method-travel)); }
#approach .is-interactive .method-stage { position: sticky; top: var(--method-top); height: var(--method-height); display: grid; grid-template-rows: 45px minmax(0,1fr) 92px 26px; background: #fff; }
#approach .is-interactive .method-topline { padding-block: 10px; align-items: center; }
#approach .is-interactive .method-scene { position: relative; min-height: 0; }
#approach .is-interactive .method-visual { position: absolute; inset: 210px -16px 0; }
#approach .is-interactive .method-chapter { position: absolute; inset: 0; padding: 20px 0 0; border: 0; opacity: 0; visibility: hidden; pointer-events: none; }
#approach .is-interactive .method-chapter.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
#approach .is-interactive .method-copy { max-width: 80%; }
#approach .is-interactive .method-copy h3 { font-size: clamp(34px,3.4vw,49px); }
#approach .is-interactive .method-headline { opacity: var(--copy-opacity,1); transform: translateY(var(--copy-offset,0px)); }
#approach .is-interactive .method-proof { opacity: var(--proof-opacity,1); }
#approach .is-interactive .method-label { margin-bottom: 12px; }
#approach .is-interactive .method-thesis-tail,#approach .is-interactive .method-static-result,#approach .is-interactive .method-snapshot { display: none; }
#approach .is-interactive .method-folio { position: absolute; top: 8px; right: 0; font-family: var(--sc-font-display); font-size: 112px; line-height: 1; font-weight: 300; letter-spacing: -.07em; color: #dad5cd; }
#approach .is-interactive .method-finale { position: absolute; inset: 20px 0 0; pointer-events: none; }
#approach .is-interactive .method-finale h3 { max-width: 80%; font-size: clamp(32px,3.4vw,49px); }
#approach .is-interactive .method-nav { padding-top: 22px; }

@media (prefers-reduced-motion:no-preference) {
  #approach .is-interactive .method-chapter { transition: opacity 220ms ease; }
  #approach .method-nav a { transition: color 180ms ease; }
}
@media (hover:hover) {
  #approach .method-nav a:hover,#approach .method-topline a:hover { color: var(--red); }
}
@media (max-width:700px) {
  #approach .method-visual .drawing-note { font-size: 16px; }
  #approach .method-visual .drawing-annotation { font-size: 18px; }
  #approach .method-label { font-size: 10px; gap: 12px; margin-bottom: 12px; max-width: 80%; }
  #approach .method-copy h3,#approach .method-finale h3 { font-size: 30px; }
  #approach .method-proof { font-size: 13px; margin-top: 12px; }
  #approach .method-static-result strong { font-size: 19px; }
  #approach .method-static-result > span { font-size: 14px; }
  #approach .method-chapter { padding-block: 28px 36px; }
  #approach .method-nav { gap: 10px; }
  #approach .method-nav a { font-size: 10px; display: block; padding-top: 10px; }
  #approach .method-nav-number { display: block; margin-bottom: 4px; }
  #approach .method-nav-concept,#approach .method-nav-long { display: none; }
  #approach .method-topline { font-size: 10px; gap: 12px; }
  #approach .is-interactive .method-stage { grid-template-rows: 36px minmax(0,1fr) 72px 24px; }
  #approach .is-interactive .method-copy { max-width: 100%; padding-right: 24px; }
  #approach .is-interactive .method-copy h3,#approach .is-interactive .method-finale h3 { font-size: clamp(27px,5.9vw,36px); }
  #approach .is-interactive .method-chapter { padding-top: 16px; }
  #approach .is-interactive .method-folio { top: 16px; font-size: 40px; }
  #approach .is-interactive .method-label { max-width: 85%; min-height: 16px; }
  #approach .is-interactive .method-visual { inset: 190px -8px 0; }
  #approach .is-interactive .method-finale { inset: 16px 0 0; }
  #approach .is-interactive .method-finale h3 { max-width: 100%; padding-right: 20px; }
  #approach .is-interactive .method-nav { padding-top: 16px; }
  #approach .method-bottomline { font-size: 9px; }
}