/* Article-specific classes prevent site.css .intro from creating two text columns. */
.moodboard { color:#253a43; max-width:74rem; margin:auto; padding:clamp(1.125rem,4vw,3rem); font-size:1.0625rem; line-height:1.7; }
.moodboard .mood-intro,.moodboard .mood-prose,.moodboard .mood-closing { display:block; max-width:49rem; margin:0 auto 2.75rem; }
.moodboard h1,.moodboard h2 { color:#174869; line-height:1.18; text-wrap:balance; }
.moodboard h1 { font-size:clamp(2rem,4.4vw,3.5rem); max-width:none; margin:0 0 1.5rem; }
.moodboard h2 { font-size:clamp(1.65rem,2.8vw,2.25rem); max-width:none; margin:0 0 1rem; }
.moodboard p { margin:0 0 1.2rem; }
.moodboard .mood-intro > p:first-child { margin-bottom:.75rem; }
.moodboard .mood-intro > p + h2,.moodboard .mood-questions h2:not(:first-child) { margin-top:2.5rem; }
.moodboard .mood-prose section + section { margin-top:2.75rem; }
.moodboard .mood-comparison { margin:0 auto 3rem; }
.moodboard .mood-comparison > h2 { max-width:49rem; margin:0 auto 1.5rem; }
.moodboard .mood-palettes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.moodboard .mood-palette { margin:0; min-width:0; background:#f6f3ed; border-radius:.8rem; overflow:hidden; }
.moodboard .mood-palette img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.moodboard .mood-palette-copy { padding:clamp(1rem,2vw,1.5rem); }
.moodboard .mood-palette-copy strong { font-size:1.2rem; color:#174869; }
.moodboard .mood-swatches { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; list-style:none; padding:0; margin:1rem 0 0; font-size:.85rem; line-height:1.4; }
.moodboard .mood-swatches span { display:block; height:1.5rem; margin-bottom:.4rem; background:var(--kleur); border:1px solid #0002; border-radius:.25rem; }
.moodboard .mood-caption { font-size:.875rem; margin:1rem 0 0; color:#53646c; }
.moodboard .mood-closing { background:#eaf0ed; padding:clamp(1.25rem,3vw,2rem); border-radius:.8rem; }
.moodboard .mood-closing ol { padding-left:1.4rem; margin:1.25rem 0; }
.moodboard li + li { margin-top:.65rem; }
.moodboard .mood-swatches li { margin-top:0; }
.moodboard .mood-closing > :last-child { margin-bottom:0; }
@media(max-width:46rem) { .moodboard .mood-palettes { grid-template-columns:1fr; } }