/* V25.2 · ABOUT heading supports a taller 1200 × 600 image without cropping. */
/* Small museum label: only the ABOUT eyebrow, not other section headings. */
.about .about-grid > div:first-child > .section-label {
  display:inline-flex;
  align-items:center;
  width:fit-content;
  max-width:100%;
  margin-bottom:clamp(20px,2.2vw,30px);
  /* Flat exhibit eyebrow, not an interactive pill or button. */
  padding:5px 10px 5px 10px;
  border:0;
  border-left:3px solid #E88E6D;
  border-radius:0;
  background:rgba(255,248,235,.70);
  box-shadow:none;
  color:#A45338;
  text-shadow:0 1px 2px rgba(255,252,246,.95);
  line-height:1.55;
  letter-spacing:.14em;
}
.about .about-grid .about-section-mark {
  width:23px;
  height:23px;
  flex:0 0 23px;
  margin:0 9px 0 0;
}
/* The about heading is a replaceable illustration, not HTML text.
   The default SVG has left-weighted content inside its own 1000px canvas.
   Compensate ONLY for that stock SVG: a custom PNG stays truly centered. */
.about .about-grid > div:first-child {
  min-width:0;
}
.about .about-title-art {
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 auto;
  text-align:center;
  overflow:hidden; /* Prevent blank SVG canvas from creating horizontal scrolling on phones. */
}
.about .about-title-art > img {
  display:block;
  width:100%;
  max-width:min(600px,100%);
  height:auto;
  max-height:none;
  aspect-ratio:auto;
  margin-inline:auto;
  object-fit:contain;
  object-position:center center;
  transform:none;
}
/* The stock SVG uses x=0 text inside a wide transparent artboard. */
.about .about-title-art > img[src$="about-title.svg"] {
  transform:translateX(clamp(38px, 7.5vw, 108px));
}
/* Statistics: four evenly distributed and centered cells inside the panel. */
.about .about-right .stat-row {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;
  justify-items:stretch;
  width:100%;
  gap:10px;
}
.about .about-right .stat-row > div {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-width:0;
  padding:0 2px;
}
.about .about-right .stat-row strong,
.about .about-right .stat-row span {text-align:center;}
.about .about-right .stat-row span {
  margin-top:7px;
  white-space:normal;
  overflow-wrap:anywhere;
}
@media (max-width:900px){
  .about .about-title-art > img {max-width:min(600px,100%);}
  .about .about-title-art > img[src$="about-title.svg"] {transform:translateX(clamp(30px, 6vw, 65px));}
  .about .about-right .stat-row {grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px;}
}
@media (max-width:640px){
  .about .about-grid > div:first-child > .section-label {padding:4px 8px;font-size:10px;}
  .about .about-title-art > img[src$="about-title.svg"] {transform:translateX(clamp(18px, 9vw, 42px));}
  .about .about-right .stat-row {gap:16px 10px;}
  .about .about-right .stat-row strong {font-size:clamp(28px,8vw,34px);}
}

/* V25.3 | 收合 ABOUT 底部多餘留白：讓資訊框不跟著左邊圖片撐高。 */
.about .about-grid {
  align-items: center;
}
/* 原本 .section 會給上下各約 100px 的內距；只縮短 ABOUT 底部。 */
.about.section {
  padding-bottom: clamp(26px, 2.8vw, 40px);
}
/* 平板／手機維持自然直排，避免圖片縮小後仍保留過大底部。 */
@media (max-width: 760px) {
  .about .about-grid { align-items: stretch; }
  .about.section { padding-bottom: 30px; }
}