/* LITOS: a museum label, a silhouette study, a printed object. */
body[data-story="litos"]{--ex-accent:#9c7a21;--label-rule:#20362e40}
body[data-story="litos"] .top{border-bottom-color:var(--label-rule)}
body[data-story="litos"] .chapters{background:#f5f3e9ed;backdrop-filter:blur(14px);font-family:Mono,monospace}
body[data-story="litos"] .chapters a{font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.litos-hero{position:relative;isolation:isolate;min-height:720px;grid-template-columns:1.15fr .85fr;gap:7vw;padding:70px 0 85px;border-bottom:1px solid var(--label-rule)}
.litos-hero>div:first-child{position:relative;padding-bottom:140px;z-index:1}
.litos-hero .eyebrow{max-width:230px;border-top:1px solid;padding-top:16px;letter-spacing:.18em}
.litos-hero h1{position:relative;white-space:nowrap;font-size:clamp(115px,16.8vw,235px);letter-spacing:-.085em;margin:56px 0 18px;z-index:2}
.litos-letter{display:inline-block;transform:translateY(calc((var(--section-progress,.3) - .3)*var(--lift,20px)))}
.litos-letter:nth-child(2){--lift:-35px}.litos-letter:nth-child(3){--lift:65px}.litos-letter:nth-child(4){--lift:-15px}.litos-letter:nth-child(5){--lift:45px}
.litos-hero h1 small{font:10px Mono,monospace;letter-spacing:.32em;margin-top:30px}
.litos-hero p{max-width:350px;font-size:20px;margin:32px 0 24px}
.litos-hero>div>a{font:11px Mono,monospace;letter-spacing:.025em}
.litos-hero>figure{position:relative;transform:translateY(calc((var(--section-progress,.3) - .3)*-55px)) rotate(1.5deg);box-shadow:none;max-width:410px;margin-left:auto;padding:14px;border:1px solid #9c7a2180;background:#eae8dd}
.litos-hero>figure:before{content:'LITOS / PROJECT POSTER';display:block;font:9px Mono,monospace;letter-spacing:.13em;padding:2px 0 14px}
.litos-hero>figure figcaption{font-size:11px;line-height:1.5;padding:4px 0 0;opacity:1}
.litos-register{display:flex;gap:30px;align-items:end;position:absolute;bottom:0;left:0;width:100%;padding-top:24px;border-top:1px solid var(--label-rule)}
.litos-register span{font:9px Mono,monospace;letter-spacing:.14em;line-height:1.9}
.litos-register b{font:italic 31px/1.1 Georgia,serif;font-weight:400}
.print-ghost{position:absolute;z-index:-1;pointer-events:none;right:-25px;bottom:10px;width:170px;height:230px;background:repeating-linear-gradient(to bottom,#9c7a2138 0 1px,transparent 1px 6px);clip-path:polygon(43% 0,58% 0,85% 85%,100% 90%,94% 100%,6% 100%,0 90%,15% 85%);transform:translateY(calc((var(--section-progress,.3) - .3)*70px))}
.print-ghost:after{content:'';position:absolute;inset:0;background:#f5f3e9;transform:translateY(calc(var(--section-progress,.3)*120%))}
.museum-line{border-top:0;padding:22px 0;gap:20px;line-height:1.6;font-size:9px;letter-spacing:.07em}
body[data-story="litos"] .eyebrow{color:inherit}
body[data-story="litos"] h2{line-height:1.01;font-size:clamp(42px,5.5vw,82px)}
body[data-story="litos"] .section{position:relative;padding-block:125px}
body[data-story="litos"] .intro{gap:10vw}
body[data-story="litos"] .intro>div{border-top:1px solid var(--label-rule);padding-top:22px}
body[data-story="litos"] #brief>figure{position:relative;max-width:1050px;margin:70px auto 0}
body[data-story="litos"] #brief>figure:before{content:'FORM STUDY / 01';position:absolute;z-index:1;left:22px;top:22px;font:10px Mono,monospace;letter-spacing:.14em}
body[data-story="litos"] #brief>figure .picture{overflow:hidden;background:#fff}
body[data-story="litos"] #brief>figure img{transform:scale(1.08) translateY(calc((var(--section-progress,.4) - .4)*-35px))}
body[data-story="litos"] #origin{border-block:1px solid var(--label-rule)}
body[data-story="litos"] #origin figure{width:85%;margin-left:auto;border:1px solid var(--label-rule);padding:18px}
.form-journey{position:relative;gap:4vw;margin-top:70px;padding-top:36px;border-top:1px solid var(--label-rule)}
.form-journey figure:nth-child(n){margin-top:0;transform:translateY(calc((1 - var(--section-progress,.5))*var(--journey-y,35px)))}
.form-journey figure:nth-child(2){--journey-y:120px;padding-top:30px}.form-journey figure:nth-child(3){--journey-y:200px;padding-top:60px}
.form-journey .picture{border-bottom:1px solid var(--label-rule);height:470px;display:flex;align-items:center}
.form-journey img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.form-journey figcaption{font:11px/1.6 Mono,monospace;margin-top:18px}
body[data-story="litos"] #evolution{padding-bottom:175px}
body[data-story="litos"] .feature-split{grid-template-columns:1.15fr .85fr;gap:6vw}
.specimen{padding:17px;background:#f5f3e9;border:1px solid var(--label-rule)}
.specimen-head{display:flex;justify-content:space-between;gap:16px;font:9px/1.7 Mono,monospace;letter-spacing:.1em;padding:0 0 15px}
.specimen-stage{position:relative;aspect-ratio:1600/1239;background:#fff;overflow:hidden;--split:100%}
.specimen-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.specimen-stage .specimen-open{clip-path:inset(0 0 0 calc(100% - var(--split)))}
.specimen-seam{display:none;position:absolute;z-index:2;inset-block:0;left:calc(100% - var(--split));width:1px;background:#20362e;pointer-events:none}
.specimen-seam:after{content:'↔';position:absolute;left:0;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;background:#f5f3e9;border:1px solid #20362e;border-radius:50%;width:35px;height:35px;font-size:18px}
.litos-ready .specimen-seam{display:block}.specimen-controls{display:none}.litos-ready .specimen-controls{display:block}
.specimen-controls label{display:flex;justify-content:space-between;gap:15px;font:10px/1.5 Mono,monospace;margin:22px 0 7px}
.specimen-controls output{white-space:nowrap}
.specimen-controls input{display:block;width:100%;height:28px;accent-color:#20362e;cursor:ew-resize}
.specimen-ends{display:flex;justify-content:space-between;gap:12px;margin:4px 0 18px}
.specimen-ends button{font:10px Mono,monospace;border:0;background:transparent;padding:10px 0;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.specimen figcaption{opacity:1;font:11px/1.6 Body,Arial}.specimen-sources{display:flex;flex-wrap:wrap;gap:18px;font:10px/1.6 Mono,monospace;margin-top:12px}
body[data-story="litos"] #details>.wrap>div:last-child{max-width:890px;margin-left:auto}
body[data-story="litos"] .numbered>div{grid-template-columns:36px 1fr}.numbered>div>span{font:12px Mono,monospace;color:#6f5720}
body[data-story="litos"] #production:before{content:'';position:absolute;top:0;left:0;right:0;height:25px;background:repeating-linear-gradient(to bottom,#9c7a2170 0 1px,transparent 1px 5px);transform:scaleX(calc(.25 + var(--section-progress,.5)*.75));transform-origin:left}
body[data-story="litos"] #production .two{grid-template-columns:1.3fr .7fr;align-items:center;gap:5vw}
body[data-story="litos"] #outcome{overflow:hidden}.result{grid-template-columns:1.15fr 1fr}.result .big{font-size:clamp(50px,6.5vw,94px)}
body[data-story="litos"] #outcome figure{transform:translateY(calc((var(--section-progress,.5) - .5)*-75px))}
@media(max-width:900px){.litos-hero{min-height:auto;gap:3vw}.litos-hero h1{font-size:16vw}.litos-hero p{font-size:18px}.litos-register b{font-size:26px}.form-journey .picture{height:350px}}
@media(max-width:760px){.litos-hero{grid-template-columns:1fr;padding:35px 0 45px;gap:35px}.litos-hero>div:first-child{padding-bottom:115px}.litos-hero h1{font-size:23vw;margin-top:38px}.litos-hero h1 small{font-size:9px}.litos-hero p{max-width:290px;margin-top:26px}.litos-hero>figure{width:76%;max-width:360px;margin:0 0 0 auto;padding:12px;transform:rotate(1deg)}.print-ghost{width:100px;height:165px;right:0;bottom:14px}.litos-register{gap:20px}.litos-register b{font-size:26px}.museum-line{gap:12px;font-size:8px}.museum-line span{flex:1 0 40%}body[data-story="litos"] .section{padding-block:72px}body[data-story="litos"] h2{font-size:43px}body[data-story="litos"] .intro{gap:28px}body[data-story="litos"] #brief>figure{margin-top:35px}body[data-story="litos"] #brief>figure:before{font-size:8px;left:12px;top:12px}body[data-story="litos"] #origin figure{width:100%;padding:10px}.form-journey{grid-template-columns:1fr;gap:36px;margin-top:36px}.form-journey figure:nth-child(n){padding-top:0;transform:none}.form-journey .picture{height:390px}.form-journey figcaption{margin-top:14px}body[data-story="litos"] #evolution{padding-bottom:72px}body[data-story="litos"] .feature-split{grid-template-columns:1fr;gap:38px}.specimen{padding:12px}.specimen-head{font-size:8px}.specimen-controls label{font-size:9px}body[data-story="litos"] #production .two{grid-template-columns:1fr}.result{grid-template-columns:1fr}.result .big{font-size:49px}body[data-story="litos"] #outcome figure{transform:none}}
:is(.reduce-motion,.experience-reduced) .litos-letter,:is(.reduce-motion,.experience-reduced) .print-ghost,:is(.reduce-motion,.experience-reduced) .print-ghost:after,:is(.reduce-motion,.experience-reduced) .form-journey figure,:is(.reduce-motion,.experience-reduced) .litos-hero>figure,:is(.reduce-motion,.experience-reduced) body[data-story="litos"] #brief img,:is(.reduce-motion,.experience-reduced) body[data-story="litos"] #outcome figure,:is(.reduce-motion,.experience-reduced) body[data-story="litos"] #production:before{transform:none!important}
@media(prefers-reduced-motion:reduce){html:not(.motion-user-on) .litos-letter,html:not(.motion-user-on) .print-ghost,html:not(.motion-user-on) .print-ghost:after,html:not(.motion-user-on) .form-journey figure,html:not(.motion-user-on) .litos-hero>figure,html:not(.motion-user-on) body[data-story="litos"] #brief img,html:not(.motion-user-on) body[data-story="litos"] #outcome figure,html:not(.motion-user-on) body[data-story="litos"] #production:before{transform:none!important}}