:root {
    --hrf-red: #c42032;
    --hrf-blue: #114b8b;
    --hrf-blue-dark: #0b315e;
    --hrf-ink: #172033;
    --hrf-muted: #667085;
    --hrf-soft: #f3f7fb;
}

* { letter-spacing: 0; }

body {
    background: #fff;
    color: var(--hrf-ink);
    font-family: Arial, Helvetica, sans-serif;
}

a {
    color: var(--hrf-blue);
    text-decoration: none;
}

.site-header .navbar,
.admin-nav {
    background: linear-gradient(90deg, var(--hrf-blue-dark), var(--hrf-blue) 58%, var(--hrf-red));
}

.brand-mark {
    align-items: center;
    background: #fff;
    border-radius: 8px;
    color: var(--hrf-red);
    display: inline-flex;
    font-weight: 800;
    height: 42px;
    justify-content: center;
    min-width: 48px;
}

.navbar .nav-link { font-weight: 600; }

.navbar .nav-link.active {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 6px;
}

.hero {
    align-items: center;
    background:
        linear-gradient(90deg, rgba(11, 49, 94, .94), rgba(17, 75, 139, .82), rgba(196, 32, 50, .72)),
        url('https://images.unsplash.com/photo-1529107386315-e1a2ed48a620?auto=format&fit=crop&w=1600&q=80') center/cover;
    color: #fff;
    display: flex;
    min-height: 560px;
}

.hero h1 {
    font-size: clamp(2.3rem, 5vw, 5rem);
    font-weight: 800;
    line-height: 1.02;
}

.section-title {
    color: var(--hrf-blue-dark);
    font-weight: 800;
}

.accent-line {
    background: var(--hrf-red);
    border-radius: 8px;
    height: 5px;
    width: 72px;
}

.feature-tile,
.article-card,
.profile-card,
.stat-box,
.auth-box,
.admin-card {
    border: 1px solid #e6ebf2;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(20, 43, 76, .08);
}

.feature-tile {
    background: #fff;
    min-height: 220px;
    padding: 28px;
}

.feature-icon {
    align-items: center;
    background: rgba(196, 32, 50, .12);
    border-radius: 8px;
    color: var(--hrf-red);
    display: inline-flex;
    font-size: 1.7rem;
    height: 54px;
    justify-content: center;
    width: 54px;
}

.band { background: var(--hrf-soft); }

.about-hero {
    background:
        linear-gradient(90deg, rgba(11, 49, 94, .96), rgba(17, 75, 139, .84), rgba(196, 32, 50, .76)),
        url('https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&w=1600&q=80') center/cover;
    color: #fff;
}

.about-hero h1 {
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    font-weight: 800;
    line-height: 1.03;
}

.about-signal,
.mission-panel,
.pillar-card,
.vision-band {
    border: 1px solid #e6ebf2;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(20, 43, 76, .08);
}

.about-signal {
    background: rgba(255, 255, 255, .94);
    color: var(--hrf-blue-dark);
}

.about-signal strong,
.about-signal span {
    border-bottom: 1px solid #e6ebf2;
    display: block;
    font-size: 1.1rem;
    padding: 12px 0;
}

.about-signal span:last-child { border-bottom: 0; }

.mission-panel,
.pillar-card {
    background: #fff;
}

.pillar-card {
    transition: transform .2s ease, box-shadow .2s ease;
}

.pillar-card:hover {
    box-shadow: 0 18px 34px rgba(20, 43, 76, .12);
    transform: translateY(-3px);
}

.vision-band {
    background: linear-gradient(90deg, var(--hrf-blue-dark), var(--hrf-blue) 62%, var(--hrf-red));
    color: #fff;
}

.vision-label {
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 8px;
    display: inline-block;
    font-weight: 800;
    padding: 12px 16px;
    text-transform: uppercase;
}

.btn-primary {
    background: var(--hrf-blue);
    border-color: var(--hrf-blue);
}

.btn-primary:hover {
    background: var(--hrf-blue-dark);
    border-color: var(--hrf-blue-dark);
}

.btn-danger {
    background: var(--hrf-red);
    border-color: var(--hrf-red);
}

.article-card img,
.profile-card img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    width: 100%;
}

