/* The work lives in the page: objects, behaviours, gestures. */
.work-section{padding-bottom:48px}
.work-section .section-heading{margin-bottom:35px}
.experience-index{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;padding:20px 0;border-top:1px solid var(--line);font-size:8px;color:var(--muted)}
.experience-index a{padding:5px 0;transition:color .2s}
.experience-index a:hover{color:var(--ink)}
.experience{--experience-line:var(--line);--experience-muted:var(--muted);display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,1.6fr);gap:clamp(28px,5vw,90px);align-items:center;padding:62px 0 65px;border-top:1px solid var(--experience-line);scroll-margin-top:25px;position:relative}
.experience-copy{display:flex;flex-direction:column;align-items:flex-start;position:relative;z-index:2}
.experience-kicker{font-size:8px;color:var(--experience-muted)}
.experience-copy h3{font-size:clamp(42px,5.5vw,82px);letter-spacing:-.065em;line-height:1.1;margin-top:30px}
.experience-copy .experience-question{font-size:clamp(21px,2.3vw,32px);line-height:1.3;letter-spacing:-.04em;margin-top:27px;max-width:370px;color:var(--green)}
.experience-copy>p:not(.experience-question){font-size:12px;line-height:1.9;color:var(--experience-muted);max-width:290px;margin-top:23px}
.experience-copy .text-link{margin-top:25px}
.experience-disciplines{font-size:7px;color:var(--experience-muted);margin-top:42px;line-height:1.9}
.experience-playground{min-width:0}
.experience--reverse{grid-template-columns:minmax(0,1.6fr) minmax(230px,.8fr)}
.experience--reverse>.experience-copy{grid-column:2;grid-row:1}
.experience--reverse>.experience-playground{grid-column:1;grid-row:1}
.object-stage,.field-stage{height:clamp(350px,36vw,510px);position:relative;overflow:hidden;isolation:isolate}
.object-stage{background:radial-gradient(ellipse at 48% 53%,#f7f3eb,transparent 67%)}
.object-stage>canvas,.field-stage>canvas{width:100%;height:100%;position:relative;z-index:1;touch-action:pan-y;cursor:grab}
.object-stage>canvas:active{cursor:grabbing}
.object-fallback{padding:55px 40px}
.object-fallback img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 14px 35px #292d2717}
.object-stage-top,.object-stage-bottom{position:absolute;left:0;right:0;z-index:2;display:flex;justify-content:space-between;gap:18px;pointer-events:none;font-size:7px;color:var(--experience-muted)}
.object-stage-top{top:7px}
.object-stage-bottom{bottom:18px}
.object-stage-bottom>span:last-child{text-align:right}
.object-stage-bottom .direction-icon{width:18px;height:18px;vertical-align:-5px;margin-right:6px}
.experience-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--experience-line);border-bottom:1px solid var(--experience-line)}
.experience-controls button{background:transparent;border:0;text-align:left;display:flex;gap:10px;align-items:center;padding:18px 13px;font-size:11px;min-width:0;transition:background .2s,color .2s}
.experience-controls button+button{border-left:1px solid var(--experience-line)}
.experience-controls button:first-child{padding-left:0}
.experience-controls button .mono{color:var(--experience-muted);font-size:8px}
.experience-controls button i{display:block;flex:0 0 4px;height:4px;border-radius:50%;margin-left:auto;background:currentColor;opacity:0}
.experience-controls button[aria-pressed=true]{color:var(--green)}
.experience-controls button[aria-pressed=true] i{opacity:1}
.experience-controls button:hover{background:#5d71550a}
.experience-detail{padding-top:22px;min-height:109px;max-width:590px}
.experience-detail h4{font-size:13px;font-weight:500;letter-spacing:-.015em;margin:0}
.experience-detail p{font-size:11px;line-height:1.9;color:var(--experience-muted);margin-top:8px;max-width:530px}
.experience--pucclab{padding-top:45px}
.experience--dark{--experience-line:#45554a;--experience-muted:#afbeaa;background:#24352d;color:#e8eddf;margin:15px calc(var(--gutter) * -1 + 18px) 38px;padding:48px calc(var(--gutter) - 18px);border-top:0;grid-template-columns:minmax(220px,.8fr) minmax(0,1.6fr)}
.experience--dark .experience-question{color:#c2d2ac}
.experience--dark .experience-controls button[aria-pressed=true]{color:#d8e7b5}
.experience--dark .experience-controls button:hover{background:#ffffff06}
.experience--dark .field-stage{background:radial-gradient(ellipse at center,#344a3b66,transparent 70%)}
.experience--dark .status-dot{background:#bfd393;width:4px;height:4px}
.field-stage .field-fallback{position:absolute;inset:12% 8%;width:84%;height:76%;object-fit:contain;opacity:.75}
.field-stage.is-ready .field-fallback,.field-stage[data-study=ready] .field-fallback,.field-stage.is-ready>svg:not(#race-field),.field-stage[data-study=ready]>svg:not(#race-field){display:none}
.gesture-stage{--experience-muted:#b1bda7;background:#24352d;cursor:crosshair}
.gesture-stage>svg{position:absolute;inset:0;z-index:0;transform:none!important}
.gesture-stage .object-stage-top,.gesture-stage .object-stage-bottom{left:22px;right:22px}
.gesture-stage .object-stage-top{top:21px}
.gesture-stage .object-stage-bottom{font-size:6px;bottom:20px}
.gesture-stage>canvas{cursor:crosshair}
.gesture-controls button{font-size:10px}
.experience--sprayce{border-top:0;padding-top:18px;padding-bottom:25px}
.race-integrated{background:transparent;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);margin-top:70px;border-top:1px solid var(--line);padding-top:28px;gap:35px;align-items:center}
.race-integrated .experiment-copy{padding:30px 0 30px 20px}
.race-playground{min-width:0}
.replay-stage{height:430px;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 75%,#d3d6c5,transparent 65%);perspective:1000px;overflow:hidden}
.replay-stage .object-stage-top,.replay-stage .object-stage-bottom{font-size:7px;color:var(--muted)}
.replay-device{width:72%;max-width:385px;position:relative;transform:rotateY(-12deg) rotateX(8deg) rotateZ(-4deg);margin-top:5px}
.replay-display{position:relative;border:12px solid #d4d1c7;border-right-width:17px;border-bottom-width:17px;border-radius:14px;background:#25332d;box-shadow:9px 7px 0 #aaa99d,24px 32px 35px #353b342b,inset 0 0 20px #0004;overflow:hidden}
.replay-display-head,.replay-display-foot{display:flex;justify-content:space-between;align-items:center;padding:15px 14px 0;font-size:6px;color:#c6d2b8}
.replay-display-head .status-dot{margin:0;width:4px;height:4px;background:#e6a777}
.replay-display-foot{padding:0 14px 14px;color:#8d9d84;font-size:5px}
#race-field{width:100%;height:auto;display:block;overflow:visible;aspect-ratio:3/2}
.replay-device-base{width:49%;height:36px;background:linear-gradient(110deg,#c1c1b6,#d3d2c6 55%,#b0b1a4);margin:-2px auto 0;transform:skewX(-22deg) translateX(-7px);box-shadow:15px 17px 13px #353b3417;position:relative;z-index:-1;border-radius:0 0 5px 5px}
.replay-timeline{padding:23px 0 17px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:15px;align-items:center}
.replay-timeline label,.replay-timeline>span{font-size:7px;color:var(--muted)}
.replay-timeline>span{text-align:right;grid-column:2;grid-row:1}
.replay-timeline input{grid-column:1/-1;grid-row:2;accent-color:var(--green);width:100%;margin:0;cursor:ew-resize;height:20px}
.replay-timeline input:focus-visible{outline:2px solid var(--green);outline-offset:5px}
.motion-paused .experience *, .motion-paused .replay-device{transition:none!important}
@media(min-width:1650px){.experience{padding-top:80px;padding-bottom:80px}.experience-copy>p:not(.experience-question){font-size:14px;max-width:340px}.experience-detail p{font-size:12px}.object-stage,.field-stage{height:560px}.experience--dark{padding-top:55px;padding-bottom:55px}}
@media(max-width:1050px){.experience{gap:30px;grid-template-columns:minmax(205px,.85fr) minmax(0,1.4fr)}.experience--reverse{grid-template-columns:minmax(0,1.4fr) minmax(205px,.85fr)}.experience-copy h3{font-size:49px}.object-stage,.field-stage{height:360px}.experience-controls button{font-size:10px;gap:7px;padding:17px 9px}.experience-controls button .mono{font-size:7px}.object-stage-bottom{font-size:6px}.gesture-controls button{font-size:9px}.gesture-controls button .mono{display:none}.experience-disciplines{font-size:6px}.replay-stage{height:360px}.replay-device{width:81%}.race-integrated{gap:25px}.race-integrated .experiment-copy{padding-left:0}.replay-timeline>span{max-width:150px;justify-self:end}}
@media(max-width:700px){
  .experience-index{gap:8px 21px;justify-content:flex-start;font-size:7px;padding:17px 0}
  .experience,.experience--reverse{grid-template-columns:minmax(0,1fr);gap:20px;padding:36px 0 37px}
  .experience--reverse>.experience-copy,.experience--reverse>.experience-playground{grid-column:auto;grid-row:auto}
  .experience-copy h3{font-size:49px;margin-top:20px}
  .experience-copy .experience-question{font-size:24px;margin-top:17px;max-width:310px}
  .experience-question br{display:none}
  .experience-copy>p:not(.experience-question){font-size:11px;max-width:310px;margin-top:16px}
  .experience-copy .text-link{margin-top:17px}
  .experience-kicker{font-size:7px}
  .experience-disciplines{display:none}
  .object-stage,.field-stage{height:335px}
  .object-stage-top{font-size:6px;top:13px}
  .object-stage-bottom{font-size:5px;gap:10px;bottom:18px}
  .object-stage-bottom .direction-icon{width:15px;height:15px;margin-right:3px}
  .experience-controls button{font-size:10px;padding:16px 9px;gap:7px}
  .experience-controls button i{flex-basis:3px;height:3px}
  .experience-controls button .mono{font-size:7px}
  .experience-detail{min-height:105px;padding-top:20px}
  .experience-detail h4{font-size:12px}
  .experience-detail p{font-size:10px;line-height:1.9;margin-top:7px}
  .experience--dark{margin:0 -15px 27px;padding:31px 15px 20px}
  .experience--moth .field-stage{height:340px}
  .experience--sprayce{padding-top:6px;padding-bottom:0;gap:27px}
  .gesture-stage{height:330px}
  .gesture-stage .object-stage-top,.gesture-stage .object-stage-bottom{left:14px;right:14px;font-size:5px}
  .gesture-stage .object-stage-bottom>span:last-child{display:none}
  .gesture-controls button{font-size:9px;gap:5px}
  .gesture-controls button .mono{display:inline;font-size:6px}
  .race-integrated{grid-template-columns:minmax(0,1fr);gap:8px;margin-top:39px;padding-top:0;display:flex;flex-direction:column-reverse;align-items:stretch}
  .race-integrated .experiment-copy{padding:28px 0 10px}
  .race-integrated .experiment-copy h3{font-size:36px;margin-top:19px}
  .race-integrated .mini-note{display:none}
  .replay-stage{height:350px}
  .replay-device{width:78%;max-width:300px}
  .replay-stage .object-stage-top,.replay-stage .object-stage-bottom{font-size:6px}
  .replay-display{border-width:10px;border-right-width:14px;border-bottom-width:14px;border-radius:12px}
  .replay-timeline label,.replay-timeline>span{font-size:6px}
  .replay-timeline{padding-top:18px}
  .replay-timeline input{height:36px}
}
@media(prefers-reduced-motion:reduce){.experience *{transition:none!important}}