/* One reversible sequence: silhouette → surface → stance → drawing → The METHOD. */
.form-word,.wheel-study,.diagram-ground,.inspection-rig,.inspection-shade{display:none;pointer-events:none}
.observation-index{font-size:9px;letter-spacing:.15em;color:#c4b9ae}
.observation h3{font:400 clamp(48px,5.2vw,83px)/.98 Newsreader,Georgia,serif;letter-spacing:-.045em;margin:20px 0}
.observation h3 em{font-weight:400}
.observation p{font-size:12px;line-height:1.8;color:var(--muted);margin-bottom:0}
.observation-track{display:flex;gap:8px;width:245px;max-width:100%;margin-top:20px}
.observation-track span{height:1px;background:#f1e8de30;flex:1}
.observation-track span:after{content:'';display:block;width:100%;height:1px;background:var(--chalk);transform:scaleX(var(--fill,0));transform-origin:left}
.detail-facts{list-style:none;margin:24px 0;padding:0;max-width:330px}
.detail-facts li{display:flex;gap:18px;border-top:1px solid var(--line);padding:13px 0 9px}
.detail-facts li>span{font-size:9px;padding-top:3px;color:#bcb1a7}
.detail-facts strong{font-size:12px;font-weight:500}
.detail-facts p{font-size:10px;line-height:1.6;color:#bfb1a7;margin:5px 0 0}
body[data-motion=on] .form-word{display:block;position:absolute;z-index:0;top:14%;left:41%;font:400 clamp(160px,22vw,350px)/1 Newsreader,Georgia,serif;letter-spacing:-.07em;color:#d5c8bd;opacity:calc(var(--word,0)*.42);transform:translateX(var(--word-travel,0px))}
body[data-motion=on] .orbit-plane{z-index:1;transform:translate(var(--car-travel,0px),-50%) scale(var(--media-scale,1));mask-image:linear-gradient(90deg,transparent,#000 12%,#000 97%,transparent),linear-gradient(0deg,transparent,#000 13%,#000 67%,transparent 86%)}
body[data-motion=on] .encounter-copy{transform:translateY(calc((1 - var(--encounter-copy,1))*-80px))}
body[data-motion=on] .turn-copy{top:24%;width:32%;z-index:5;transform:none}
body[data-motion=on] .turn-copy>.eyebrow{display:none}
body[data-motion=on] .observations{display:grid}
body[data-motion=on] .observation{grid-area:1/1;opacity:var(--reveal,0);transform:translateY(calc((1 - var(--reveal,0))*22px))}
body[data-motion=on] .angle-display{font-size:44px;margin:20px 0 3px}
body[data-motion=on] .turn-controls{max-width:245px}
body[data-motion=on] .turn-controls>div{font-size:7px}
body[data-motion=on] .quiet-link{margin-top:8px}
body[data-motion=on] .detail-copy{top:23%;z-index:6}
body[data-motion=on] .detail-copy h2{font-size:clamp(38px,4.5vw,72px);margin-bottom:20px}
body[data-motion=on] .detail-copy .intro{margin-bottom:0}
body[data-motion=on] .detail-facts li{opacity:var(--reveal,0);transform:translateY(calc((1 - var(--reveal,0))*20px))}
body[data-motion=on] .film-control{opacity:var(--film,0);margin-top:8px;transition:opacity .18s}
body[data-motion=on] .diagram-ground{display:block;position:absolute;z-index:3;inset:0;background:var(--oxblood);opacity:var(--diagram,0)}
body[data-motion=on] .wheel-study{display:block;position:absolute;z-index:4;left:0;top:50%;width:100%;aspect-ratio:16/9;transform:translateY(-50%);opacity:var(--study,0)}
.wheel-study svg{display:block;width:100%;height:100%;overflow:visible}
.wheel-lines ellipse,.diagram-leaders path{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--drawing,0))}
.wheel-lines use{opacity:var(--drawing,0)}
.construction{opacity:calc(var(--diagram,0)*.26)}
.diagram-leaders{opacity:var(--drawing,0)}
.diagram-labels{font:14px 'IBM Plex Sans',sans-serif;letter-spacing:1.8px;opacity:var(--drawing,0)}
.diagram-numbers{display:none;font:24px 'IBM Plex Sans',sans-serif}
.diagram-caption{position:absolute;left:14%;top:92%;font-size:8px;letter-spacing:.14em;opacity:var(--diagram,0);color:#d6bdb7}
body[data-motion=off] .observation{margin-bottom:40px;transform:none;opacity:1}
body[data-motion=off] .observation-track{display:none}
body[data-motion=off] .detail-facts li{opacity:1;transform:none}
@media(min-width:761px) and (max-height:740px){
 body[data-motion=on] .turn-copy{top:23%}
 .observation h3{font-size:clamp(40px,4.5vw,62px);margin:17px 0}
 .observation p{font-size:11px}
 body[data-motion=on] .angle-display{font-size:35px;margin-top:15px}
 body[data-motion=on] .detail-copy{top:21%}
 body[data-motion=on] .detail-copy h2{font-size:42px;margin-bottom:12px}
 body[data-motion=on] .detail-copy .intro{display:none}
 .detail-facts{margin:16px 0}
 .detail-facts li{padding:10px 0 7px}
}
@media(max-width:760px){
 body[data-motion=on] .form-word{top:45%;left:17%;font-size:37vw}
 body[data-motion=on] .turn-copy{top:16%;left:7%;width:86%}
 .observation h3{font-size:clamp(43px,9vw,65px);margin:15px 0}
 .observation h3 br{display:none}
 .observation p{font-size:11px;line-height:1.6}
 .observation-track{width:62%;margin-top:16px}
 body[data-motion=on] .turn-copy .angle-display{top:114px;right:0;font-size:37px;margin:0}
 body[data-motion=on] .orbit-plane{top:66%;left:-7%;width:108%}
 body[data-motion=on] .turn-copy .turn-controls{max-width:62%}
 body[data-motion=on] .detail-plane,body[data-motion=on] .stage .detail-plane{left:0;top:29%;width:142%}
 body[data-motion=on] .wheel-study{left:0;top:29%;width:142%;transform:translateY(-50%) scale(calc(1 + var(--diagram,0)*.45));transform-origin:34% 59%}
 body[data-motion=on] .stage .detail-copy{left:7%;top:48%;width:86%}
 body[data-motion=on] .detail-copy h2{font-size:37px;line-height:1;margin-bottom:14px}
 body[data-motion=on] .detail-copy h2 br{display:none}
 body[data-motion=on] .detail-copy h2 em{display:inline}
 body[data-motion=on] .detail-copy .intro{display:none}
 .detail-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:none;margin:18px 0 14px}
 .detail-facts li{display:block;padding:9px 0;min-width:0}
 .detail-facts li>span{display:block;margin-bottom:5px}
 .detail-facts strong{font-size:10px}
 .detail-facts p{font-size:9px;line-height:1.6}
 .diagram-labels,.diagram-leaders path{display:none}
 .diagram-numbers{display:block}
 .diagram-caption{display:none}
 body[data-motion=on] .film-control{font-size:10px;margin-top:0}
 body[data-motion=on] .stage:before{background:linear-gradient(180deg,#171717 0,transparent 100px,transparent 35%,#171717e0 48%,#171717 57%)}
}
@media(max-width:480px) and (max-height:740px){
 body[data-motion=on] .turn-copy{top:16%}
 .observation h3{font-size:39px;margin:12px 0}
 .observation p{font-size:10px}
 body[data-motion=on] .turn-copy .angle-display{top:108px;font-size:32px}
 body[data-motion=on] .stage .detail-copy{top:47%}
 body[data-motion=on] .stage .detail-plane,body[data-motion=on] .wheel-study{top:26%}
 body[data-motion=on] .detail-copy h2{font-size:31px;margin-bottom:10px}
 body[data-motion=on] .detail-copy .eyebrow{font-size:7px;margin-bottom:12px}
 .detail-facts{gap:10px;margin:10px 0 7px}
 .detail-facts p{font-size:8px}
 body[data-motion=on] .film-control{min-height:42px}
}
@media(min-width:481px) and (max-width:760px) and (max-height:650px){
 body[data-motion=on] .form-word{top:30%;font-size:28vw;left:30%}
 body[data-motion=on] .turn-copy{top:25%;left:6%;width:40%}
 .observation h3{font-size:34px;margin:13px 0}
 .observation h3 br{display:block}
 .observation p{font-size:9px}
 .observation p br{display:none}
 .observation-track{width:90%;margin-top:12px}
 body[data-motion=on] .turn-copy .angle-display{position:relative;top:auto;right:auto;font-size:28px;margin:14px 0 0}
 body[data-motion=on] .turn-copy .turn-controls{max-width:90%}
 body[data-motion=on] .orbit-plane{top:61%;left:16%;width:90%}
 body[data-motion=on] .stage .detail-plane,body[data-motion=on] .wheel-study{left:-12%;width:112%;top:50%}
 body[data-motion=on] .wheel-study{transform:translateY(-50%)}
 body[data-motion=on] .stage .detail-copy{left:62%;top:22%;width:32%}
 body[data-motion=on] .detail-copy h2{font-size:27px;margin-bottom:14px}
 body[data-motion=on] .detail-copy h2 em{display:block}
 .detail-facts{display:block;margin:9px 0 6px}
 .detail-facts li{display:flex;gap:9px;padding:7px 0 5px}
 .detail-facts li>span{font-size:8px;margin:0}
 .detail-facts strong{font-size:9px}
 .detail-facts p{font-size:8px;margin-top:2px}
 body[data-motion=on] .detail-copy .film-control{font-size:8px;min-height:40px;gap:6px}
 .film-icon{flex-shrink:0;width:22px;height:22px}
 .diagram-labels{font-size:18px}
 body[data-motion=on] .stage:before{background:linear-gradient(180deg,#171717,transparent 100px),linear-gradient(90deg,transparent 42%,#171717cc 63%,#171717dd)}
}

/* The photographic wheel and the drawing share one coordinate system and camera.
   Breakpoints affect the camera destination, never individual layer positions. */
body[data-motion=on] .stage .inspection-rig{display:block;position:absolute;left:0;top:0;width:1920px;height:1080px;z-index:4;transform-origin:0 0;will-change:transform}
body[data-motion=on] .stage .inspection-rig .detail-plane{display:block;position:absolute;inset:0;width:1920px;height:1080px;aspect-ratio:auto;transform:none;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(0deg,transparent,#000 15%,#000 88%,transparent);mask-composite:intersect;opacity:calc(var(--close-photo,0)*var(--body-photo,1));z-index:1}
body[data-motion=on] .stage .inspection-rig .wheel-photo{position:absolute;inset:0;width:1920px;height:1080px;max-width:none;opacity:var(--wheel-photo,0);z-index:2;mask-image:radial-gradient(ellipse 260px 296px at 646px 640px,#000 89%,transparent 100%)}
body[data-motion=on] .stage .inspection-rig .wheel-study{display:block;position:absolute;inset:0;width:1920px;height:1080px;aspect-ratio:auto;transform:none;opacity:var(--study,0);z-index:3}
.inspection-rig .wheel-lines use{opacity:1;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--spokes,0))}
.inspection-rig .wheel-lines ellipse{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--drawing,0))}
.diagram-feature{stroke:currentColor;stroke-width:1.5}
.diagram-feature .leader-line{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--feature,0));fill:none}
.diagram-feature circle{opacity:var(--feature,0)}
.diagram-feature text{fill:currentColor;stroke:none;opacity:var(--feature,0)}
.feature-label{font:var(--label-size,14px) 'IBM Plex Sans',sans-serif;letter-spacing:1.8px}
.feature-number{display:none;font:var(--number-size,28px) 'IBM Plex Sans',sans-serif}
body[data-motion=on] .inspection-shade{display:block;position:absolute;inset:0;z-index:5;opacity:var(--inspection-shade,0);background:linear-gradient(180deg,#171717,#171717aa 65px,transparent 145px),linear-gradient(90deg,transparent 53%,#171717d9 66%,#171717e6)}
@media(max-width:760px){body[data-motion=on] .inspection-shade{background:linear-gradient(180deg,#171717,#171717aa 55px,transparent 110px,transparent 37%,#171717dd 48%,#171717 60%)}}
@media(min-width:481px) and (max-width:760px) and (max-height:650px){body[data-motion=on] .inspection-shade{background:linear-gradient(180deg,#171717,#171717aa 55px,transparent 115px),linear-gradient(90deg,transparent 48%,#171717dd 62%,#171717)}}
@media(max-width:760px){.feature-label,.leader-line{display:none}.feature-number{display:block}}