.article-fallback {
    align-items: center;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--hrf-blue), var(--hrf-red));
    color: #fff;
    display: flex;
    font-size: 3rem;
    justify-content: center;
    width: 100%;
}

.article-list-item {
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(20, 43, 76, .08);
}

.article-list-item h2 a {
    color: var(--hrf-blue-dark);
}

.article-list-item h2 a:hover {
    color: var(--hrf-red);
}

.article-title-list {
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(20, 43, 76, .08);
    overflow: hidden;
}

.article-title-row {
    align-items: center;
    border-bottom: 1px solid #e6ebf2;
    color: var(--hrf-blue-dark);
    display: flex;
    font-size: 1.08rem;
    font-weight: 800;
    gap: 18px;
    justify-content: space-between;
    padding: 18px 22px;
}

.article-title-row:last-child {
    border-bottom: 0;
}

.article-title-row:hover {
    background: var(--hrf-soft);
    color: var(--hrf-red);
}

.article-title-row small {
    color: var(--hrf-muted);
    flex: 0 0 auto;
    font-weight: 600;
}

.article-list-img,
.article-list-fallback {
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    width: 100%;
}

.article-list-img {
    object-fit: cover;
}

.article-list-fallback {
    align-items: center;
    background: linear-gradient(135deg, var(--hrf-blue), var(--hrf-red));
    color: #fff;
    display: flex;
    font-size: 2.2rem;
    justify-content: center;
}

.article-detail-img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
}

.article-horizontal-list {
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(20, 43, 76, .08);
    overflow: hidden;
}

.article-horizontal-item {
    border-bottom: 1px solid #e6ebf2;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(180px, 280px) 1fr;
    padding: 24px;
}

.article-horizontal-item:last-child {
    border-bottom: 0;
}

.article-horizontal-media img,
.article-horizontal-media .article-fallback {
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    object-fit: cover;
    width: 100%;
}

.article-horizontal-content h4 {
    color: var(--hrf-blue-dark);
    font-weight: 800;
}

.article-body {
    color: #263244;
    font-size: 1.08rem;
    line-height: 1.8;
}

.article-detail-card {
    margin-inline: auto;
    max-width: 920px;
}

.article-detail-share {
    border-top: 1px solid #e6ebf2;
}

.article-share-panel {
    top: 96px;
}

.profile-card img { aspect-ratio: 1 / 1; }

.member-card {
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(20, 43, 76, .08);
    overflow: hidden;
}

.member-card img,
.member-photo-fallback {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}

.member-photo-fallback,
.member-avatar {
    align-items: center;
    background: linear-gradient(135deg, var(--hrf-blue), var(--hrf-red));
    color: #fff;
    display: inline-flex;
    justify-content: center;
}

.member-photo-fallback {
    font-size: 4rem;
}

.member-avatar {
    border-radius: 8px;
    font-size: 1.6rem;
    height: 64px;
    width: 64px;
}

.member-horizontal-list {
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(20, 43, 76, .08);
    overflow: hidden;
}

.member-horizontal-item {
    border-bottom: 1px solid #e6ebf2;
    display: grid;
    gap: 24px;
    grid-template-columns: 150px 1fr;
    padding: 22px;
}

.member-horizontal-item:last-child {
    border-bottom: 0;
}

.member-horizontal-photo img,
.member-horizontal-photo .member-photo-fallback {
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    object-fit: cover;
    width: 100%;
}

.member-horizontal-content {
    align-self: center;
}

.site-footer {
    background: var(--hrf-blue-dark);
    color: rgba(255, 255, 255, .82);
}

.site-footer a {
    color: rgba(255, 255, 255, .82);
    display: block;
    margin-bottom: 8px;
}

.site-footer h6 {
    color: #fff;
    font-weight: 800;
}

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .15); }

.admin-body { background: #f5f7fb; }

.admin-card { background: #fff; }

.table-responsive { border-radius: 8px; }

@media (max-width: 991px) {
    .hero { min-height: 500px; }

    .article-horizontal-item {
        grid-template-columns: 1fr;
    }

    .article-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .member-horizontal-item {
        grid-template-columns: 1fr;
    }

    .member-horizontal-photo {
        max-width: 180px;
    }
}