/* =====================================================================
   ABOUT.CSS  (only loaded on about.php)
   ===================================================================== */

/* Vision & mission */
.vision-label { font-family: var(--font-ui); font-size: 1rem; font-weight: 600; color: var(--sky) !important; margin-bottom: 1rem; }
.vision-quote { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.3; color: #fff; margin: 0; }
.vision p { color: rgba(255, 255, 255, .82); }

/* Emblem */
.emblem-figure { display: grid; place-items: center; aspect-ratio: 1; max-width: 360px; border-radius: 50%; background: radial-gradient(circle, #fff 55%, var(--paper) 56%); margin-bottom: 1.5rem; }
.emblem-figure img { width: 62%; height: auto; }
.emblem-motto { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.4; color: var(--ink); }
.symbol-list { margin: 0; display: grid; gap: 0; }
.symbol-list > div { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.symbol-list dt { font-weight: 600; color: var(--ink); }
.symbol-list dd { margin: 0; color: var(--muted); }
.swatch-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.swatch-list li { display: grid; grid-template-columns: 40px 1fr; column-gap: .75rem; align-items: center; }
.swatch-list .swatch { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); }
.swatch-list strong { font-size: .95rem; }
.swatch-list li > span:last-child { font-size: .875rem; color: var(--muted); line-height: 1.3; }

/* Anthem */
.anthem { font-family: var(--font-display); font-weight: 500; font-size: 1.18rem; line-height: 1.7; color: var(--ink); border-left: 3px solid var(--maroon); padding-left: 1.5rem; }
.anthem p:last-child { font-style: italic; margin-bottom: 0; }

/* Skill Fest */
.skill-quote { margin: 2rem 0; padding: 1.5rem 1.75rem; background: var(--paper); border-radius: var(--radius); }
.skill-quote blockquote { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.4; color: var(--ink); margin: 0; }
.skill-photos { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; }
.skill-photos img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }
.skill-photos img:first-child { aspect-ratio: auto; }