@font-face {
    font-family:Outfit;
    src:url('/fonts/outfit/outfit-400.ttf');
    font-weight:400;
    font-display:swap
}
@font-face {
    font-family:Outfit;
    src:url('/fonts/outfit/outfit-500.ttf');
    font-weight:500;
    font-display:swap
}
@font-face {
    font-family:Outfit;
    src:url('/fonts/outfit/outfit-600.ttf');
    font-weight:600;
    font-display:swap
}
@font-face {
    font-family:Outfit;
    src:url('/fonts/outfit/outfit-700.ttf');
    font-weight:700;
    font-display:swap
}
@font-face {
    font-family:Outfit;
    src:url('/fonts/outfit/outfit-800.ttf');
    font-weight:800;
    font-display:swap
}
:root {
    --navy:#00264c;
    --blue:#004c8c;
    --slate:#526a77;
    --gold:#cca566;
    --orange:#ff8c00;
    --bg:#f8fafc;
    --line:#dfe6eb;
    --radius:12px
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:32px
}
body.blog-page {
    margin:0;
    background:var(--bg);
    color:var(--navy);
    font:400 16px/1.6 Outfit,sans-serif;
    -webkit-font-smoothing:antialiased
}
h1,h2,h3,p {
    margin:0
}
a {
    color:inherit;
    text-decoration:none
}
button,input {
    font:inherit
}
button,a,input {
    outline-offset:5px
}
a:focus-visible,button:focus-visible,input:focus-visible {
    outline:2px solid var(--blue)
}
a:hover {
    color:var(--blue)
}
img {
    max-width:100%;
    height:auto;
    display:block
}
.wrap {
    max-width:1280px;
    width:calc(100% - 112px);
    margin:auto
}
.icon {
    width:22px;
    height:22px;
    flex-shrink:0;
    vertical-align:middle
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    border-radius:999px;
    padding:13px 24px;
    font-size:15px;
    font-weight:600;
    line-height:1.4;
    min-height:48px;
    white-space:nowrap;
    border:1px solid transparent;
    cursor:pointer
}
.primary {
    color:var(--navy);
    background:linear-gradient(115deg,#cca566,#ff981d);
    box-shadow:0 5px 15px #cca56626
}
.primary:hover {
    color:var(--navy);
    background:#ffae47
}
.outline {
    border-color:#c7d2da;
    background:transparent
}
.navy {
    background:var(--navy);
    color:white
}
.navy:hover {
    background:var(--blue);
    color:white
}
.eyebrow {
    display:block;
    font-size:11px;
    font-weight:600;
    letter-spacing:1.8px;
    color:var(--slate);
    line-height:1.6
}
.small-dot {
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--gold);
    margin-right:9px
}
.gold {
    color:#9c773b
}
.category {
    font-size:12px;
    line-height:1.5;
    font-weight:600;
    color:#8b682e;
    display:block
}
.text-link {
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-size:14px;
    font-weight:600;
    min-height:44px
}
.meta {
    font-size:13px;
    color:var(--slate)
}
.meta b,.card-meta b,.detail-meta b {
    font-weight:400;
    margin:0 8px
}
.icon-box {
    background:#f5eee2;
    color:#916b31;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:10px;
    flex-shrink:0
}
.logo img {
    width:145px;
    height:64px;
    object-fit:contain
}
.index-hero {
    padding:64px 0 44px;
    background:radial-gradient(ellipse at 85% 0,#f2e9d8 0,transparent 47%),linear-gradient(180deg,#f8fafc,#f1f5f7);
    border-bottom:1px solid var(--line)
}
.hero-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-bottom:48px;
    gap:32px
}
.hero-top h1 {
    font-size:54px;
    font-weight:600;
    letter-spacing:-1.8px;
    line-height:1.15;
    margin:16px 0 20px
}
.hero-top p {
    color:var(--slate);
    font-size:18px;
    line-height:1.65
}
.hero-jump {
    font-size:14px;
    display:flex;
    gap:22px;
    align-items:center;
    line-height:1.45;
    margin-right:16px
}
.hero-jump .icon {
    width:40px;
    height:40px;
    border:1px solid #cbb890;
    padding:9px;
    border-radius:50%;
    color:#916b31
}
.guide-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
    color:var(--slate);
    font-size:12px
}
.guide-heading span:first-child {
    font-size:10px;
    font-weight:600;
    letter-spacing:1.6px
}
.guides {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px
}
.guide-card {
    display:block;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:22px;
    box-shadow:0 4px 12px #00264c03;
    transition:transform .2s
}
.guide-card:hover {
    transform:translateY(-4px);
    color:var(--navy);
    border-color:var(--gold)
}
.guide-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px
}
.guide-no {
    font-size:12px;
    color:#9aabb6
}
.guide-card p {
    font-size:13px;
    color:var(--slate)
}
.guide-link {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:22px;
    font-size:12px;
    font-weight:500
}
.guide-link .icon {
    width:19px;
    height:19px
}
.featured-section {
    padding-top:48px
}
.section-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-bottom:24px
}
.section-heading h2 {
    font-size:29px;
    font-weight:600;
    letter-spacing:-.6px;
    line-height:1.3
}
.section-heading .eyebrow {
    margin-bottom:9px;
    font-size:10px
}
.editor-pick {
    font-size:12px;
    color:var(--slate);
    display:flex;
    gap:7px;
    align-items:center
}
.editor-pick .icon {
    color:#a88143;
    width:17px;
    height:17px
}
.featured {
    display:grid;
    grid-template-columns:1.08fr 1fr;
    border:1px solid var(--line);
    border-radius:16px;
    overflow:hidden;
    background:white;
    align-items:stretch
}
.featured-art {
    display:flex;
    background:var(--navy)
}
.featured-art img {
    width:100%;
    height:100%;
    object-fit:contain
}
.featured-copy {
    padding:40px 44px
}
.featured-copy p {
    font-size:15px;
    color:var(--slate);
    line-height:1.65;
    max-width:425px
}
.featured-copy .meta {
    margin:20px 0 12px
}
.section {
    padding-top:64px;
    padding-bottom:64px
}
.cards {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px
}
.article-card {
    background:white;
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    display:flex;
    flex-direction:column
}
.card-image {
    display:block;
    aspect-ratio:16/9;
    overflow:hidden
}
.card-image img {
    height:100%;
    width:100%;
    object-fit:contain;
    transition:transform .3s
}
.card-image:hover img {
    transform:scale(1.03)
}
.card-body {
    padding:24px;
    display:flex;
    flex-direction:column;
    flex:1
}
.card-body h3 {
    font-size:21px;
    line-height:1.3;
    font-weight:600;
    letter-spacing:-.2px;
    margin:11px 0 12px
}
.card-body p {
    font-size:14px;
    line-height:1.6;
    color:var(--slate);
    margin-bottom:20px
}
.card-meta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:auto;
    padding-top:16px;
    border-top:1px solid #edf0f3;
    font-size:12px;
    color:var(--slate)
}
.card-meta a {
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    color:var(--navy)
}
.topics-section {
    padding:52px 0;
    background:#eef3f6;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
}
.topics-section .section-heading p {
    color:var(--slate);
    font-size:14px;
    max-width:250px
}
.topics {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px
}
.topic {
    display:flex;
    gap:15px;
    align-items:center;
    background:white;
    border:1px solid var(--line);
    border-radius:12px;
    padding:20px
}
.topic strong {
    display:block;
    font-weight:500;
    font-size:16px
}
.topic small {
    display:block;
    color:var(--slate);
    font-size:12px;
    margin-top:2px
}
.topic>.icon {
    margin-left:auto;
    width:18px;
    height:18px;
    color:#8c9faa
}
.topic .icon-box {
    background:#f2f5f7;
    color:var(--slate)
}
.recommended {
    padding-bottom:56px
}
.recommend-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px
}
.recommend {
    display:flex;
    align-items:flex-start;
    gap:16px;
    border-top:2px solid #d8c19b;
    padding:24px 0 0
}
.recommend-number {
    font-size:32px;
    color:#c3cdd4;
    font-weight:400;
    line-height:1;
    margin-top:3px
}
.recommend h3 {
    font-size:19px;
    font-weight:500;
    line-height:1.35;
    margin:9px 0 12px
}
.recommend>.icon {
    margin:30px 0 0 auto;
    width:18px;
    height:18px
}
.newsletter-panel {
    border:1px solid #e2d7c5;
    background:#f7f2e9;
    border-radius:16px;
    padding:36px;
    display:flex;
    gap:22px;
    align-items:center
}
.mail-icon {
    width:52px;
    height:52px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ede1c9;
    color:#916b31;
    flex-shrink:0
}
.newsletter-copy {
    flex:1
}
.newsletter h2 {
    font-weight:600;
    font-size:24px;
    line-height:1.3;
    letter-spacing:-.3px;
    max-width:370px;
    margin:6px 0 9px
}
.newsletter-copy p {
    font-size:13px;
    color:var(--slate);
    max-width:320px
}
.newsletter form {
    width:430px;
    flex-shrink:0
}
.newsletter form>label {
    font-size:12px;
    font-weight:500;
    margin-bottom:8px;
    display:block
}
.input-row {
    display:flex;
    background:white;
    border:1px solid #d7d7cf;
    border-radius:999px;
    padding:4px 4px 4px 18px;
    gap:8px
}
.input-row input {
    border:0;
    background:none;
    min-width:0;
    flex:1;
    font-size:13px;
    color:var(--navy)
}
.input-row button {
    min-height:42px;
    padding:10px 19px;
    font-size:13px
}
.input-row button .icon {
    width:18px;
    height:18px
}
.newsletter .consent {
    display:flex;
    gap:9px;
    align-items:flex-start;
    font-size:10px;
    line-height:1.5;
    font-weight:400;
    margin:12px 0 0;
    color:var(--slate)
}
.consent input {
    margin:1px 0 0;
    accent-color:var(--navy);
    width:14px;
    height:14px;
    flex-shrink:0
}
.consent a {
    text-decoration:underline
}
.final-cta {
    padding-top:56px;
    padding-bottom:64px
}
.cta-panel {
    position:relative;
    overflow:hidden;
    text-align:center;
    border-radius:20px;
    background:radial-gradient(ellipse at 90% 20%,#cca56624,transparent 60%),#00264c;
    color:white;
    padding:46px 24px
}
.cta-panel:before {
    content:'';
    border:1px solid #cca56620;
    width:380px;
    height:380px;
    border-radius:50%;
    position:absolute;
    left:-170px;
    top:-180px;
    pointer-events:none
}
.cta-panel .eyebrow {
    color:#d5b682;
    font-size:10px
}
.cta-panel h2 {
    font-size:38px;
    font-weight:600;
    line-height:1.2;
    letter-spacing:-.7px;
    margin:14px 0
}
.cta-panel p {
    font-size:15px;
    color:#becedb;
    margin-bottom:27px
}
.cta-buttons {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px
}
.cta-panel .outline {
    color:white;
    border-color:#71889b
}
.footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:48px;
    padding-bottom:36px
}
.footer-logo {
    font-size:30px;
    font-weight:700;
    letter-spacing:-1px
}
.footer-logo span {
    font-size:13px;
    vertical-align:top;
    letter-spacing:0;
    margin-left:4px
}
.footer-grid h3 {
    font-size:14px;
    font-weight:600;
    margin:9px 0 16px
}
.footer-grid>div:not(.brand-col)>a {
    display:block;
    font-size:13px;
    margin:10px 0;
    color:var(--slate)
}
.footer-bottom {
    border-top:1px solid var(--line);
    padding-top:22px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    color:var(--slate);
    font-size:11px
}
.footer-bottom>div {
    display:flex;
    gap:24px
}
.article-width {
    width:780px;
    max-width:calc(100% - 48px);
    margin:auto
}
.detail-hero {
    padding:32px 0 32px;
    background:radial-gradient(ellipse at top right,#f3ece0,transparent 55%)
}
.breadcrumb {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    color:var(--slate);
    margin-bottom:32px;
    flex-wrap:wrap
}
.breadcrumb .icon {
    width:12px;
    height:12px
}
.detail-hero .category {
    display:inline-flex;
    padding:5px 12px;
    background:#f2e8d6;
    border-radius:999px;
    font-size:11px
}
.detail-hero h1 {
    font-size:48px;
    line-height:1.12;
    font-weight:600;
    letter-spacing:-1.3px;
    margin:18px 0 22px
}
.article-summary {
    font-size:18px;
    line-height:1.65;
    color:var(--slate);
    max-width:750px
}
.detail-meta {
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:28px;
    font-size:12px
}
.avatar {
    background:var(--navy);
    border-radius:50%;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--gold);
    font-weight:700;
    font-size:21px;
    flex-shrink:0
}
.detail-meta strong {
    font-weight:500
}
.detail-meta small {
    display:block;
    color:var(--slate);
    font-size:12px;
    margin-top:2px
}
.sources-jump {
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--slate);
    font-size:12px
}
.sources-jump .icon {
    width:16px;
    height:16px
}
.cover img {
    width:100%;
    height:auto;
    display:block;
    border-radius:12px
}
.cover p {
    font-size:11px;
    color:var(--slate);
    padding-top:9px
}
.reading-layout {
    width:1030px;
    max-width:calc(100% - 64px);
    display:grid;
    grid-template-columns:210px 780px;
    gap:40px;
    justify-content:center;
    padding-top:42px;
    position:relative;
    left:-125px
}
.article-body {
    font-size:17px;
    line-height:1.8;
    min-width:0
}
.article-body>p {
    margin:0 0 20px
}
.article-body h2 {
    font-size:28px;
    line-height:1.3;
    font-weight:600;
    letter-spacing:-.5px;
    margin:38px 0 16px;
    scroll-margin-top:30px
}
.article-body h3 {
    font-size:18px;
    font-weight:500
}
.article-body ul {
    padding-left:20px;
    margin:20px 0 28px
}
.article-body li {
    padding-left:7px;
    margin:9px 0
}
.article-body li::marker {
    color:var(--gold)
}
.article-body strong {
    font-weight:600
}
.toc {
    align-self:start;
    position:sticky;
    top:30px;
    border:1px solid var(--line);
    border-radius:12px;
    padding:22px 20px;
    background:white;
    font-size:12px
}
.toc .eyebrow {
    font-size:9px
}
.toc h2 {
    font-size:18px;
    font-weight:500;
    margin:6px 0 17px
}
.toc ol {
    list-style:none;
    padding:0;
    margin:0
}
.toc li {
    margin:14px 0
}
.toc li a {
    display:flex;
    gap:10px;
    line-height:1.5;
    color:var(--slate)
}
.toc li:first-child a {
    color:var(--navy)
}
.toc li span {
    font-size:10px;
    color:#aa854a;
    margin-top:1px
}
.toc-foot {
    padding-top:16px;
    margin-top:18px;
    border-top:1px solid var(--line);
    color:var(--slate);
    font-size:11px;
    display:flex;
    align-items:center;
    gap:7px
}
.toc-foot .icon {
    width:15px;
    height:15px
}
.sources {
    border-top:1px solid var(--line);
    padding-top:12px;
    margin-top:34px
}
.sources h2 {
    font-size:22px;
    margin-top:20px
}
.sources p {
    font-size:14px;
    color:var(--slate)
}
.sources ol {
    padding-left:16px;
    font-size:13px;
    line-height:1.7;
    margin:16px 0
}
.sources a {
    text-decoration:underline;
    text-underline-offset:3px;
    color:var(--blue)
}
.sources small {
    display:block;
    font-size:11px;
    color:var(--slate);
    line-height:1.6
}
.author-box {
    padding:25px;
    background:white;
    border:1px solid var(--line);
    border-radius:12px;
    display:flex;
    gap:18px;
    margin-top:30px
}
.author-box .avatar {
    width:48px;
    height:48px;
    font-size:25px
}
.author-box .eyebrow {
    font-size:9px
}
.author-box p {
    font-size:14px;
    color:var(--slate);
    line-height:1.65;
    margin-top:5px;
    max-width:570px
}
.author-box .text-link {
    font-size:12px;
    margin-top:5px
}
.related-guide {
    padding-top:54px
}
.related-panel {
    padding:30px 36px;
    border:1px solid #decba9;
    border-radius:14px;
    background:linear-gradient(120deg,#f5edde,#f8f5ef);
    display:flex;
    align-items:center;
    gap:22px
}
.related-panel .icon-box {
    width:54px;
    height:54px;
    background:#eadbbf
}
.related-panel .eyebrow {
    font-size:10px
}
.related-panel h2 {
    font-size:25px;
    font-weight:600;
    letter-spacing:-.4px;
    margin-top:4px
}
.related-panel p {
    font-size:14px;
    color:var(--slate);
    margin-top:5px
}
.related-panel .button {
    margin-left:auto;
    font-size:13px
}
.similar {
    padding-bottom:0
}
@media(min-width:1400px) {
    .reading-layout {
        gap:40px
    }
}
@media(max-width:1200px) {
    .wrap {
        width:calc(100% - 64px)
    }
    .reading-layout {
        left:0;
        grid-template-columns:180px minmax(0,780px);
        gap:28px
    }
    .hero-top h1 {
        font-size:47px
    }
    .guide-card {
        padding:18px
    }
    .featured-copy {
        padding:28px
    }
    .newsletter-panel {
        flex-wrap:wrap
    }
    .newsletter form {
        width:390px
    }
    .topic {
        padding:16px;
        gap:10px
    }
    .topic strong {
        font-size:14px
    }
    .topic small {
        font-size:11px
    }
    .article-body {
        font-size:17px
    }
    .recommend {
        gap:12px
    }
}
@media(max-width:1000px) {
    .logo img {
        width:127px;
        height:56px
    }
    .hero-top h1 {
        font-size:42px
    }
    .hero-jump {
        display:none
    }
    .guides {
        grid-template-columns:repeat(2,1fr)
    }
    .guide-card {
        padding:22px
    }
    .guide-top {
        margin-bottom:16px
    }
    .guide-link {
        margin-top:18px
    }
    .featured {
        grid-template-columns:1fr
    }
    .featured-art {
        aspect-ratio:16/9
    }
    .featured-copy {
        padding:30px
    }
    .featured-copy p {
        font-size:14px
    }
    .cards {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .cards .article-card:last-child {
        grid-column:1/-1;
        display:grid;
        grid-template-columns:1fr 1fr
    }
    .cards .article-card:last-child .card-image {
        aspect-ratio:auto;
        height:100%
    }
    .cards .article-card:last-child .card-image img {
        min-height:210px
    }
    .topics {
        grid-template-columns:repeat(2,1fr)
    }
    .recommend-grid {
        grid-template-columns:1fr;
        gap:24px
    }
    .recommend h3 {
        font-size:21px
    }
    .recommend {
        padding-top:20px
    }
    .recommend>.icon {
        margin-left:auto
    }
    .newsletter-panel {
        display:grid;
        grid-template-columns:52px 1fr;
        padding:30px
    }
    .newsletter-copy h2 {
        max-width:100%;
        font-size:25px
    }
    .newsletter-copy p {
        max-width:100%
    }
    .newsletter form {
        grid-column:2;
        width:100%
    }
    .reading-layout {
        display:flex;
        flex-direction:column;
        gap:32px;
        max-width:780px;
        padding-top:32px
    }
    .toc {
        position:static;
        width:100%;
        padding:22px 25px
    }
    .toc ol {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:4px 22px
    }
    .toc li {
        margin:6px 0
    }
    .toc-foot {
        margin-top:12px;
        padding-top:12px
    }
    .article-body {
        width:100%
    }
    .detail-hero h1 {
        font-size:42px
    }
    .article-width {
        max-width:calc(100% - 64px)
    }
    .related-panel {
        padding:26px;
        flex-wrap:wrap
    }
    .related-panel .button {
        margin-left:76px
    }
    .cta-panel h2 {
        font-size:35px
    }
    .cta-buttons {
        gap:7px
    }
    .cta-buttons .button {
        font-size:13px;
        padding:12px 18px
    }
    .footer-grid {
        grid-template-columns:1.4fr 1fr 1fr;
        gap:28px
    }
    .footer-grid>div:last-child {
        grid-column:2
    }
}
@media(max-width:600px) {
    .wrap {
        width:calc(100% - 40px)
    }
    .logo img {
        width:122px;
        height:54px
    }
    .index-hero {
        padding:36px 0 28px
    }
    .hero-top {
        padding-bottom:30px
    }
    .hero-top .eyebrow {
        font-size:9px;
        letter-spacing:1.2px
    }
    .hero-top h1 {
        font-size:36px;
        line-height:1.12;
        letter-spacing:-1px;
        margin:14px 0 18px
    }
    .hero-top h1 .gold {
        display:block
    }
    .hero-top p {
        font-size:15px;
        line-height:1.65
    }
    .hero-top p br {
        display:none
    }
    .guide-heading {
        margin-bottom:14px
    }
    .guide-heading span:first-child {
        font-size:9px
    }
    .guide-heading span:last-child {
        display:none
    }
    .guides {
        gap:12px
    }
    .guide-card {
        padding:16px 13px
    }
    .guide-top {
        margin-bottom:14px
    }
    .guide-top .icon-box {
        width:34px;
        height:34px;
        border-radius:8px
    }
    .guide-top .icon-box .icon {
        width:20px;
        height:20px
    }
    .guide-no {
        font-size:10px
    }
    .guide-card p {
        font-size:11px;
        line-height:1.5;
        min-height:34px;
        margin-top:5px
    }
    .guide-link {
        font-size:11px;
        margin-top:14px;
        gap:2px
    }
    .guide-link .icon {
        width:15px;
        height:15px
    }
    .featured-section {
        padding-top:32px
    }
    .section-heading {
        margin-bottom:20px;
        gap:12px
    }
    .section-heading h2 {
        font-size:25px;
        letter-spacing:-.4px
    }
    .section-heading .eyebrow {
        font-size:8px;
        letter-spacing:1.2px;
        margin-bottom:8px
    }
    .editor-pick {
        font-size:10px;
        gap:4px
    }
    .editor-pick .icon {
        width:14px;
        height:14px
    }
    .featured {
        grid-template-columns:1fr;
        border-radius:12px
    }
    .featured-art {
        aspect-ratio:16/9
    }
    .featured-copy {
        padding:24px
    }
    .featured-copy p {
        font-size:14px
    }
    .featured-copy .meta {
        margin:17px 0 9px
    }
    .category {
        font-size:11px
    }
    .section {
        padding-top:40px;
        padding-bottom:40px
    }
    .section-heading>.text-link {
        font-size:11px;
        gap:5px
    }
    .section-heading>.text-link .icon {
        width:17px;
        height:17px
    }
    .cards {
        grid-template-columns:1fr;
        gap:20px
    }
    .cards .article-card:last-child {
        grid-column:auto;
        display:flex
    }
    .cards .article-card:last-child .card-image {
        aspect-ratio:16/9;
        height:auto
    }
    .cards .article-card:last-child .card-image img {
        min-height:0
    }
    .card-body {
        padding:22px
    }
    .card-body h3 {
        font-size:22px;
        line-height:1.3
    }
    .card-body p {
        font-size:14px;
        margin-bottom:17px
    }
    .card-meta {
        font-size:11px;
        padding-top:10px
    }
    .card-meta b {
        margin:0 4px
    }
    .topics-section {
        padding:36px 0
    }
    .topics-section .section-heading {
        display:block
    }
    .topics-section .section-heading p {
        margin-top:12px;
        max-width:none;
        font-size:14px
    }
    .topics {
        grid-template-columns:1fr;
        gap:10px
    }
    .topic {
        padding:16px;
        gap:14px
    }
    .topic strong {
        font-size:16px
    }
    .topic small {
        font-size:12px
    }
    .recommend-grid {
        gap:20px
    }
    .recommend-number {
        font-size:29px
    }
    .recommend h3 {
        font-size:20px;
        margin:8px 0 9px
    }
    .recommend>.icon {
        margin-top:26px
    }
    .recommended {
        padding-bottom:36px
    }
    .newsletter-panel {
        display:block;
        padding:24px;
        border-radius:12px
    }
    .mail-icon {
        width:42px;
        height:42px;
        margin-bottom:18px
    }
    .newsletter-copy h2 {
        font-size:26px;
        margin:8px 0 12px
    }
    .newsletter-copy p {
        font-size:14px
    }
    .newsletter form {
        margin-top:24px;
        width:100%
    }
    .newsletter form>label {
        font-size:12px
    }
    .input-row {
        border-radius:12px;
        padding:12px;
        display:flex;
        flex-wrap:wrap;
        gap:12px
    }
    .input-row input {
        width:100%;
        flex:auto;
        min-height:32px;
        padding:0 3px;
        font-size:14px
    }
    .input-row button {
        width:100%;
        font-size:14px;
        min-height:44px;
        border-radius:999px
    }
    .newsletter .consent {
        font-size:11px;
        line-height:1.6;
        margin-top:14px
    }
    .final-cta {
        padding-top:36px;
        padding-bottom:40px
    }
    .cta-panel {
        padding:34px 22px;
        border-radius:14px
    }
    .cta-panel h2 {
        font-size:30px;
        letter-spacing:-.5px;
        margin:14px 0
    }
    .cta-panel p {
        font-size:14px;
        line-height:1.7;
        margin-bottom:22px
    }
    .cta-panel .eyebrow {
        font-size:9px;
        letter-spacing:1.6px
    }
    .cta-buttons {
        flex-direction:column;
        gap:12px
    }
    .cta-buttons .button {
        width:100%;
        font-size:14px;
        min-height:48px
    }
    .footer-grid {
        grid-template-columns:1fr 1fr;
        gap:24px;
        padding-bottom:30px
    }
    .footer-grid>div:last-child {
        grid-column:auto
    }
    .footer-grid h3 {
        margin:0 0 12px;
        font-size:14px
    }
    .footer-grid>div:not(.brand-col)>a {
        font-size:13px;
        margin:9px 0
    }
    .footer-bottom {
        flex-direction:column;
        gap:14px;
        font-size:10px;
        padding-top:20px
    }
    .footer-bottom>div {
        gap:20px
    }
    .article-width {
        max-width:calc(100% - 40px)
    }
    .detail-hero {
        padding:22px 0 26px
    }
    .breadcrumb {
        font-size:10px;
        gap:6px;
        margin-bottom:25px
    }
    .breadcrumb .icon {
        width:10px;
        height:10px
    }
    .detail-hero h1 {
        font-size:35px;
        line-height:1.14;
        letter-spacing:-.9px;
        margin:17px 0 19px
    }
    .detail-hero h1 br {
        display:none
    }
    .article-summary {
        font-size:16px;
        line-height:1.7
    }
    .detail-meta {
        margin-top:23px;
        gap:10px;
        font-size:11px
    }
    .detail-meta small {
        font-size:10px
    }
    .detail-meta b {
        margin:0 5px
    }
    .avatar {
        width:36px;
        height:36px;
        font-size:18px
    }
    .sources-jump {
        font-size:10px;
        gap:3px
    }
    .sources-jump .icon {
        width:13px;
        height:13px
    }
    .cover img {
        border-radius:10px
    }
    .cover p {
        font-size:9px;
        line-height:1.6
    }
    .reading-layout {
        padding-top:26px;
        gap:28px;
        max-width:calc(100% - 40px)
    }
    .toc {
        padding:20px
    }
    .toc h2 {
        font-size:20px
    }
    .toc ol {
        grid-template-columns:1fr;
        gap:0
    }
    .toc li {
        margin:7px 0
    }
    .toc li a {
        font-size:13px;
        line-height:1.6
    }
    .toc li span {
        font-size:10px
    }
    .toc-foot {
        font-size:11px
    }
    .article-body {
        font-size:16px;
        line-height:1.8
    }
    .article-body>p {
        margin-bottom:18px
    }
    .article-body h2 {
        font-size:26px;
        line-height:1.25;
        margin:32px 0 16px;
        letter-spacing:-.4px
    }
    .article-body ul {
        padding-left:18px
    }
    .article-body li {
        padding-left:3px
    }
    .sources h2 {
        font-size:23px
    }
    .sources p {
        font-size:14px
    }
    .sources ol {
        font-size:12px
    }
    .sources small {
        font-size:10px
    }
    .author-box {
        padding:22px 18px;
        gap:13px
    }
    .author-box .avatar {
        width:36px;
        height:36px;
        font-size:20px
    }
    .author-box p {
        font-size:13px;
        line-height:1.7
    }
    .related-guide {
        padding-top:36px
    }
    .related-panel {
        padding:24px;
        display:block
    }
    .related-panel .icon-box {
        width:42px;
        height:42px;
        margin-bottom:16px
    }
    .related-panel h2 {
        font-size:26px;
        line-height:1.25;
        margin:7px 0 12px
    }
    .related-panel p {
        font-size:14px;
        line-height:1.6
    }
    .related-panel .button {
        margin:20px 0 0;
        width:100%;
        font-size:14px
    }
    .similar {
        padding-bottom:0
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    * {
        transition:none!important
    }
}
/* Blog footer; navigation is owned by the shared header stylesheet. */
.blog-page .container { width:calc(100% - 112px); max-width:1280px }
.blog-page .footer {
    margin-top:0;
    padding:48px 0 22px;
    border-top:1px solid var(--line)
}
.blog-page .footer-grid {
    margin-bottom:0;
    padding-bottom:36px
}
.blog-page .footer-logo {
    margin-bottom:12px
}
.blog-page .footer-legal {
    flex-wrap:wrap;
    gap:8px 18px;
    justify-content:flex-end;
    max-width:650px
}
.blog-page .footer-bottom {
    align-items:flex-start
}
.blog-page .footer-col h4 {
    font-size:14px;
    margin-bottom:16px;
    font-weight:600
}
.blog-page .footer-col ul {
    margin:0;
    padding:0
}
.blog-page .footer-col ul li a,.blog-page .brand-col p {
    font-size:13px
}
.blog-page .footer-col ul li {
    margin-bottom:8px
}
.blog-page .social-links a:hover {
    color:var(--navy)
}
.blog-page .brand-col p {
    max-width:270px;
    margin-bottom:18px
}
.skip-link {
    position:absolute;
    left:20px;
    top:-100px;
    z-index:2000;
    background:var(--navy);
    color:white;
    padding:12px 20px;
    border-radius:8px
}
.skip-link:focus {
    top:10px;
    color:white
}
.guide-card h2 {
    font-size:17px;
    line-height:1.4;
    font-weight:600;
    margin-bottom:5px
}
.featured-copy h3 {
    font-weight:600;
    font-size:32px;
    line-height:1.2;
    letter-spacing:-.6px;
    margin:14px 0 16px
}
.featured-art {
    min-width:0
}
.featured-art img {
    aspect-ratio:16/9;
    object-fit:contain
}
.card-image-empty {
    background:radial-gradient(ellipse at top right,#cca56626,transparent 60%),#edf2f5;
    align-items:center;
    justify-content:center;
    color:var(--slate)
}
.empty-art {
    display:flex;
    width:100%;
    height:100%;
    min-height:180px;
    align-items:center;
    justify-content:center
}
.empty-art .icon {
    width:64px;
    height:64px;
    color:#8b682e;
    opacity:.7
}
.breadcrumb ol {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    list-style:none;
    padding:0;
    margin:0
}
.breadcrumb li {
    display:flex;
    align-items:center;
    gap:8px
}
.breadcrumb [aria-current] {
    color:var(--navy)
}
.blog-prose p {
    margin:0 0 20px
}
.blog-prose>p:first-child {
    font-size:20px;
    line-height:1.65;
    font-weight:500
}
.blog-prose h2 {
    font-size:28px;
    line-height:1.3;
    font-weight:600;
    margin:38px 0 16px
}
.blog-prose h3 {
    font-size:22px;
    line-height:1.4;
    margin:28px 0 14px
}
.blog-prose ul,.blog-prose ol {
    list-style:revert;
    padding-left:22px;
    margin:20px 0 28px
}
.blog-prose a {
    color:var(--blue);
    text-decoration:underline;
    text-underline-offset:3px;
    overflow-wrap:anywhere
}
.blog-prose img {
    height:auto;
    max-width:100%;
    border-radius:12px
}
.blog-prose blockquote {
    margin:28px 0;
    padding:23px 26px;
    background:#f4eee3;
    border-left:3px solid var(--gold);
    border-radius:0 12px 12px 0
}
.blog-prose blockquote p:last-child {
    margin:0
}
.blog-prose pre {
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    padding:20px;
    background:#edf2f5;
    border-radius:12px
}
.blog-prose table {
    display:block;
    overflow-x:auto;
    max-width:100%;
    border-collapse:collapse
}
.blog-prose td,.blog-prose th {
    padding:10px;
    border:1px solid var(--line)
}
.blog-prose,.blog-source-prose {
    overflow-wrap:anywhere
}
.blog-prose h2 {
    scroll-margin-top:24px
}
.reading-layout-no-toc {
    display:block;
    width:780px;
    max-width:calc(100% - 64px);
    left:0
}
@media(max-width:600px) {
    .reading-layout-no-toc {
        max-width:calc(100% - 40px)
    }
}
.author-box h2 {
    font-size:18px;
    line-height:1.5;
    font-weight:500;
    letter-spacing:0;
    margin:0
}
.sources ol {
    list-style:decimal
}
.sources li {
    margin:9px 0
}
.sources a {
    overflow-wrap:anywhere
}
.detail-hero-no-cover {
    border-bottom:1px solid var(--line);
    padding-bottom:36px
}
.archive-title {
    font-size:42px;
    line-height:1.2;
    font-weight:600;
    letter-spacing:-1px;
    margin:14px 0 18px
}
.archive-summary {
    color:var(--slate);
    font-size:18px;
    max-width:780px
}
.blog-pagination {
    display:flex;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
    margin-top:30px
}
.blog-pagination a,.blog-pagination span {
    padding:9px 14px;
    border:1px solid var(--line);
    border-radius:8px;
    min-height:44px;
    font-size:14px
}
.blog-pagination [aria-current] {
    background:var(--navy);
    color:white;
    border-color:var(--navy)
}
.empty-state {
    padding:24px;
    border:1px solid var(--line);
    border-radius:12px;
    background:white;
    color:var(--slate);
    font-size:15px
}
.newsletter-unavailable {
    max-width:430px;
    width:430px
}
.newsletter-unavailable p {
    font-size:13px;
    color:var(--slate);
    margin-bottom:12px
}
.newsletter .consent {
    font-size:12px
}
.newsletter .button:disabled {
    opacity:.6;
    cursor:not-allowed
}
@media(max-width:1200px) {
    .blog-page .container {
        width:calc(100% - 64px)
    }
    .guide-card h2 {
        font-size:15px
    }
    .featured-copy h3 {
        font-size:28px
    }
    .newsletter-unavailable {
        width:390px
    }
}
@media(max-width:1000px) {
    .guide-card h2 {
        font-size:18px
    }
    .featured-copy h3 {
        font-size:30px
    }
    .newsletter-unavailable {
        grid-column:2;
        width:100%
    }
    .blog-page .footer-grid {
        grid-template-columns:1.4fr 1fr 1fr;
        gap:28px
    }
    .blog-page .footer-bottom {
        flex-direction:column
    }
    .blog-page .footer-legal {
        justify-content:flex-start;
        max-width:100%
    }
}
@media(max-width:600px) {
    .blog-page .container {
        width:calc(100% - 40px)
    }
    .guide-card h2 {
        font-size:15px;
        line-height:1.35;
        min-height:40px
    }
    .featured-copy h3 {
        font-size:27px;
        margin:12px 0 14px
    }
    .blog-prose p {
        margin-bottom:18px
    }
    .blog-prose>p:first-child {
        font-size:19px;
        line-height:1.65
    }
    .blog-prose h2 {
        font-size:26px;
        line-height:1.25;
        margin:32px 0 16px
    }
    .blog-prose h3 {
        font-size:21px
    }
    .newsletter-unavailable {
        width:100%;
        margin-top:24px
    }
    .newsletter-unavailable .button {
        width:100%
    }
    .blog-page .footer-grid {
        grid-template-columns:1fr 1fr;
        gap:24px
    }
    .blog-page .brand-col {
        grid-column:1/-1
    }
    .blog-page .footer-col h4 {
        margin-bottom:12px
    }
    .blog-page .footer-bottom {
        gap:14px
    }
    .blog-page .footer-legal {
        gap:8px 15px;
        line-height:1.6
    }
    .blog-page .footer-col ul li a,.blog-page .brand-col p {
        font-size:13px
    }
    .article-body .author-box h2 {
        font-size:18px;
        margin:0
    }
    .archive-title {
        font-size:32px
    }
    .archive-summary {
        font-size:16px
    }
    .breadcrumb ol,.breadcrumb li {
        gap:6px
    }
    .detail-hero-no-cover {
        padding-bottom:28px
    }
}
.blog-page .ph-caret-down::before {
    content:'⌄'
}
.blog-page .ph-instagram-logo::before {
    content:'◎'
}
.blog-page .ph-facebook-logo::before {
    content:'f';
    font-style:normal;
    font-weight:600
}
.blog-page .ph-linkedin-logo::before {
    content:'in';
    font-style:normal;
    font-weight:600;
    font-size:17px
}
.blog-page .ph-youtube-logo::before {
    content:'▷'
}
.blog-page .ph-x-logo::before {
    content:'𝕏';
    font-style:normal
}
.cards:not(:has(.article-card:nth-child(3))) {
    grid-template-columns:repeat(2,minmax(0,1fr))
}
@media(max-width:1000px) {
    .cards:not(:has(.article-card:nth-child(3))) .article-card:last-child {
        grid-column:auto;
        display:flex
    }
    .cards:not(:has(.article-card:nth-child(3))) .article-card:last-child .card-image {
        aspect-ratio:16/9;
        height:auto
    }
}
@media(max-width:600px) {
    .cards:not(:has(.article-card:nth-child(3))) {
        grid-template-columns:1fr
    }
}
.guide-no {
    color:var(--slate)
}
.recommend-number {
    color:#718391
}
.detail-hero .category {
    color:#795522
}
.blog-page .footer-brand-note {
    color:var(--slate);
    opacity:1
}
.blog-page .footer-col,.blog-page .footer-col h4 {
    text-align:left
}
.blog-page .brand-col p {
    margin-left:0;
    margin-right:0
}
.blog-page .social-links {
    justify-content:flex-start
}