/* 960px spread, 416px round covers, 64px inner gutters, 48px row spacing. */
.blog-index main { width: min(960px, calc(100% - 32px)); margin: 0 auto; }
.blog-index .article-card-link { display: block; position: relative; margin-bottom: 48px; padding-bottom: 49px; }
.blog-index .article-card-link::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: var(--ex-border-strong);
    mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
}
.blog-index .article-card { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-width: 0; }
.blog-index .card-content { position: relative; min-width: 0; padding-right: 64px; }
/* This is a short column divider, never an active-state side rail. */
.blog-index .card-content::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: var(--ex-border); }
.blog-index .card-cover { min-width: 0; margin-left: 64px; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--ex-surface); }
.blog-index .card-image { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: right center; border-radius: 50%; filter: grayscale(1); }
.blog-index .article-card-link:nth-child(even) .card-content { grid-column: 2; grid-row: 1; padding-right: 0; padding-left: 64px; }
.blog-index .article-card-link:nth-child(even) .card-content::after { left: 0; right: auto; }
.blog-index .article-card-link:nth-child(even) .card-cover { grid-column: 1; grid-row: 1; margin-left: 0; margin-right: 64px; }
.blog-index .card-meta { margin-bottom: 24px; }
.blog-index .card-title { margin: 0 0 32px; font-size: 30px; font-weight: 600; line-height: 1.3867; letter-spacing: 0; overflow-wrap: anywhere; text-wrap: pretty; }
.blog-index .card-excerpt { margin: 0; color: var(--ex-text-2); font-size: 14px; line-height: 1.6; }
.blog-index .read-link { position: relative; display: inline-flex; align-items: center; gap: 4px; margin-top: 64px; font-size: 14px; line-height: 22.4px; font-weight: 500; color: var(--ex-text-2); }
.blog-index .read-link svg { width: 16px; height: 16px; }
.blog-index .article-card-link:hover .card-title, .blog-index .article-card-link:hover .read-link { color: var(--ex-link); }
.blog-index .article-card-link:hover .read-link { text-decoration: underline dotted; text-underline-offset: 4px; }
.blog-index .load-more { display: flex; align-items: center; gap: 20px; min-height: 44px; max-width: 100%; margin: 0 auto 64px; padding: 12px 24px 12px 14px; border: 1px solid var(--ex-border); border-radius: 9999px; background: var(--ex-surface); color: var(--ex-text); font-size: 14px; text-align: left; cursor: pointer; transition: border-color .3s, transform .3s; }
.blog-index .load-more:hover { border-color: var(--ex-border-strong); transform: translateY(-2px); }
.blog-index .load-more-stack { display: flex; flex-shrink: 0; padding-left: 4px; }
.blog-index .load-more-stack img { width: 56px; height: 56px; margin-left: -40px; border: 2px solid var(--ex-surface); border-radius: 50%; object-fit: cover; filter: grayscale(1); opacity: 0; transform: translateX(-12px) scale(.85); transition: margin .5s cubic-bezier(.2,.8,.2,1), opacity .5s, transform .5s cubic-bezier(.2,.8,.2,1), filter .4s; transition-delay: calc(var(--i) * 80ms); }
.blog-index .load-more-stack img:first-child { margin-left: 0; }
.blog-index .load-more.is-revealed .load-more-stack img { margin-left: -20px; opacity: 1; transform: none; }
.blog-index .load-more.is-revealed .load-more-stack img:first-child { margin-left: 0; }
.blog-index .load-more:hover .load-more-stack img { margin-left: -10px; filter: none; }
.blog-index .load-more:hover .load-more-stack img:first-child { margin-left: 0; }
.blog-index .load-more.is-loading .load-more-stack img { margin-left: -50px; transform: scale(.9); transition-delay: 0s; }
.blog-index .load-more.is-loading .load-more-stack img:first-child { margin-left: 0; }
.blog-index .load-more-text { display: grid; gap: 2px; min-width: 0; }
.blog-index .load-more-label { font-size: 16px; font-weight: 600; }
.blog-index .load-more-hint { overflow: hidden; color: var(--ex-text-2); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.blog-index .load-more:hover .load-more-label { color: var(--ex-link); }
.blog-index .load-more-arrow { display: inline-grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; margin-left: auto; border-radius: 50%; color: var(--ex-link); background: color-mix(in srgb, var(--ex-text) 6%, transparent); animation: load-more-nudge 2.4s ease-in-out infinite; }
.blog-index .load-more-arrow svg { width: 18px; height: 18px; }
.blog-index .load-more.is-loading .load-more-arrow { animation: load-more-spin .8s linear infinite; }
@keyframes load-more-nudge { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(4px); } }
@keyframes load-more-spin { to { transform: rotate(360deg); } }
.blog-index .article-card-link.is-entering { animation: card-enter .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--enter-delay, 0ms); }
.blog-index .article-card-link.is-entering .card-image { animation: card-cover-enter 1s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--enter-delay, 0ms); }
@keyframes card-enter { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes card-cover-enter { from { transform: scale(1.12); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .blog-index .load-more, .blog-index .load-more-stack img { transition: none; }
    .blog-index .load-more-arrow, .blog-index .article-card-link.is-entering, .blog-index .article-card-link.is-entering .card-image { animation: none; }
}
.blog-index .no-results { padding: 64px 0; text-align: center; color: var(--ex-text-2); }
.blog-index .geo-section { margin-top: 48px; color: var(--ex-text-2); }
.blog-index .geo-section h2 { font-size: 16px; font-weight: 500; }
.blog-index details { border-bottom: 1px solid var(--ex-border); }
.blog-index summary { position: relative; padding: 16px 32px 16px 0; min-height: 44px; list-style: none; cursor: pointer; font-size: 13px; }
.blog-index summary::-webkit-details-marker { display: none; }
.blog-index summary::after { content: '+'; position: absolute; right: 4px; top: 12px; font-size: 20px; }
.blog-index details[open] > summary::after { content: '−'; }
.blog-index details > p { max-width: 720px; margin: 0 0 24px; font-size: 13px; line-height: 1.7; }
.blog-index .blog-archive ul { padding: 0; list-style: none; columns: 2; column-gap: 48px; }
.blog-index .blog-archive li { break-inside: avoid; }
.blog-index .blog-archive a { display: block; min-height: 44px; padding-block: 10px; font-size: 13px; }
.blog-index .blog-archive a:hover { color: var(--ex-link); }
.blog-index .geo-updated { font-size: 12px; }
@media (max-width: 767px) {
    .blog-index .article-card { display: flex; flex-direction: column; align-items: stretch; }
    .blog-index .card-cover, .blog-index .article-card-link:nth-child(even) .card-cover { order: -1; width: min(300px, 100%); margin: 0 auto 32px; }
    .blog-index .card-content, .blog-index .article-card-link:nth-child(even) .card-content { padding: 0; }
    .blog-index .card-content::after { display: none; }
    .blog-index .card-title { font-size: 24px; line-height: 32px; }
    .blog-index .read-link { margin-top: 32px; }
    .blog-index .blog-archive ul { columns: 1; }
    .blog-index .load-more { gap: 14px; width: 100%; padding-right: 14px; }
    .blog-index .load-more-stack img { width: 44px; height: 44px; }
}