.blog-page {
    width:100%;
    max-width:860px;
    margin:0 auto;
    box-sizing:border-box;
    color:#172033;
    font-family:Verdana,Arial,sans-serif;
}

.blog-heading {
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:flex-end;
    margin-bottom:24px;
    padding-bottom:16px;
    border-bottom:2px solid #d7dde5;
}

.blog-heading h1,
.blog-article h1 {
    margin:0;
    color:#172033;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(30px,5vw,46px);
    line-height:1.08;
}

.blog-heading p {
    margin:7px 0 0;
    color:#657084;
    font-size:13px;
}

.blog-list {
    display:grid;
    gap:14px;
}

.blog-card {
    padding:14px 17px;
    border:1px solid #d7dde5;
    border-radius:8px;
    background:#fff;
    box-shadow:0 2px 7px rgba(15,23,42,.06);
}

.blog-card h2 {
    margin:6px 0 5px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:22px;
    line-height:1.2;
}

.blog-card h2 a,
.blog-card-footer a,
.blog-back {
    color:#174f87;
    text-decoration:none;
}

.blog-card h2 a:hover,
.blog-card-footer a:hover,
.blog-back:hover {
    text-decoration:underline;
}

.blog-card > p {
    margin:0;
    color:#465166;
    font-size:13px;
    line-height:1.58;
}

.blog-card-meta {
    display:flex;
    gap:9px;
    align-items:center;
    flex-wrap:wrap;
    color:#687386;
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.035em;
}

.blog-type {
    display:inline-block;
    padding:3px 7px;
    border-radius:4px;
    color:#174f87;
    background:#eaf3fc;
}

.blog-card-footer {
    display:flex;
    justify-content:space-between;
    gap:15px;
    margin-top:9px;
    color:#687386;
    font-size:12px;
}

.blog-back {
    display:inline-block;
    margin-bottom:22px;
    font-size:13px;
    font-weight:700;
}

.blog-article > header {
    margin-bottom:27px;
    padding-bottom:20px;
    border-bottom:1px solid #d7dde5;
}

.blog-article h1 {
    margin-top:10px;
}

.blog-lead {
    max-width:720px;
    margin:13px 0 0;
    color:#465166;
    font-size:16px;
    line-height:1.55;
}

.blog-byline {
    margin:11px 0 0;
    color:#687386;
    font-size:12px;
}

.blog-markdown {
    max-width:760px;
    color:#283247;
    font-family:Georgia,"Times New Roman",serif;
    font-size:17px;
    line-height:1.72;
}

.blog-markdown h2,
.blog-markdown h3,
.blog-markdown h4 {
    margin:1.65em 0 .55em;
    color:#172033;
    line-height:1.2;
}

.blog-markdown p,
.blog-markdown ul,
.blog-markdown ol,
.blog-markdown blockquote {
    margin:0 0 1.1em;
}

.blog-markdown img {
    display:block;
    width:auto;
    max-width:100%;
    height:auto;
    margin:24px auto;
    border-radius:5px;
}

.blog-markdown blockquote {
    padding:2px 0 2px 18px;
    border-left:4px solid #b9d6f9;
    color:#4c586d;
}

.blog-markdown code {
    padding:2px 4px;
    border-radius:3px;
    background:#eef2f6;
    font-size:.88em;
}

.blog-markdown pre {
    overflow:auto;
    padding:14px;
    border-radius:6px;
    background:#172033;
    color:#f8fafc;
}

.blog-loading,
.blog-empty,
.blog-error {
    padding:24px;
    border:1px solid #d7dde5;
    border-radius:7px;
    background:#f8fafc;
    color:#5b6679;
}

.blog-error {
    border-color:#efc6c2;
    background:#fff5f4;
    color:#9a3028;
}

.blog-responses {
    max-width:760px;
    margin-top:42px;
    padding-top:27px;
    border-top:2px solid #d7dde5;
}

.blog-responses-heading {
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:baseline;
    margin-bottom:15px;
}

.blog-responses-heading h2,
.blog-response-form h3 {
    margin:0;
    color:#172033;
    font-family:Georgia,"Times New Roman",serif;
}

.blog-responses-heading h2 {
    font-size:25px;
}

.blog-responses-heading p {
    margin:0;
    color:#687386;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.035em;
}

.blog-response-list {
    display:grid;
    gap:11px;
}

.blog-response {
    padding:13px 15px;
    border:1px solid #dce4ed;
    border-radius:7px;
    background:#f8fafc;
}

.blog-response header {
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:baseline;
    margin-bottom:7px;
}

.blog-response strong {
    color:#24364d;
    font-size:13px;
}

.blog-response time {
    color:#748094;
    font-size:10px;
}

.blog-response > p {
    margin:0;
    color:#3f4b60;
    font-size:13px;
    line-height:1.58;
}

