.blog-body {
    min-width: 320px;
    background:
        radial-gradient(circle at 92% 7%, rgba(186, 253, 229, .42), transparent 24rem),
        radial-gradient(circle at 8% 22%, rgba(232, 229, 255, .6), transparent 29rem),
        var(--paper);
    overflow-x: hidden;
}

.blog-body a:focus-visible,
.blog-body button:focus-visible {
    outline: 3px solid var(--violet);
    outline-offset: 4px;
}

.schema-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.blog-header .site-nav a[aria-current="page"] {
    color: var(--ink);
}

.blog-header .site-nav a[aria-current="page"]:after {
    right: 0;
}

.journal-main,
.article-main {
    display: block;
}

.journal-hero {
    min-height: 680px;
    padding-top: 68px;
    padding-bottom: 82px;
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(420px, .97fr);
    gap: 76px;
    align-items: center;
}

.journal-hero-copy h1 {
    max-width: 770px;
    margin: 28px 0 28px;
    font: 700 clamp(68px, 7.5vw, 106px)/.91 var(--serif);
    letter-spacing: -.068em;
}

.journal-hero-copy h1 em {
    color: var(--violet);
    font-weight: 400;
}

.journal-hero-copy > p {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    font-size: 19px;
    line-height: 1.7;
}

.journal-hero-actions {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-top: 34px;
}

.journal-feed-link {
    color: var(--muted);
    font-size: 13px;
    font-weight: 760;
    text-decoration: none;
}

.journal-feed-link:hover {
    color: var(--violet);
}

.journal-hero-art {
    min-height: 520px;
    position: relative;
    display: grid;
    place-items: center;
}

.journal-hero-art:before,
.journal-hero-art:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(129, 115, 248, .2);
}

.journal-hero-art:before {
    width: 510px;
    height: 510px;
}

.journal-hero-art:after {
    width: 398px;
    height: 398px;
    border-color: rgba(112, 233, 193, .48);
}

.journal-sheet {
    position: absolute;
    width: 320px;
    height: 420px;
    border: 1px solid #d9d6e2;
    border-radius: 8px 16px 16px 8px;
    box-shadow: 0 28px 70px rgba(31, 30, 53, .16);
}

.journal-sheet-back {
    padding: 40px 38px;
    background: var(--violet-soft);
    transform: translate(-58px, -24px) rotate(-10deg);
}

.journal-sheet-back span,
.journal-sheet-front > span {
    display: block;
    color: var(--violet);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .16em;
}

.journal-sheet-back i {
    display: block;
    width: 100%;
    height: 8px;
    margin: 26px 0;
    border-radius: 8px;
    background: rgba(129, 115, 248, .18);
}

.journal-sheet-back i:nth-of-type(2) { width: 76%; }
.journal-sheet-back i:nth-of-type(3) { width: 88%; }
.journal-sheet-back i:nth-of-type(4) { width: 52%; }

.journal-sheet-front {
    z-index: 2;
    padding: 42px 38px 34px;
    background: #fff;
    transform: translate(54px, 22px) rotate(7deg);
    display: flex;
    flex-direction: column;
}

.journal-sheet-front strong {
    margin: 74px 0 20px;
    font: 42px/1 var(--serif);
    letter-spacing: -.05em;
}

.journal-sheet-front p {
    margin: 0;
    color: var(--muted);
    font: 16px/1.55 var(--serif);
}

