/* CLS SMILES — a warm, colourful education chapter within the CSR journal. */
.csr-page .smiles-project {
  position: relative;
  padding-block: clamp(64px, 7vw, 100px);
  border-block: 1px solid #c9cfbb;
  background: #e8edde;
  color: #102f39;
}
.smiles-project::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, #588dc5 0 24%, #e82734 24% 38%, #f0d934 38% 52%, #8fbe51 52% 70%, #aa94bc 70% 85%, #e96c24 85%);
}
.smiles-header { display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 64px; margin-bottom: 64px; }
.smiles-header > div { min-width: 0; }
.smiles-project .eyebrow { color: #3d6047; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 24px; }
.smiles-project .eyebrow::before { display: inline-block; content: ''; width: 36px; height: 1px; margin: 0 14px 4px 0; background: #b6573c; }
.smiles-header h2 { margin: 0 0 16px; color: #30357b; font: 500 clamp(64px, 7.2vw, 100px)/1 var(--editorial); letter-spacing: -.045em; }
.smiles-subtitle { max-width: 650px; margin: 0; color: #345242; font: 500 clamp(30px, 3.2vw, 44px)/1.12 var(--editorial); letter-spacing: -.025em; }
.smiles-wordmark { background: #fff; padding: 24px; border: 1px solid #d0d6c5; transform: rotate(-2deg); }
.smiles-wordmark img { display: block; width: 100%; max-height: 230px; object-fit: contain; }
.smiles-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); align-items: start; gap: clamp(40px, 6vw, 88px); }
.smiles-story--text-only { grid-template-columns: minmax(0, 820px); }
.smiles-story-copy { min-width: 0; }
.smiles-story-copy > p { margin: 0 0 24px; color: #40594c; font-size: 18px; line-height: 1.85; }
.smiles-story-copy > p.smiles-introduction { color: #173e32; font-size: 21px; line-height: 1.75; }
.smiles-since { display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; align-items: center; margin-top: 36px; padding-top: 26px; border-top: 1px solid #a5b49d; }
.smiles-since > span { grid-column: 1 / -1; color: #4e6451; font-size: 13px; line-height: 1.6; }
.smiles-since strong { color: #30357b; font: 500 clamp(64px, 6vw, 88px)/1.05 var(--editorial); letter-spacing: -.035em; }
.smiles-since p { max-width: 210px; margin: 0; color: #4e6451; font-size: 14px; line-height: 1.7; }
.smiles-photo { min-width: 0; margin: 0; padding: 8px; border: 1px solid #b8c5ae; background: #f9f8f1; }
.smiles-photo img { display: block; width: 100%; height: auto; }
.smiles-photo figcaption { margin: 10px 4px 3px; color: #4e6451; font-size: 12px; line-height: 1.6; }
.smiles-photo--feature { margin-top: 7px; }
.smiles-photo--feature img { aspect-ratio: auto; object-fit: contain; }
.smiles-principles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px; list-style: none; margin: 62px 0 54px; padding: 0; }
.smiles-principles > li { min-width: 0; padding-top: 22px; border-top: 1px solid #a5b49d; }
.smiles-principle-number { display: block; margin-bottom: 22px; color: #7f4631; font-size: 12px; font-weight: 650; }
.smiles-principles h3 { margin: 0 0 14px; color: #30357b; font: 500 34px/1.08 var(--editorial); letter-spacing: -.025em; }
.smiles-principles p { margin: 0; color: #40594c; font-size: 16px; line-height: 1.8; }
.smiles-gallery { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); align-items: start; gap: 20px; }
.smiles-gallery .smiles-photo img { aspect-ratio: 1.36; object-fit: contain; background: #f9f8f1; }
.smiles-gallery .smiles-photo:nth-child(even) { margin-top: 28px; }
.smiles-gallery-caption { margin: 20px 0 0; color: #4e6451; font-size: 13px; line-height: 1.7; }
.smiles-project :is(h2,h3,p,span,figcaption) { overflow-wrap: anywhere; }
@media (max-width: 999px) {
  .smiles-header { gap: 40px; }
  .smiles-wordmark { padding: 18px; }
  .smiles-story { gap: 36px; }
  .smiles-story-copy > p.smiles-introduction { font-size: 19px; }
  .smiles-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
  .smiles-principles { gap: 26px; }
  .smiles-principles h3 { font-size: 30px; }
}
@media (max-width: 699px) {
  .smiles-header { grid-template-columns: 1fr; gap: 34px; margin-bottom: 40px; }
  .smiles-header h2 { font-size: clamp(52px, 12vw, 72px); }
  .smiles-subtitle { font-size: 34px; }
  .smiles-wordmark { width: min(350px, 100%); transform: rotate(-1.5deg); padding: 20px; }
  .smiles-project .eyebrow { font-size: 12px; }
  .smiles-story { grid-template-columns: 1fr; gap: 38px; }
  .smiles-story-copy > p { font-size: 17px; }
  .smiles-story-copy > p.smiles-introduction { font-size: 19px; }
  .smiles-since { margin-top: 28px; gap: 10px 20px; }
  .smiles-since strong { font-size: 75px; }
  .smiles-since p { font-size: 12px; }
  .smiles-principles { grid-template-columns: 1fr; gap: 28px; margin-block: 42px; }
  .smiles-principle-number { margin-bottom: 15px; }
  .smiles-principles h3 { font-size: 35px; }
  .smiles-gallery { gap: 16px; }
  .smiles-gallery .smiles-photo { padding: 5px; }
  .smiles-gallery .smiles-photo:nth-child(even) { margin-top: 18px; }
  .smiles-photo figcaption { font-size: 11px; margin-inline: 0; }
}
@media (max-width: 379px) {
  .smiles-since { grid-template-columns: 1fr; }
  .smiles-since p { max-width: none; font-size: 13px; }
  .smiles-gallery { grid-template-columns: 1fr; gap: 22px; }
  .smiles-gallery .smiles-photo { max-width: 100%; padding: 7px; }
  .smiles-gallery .smiles-photo:nth-child(even) { margin: 0; }
}
/* Keep the supplied profile photograph close to its original resolution. */
.smiles-photo--feature { width: 100%; max-width: 500px; justify-self: end; }
@media (max-width: 699px) { .smiles-photo--feature { justify-self: start; } }