/* ==========================================================================
   Banexco Traders Inc. — css/about.css
   Page-local styles for about.html (§4.2). Additive only — linked after
   main.css. Tokens only, no color literals, no token redefinition.
   ========================================================================== */

/* PAGE INTRO */
.page-intro { padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.page-intro h1 { margin-bottom: 0.75rem; }
.page-intro-sub {
  font-size: 1.125rem;
  max-width: 34rem;
  margin: 0;
}

/* HISTORY — 沿革 timeline register: year bold left, event right, thin rules */
.history-intro { max-width: 44rem; margin-bottom: 2.75rem; }

.timeline { margin: 0; max-width: 44rem; }
.timeline-row {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1.5rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--sage);
}
.timeline-row:last-child { border-bottom: 1px solid var(--sage); }
.timeline-row dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-body);
  color: var(--pine);
  font-variant-numeric: tabular-nums;
}
.timeline-row dd {
  margin: 0;
  color: var(--ink-soft);
}
@media (max-width: 480px) {
  .timeline-row { grid-template-columns: 4.5rem 1fr; gap: 1rem; }
}

/* VISION */
.vision-block p { color: var(--ink-soft); max-width: 44rem; }

/* VALUES — 5 simple ruled rows, dignified, no icons */
.values-list {
  list-style: none;
  max-width: 44rem;
}
.values-list li {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--h3);
  letter-spacing: -0.02em;
  color: var(--ink);
  padding-block: 1.1rem;
  border-top: 1px solid var(--sage);
}
.values-list li:last-child { border-bottom: 1px solid var(--sage); }

/* LEADERSHIP */
.leadership-block p { color: var(--ink-soft); max-width: 44rem; }

/* COMPANY DATA */
.company-data h2 { margin-bottom: 1.75rem; }

/* TEAM PHOTO band */
.team-band { padding-top: 0; }
.team-photo { margin: 0; }
.team-photo img { width: 100%; border-radius: var(--radius); }
.team-photo figcaption,
.heritage-photo figcaption {
  font-size: var(--text-small);
  color: var(--ink-soft);
  margin-top: 0.75rem;
}
.heritage-photo {
  margin: 3rem 0 0;
  max-width: 480px; /* qc_* images are 720x960 native — never render wider (§7) */
}
.heritage-photo img { width: 100%; border-radius: var(--radius); }