.wedding-colors{background:#f7f2e7;border-bottom:1px solid var(--line);overflow:hidden;padding-block:100px 90px}
.colors-layout{display:grid;grid-template-columns:.85fr 1.4fr;gap:5vw;align-items:center}
.colors-copy h2{font-size:clamp(50px,4.8vw,75px);line-height:1.04;margin:23px 0;letter-spacing:-.04em}
.colors-copy h2 em{font-weight:400;color:#6c90a3}.colors-copy>p:not(.eyebrow){font-size:13px;line-height:1.95;max-width:355px}
.palette-detail{border-top:1px solid var(--line);margin-top:30px;padding-top:20px;max-width:355px;min-height:128px}
.palette-detail h3{font:400 30px/1.1 'Caveat',cursive;letter-spacing:0;margin-bottom:10px}.palette-detail p{font-size:12px;line-height:1.8}
.colors-copy>.text-button{font-size:10px;gap:22px;margin-top:17px}
.palette-help{font-size:9px;letter-spacing:.04em;text-align:center;margin-top:24px}
.palette-fan{display:flex;justify-content:center;align-items:center;perspective:1300px;padding:35px 8px 20px;min-height:365px;isolation:isolate}
.palette-card{position:relative;flex:0 0 clamp(145px,13vw,208px);aspect-ratio:2/3;padding:0;background:none;transform:translateY(var(--swatch-lift,0px)) rotate(var(--swatch-turn));transform-origin:50% 90%;transition:transform .55s cubic-bezier(.16,1,.3,1),filter .45s;isolation:isolate;color:var(--ink)}
.palette-card+.palette-card{margin-left:-22px}
.palette-card:after{content:'';position:absolute;inset:0;background:url('assets/instant-frame-portrait.png') center/100% 100% no-repeat;z-index:1;pointer-events:none}
.palette-field{position:absolute;left:10.5%;top:9.6%;width:79.3%;height:69%;background:linear-gradient(125deg,#ffffff1a,transparent 65%),var(--wedding-swatch);border-radius:3px}
.palette-name{position:absolute;left:12%;right:10%;top:80%;height:11%;font:400 clamp(23px,2vw,30px)/1.05 'Caveat',cursive;display:flex;align-items:center;justify-content:center;z-index:2}
.palette-short-note{display:none}
.palette-card:hover,.palette-card:focus-visible{--swatch-lift:-20px;z-index:4;filter:drop-shadow(0 8px 5px #31576d14)}
.palette-card[aria-pressed=true]{--swatch-lift:-27px;z-index:3;filter:drop-shadow(0 8px 6px #31576d1b)}
.palette-card[aria-pressed=true] .palette-name:after{content:'•';font:12px var(--sans);position:absolute;right:0;top:50%;transform:translateY(-50%);color:#31576d}
@media(max-width:1100px){.colors-layout{grid-template-columns:1fr;gap:35px}.colors-copy{display:grid;grid-template-columns:1fr 1fr;gap:0 45px;align-items:start}.colors-copy>.eyebrow,.colors-copy>h2{grid-column:1}.colors-copy>p:not(.eyebrow){grid-column:2;grid-row:2;padding-top:28px}.palette-detail{grid-column:2;grid-row:3;margin-top:0}.colors-copy>.text-button{grid-column:1;grid-row:3;margin-top:0;justify-self:start}.palette-card{flex-basis:195px}.palette-fan{padding-top:25px}}
@media(max-width:800px){.wedding-colors{padding-block:65px}.colors-copy{display:block}.colors-copy h2{font-size:49px;margin-block:18px 22px}.colors-copy>p:not(.eyebrow){padding-top:0;font-size:12px}.palette-detail{margin-top:22px;padding-top:17px;min-height:110px;max-width:none}.palette-detail h3{font-size:29px}.palette-detail p{font-size:12px}.colors-copy>.text-button{margin-top:10px}.colors-layout{gap:25px}.palette-fan{display:grid;grid-template-columns:1fr 1fr;gap:12px 8px;min-height:0;padding:25px 0 5px}.palette-card{width:100%;max-width:220px;justify-self:center;transform:translateY(var(--swatch-lift,0px)) rotate(var(--phone-turn));}.palette-card+.palette-card{margin-left:0}.palette-card[aria-pressed=true]{--swatch-lift:-10px}.palette-card:hover,.palette-card:focus-visible{--swatch-lift:-8px}.palette-name{font-size:26px}.palette-help{font-size:8px;line-height:1.8;margin-top:17px}}
@media(max-width:380px){.palette-name{font-size:24px}.palette-card[aria-pressed=true] .palette-name:after{right:-3px;font-size:9px}}
@media(max-width:800px){.palette-short-note{display:block;position:absolute;left:16%;right:15%;bottom:27%;font:10px/1.6 var(--sans);text-align:center;z-index:2;opacity:0;transition:opacity .25s}.palette-card[aria-pressed=true] .palette-short-note{opacity:1}.palette-card[data-wedding-color="1"] .palette-short-note{color:#f7f2e7}}
@media(prefers-reduced-motion:reduce){.palette-card{transition:none}}