/* HAPPINESS r27-r2: clean responsive About page, loaded after app.css */
.page-about .about-stats{padding:72px 0 84px}
.page-about .president-section.about-president-r2{padding:42px 0 78px}
.page-about .president-grid-r2{
  width:min(1450px,calc(100% - 72px));
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(420px,650px) minmax(0,1fr);
  grid-template-areas:"photo title" "photo text";
  column-gap:clamp(72px,7vw,124px);
  row-gap:24px;
  align-items:center;
}
.page-about .president-photo-r2{grid-area:photo;min-width:0;align-self:center;display:grid;place-items:center}
.page-about .president-photo-r2 img{display:block;width:100%;max-width:650px;height:auto;object-fit:contain;margin:0 auto}
.page-about .president-title-r2{grid-area:title;align-self:end;text-align:center;font-size:clamp(26px,2.15vw,34px);line-height:1.2;margin:0;max-width:780px}
.page-about .president-text-r2{grid-area:text;align-self:start;min-width:0;max-width:800px}
.page-about .president-text-r2 p{font-size:clamp(17px,1.35vw,22px);line-height:1.55;text-align:justify;margin:0 0 22px;overflow-wrap:break-word}
.page-about .closing-copy-r2{width:min(1450px,calc(100% - 72px));margin:58px auto 0;font-size:clamp(17px,1.25vw,21px);line-height:1.58;text-align:justify}

@media (max-width:1050px){
  .page-about .president-grid-r2{width:calc(100% - 48px);grid-template-columns:minmax(320px,43%) minmax(0,1fr);column-gap:48px;row-gap:18px}
  .page-about .president-title-r2{font-size:25px}
  .page-about .president-text-r2 p{font-size:17px;line-height:1.5;text-align:left}
  .page-about .closing-copy-r2{width:calc(100% - 48px);font-size:17px;text-align:left}
}
/* Keep the original 3+2 statistics rhythm on tablets instead of collapsing to 2 columns. */
@media (max-width:760px) and (min-width:561px){
  .page-about .stats-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:42px 12px}
  .page-about .stat{grid-column:span 2}
  .page-about .stat:nth-child(4){grid-column:2/span 2}
  .page-about .stat:nth-child(5){grid-column:4/span 2}
}
/* Do not put the photograph above the heading. On phones: title, centered photo, then quotation. */
@media (max-width:640px){
  .page-about .president-section.about-president-r2{padding-top:34px}
  .page-about .president-grid-r2{
    width:calc(100% - 28px);
    grid-template-columns:1fr;
    grid-template-areas:"title" "photo" "text";
    row-gap:30px;
  }
  .page-about .president-title-r2{font-size:24px;max-width:520px;margin-inline:auto}
  .page-about .president-photo-r2{width:100%;padding-inline:6px}
  .page-about .president-photo-r2 img{max-width:620px}
  .page-about .president-text-r2{max-width:620px;margin-inline:auto}
  .page-about .president-text-r2 p{font-size:17px;line-height:1.55;text-align:left}
  .page-about .closing-copy-r2{width:calc(100% - 28px);margin-top:42px;font-size:17px;text-align:left}
}
@media (max-width:560px){
  .page-about .stats-grid{grid-template-columns:1fr 1fr;gap:34px 16px}
  .page-about .stat,.page-about .stat:nth-child(4),.page-about .stat:nth-child(5){grid-column:auto}
  .page-about .stat:nth-child(5){grid-column:1/-1}
}
@media (max-width:400px){
  .page-about .stats-grid{grid-template-columns:1fr}
  .page-about .stat:nth-child(5){grid-column:auto}
}