/* Static archive, sharing the site's typography and navigation. */
.page-blog main h1 { font-size: clamp(2.35rem,4.8vw,4.5rem); line-height: 1.1; letter-spacing: -.04em; font-weight: 650; margin-bottom: 26px; }
.blog-intro,.article-header { background: var(--navy-deep); color: white; padding: 36px 0 72px; }
.blog-intro .product-kicker,.article-header .product-kicker { color: #ff969b; }
.blog-intro > .container > p:last-child { max-width: 38em; color: #cbd4e4; font-size: 1.2rem; }
.blog-list { padding-block: 64px 96px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px; }
.blog-card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.blog-card:first-child { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; }
.blog-card__image { display: grid; place-items: center; background: #f3f5f8; padding: 24px; }
.blog-card__image img { width: 100%; height: 260px; object-fit: contain; }
.blog-card:first-child .blog-card__image img { height: 340px; }
.blog-card__body { padding: 32px; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.blog-meta { color: var(--muted); font-size: .8rem; margin-bottom: 16px; }
.blog-meta span { margin-inline: 5px; }
.blog-card h2 { font-size: clamp(1.45rem,2.2vw,2rem); line-height: 1.2; letter-spacing: -.025em; margin-bottom: 16px; }
.blog-card h2 a { color: var(--text); text-decoration: none; }
.blog-card h2 a:hover { color: var(--red); }
.blog-card__body > p:not(.blog-meta) { color: var(--muted); margin-bottom: 28px; }
.blog-read { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: auto; border-top: 1px solid var(--line); padding-top: 20px; font-weight: 600; font-size: .95rem; text-decoration: none; color: var(--red); }
.article-header h1 { max-width: 1000px; }
.article-meta { color: #cbd4e4; font-size: .95rem; }
.article-layout { display: grid; grid-template-columns: minmax(0,260px) minmax(0,760px); justify-content: space-between; gap: 64px; padding-block: 64px 100px; align-items: start; }
.article-toc { position: sticky; top: 95px; font-size: .9rem; }
.article-toc strong { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 20px; }
.article-toc li { border-top: 1px solid var(--line); }
.article-toc a { display: block; padding: 12px 0; text-decoration: none; color: var(--muted); }
.article-toc a:hover { color: var(--red); }
.article-body { font-size: 1.1rem; line-height: 1.8; min-width: 0; overflow-wrap: anywhere; }
.article-body p { margin-bottom: 24px; }
.article-body h2 { font-size: clamp(1.7rem,2.8vw,2.3rem); line-height: 1.2; letter-spacing: -.025em; margin: 52px 0 24px; scroll-margin-top: 90px; }
.article-body > h2:first-child { margin-top: 0; }
.article-body h3 { font-size: 1.4rem; line-height: 1.3; margin: 28px 0 20px; }
.article-body h4 { font-size: 1.15rem; margin: 24px 0 16px; }
.article-body ul,.article-body ol { padding-left: 26px; margin: 24px 0; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { padding-left: 5px; margin: 10px 0; }
.article-body a { text-underline-offset: 4px; }
.article-body figure { margin: 36px 0; padding: 24px; background: #f5f6f8; border-radius: 12px; text-align: center; }
.article-body figure img { max-height: 650px; max-width: 100%; width: auto; height: auto; margin: auto; }
.article-body figcaption { font-size: .85rem; color: var(--muted); margin-top: 20px; line-height: 1.5; }
.article-body .article-archive { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 44px; color: var(--muted); font-size: .85rem; }
.article-neighbors { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; margin: 40px 0; }
.article-neighbors a { text-decoration: none; border-top: 2px solid var(--red); padding-top: 20px; }
.article-neighbors span { display: block; color: var(--muted); font-size: .8rem; margin-bottom: 10px; }
.article-neighbors strong { display: block; font-size: 1.05rem; line-height: 1.4; font-weight: 600; }
.blog-back { font-size: .95rem; font-weight: 600; }
@media(max-width:900px) { .article-layout { grid-template-columns: minmax(0,1fr); gap: 36px; } .article-toc { position: static; } .article-toc ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; } }
@media(max-width:640px) { .blog-list,.blog-card:first-child { grid-template-columns: minmax(0,1fr); } .blog-list { padding-block: 36px 56px; gap: 28px; } .blog-card__body { padding: 24px; } .blog-card:first-child .blog-card__image img,.blog-card__image img { height: 220px; } .article-toc ul,.article-neighbors { grid-template-columns: minmax(0,1fr); } .article-body figure { padding: 12px; } .article-layout { padding-block: 36px 56px; } }