/* The journal shares the homepage shell, navigation and mobile drawer. */
.blog-main { padding-top: var(--nav-h); }
.blog-page .drawer__list a[aria-current='page'] { color: var(--accent-ink); }
.blog-hero { padding-block: clamp(3.5rem, 7vw, 7rem) clamp(2.75rem, 5vw, 4.75rem); }
.blog-kicker { display: flex; align-items: center; gap: .85rem; margin: 0 0 1.8rem; color: var(--accent-ink); font: 500 .67rem/1.5 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.blog-kicker__line { width: 2.8rem; height: 1px; background: currentColor; }
.blog-hero__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.blog-hero h1 { margin: 0; font: 700 clamp(2.8rem, 6.7vw, 6.4rem)/1.04 var(--font-display); letter-spacing: -.06em; }
.blog-hero__outline { color: var(--grey-400); }
.blog-hero__row > p { max-width: 26rem; margin: 0 0 .4rem; color: var(--grey-300); font-size: .9rem; line-height: 1.85; }
.blog-filters { display: flex; flex-wrap: wrap; gap: .65rem; padding-block: 1.3rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 2.5rem; }
.blog-filters a { border: 1px solid transparent; padding: .52rem .95rem; border-radius: 2px; color: var(--grey-300); text-decoration: none; font-size: .78rem; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.blog-filters a:hover { border-color: var(--rule-strong); color: var(--paper); }
.blog-filters a[aria-current] { background: var(--paper); color: var(--graphite-900); }
.blog-list { padding-top: .3rem; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.5rem 1.75rem; }
.blog-card { min-width: 0; border-bottom: 1px solid var(--rule); padding-bottom: 1.8rem; }
.blog-card__image, .blog-card__graphic { display: block; width: 100%; aspect-ratio: 8 / 5; overflow: hidden; background: var(--graphite-700); margin-bottom: 1.6rem; }
.blog-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease-out); }
.blog-card:focus-within .blog-card__image img, .blog-card:hover .blog-card__image img { transform: scale(1.025); }
.blog-card__graphic { display: grid; place-items: center; position: relative; isolation: isolate; background: radial-gradient(ellipse at 25% 15%, rgba(36, 90, 86, .13), transparent 65%), var(--graphite-700); }
.blog-card__graphic > img { display: block; width: 64%; max-width: 20rem; height: auto; opacity: .7; z-index: 1; }
.blog-card__graphic i { position: absolute; width: 66%; aspect-ratio: 1; border: 1px solid var(--rule); border-radius: 50%; }
.blog-card__graphic i:nth-of-type(1) { transform: translateX(-30%); }
.blog-card__graphic i:nth-of-type(2) { transform: translateX(30%); }
.blog-card__graphic i:nth-of-type(3) { width: 95%; }
.blog-card__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; min-height: 1.4rem; margin-bottom: .75rem; }
.blog-category { color: var(--accent-ink); font: 500 .64rem/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .09em; text-decoration: none; }
.blog-category:hover { text-decoration: underline; text-underline-offset: 4px; }
.blog-feature-label { color: var(--grey-400); font: 500 .6rem/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.blog-card h2 { margin: 0 0 .9rem; font: 500 clamp(1.4rem, 2.1vw, 1.8rem)/1.25 var(--font-display); letter-spacing: -.035em; overflow-wrap: anywhere; }
.blog-card h2 a { color: var(--paper); text-decoration: none; }
.blog-card h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.blog-card__excerpt { margin: 0 0 1.4rem; color: var(--grey-300); font-size: .86rem; line-height: 1.8; }
.blog-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .65rem; color: var(--grey-400); font-size: .68rem; line-height: 1.8; }
.blog-meta__dot { color: var(--grey-400); }
.blog-read-link { display: inline-flex; justify-content: space-between; align-items: center; gap: 1.8rem; margin-top: 1.5rem; color: var(--paper); font-size: .74rem; text-decoration: none; }
.blog-read-link > span { color: var(--accent-ink); font-size: 1.2rem; }
.blog-card--featured { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: center; padding-bottom: 3rem; margin-bottom: 3rem; }
.blog-card--featured .blog-card__image, .blog-card--featured .blog-card__graphic { margin: 0; aspect-ratio: 1.3; }
.blog-card--featured h2 { font-size: clamp(1.9rem, 3.2vw, 3.1rem); line-height: 1.17; letter-spacing: -.045em; }
.blog-card--featured .blog-card__excerpt { font-size: .96rem; }
.blog-card--featured .blog-card__eyebrow { margin-bottom: 1.2rem; }
.blog-card--featured .blog-read-link { margin-top: 1.8rem; border-bottom: 1px solid var(--rule-strong); padding-bottom: .4rem; }
.blog-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; border-bottom: 1px solid var(--rule); padding-block: 2.4rem; font-size: .8rem; }
.blog-pagination > span { color: var(--grey-400); text-align: center; }
.blog-pagination a { display: inline-flex; gap: .8rem; color: var(--paper); text-decoration: none; }
.blog-pagination a:last-child { justify-self: end; }
.blog-pagination a:hover { color: var(--accent-ink); }
.blog-empty { position: relative; padding: clamp(3rem, 6vw, 6rem) 1rem; border-block: 1px solid var(--rule); text-align: center; }
.blog-filters + .blog-empty { border-top: 0; }
.blog-empty__mark { display: block; margin-bottom: 1.8rem; font: 500 2rem/1 var(--font-mono); color: var(--accent-ink); }
.blog-empty h2 { max-width: 35rem; margin: 0 auto 1rem; font: 500 clamp(1.9rem, 3.7vw, 3.2rem)/1.15 var(--font-display); letter-spacing: -.04em; }
.blog-empty p { max-width: 36rem; margin: 0 auto 2rem; color: var(--grey-300); font-size: .95rem; line-height: 1.9; }
.blog-contact { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-block: clamp(4rem, 7vw, 7rem); padding: 2rem 2.3rem; border-left: 2px solid var(--accent-ink); background: var(--graphite-800); }
.blog-contact p { margin: 0; font: 500 clamp(1.3rem, 2vw, 1.8rem)/1.3 var(--font-display); letter-spacing: -.03em; }
.blog-contact a { display: inline-flex; gap: 1rem; align-items: center; color: var(--paper); font-size: .8rem; text-decoration: none; }
.blog-contact a span { color: var(--accent-ink); }
.blog-footer { border-top: 1px solid var(--rule); background: var(--graphite-800); padding: 3.5rem 0 0; }
.blog-footer__top { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-bottom: 3rem; }
.blog-footer__brand { display: block; flex: 0 0 auto; text-decoration: none; }
.blog-footer__brand img { display: block; width: 200px; max-width: 100%; height: auto; }
.blog-footer__top p { color: var(--grey-300); margin: 0 auto 0 0; font-size: .78rem; line-height: 1.8; }
.blog-footer__top > a:last-child { color: var(--paper); text-decoration: none; font-size: .86rem; }
.blog-footer__bottom { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--rule); padding-block: 1.4rem; color: var(--grey-400); font-size: .64rem; }
.blog-footer__bottom p { margin: 0; }
.blog-footer__bottom nav { display: flex; gap: 1.5rem; }
.blog-footer__bottom a { color: var(--grey-300); text-decoration: none; }
.blog-footer a:hover { color: var(--accent-ink); }
.blog-breadcrumb { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding-block: 2rem; font-size: .65rem; color: var(--grey-400); }
.blog-breadcrumb a { text-decoration: none; color: var(--grey-300); }
.blog-breadcrumb a:hover { color: var(--accent-ink); }
.blog-article__intro { max-width: 1040px; margin-inline: auto; padding-block: clamp(1.5rem, 4vw, 4rem) clamp(2.75rem, 5vw, 5rem); }
.blog-article__intro > .blog-category { display: inline-block; margin-bottom: 1.4rem; }
.blog-article h1 { margin: 0; font: 500 clamp(2.35rem, 5.2vw, 5rem)/1.08 var(--font-display); letter-spacing: -.05em; text-wrap: balance; overflow-wrap: anywhere; }
.blog-article__lead { max-width: 850px; margin: 1.8rem 0 2rem; font-size: clamp(1.05rem, 1.65vw, 1.35rem); line-height: 1.75; color: var(--grey-300); }
.blog-article__intro > .blog-meta { margin-top: 2rem; font-size: .76rem; }
.blog-updated { margin: .55rem 0 0; color: var(--grey-400); font-size: .65rem; }
.blog-article__cover { margin-block: 0 4rem; }
.blog-article__cover img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; background: var(--graphite-700); }
.blog-article__layout { display: grid; grid-template-columns: 180px minmax(0, 760px); justify-content: center; gap: 3.5rem; padding-bottom: 5rem; }
.blog-article__aside { align-self: start; display: flex; flex-direction: column; gap: 2rem; border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.blog-article__aside a { color: var(--grey-400); text-decoration: none; font-size: .72rem; line-height: 1.8; }
.blog-article__aside a:hover { color: var(--paper); }
.blog-article__aside a span { color: var(--accent-ink); }
.blog-article__reading { min-width: 0; }
.blog-prose { font-size: clamp(.98rem, 1.2vw, 1.075rem); line-height: 1.9; color: var(--grey-300); overflow-wrap: anywhere; }
.blog-prose > :first-child { margin-top: 0; }
.blog-prose h2, .blog-prose h3, .blog-prose h4 { color: var(--paper); font-family: var(--font-display); font-weight: 500; letter-spacing: -.03em; line-height: 1.25; scroll-margin-top: 1.5rem; }
.blog-prose h2 { font-size: clamp(1.65rem, 2.5vw, 2.3rem); margin: 3rem 0 1.2rem; }
.blog-prose h3 { font-size: 1.5rem; margin: 2.3rem 0 1rem; }
.blog-prose h4 { font-size: 1.2rem; margin: 2rem 0 .8rem; }
.blog-prose p { margin: 0 0 1.5rem; }
.blog-prose strong { color: var(--paper); font-weight: 600; }
.blog-prose a { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.blog-prose a:hover { color: var(--paper); }
.blog-prose ul, .blog-prose ol { margin: 1.3rem 0 1.8rem; padding-left: 1.55rem; }
.blog-prose li { padding-left: .25rem; margin-bottom: .5rem; }
.blog-prose li::marker { color: var(--accent-ink); }
.blog-prose blockquote { margin: 2.5rem 0; padding: .5rem 0 .5rem 1.5rem; border-left: 2px solid var(--accent-ink); color: var(--paper); font: 500 clamp(1.3rem, 2vw, 1.7rem)/1.55 var(--font-display); letter-spacing: -.02em; }
.blog-prose blockquote p:last-child { margin-bottom: 0; }
.blog-prose blockquote cite { font: 400 .8rem/1.5 var(--font-body); color: var(--grey-400); }
.blog-prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.8rem 0; }
.blog-prose figure { min-width: 0; max-width: 100%; margin: 2.5rem 0; break-inside: avoid; }
.blog-prose figure > a { display: block; }
.blog-prose img { display: block; width: auto; max-width: 100%; height: auto; margin-inline: auto; object-fit: contain; border-radius: 2px; }
.blog-prose > img, .blog-prose p > img, .blog-prose p > a > img { margin-block: 1.8rem; }
.blog-prose video { max-width: 100%; height: auto; display: block; }
.blog-prose figcaption { margin-top: .85rem; padding-left: .85rem; border-left: 1px solid var(--rule-strong); color: var(--grey-400); font-size: .75rem; line-height: 1.7; overflow-wrap: anywhere; }
.blog-prose figcaption p { margin: 0; }
.blog-prose pre { overflow-x: auto; padding: 1.3rem; background: var(--graphite-800); border: 1px solid var(--rule); font-size: .78rem; line-height: 1.75; }
.blog-prose code { font-family: var(--font-mono); font-size: .85em; }
.blog-prose :not(pre) > code { background: var(--graphite-700); padding: .15em .35em; color: var(--paper); }
.blog-prose table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; margin: 2rem 0; font-size: .86rem; }
.blog-prose th, .blog-prose td { border-bottom: 1px solid var(--rule); padding: .85rem 1rem; min-width: 8rem; text-align: left; }
.blog-prose th { color: var(--paper); background: var(--graphite-800); font-weight: 600; }
.blog-author { display: flex; align-items: flex-start; gap: 1.4rem; border-block: 1px solid var(--rule); padding-block: 2rem; margin-top: 3.5rem; }
.blog-author > img, .blog-author__symbol { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.blog-author__symbol { display: grid; place-items: center; background: var(--graphite-700); }
.blog-author__symbol img { display: block; width: 80%; height: auto; }
.blog-author__label { margin: 0 0 .35rem; color: var(--grey-400); font: 500 .58rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.blog-author__name { margin: 0 0 .5rem; color: var(--paper); font: 500 1.15rem/1.3 var(--font-display); }
.blog-author__bio { margin: 0; color: var(--grey-300); font-size: .8rem; line-height: 1.8; }
.blog-related { padding-block: 3rem 6rem; border-top: 1px solid var(--rule); }
.blog-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.2rem; }
.blog-section-heading h2 { margin: 0; font: 500 clamp(1.9rem, 3vw, 2.8rem)/1.2 var(--font-display); letter-spacing: -.04em; }
.blog-section-heading > a { color: var(--grey-300); text-decoration: none; font-size: .74rem; }
.blog-section-heading > a span { color: var(--accent-ink); }
.blog-message { max-width: 800px; min-height: 63vh; padding-block: clamp(3rem, 7vw, 6rem); }
.blog-message__symbol { display: block; margin-bottom: 1.5rem; color: var(--accent-ink); font: 500 clamp(4rem, 8vw, 7rem)/1 var(--font-display); letter-spacing: -.06em; }
.blog-message h1 { font: 500 clamp(2.3rem, 5vw, 4.4rem)/1.1 var(--font-display); margin: 0 0 1.5rem; letter-spacing: -.05em; }
.blog-message > p:not(.blog-kicker) { max-width: 34rem; color: var(--grey-300); margin: 0 0 2rem; }
.blog-message__links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.blog-message__links > a:not(.btn) { color: var(--grey-300); font-size: .83rem; }

@media (max-width: 1050px) {
  .blog-hero__row { align-items: flex-start; flex-direction: column; gap: 1.4rem; }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-card--featured { gap: 2rem; }
  .blog-article__layout { grid-template-columns: 135px minmax(0, 760px); gap: 2rem; }
}
@media (max-width: 700px) {
  .blog-hero h1 { font-size: clamp(2.55rem, 10.5vw, 4.5rem); }
  .blog-hero__row > p { font-size: .82rem; }
  .blog-filters { gap: .4rem; margin-bottom: 1.75rem; }
  .blog-filters a { padding: .45rem .65rem; font-size: .72rem; }
  .blog-card--featured { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2rem; padding-bottom: 2rem; }
  .blog-card--featured .blog-card__image, .blog-card--featured .blog-card__graphic { aspect-ratio: 8 / 5; }
  .blog-card--featured h2 { font-size: 2rem; }
  .blog-grid { grid-template-columns: 1fr; gap: 2rem; }
  .blog-card h2 { font-size: 1.65rem; }
  .blog-card__image, .blog-card__graphic { margin-bottom: 1.25rem; }
  .blog-contact { flex-direction: column; align-items: flex-start; gap: 1.1rem; padding: 1.5rem; }
  .blog-footer__top { flex-wrap: wrap; gap: 1.5rem; }
  .blog-footer__top p { margin-right: 0; }
  .blog-footer__top > a:last-child { width: 100%; }
  .blog-footer__bottom { flex-direction: column; gap: 1rem; padding-bottom: 2rem; }
  .blog-article h1 { font-size: clamp(2rem, 8.5vw, 3.3rem); }
  .blog-article__lead { margin-top: 1.35rem; font-size: 1.03rem; }
  .blog-article__cover { margin-bottom: 2.5rem; }
  .blog-article__layout { display: flex; flex-direction: column; gap: 2rem; padding-bottom: 3rem; }
  .blog-article__aside { display: none; }
  .blog-prose figure { margin-block: 2rem; }
  .blog-prose figcaption { font-size: .72rem; }
  .blog-author { gap: 1rem; }
  .blog-author > img, .blog-author__symbol { width: 54px; height: 54px; flex-basis: 54px; }
  .blog-related { padding-bottom: 3.5rem; }
  .blog-section-heading { flex-wrap: wrap; gap: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-card__image img { transition: none; }
  .blog-card:hover .blog-card__image img, .blog-card:focus-within .blog-card__image img { transform: none; }
}
@media print {
  .blog-footer, .blog-article__aside, .blog-related { display: none; }
  .blog-main { padding-top: 0; }
  .blog-page, .blog-prose, .blog-prose strong, .blog-prose h2, .blog-prose h3, .blog-prose h4 { color: #111; background: #fff; }
  .blog-shell { width: 100%; }
  .blog-article__layout { display: block; }
  .blog-prose a { color: #111; }
}