@font-face{font-family:ColorManrope;src:url('/fonts/manrope.woff2') format('woff2');font-display:swap;font-weight:200 800}
@font-face{font-family:ColorDM;src:url('/fonts/dm-sans.woff2') format('woff2');font-display:swap;font-weight:100 1000}
.color-study-page{font-family:ColorDM,Arial,sans-serif}.color-study-page h1,.color-study-page h2,.color-study-page h3,.color-browse strong{font-family:ColorManrope,Arial,sans-serif}
.color-study-page main{margin-top:28px}.color-back{display:inline-block;font-size:13px;margin-bottom:22px;text-underline-offset:4px}
.color-hero{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:44px}
.color-hero h1{font-size:clamp(34px,4.6vw,58px);line-height:1.05;letter-spacing:-.055em;max-width:600px;margin:18px 0 22px}
.color-hero>div>p:not(.eyebrow){color:#526681;font-size:16px;max-width:550px;line-height:1.7}.color-hero .button{margin-top:12px}.color-hero .color-meta{font-size:12px!important;margin-top:22px}
.color-hero-previews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0}
.color-hero-previews a{display:block;overflow:hidden;background:white;border:1px solid #dce3f1;border-radius:10px;text-decoration:none;box-shadow:0 6px 20px #12274708}
.color-hero-previews a:first-child{grid-column:1/-1}.color-hero-previews img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top;background:#e9eef8}
.color-hero-previews span{display:block;font-size:11px;padding:8px 12px;color:#526681}
.color-selection{max-width:800px;margin:48px 0}.color-selection h2{font-size:24px;letter-spacing:-.035em}.color-selection p{font-size:15px;color:#334465}.color-selection .muted{font-size:12px;color:#63718a}
.color-section-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid #dce3f1;padding-top:22px;margin-bottom:24px}
.color-section-head h2{font-size:26px;margin:0}.color-section-head span{font-size:12px;color:#63718a}
.color-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px;align-items:start}
.color-example{min-width:0;background:white;border:1px solid #dce3f1;border-radius:14px;overflow:hidden}
.color-shot{display:block;border-bottom:1px solid #dce3f1;background:#e9eef8}.color-shot img{display:block;width:100%;height:auto;aspect-ratio:1440/1000;object-fit:contain;object-position:top}
.color-example-copy{padding:24px}.color-example h3{font-size:25px;margin:0 0 10px;letter-spacing:-.035em}.color-example h3 a{text-decoration:none}
.color-example .color-approach{font-weight:650;font-size:15px;color:#122747;margin:0 0 10px}.color-example-copy>p{font-size:14px;color:#526681;line-height:1.7}
.observed-palette{display:flex;flex-wrap:wrap;gap:8px 15px;padding:0;margin:20px 0;list-style:none}
.observed-palette li{display:flex;align-items:center;gap:6px;font-size:11px;color:#526681}.observed-palette span{display:block;width:15px;height:15px;border:1px solid #12274730;border-radius:50%;flex:none}
.color-detail-link{display:inline-block;font-size:13px;font-weight:650;text-underline-offset:4px}.color-next{padding:30px 0;margin-top:44px;border-top:1px solid #dce3f1;max-width:800px}.color-next h2{font-size:27px}.color-next .button{margin:10px 18px 10px 0}
.color-browse{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:24px;padding:26px;margin:28px 0;border:1px solid #cad6ec;border-radius:14px;background:white;color:#122747;text-decoration:none}
.color-browse>span{display:flex;flex-direction:column;gap:10px}.color-browse .eyebrow{font-size:11px}.color-browse strong{font-size:29px;line-height:1.2;letter-spacing:-.04em}.color-browse>span>span:not(.eyebrow){color:#526681;font-size:14px;line-height:1.6}.color-browse .color-entry-action{color:#2453d9!important;font-weight:650}
.color-entry-previews,.collection-previews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow:hidden;border-radius:7px}
.color-entry-previews img,.collection-previews img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:top;background:#e9eef8}
.collection-previews{gap:3px;border-radius:0}.card .collection-previews img{aspect-ratio:4/5;height:auto}.related-color-study{margin:22px 0;padding-top:18px;border-top:1px solid #dce3f1}.related-color-study h2{font-size:18px}.related-color-study p{font-size:13px}
.color-study-page a:focus-visible,.color-browse:focus-visible,.card a:focus-visible{outline:3px solid #2453d9;outline-offset:4px}
@media(max-width:820px){.color-hero{gap:24px}.color-hero h1{font-size:40px}.color-example-copy{padding:20px}.color-browse{gap:18px;padding:22px}}
@media(max-width:640px){.color-study-page main{padding:0 16px}.color-hero{grid-template-columns:1fr;gap:24px}.color-hero h1{font-size:40px}.color-hero>div>p:not(.eyebrow){font-size:15px}.color-hero-previews{gap:10px}.color-hero-previews a:first-child{grid-column:auto}.color-hero-previews a:first-child img{aspect-ratio:4/3}.color-hero-previews a:nth-child(2) img{aspect-ratio:4/3}.color-hero-previews a:nth-child(3){grid-column:1/-1}.color-hero-previews a:nth-child(3) img{aspect-ratio:16/7}.color-selection{margin:32px 0}.color-examples{grid-template-columns:1fr;gap:22px}.color-section-head h2{font-size:23px}.color-browse{grid-template-columns:1fr;padding:20px}.color-entry-previews img{aspect-ratio:4/3}.color-browse strong{font-size:26px}.color-example-copy{padding:20px}.color-next{margin-top:30px}}