/* Editorial components: Awesome Serif display, Inter 16px body / 20px cards / 12px captions. */
.blog-heading{max-width:900px;margin-bottom:64px}
.blog-heading h1{font-size:clamp(40px,5vw,72px);line-height:1.05;margin:0}
.blog-featured{display:block;padding:0;overflow:hidden;gap:0;margin-bottom:48px;border:1px solid #222;background:#0d0d0d}
.blog-featured-link{display:grid;grid-template-columns:1fr 1.1fr;min-height:480px;text-decoration:none;color:inherit}
.blog-featured-art{background:#202020;margin:24px 0 24px 24px;border-radius:24px;display:flex;align-items:center;justify-content:center;min-width:0;pointer-events:none}
.blog-featured-art .blog-hairline{width:100%;max-width:520px;aspect-ratio:5/4}
.blog-featured-copy{padding:48px 40px;justify-content:center;display:flex;flex-direction:column;align-items:flex-start}
.blog-featured .blog-eyebrow{font-size:10px;line-height:16px;letter-spacing:.1em;margin-bottom:20px}
.blog-featured h2{font:400 clamp(26px,2.6vw,36px)/1.2 Inter,Arial,sans-serif;letter-spacing:-.03em;margin:0 0 20px}
.blog-featured-copy>p{font:400 16px/24px Inter,Arial,sans-serif;color:#c6c6c6;margin:0 0 24px}
.blog-featured-meta{font-size:12px;line-height:16px}
.blog-featured-meta span{margin-top:8px}
.blog-featured .blog-read{font-size:16px;line-height:24px;margin-top:28px;gap:16px;align-self:flex-start;padding-bottom:6px}
.blog-card{padding:0;overflow:hidden;position:relative;background:#fff}
.blog-card-link{display:flex;flex-direction:column;flex:1;text-decoration:none;color:#111;min-width:0}
.blog-card:focus-within{border-color:#397de8;box-shadow:0 0 0 2px #397de8}
.blog-card-link:focus-visible{outline:none!important}
.blog-card-art{position:relative;margin:0;overflow:hidden;border-radius:23px 23px 0 0;border-bottom:1px solid #e2e2e2;background:#fff;display:flex;justify-content:center;align-items:flex-end;height:240px;flex:none;pointer-events:none}
.blog-card-art .blog-hairline{width:280px;max-width:100%;aspect-ratio:5/4;flex:none}
.blog-art-meta{position:absolute;z-index:1;left:24px;right:24px;top:16px;display:flex;justify-content:space-between;gap:12px;color:#737373;font:400 12px/16px Inter,Arial,sans-serif}
.blog-card-copy{display:flex;flex-direction:column;padding:24px;flex:1}
.blog-card-author.section-tag{align-self:flex-start;min-height:28px;margin:0 0 14px;padding:4px 9px;font-size:12px;line-height:18px}
.blog-card h3{font:400 20px/26px Inter,Arial,sans-serif;letter-spacing:-.025em;margin:0}
.blog-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;border:0;padding:0;margin-top:auto;font:400 12px/16px Inter,Arial,sans-serif;color:#737373}
.blog-card-bottom>span:last-child{font-size:20px;line-height:24px;color:#111}
.blog-library{scroll-margin-top:120px}
@media(max-width:760px){
 .blog-heading{margin-bottom:40px}
 .blog-featured-link{grid-template-columns:1fr}
 .blog-featured-art{height:300px;margin:16px 16px 0}
 .blog-featured-art .blog-hairline{max-width:330px}
 .blog-featured-copy{padding:24px}
 .blog-featured h2{font-size:28px}
 .blog-card{padding:0}
 .blog-card h3{font-size:20px;line-height:26px}
 .blog-card-art{height:240px;margin:0}
}

.blog-load-more{display:flex;justify-content:center;padding-top:40px;position:relative}
.blog-load-more button{border:1px solid #111;border-radius:8px;background:#fff;color:#111;min-height:48px;padding:12px 24px;font:400 16px/24px Inter,Arial,sans-serif;cursor:pointer}
.blog-load-more button:hover{background:#f4f4f4}
.blog-load-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.blog-featured-art .blog-hairline{--hl-plate:#202020;--hl-hi:#fff;--hl-mid:#999;--hl-lo:#454545}

/* The article opens with the same illustration as its archive card. */
.article-hero-art{height:380px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#f7f7f7;border:1px solid #e2e2e2;border-radius:24px;margin-bottom:32px;pointer-events:none}
.article-hero-art .blog-hairline{width:460px;max-width:100%;aspect-ratio:5/4;--hl-plate:#f7f7f7}
@media(max-width:760px){.article-hero-art{height:260px;margin-bottom:28px}.article-hero-art .blog-hairline{width:320px}}
