/* TRC Studios blog: single posts (single-post.php) and the post list (home.php).
   Loaded only on those two templates, after styles.css, so it reuses its tokens and .close band. */

/* Reading column; the photo runs a little wider */
.post__col { max-width: calc(760px + 2 * var(--gutter)); }
.post__col--wide { max-width: calc(1080px + 2 * var(--gutter)); }

.post__head { padding-top: calc(var(--nav-h) + clamp(56px, 8vw, 120px)); }
.post__meta { display: block; margin-bottom: 20px; font-size: 14px; letter-spacing: 0.04em; color: var(--ash); }
.post__meta a { text-decoration: none; }
.post__meta a:hover { color: var(--bone); }
.post__title { font: 300 clamp(40px, 5vw, 72px)/1.02 var(--serif); letter-spacing: -0.025em; text-wrap: balance; }

.post__photo { margin-block: clamp(40px, 5vw, 64px) 0; }
.post__photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }

/* Post text: the theme resets p and h2 to zero, so spacing is set here */
.post__body { padding-block: clamp(40px, 5vw, 64px) var(--space); font-size: 19px; line-height: 1.7; color: var(--text); text-wrap: pretty; }
.post__body > * + * { margin-top: 1.1em; }
.post__body h2 { margin-top: 2.2em; font: 300 clamp(28px, 2.8vw, 38px)/1.12 var(--serif); letter-spacing: -0.015em; color: var(--bone); text-wrap: balance; }
.post__body h3 { margin-top: 1.8em; font: 400 23px/1.25 var(--serif); color: var(--bone); }
.post__body h2 + *, .post__body h3 + * { margin-top: 0.6em; }
.post__body a { color: var(--amber); text-underline-offset: 3px; }
.post__body a:hover { color: var(--amber-hi); }
.post__body strong { font-weight: 500; color: var(--bone); }
.post__body ul, .post__body ol { padding-left: 1.3em; }
.post__body li + li { margin-top: 0.4em; }
.post__body blockquote { margin-inline: 0; padding-left: 24px; border-left: 2px solid var(--amber); font: 300 24px/1.35 var(--serif); color: var(--bone); }
.post__body img { border-radius: 4px; }

/* Post list */
.blog { padding-bottom: var(--space); }
.blog__lede { margin-top: 20px; max-width: 34em; font-size: 18px; color: var(--text); }
.blog__list { list-style: none; margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line-dark); }
.blog__item { border-bottom: 1px solid var(--line-dark); }
.blog__link { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; padding-block: 36px; text-decoration: none; }
.blog__link:not(:has(.blog__photo)) { grid-template-columns: minmax(0, 1fr); }
.blog__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.blog__text .post__meta { margin-bottom: 10px; }
.blog__title { display: block; font: 300 clamp(26px, 2.6vw, 34px)/1.12 var(--serif); letter-spacing: -0.015em; text-wrap: balance; transition: color .2s; }
.blog__link:hover .blog__title { color: var(--amber); }
.blog__excerpt { display: block; margin-top: 12px; color: var(--text); }

.blog .nav-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 40px; color: var(--ash); }
.blog .nav-links a { color: var(--bone); }
.blog .nav-links .current { color: var(--amber); }

@media (max-width: 599px) {
  .post__body { font-size: 17px; }
  .blog__link { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-block: 28px; }
}