/* Reading windows for the lower chapters; touch and reduced motion keep normal flow. */
.is-reading-pinned{height:calc(100svh - 80px + var(--reading-travel,200vh))}
.is-reading-pinned>.chapter-window{position:sticky;top:80px;height:calc(100svh - 80px);overflow:clip;background:var(--paper);isolation:isolate}
.is-reading-pinned>.chapter-window::after{content:"";position:absolute;left:5%;right:5%;bottom:10px;height:1px;background:#6e815c;transform:scaleX(var(--chapter-reading,0));transform-origin:left;pointer-events:none;z-index:5}
.is-reading-pinned .section-content{padding:35px 5% 40px;margin:0 auto}
.is-reading-pinned .chapter-track{transform:translateY(var(--chapter-shift,0px));will-change:transform}
.is-reading-pinned .chapter-track-viewport{height:100%;min-height:0;overflow:clip}
#experience.is-reading-pinned .section-content,#lab.is-reading-pinned .section-content{height:100%}
#experience.is-reading-pinned .experience-layout,#lab.is-reading-pinned .lab-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:7%;height:100%;align-items:start}
#experience.is-reading-pinned .experience-layout>div:first-child{position:static!important;padding-top:20px}
#experience.is-reading-pinned .timeline{margin:0;padding:20px 0 15px 26px}
#experience.is-reading-pinned .timeline p{font-size:13px}
#experience.is-reading-pinned .section-heading,#lab.is-reading-pinned .section-heading{font-size:clamp(40px,4.6vw,70px);translate:none}
#lab.is-reading-pinned .lab-intro{padding-top:20px}
#lab.is-reading-pinned .section-kicker{font-size:9px;margin-bottom:24px}
#lab.is-reading-pinned .section-lead{font-size:14px;line-height:1.8;max-width:330px;margin-bottom:0}
#lab.is-reading-pinned .practice-grid{margin:0;grid-template-columns:1fr 1fr;gap:40px 24px;padding:20px 10px 20px}
#lab.is-reading-pinned .practice{margin-top:0;padding-bottom:20px}
#lab.is-reading-pinned .practice:nth-child(2n){margin-top:65px}
#lab.is-reading-pinned .study{height:clamp(160px,24vh,230px);margin-bottom:22px}
#lab.is-reading-pinned .practice h3{font-size:24px;line-height:1.12}
#lab.is-reading-pinned .practice p{font-size:12px;line-height:1.75}
#about.is-reading-pinned .about-editorial{grid-template-columns:1.2fr .8fr;gap:8%}
#about.is-reading-pinned .section-heading{font-size:clamp(42px,4.8vw,69px);translate:none}
#about.is-reading-pinned .about-copy p{font-size:14px;line-height:1.7}
#about.is-reading-pinned .about-photo img{height:42vh}
#about.is-reading-pinned .about-details{margin-top:32px;padding-top:20px;gap:30px;translate:none}
#about.is-reading-pinned .about-details h3{margin-bottom:12px}
#about.is-reading-pinned .about-details p{font-size:12px}
#contact.is-reading-pinned{overflow:visible}
#contact.is-reading-pinned::before{display:none}
#contact.is-reading-pinned .chapter-window::before{content:"LET’S TALK";position:absolute;bottom:3%;left:-3%;font-size:21vw;white-space:nowrap;letter-spacing:-.07em;color:#e8ecdf;z-index:-1;translate:calc(var(--chapter-phase,0) * -80px) 0}
#contact.is-reading-pinned .section-content{min-height:100%;padding:35px 5% 45px;display:grid;align-items:center}
#contact.is-reading-pinned .contact-layout{min-height:0}
#contact.is-reading-pinned .section-heading{font-size:clamp(45px,5.6vw,82px);translate:none}
#contact.is-reading-pinned .contact-intro{margin:20px 0 15px}
#contact.is-reading-pinned .contact-links{margin-top:18px}
@media(min-width:800px) and (max-width:1050px){
 #lab.is-reading-pinned .lab-layout{grid-template-columns:.9fr 1.1fr;gap:6%}
 #lab.is-reading-pinned .practice-grid{grid-template-columns:1fr;padding-inline:12px}
 #lab.is-reading-pinned .practice:nth-child(2n){margin-top:0}
 #lab.is-reading-pinned .study{height:220px}
 #lab.is-reading-pinned .practice h3{font-size:27px}
 #experience.is-reading-pinned .section-heading,#lab.is-reading-pinned .section-heading{font-size:42px}
}
@media(prefers-reduced-motion:reduce){.chapter-track{will-change:auto}}

/* A small editorial index gives the pinned introduction a complete composition. */
.lab-intro{display:flex;flex-direction:column;gap:32px}
.study-index{max-width:340px;width:100%;margin-top:8px}
.study-index-label{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.13em;color:#7b866f;padding-bottom:12px}
.study-index button{display:grid;grid-template-columns:32px 1fr 20px;align-items:center;width:100%;padding:11px 0;border:0;border-top:1px solid #d6ddcf;background:transparent;color:#7b866f;text-align:left;cursor:pointer;font:inherit;font-size:17px;letter-spacing:-.025em;text-transform:capitalize;transition:color .25s,padding .25s}
.study-index button:last-child{border-bottom:1px solid #d6ddcf}
.study-index-number{font-size:9px;letter-spacing:.04em}
.study-index-arrow{font-size:18px;opacity:0;transform:translate(-5px,5px);transition:opacity .25s,transform .25s}
.study-index button[aria-current],.study-index button:hover{color:#293e28;padding-left:7px}
.study-index button[aria-current] .study-index-arrow,.study-index button:hover .study-index-arrow{opacity:1;transform:none}
.study-index button:focus-visible{outline:1px solid #526a45;outline-offset:4px}
#lab.is-reading-pinned .lab-intro{height:100%;padding-bottom:9px;gap:22px}
#lab.is-reading-pinned .study-index{margin-top:auto}
#lab.is-reading-pinned .section-heading{margin-bottom:25px;line-height:1.04}
#lab.is-reading-pinned .section-lead{font-size:13px;line-height:1.75;max-width:315px}
@media(min-width:800px) and (max-height:760px){
 #lab.is-reading-pinned .lab-intro{padding-top:8px;gap:16px}
 #lab.is-reading-pinned .section-kicker{margin-bottom:18px}
 #lab.is-reading-pinned .section-heading{font-size:clamp(36px,4.2vw,60px);margin-bottom:18px}
 #lab.is-reading-pinned .study-index button{padding-block:8px;font-size:15px}
}
@media(max-width:799px){.study-index{max-width:none}.lab-intro{gap:18px}.study-index button{padding-block:13px}.practice{scroll-margin-top:100px}}

/* The rail and markers share one fixed axis. Only the copy moves into place. */
.timeline{--timeline-gutter:34px;padding-left:var(--timeline-gutter)}
#experience.is-reading-pinned .timeline{padding-left:var(--timeline-gutter)}
.timeline::before,.timeline::after{left:8px;top:var(--line-top,12.5px);bottom:auto;height:var(--line-length,calc(100% - 45px))}
.timeline .experience-row{translate:none}
.timeline .experience-row::before{content:none}
.experience-copy{translate:var(--row-drift,0px) 0}
.timeline-dot{position:absolute;left:calc(8px - var(--timeline-gutter) - 3px);top:9px;width:7px;height:7px;border-radius:50%;border:1px solid #9aa58e;background:var(--paper);z-index:2;transition:background .25s,border-color .25s}
.timeline-dot::after{content:"";position:absolute;inset:-5px;border:1px solid #819471;border-radius:50%;opacity:0;scale:.6;transition:opacity .3s,scale .3s}
.is-reached .timeline-dot{background:#526b45;border-color:#526b45}
.is-current .timeline-dot::after,.experience-row:hover .timeline-dot::after{opacity:1;scale:1}
@media(prefers-reduced-motion:reduce){.experience-copy{translate:none}.study-index button,.study-index-arrow,.timeline-dot,.timeline-dot::after{transition:none}}
