:root {
    --hshq-ink: #17211b;
    --hshq-ink-soft: #34423a;
    --hshq-muted: #66736c;
    --hshq-line: #dde4df;
    --hshq-bg: #f7f9f7;
    --hshq-soft: #eef4ef;
    --hshq-accent: #23633f;
    --hshq-accent-dark: #18462d;
    --hshq-warm: #f4efe4;
    --hshq-radius: 1.25rem;
    --hshq-brand-navy: #17365D;
    --hshq-brand-teal: #2E7D77;
}

html { scroll-behavior: smooth; }
body {
    color: var(--hshq-ink);
    background: #fff;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--hshq-accent); }
a:hover { color: var(--hshq-accent-dark); }

.py-lg-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.bg-soft { background: var(--hshq-bg); }
.article-container { max-width: 900px; }

.site-header { z-index: 1030; }
.site-header .navbar { backdrop-filter: saturate(180%) blur(12px); }
.brand-admin {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: .65rem;
    background: var(--hshq-ink);
    color: #fff;
    font-weight: 800;
}
.brand-logo-mark { display:block; width:2rem; height:2rem; flex:0 0 auto; }
.brand-wordmark { font-size: 1.08rem; letter-spacing: -.025em; color: var(--hshq-brand-navy); font-weight: 650; }
.brand-wordmark strong { color: var(--hshq-brand-teal); font-weight: 800; }
.brand-wordmark-footer { color:#fff; }
.brand-wordmark-footer strong { color:#73d7c7; }
.navbar .nav-link { color: var(--hshq-ink-soft); font-weight: 600; padding-left: .8rem; padding-right: .8rem; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--hshq-accent); }

.hero-section {
    background:
        radial-gradient(circle at 85% 20%, rgba(35, 99, 63, .11), transparent 30rem),
        linear-gradient(180deg, #fbfcfb 0%, #fff 100%);
}
.eyebrow {
    display: inline-block;
    color: var(--hshq-accent);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-weight: 800;
    font-size: .74rem;
}
.hero-section h1, .category-hero h1, .article-header h1 { letter-spacing: -.045em; line-height: 1.05; }
.hero-panel {
    border: 1px solid var(--hshq-line);
    border-radius: var(--hshq-radius);
    background: rgba(255,255,255,.82);
    box-shadow: 0 18px 50px rgba(24, 70, 45, .08);
}
.section-heading { max-width: 780px; }
.topic-card {
    border: 1px solid var(--hshq-line);
    border-radius: var(--hshq-radius);
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.topic-card:hover { transform: translateY(-3px); border-color: #b9c9be; box-shadow: 0 16px 36px rgba(23,33,27,.08); }
.topic-number { font-size: .8rem; font-weight: 800; color: var(--hshq-accent); letter-spacing: .08em; }

.article-card { border-radius: var(--hshq-radius); transition: transform .18s ease, box-shadow .18s ease; }
.article-card:hover { transform: translateY(-2px); box-shadow: 0 .75rem 2rem rgba(0,0,0,.10) !important; }
.article-card-image { display:block; aspect-ratio:16/9; overflow:hidden; background:var(--hshq-soft); }
.article-card-image img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.article-card:hover .article-card-image img { transform: scale(1.02); }
.article-card-placeholder { display:grid; place-items:center; aspect-ratio:16/9; background:linear-gradient(135deg, var(--hshq-soft), #dfe9e2); }
.article-card-placeholder span { font-size:3rem; font-weight:800; color:rgba(35,99,63,.35); }
.article-card-title { line-height:1.3; }
.popular-link { border:1px solid var(--hshq-line); border-radius:1rem; padding:1rem 1.1rem; color:var(--hshq-ink); background:#fff; }
.popular-link small { display:block; color:var(--hshq-accent); font-weight:700; margin-bottom:.15rem; }
.popular-link strong { display:block; }
.popular-link:hover { border-color:#b9c9be; color:var(--hshq-ink); }
.empty-state { border:1px dashed #b9c9be; background:var(--hshq-bg); border-radius:1rem; padding:2rem; color:var(--hshq-muted); text-align:center; }

.category-hero { background: linear-gradient(180deg, #fbfcfb, #fff); }
.breadcrumb a { text-decoration:none; }

.article-header { background: linear-gradient(180deg, #f8faf8, #fff); }
.article-deck { max-width: 760px; font-size: 1.2rem; }
.article-meta { margin-top: 1.25rem; }
.article-hero-image { display:block; width:100%; height:auto; border-radius:var(--hshq-radius); object-fit:cover; background:var(--hshq-soft); }
.article-content { font-size: 1.075rem; color: #253129; }
.article-content > :first-child { margin-top: 0; }
.article-content h2, .article-content h3 { color:var(--hshq-ink); scroll-margin-top:6rem; letter-spacing:-.025em; }
.article-content h2 { font-size:1.7rem; margin-top:2.6rem; margin-bottom:1rem; }
.article-content h3 { font-size:1.3rem; margin-top:2rem; margin-bottom:.8rem; }
.article-content p { margin-bottom:1.15rem; }
.article-content ul, .article-content ol { padding-left:1.25rem; margin-bottom:1.25rem; }
.article-content li + li { margin-top:.4rem; }
.article-content img { max-width:100%; height:auto; border-radius:.9rem; margin:1rem 0; }
.article-content table { width:100%; margin:1.5rem 0; border-collapse:collapse; font-size:.98rem; }
.article-content th, .article-content td { padding:.75rem; border:1px solid var(--hshq-line); vertical-align:top; }
.article-content th { background:var(--hshq-bg); }
.article-content blockquote { border-left:4px solid var(--hshq-accent); margin:1.5rem 0; padding:.25rem 0 .25rem 1rem; color:var(--hshq-ink-soft); }
.article-content code { color:#7d3345; background:#f6f1f2; padding:.1em .3em; border-radius:.25rem; }
.article-toc { border:1px solid var(--hshq-line); background:var(--hshq-bg); border-radius:1rem; padding:1.2rem 1.35rem; }
.article-toc ol { padding-left:1.15rem; }
.article-toc li + li { margin-top:.35rem; }
.article-toc a { text-decoration:none; }
.safety-box, .disclosure-box, .editorial-note { border-radius:1rem; padding:1rem 1.1rem; }
.safety-box { background:#fff8e7; border:1px solid #ecd7a0; color:#5f4b1c; }
.disclosure-box { background:#f3f6fb; border:1px solid #d8e0ec; color:#33445d; }
.editorial-note { background:var(--hshq-soft); border:1px solid #cedbd1; }
.article-sidebar { top:6.25rem; }
.sidebar-card { border:1px solid var(--hshq-line); border-radius:1rem; padding:1.25rem; background:#fff; }

.ad-slot { width:100%; overflow:hidden; }
.ad-label { display:block; font-size:.67rem; color:#8a948e; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.35rem; }

.static-content { max-width:760px; }
.site-footer { background:#152019; }
.footer-copy { max-width:520px; }
.footer-links li + li { margin-top:.5rem; }
.footer-links a { color:rgba(255,255,255,.68); text-decoration:none; }
.footer-links a:hover { color:#fff; }

.btn-dark { --bs-btn-bg: var(--hshq-ink); --bs-btn-border-color: var(--hshq-ink); --bs-btn-hover-bg: #0f1712; --bs-btn-hover-border-color:#0f1712; }
.btn-primary { --bs-btn-bg: var(--hshq-accent); --bs-btn-border-color:var(--hshq-accent); --bs-btn-hover-bg:var(--hshq-accent-dark); --bs-btn-hover-border-color:var(--hshq-accent-dark); }
.pagination { --bs-pagination-color:var(--hshq-accent); --bs-pagination-active-bg:var(--hshq-accent); --bs-pagination-active-border-color:var(--hshq-accent); }

@media (max-width: 991.98px) {
    .py-lg-6 { padding-top:3rem !important; padding-bottom:3rem !important; }
    .article-sidebar { position: static !important; }
}
@media (max-width: 575.98px) {
    .hero-section h1, .category-hero h1, .article-header h1 { font-size:2.35rem; }
    .article-content { font-size:1rem; }
    .article-content h2 { font-size:1.45rem; }
}

/* v1.1 content hardening */
.section-card {
    border: 1px solid var(--hshq-line);
    border-radius: var(--hshq-radius);
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.section-card:hover {
    transform: translateY(-2px);
    border-color: #b9c9be;
    box-shadow: 0 14px 32px rgba(23,33,27,.07);
}
.article-content img,
.article-content img[style] {
    display: block;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
}
.article-content .article-inline-image { margin: 1.25rem auto; }
.article-content .article-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.article-content .article-table th,
.article-content .article-table td { min-width: 8rem; }