.origin-story{height:clamp(1100px,200svh,1900px);background:#d9ded8;position:relative}
.feature-media>img{height:auto}
.story-stage{position:sticky;top:84px;height:calc(100svh - 142px);min-height:570px;max-height:780px;background:#d9ded8;overflow:hidden;--photo-opacity:0;--material-opacity:1;--material-scale:1.035;--annotation-opacity:0;--story-progress:0}
.story-stage .hero-image,.material-image{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center;z-index:0}
.story-stage .hero-image{opacity:var(--photo-opacity)}
.material-image{opacity:var(--material-opacity);transform:scale(var(--material-scale));transform-origin:70% 65%}
.story-stage .hero-copy{z-index:3;top:21%;max-width:405px}
.story-stage h1{font-size:60px}
.story-stage .hero-line{font-size:23px}
.story-stage .hero-description{min-height:58px;color:#38483d;font-size:14px}
.qing-palette{display:flex;align-items:center;gap:5px;margin-top:22px}
.palette-swatch{width:30px;height:7px;display:block}
.palette-swatch.glaze{background:#b6c6ad}.palette-swatch.woven{background:#7c927e}.palette-swatch.paper{background:#3b5545}
.palette-title{font-size:10px;color:#38483d;margin-left:9px}
.story-stage .action{margin-top:24px}
.material-annotations{position:absolute;z-index:2;left:51%;right:6%;bottom:19%;display:flex;justify-content:space-between;gap:18px;opacity:var(--annotation-opacity);pointer-events:none}
.material-annotations span{color:white;font-size:11px;text-shadow:0 1px 4px #1d3528;position:relative;padding-left:12px}
.material-annotations span::before{content:"";position:absolute;left:0;top:7px;width:4px;height:4px;background:white;border-radius:50%}
.story-navigation{position:absolute;z-index:4;bottom:30px;left:8%;right:8%;display:flex;gap:42px;max-width:540px}
.story-navigation button{display:flex;align-items:center;gap:10px;border:0;border-bottom:1px solid transparent;background:transparent;padding:8px 0;font-size:12px;white-space:nowrap;color:#384b3c;border-radius:0}
.story-navigation button[aria-pressed=true]{color:#14291b;border-bottom-color:#243d30;font-weight:600}
.story-navigation button span{font-size:9px}
.story-progress{position:absolute;bottom:0;height:2px;background:#dce1da;left:0;right:0;z-index:4}
.story-progress>span{display:block;height:100%;background:#304b3e;width:calc(var(--story-progress)*100%)}
.story-stage .image-note{z-index:3;bottom:42px;color:#263a2d;background:#ffffffcf;padding:3px 6px;font-size:9px}
.color-study{padding-top:90px;padding-bottom:75px}
.material-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:42px}
.material-grid figure{margin:0;min-width:0}
.material-crop{height:300px;position:relative;overflow:hidden;background:#d9ded8}
.material-crop img{position:absolute;max-width:none;width:540%;height:auto;top:50%;transform:translateY(-50%)}
.glaze-crop img{left:-235%;top:50%;transform:translateY(-66%)}
.woven-crop img{left:-360%;top:50%;transform:translateY(-42%)}
.paper-crop img{left:-420%;top:50%;transform:translateY(-66%)}
.material-grid figcaption{padding-top:20px}
.material-grid figcaption>span{font-size:10px;color:var(--muted)}
.material-grid h3{font-size:23px;margin:10px 0}
.material-grid p{font-size:13px;color:var(--muted)}
@media(min-width:1700px){.story-stage .hero-copy{top:24%}}
@media(max-width:1100px){.story-stage .hero-copy{left:6%;max-width:315px;top:19%}.story-stage h1{font-size:50px}.story-stage .hero-line{font-size:19px}.story-navigation{left:6%;gap:24px}.story-stage .image-note{bottom:85px;right:24px}.material-crop{height:230px}.material-crop img{width:600%}.glaze-crop img{left:-260%}.woven-crop img{left:-400%}.paper-crop img{left:-475%}}
@media(max-width:700px){.origin-story{height:200svh}.story-stage{top:68px;height:calc(100svh - 106px);min-height:630px;max-height:900px;background:#e0e3de}.story-stage .hero-copy{left:25px;right:25px;top:26px;max-width:none}.story-stage h1{font-size:40px}.story-stage .eyebrow{margin-bottom:15px;font-size:10px}.story-stage .hero-line{font-size:18px}.story-stage .hero-description{font-size:12px;margin-top:12px;min-height:38px}.story-stage .hero-description br{display:initial}.qing-palette{margin-top:15px}.story-stage .action{margin-top:17px;min-height:40px}.story-stage .hero-image,.material-image{height:285px;width:100%;inset:auto 0 84px;object-fit:cover;object-position:80% center}.material-image{transform:none}.material-annotations{left:20px;right:20px;bottom:117px;gap:8px}.material-annotations span{font-size:10px}.story-stage .image-note{font-size:8px;bottom:75px;right:16px;padding:2px 4px}.story-navigation{left:25px;right:25px;bottom:20px;justify-content:space-between;max-width:none;gap:8px}.story-navigation button{font-size:10px;gap:5px;padding:7px 6px;background:transparent}.story-navigation button[aria-pressed=true]{background:transparent}.story-navigation button span{font-size:8px}.color-study{padding:55px 22px}.material-grid{grid-template-columns:1fr;gap:32px;margin-top:28px}.material-crop{height:260px}.material-crop img{width:450%}.glaze-crop img{left:-190%;top:10%}.woven-crop img{left:-285%;top:0}.paper-crop img{left:-350%;top:46%}.material-grid figcaption{padding-top:14px}.material-grid h3{font-size:22px;margin:8px 0}.material-grid p{font-size:12px}}
@media(max-height:740px) and (max-width:700px){.story-stage{min-height:610px}.story-stage .hero-copy{top:20px}.story-stage .hero-description{margin-top:7px}.story-stage .eyebrow{margin-bottom:10px}.story-stage .hero-image,.material-image{height:250px}.qing-palette{margin-top:10px}.story-stage .action{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.origin-story{height:auto}.story-stage{position:relative;top:0}.story-navigation{display:none}.story-stage .image-note{bottom:26px}.material-image{transform:none}}
@media(max-width:700px){.glaze-crop img,.woven-crop img,.paper-crop img{top:50%}}