/* Shared typography for published articles and the authoring canvas. */
:is(.article-copy, .rich-editor__canvas) {
    color: #425466;
    font:
        400 17px/1.85 "Inter",
        sans-serif;
    overflow-wrap: anywhere;
}
:is(.article-copy, .rich-editor__canvas) :is(p, li, div, span) {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}
:is(.article-copy, .rich-editor__canvas) p {
    margin: 0 0 1.15em !important;
}
:is(.article-copy, .rich-editor__canvas) :is(h1, h2, h3, h4, h5, h6) {
    font-family: "Inter", sans-serif !important;
    font-weight: 700 !important;
    color: #17324f !important;
    line-height: 1.4 !important;
    letter-spacing: -0.025em;
    margin: 1.65em 0 0.65em !important;
}
:is(.article-copy, .rich-editor__canvas) :is(h1, h2) {
    font-size: 28px !important;
}
:is(.article-copy, .rich-editor__canvas) h3 {
    font-size: 23px !important;
}
:is(.article-copy, .rich-editor__canvas) :is(h4, h5, h6) {
    font-size: 20px !important;
}
:is(.article-copy, .rich-editor__canvas) > :first-child {
    margin-top: 0 !important;
}
:is(.article-copy, .rich-editor__canvas) :is(ul, ol) {
    display: block;
    margin: 0.5em 0 1.4em !important;
    padding-left: 1.6em !important;
    list-style-position: outside !important;
}
:is(.article-copy, .rich-editor__canvas) ul {
    list-style-type: disc !important;
}
:is(.article-copy, .rich-editor__canvas) ol {
    list-style-type: decimal !important;
}
:is(.article-copy, .rich-editor__canvas) li {
    display: list-item;
    margin: 0.45em 0 !important;
    padding-left: 0.2em;
}
:is(.article-copy, .rich-editor__canvas) li::marker {
    color: #ee5928;
    font-weight: 600;
}
:is(.article-copy, .rich-editor__canvas) li p {
    margin-bottom: 0.45em !important;
}
:is(.article-copy, .rich-editor__canvas) a {
    color: #c8461b !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}
:is(.article-copy, .rich-editor__canvas) blockquote {
    margin: 1.5em 0;
    padding: 20px 24px;
    border-left: 4px solid #f25a29;
    border-radius: 0 12px 12px 0;
    background: #fff6ef;
}
:is(.article-copy, .rich-editor__canvas) blockquote > :last-child {
    margin-bottom: 0 !important;
}
.article-hero {
    padding: 38px 0 48px;
    background: #102f56;
}
.article-hero .container,
.article-section .container {
    max-width: 1180px;
}
.article-hero__content {
    max-width: 960px;
}
.article-hero .breadcrumb {
    margin-bottom: 26px;
    font-size: 13px;
    gap: 10px;
    flex-wrap: wrap;
}
.article-hero .section-tag {
    margin-bottom: 14px;
    font-size: 11px;
    letter-spacing: 0.14em;
}
.article-hero h1 {
    max-width: 950px;
    font-family: "Inter", sans-serif;
    font-size: clamp(28px, 3.2vw, 44px);
    font-weight: 750;
    letter-spacing: -0.035em;
    line-height: 1.23;
    margin-bottom: 18px;
}
.article-hero__content > .article-summary {
    max-width: 780px;
    font-size: 16px;
    line-height: 1.8;
    color: #d7e2ee;
}
.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
    color: #d7e2ee;
    font-size: 12px;
}
.article-meta span {
    padding: 5px 11px;
    border: 1px solid #ffffff30;
    border-radius: 6px;
}
.article-section {
    padding: 48px 0 64px;
}
.article-layout {
    grid-template-columns: minmax(0, 780px) minmax(240px, 280px);
    gap: 48px;
}
.article-content {
    min-width: 0;
}
.article-cover {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin-bottom: 32px;
    border: 1px solid #e4eaf0;
    border-radius: 16px;
}
.article-aside {
    top: 100px;
    min-width: 0;
}
.article-aside > div {
    padding: 26px;
    background: #f5f8fc;
    border: 1px solid #e2e9f1;
    border-radius: 16px;
}
.article-aside h3 {
    font:
        700 23px/1.4 "Inter",
        sans-serif;
    color: #17324f;
    letter-spacing: -0.02em;
}
.article-aside .section-tag {
    font-size: 10px;
    letter-spacing: 0.12em;
}
.article-aside p:not(.section-tag) {
    font-size: 14px;
    color: #526579;
}
.article-aside .article-back {
    color: #17324f;
}
.article-faq {
    margin-top: 40px;
    padding-top: 32px;
}
.article-faq h2 {
    font:
        700 28px/1.4 "Inter",
        sans-serif;
    color: #17324f;
}
.article-faq h2 em {
    font-style: normal;
}
.article-faq summary {
    align-items: center;
    font-size: 16px;
    line-height: 1.5;
}
.article-faq details {
    background: #fafcfe;
    padding: 20px;
}
.article-faq details[open] {
    border-color: #cbd9e7;
    background: #fff;
}
.article-faq details p {
    font-size: 16px;
    color: #425466;
}
.article-faq summary:focus-visible {
    outline: 2px solid #f25a29;
    outline-offset: 6px;
}
.blog-editor {
    max-width: 1100px;
    margin: 0 auto;
}
.blog-editor .editor-card {
    padding: clamp(18px, 3vw, 30px);
    border-color: #e2e9f1;
    box-shadow: 0 4px 20px #17324f04;
}
.blog-editor .editor-card h2 {
    font:
        700 21px/1.4 "Inter",
        sans-serif;
    color: #17324f;
}
.blog-editor .form-field label {
    font-size: 13px;
}
.blog-editor .form-field :is(input, textarea) {
    font:
        14px/1.6 "Inter",
        sans-serif;
}
.blog-editor .form-field small {
    font-size: 12px;
    color: #64748b;
    line-height: 1.6;
}
.blog-editor .rich-toolbar {
    padding: 10px;
    background: #f5f8fc;
    border-color: #e2e9f1;
}
.blog-editor .rich-toolbar :is(button, select) {
    height: 36px;
    border-color: #d9e2ec;
    color: #17324f;
    font:
        600 12px "Inter",
        sans-serif;
}
.blog-editor .rich-toolbar button:hover {
    color: #fff;
}
.blog-editor .rich-editor__canvas {
    min-height: 480px;
    padding: clamp(18px, 3vw, 36px);
}
.blog-editor .rich-editor__canvas:focus {
    box-shadow: inset 0 0 0 2px #adc5df;
}
.blog-editor .publish-toggle input:focus-visible + span {
    outline: 2px solid #f25a29;
    outline-offset: 3px;
}
.blog-editor .editor-actions {
    position: sticky;
    bottom: 12px;
    padding: 16px 20px;
    border: 1px solid #e2e9f1;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 30px #17324f12;
    z-index: 5;
}
@media (max-width: 991.98px) {
    .article-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
    .article-aside {
        position: static;
    }
    .article-aside > div {
        max-width: none;
    }
}
@media (max-width: 767.98px) {
    .article-hero {
        padding: 28px 0 34px;
    }
    .article-section {
        padding: 28px 0 40px;
    }
    .article-cover {
        margin-bottom: 26px;
        border-radius: 12px;
    }
    :is(.article-copy, .rich-editor__canvas) {
        font-size: 16px;
        line-height: 1.8;
    }
    :is(.article-copy, .rich-editor__canvas) :is(h1, h2) {
        font-size: 24px !important;
    }
    :is(.article-copy, .rich-editor__canvas) h3 {
        font-size: 21px !important;
    }
}
@media (max-width: 680px) {
    .blog-editor .editor-card__head {
        flex-wrap: wrap;
    }
    .blog-editor .rich-editor__canvas {
        min-height: 320px;
    }
}