/* Blog: article + index layout (uses tokens from ogs-v4.css) */
.wrap-narrow{ width: min(720px, calc(100% - 32px)); margin-inline: auto }
.post{ padding-top: clamp(120px, 16vh, 170px) }
.post-head h1{ font-family: var(--serif); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.06; letter-spacing: -.015em; margin: 14px 0 18px; color: var(--navy, #1657A7) }
.post-head h1 em{ font-style: normal; color: var(--orange-deep, #AD4B30) }
.post-head .mono-tag a{ color: inherit; text-decoration: none }
.post-dek{ font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; color: var(--ink-soft); margin: 0 0 14px }
.post-by{ font-size: 14px; color: var(--ink-soft); margin: 0 0 clamp(28px, 4vh, 44px) }
.post-by a{ color: inherit }
.post-body{ font-size: 18px; line-height: 1.72; color: var(--ink, #14233D); padding-bottom: clamp(70px, 10vh, 120px) }
.post-body p{ margin: 0 0 1.1em }
.post-body a{ color: var(--cta, #AD4B30); text-underline-offset: 3px }
.post-body h2{ font-family: var(--serif); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; margin: 2.2em 0 .6em; color: var(--navy, #1657A7); scroll-margin-top: 100px }
.post-body h3{ font-family: var(--serif); font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.5rem); margin: 1.6em 0 .4em }
.post-list{ padding-left: 1.1em; margin: 0 0 1.2em }
.post-list li{ margin-bottom: .6em }
.post-fig{ margin: 28px 0 }
.post-fig img{ width: 100%; height: auto; display: block; border-radius: 14px; background: oklch(0.92 0.02 85) }
.post-fig figcaption{ font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin-top: 8px }
.post-fig .exif{ display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; margin-top: 2px; opacity: .85 }
.post-pair{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0 }
.post-pair .post-fig{ margin: 0 }
.post-toc{ border: 1px solid oklch(0.3 0.02 90 / .2); border-radius: 14px; padding: 18px 22px; margin: 28px 0 }
.post-toc ol{ margin: 8px 0 0; padding-left: 1.2em; font-size: 16px }
.post-toc li{ margin: 4px 0 }
.post-table-wrap{ overflow-x: auto; margin: 20px 0 24px }
.post-table{ width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; min-width: 560px }
.post-table th{ text-align: left; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; padding: 10px 10px 10px 0; border-bottom: 1px solid oklch(0.3 0.02 90 / .35) }
.post-table td{ padding: 11px 10px 11px 0; border-bottom: 1px solid oklch(0.3 0.02 90 / .15); vertical-align: top }
.post-faq details{ border-top: 1px solid oklch(0.3 0.02 90 / .2); padding: 14px 0 }
.post-faq details:last-child{ border-bottom: 1px solid oklch(0.3 0.02 90 / .2) }
.post-faq summary{ cursor: pointer; font-weight: 600; list-style-position: outside }
.post-faq details p{ margin: 10px 0 0 }
.post-cta{ margin-top: clamp(48px, 7vh, 72px); background: var(--olive-ink, #14233D); color: var(--cream, #F6EFE3); border-radius: 18px; padding: clamp(26px, 4vw, 44px) }
.post-cta h2{ color: var(--cream, #F6EFE3); margin: 8px 0 12px }
.post-cta .mono-tag{ color: oklch(0.82 0.03 100) }
.post-cta p{ color: oklch(0.9 0.02 95) }
.post-cta p a{ color: var(--butter, #F2D47A) }
.post-cta .btn{ margin-top: 6px }
@media (max-width: 560px){ .post-pair{ grid-template-columns: 1fr } .post-body{ font-size: 17px } }

/* Blog index */
.blog-index{ padding: clamp(130px, 17vh, 180px) 0 clamp(80px, 12vh, 140px) }
.blog-index h1{ font-family: var(--serif); font-weight: 700; font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1.05; color: var(--navy, #1657A7); margin: 12px 0 14px }
.blog-index h1 em{ font-style: normal; color: var(--orange-deep, #AD4B30) }
.blog-cards{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(18px, 2.4vw, 32px); margin-top: clamp(36px, 6vh, 64px) }
.blog-card{ text-decoration: none; color: inherit; display: block }
.blog-card{ border: 1px solid oklch(0.3 0.02 90 / .18); border-radius: 18px; overflow: hidden; background: oklch(0.985 0.008 85); transition: border-color .2s, transform .2s }
.blog-card:hover{ border-color: oklch(0.3 0.02 90 / .45); transform: translateY(-2px) }
.blog-card img{ width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: oklch(0.92 0.02 85) }
.blog-card .card-text{ padding: 16px 20px 22px }
.blog-card .read{ display: inline-block; margin-top: 12px; font-size: 15px; color: var(--cta, #AD4B30); font-weight: 600 }
.blog-card h2{ font-family: var(--serif); font-weight: 700; font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.2; margin: 8px 0 6px; color: var(--navy, #1657A7) }
.blog-card p{ margin: 0; color: var(--ink-soft); line-height: 1.55 }
.blog-card:hover h2{ color: var(--orange-deep, #AD4B30) }
/* single portrait photos: crop to 4:5 so one image doesn't fill two screens */
.post-body > .post-fig img{ aspect-ratio: 4 / 5; object-fit: cover }
.post-body > .post-fig.wide img{ aspect-ratio: auto; object-fit: contain }