/* The product story shares the homepage's stage, without changing the purchase page. */
.story-page{--page:#eff4f8;--window:#dce7ef;--text:#202329;--secondary:#526779;--rule:#c6d1da;--sweep:cubic-bezier(.2,.8,.16,1);color:var(--text);background:var(--page)}
.story-page .product-header,.story-page .site-footer{background:var(--page);color:var(--text)}
.story-page .product-header{border-bottom:0;backdrop-filter:none}
.story-page main>section{background:var(--page)}
.story-page main h2{font-size:clamp(38px,4.8vw,76px);line-height:1.18;letter-spacing:-.045em;font-weight:500;text-wrap:balance}
.story-page .header-actions{display:flex;align-items:center;gap:22px}






.story-page a:focus-visible,.story-page button:focus-visible{outline-color:#825080}

/* Entrance, scroll, pointer and float transforms are intentionally separate. */
.story-page .detail-hero{height:calc(100svh - var(--header));min-height:680px;max-height:1250px;position:relative;isolation:isolate;overflow:hidden}
.story-page .detail-hero:before{content:'';position:absolute;inset:-30% -10%;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,#d5e6f0,transparent 66%)}
.story-page .detail-atmosphere{position:absolute;inset:0;z-index:-2;opacity:.13;overflow:hidden;pointer-events:none;mask-image:linear-gradient(transparent,#000 30%,#000 65%,transparent)}
.story-page .detail-atmosphere img{position:absolute;inset:-18%;width:136%;height:136%;max-width:none;object-fit:cover;filter:blur(3px);transform:translate3d(var(--ambient-x,0px),var(--ambient-y,0px),0) scale(1.04)}
.story-page .detail-word-scroll{position:absolute;top:13%;left:0;right:0;z-index:-1;transform:translate3d(0,var(--word-scroll,0px),0);pointer-events:none}
.story-page .detail-word-pointer{transform:translate3d(var(--word-x,0px),var(--word-y,0px),0)}
.story-page .detail-word{font-size:clamp(115px,16.4vw,300px);font-weight:800;letter-spacing:-.08em;line-height:1.1;color:#344c68;opacity:.84;text-align:center;white-space:nowrap;user-select:none}
.story-page .hero-mount{position:absolute;top:12%;bottom:23%;left:18%;right:18%;display:flex;align-items:center;justify-content:center}
.story-page .detail-entry-motion,.story-page .detail-scroll-motion,.story-page .detail-pointer-motion,.story-page .detail-float{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.story-page .detail-scroll-motion{transform:translate3d(0,var(--product-scroll-y,0px),0) scale(var(--product-scroll-scale,1));transform-origin:50% 65%}
.story-page .detail-pointer-motion{transform:perspective(1400px) translate3d(var(--product-x,0px),var(--product-y,0px),0) rotateX(var(--product-rx,0deg)) rotateY(var(--product-ry,0deg)) rotate(-8deg)}
.story-page .hero-image-open{width:100%;height:100%;padding:0}
.story-page .hero-image-open img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(8px 30px 24px #344c6830);user-select:none;-webkit-user-drag:none}
.detail-motion .story-page .detail-float{animation:butterfly-float 8s ease-in-out infinite both}
.story-page .detail-hero:not(.in-view) .detail-float,.story-page .detail-hero.is-entering .detail-float{animation-play-state:paused}
.detail-page-hidden .story-page *,.story-page.modal-open *{animation-play-state:paused!important}
@keyframes butterfly-float{0%,100%{transform:translate3d(-6px,6px,0) rotate(-1deg)}50%{transform:translate3d(9px,-18px,0) rotate(1.5deg)}}
.story-page .detail-hero-copy{position:absolute;left:7vw;bottom:7%;display:flex;align-items:center;gap:26px}
.story-page .detail-hero h1{font-size:clamp(70px,6.8vw,112px);font-weight:500;line-height:1;letter-spacing:-.06em}
.story-page .product-kind{font-size:11px;color:var(--secondary)}
.story-page .hero-intro{font-size:clamp(13px,1.2vw,17px);line-height:1.8;margin-top:12px;letter-spacing:-.015em}
.story-page .detail-hero-actions{position:absolute;right:7vw;bottom:7%;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:12px}
.story-page .explore-link{display:flex;align-items:center;gap:34px;min-height:44px}
.story-page .explore-link svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;transition:translate .4s var(--ease)}
.story-page .explore-link:hover svg{translate:0 5px}
.story-page .hero-buy-link{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:5px;color:var(--secondary);font-size:11px}
.story-page .is-entering .detail-entry-motion{animation:butterfly-arrive 1.5s var(--sweep) both}
.story-page .is-entering .detail-word{animation:butterfly-type 1.35s .08s var(--sweep) both}
.story-page .is-entering .detail-hero-copy,.story-page .is-entering .detail-hero-actions{animation:butterfly-caption 1s .3s var(--ease) both}
@keyframes butterfly-arrive{from{transform:translate3d(24vw,22vh,0) rotate(22deg) scale(.48);opacity:.15}to{transform:none;opacity:1}}
@keyframes butterfly-type{from{clip-path:inset(100% 0 0);transform:translate3d(-14vw,55%,0) rotate(-4deg)}to{clip-path:inset(0);transform:none}}
@keyframes butterfly-caption{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.story-page .detail-index{display:grid;grid-template-columns:repeat(4,1fr);max-width:1500px;margin:0 auto;padding:0 7vw;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.story-page .detail-index a{padding:24px 20px 24px 0;min-height:90px;position:relative}
.story-page .detail-index a:not(:first-child){padding-left:28px}
.story-page .detail-index a:not(:first-child):before{content:'';position:absolute;left:0;top:26px;bottom:26px;width:1px;background:var(--rule)}
.story-page .detail-index span{font-size:13px;display:block}.story-page .detail-index small{font-size:10px;color:var(--secondary);display:block;margin-top:8px}
.story-page .detail-index a:hover span,.story-page .detail-index a[aria-current] span,.story-page .detail-inline-link:hover{text-decoration:underline;text-underline-offset:5px}

/* Large real photographs, not a stack of identical cards. */
.story-page .detail-section{max-width:1700px;margin:auto;padding:110px 7vw;scroll-margin-top:20px}
.story-page .inspection-stage{display:block}
.story-page .detail-kicker{font-size:11px;font-weight:550;margin-bottom:22px;color:var(--secondary)}
.story-page .detail-copy>p:not(.detail-kicker){max-width:32ch;font-size:14px;line-height:1.95;color:var(--secondary);margin-top:24px}
.story-page .surface-section .detail-copy{display:grid;grid-template-columns:1.1fr 1fr;column-gap:12vw;align-items:start;margin-bottom:48px}
.story-page .surface-section .detail-kicker{grid-column:1/-1}
.story-page .surface-section h2{grid-column:1;grid-row:2/5}
.story-page .surface-section .detail-copy>p:not(.detail-kicker){grid-column:2;margin-top:0;max-width:38ch}
.story-page .view-switch{display:inline-flex;justify-self:start;gap:5px;margin-top:25px;padding:4px;border:1px solid var(--rule);border-radius:28px}
.story-page .surface-section .view-switch{grid-column:2}
.story-page .view-switch button{min-height:40px;padding:0 18px;font-size:11px;border-radius:22px;transition:background .25s,color .25s}
.story-page .view-switch button[aria-pressed=true]{background:var(--text);color:var(--page)}
.story-page .view-switch button:disabled{cursor:default}
.story-page .detail-copy .observation-note{font-size:10px!important;margin-top:14px!important;min-height:20px}
.story-page .observation-figure{min-width:0}
.story-page .photo-reveal{transform-origin:50% 60%}
.detail-motion .story-page .photo-reveal{transform:translate3d(var(--reveal-x,0px),var(--reveal-y,0px),0) rotate(var(--reveal-turn,0deg)) scale(var(--reveal-scale,1));clip-path:inset(0 var(--reveal-inset,0%) 0 var(--reveal-inset,0%))}
.story-page .observation-window{position:relative;overflow:hidden;background:var(--window);isolation:isolate}
.story-page .surface-window{aspect-ratio:1.9}
.story-page .observation-layer{position:relative;width:100%;height:100%;transform:scale(var(--focus-scale,1));transform-origin:65% 40%;transition:transform .95s var(--sweep)}
.story-page .observation-layer>img{width:100%;height:100%;object-fit:cover;object-position:center}
.story-page [data-observe].is-close{--focus-scale:1.5}.story-page .base-section.is-close{--focus-scale:1.58}
.story-page .base-window .observation-layer{transform-origin:54% 54%}
.story-page .observation-figure figcaption,.story-page .edge-observatory figcaption{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:10px;color:var(--secondary);min-height:50px;padding-top:8px}
.story-page .observation-figure figcaption button,.story-page .edge-observatory figcaption button{min-height:44px;padding:0 0 0 12px;font-size:11px}

.story-page .edge-story{position:relative;scroll-margin-top:20px}
.story-page .edge-stage{max-width:1700px;margin:auto;padding:50px 7vw 110px;display:grid;grid-template-columns:.7fr 1.4fr;column-gap:5vw;row-gap:100px;align-items:center}
.story-page .edge-copy-stack,.story-page .edge-observatory{display:contents}
.story-page .edge-copy{grid-row:1;grid-column:1}.story-page .profile-copy{grid-row:2;grid-column:1;scroll-margin-top:120px}
.story-page .edge-photo{grid-row:1;grid-column:2}.story-page .profile-photo{grid-row:2;grid-column:2}
.story-page .edge-photo-window,.story-page .profile-photo-window{aspect-ratio:3/2;position:relative;overflow:hidden;background:var(--window)}
.story-page .edge-image-layer,.story-page .profile-image-layer{width:100%;height:100%;position:relative;transform-origin:40% 60%}
.story-page .edge-image-layer>img,.story-page .profile-image-layer>img{width:100%;height:100%;object-fit:contain}
.story-page .profile-image-layer{transform-origin:63% 44%}.story-page .profile-photo-window{background:#080a09}
.story-page .photo-annotation{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:#fff;stroke-width:3;filter:drop-shadow(0 1px 3px #20232970)}
.story-page .photo-annotation circle{fill:#eff4f8;stroke:#526779;stroke-width:3}
.story-page .annotation-label{position:absolute;padding:8px 12px;background:#eff4f8f2;color:var(--text);font-size:10px;line-height:1.4;pointer-events:none}
.story-page .corner-label{left:5%;bottom:12%}.story-page .profile-label{top:17%;right:6%}
.story-page .detail-copy .detail-footnote{font-size:11px!important;line-height:1.9!important;margin-top:24px!important}
.story-page .detail-inline-link{display:inline-flex;gap:22px;align-items:center;min-height:44px;margin-top:24px;font-size:12px}
.story-page .edge-controls{display:none}
.edge-pinned .story-page .edge-story{height:235svh}
.edge-pinned .story-page .edge-stage{position:sticky;top:var(--header);height:calc(100svh - var(--header));padding:45px 7vw 75px;row-gap:0;overflow:clip}
.edge-pinned .story-page .edge-copy-stack{grid-column:1;grid-row:1;display:grid;align-items:center;z-index:3}
.edge-pinned .story-page .edge-copy-stack>.detail-copy{grid-column:1;grid-row:1;min-width:0}
.edge-pinned .story-page .profile-copy{opacity:0;visibility:hidden}
.edge-pinned .story-page .edge-observatory{display:block;position:relative;grid-column:2;grid-row:1;aspect-ratio:3/2;min-width:0}
.edge-pinned .story-page .edge-observatory>figure{position:absolute;inset:0;margin:0}
.edge-pinned .story-page .edge-photo{z-index:1}
.edge-pinned .story-page .profile-photo{z-index:2;clip-path:inset(100% 0 0);visibility:hidden;background:var(--page)}
.edge-pinned .story-page .edge-controls{display:flex;align-items:center;gap:18px;position:absolute;bottom:25px;right:7vw;font-size:11px}
.story-page .edge-controls button{min-height:44px;padding:0 8px;color:var(--secondary)}
.story-page .edge-controls button[aria-pressed=true]{color:var(--text);text-decoration:underline;text-underline-offset:7px}
.story-page .edge-controls>span{width:70px;height:1px;background:var(--rule)}
.story-page .base-section{display:grid;grid-template-columns:1.45fr .7fr;gap:8vw;align-items:center;padding-top:90px;padding-bottom:140px}
.story-page .base-section .detail-copy{grid-column:2;grid-row:1}
.story-page .base-section .observation-figure{grid-column:1;grid-row:1}
.story-page .base-window{aspect-ratio:1.1}

.story-page .in-use{max-width:1700px;margin:auto;padding:15px 7vw 130px;overflow:clip}
.story-page .use-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:55px}
.story-page .use-heading h2{font-size:clamp(44px,6vw,90px)}
.story-page .use-heading p{font-size:12px;line-height:1.8;color:var(--secondary)}
.story-page .use-photos{display:grid;grid-template-columns:1.5fr .8fr;gap:7vw;align-items:start}
.story-page .use-photos figure:last-child{margin-top:150px}
.story-page .use-photos .image-open{width:100%;overflow:hidden}
.story-page .use-photos img{width:100%;height:auto}
.story-page .use-photos figcaption{font-size:12px;padding-top:18px;display:flex;justify-content:space-between;gap:20px;line-height:1.8}
.story-page .use-photos small{font-size:10px;color:var(--secondary)}
.story-page .detail-purchase{max-width:1500px;margin:auto;padding:75px 7vw 110px;display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center;border-top:1px solid var(--rule);overflow:clip}
.story-page .detail-purchase>img{width:100%;height:380px;object-fit:contain;filter:drop-shadow(8px 22px 18px #344c6820);transform:rotate(-8deg)}
.detail-motion .story-page .detail-purchase>img{transform:translate3d(var(--return-x,0px),var(--return-y,0px),0) rotate(var(--return-turn,-8deg)) scale(var(--return-scale,1))}
.story-page .detail-purchase h2{font-size:clamp(30px,3.6vw,55px)}
.story-page .detail-purchase p{font-size:13px;line-height:1.9;color:var(--secondary);margin-top:22px}
.story-page .detail-purchase .closing-actions{margin-top:30px}
.story-page .detail-purchase small{display:block;font-size:10px;color:var(--secondary);line-height:1.8;margin-top:22px}
.story-page .site-footer{border-top:1px solid var(--rule)}

@media(min-width:1800px){.story-page .detail-section,.story-page .edge-stage,.story-page .in-use{padding-left:100px;padding-right:100px}}
@media(max-width:1050px){
  .story-page .header-actions{gap:14px}
  .story-page .detail-hero{min-height:670px}.story-page .hero-mount{left:12%;right:12%;top:18%;bottom:28%}.story-page .detail-word-scroll{top:20%}
  .story-page .detail-hero-copy{left:5vw;gap:18px}.story-page .detail-hero-actions{right:5vw}.story-page .hero-intro{font-size:13px}
  .story-page .detail-section{padding:85px 5vw}.story-page .surface-section .detail-copy{column-gap:7vw}.story-page .detail-copy>p:not(.detail-kicker){font-size:13px}
  .story-page .edge-stage,.edge-pinned .story-page .edge-stage{padding-left:5vw;padding-right:5vw;column-gap:4vw;grid-template-columns:.8fr 1.3fr}
  .story-page .edge-stage h2{font-size:clamp(32px,4.4vw,54px)}
  .story-page .base-section{gap:5vw}.story-page .view-switch button{padding:0 13px;font-size:11px}
  .story-page .in-use{padding-left:5vw;padding-right:5vw}.story-page .use-photos{gap:5vw}.story-page .use-photos figure:last-child{margin-top:100px}
  .story-page .use-photos figcaption{display:block}.story-page .use-photos small{display:block;margin-top:5px}
  .story-page .detail-purchase>img{height:300px}
}
@media(max-width:700px){
  .story-page .product-header{padding:0 16px}.story-page .brand,.story-page .brand img{width:64px;height:52px}.story-page .product-nav{font-size:10px;gap:12px}
  .story-page .header-actions{gap:8px}.story-page .cart-trigger{font-size:10px;padding:0 8px;gap:4px;min-height:44px}.story-page .cart-trigger span{min-width:10px}

  .story-page .detail-hero{min-height:640px;max-height:1000px}.story-page .detail-word-scroll{top:21%}.story-page .detail-word{font-size:21vw}
  .story-page .hero-mount{left:7%;right:7%;top:23%;bottom:29%}.story-page .detail-hero-copy{left:24px;bottom:12%;gap:18px}.story-page .detail-hero h1{font-size:66px}
  .story-page .product-kind{font-size:10px}.story-page .hero-intro{font-size:12px;margin-top:8px}
  .story-page .detail-hero-actions{left:24px;right:24px;bottom:3%;flex-direction:row;align-items:center;justify-content:space-between;font-size:11px}.story-page .explore-link{gap:14px}.story-page .explore-link svg{width:20px}.story-page .hero-buy-link{font-size:11px}
  .story-page .detail-index{grid-template-columns:1fr 1fr;padding:0 24px}.story-page .detail-index a{padding:18px 10px 18px 0;min-height:80px}.story-page .detail-index span{font-size:12px}.story-page .detail-index small{font-size:10px}
  .story-page .detail-index a:not(:first-child){padding-left:20px}.story-page .detail-index a:nth-child(3){padding-left:0;border-top:1px solid var(--rule)}.story-page .detail-index a:nth-child(4){border-top:1px solid var(--rule)}.story-page .detail-index a:nth-child(3):before{display:none}
  .story-page .detail-section{padding:70px 24px}.story-page main h2{font-size:40px}.story-page .detail-kicker{font-size:10px;margin-bottom:16px}
  .story-page .surface-section .detail-copy{display:block;margin-bottom:30px}.story-page .surface-section .detail-copy>p:not(.detail-kicker){margin-top:22px;max-width:36ch}
  .story-page .detail-copy>p:not(.detail-kicker){font-size:13px;line-height:1.9;max-width:36ch;margin-top:20px}.story-page .view-switch{margin-top:22px}.story-page .view-switch button{min-height:40px;padding:0 17px}
  .story-page .surface-window{aspect-ratio:1.12}.story-page .observation-layer{transform-origin:60% 42%}
  .story-page .edge-stage{padding:15px 24px 65px;display:flex;flex-direction:column;gap:30px;align-items:stretch}.story-page .edge-copy-stack,.story-page .edge-observatory{display:contents}
  .story-page .edge-copy{order:0}.story-page .edge-photo{order:1}.story-page .profile-copy{order:2;margin-top:40px}.story-page .profile-photo{order:3}
  .story-page .edge-stage h2{font-size:38px}.story-page .detail-inline-link{margin-top:18px}.story-page .detail-copy .detail-footnote{font-size:10px!important;margin-top:16px!important}
  .edge-pinned .story-page .edge-story{height:225svh}.edge-pinned .story-page .edge-stage{height:calc(100svh - var(--header));padding:25px 24px 65px;display:flex;flex-direction:column;justify-content:center;gap:25px}
  .edge-pinned .story-page .edge-copy-stack{display:grid;width:100%;flex-shrink:0}.edge-pinned .story-page .edge-copy-stack>.detail-copy{margin:0}.edge-pinned .story-page .profile-copy{order:0}
  .edge-pinned .story-page .edge-observatory{display:block;aspect-ratio:3/2;width:100%;flex-shrink:0}.edge-pinned .story-page .edge-controls{right:24px;bottom:10px}
  .story-page .annotation-label{font-size:9px;padding:6px 9px}.story-page .profile-label{right:4%;top:12%}
  .story-page .base-section{display:flex;flex-direction:column;align-items:stretch;gap:32px;padding-top:50px}.story-page .base-window{aspect-ratio:1.15}
  .story-page .observation-figure figcaption,.story-page .edge-observatory figcaption{font-size:9px;padding-top:4px}
  .story-page .in-use{padding:15px 24px 75px}.story-page .use-heading{display:block;margin-bottom:32px}.story-page .use-heading h2{font-size:46px}.story-page .use-heading p{font-size:11px;margin-top:16px}
  .story-page .use-photos{grid-template-columns:1fr;gap:34px}.story-page .use-photos figure:last-child{margin-top:0;width:73%;justify-self:end}.story-page .use-photos figcaption{font-size:11px;padding-top:12px}.story-page .use-photos small{font-size:9px}
  .story-page .detail-purchase{padding:50px 24px 70px;grid-template-columns:1fr;gap:26px;text-align:center}.story-page .detail-purchase>img{height:260px}.story-page .detail-purchase h2{font-size:34px}.story-page .detail-purchase .closing-actions{justify-content:center}.story-page .detail-purchase small{font-size:9px}
}
.detail-static{scroll-behavior:auto}
html:not(.detail-motion) .story-page .detail-scroll-motion,html:not(.detail-motion) .story-page .detail-word-scroll,html:not(.detail-motion) .story-page .detail-word-pointer{transform:none}
html:not(.detail-motion) .story-page .detail-pointer-motion{transform:rotate(-8deg)}
html:not(.detail-motion) .story-page .observation-layer{transition:none}
@media(prefers-reduced-motion:reduce){.story-page *,.story-page *:before,.story-page *:after{animation:none!important;transition:none!important}.story-page .detail-pointer-motion,.story-page .detail-purchase>img{transform:none!important}.story-page .detail-atmosphere img{transform:none}}

/* Primary purchase action shared by the three product stories. */
.story-page .detail-hero-actions .hero-buy-button{display:inline-flex;align-items:center;justify-content:center;min-width:176px;min-height:56px;padding:0 30px;border:1px solid #151617;border-radius:12px;background:#151617;color:#fff;font-size:15px;font-weight:600;line-height:1.4;text-decoration:none;white-space:nowrap;transition:background-color .18s ease,border-color .18s ease}
.story-page .detail-hero-actions .hero-buy-button:hover{background:#2a2c2e;border-color:#2a2c2e}
.story-page .detail-hero-actions .hero-buy-button:focus-visible{outline:3px solid #a15198;outline-offset:4px}
@media(max-width:700px){.story-page .detail-hero-actions{justify-content:flex-end}.story-page .detail-hero-actions .hero-buy-button{min-height:52px;width:100%;max-width:100%;font-size:15px}}

@media(max-width:700px){.story-page .detail-hero{height:calc(100svh - 120px)}}
@media(max-width:700px){.story-page{--header:120px}}