.blog-response-empty,
.blog-response-error {
    margin:0;
    padding:13px 15px;
    border:1px solid #dce4ed;
    border-radius:7px;
    background:#f8fafc;
    color:#687386;
    font-size:12px;
}

.blog-response-error {
    border-color:#efc6c2;
    background:#fff5f4;
    color:#9a3028;
}

.blog-response-form {
    margin-top:22px;
    padding:17px;
    border:1px solid #d7dde5;
    border-radius:8px;
    background:#fff;
    box-shadow:0 2px 7px rgba(15,23,42,.05);
}

.blog-response-form h3 {
    font-size:21px;
}

.blog-response-note {
    margin:5px 0 15px;
    color:#687386;
    font-size:11px;
    line-height:1.5;
}

.blog-response-fields {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.blog-response-fields label {
    display:grid;
    gap:5px;
    color:#344258;
    font-size:11px;
    font-weight:700;
}

.blog-response-message {
    grid-column:1 / -1;
}

.blog-response-fields input,
.blog-response-fields textarea {
    width:100%;
    box-sizing:border-box;
    border:1px solid #bac5d2;
    border-radius:5px;
    background:#fff;
    color:#172033;
    font:13px/1.45 Verdana,Arial,sans-serif;
}

.blog-response-fields input {
    min-height:38px;
    padding:8px 10px;
}

.blog-response-fields textarea {
    min-height:120px;
    padding:10px;
    resize:vertical;
}

.blog-response-fields input:focus,
.blog-response-fields textarea:focus {
    outline:3px solid rgba(74,144,226,.22);
    border-color:#4a90e2;
}

.blog-response-honeypot {
    position:absolute!important;
    left:-10000px!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
}

.blog-response-submit {
    display:flex;
    gap:13px;
    align-items:center;
    margin-top:14px;
}

.blog-response-submit button {
    min-height:38px;
    padding:8px 13px;
    border:0;
    border-radius:5px;
    background:#174f87;
    color:#fff;
    font:700 12px Verdana,Arial,sans-serif;
    cursor:pointer;
}

.blog-response-submit button:hover {
    background:#103d68;
}

.blog-response-submit button:disabled {
    opacity:.6;
    cursor:wait;
}

.blog-response-submit p {
    margin:0;
    color:#5b6679;
    font-size:11px;
    line-height:1.45;
}

.blog-response-submit p.success { color:#1e6a49; }
.blog-response-submit p.error { color:#a52f28; }

.portal-blog-section {
    margin-top:22px;
    padding:18px;
    border:1px solid #dce4ed;
    border-radius:8px;
    background:#f8fafc;
}

.portal-blog-heading {
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:end;
    margin-bottom:13px;
}

.portal-blog-heading h2 {
    margin:0 0 3px;
    font-size:18px;
}

.portal-blog-heading p {
    margin:0;
    color:#687386;
    font-size:11px;
}

.portal-blog-heading > a {
    flex:0 0 auto;
    color:#174f87;
    font-size:12px;
    font-weight:700;
    text-decoration:none;
}

.portal-blog-heading > a:hover,
.portal-blog-card h3 a:hover,
.portal-blog-read:hover {
    text-decoration:underline;
}

.portal-blog-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:11px;
}

.portal-blog-card {
    display:flex;
    min-width:0;
    min-height:116px;
    flex-direction:column;
    padding:11px 12px;
    border:1px solid #d9e3ed;
    border-radius:7px;
    background:#fff;
    box-shadow:0 1px 4px rgba(15,23,42,.045);
}

.portal-blog-card h3 {
    margin:6px 0 4px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:16px;
    line-height:1.25;
}

.portal-blog-card h3 a {
    color:#23364d;
    text-decoration:none;
}

.portal-blog-card > p {
    margin:0 0 7px;
    color:#5a6577;
    font-size:11px;
    line-height:1.5;
}

.portal-blog-read {
    margin-top:auto;
    color:#174f87;
    font-size:11px;
    font-weight:700;
    text-decoration:none;
}

.portal-strip-indexes .portal-shortcut-grid {
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}

.portal-strip-indexes .portal-story-card {
    min-width:0;
    overflow-wrap:anywhere;
}

@media (max-width:900px) {
    .portal-strip-indexes .portal-shortcut-grid {
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media (max-width:760px) {
    .portal-blog-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:620px) {
    .blog-card {
        padding:13px 14px;
    }

    .blog-card-footer,
    .portal-blog-heading {
        align-items:flex-start;
        flex-direction:column;
    }

    .portal-blog-grid {
        grid-template-columns:1fr;
    }

    .portal-strip-indexes .portal-shortcut-grid {
        grid-template-columns:1fr !important;
    }

    .blog-response-fields {
        grid-template-columns:1fr;
    }

    .blog-response-message {
        grid-column:auto;
    }

    .blog-response header,
    .blog-response-submit {
        align-items:flex-start;
        flex-direction:column;
    }
}
