.atlas-journey{height:210svh;background:#101c20;position:relative;--atlas-accent:#e99c26;--atlas-progress:0}.atlas-sticky{position:sticky;top:0;min-height:800px;height:100svh;overflow:hidden;padding:45px 6% 25px;background:radial-gradient(ellipse at 38% 55%,color-mix(in srgb,var(--atlas-accent) 12%,transparent),transparent 65%);transition:background-color .8s}.atlas-heading{position:absolute;top:6%;left:7%;z-index:2;pointer-events:none}.atlas-heading h2{font-size:clamp(48px,5.2vw,80px);margin-bottom:20px}.atlas-heading>p:last-child{font-size:11px;color:#b8c2c0}.atlas-layout{display:grid;grid-template-columns:1.35fr 1fr;align-items:center;gap:7%;height:100%;padding-top:110px;padding-bottom:45px}.wheel-scene{position:relative;aspect-ratio:1;width:min(100%,640px);margin:15px auto 0;isolation:isolate}.wheel-rings{position:absolute;inset:0;border:1px solid #c8b78c45;border-radius:50%;background:repeating-conic-gradient(from 0deg,#b7a87b70 0deg .2deg,transparent .2deg 5deg);mask:radial-gradient(transparent 68%,#000 68%);pointer-events:none}.ring-inscription{display:none}.wheel-scene:before,.wheel-scene:after{content:'';position:absolute;inset:11%;border:1px solid #c8b78c40;border-radius:50%;pointer-events:none}.wheel-scene:after{inset:24%;border-style:dashed}.color-spectrum{position:absolute;inset:7%;border-radius:50%;background:conic-gradient(#8b3556,#d17840,#d4b464,#83a542,#3d7765,#3f9baa,#7d8fae,#7f73ae,#a282ab,#8b3556);mask:radial-gradient(transparent 61%,#000 62%,#000 67%,transparent 68%);opacity:.8;rotate:-18deg}.wheel-center{position:absolute;inset:32%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#101c20b0}.wheel-center>span{font:45px 'Cormorant Garamond',serif;color:#ddcaa1}.wheel-center p{font-size:8px;letter-spacing:2px;line-height:2.1;margin:10px 0}.wheel-center small{font-size:6px;letter-spacing:2px;color:var(--gold)}#yarn-nodes{position:absolute;inset:0;rotate:var(--wheel-rotation,0deg)}.yarn-node{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;rotate:calc(-1 * var(--wheel-rotation,0deg));border:1px solid #dfd4b17a;background:var(--swatch);border-radius:50%;width:43px;height:43px;padding:0;box-shadow:0 0 0 5px #101c20,0 0 0 6px #ae9e6844;transition:scale .35s,box-shadow .35s;z-index:3}.yarn-node:before{content:'';position:absolute;inset:0;border-radius:50%;background-image:var(--swatch-photo);background-size:cover;opacity:.6;mix-blend-mode:luminosity}.yarn-node span{position:absolute;left:50%;bottom:calc(100% + 14px);translate:-50% 6px;white-space:nowrap;padding:6px 12px;background:#f1e7d6;color:#232725;border-radius:2px;font-size:9px;opacity:0;pointer-events:none;transition:.25s}.yarn-node:hover,.yarn-node:focus-visible,.yarn-node.is-active{scale:1.22;box-shadow:0 0 0 5px #101c20,0 0 0 7px #e5d2a6,0 0 35px 5px var(--swatch)}.yarn-node:hover span,.yarn-node:focus-visible span{opacity:1;translate:-50% 0}.yarn-node[hidden]{display:none}.yarn-preview{width:100%;max-width:420px;justify-self:center;position:relative;background:#e9dfce;color:#24251f;padding:12px 12px 22px;box-shadow:0 30px 80px #0005;transform-origin:50% 70%}.yarn-preview-image{height:clamp(190px,30svh,340px);position:relative;overflow:hidden;background:#1c2523}.yarn-preview-image img{object-fit:cover}.atlas-photo-index{position:absolute;bottom:14px;left:15px;font-size:8px;letter-spacing:2px;color:#f8ecdc;text-shadow:0 1px 5px #000}.yarn-preview-info{padding:22px 20px 0}.yarn-preview-info .eyebrow{font-size:7px;color:#766347;letter-spacing:2px;margin:0 0 6px}.yarn-preview h3{font:38px/1.1 'Cormorant Garamond',serif;margin:0 0 20px}.yarn-preview label{display:block;font-size:7px;letter-spacing:1.5px;margin-bottom:7px}.yarn-preview select{background:transparent;border:0;border-bottom:1px solid #84734c66;border-radius:0;padding:8px 20px 8px 0;font:11px 'DM Sans',sans-serif;color:#35382f;width:100%}.yarn-preview .text-link{color:#36382b;margin-top:12px;font-size:8px}.atlas-bottom{position:absolute;bottom:25px;left:7%;right:6%;display:flex;align-items:center;justify-content:space-between;gap:20px}.atlas-bottom>span{font-size:7px;letter-spacing:2px;color:#a2aaa6}.atlas-filters{display:flex;gap:20px}.atlas-filters button{border:0;border-bottom:1px solid transparent;background:none;color:#b3b9b1;padding:10px 0;font-size:9px}.atlas-filters button.active{color:#eee5d5;border-color:var(--gold)}.thread-marquee{overflow:hidden;background:#d7c19c;color:#2e3027;padding:23px 0}.thread-marquee>div{width:max-content;font:italic 52px 'Cormorant Garamond',serif;white-space:nowrap;animation:thread-marquee 36s linear infinite}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(prefers-reduced-motion:no-preference){html.motion-on:not(.motion-paused) .wheel-rings{animation:atlas-orbit 50s linear infinite}html.motion-on:not(.motion-paused) .color-spectrum{animation:atlas-orbit 80s linear infinite reverse}html.motion-on:not(.motion-paused) .yarn-preview{transform:translateY(var(--card-rise,0px)) rotate(var(--card-turn,-4deg))}html.motion-on:not(.motion-paused) .wheel-scene{transform:scale(var(--wheel-scale,1))}html.motion-on:not(.motion-paused) .hero-slides{transform:scale(var(--hero-scroll-scale,1));opacity:var(--hero-scroll-opacity,1)}html.motion-on:not(.motion-paused) .hero-copy{translate:0 var(--hero-copy-shift,0px)}}
@keyframes atlas-orbit{to{rotate:360deg}}@keyframes thread-marquee{to{translate:-50% 0}}
html.motion-paused #yarn-nodes{rotate:0deg}html.motion-paused .yarn-node{rotate:0deg}html.motion-paused .thread-marquee>div{animation-play-state:paused}
@media(max-width:1000px){.atlas-layout{grid-template-columns:1.1fr 1fr;gap:4%;padding-top:160px}.atlas-heading{top:5%;left:6%}.atlas-heading h2{font-size:55px}.yarn-node{width:33px;height:33px}.yarn-preview-info{padding:15px 10px 0}.yarn-preview h3{font-size:30px}.atlas-bottom>span{display:none}.atlas-sticky{min-height:820px}}
@media(max-width:700px){.atlas-journey{height:auto}.atlas-sticky{position:relative;height:auto;min-height:0;padding:65px 6% 35px;overflow:hidden}.atlas-heading{position:static;text-align:center}.atlas-heading h2{font-size:55px;margin-bottom:15px}.atlas-heading>p:last-child{font-size:11px}.atlas-layout{display:flex;flex-direction:column;padding:0;height:auto;gap:32px}.wheel-scene{width:min(100%,420px);margin:30px 0 0}.yarn-node{width:34px;height:34px}.wheel-center>span{font-size:30px}.wheel-center p{font-size:6px;letter-spacing:1.4px}.wheel-center small{font-size:5px}.yarn-preview{width:91%;max-width:420px}.yarn-preview-image{height:240px}.yarn-preview h3{font-size:36px}.atlas-bottom{position:static;justify-content:center;margin-top:32px}.atlas-filters{gap:20px}.atlas-filters button{font-size:9px}.thread-marquee>div{font-size:36px}.yarn-node span{font-size:8px}.atlas-heading .eyebrow{font-size:8px;letter-spacing:2px}}
@media(min-width:701px){.atlas-sticky{min-height:660px}.atlas-heading{top:4%;left:7%;right:6%;display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:0 30px}.atlas-heading .eyebrow{grid-column:1/-1;margin-bottom:14px}.atlas-heading h2{font-size:clamp(45px,4.7vw,68px);margin:0}.atlas-heading h2 br{display:none}.atlas-heading>p:last-child{text-align:right;margin:0}.atlas-layout{padding-top:140px;padding-bottom:65px}.wheel-scene{width:min(100%,60svh);margin:0 auto}.yarn-node{width:34px;height:34px}.yarn-preview-image{height:25svh;min-height:160px}.yarn-preview-info{padding-top:15px}.yarn-preview h3{margin-bottom:13px}.yarn-preview{max-width:390px}.atlas-bottom{bottom:22px}}
@media(prefers-reduced-motion:reduce){.atlas-journey{height:auto}.atlas-sticky{position:relative}.thread-marquee>div{animation:none}#yarn-nodes,.yarn-node{rotate:0deg!important}}
.color-spectrum{background:conic-gradient(hsl(0 55% 50%) 0deg,hsl(60 55% 50%) 60deg,hsl(120 55% 50%) 120deg,hsl(180 55% 50%) 180deg,hsl(240 55% 50%) 240deg,hsl(300 55% 50%) 300deg,hsl(360 55% 50%) 360deg);rotate:var(--wheel-rotation,0deg)!important;animation:none!important}
html.motion-paused .color-spectrum{rotate:0deg!important}
.wheel-center{inset:36%;background:#101c20e8;pointer-events:none}.wheel-center p{font-size:6px;letter-spacing:1.2px}.wheel-center>span{font-size:32px}.wheel-center small{font-size:5px}
.yarn-node:before{mix-blend-mode:normal;opacity:.15}.yarn-node{z-index:4}.yarn-node:hover,.yarn-node:focus-visible{z-index:6}
.neutral-rail{position:absolute;bottom:-4%;left:50%;translate:-50% 0;display:flex;align-items:center;gap:20px;background:#101c20;padding:8px 12px;border:1px solid #c5ac8440;border-radius:25px;white-space:nowrap;z-index:5}
.neutral-label{font-size:6px;letter-spacing:1.4px;color:#c5bca5}.neutral-node{position:relative;inset:auto;translate:none;rotate:0deg!important;width:25px;height:25px;flex:none}.neutral-node span{font-size:8px}.neutral-node:hover,.neutral-node.is-active{scale:1.12}
#yarn-palette{display:flex;gap:6px;margin:-8px 0 14px}#yarn-palette>span{width:15px;height:15px;border-radius:50%;border:1px solid #3f342f33}
@media(max-width:700px){.neutral-rail{bottom:-8%;gap:16px}.atlas-layout{gap:55px}.wheel-center p{font-size:5px}.wheel-center>span{font-size:24px}.wheel-center small{font-size:4px}}
.wheel-center{inset:40%}.yarn-node{width:29px;height:29px}.neutral-node{width:25px;height:25px}
@media(prefers-reduced-motion:reduce){.color-spectrum{rotate:0deg!important}}

/* A segmented studio color wheel and a photographic colorway study. */
.wheel-scene{isolation:isolate}
.wheel-scene:before,.wheel-scene:after{display:none}
.wheel-rings{inset:-3%;background:repeating-conic-gradient(from 0deg,#b7a87b70 0deg .2deg,transparent .2deg 5deg);border:1px solid #c8b78c45;mask:radial-gradient(transparent 68%,#000 68%);box-shadow:none}
.color-spectrum{inset:0;mask:none;opacity:1;background:#202526;overflow:hidden}
.color-spectrum svg{display:block;width:100%;height:100%;overflow:visible}

.wheel-center{inset:47.5%;background:transparent}
.wheel-center>*{display:none}
.yarn-node{width:27px;height:27px;border:2px solid #fff5df;box-shadow:0 2px 7px #0008,0 0 0 2px #101c2070}
.yarn-node:hover,.yarn-node:focus-visible,.yarn-node.is-active{scale:1.2;box-shadow:0 0 0 3px #101c20,0 0 0 5px #fff2cf,0 4px 18px #0008}
.neutral-rail{bottom:-7%;background:#142023}
.neutral-node{width:25px;height:25px}
.yarn-preview{max-width:470px;background:none;color:#eee5d5;padding:0;box-shadow:none}
.polaroid-print{position:relative;padding:17px 17px 0;background:linear-gradient(115deg,#fffdf5,#eeeade);color:#302e28;border:1px solid #fff9e3;box-shadow:0 2px 3px #0003,0 18px 40px #0005,0 40px 70px #0002}
.polaroid-print:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 2px #a69a7b55;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' opacity='.045' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.yarn-preview-image{height:auto;min-height:0;aspect-ratio:1;box-shadow:inset 0 0 2px #0009;border:1px solid #37393244}
.yarn-preview-image:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 2px 10px #0004}
.yarn-preview-info{position:relative;padding:21px 10px 24px;min-height:110px}
.yarn-preview-info .eyebrow{font-size:7px;letter-spacing:1.5px;margin-bottom:7px}
.yarn-preview h3{font:italic 39px/1.05 'Cormorant Garamond',serif;margin:0 0 15px}
#yarn-palette{margin:0;gap:6px}
#yarn-palette>span{width:12px;height:12px}
.atlas-photo-index{bottom:12px;left:12px;font-size:7px;letter-spacing:1.7px}
.yarn-preview-controls{padding:24px 15px 0}
.yarn-preview-controls label{font-size:7px;letter-spacing:1.7px;color:#c7b795}
.yarn-preview select{color:#eee5d5;border-color:#c5ac8466;font-size:11px}
.yarn-preview select option{background:#142023;color:#eee5d5}
.yarn-preview .text-link{color:#e2cba4;font-size:8px;margin-top:13px}
@media(min-width:701px){
.atlas-layout{grid-template-columns:1.15fr 1fr;gap:8%;padding-top:155px;padding-bottom:75px}
.atlas-sticky{min-height:820px}
.wheel-scene{width:min(100%,58svh)}
.yarn-preview{width:min(100%,49svh);max-width:470px}
.yarn-preview-image{height:auto;min-height:0}
}
@media(max-width:1000px) and (min-width:701px){
.atlas-layout{gap:5%;padding-top:155px}
.yarn-preview h3{font-size:33px}
.polaroid-print{padding:13px 13px 0}
.yarn-preview-info{padding:18px 8px 21px}
}
@media(max-width:700px){
.atlas-layout{gap:65px}
.yarn-preview{width:96%;max-width:450px}
.yarn-preview-image{height:auto}
.polaroid-print{padding:14px 14px 0}
.yarn-preview-info{padding:22px 9px 26px}
.yarn-preview h3{font-size:38px}
.yarn-preview-controls{padding:27px 8px 0}
.yarn-node{width:27px;height:27px}
.neutral-node{width:25px;height:25px}
}
@media(prefers-reduced-motion:no-preference){
html.motion-on:not(.motion-paused) .yarn-preview{transform:translateY(calc(var(--card-rise,0px) * .2))}
html.motion-on:not(.motion-paused) .polaroid-print{transform:rotate(calc(var(--card-turn,-4deg) * .4))}
}
@media(min-width:701px){.yarn-preview{width:min(100%,43svh);max-width:460px}}
@media(max-width:700px){
html.motion-on:not(.motion-paused) .yarn-preview{transform:none}
html.motion-on:not(.motion-paused) .polaroid-print{transform:rotate(-2deg)}
.yarn-preview{width:94%}
}
.thread-marquee>div{display:flex;align-items:center}
.marquee-repeat{display:flex;align-items:center;gap:28px;padding-right:28px;flex-shrink:0}
.marquee-logomark{display:block;width:36px;height:auto;flex:none;object-fit:contain}
@media(max-width:700px){.marquee-repeat{gap:20px;padding-right:20px}.marquee-logomark{width:27px}}
.polaroid-print.is-leaving{position:absolute;top:0;left:0;width:100%;z-index:2;pointer-events:none}
.polaroid-print{z-index:3}.polaroid-print.is-leaving{z-index:2}

/* Center the complete composition in the space between its heading and filters. */
@media(min-width:701px){
  #color-atlas .atlas-sticky{display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding-top:30px;padding-bottom:24px;overflow:clip}
  #color-atlas .atlas-heading{position:static;margin:0;pointer-events:none}
  #color-atlas .atlas-layout{height:auto;min-height:0;padding:20px 0 35px;align-items:center;translate:0 -24px}
  #color-atlas .atlas-bottom{position:static;margin:0;align-self:end}
  #color-atlas .wheel-scene{width:min(100%,calc(100svh - 330px));margin:0 auto}
  #color-atlas .yarn-preview{width:min(100%,clamp(210px,calc(100svh - 490px),460px));max-width:460px}
  #color-atlas .yarn-preview-info{min-height:90px;padding:15px 8px 17px}
  #color-atlas .yarn-preview h3{font-size:clamp(29px,3vw,39px);margin-bottom:12px}
  #color-atlas .yarn-preview-controls{padding:18px 10px 0}
}