/* The practice is a sequence, carried by the reader's scroll. */
.ai-hero{grid-template-columns:1.25fr 1fr;gap:3vw;padding-top:5vh;padding-bottom:13vh}
.ai-hero-copy{max-width:850px}
.ai-hero h1{font-size:clamp(64px,6.5vw,124px);line-height:.96;text-transform:none;letter-spacing:-.065em}
.ai-hero h1 .ai-title-line{display:block;color:#f1f2eb}
.ai-hero h1 .ai-title-line:last-child{color:var(--acid)}
.ai-hero-person{min-height:480px}
.ai-hero-person::before{border-radius:0;inset:13% 6% 14%;border:0;border-top:1px solid #b8d99b40;border-bottom:1px solid #b8d99b40;box-shadow:none;transform:translateY(var(--shift-far,0px))}
.ai-hero-person img{transform:translateY(calc(var(--scene-progress,0) * -45px)) rotate(calc(var(--scene-progress,0) * -3deg))}
.ai-hero-field{transform:translateY(var(--shift-far,0px));background-size:96px 96px}
.ai-practice-index{position:absolute;bottom:8vh;left:6vw;display:flex;gap:2rem;color:#d0d4d1;font:12px/1.4 ui-monospace,monospace}
.ai-practice-index span+span{border-left:1px solid #687451;padding-left:2rem}
.ai-practice{position:relative;height:300svh;background:#101410;border-top:1px solid #52633a;}
.ai-practice-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.ai-practice-label{position:absolute;z-index:2;left:6vw;top:100px;margin:0;color:#b5c3a9;font:13px/1.3 ui-monospace,monospace}
.ai-practice-track{height:100%;display:flex;width:300%;transform:translate3d(calc(var(--practice-progress,0) * -100vw),0,0);will-change:transform}
.ai-practice-panel{flex:0 0 100vw;width:100vw;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:7vw;padding:170px 6vw 80px}
.ai-practice-panel>div:first-child{max-width:680px;transform:translateX(calc(var(--panel-offset,0) * 55px))}
.ai-practice-step{font-size:13px;color:var(--acid);margin:0 0 22px}
.ai-practice-panel h2{font:700 clamp(42px,5.1vw,92px)/.98 var(--ai-display);letter-spacing:-.06em;margin:0 0 28px}
.ai-practice-panel p:not(.ai-practice-step){max-width:480px;font-size:clamp(16px,1.3vw,20px);line-height:1.5;color:#c4ccc0}
.ai-practice-panel a{display:inline-block;margin-top:12px;border-bottom:1px solid var(--acid);padding-bottom:7px;text-decoration:none}
.ai-practice-art{min-width:0;transform:translateX(calc(var(--panel-offset,0) * 120px)) rotate(calc(var(--panel-offset,0) * 4deg))}
.ai-idea-art{padding:3vw 0 3vw 3vw;border-left:1px solid #768957;color:var(--acid)}
.ai-idea-art>span{font:italic 400 clamp(52px,6.8vw,110px)/1 Georgia,serif;letter-spacing:-.05em;display:block}
.ai-idea-art small{display:block;margin-top:50px;font:12px/1.5 ui-monospace,monospace;color:#c4ccc0}
.ai-tool-art{background:#e9eddc;color:#151b10;padding:14px;rotate:4deg;box-shadow:0 20px 50px #0005}
.ai-tool-art img{display:block;width:100%;height:clamp(200px,26vw,400px);object-fit:cover;object-position:left top}
.ai-tool-art>span{display:block;padding:22px 10px 12px;font:italic 400 clamp(22px,2.5vw,40px)/1 Georgia,serif}
.ai-method-art{display:grid;justify-content:center;gap:16px;text-align:center;font:400 clamp(30px,4vw,64px)/1.1 Georgia,serif;color:var(--acid)}
.ai-method-art b{font:300 40px/1 var(--ai-display);color:#7c8d61}
.ai-practice-progress{position:absolute;bottom:38px;left:6vw;right:6vw;height:2px;background:#52633a}
.ai-practice-progress span{display:block;width:calc((var(--practice-progress,0) / 2) * 100%);height:100%;background:var(--acid)}
@media(prefers-reduced-motion:no-preference){
 .ai-title-line{animation:ai-title-travel .9s cubic-bezier(.2,.8,.2,1) both}
 .ai-title-line:last-child{animation-delay:.12s}
 @keyframes ai-title-travel{from{transform:translateX(-85vw)}to{transform:translateX(0)}}
}
@media(max-width:760px){
 .ai-hero{grid-template-columns:1fr;padding:48px 22px 80px}
 .ai-hero h1{font-size:clamp(52px,12vw,85px)}
 .ai-hero-person{min-height:330px}
 .ai-practice-index{display:none}
 .ai-practice-label{top:96px;left:22px;font-size:11px}
 .ai-practice-panel{grid-template-columns:1fr;align-content:center;gap:25px;padding:140px 22px 65px}
 .ai-practice-panel h2{font-size:clamp(36px,9vw,58px);margin-bottom:18px}
 .ai-practice-panel p:not(.ai-practice-step){font-size:15px;line-height:1.4;margin:12px 0}
 .ai-practice-step{margin-bottom:14px}
 .ai-idea-art{padding:12px 0 12px 20px}.ai-idea-art>span{font-size:44px}.ai-idea-art small{margin-top:15px}
 .ai-tool-art{width:75%;justify-self:end;rotate:3deg;padding:8px}.ai-tool-art img{height:130px}.ai-tool-art>span{font-size:22px;padding:14px 6px 8px}
 .ai-method-art{font-size:28px;gap:6px}.ai-method-art b{font-size:25px}
 .ai-practice-progress{bottom:24px;left:22px;right:22px}
}
@media(max-width:760px) and (max-height:740px){.ai-practice-panel{padding-top:125px;gap:16px}.ai-practice-panel h2{font-size:33px}.ai-idea-art small{display:none}.ai-tool-art img{height:95px}.ai-practice-panel p:not(.ai-practice-step){font-size:14px}}
@media(prefers-reduced-motion:reduce){
 .ai-practice{height:auto}.ai-practice-stage{height:auto;position:relative;overflow:visible}.ai-practice-label{position:static;padding:40px 6vw 0}
 .ai-practice-track{display:block;width:100%;transform:none}.ai-practice-panel{width:100%;padding-top:70px;min-height:80svh}
 .ai-practice-art,.ai-practice-panel>div:first-child,.ai-hero-person img,.ai-hero-person::before{transform:none}.ai-practice-progress{display:none}
}
