/* Educational illustration atlas, scoped to the colour library. */
.atlas-start { margin: 38px 0 48px; }
.atlas-section-heading { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px 24px; }
.atlas-section-heading h2 { margin:0; }
.atlas-disclosure { color:#5c615c; font-size:.86rem; line-height:1.65; max-width:850px; }
.atlas-start > .atlas-disclosure { margin:12px 0 24px; }
.atlas-group { margin-top:24px; }
.atlas-group > h3 { margin:0 0 14px; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:#486259; }
.atlas-card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.atlas-card { min-width:0; border:1px solid #d8ded6; border-radius:18px; background:#fffefb; overflow:hidden; }
.atlas-card-link { display:block; color:inherit; text-decoration:none; }
.atlas-card-image { background:#d8d8d8; overflow:hidden; aspect-ratio:3/2; }
.atlas-card-image img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; transition:transform .22s ease; }
.atlas-card-link:hover img { transform:scale(1.035); }
.atlas-card-link:hover h4 { color:#075a52; }
.atlas-card-link:focus-visible { outline-offset:-4px; border-radius:18px; }
.atlas-card-copy { padding:17px 18px 18px; }
.atlas-card-copy h4 { display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:1.06rem; line-height:1.3; margin:0 0 7px; overflow-wrap:anywhere; }
.atlas-card-copy h4 span { color:#075a52; }
.atlas-card-copy p { margin:0; color:#5c615c; font-size:.87rem; line-height:1.55; }
.atlas-card-note { padding:0 18px 17px; margin:0; font-size:.78rem; color:#625647; line-height:1.55; }
.atlas-group--fur { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.5fr); column-gap:28px; align-items:center; padding:22px; border-radius:20px; background:#eaf0e9; }
.atlas-group--fur > h3 { grid-column:1/-1; }
.atlas-group--fur .atlas-card-grid { grid-template-columns:1fr; }
.atlas-fur-note { max-width:620px; }
.atlas-fur-note > p:not(.atlas-eyebrow) { font-size:1.12rem; line-height:1.7; margin:12px 0 16px; }
.atlas-eyebrow { font-size:.77rem; font-weight:650; color:#075a52; letter-spacing:.1em; text-transform:uppercase; }
.atlas-catalog-heading { scroll-margin-top:110px; margin:48px 0 0; }
.atlas-catalog-heading + .color-search { margin-top:22px; }
.atlas-detail { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:36px; align-items:center; margin:0 0 55px; padding:28px; border:1px solid #d8ded6; border-radius:24px; background:#f0f3ed; }
.atlas-detail-intro h2 { font-size:clamp(1.5rem,2.5vw,2.1rem); margin:12px 0 18px; }
.atlas-detail-intro > p { line-height:1.75; }
.atlas-detail-intro .atlas-disclosure { margin-bottom:0; font-size:.8rem; }
.atlas-viewer { min-width:0; scroll-margin-top:110px; }
.atlas-view-links { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.atlas-view-links a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:9px 13px; border:1px solid #c4cec5; border-radius:999px; background:#fffefb; color:#29483e; font-size:.86rem; font-weight:600; text-decoration:none; }
.atlas-view-links a:hover { background:#e0e9df; }
.atlas-view-links a[aria-current="true"] { color:#fff; background:#135c4d; border-color:#135c4d; }
.atlas-panel { margin:0; border-radius:16px; overflow:hidden; background:#fffefb; }
.atlas-panel[hidden] { display:none; }
.atlas-panel img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; background:#d8d8d8; }
.atlas-panel figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 18px; padding:12px 16px; font-size:.78rem; color:#5c615c; line-height:1.5; }
.atlas-panel figcaption span:first-child { color:#29483e; font-weight:650; }
.atlas-screen-reader { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:1000px) {
  .atlas-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .atlas-detail { gap:24px; padding:24px; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); }
}
@media (max-width:760px) {
  .atlas-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .atlas-detail { grid-template-columns:1fr; }
  .atlas-group--fur { grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:14px 22px; padding:18px; }
  .atlas-fur-note > p:not(.atlas-eyebrow) { font-size:.98rem; }
}
@media (max-width:480px) {
  .atlas-start { margin-top:28px; }
  .atlas-section-heading h2 { font-size:1.3rem; }
  .atlas-card-grid { gap:12px; }
  .atlas-card { border-radius:12px; }
  .atlas-card-copy { padding:13px 12px; }
  .atlas-card-copy h4 { font-size:.95rem; }
  .atlas-card-copy h4 span { display:none; }
  .atlas-card-copy p { font-size:.8rem; }
  .atlas-card-note { padding:0 12px 13px; font-size:.74rem; }
  .atlas-group--fur { grid-template-columns:1fr; padding:16px; }
  .atlas-group--fur .atlas-card { max-width:100%; }
  .atlas-detail { padding:16px; border-radius:18px; margin-bottom:38px; }
  .atlas-view-links { gap:6px; }
  .atlas-view-links a { font-size:.8rem; padding:9px 11px; }
}
@media (prefers-reduced-motion:reduce) {
  .atlas-card-image img { transition:none; }
  .atlas-card-link:hover img { transform:none; }
}
.color-library .atlas-coat-combinations{padding:1.5rem 0;border-top:1px solid var(--line,#dedfd3);margin-top:2rem}
.color-library .atlas-combination-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.5rem 0}
.color-library .atlas-combination-list article{padding:1.1rem;border:1px solid var(--line,#dedfd3);border-radius:14px;background:var(--paper,#fffdf7)}
.color-library .atlas-combination-list h3{font-size:1.05rem;line-height:1.5;margin:0 0 .6rem}
.color-library .atlas-combination-list p{font-size:.9rem;line-height:1.65}
@media(max-width:760px){.color-library .atlas-combination-list{grid-template-columns:1fr}}