/* ==========================================================================
   about.css — layout + mobile responsiveness for about.html
   Loaded after style.css (page-specific, doesn't affect other pages)
   ========================================================================== */

/* ---- "CODASH" gold mark box (was inline styles) ---- */
.mark-box{
  background: var(--gold);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 48px;
  text-align: center;
}
.mark-box-word{
  font-family: var(--font-display);
  font-size: 3rem;
  display: block;
}
.mark-box-sub{
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink);
}

/* ---- team grid: 3 columns, but ONLY above the tablet breakpoint —
   style.css already collapses .team-grid to 2 cols at 900px and 1 col
   at 560px; scoping with min-width keeps those intact instead of
   fighting them (equal-specificity rules loaded later would otherwise win) ---- */
.team-grid--3{ max-width: 820px; }
@media (min-width: 901px){
  .team-grid--3{ grid-template-columns: repeat(3, 1fr); }
}

/* ---- tablet ---- */
@media (max-width: 860px){
  .mark-box{ padding: 36px; }
  .mark-box-word{ font-size: 2.4rem; }
}

/* ---- mobile ---- */
@media (max-width: 600px){
  .page-hero{ padding: 44px 0 36px; }
  .page-hero p{ font-size: 1rem; }

  .split{ gap: 32px; }

  .mark-box{ padding: 32px 24px; }
  .mark-box-word{ font-size: 2rem; }
  .mark-box-sub{ font-size: 0.8rem; }

  .value-list{ gap: 16px; }
  .value-item h4{ font-size: 1rem; }
  .value-item p{ font-size: 0.88rem; }

  .team-card{ padding: 20px 16px; }
  .team-card h3{ font-size: 1rem; }
  .team-card span{ font-size: 0.74rem; }
}

/* ---- small phones ---- */
@media (max-width: 380px){
  .mark-box{ padding: 26px 18px; }
  .mark-box-word{ font-size: 1.7rem; }
}