/* Lento: a continuous object study, from daylight to the slower hours. */
:root{--paper:#2e382f;--ink:#f1e8d8;--muted:#bcbcaf;--line:#f1e8d830;--accent:#e3ab87;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:42px}body{margin:0;background:#1b1917;color:var(--ink);font:15px/1.5 'DM Sans',Arial,sans-serif;overflow-x:clip}a{color:inherit;text-decoration:none}button,input{font:inherit;color:inherit}button,a,input{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{cursor:pointer;border:0}button:disabled,input:disabled{cursor:default;opacity:.5}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:6px}h1,h2,h3,p{margin:0}fieldset{padding:0;margin:0;border:0}em{font-style:normal;color:var(--accent)}::selection{background:#b9573580}.eyebrow{font-size:10px;font-weight:600;letter-spacing:1.5px;line-height:1.5}h2{font-size:clamp(40px,5.4vw,84px);font-weight:500;letter-spacing:-.055em;line-height:1.03}button,input,a{position:relative}.paper-grain{position:fixed;inset:42px 0 0;z-index:8;pointer-events:none;opacity:.065;background-repeat:repeat;background-size:256px 256px;background-image:url("data:image/svg+xml,%3Csvg width='256' height='256' viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.6' d='M0 0h256v256H0z'/%3E%3C/svg%3E")}
/* Without JavaScript or WebGL, every chapter remains readable in normal flow. */
.experience{position:relative;--dark:0;--evening:0;--hero-out:0;--progress:0;--vh:calc(100svh - 42px)}.story-stage{position:relative;background:#2e382f;isolation:isolate}.stage-backdrop{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 40% 36%,#626b4a55,transparent 70%),#2e382f}.stage-backdrop:after{position:absolute;inset:0;content:'';background:#191715;opacity:var(--dark)}.studio-grid{position:absolute;inset:25% -25% -60%;background-image:linear-gradient(#c4c5a31c 1px,transparent 1px),linear-gradient(90deg,#c4c5a31c 1px,transparent 1px);background-size:80px 80px;transform:perspective(800px) rotateX(48deg) rotateZ(-14deg);mask-image:linear-gradient(transparent,#000 40%);opacity:calc(1 - var(--dark));will-change:transform}.evening-halo{position:absolute;z-index:1;inset:0;background:radial-gradient(ellipse at 25% 65%,#da914b66,transparent 65%);opacity:var(--evening)}.site-header{position:absolute;z-index:7;top:0;left:4.5%;right:4.5%;height:82px;display:flex;align-items:center;justify-content:space-between}.wordmark{font-size:40px;letter-spacing:-3px;font-weight:650;line-height:1}.logo-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:3px}.site-header nav{display:flex;gap:32px;align-items:center;font-size:12px}.header-cta{padding:11px 19px;border:1px solid var(--line);border-radius:30px}.header-cta:hover{background:var(--ink);color:#191715}.story-panels{position:relative;z-index:3}.story-panel{position:relative;padding:100px 6% 60px;min-height:90svh}.story-panel h2{margin:20px 0}.still-lamp{display:block;width:min(80%,520px);height:400px;object-fit:contain;margin:20px auto}.scene,.story-track,.story-progress{display:none}.hero h1{font-size:30vw;font-weight:600;letter-spacing:-.075em;line-height:.85}.hero h1>span{color:var(--accent)}.hero-topline{display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:1.3px}.hero-description{font-size:18px;font-weight:500;line-height:1.5}.hero-note{display:flex;gap:20px;align-items:flex-start}.hero-note p{font-size:28px;line-height:1.13;letter-spacing:-.8px}.hero-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:32px}.power-button{display:flex;align-items:center;gap:8px;font-size:11px;background:transparent;min-height:44px;padding:0}.power-icon{font-size:20px;color:var(--accent)}.power-button[aria-pressed=false] .power-icon{color:var(--muted)}.round-link{display:inline-flex;align-items:center;gap:14px;font-size:11px}.round-arrow{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:18px}.round-link:hover .round-arrow{background:var(--ink);color:#191715}.reveal-caption{font-size:19px;line-height:1.5;color:var(--muted)}.scene-edition{font-size:9px;letter-spacing:2px;color:var(--muted)}.chapter-copy>p:not(.eyebrow),.play-copy>p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.7;max-width:340px}.part-list{list-style:none;padding:0;margin:25px 0 0;border-top:1px solid var(--line)}.part-list li{display:flex;gap:18px;padding:17px 0;border-bottom:1px solid var(--line)}.part-list li>span{color:var(--accent);font-size:9px;padding-top:4px}.part-list h3{font-size:14px;font-weight:500}.part-list p{font-size:11px;color:var(--muted);margin-top:5px;max-width:290px}.anatomy-aside{display:none}.configurator{margin-top:32px;max-width:350px}.configurator legend{display:flex;justify-content:space-between;width:100%;font-size:12px}.configurator output{font-size:11px;color:var(--muted)}.swatches{display:flex;gap:25px;margin:22px 0}.swatches button{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0;background:transparent;min-width:44px}.swatches button>span{height:29px;width:29px;border-radius:50%;background:var(--swatch);position:relative}.swatches button[aria-pressed=true]>span:after{position:absolute;inset:-5px;border-radius:50%;border:1px solid currentColor;content:''}.swatches small{font-size:9px;color:var(--muted)}.range-control{padding-top:15px;margin-top:17px}.range-control label{display:flex;justify-content:space-between;font-size:12px}input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:28px;background:transparent;cursor:ew-resize;margin:10px 0 0;display:block}input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line)}input[type=range]::-moz-range-track{height:2px;background:var(--line)}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:13px;height:13px;background:var(--ink);border-radius:50%;margin-top:-5.5px;border:3px solid #211d19;box-shadow:0 0 0 1px var(--ink)}input[type=range]::-moz-range-thumb{width:9px;height:9px;background:var(--ink);border-radius:50%;border:3px solid #211d19;box-shadow:0 0 0 1px var(--ink)}
/* One viewport, one object. The invisible track supplies native scroll distance. */
.is-animated .experience{display:grid;grid-template-columns:minmax(0,1fr)}.is-animated .story-stage{grid-area:1/1;position:sticky;top:42px;height:var(--vh);align-self:start;overflow:hidden}.is-animated .story-track{grid-area:1/1;display:block;pointer-events:none}.story-track>div{height:calc(var(--vh)*1.6);scroll-margin-top:0}.story-track>div:first-child{height:calc(var(--vh)*1.5)}.story-track>div:last-child{height:calc(var(--vh)*1.5)}.is-animated .scene{display:block;position:absolute;inset:0;z-index:4;pointer-events:none}.scene canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .6s}.scene.is-ready canvas{opacity:1}.is-animated .story-panels{position:absolute;inset:0}.is-animated .story-panel{position:absolute;inset:0;min-height:0;padding:0;will-change:opacity,transform}.is-animated .story-panel:not(.hero){opacity:0;visibility:hidden}.is-animated .still-lamp{display:none}.is-animated .wordmark{opacity:var(--hero-out)}.is-animated .hero-topline{position:absolute;left:5%;right:5%;top:95px}.is-animated .hero h1{position:absolute;top:120px;left:3.3%;font-size:35.4vw;line-height:.8;margin:0}.is-animated .hero-description{position:absolute;right:5%;top:57%;max-width:270px}.is-animated .hero-note{position:absolute;left:5%;bottom:110px}.is-animated .hero-bottom{position:absolute;bottom:38px;left:5%;right:5%;margin:0}.is-animated .reveal-copy{position:absolute;top:18%;left:6%;max-width:55%}.is-animated .reveal h2{font-size:clamp(42px,5.4vw,84px)}.is-animated .reveal-caption{position:absolute;bottom:12%;left:6%}.is-animated .scene-edition{position:absolute;right:5%;bottom:8%;writing-mode:vertical-rl}.is-animated .chapter-copy{position:absolute;left:6%;top:17%;width:39%}.is-animated .anatomy h2{font-size:clamp(40px,4.9vw,76px)}.is-animated .detail-explorer{position:absolute;left:6%;top:51%;width:29%;max-width:360px}.is-animated .anatomy-aside{position:absolute;right:4%;top:35%;display:flex;writing-mode:vertical-rl;gap:70px;font-size:9px;letter-spacing:1.5px;color:var(--muted)}.is-animated .play-copy{position:absolute;right:7%;top:15%;width:34%;max-width:470px}.is-animated .play h2{font-size:clamp(38px,4.2vw,66px)}.is-animated .story-progress{position:absolute;z-index:6;left:5%;right:5%;bottom:22px;display:flex;align-items:center;gap:10px;font-size:8px;color:var(--muted);opacity:var(--hero-out)}.story-progress>div{height:1px;background:var(--line);flex:1}.story-progress i{display:block;width:100%;height:1px;background:var(--accent);transform:scaleX(var(--progress));transform-origin:left}
.closing{position:relative;text-align:center;min-height:85svh;padding:100px 5% 200px;overflow:hidden;background:#242a24}.closing h2{font-size:clamp(65px,8vw,128px);margin:25px 0}.closing .round-link{margin-top:15px}.closing-wordmark{position:absolute;bottom:-4vw;left:0;right:0;font-size:34vw;font-weight:600;letter-spacing:-.08em;line-height:1;opacity:.075;pointer-events:none}.site-footer{position:relative;display:flex;justify-content:space-between;align-items:center;gap:25px;padding:35px 5% 65px;border-top:1px solid var(--line);background:#242a24;font-size:10px;color:var(--muted)}.site-footer>p{line-height:1.8}.footer-logo{font-size:32px;font-weight:600;letter-spacing:-2px;color:var(--ink)}.site-footer a:last-child{color:var(--ink)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;top:48px;left:10px;z-index:120;padding:10px;background:var(--ink);color:#191715;transform:translateY(-300%)}.skip:focus{transform:none}.no-script{padding:15px;background:#242a24;font-size:12px}
@media(min-width:761px) and (max-height:760px){.is-animated .hero h1{font-size:29vw;top:105px}.is-animated .hero-description{top:60%}.is-animated .hero-note{bottom:85px}.is-animated .chapter-copy{top:14%}.is-animated .chapter-copy>p:not(.eyebrow){font-size:12px}.is-animated .detail-explorer{top:53%}.part-list li{padding:12px 0}.is-animated .play-copy{top:11%}.is-animated .play h2{font-size:44px;margin:15px 0}.configurator{margin-top:22px}.range-control{margin-top:12px;padding-top:12px}}
@media(max-width:760px){
  .site-header{height:66px;left:6%;right:6%}.wordmark{font-size:31px;letter-spacing:-2px}.logo-dot{height:5px;width:5px}.site-header nav{font-size:10px}.site-header nav>a:first-child{display:none}.header-cta{padding:10px 14px;min-height:40px}
  .eyebrow{font-size:8px;letter-spacing:1.15px}.story-panel{padding:90px 6% 45px}h2{font-size:40px}.hero-topline>span:last-child{display:none}.hero-description{font-size:14px;line-height:1.5}.hero-note{gap:10px}.hero-note p{font-size:20px;letter-spacing:-.5px}.power-button{font-size:9px}.round-arrow{width:30px;height:30px;font-size:15px}.is-animated .hero-topline{top:78px;left:6%;right:6%;font-size:8px;letter-spacing:1.05px}.is-animated .hero h1{top:108px;left:3.8%;font-size:35.5vw}.is-animated .hero-description{top:calc(108px + 31vw);right:6%;max-width:215px;text-align:right;font-size:13px}.is-animated .hero-note{left:6%;bottom:102px}.is-animated .hero-bottom{left:6%;right:6%;bottom:41px}.is-animated .reveal-copy{left:7%;right:7%;top:17%;max-width:none}.is-animated .reveal h2{font-size:clamp(31px,8.8vw,51px);letter-spacing:-.05em;margin:17px 0;line-height:1.07}.is-animated .reveal-caption{bottom:10%;left:7%;right:7%;font-size:14px;line-height:1.6;text-align:center}.is-animated .scene-edition{display:none}.is-animated .chapter-copy{top:11%;left:7%;width:86%}.is-animated .anatomy h2{font-size:clamp(31px,9vw,47px);margin:14px 0}.is-animated .chapter-copy>p:not(.eyebrow){font-size:12px;line-height:1.6;max-width:350px}.is-animated .anatomy-aside{display:none}.is-animated .play-copy{inset:10% 7% 7%;width:auto;max-width:none}.is-animated .play h2{font-size:clamp(30px,8.9vw,46px);margin:13px 0}.play-copy>p:not(.eyebrow){font-size:12px;line-height:1.6}.is-animated .configurator{position:absolute;bottom:0;left:0;right:0;max-width:none;display:grid;grid-template-columns:1fr 1fr;column-gap:25px;margin:0}.configurator legend,.range-control label{font-size:10px}.configurator output{font-size:9px}.configurator legend{display:block}.configurator legend output{display:block;margin-top:3px}.swatches{gap:14px;margin:15px 0 0}.swatches button{min-width:30px;gap:9px}.swatches button>span{width:23px;height:23px}.swatches small{font-size:8px}.range-control{margin:0;padding-top:0;border-top:0}.turn-control{grid-column:1/-1;padding-top:12px;margin-top:19px}.turn-control input{margin-top:2px}.is-animated .story-progress{left:7%;right:7%;bottom:20px}.closing{min-height:650px;padding-top:90px}.closing h2{font-size:62px}.site-footer{flex-direction:column;text-align:center;gap:26px;padding:35px 6% 65px}
}
@media(max-width:760px) and (max-height:740px){.is-animated .hero-topline{top:65px}.is-animated .hero h1{top:91px;font-size:32vw;left:7%}.is-animated .hero-description{top:calc(91px + 28vw);font-size:11px;max-width:180px}.is-animated .hero-note{bottom:90px}.hero-note p{font-size:16px}.is-animated .reveal-copy{top:13%}.is-animated .reveal h2{font-size:8vw}.is-animated .chapter-copy{top:10%}.is-animated .anatomy h2{font-size:8vw;margin:10px 0}.is-animated .chapter-copy>p:not(.eyebrow){font-size:10px}.is-animated .play-copy{top:10%}.is-animated .play h2{font-size:8vw;margin:9px 0}.play-copy>p:not(.eyebrow){font-size:10px}.turn-control{margin-top:12px;padding-top:8px}.is-animated .reveal-caption{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

@media(min-width:761px) and (max-width:1100px) and (max-aspect-ratio:1/1){.is-animated .hero-description{top:40%;font-size:14px;max-width:250px;text-align:right}}

/* A render of this model holds the composition until its first live frame. */
.scene-poster{position:absolute;left:27.5%;top:28%;width:49%;height:66%;object-fit:contain;transition:opacity .6s}
.scene-loading{position:absolute;right:5%;bottom:70px;font-size:11px;letter-spacing:.02em;color:var(--muted);transition:opacity .3s}
.scene.is-ready .scene-poster,.scene.is-ready .scene-loading{opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s}
@media(max-width:760px){
  .scene-poster{left:8%;top:38.5%;width:90%;height:45%}
  .scene-loading{right:6%;bottom:42px;font-size:10px}
  .evening-halo{background:radial-gradient(ellipse at 50% 62%,#da914b66,transparent 66%)}
  .is-animated .anatomy .chapter-copy>p:not(.eyebrow){display:none}
  .is-animated .detail-explorer{top:auto;bottom:7%;left:7%;width:86%;max-width:none}
  .is-animated .part-list{margin:0;padding:0;border-top:1px solid var(--line)}
  .is-animated .part-list li{gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
  .is-animated .part-list li>span{font-size:10px;padding-top:3px}
  .is-animated .part-list h3{font-size:14px;line-height:1.4;margin:0}
  .is-animated .part-list p{font-size:12px;line-height:1.5;margin-top:4px;max-width:30em}
  .swatches{gap:6px}
  .swatches button{min-width:44px}
  .swatches small{font-size:10px}
  .configurator legend,.range-control label{font-size:12px}
  .configurator output{font-size:10px}
  input[type=range]{height:44px}
  .turn-control{margin-top:8px;padding-top:6px}
}
@media(max-width:360px){
  .is-animated .configurator{column-gap:14px;grid-template-columns:1.15fr 1fr}
  .swatches{gap:3px}
  .swatches button{min-width:40px}
  .swatches small{font-size:9px}
}
