/* Blog views only (posts page, single post, archives). Loaded after site.css and wp.css; site.css is never edited. */

/* ---------- post index ---------- */
.blog-index { padding-top: calc(var(--pad) * .55); }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(48px, 6vw, 80px) clamp(28px, 4vw, 56px); }
.blog-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.blog-card__fig { display: block; width: 100%; margin-bottom: 26px; text-decoration: none; }
.blog-card__fig .arch__img { aspect-ratio: 5 / 6; }
.blog-card__fig .arch { width: 86%; }
.blog-card__fig .frame__img img,
.blog-card__pola img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.blog-card__fig .frame { margin-top: 42px; }
.blog-card__pola { padding-bottom: 12px; margin-top: 14px; }
.blog-card__fig:hover .arch__img img { transform: scale(1.04); }
.blog-card .blog-ph { object-fit: contain; width: 60%; height: 100%; margin: 0 auto; padding: 14% 0; }
.blog-card__pola .blog-ph, .blog-card__fig .frame__img .blog-ph { aspect-ratio: 4 / 3; background: var(--paper-2); padding: 8%; }
.blog-card__meta { margin-bottom: .5rem; }
.blog-card h3 { margin-bottom: .6em; }
.blog-card h3 a { text-decoration: none; }
.blog-card h3 a:hover { color: var(--copper-dk); }
.blog-card__excerpt { color: rgba(28, 25, 21, .82); }

.blog-pager { margin-top: clamp(48px, 6vw, 80px); }
.blog-pager ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.blog-pager a, .blog-pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 16px; border: 1.5px solid var(--bronze); border-radius: 999px; font-weight: 600; text-decoration: none; color: var(--ink); }
.blog-pager a:hover { background: var(--bronze); color: var(--bone); }
.blog-pager .current { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.blog-pager .dots { border-color: transparent; }

/* ---------- single post ---------- */
.post { padding-top: calc(var(--pad) * .55); }
.post__fig { width: min(100%, 900px); margin: 58px auto clamp(48px, 6vw, 80px); }
.post__fig .frame { --fw: 16px; --mat: 22px; }
.post__body { width: min(100%, 720px); margin-inline: auto; font-size: 1.125rem; line-height: 1.75; }
.post__body > :first-child { margin-top: 0; }
.post__body > :last-child { margin-bottom: 0; }
.post__body p { max-width: none; margin: 0 0 1.3em; }
.post__body h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 2em 0 .6em; }
.post__body h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin: 1.8em 0 .5em; }
.post__body h4 { font-size: 1.2rem; margin: 1.6em 0 .4em; }
.post__body a { color: var(--copper-dk); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.post__body a:hover { color: var(--copper); }
.post__body ul, .post__body ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.post__body ul { list-style: disc; }
.post__body ol { list-style: decimal; }
.post__body li { margin-bottom: .5em; padding-left: .25em; }
.post__body li::marker { color: var(--bronze-dk); }
.post__body blockquote { margin: 2em 0; padding: .3em 0 .3em 1.5em; border-left: 3px solid var(--bronze); font-family: var(--ff-display); font-size: 1.4rem; line-height: 1.45; font-style: italic; font-weight: 350; }
.post__body blockquote p { margin-bottom: .6em; }
.post__body blockquote cite { display: block; font: 600 .72rem/1.3 var(--ff-body); letter-spacing: .18em; text-transform: uppercase; font-style: normal; color: var(--bronze-dk); }
.post__body img { max-width: 100%; height: auto; }
.post__body figure, .post__body .wp-caption { margin: 2em 0; max-width: 100%; }
.post__body figure img, .post__body .wp-caption img, .post__body p > img { padding: 8px; background: #fff; box-shadow: 0 14px 26px -12px rgba(28, 25, 21, .45), 0 2px 4px rgba(28, 25, 21, .2); }
.post__body figcaption, .post__body .wp-caption-text { margin-top: 12px; font: 500 1.25rem/1.2 var(--ff-hand); color: var(--walnut); text-align: center; }
.post__body .aligncenter { display: block; margin-inline: auto; }
.post__body .alignleft { float: left; margin: .4em 1.6em 1em 0; max-width: 50%; }
.post__body .alignright { float: right; margin: .4em 0 1em 1.6em; max-width: 50%; }
.post__body hr { border: 0; height: 1px; background: var(--kraft); margin: 2.4em 0; }
.post__body table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 1rem; }
.post__body th, .post__body td { padding: 10px 12px; border-bottom: 1px solid var(--kraft); text-align: left; }
.post__body::after { content: ""; display: block; clear: both; }

.author-card { display: grid; grid-template-columns: minmax(130px, 190px) 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; width: min(100%, 860px); margin: clamp(56px, 7vw, 96px) auto 0; padding: clamp(24px, 4vw, 44px); background: var(--paper-2); border: 1px solid rgba(167, 129, 63, .55); outline: 1px solid rgba(167, 129, 63, .55); outline-offset: 5px; }
.author-card .arch::before { transform: translate(8px, 8px); }
.author-card .arch__img { aspect-ratio: 3 / 4; }
.author-card h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: .5em; }
.author-card p { margin-bottom: 1em; }
.author-card .label { margin-bottom: .5rem; }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: min(100%, 860px); margin: clamp(40px, 5vw, 64px) auto 0; }
.post-nav a { display: block; padding: 18px 0; border-top: 1px solid var(--kraft); text-decoration: none; }
.post-nav a b { display: block; font: 500 1.25rem/1.25 var(--ff-display); letter-spacing: -.01em; }
.post-nav a:hover b { color: var(--copper-dk); }
.post-nav .label { margin-bottom: .4rem; }
.post-nav__next { text-align: right; grid-column: 2; }
.post-nav__prev { grid-column: 1; }

@media (max-width: 640px) {
  .author-card { grid-template-columns: 1fr; text-align: left; }
  .author-card .arch { width: 150px; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav__next, .post-nav__prev { grid-column: 1; text-align: left; }
  .post__body .alignleft, .post__body .alignright { float: none; margin: 1.6em auto; max-width: 100%; }
  .post__body { font-size: 1.0625rem; }
}