/* About KEC > History (/about/history): intro card and the list of principals (table principal, latest first). */
.hs-col { --hs-navy: #0d2847; --hs-blue: #285690; --hs-gold: #e0a526; --hs-ink: #1f2a3d; --hs-muted: #5d6b82;
          --hs-line: #e3e8f0; --hs-soft: #f4f7fb; font-family: 'Inter', 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.hs-card { margin: 0 0 24px; padding: 28px 32px; border: 1px solid var(--hs-line); border-radius: 16px; background: #fff;
           box-shadow: 0 12px 30px rgba(13, 40, 71, .08); }
.hs-kicker { margin: 0 0 6px; color: var(--hs-gold); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hs-title { margin: 0; color: var(--hs-navy); font-size: 22px; font-weight: 700; line-height: 1.3; }
.hs-intro .hs-title { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--hs-line); }
.hs-text { color: var(--hs-ink); font-size: 16px; line-height: 1.8; text-align: justify; }
.hs-text p { margin: 0 0 14px; }
.hs-text p:last-child { margin-bottom: 0; }
.hs-text strong { color: var(--hs-navy); }

.hs-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--hs-line); }
.hs-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%;
           background: var(--hs-soft); border: 1px solid var(--hs-line); color: var(--hs-blue); font-size: 18px; }
.hs-head .hs-title { flex: 1 1 auto; }
.hs-edit { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid #c9d4e4; border-radius: 999px;
           background: #fff; color: var(--hs-blue) !important; font-size: 13.5px; font-weight: 600; text-decoration: none !important; }
.hs-edit:hover { background: var(--hs-blue); border-color: var(--hs-blue); color: #fff !important; }
.hs-empty { margin: 0; color: var(--hs-muted); }

/* principals: a vertical timeline, latest on top */
.hs-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.hs-timeline::before { content: ""; position: absolute; left: 31px; top: 12px; bottom: 12px; width: 2px; background: var(--hs-line); }
.hs-person { position: relative; display: flex; align-items: center; gap: 18px; margin: 0 0 14px; padding: 12px 18px 12px 0; border-radius: 14px; }
.hs-person:last-child { margin-bottom: 0; }
.hs-person.is-current { padding-left: 0; background: linear-gradient(90deg, rgba(40, 86, 144, .07), rgba(40, 86, 144, 0)); }
.hs-photo { position: relative; z-index: 1; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
            width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--hs-soft); color: #9aabc3; font-size: 24px;
            border: 3px solid #fff; box-shadow: 0 0 0 1px var(--hs-line), 0 6px 14px rgba(13, 40, 71, .12); }
.hs-person.is-current .hs-photo { box-shadow: 0 0 0 2px var(--hs-gold), 0 6px 14px rgba(13, 40, 71, .16); }
.hs-photo img { width: 100%; height: 100%; object-fit: cover; }
.hs-who { flex: 1 1 auto; min-width: 0; }
.hs-name { display: block; color: var(--hs-navy); font-size: 16.5px; font-weight: 600; line-height: 1.4; }
.hs-period { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--hs-muted); font-size: 14px; }
.hs-period i { color: var(--hs-blue); }
.hs-badge { flex: 0 0 auto; padding: 4px 12px; border-radius: 999px; background: #fdf1d6; color: #8a5a00; font-size: 12px;
            font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

@media (max-width: 640px) {
    .hs-card { padding: 22px 18px; }
    .hs-text { font-size: 15px; text-align: left; }
    .hs-person { flex-wrap: wrap; gap: 14px; }
    .hs-badge { margin-left: 82px; }
}

/* About KEC > Principal's Message (/about/principal): the message of the principal in office (table principal) */
.pm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--hs-line); }
.pm-photo { flex: 0 0 auto; width: 132px; height: 132px; border-radius: 50%; overflow: hidden; background: var(--hs-soft);
            border: 4px solid #fff; box-shadow: 0 0 0 3px var(--hs-gold), 0 12px 26px rgba(13, 40, 71, .18); }
.pm-photo img { width: 100%; height: 100%; object-fit: cover; }
.pm-who { flex: 1 1 220px; min-width: 0; }
.pm-who .hs-title { font-size: 26px; }
.pm-role { margin: 6px 0 0; color: var(--hs-muted); font-size: 15px; }
.pm-edit { align-self: flex-start; }
.pm-message { position: relative; padding-left: 22px; border-left: 3px solid var(--hs-gold); }
.pm-message strong { color: var(--hs-blue); font-weight: 600; }
.pm-sign { display: flex; flex-direction: column; gap: 2px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--hs-line);
           color: var(--hs-muted); font-size: 15px; }
.pm-sign strong { color: var(--hs-navy); font-size: 17px; }
.pm-sign a { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--hs-blue) !important; }
@media (max-width: 640px) {
    .pm-head { flex-direction: column; text-align: center; }
    .pm-who { flex: 0 0 auto; }
    .pm-edit { align-self: center; }
    .pm-message { padding-left: 14px; }
}