/* Purple Sector / collection study 001. Native scroll, compositor transforms. */
:root { --paper:#e8e4dd; --ink:#161419; }
.collection-root { scroll-padding-top:0; }
.desktop-nav { gap:28px; }
.helmet-sculpture { transition:none; }
.helmet-trigger { perspective:850px; }
.helmet-experience.is-active .helmet-sculpture { will-change:transform; }
.helmet-sculpture::after { content:''; position:absolute; inset:8% 12%; pointer-events:none; border-radius:45%; background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,40%),#d8b5ff17,transparent 57%); mix-blend-mode:screen; transform:translateZ(24px); }
.helmet-base { transform:translateZ(1px); }
.helmet-color { transform:translateZ(2px); }
.store-home .hero-about-link { display:inline-flex; padding:12px 0; border-bottom:1px solid #9b6dff80; color:#c5a4ff; }
.collection-intro { padding:110px 5.5% 90px; background:var(--bg); }
.collection-intro h2 { font-size:clamp(40px,6.1vw,100px); margin:48px 0 40px; line-height:1.02; }
.collection-intro h2 span { color:#7d7586; }
.intro-bottom { display:flex; justify-content:space-between; align-items:end; gap:35px; }
.intro-bottom p { max-width:400px; font-size:14px; color:#b2abb9; line-height:1.8; }
.intro-bottom .text-link { white-space:nowrap; }
.garment-story { height:240svh; background:var(--paper); color:var(--ink); position:relative; }
.garment-sticky { height:calc(100svh - 92px); min-height:560px; position:sticky; top:92px; overflow:hidden; isolation:isolate; }
.story-top,.product-top { position:absolute; top:28px; left:5.5%; right:5.5%; display:flex; justify-content:space-between; z-index:4; }
.garment-backtype { position:absolute; top:14%; left:5.5%; font-size:clamp(110px,20vw,340px); line-height:.77; color:#c9c3c6; letter-spacing:-.04em; transform:translate3d(calc(var(--scene,0) * -7vw),0,0); }
.garment-backtype span { display:block; }
.garment-backtype span:last-child { margin-left:16vw; }
.garment-orbit { position:absolute; width:55vw; height:55vw; max-width:760px; max-height:760px; border:1px solid #8f819635; border-radius:50%; left:25%; top:-18%; transform:rotateX(55deg) rotate(-30deg); }
.story-garment { position:absolute; width:min(60vw,88svh,780px); height:min(60vw,88svh,780px); left:50%; top:47%; transform:translate3d(calc(-35% - var(--scene,0) * 18%),calc(-45% + var(--scene,0) * 4%),0) rotate(calc(-14deg + var(--scene,0) * 18deg)) scale(calc(.77 + var(--scene,0) * .18)); }
.story-garment img { width:100%; height:100%; object-fit:contain; }
.story-caption { position:absolute; left:5.5%; bottom:18%; max-width:270px; opacity:calc(1 - var(--scene,0) * 1.6); transform:translate3d(0,calc(var(--scene,0) * -45px),0); }
.story-caption p { font-family:var(--display); font-size:clamp(25px,3vw,45px); line-height:.98; margin:15px 0 18px; }
.story-caption-small { font-size:12px; color:#645d67; }
.story-close { position:absolute; right:5.5%; bottom:18%; display:flex; flex-direction:column; align-items:start; gap:24px; opacity:clamp(0,calc((var(--scene,0) - .25) * 2.5),1); transform:translate3d(0,calc(24px - var(--scene,0) * 24px),0); z-index:5; }
.pill-link { border:1px solid currentColor; background:transparent; padding:17px 23px; border-radius:60px; display:inline-flex; gap:40px; align-items:center; justify-content:space-between; font-size:12px; line-height:1.3; font-weight:600; transition:background .25s,color .25s; }
.pill-link:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.pill-link > span { font-size:22px; line-height:1; }
.story-disclaimer { position:absolute; bottom:25px; left:5.5%; color:#69626e; font-size:8px; }
.scene-track { position:absolute; bottom:0; width:100%; height:3px; background:#77777722; z-index:5; }
.scene-track > span { display:block; width:100%; height:100%; background:var(--electric); transform:scaleX(var(--scene,0)); transform-origin:left; }
.lineup { background:#141217; padding-top:110px; padding-bottom:100px; }
.lineup-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin:60px 0 65px; }
.lineup-heading h2 { font-size:clamp(60px,9vw,145px); }
.lineup-heading > p { font-size:13px; line-height:1.8; color:#b3aaba; padding-bottom:8px; }
.lineup-row { display:grid; grid-template-columns:55px 1fr 180px 180px 40px; align-items:center; min-height:155px; border-top:1px solid #ffffff22; position:relative; transition:color .3s,padding .3s; }
.lineup-row:last-child { border-bottom:1px solid #ffffff22; }
.lineup-row > .micro { color:#b6aebf; }
.lineup-name { font:600 clamp(32px,5vw,76px)/1 var(--display); letter-spacing:-.02em; }
.lineup-row img { width:155px; height:155px; object-fit:contain; transform:rotate(-8deg) scale(.9); transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.lineup-row:hover { color:#c7a6ff; padding-left:10px; }
.lineup-row:hover img { transform:rotate(6deg) scale(1.18); }
.lineup-arrow { font-size:36px; text-align:right; }
.concept-note { color:#9c92a7; margin-top:30px; font-size:8px; }
.brand-manifesto { position:relative; overflow:hidden; padding:80px 5.5% 70px; background:#6b36c7; }
.brand-manifesto h2 { margin:50px 0 65px; font-size:clamp(70px,13vw,210px); line-height:.86; position:relative; }
.brand-manifesto h2 em { color:#c6abff; }
.manifesto-symbol { position:absolute; font:600 68vw/1 var(--display); color:#a877ed22; right:-5%; top:-7%; pointer-events:none; }
.manifesto-bottom { display:flex; align-items:end; justify-content:space-between; gap:30px; position:relative; }
.manifesto-bottom p { font-size:13px; line-height:1.8; }
.manifesto-bottom .text-link { color:white; }
.launch-note { display:grid; grid-template-columns:1fr 1.8fr; gap:30px 60px; padding:90px 5.5%; }
.launch-note h2 { font-size:clamp(36px,5.4vw,74px); grid-column:2; grid-row:1 / 3; }
.launch-note > p:not(.micro) { color:#a9a0b1; font-size:13px; line-height:1.9; max-width:340px; }
.launch-note > a { grid-column:2; justify-self:start; }
/* Collection: an editorial sequence, with an accessible detail room. */
.collection-cover { padding:46px 5.5% 55px; min-height:calc(88svh - 92px); background:#121015; overflow:hidden; }
.collection-cover-title { position:relative; margin-top:60px; }
.collection-cover h1 { font-size:clamp(90px,16.7vw,270px); line-height:.8; position:relative; z-index:1; }
.collection-cover h1 em { color:#aa7afa; }
.cover-symbol { font:600 36vw/.8 var(--display); position:absolute; right:-2%; top:-7%; color:#69449833; transform:rotate(-16deg); }
.collection-cover-bottom { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-top:55px; }
.collection-cover-bottom > p:first-child { font-size:13px; line-height:1.8; color:#c1b8ca; }
.collection-cover-bottom > p.micro { color:#a496af; font-size:8px; }
.collection-index { position:sticky; top:92px; display:flex; justify-content:center; gap:5vw; padding:19px 5.5%; background:#141217f5; border-block:1px solid #ffffff18; z-index:15; }
.collection-index a { font:10px/1.5 var(--mono); letter-spacing:.06em; transition:color .25s; }
.collection-index a span { color:#877593; margin-right:12px; }
.collection-index a[aria-current] { color:#c09aff; }
.product-chapter { height:185svh; position:relative; scroll-margin-top:146px; --chapter-bg:#ded9e2; --chapter-ink:#211d28; background:var(--chapter-bg); color:var(--chapter-ink); }
.after-dark { --chapter-bg:#242128; --chapter-ink:#e8e4dd; }
.velocity-violet { --chapter-bg:#b9a6ce; --chapter-ink:#291f34; }
.product-sticky { position:sticky; top:146px; height:calc(100svh - 146px); min-height:510px; overflow:hidden; isolation:isolate; }
.product-top { top:24px; opacity:.8; }
.product-ghost { position:absolute; top:20%; left:4.4%; font:600 clamp(120px,24vw,380px)/.77 var(--display); letter-spacing:-.04em; color:var(--chapter-ink); opacity:.08; transform:translate3d(calc(var(--scene,0) * -6vw),0,0); pointer-events:none; }
.after-dark .product-ghost { font-size:clamp(100px,19vw,310px); line-height:.8; }
.product-image-wrap { position:absolute; width:min(58vw,72svh,770px); height:min(58vw,72svh,770px); top:44%; left:57%; transform:translate3d(calc(-28% - var(--scene,0) * 20%),calc(-48% + var(--scene,0) * 3%),0) rotate(calc(-11deg + var(--scene,0) * 14deg)) scale(calc(.88 + var(--scene,0) * .12)); z-index:2; }
.product-image { width:100%; height:100%; object-fit:contain; }
.product-editorial { position:absolute; left:5.5%; top:26%; width:26%; z-index:3; transform:translate3d(0,calc(var(--scene,0) * -30px),0); }
.product-editorial > .micro { font-size:8px; opacity:.65; }
.product-editorial h2 { font-size:clamp(30px,4.2vw,68px); line-height:.98; margin:23px 0; }
.product-editorial > p { font-size:12px; line-height:1.8; max-width:240px; opacity:.7; }
.product-bottom { position:absolute; left:5.5%; right:5.5%; bottom:30px; display:flex; align-items:end; justify-content:space-between; gap:25px; z-index:5; }
.product-bottom h3 { font-size:clamp(28px,3.8vw,56px); margin-bottom:8px; }
.product-bottom > div > .micro { opacity:.6; font-size:8px; }
.product-scroll-cue { opacity:.6; font-size:8px; }
.after-dark .pill-link:hover { background:var(--paper); color:var(--ink); border-color:var(--paper); }
.collection-end { padding:100px 5.5% 110px; text-align:center; background:#131116; }
.collection-end h2 { font-size:clamp(70px,11vw,170px); margin:35px 0; line-height:.85; }
.collection-end > p:not(.micro) { margin:0 auto 30px; max-width:470px; color:#aea3bb; font-size:13px; line-height:1.9; }
.collection-end .text-link { display:inline-flex; }
/* Native dialog owns focus management, Escape, and an inert background. */
body.lab-open { overflow:hidden; }
.product-lab { width:min(1200px,96vw); max-width:none; max-height:94svh; padding:0; border:1px solid #ffffff24; background:#18151d; color:var(--text); overflow-y:auto; overscroll-behavior:contain; }
.product-lab::backdrop { background:#070609da; }
.product-lab[open] { animation:lab-enter .32s cubic-bezier(.2,.8,.2,1); }
@keyframes lab-enter { from { opacity:0; transform:translateY(20px) scale(.985); } to { opacity:1; transform:none; } }
.lab-header { display:flex; justify-content:space-between; align-items:center; padding:22px 30px; border-bottom:1px solid #ffffff18; gap:20px; }
.lab-header p { color:#aa9ab9; font-size:9px; }
.lab-close { border:0; background:none; padding:8px 0 8px 15px; font:10px/1 var(--mono); display:flex; align-items:center; gap:20px; }
.lab-close span { font:26px/.7 var(--body); }
.lab-layout { display:grid; grid-template-columns:1.3fr 1fr; }
.lab-art { padding:10px 24px 25px; background:#cbc6d0; color:#2a2332; display:flex; flex-direction:column; justify-content:center; }
.lab-image-box { width:100%; max-width:550px; aspect-ratio:1; position:relative; margin:0 auto; overflow:hidden; border-radius:2px; }
.lab-garment { width:100%; height:100%; object-fit:contain; pointer-events:none; user-select:none; transition:opacity .18s; }
.lab-image-box.is-loading .lab-garment { opacity:.4; }
.lab-image-box.lens-on { touch-action:none; cursor:crosshair; }
.detail-lens { display:none; position:absolute; width:190px; height:190px; border-radius:50%; border:2px solid #b98afe; box-shadow:0 6px 28px #160c242b; background-color:#cbc6d0; background-repeat:no-repeat; background-size:var(--zoom-size,1300px) var(--zoom-size,1300px); pointer-events:none; left:0; top:0; }
.lens-on .detail-lens { display:block; }
.detail-lens::after { content:'2.6×'; position:absolute; bottom:13px; left:0; right:0; text-align:center; font:8px/1 var(--mono); color:#ece0ff; background:#24182cbf; width:40px; padding:5px; border-radius:20px; margin:auto; }
.lab-tools { display:flex; align-items:center; justify-content:center; gap:35px; margin-top:8px; }
.view-switch { display:flex; border:1px solid #756a8155; border-radius:30px; padding:3px; }
.view-switch button,.lens-toggle { font:9px/1 var(--mono); letter-spacing:.04em; border:0; background:none; padding:13px 18px; border-radius:25px; }
.view-switch button[aria-pressed="true"] { background:#26202d; color:#eee8f3; }
.lens-toggle { border:1px solid #756a8155; display:flex; gap:18px; align-items:center; }
.lens-toggle[aria-pressed="true"] { background:#7440c7; color:white; border-color:#7440c7; }
.lab-instruction { font-size:7px; text-align:center; margin-top:20px; min-height:24px; line-height:1.7; }
.lab-copy { padding:45px 40px; align-self:center; }
.lab-number { color:#b394d1; font-size:9px; }
.lab-copy h2 { font-size:clamp(55px,6vw,90px); margin:20px 0 18px; line-height:.9; }
.lab-color { color:#a79ab3; font-size:9px; }
.lab-detail-heading { font-family:var(--body); font-size:12px; letter-spacing:.02em; line-height:1.5; margin:35px 0 14px; }
.lab-description { color:#b9afc3; font-size:12px; line-height:1.9; }
.lab-spec { display:flex; justify-content:space-between; gap:20px; border-block:1px solid #ffffff20; padding:20px 0; margin:27px 0 24px; }
.lab-spec .micro { color:#9788a4; font-size:7px; }
.lab-spec > span:last-child { font-size:10px; line-height:1.8; color:#d5cbdc; }
.lab-concept { font:9px/1.5 var(--mono); color:#c6a1ff; display:flex; align-items:center; gap:8px; }
.lab-disclaimer { font-size:10px; line-height:1.8; color:#96899f; margin:12px 0 25px; }
.lab-copy .text-link { font-size:11px; }
/* A curved, closed garment mesh replaces the photographic plane for Apex. */
.garment-turntable { touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none; }
.garment-turntable.is-dragging { cursor:grabbing; }
.garment-turntable > img { pointer-events:none; -webkit-user-drag:none; }
.garment-canvas { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none; opacity:0; }
.has-garment3d:not(.garment-disabled) > .garment-canvas { opacity:1; }
.has-garment3d:not(.garment-disabled) > img { opacity:0 !important; }
.garment-disabled { cursor:default; }
.garment-disabled.lens-on { cursor:crosshair; }
.lab-image-box.garment-turntable.lens-on { touch-action:none; }
.story-garment.has-garment3d { z-index:3; }
.story-caption { pointer-events:none; }
#apex .product-scroll-cue { display:block; }
/* Motion remains progressive enhancement; pause gives complete still scenes. */
.motion-paused .garment-story,.motion-paused .product-chapter { height:auto; min-height:0; }
.motion-paused .garment-sticky,.motion-paused .product-sticky { position:relative; top:auto; }
.motion-paused .garment-story { --scene:.8 !important; }
.motion-paused .product-chapter { --scene:.5 !important; }
.motion-paused .story-caption { opacity:0; }
.motion-paused .story-close { opacity:1; transform:none; }
.motion-paused .collection-index { position:relative; top:auto; }
@media (min-width:1700px) { .product-image-wrap { left:50%; } }
@media (max-width:1050px) and (min-width:761px) {
  .lineup-row { grid-template-columns:45px 1fr 130px 145px 35px; }
  .lineup-row img { width:130px; height:130px; }
  .lineup-row .micro { font-size:8px; }
  .product-editorial { width:29%; }
  .product-image-wrap { width:min(64vw,70svh); height:min(64vw,70svh); left:60%; }
  .product-scroll-cue { display:none; }
  .story-close { right:3%; }
  .lab-copy { padding:30px 25px; }
  .lab-tools { gap:10px; }
  .lab-tools button { padding:12px; }
}
@media (max-width:760px) {
  .collection-intro { padding:70px 6% 60px; }
  .collection-intro h2 { font-size:10vw; margin:30px 0; }
  .intro-bottom { display:block; }
  .intro-bottom p { font-size:12px; }
  .intro-bottom .text-link { display:inline-flex; margin-top:24px; font-size:12px; }
  .garment-story { height:185svh; }
  .garment-sticky { top:78px; height:calc(100svh - 78px); min-height:570px; }
  .story-top { top:22px; left:6%; right:6%; font-size:7px; }
  .garment-backtype { top:15%; left:5%; font-size:27vw; }
  .garment-backtype span:last-child { margin-left:17vw; }
  .story-garment { width:115vw; height:115vw; max-width:620px; max-height:620px; top:45%; left:50%; transform:translate3d(-50%,-48%,0) rotate(calc(-12deg + var(--scene,0) * 17deg)) scale(calc(.75 + var(--scene,0) * .1)); }
  .garment-orbit { width:100vw; height:100vw; left:0; top:10%; }
  .story-caption { bottom:14%; left:6%; }
  .story-caption p { font-size:30px; margin:10px 0; }
  .story-caption .micro { font-size:7px; }
  .story-caption-small { font-size:10px; }
  .story-close { bottom:13%; left:6%; right:6%; align-items:center; gap:18px; }
  .story-close .micro { font-size:8px; }
  .story-close .pill-link { background:var(--ink); color:var(--paper); padding:15px 22px; }
  .story-disclaimer { bottom:22px; left:6%; right:6%; font-size:6px; text-align:center; }
  .lineup { padding-top:65px; padding-bottom:60px; }
  .lineup-heading { margin:35px 0; display:block; }
  .lineup-heading h2 { font-size:21vw; }
  .lineup-heading > p { font-size:12px; margin-top:25px; }
  .lineup-row { min-height:115px; grid-template-columns:27px 1fr 85px 22px; }
  .lineup-row img { width:100px; height:100px; }
  .lineup-name { font-size:clamp(27px,7vw,48px); }
  .lineup-color { display:none; }
  .lineup-arrow { font-size:26px; }
  .lineup-row .micro { font-size:7px; }
  .concept-note { font-size:6px; line-height:1.9; }
  .brand-manifesto { padding:50px 6%; }
  .brand-manifesto h2 { font-size:21vw; margin:40px 0; }
  .manifesto-bottom { display:block; }
  .manifesto-bottom p { font-size:11px; }
  .manifesto-bottom .text-link { display:inline-flex; margin-top:25px; font-size:12px; }
  .manifesto-symbol { top:10%; right:-20%; font-size:100vw; }
  .launch-note { display:block; padding:60px 6%; }
  .launch-note h2 { font-size:12vw; margin:25px 0; }
  .launch-note > p:not(.micro) { font-size:12px; }
  .launch-note > a { display:inline-flex; margin-top:25px; font-size:12px; }
  .collection-cover { padding:30px 6% 40px; min-height:auto; }
  .collection-cover .section-top { font-size:7px; }
  .collection-cover-title { margin-top:65px; }
  .collection-cover h1 { font-size:22vw; line-height:.85; }
  .cover-symbol { top:-22%; right:-4%; font-size:50vw; }
  .collection-cover-bottom { display:grid; grid-template-columns:1fr; gap:22px; margin-top:40px; }
  .collection-cover-bottom > p:first-child { font-size:12px; }
  .collection-cover-bottom > p.micro { font-size:7px; }
  .collection-cover-bottom .text-link { justify-self:start; font-size:12px; }
  .collection-index { top:78px; gap:0; justify-content:space-between; padding:17px 6%; }
  .collection-index a { font-size:8px; letter-spacing:0; }
  .collection-index a span { margin-right:4px; }
  .product-chapter { height:150svh; scroll-margin-top:126px; }
  .product-sticky { top:126px; height:calc(100svh - 126px); min-height:600px; }
  .product-top { top:19px; font-size:7px; left:6%; right:6%; }
  .product-ghost { top:21%; left:4%; font-size:35vw; }
  .after-dark .product-ghost { font-size:32vw; top:21%; }
  .product-image-wrap { width:108vw; height:108vw; max-width:580px; max-height:580px; top:41%; left:50%; transform:translate3d(-50%, -48%, 0) rotate(calc(-9deg + var(--scene,0) * 11deg)) scale(calc(.8 + var(--scene,0) * .08)); }
  .product-editorial { top:auto; left:6%; right:6%; bottom:145px; width:auto; transform:none; }
  .product-editorial > .micro { display:none; }
  .product-editorial h2 { font-size:29px; margin:0 0 10px; }
  .product-editorial > p { font-size:10px; line-height:1.7; max-width:280px; }
  .product-bottom { bottom:26px; left:6%; right:6%; display:block; }
  .product-bottom h3 { font-size:29px; margin-bottom:4px; }
  .product-bottom > div > .micro { font-size:6px; }
  .product-bottom .pill-link { position:absolute; right:0; bottom:2px; padding:14px 15px; gap:20px; font-size:9px; max-width:180px; }
  .product-bottom .pill-link > span { font-size:18px; }
  .product-scroll-cue { display:none; }
  #apex .product-scroll-cue { position:absolute; bottom:76px; right:0; font-size:6px; }
  .collection-end { padding:65px 6%; }
  .collection-end h2 { font-size:22vw; }
  .collection-end > p:not(.micro) { font-size:12px; }
  .collection-end .micro { font-size:7px; }
  .product-lab { width:100%; max-height:100svh; height:100svh; border:0; margin:0; }
  .lab-header { position:sticky; top:0; padding:18px 6%; background:#18151df5; z-index:10; }
  .lab-header p { font-size:7px; }
  .lab-close { font-size:8px; gap:14px; }
  .lab-layout { display:block; }
  .lab-art { padding:15px 5% 20px; }
  .lab-image-box { max-width:440px; }
  .lab-tools { margin-top:0; gap:20px; }
  .lab-tools button { font-size:8px; padding:12px 15px; }
  .lab-instruction { font-size:6px; margin-top:15px; min-height:12px; }
  .detail-lens { width:150px; height:150px; }
  .lab-copy { padding:35px 7% 45px; }
  .lab-copy h2 { font-size:65px; }
  .lab-detail-heading { margin-top:25px; }
  .footer-bottom nav { gap:14px; }
}
@media (max-width:760px) and (max-height:740px) {
  .product-sticky { min-height:550px; }
  .product-image-wrap { width:92vw; height:92vw; top:37%; }
  .product-editorial { bottom:135px; }
  .product-editorial h2 { font-size:26px; }
}
@media (prefers-reduced-motion:reduce) {
  .garment-story,.product-chapter { height:auto; }
  .garment-sticky,.product-sticky { position:relative; top:auto; }
  .story-caption { display:none; }
  .story-close { opacity:1; transform:none; }
  .product-lab[open] { animation:none; }
  .collection-index { position:relative; top:auto; }
}