.journal-sheet-front b {
    margin-top: auto;
    color: var(--ink);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.journal-pencil {
    z-index: 4;
    position: absolute;
    width: 20px;
    height: 330px;
    right: 25px;
    bottom: 5px;
    border-radius: 8px 8px 2px 2px;
    background: var(--mint-strong);
    border: 1px solid #48bb96;
    transform: rotate(31deg);
    box-shadow: 0 15px 30px rgba(39, 114, 90, .2);
}

.journal-pencil:before {
    content: "";
    position: absolute;
    left: -1px;
    top: -24px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 24px solid #e2bd8a;
}

.journal-pencil i {
    position: absolute;
    left: 6px;
    top: -22px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 10px solid var(--ink);
}

.journal-spark {
    z-index: 5;
    position: absolute;
    color: var(--violet);
    font-size: 26px;
}

.spark-one { top: 24px; right: 72px; }
.spark-two { bottom: 28px; left: 30px; color: #3bae88; font-size: 18px; }

.journal-principles {
    min-height: 68px;
    background: var(--ink);
    color: #fff;
    display: flex;
    align-items: center;
}

.journal-principles > div {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 28px;
    font-size: 10px;
    font-weight: 830;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.journal-principles i {
    color: var(--mint);
    font-style: normal;
}

.journal-feature,
.journal-latest,
.related-guides {
    padding-top: 120px;
    padding-bottom: 120px;
}

.journal-latest {
    padding-top: 24px;
}

.journal-section-heading {
    margin-bottom: 50px;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 75px;
    align-items: end;
}

.journal-section-heading > div > span {
    color: var(--violet);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.journal-section-heading h2 {
    margin: 16px 0 0;
    font: 700 clamp(44px, 5vw, 67px)/.98 var(--serif);
    letter-spacing: -.052em;
}

.journal-section-heading > p,
.journal-section-heading > a {
    max-width: 520px;
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
}

.journal-section-heading > a {
    justify-self: end;
    color: var(--ink);
    font-weight: 740;
    text-decoration: none;
}

.featured-guide {
    min-height: 480px;
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(31, 30, 53, .08);
}

.featured-guide-art {
    min-height: 480px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: var(--ink);
    text-decoration: none;
}

.journal-accent-coral .featured-guide-art,
.journal-accent-coral .journal-card-art,
.journal-accent-coral.article-hero { --accent: #ef806a; --accent-soft: #fee0d8; --accent-dark: #8e3929; }
.journal-accent-amber .featured-guide-art,
.journal-accent-amber .journal-card-art,
.journal-accent-amber.article-hero { --accent: #e3ad44; --accent-soft: #fff0c9; --accent-dark: #795713; }
.journal-accent-sage .featured-guide-art,
.journal-accent-sage .journal-card-art,
.journal-accent-sage.article-hero { --accent: #69a886; --accent-soft: #dff4e8; --accent-dark: #285c41; }
.journal-accent-sky .featured-guide-art,
.journal-accent-sky .journal-card-art,
.journal-accent-sky.article-hero { --accent: #72aac3; --accent-soft: #dff2f8; --accent-dark: #285b72; }

.featured-guide-art,
.journal-card-art {
    background: var(--accent-soft, var(--violet-soft));
}

.featured-guide-art:before,
.featured-guide-art:after {
    content: "";
    position: absolute;
    border: 1px solid color-mix(in srgb, var(--accent, var(--violet)) 55%, transparent);
    border-radius: 50%;
}

.featured-guide-art:before { width: 390px; height: 390px; left: -110px; bottom: -160px; }
.featured-guide-art:after { width: 265px; height: 265px; right: -80px; top: -100px; }

.featured-guide-art > span {
    position: relative;
    z-index: 2;
    color: var(--accent-dark, var(--violet));
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .15em;
}

.featured-guide-art > strong {
    position: relative;
    z-index: 2;
    max-width: 310px;
    margin-top: 23px;
    font: 46px/1 var(--serif);
    letter-spacing: -.045em;
}

.featured-page {
    z-index: 2;
    width: 225px;
    height: 270px;
    margin: auto 20px -76px auto;
    padding: 42px 30px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 8px 13px 0 0;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 22px 55px rgba(45, 43, 75, .13);
    transform: rotate(5deg);
}

.featured-page i {
    display: block;
    height: 7px;
    margin-bottom: 17px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent, var(--violet)) 24%, transparent);
}

.featured-page i:nth-child(2) { width: 74%; }
.featured-page i:nth-child(4) { width: 89%; }
.featured-page i:nth-child(5) { width: 52%; }
.featured-page b { position: absolute; right: 23px; bottom: 20px; color: var(--accent-dark); font: 32px var(--serif); }

.featured-guide-copy {
    padding: 62px 68px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.featured-guide-copy h2 {
    margin: 22px 0 22px;
    font: 700 clamp(39px, 4.1vw, 58px)/1.01 var(--serif);
    letter-spacing: -.052em;
}

.featured-guide-copy h2 a,
.journal-card h3 a,
.journal-card h2 a {
    color: inherit;
    text-decoration: none;
}

.featured-guide-copy h2 a:hover,
.journal-card h3 a:hover,
.journal-card h2 a:hover {
    color: var(--violet);
}

.featured-guide-copy > p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.75;
}

.journal-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    color: #858291;
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.journal-card-meta span:first-child {
    color: var(--violet);
}

.journal-read-link {
    width: max-content;
    margin-top: 28px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--ink);
    color: var(--ink);
    font-size: 13px;
    font-weight: 780;
    text-decoration: none;
}

.journal-read-link:hover {
    color: var(--violet);
    border-color: var(--violet);
}

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

.journal-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .82);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.journal-card:hover {
    transform: translateY(-5px);
    border-color: #c8c3dd;
    box-shadow: 0 24px 55px rgba(31, 30, 53, .1);
}

.journal-card-art {
    height: 245px;
    padding: 25px;
    position: relative;
    overflow: hidden;
    display: block;
    color: var(--accent-dark, var(--ink));
    text-decoration: none;
}

.journal-card-art:before,
.journal-card-art:after {
    content: "";
    position: absolute;
    border: 1px solid color-mix(in srgb, var(--accent, var(--violet)) 48%, transparent);
    border-radius: 50%;
}

.journal-card-art:before { width: 230px; height: 230px; right: -60px; bottom: -90px; }
.journal-card-art:after { width: 126px; height: 126px; right: -8px; bottom: -37px; }

.journal-card-index {
    position: absolute;
    right: 24px;
    top: 19px;
    font: 42px/1 var(--serif);
    opacity: .52;
}

.journal-card-category {
    display: block;
    max-width: 190px;
    color: var(--accent-dark, var(--violet));
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.journal-card-motif {
    position: absolute;
    left: 26px;
    bottom: 29px;
    width: 52%;
}

.journal-card-motif i {
    display: block;
    height: 7px;
    margin-top: 13px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--accent, var(--violet)) 31%, transparent);
}

.journal-card-motif i:nth-child(2) { width: 78%; }
.journal-card-motif i:nth-child(3) { width: 48%; }

.journal-card-copy {
    min-height: 360px;
    padding: 31px 29px 33px;
    display: flex;
    flex-direction: column;
}

.journal-card h2,
.journal-card h3 {
    margin: 20px 0 16px;
    font: 700 31px/1.08 var(--serif);
    letter-spacing: -.04em;
}

.journal-card-copy > p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

.journal-card .journal-read-link {
    margin-top: auto;
    padding-top: 24px;
}

.journal-empty {
    padding: 48px;
    border: 1px dashed #c9c6d3;
    border-radius: 14px;
    color: var(--muted);
    background: rgba(255, 255, 255, .5);
    text-align: center;
}

.blog-cta {
    min-height: 330px;
    margin-top: 5px;
    margin-bottom: 55px;
    padding: 68px 76px;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
    background: var(--ink);
    color: #fff;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 55px;
    align-items: center;
}

.blog-cta > *:not(.blog-cta-grid) {
    position: relative;
    z-index: 2;
}

.blog-cta-grid {
    position: absolute;
    inset: 0;
    opacity: .75;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(circle at 75% 50%, #000, transparent 72%);
    mask-image: radial-gradient(circle at 75% 50%, #000, transparent 72%);
}

.blog-cta > div > span {
    color: var(--mint);
    font-size: 10px;
    font-weight: 830;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.blog-cta h2 {
    margin: 14px 0 14px;
    font: 700 clamp(43px, 5vw, 66px)/.98 var(--serif);
    letter-spacing: -.052em;
}

.blog-cta p {
    max-width: 670px;
    margin: 0;
    color: #b9b7c8;
    line-height: 1.65;
}

.blog-footer .footer-links h2 {
    margin: 0 0 18px;
    color: #9a97a5;
    font: 800 11px/1.2 var(--sans);
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Article */
.article-shell {
    width: min(1160px, calc(100% - 64px));
    margin: 0 auto;
}

.blog-breadcrumbs {
    padding-top: 42px;
    padding-bottom: 24px;
}

.blog-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-breadcrumbs li {
    display: flex;
    align-items: center;
    color: #7d7a89;
    font-size: 11px;
    font-weight: 680;
}

.blog-breadcrumbs li:not(:last-child):after {
    content: "/";
    margin-left: 8px;
    color: #b8b5c0;
}

.blog-breadcrumbs a {
    max-width: 420px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blog-breadcrumbs a:hover { color: var(--violet); }

.article-hero {
    min-height: 555px;
    padding: 64px 68px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .52)),
        var(--accent-soft, var(--violet-soft));
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr);
    gap: 70px;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.article-hero:after {
    content: "";
    width: 520px;
    height: 520px;
    position: absolute;
    right: -250px;
    top: -260px;
    border: 1px solid var(--accent, var(--violet));
    border-radius: 50%;
    opacity: .3;
}

.article-hero-copy {
    position: relative;
    z-index: 2;
}

.article-kicker {
    color: var(--accent-dark, var(--violet));
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.article-hero h1 {
    max-width: 800px;
    margin: 25px 0 25px;
    font: 700 clamp(54px, 6.4vw, 81px)/.96 var(--serif);
    letter-spacing: -.058em;
}

.article-hero-copy > p {
    max-width: 720px;
    margin: 0;
    color: #5f5c6d;
    font-size: 18px;
    line-height: 1.68;
}

.article-byline {
    margin-top: 38px;
    display: flex;
    align-items: center;
    gap: 13px;
}

.author-mark {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--mint);
    font: 800 10px var(--sans);
    letter-spacing: .06em;
}

.article-byline strong,
.article-byline small {
    display: block;
}

.article-byline strong { font-size: 12px; }
.article-byline small { margin-top: 5px; color: #777484; font-size: 10px; line-height: 1.45; }

.article-cover {
    width: 250px;
    height: 340px;
    padding: 29px 25px;
    justify-self: end;
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-radius: 6px 13px 13px 6px;
    background: var(--ink);
    color: #fff;
    box-shadow: 18px 25px 55px rgba(23, 23, 44, .26);
    transform: rotate(5deg);
    display: flex;
    flex-direction: column;
}

.article-cover:before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 9px;
    background: rgba(255, 255, 255, .08);
    box-shadow: inset -1px 0 rgba(255, 255, 255, .18);
}

.article-cover > span,
.article-cover > small {
    color: var(--mint);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.article-cover > strong {
    margin-top: 32px;
    color: var(--accent, var(--mint));
    font: 80px/.9 var(--serif);
    letter-spacing: -.06em;
}

.article-cover > div {
    margin: auto 0;
}

.article-cover i {
    display: block;
    height: 5px;
    margin: 13px 0;
    border-radius: 5px;
    background: rgba(255, 255, 255, .19);
}

.article-cover i:nth-child(2) { width: 78%; }
.article-cover i:nth-child(3) { width: 91%; }
.article-cover i:nth-child(4) { width: 56%; }

.article-layout {
    display: grid;
    grid-template-columns: 235px minmax(0, 720px);
    gap: 80px;
    justify-content: center;
    padding: 82px 0 115px;
}

.article-toc {
    align-self: start;
    position: sticky;
    top: 110px;
    padding: 24px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.article-toc-kicker {
    color: var(--violet);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.article-toc h2 {
    margin: 11px 0 19px;
    font: 700 23px/1.1 var(--serif);
}

.article-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.article-toc li {
    margin: 0;
    border-left: 1px solid #d8d5df;
}

.article-toc li.toc-level-3 { padding-left: 10px; }

.article-toc a {
    display: block;
    padding: 7px 4px 7px 15px;
    color: #777483;
    font-size: 11px;
    line-height: 1.45;
    text-decoration: none;
}

.article-toc a:hover {
    margin-left: -1px;
    border-left: 2px solid var(--violet);
    color: var(--ink);
}

.article-column { min-width: 0; }

.article-prose {
    color: #373646;
    font: 18px/1.83 var(--serif);
}

.article-prose > :first-child { margin-top: 0; }
.article-prose > :last-child { margin-bottom: 0; }

.article-prose h2,
.article-prose h3 {
    color: var(--ink);
    scroll-margin-top: 105px;
}

.article-prose h2 {
    margin: 70px 0 24px;
    padding-top: 7px;
    font: 700 43px/1.07 var(--serif);
    letter-spacing: -.045em;
}

.article-prose h3 {
    margin: 43px 0 17px;
    font: 700 29px/1.14 var(--serif);
    letter-spacing: -.03em;
}

.article-prose p { margin: 0 0 26px; }

.article-prose a {
    color: #5748d5;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.article-prose a:hover { color: #392da7; }

.article-prose strong { color: #282637; }

.article-prose ul,
.article-prose ol {
    margin: 0 0 30px;
    padding-left: 28px;
}

.article-prose li {
    margin: 11px 0;
    padding-left: 5px;
}

.article-prose li::marker {
    color: var(--violet);
    font-family: var(--sans);
    font-weight: 800;
}

.article-prose blockquote {
    margin: 42px 0;
    padding: 29px 33px;
    border: 0;
    border-left: 4px solid var(--violet);
    border-radius: 0 12px 12px 0;
    background: var(--violet-soft);
    color: #343146;
    font-size: 22px;
    line-height: 1.55;
}

.article-prose blockquote p:last-child { margin-bottom: 0; }

.article-prose .article-note,
.article-prose aside,
.article-prose .blog-callout {
    margin: 38px 0;
    padding: 25px 28px;
    border: 1px solid #b8e3d3;
    border-radius: 12px;
    background: #ebfbf5;
    font: 15px/1.7 var(--sans);
}

.article-prose .article-note strong,
.article-prose aside strong,
.article-prose .blog-callout h3 {
    display: block;
    margin-bottom: 7px;
    color: #235944;
}

.article-prose .blog-callout h3 {
    margin: 0 0 8px;
    padding: 0;
    color: #235944;
    font: 750 21px/1.2 var(--serif);
}

.article-prose .blog-callout p { margin: 0; }

.article-prose .blog-checklist {
    margin: 38px 0;
    padding: 0;
    display: grid;
    gap: 10px;
    list-style: none;
}

.article-prose .blog-checklist li {
    margin: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255, 255, 255, .72);
    display: grid;
    grid-template-columns: 31px 1fr;
    gap: 13px;
}

.article-prose .blog-check {
    width: 29px;
    height: 29px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--mint);
    color: #17664b;
    font: 850 10px var(--sans);
}

.article-prose .blog-checklist strong {
    display: block;
    font: 750 15px/1.35 var(--sans);
}

.article-prose .blog-checklist p {
    margin: 5px 0 0;
    color: var(--muted);
    font: 13px/1.6 var(--sans);
}

.article-prose blockquote footer {
    margin-top: 14px;
    color: #6e6982;
    font: 750 11px/1.4 var(--sans);
    letter-spacing: .04em;
}

.article-prose hr {
    margin: 55px 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.article-prose code {
    padding: 2px 5px;
    border: 1px solid #dedbe9;
    border-radius: 5px;
    background: #f2f0f8;
    font: .82em ui-monospace, SFMono-Regular, Menlo, monospace;
}

.article-prose table {
    width: 100%;
    margin: 38px 0;
    border-collapse: collapse;
    font: 14px/1.55 var(--sans);
}

.article-prose th,
.article-prose td {
    padding: 14px;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.article-prose th { background: var(--violet-soft); }

.article-review-note {
    margin-top: 62px;
    padding: 28px;
    border: 1px solid #bde6d7;
    border-radius: 14px;
    background: #edfaf5;
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 18px;
}

.article-review-note > span {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--mint);
    color: #1d674f;
    font: 850 13px var(--sans);
}

.article-review-note h2 {
    margin: 2px 0 8px;
    font: 700 25px/1.15 var(--serif);
}

.article-review-note p {
    margin: 0;
    color: #53665f;
    font-size: 13px;
    line-height: 1.65;
}

.article-tags {
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.article-tags > span {
    margin-right: 5px;
    color: #8b8895;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.article-tag {
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: #666373;
    font-size: 10px;
}

.related-guides {
    border-top: 1px solid var(--line);
}

.article-cta { margin-top: 0; }

/* Error states */
.blog-status-page {
    min-height: 650px;
    padding-top: 40px;
    padding-bottom: 90px;
}

.status-card {
    min-height: 490px;
    padding: 65px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background:
        radial-gradient(circle at 90% 10%, rgba(186, 253, 229, .8), transparent 22rem),
        #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.status-card > span {
    color: var(--violet);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .15em;
}

.status-card h1 {
    max-width: 800px;
    margin: 18px 0;
    font: 700 clamp(52px, 7vw, 82px)/.96 var(--serif);
    letter-spacing: -.058em;
}

.status-card p {
    max-width: 630px;
    margin: 0 0 30px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.7;
}

@media (max-width: 1050px) {
    .journal-hero { grid-template-columns: 1fr 420px; gap: 28px; }
    .journal-hero-art { transform: scale(.86); }
    .featured-guide-copy { padding: 52px 45px; }
    .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .article-hero { padding: 55px 48px; gap: 35px; }
    .article-cover { width: 220px; height: 310px; }
    .article-layout { grid-template-columns: 210px minmax(0, 680px); gap: 45px; }
}

@media (max-width: 900px) {
    .journal-hero { grid-template-columns: 1fr; padding-top: 72px; }
    .journal-hero-copy { max-width: 760px; }
    .journal-hero-art { min-height: 470px; transform: none; }
    .featured-guide { grid-template-columns: 1fr; }
    .featured-guide-art { min-height: 360px; }
    .featured-guide-copy { padding: 48px; }
    .journal-section-heading { grid-template-columns: 1fr; gap: 22px; }
    .journal-section-heading > a { justify-self: start; }
    .blog-cta { grid-template-columns: 1fr; gap: 30px; }
    .article-shell { width: min(100% - 36px, 760px); }
    .article-hero { grid-template-columns: 1fr; }
    .article-cover { display: none; }
    .article-layout { grid-template-columns: 1fr; gap: 45px; padding-top: 55px; }
    .article-toc { position: static; padding: 25px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .65); }
    .article-toc ol { columns: 2; column-gap: 30px; }
    .article-toc li { break-inside: avoid; }
}

@media (max-width: 700px) {
    .journal-hero { min-height: auto; padding-top: 58px; }
    .journal-hero-copy h1 { font-size: 59px; }
    .journal-hero-copy > p { font-size: 17px; }
    .journal-hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
    .journal-hero-art { min-height: 410px; transform: scale(.84); margin: -25px -45px; overflow: hidden; }
    .journal-principles > div { justify-content: flex-start; overflow: hidden; white-space: nowrap; }
    .journal-principles > div span:nth-of-type(n+4),
    .journal-principles > div i:nth-of-type(n+4) { display: none; }
    .journal-feature,
    .journal-latest,
    .related-guides { padding-top: 82px; padding-bottom: 82px; }
    .journal-latest { padding-top: 8px; }
    .journal-grid { grid-template-columns: 1fr; }
    .journal-card-copy { min-height: 320px; }
    .featured-guide-art { min-height: 320px; padding: 30px; }
    .featured-guide-art > strong { font-size: 38px; }
    .featured-page { width: 190px; height: 230px; }
    .featured-guide-copy { padding: 36px 28px 40px; }
    .featured-guide-copy h2 { font-size: 40px; }
    .blog-cta { min-height: 420px; padding: 48px 27px; }
    .article-hero { min-height: auto; padding: 43px 27px; }
    .article-hero h1 { font-size: 49px; }
    .article-hero-copy > p { font-size: 16px; }
    .article-byline { align-items: flex-start; }
    .article-byline small { max-width: 240px; }
    .article-prose { font-size: 17px; line-height: 1.78; }
    .article-prose h2 { margin-top: 56px; font-size: 36px; }
    .article-prose h3 { font-size: 26px; }
    .article-prose blockquote { margin-left: 0; margin-right: 0; padding: 24px; font-size: 19px; }
    .article-toc ol { columns: 1; }
    .article-review-note { grid-template-columns: 1fr; }
    .blog-breadcrumbs li:last-child { max-width: 65%; }
    .status-card { min-height: 430px; padding: 38px 27px; }
}

@media (max-width: 420px) {
    .journal-hero-copy h1 { font-size: 52px; }
    .journal-hero-art { transform: scale(.74); margin: -55px -70px; }
    .journal-card-art { height: 215px; }
    .journal-card h2,
    .journal-card h3 { font-size: 29px; }
    .article-shell { width: calc(100% - 28px); }
    .article-hero h1 { font-size: 43px; }
    .article-byline small { max-width: 210px; }
}

@media (prefers-reduced-motion: reduce) {
    .journal-card { transition: none; }
    .journal-card:hover { transform: none; }
}

@media print {
    .blog-header,
    .blog-footer,
    .blog-breadcrumbs,
    .article-toc,
    .related-guides,
    .article-cta,
    .article-cover,
    .article-tags { display: none !important; }
    .blog-body { background: #fff; }
    .article-shell { width: 100%; }
    .article-hero { min-height: auto; padding: 0 0 35px; border: 0; background: transparent; }
    .article-layout { display: block; padding: 35px 0; }
    .article-prose { color: #000; }
}