/* Approach uses the same Field & Paper tokens and Archivo scales as the site. */
.approach-heading.practice-heading{padding-bottom:64px}
.approach-heading h1{max-width:14ch}
.approach-process.section{padding-block:0 80px}
.approach-process-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px;padding:28px 0 36px;border-top:1px solid var(--stone)}
.approach-process-intro>div>p{max-width:52ch}
.approach-process-cues{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px;font-size:var(--meta);color:var(--green)}
.approach-process-cues a{border-bottom:1px solid var(--stone);padding-bottom:4px}
.process-scroll-cue span{margin-left:12px}
.approach-process-note{max-width:55ch;font-size:var(--meta);color:var(--green);padding-top:24px;border-top:1px solid var(--stone)}
/* Drawing hierarchy: crisp architecture, legible context, restrained study accents. */
#ydc-process-graphics{--background:var(--paper);--foreground:var(--ink);--border:var(--stone);--muted-foreground:var(--green);--viz-series-1:var(--green);--ydc-ink:color-mix(in srgb,var(--ink) 90%,var(--paper));--ydc-faint:color-mix(in srgb,var(--ink) 34%,var(--paper));--ydc-clay:color-mix(in srgb,var(--ink) 3%,var(--paper));--ydc-material-ink:color-mix(in srgb,var(--ink) 72%,var(--ochre));--ydc-material:color-mix(in srgb,var(--ydc-material-ink) 12%,var(--paper));font-family:inherit}
#ydc-process-graphics .text-small{font-size:var(--meta);line-height:1.45}
#ydc-process-graphics .text-muted{color:var(--green)}
#ydc-process-graphics hr{border:0;border-top:1px solid var(--stone);margin:0}
#ydc-process-graphics>hr:last-child{display:none}
#ydc-process-graphics .fragment{font-weight:500;font-size:var(--reading);line-height:1.4;margin:0 0 16px;max-width:32ch}
#ydc-process-graphics .explanation{font-size:var(--reading);line-height:1.55;max-width:37ch}
#ydc-process-graphics .phase,#ydc-process-graphics .learn{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px;padding:48px 0;margin:0}
#ydc-process-graphics .phase h2,#ydc-process-graphics .learn h2{font-size:var(--section);margin:16px 0 24px}
#ydc-process-graphics svg text{font-family:inherit;font-size:var(--process-label-size,12px);fill:var(--ink)}
.process-control-hint{font-size:var(--meta);color:var(--green);margin-top:12px;max-width:52ch}
#yg-scroll-panel{padding:24px 0;background:var(--paper)}
#yg-scroll-content{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px}
#yg-scroll-copy{min-height:310px}
#yg-scroll-copy h2{font-size:clamp(36px,4.2vw,64px);line-height:1.05;letter-spacing:-.045em;margin:14px 0 24px}
#yg-scroll-counter{font-size:var(--meta);color:var(--green);font-variant-numeric:tabular-nums}
#yg-scroll-caption{min-height:42px;margin:0;color:var(--green);font-size:var(--meta)}
#yg-scroll-progress{gap:20px;margin-top:20px}
#yg-scroll-progress li{font-size:var(--meta);color:color-mix(in srgb,var(--ink) 72%,var(--paper))}
#yg-scroll-progress li::before{height:1px;margin-bottom:10px}
#yg-scroll-progress li[data-active=true]{color:var(--green)}
#yg-scroll-progress li[data-active=true]::before{background:var(--green);height:2px;margin-bottom:9px}
.process-position{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;max-width:37ch}
.process-moment-controls{display:flex;gap:14px}
.process-moment-controls button{min-height:44px;padding:8px 0;border:0;background:none;color:var(--green);font-size:var(--meta);cursor:pointer}
.process-moment-controls button:disabled{opacity:.35;cursor:default}
.process-moment-controls button:not(:disabled):hover span{text-decoration:underline;text-underline-offset:4px}
#yg-scroll-progress li::before{display:none}
#yg-scroll-progress li button{position:relative;display:block;width:100%;min-height:44px;padding:13px 0 8px;text-align:left;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
#yg-scroll-progress li button::before,#yg-scroll-progress li button::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--stone);pointer-events:none}
#yg-scroll-progress li button::after{background:var(--green);height:2px;transform:scaleX(var(--phase-progress,0));transform-origin:left}
#yg-scroll-progress li button:hover{color:var(--green)}
#yg-scroll-progress li button:hover::before{background:var(--green)}
.approach-principles.section{padding-block:24px 88px;scroll-margin-top:124px}
.principles-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px;align-items:baseline;margin-bottom:48px}
.approach-principles #principles-title{font-size:clamp(34px,4.2vw,60px);line-height:1.06;max-width:24ch;margin:0}
.principles-spread{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px}
.approach-principles ul{grid-column:2;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 40px}
.approach-principles li{display:block;border-top:1px solid var(--stone);padding-top:18px}
.approach-principles h3{font-size:22px;font-weight:500;letter-spacing:-.025em;line-height:1.18;color:var(--green)}
.approach-principles li p{max-width:36ch;font-size:16px;line-height:1.55;margin-top:14px}
@media(min-width:701px) and (max-width:1000px){.principles-heading{grid-template-columns:1fr;gap:20px;margin-bottom:36px}.principles-spread{grid-template-columns:1fr}.approach-principles ul{grid-column:1;gap:32px 40px}}
@media(max-width:1000px){#ydc-process-graphics .explanation{font-size:16px}#ydc-process-graphics .fragment{font-size:16px}}
@media(max-width:700px){
 .approach-heading.practice-heading{padding-bottom:40px}
 .approach-process-intro{grid-template-columns:1fr;gap:18px;padding:24px 0 28px}
 .approach-process-intro>div>p{font-size:16px}
 .approach-process-cues{gap:12px;margin-top:20px}
 .approach-process.section{padding-bottom:48px}
 #yg-scroll-content{grid-template-columns:1fr;gap:0}
 #yg-scroll-copy{min-height:218px}
 #yg-scroll-copy h2{font-size:32px;margin:8px 0 14px}
 #ydc-process-graphics .fragment{margin-bottom:10px}
 #ydc-process-graphics .explanation{line-height:1.45;max-width:42ch}
 #yg-scroll-panel{padding:8px 0}
 #yg-scroll-caption{font-size:13px;min-height:38px}
 #yg-scroll-progress{gap:10px 16px;margin-top:8px}
 #yg-scroll-progress li{font-size:12px}
 #yg-scroll-progress li::before{margin-bottom:5px}
 #yg-scroll-progress li[data-active=true]::before{margin-bottom:4px}
 #ydc-process-graphics .phase,#ydc-process-graphics .learn{grid-template-columns:1fr;gap:12px;padding:32px 0}
 #ydc-process-graphics .phase h2,#ydc-process-graphics .learn h2{font-size:32px}
 .approach-principles.section{padding-block:0 48px;scroll-margin-top:112px}
 .principles-heading{grid-template-columns:1fr;gap:16px;margin-bottom:28px}
 .principles-spread{grid-template-columns:1fr}
 .approach-principles ul{grid-column:1;grid-template-columns:1fr;gap:24px}
 .approach-principles li{padding-top:16px}
 .approach-principles h3{max-width:none;font-size:22px}
 .approach-principles li p{margin-top:10px}
}