[data-sig="wildflower-swatches"]{height:180dvh;padding:0 var(--edge);max-width:none} [data-sig="wildflower-swatches"] .swatch-stage{position:sticky;top:0;height:100dvh;max-height:1000px;min-height:650px;display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:var(--wrap);margin:auto;padding-bottom:40px} [data-sig="wildflower-swatches"] .hero-copy{align-self:center;padding:24px 0 16px;min-width:0} [data-sig="wildflower-swatches"] h1{max-width:9ch} [data-sig="wildflower-swatches"] .hero-copy>p{max-width:29ch;margin-top:24px;font-size:18px} [data-sig="wildflower-swatches"] .hero-copy>.button{margin-top:24px} [data-sig="wildflower-swatches"] .hero-portrait{position:relative;min-width:0;height:calc(100% - 32px);align-self:center;overflow:hidden;border-radius:var(--radius)} [data-sig="wildflower-swatches"] .keyframe{position:absolute;inset:0} [data-sig="wildflower-swatches"] picture{display:block;width:100%;height:100%} [data-sig="wildflower-swatches"] img{object-position:50% 38%} [data-sig="wildflower-swatches"] .portrait-caption{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;gap:16px;align-items:end;padding:24px;background:var(--paper);font-size:13px} [data-sig="wildflower-swatches"] .portrait-caption span:last-child{font-size:11px} [data-sig="wildflower-swatches"] .ring{position:relative;width:240px;height:200px;margin:28px 0 16px 68px} [data-sig="wildflower-swatches"] .sample{position:absolute;width:49px;height:180px;bottom:0;left:80px;transform-origin:50% 92%;background:var(--paper);border:1px solid #b69685;border-radius:7px 7px 18px 18px;transform:rotate(calc(var(--angle,0)*1deg));box-shadow:2px 2px 4px #613c421a;overflow:hidden} [data-sig="wildflower-swatches"] .hair{height:140px;background:repeating-linear-gradient(90deg,#ffffff1a 0 1px,#00000013 1px 2px,transparent 2px 4px),linear-gradient(var(--hair),var(--hair));border-bottom:1px solid #613c4233} [data-sig="wildflower-swatches"] .hinge{position:absolute;bottom:7px;left:96px;width:17px;height:17px;border:4px solid #a39a88;border-radius:50%;background:var(--surface);box-shadow:0 0 0 1px #625b50} [data-sig="wildflower-swatches"] .color-picker{display:flex;flex-wrap:wrap;gap:3px;max-width:450px} [data-sig="wildflower-swatches"] .color-picker button{border:0;background:transparent;padding:8px 9px;min-height:44px;display:flex;align-items:center;gap:6px;font-size:12px;border-radius:var(--radius)} [data-sig="wildflower-swatches"] .color-picker button>span:first-child{width:12px;height:12px;border-radius:50%;border:1px solid #613c4255} [data-sig="wildflower-swatches"] .color-picker [aria-pressed=true]{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)} @supports(animation-timeline:view()){[data-sig="wildflower-swatches"]{view-timeline-name:--color-story;view-timeline-axis:block} [data-sig="wildflower-swatches"] .sample{animation:fan linear both;animation-timeline:--color-story;animation-range:contain 0% contain 100%;--open:calc((var(--i) - 2)*24deg)} @keyframes fan{from{transform:rotate(0deg)}to{transform:rotate(var(--open))}}} @media(min-width:1600px){[data-sig="wildflower-swatches"] .swatch-stage{max-height:none} [data-sig="wildflower-swatches"] .hero-portrait{height:90%}} @media(max-width:900px){[data-sig="wildflower-swatches"] .swatch-stage{gap:24px} [data-sig="wildflower-swatches"] .portrait-caption span:last-child{display:none} [data-sig="wildflower-swatches"] h1{font-size:64px}} @media(max-width:600px){[data-sig="wildflower-swatches"]{height:145dvh;padding:0 24px} [data-sig="wildflower-swatches"] .swatch-stage{height:calc(100dvh - 64px);min-height:630px;grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:20px;padding:12px 0 24px} [data-sig="wildflower-swatches"] .hero-copy{display:grid;grid-template-columns:1fr 112px;column-gap:8px;align-items:start;padding:0} [data-sig="wildflower-swatches"] h1{font-size:48px;grid-column:1;max-width:9ch} [data-sig="wildflower-swatches"] .hero-copy>p{font-size:14px;grid-column:1;max-width:26ch;margin-top:12px} [data-sig="wildflower-swatches"] .hero-copy>.button{grid-column:1;width:max-content;padding:10px 16px;min-height:44px;font-size:13px;margin-top:16px} [data-sig="wildflower-swatches"] .ring{grid-column:2;grid-row:1 / 4;transform:scale(.57);transform-origin:center center;width:190px;height:200px;margin:0 0 0 -46px;align-self:center} [data-sig="wildflower-swatches"] .color-picker{grid-column:1 / -1;margin-top:12px;justify-content:space-between;gap:0} [data-sig="wildflower-swatches"] .color-picker button{font-size:10px;padding:8px 5px;gap:4px} [data-sig="wildflower-swatches"] .color-picker button>span:first-child{width:9px;height:9px} [data-sig="wildflower-swatches"] .hero-portrait{height:100%;min-height:280px;align-self:stretch} [data-sig="wildflower-swatches"] .portrait-caption{padding:14px;font-size:12px} [data-sig="wildflower-swatches"] img{object-position:50% 34%}} @media(prefers-reduced-motion:reduce){[data-sig="wildflower-swatches"]{height:auto} [data-sig="wildflower-swatches"] .swatch-stage{position:relative;height:calc(100dvh - 100px)} [data-sig="wildflower-swatches"] .sample{transform:rotate(calc((var(--i) - 2)*24deg))!important}}
[data-sig="wildflower-swatches"] .hero-copy{padding-top:0}
[data-sig="wildflower-swatches"] .swatch-stage{height:calc(100dvh - 100px);min-height:680px}
@media(max-width:600px){[data-sig="wildflower-swatches"] .swatch-stage{height:calc(100dvh - 152px);min-height:620px}[data-sig="wildflower-swatches"] h1{font-size:48px;max-width:8ch}[data-sig="wildflower-swatches"] .hero-copy{grid-template-columns:1fr 104px}[data-sig="wildflower-swatches"] .ring{margin-left:-54px}}
[data-sig="wildflower-swatches"] .sample{z-index:calc(5 - var(--i))}
@supports(animation-timeline:view()){[data-sig="wildflower-swatches"] .sample{animation-range:contain calc(var(--i)*12%) contain calc(45% + var(--i)*12%)}}
[data-sig="wildflower-swatches"].long-heading h1{max-width:100%;font-size:clamp(36px,4vw,58px)}
@media(max-width:600px){[data-sig="wildflower-swatches"].long-heading h1{font-size:32px}[data-sig="wildflower-swatches"].long-heading .ring{transform:scale(.45)}}