/* Blog index (home.php, boards blog-v1 / -mobile) and a post (single.php + comments.php, boards post-v1 / -mobile).
   Spacing follows the code scale (DESIGN.md section 4): image -> text --media-gap, caption stack 8 / 8 / 24. */

.dot { flex: none; display: inline-block; width: 3px; height: 3px; margin-inline: 12px; border-radius: 50%; background: var(--quiet); vertical-align: middle; }

/* ---------- Index: page head ---------- */
/* Board blog-v1: title -> intro 20 and 48 under the head on desktop (the shared page head has 16 / 40). */
.blog-intro { max-width: 820px; font-family: var(--font-sans); font-weight: 300; font-size: 16px; line-height: 1.7; }

/* ---------- Index: the newest post ---------- */
.blog-lead { padding-bottom: 48px; }
.blog-lead-grid { display: grid; gap: var(--media-gap); }
.blog-lead-img { display: block; aspect-ratio: 335 / 220; overflow: hidden; background: var(--ground-alt); }
.blog-lead-img img, .blog-card-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-lead-text { display: flex; flex-direction: column; align-items: flex-start; }
.blog-meta { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; line-height: 1.45; color: var(--quiet); }
.blog-latest { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sage-deep); }
.blog-author-inline { display: none; }
.blog-lead-title { margin-top: 8px; font-family: var(--font-sans); font-weight: 300; letter-spacing: -0.02em; font-size: clamp(1.625rem, 1.449rem + 0.751vw, 2.125rem); line-height: 1.2; }
.blog-lead-title a, .blog-card-title a { text-decoration: none; }
.blog-lead-title a:hover, .blog-card-title a:hover, .blog-lead-title a:focus-visible, .blog-card-title a:focus-visible,
.blog-lead:has(.blog-lead-img:hover) .blog-lead-title a, .blog-card:has(.blog-card-img:hover) .blog-card-title a {
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.blog-author-line { margin-top: 8px; font-size: 11px; line-height: 1.5; color: var(--quiet); }
.blog-lead-excerpt { margin-top: 16px; font-family: var(--font-sans); font-weight: 300; font-size: 16px; line-height: 1.7; }
.blog-read { display: inline-flex; gap: 8px; margin-top: 24px; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--sage-deep); text-decoration: none; }
.blog-arrow { font-weight: 300; }

/* ---------- Index: the other posts ---------- */
.blog-more { background: var(--ground-alt); }
.blog-more .blog-grid--archive { margin-top: 0; } /* archive.php: no label row above */
.blog-grid { margin-top: 40px; display: grid; gap: var(--group-gap); }
.blog-card { display: flex; flex-direction: column; gap: var(--media-gap); }
.blog-card-img { display: block; aspect-ratio: 335 / 180; overflow: hidden; background: var(--ground); }
.blog-card-text { display: flex; flex-direction: column; align-items: flex-start; }
.blog-chip {
	font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em;
	margin-right: 12px; padding: 4px 10px; box-shadow: inset 0 0 0 1px var(--sage); line-height: 18px; text-transform: uppercase; color: var(--sage-deep);
}
.blog-card-title { margin-top: 8px; font-family: var(--font-sans); font-weight: 300; letter-spacing: -0.02em; font-size: clamp(1.375rem, 1.287rem + 0.376vw, 1.625rem); line-height: 1.25; }
.blog-card-excerpt { margin-top: 8px; font-family: var(--font-sans); font-weight: 300; font-size: 13px; line-height: 1.7; }
.blog-pages { margin-top: var(--group-gap); display: flex; gap: 40px; }
.blog-empty { padding-block: 0 var(--section-y); }

@media (min-width: 768px) {
	.blog-head { padding-bottom: 48px; }
	.blog-head .page-title-col { gap: 20px; }
	.blog-lead { padding-bottom: 64px; }
	.blog-lead-title { line-height: 1.15; }
	.blog-lead-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
	.blog-lead-img { grid-column: span 6; aspect-ratio: 758 / 440; }
	.blog-lead-text { grid-column: span 6; }
	.blog-author-inline { display: inline-flex; align-items: center; }
	.blog-author-line { display: none; }
	.blog-grid { margin-top: 48px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px var(--col-gap); align-items: start; }
	.blog-card-img { aspect-ratio: 644 / 240; }
	.blog-chip { font-size: 11px; line-height: 16px; }
}
@media (min-width: 1024px) {
	.blog-lead-img { grid-column: span 7; }
	.blog-lead-text { grid-column: span 5; }
}

/* ---------- Post: head and featured image ---------- */
/* Board post-v1: the label sits 20 / 28 above the title (the shared page head has 24 / 32). */
.post-head .page-title-col { margin-top: 20px; }
.post-h1 { max-width: 1000px; font-family: var(--font-sans); font-weight: 200; font-size: clamp(2.125rem, 1.729rem + 1.69vw, 3.25rem); line-height: 1.1; }
.post-byline { display: flex; flex-wrap: wrap; align-items: center; font-size: 13px; line-height: 1.45; color: var(--quiet); }
.post-byline time { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; } /* a date: the mono caps step */
.post-author { font-weight: 500; color: var(--ink); }
.post-hero { padding-bottom: 32px; }
.post-hero img { width: 100%; aspect-ratio: 335 / 220; object-fit: cover; background: var(--ground-alt); }

/* ---------- Post: the article in bands (inc/blog.php hst_post_bands) ----------
   Any post keeps this form: pairs of text + images, text-only steps, image-only galleries (see hst_post_bands). */
.post-band { padding-block: var(--section-y); }
.post-band--first { padding-top: 0; }
.post-band--alt { background: var(--ground-alt); }
.post-steps { display: grid; gap: 16px; }
.post-h2 { padding-top: 16px; font-family: var(--font-sans); font-weight: 300; letter-spacing: -0.02em; font-size: clamp(1.625rem, 1.449rem + 0.751vw, 2.125rem); line-height: 1.15; }
.post-step { display: grid; gap: 16px; }

/* Images (hst_post_media). One image keeps its own proportions, capped in height so a portrait is never cut
   (object-fit: contain - it then sits narrower, left-aligned in its box). Groups share one cell shape - the
   images' common shape, square when they differ. Groups are flex rows, not grids: a grid sized its rows from
   the image file's full width (a 230 px image in a 640 px row, session 22 stress test). */
.post-img img { width: 100%; height: auto; max-height: 480px; object-fit: contain; object-position: left top; }
.post-media, .post-gallery { display: flex; flex-wrap: wrap; gap: 16px 12px; align-items: flex-start; align-content: flex-start; }
.post-img { flex: 0 0 100%; min-width: 0; }
.post-gallery--group > .post-img { flex-basis: calc(50% - 6px); }
.post-gallery--group .post-img img { max-height: none; aspect-ratio: 162 / 129; object-fit: cover; background: var(--ground-alt); }
.post-gallery--group.shape-portrait .post-img img { aspect-ratio: 4 / 5; }
.post-gallery--group.shape-square .post-img img { aspect-ratio: 1; }
.post-gallery.is-odd > .post-img:first-child { flex-basis: 100%; } /* odd landscape gallery: the first image leads, full width */
.post-gallery.is-odd > .post-img:first-child img { aspect-ratio: 335 / 190; }
.post-img figcaption { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--quiet); }

/* Post: "On this page" (four or more sections). */
.post-toc { display: grid; gap: 20px; margin-bottom: 24px; }
.post-toc-list { margin: 0; padding: 0; list-style: none; display: grid; }
.post-toc-list a { display: flex; gap: 12px; padding-block: 12px; box-shadow: inset 0 1px 0 var(--line); text-decoration: none; }
.post-toc-num { flex: none; padding-top: 3px; font-size: 11px; font-weight: 500; letter-spacing: 0.14px; line-height: 1.4; color: var(--quiet); }
.post-toc-title { font-family: var(--font-sans); font-weight: 300; font-size: 16px; line-height: 1.4; }
.post-toc-list a:hover .post-toc-title, .post-toc-list a:focus-visible .post-toc-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* The article's own blocks. */
.post-text, .post-flow { min-width: 0; font-family: var(--font-sans); font-weight: 300; font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; } /* a long URL wraps (as .legal-text) */
.post-text--lead p { font-size: clamp(1.1875rem, 1.121rem + 0.282vw, 1.375rem); line-height: 1.55; }
.post-flow > * + * { margin-top: 16px; }
.post-text ul, .post-text ol, .post-flow ul, .post-flow ol { margin: 0; padding-left: 1.25em; list-style: disc; display: grid; gap: 8px; }
.post-text ol, .post-flow ol { list-style: decimal; }
.post-text :is(h3, h4, h5, h6), .post-flow :is(h3, h4, h5, h6) { font-family: var(--font-sans); font-size: 16px; font-weight: 500; line-height: 1.5; }
.post-text :is(h5, h6), .post-flow :is(h5, h6) { font-size: 14px; } /* as .legal-text */
.post-text:has(> h3, > h4) { margin-bottom: -8px; } /* a sub-heading stays with its paragraph */
.post-text a, .post-flow a, .cm-text a { color: var(--sage-deep); text-decoration-color: var(--sage); text-underline-offset: 3px; }
.post-text strong { font-weight: 700; }
.post-text img, .post-text iframe, .post-text video, .post-flow img { max-width: 100%; height: auto; }
.post-text table, .post-flow table { width: 100%; border-collapse: collapse; font-size: 15px; }
:is(.post-text, .post-flow) figure.wp-block-table { max-width: 100%; overflow-x: auto; } /* a wide table scrolls in its own box */
:is(.post-text, .post-flow) :is(th, td) { overflow-wrap: normal; }
.post-text th, .post-text td { padding: 8px 12px 8px 0; text-align: left; box-shadow: inset 0 -1px 0 var(--line); }

@media (min-width: 768px) {
	.post-head .page-title-col { margin-top: 28px; }
	.post-hero { padding-bottom: 48px; }
	.post-hero img { aspect-ratio: 1328 / 520; }
	.post-band--first { padding-top: 24px; }
	.post-steps { gap: 48px; }
	.post-h2 { padding-top: 20px; }
	.post-text, .post-flow { font-size: 18px; line-height: 1.7; }
	.post-flow { max-width: 872px; }
	.post-img img { max-height: 640px; }
	.post-media, .post-gallery { gap: 16px; }
	.post-gallery { gap: 48px var(--col-gap); }
	.post-gallery--single > .post-img, .post-gallery--group > .post-img { flex-basis: calc(50% - var(--col-gap) / 2); } /* a lone image takes the image column's width */
	.post-gallery--group .post-img img { aspect-ratio: 644 / 400; }
	.post-gallery--group.shape-portrait .post-img img { aspect-ratio: 4 / 5; }
	.post-gallery--group.shape-square .post-img img { aspect-ratio: 1; }
	.post-gallery.is-odd > .post-img:first-child { flex-basis: 100%; }
	.post-gallery.is-odd > .post-img:first-child img { aspect-ratio: 1328 / 680; } /* only for a first image of 1.6:1 or wider */
	/* A pair: images left, text right (6 + 6). The text blocks stay in content order in the right column; the
	   images span every text row plus a last 1fr row, so tall images never pull the paragraphs apart, and
	   stay in view (sticky) while longer text scrolls past them. */
	.post-step { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), auto) 1fr; gap: 0 var(--col-gap); align-items: start; }
	.post-step > .post-text ~ .post-text { margin-top: 24px; } /* margins, not row-gap: a gap would also open under the last row */
	.post-step--pair > .post-text { grid-column: 2; }
	.post-step--pair > .post-media { grid-column: 1; grid-row: 1 / -1; position: sticky; top: 24px; }
	/* Text alone: the first 8 of 12 columns, under the h2 - never a column with an empty half beside it. */
	.post-step--text { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.post-step--text > .post-text { grid-column: 1 / span 8; }
	.post-toc { gap: 24px; margin-bottom: 0; }
	.post-toc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
}
@media (min-width: 1024px) {
	/* Image groups beside text side by side from 1024 (board 314 + 16 + 314); on tablet they would be ~150 px. */
	.post-media--group > .post-img { flex-basis: calc(50% - 8px); }
	.post-media--group.is-odd > .post-img:first-child { flex-basis: 100%; } /* odd count: the first stands alone on its own proportions */
	.post-media--group > .post-img:not(.is-odd > :first-child) img { max-height: none; aspect-ratio: 314 / 250; object-fit: cover; background: var(--ground-alt); }
	.post-media--group.shape-portrait > .post-img:not(.is-odd > :first-child) img { aspect-ratio: 4 / 5; }
	.post-media--group.shape-square > .post-img:not(.is-odd > :first-child) img { aspect-ratio: 1; }
	/* Galleries of squares or portraits: three across (416), not two of 644. */
	.post-gallery--group:not(.shape-landscape) > .post-img { flex-basis: calc((100% - 2 * var(--col-gap)) / 3); }
	.post-toc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Post: comments (comments.php; fields from checkout.css) ---------- */
.cm-h2 { font-family: var(--font-sans); font-weight: 300; letter-spacing: -0.02em; font-size: clamp(1.625rem, 1.449rem + 0.751vw, 2.125rem); line-height: 1.15; }
.cm-list-wrap { margin-bottom: var(--head-gap); }
.cm-list { margin: 24px 0 0; padding: 0; list-style: none; box-shadow: inset 0 -1px 0 var(--line); }
.cm-list .children { margin: 0 0 0 16px; padding: 0 0 0 16px; list-style: none; box-shadow: inset 1px 0 0 var(--line); }
.cm-body { display: grid; gap: 8px; padding-block: 24px; box-shadow: inset 0 1px 0 var(--line); }
.cm-list .children .cm-body { box-shadow: none; padding-top: 0; }
.cm-meta { display: flex; flex-wrap: wrap; align-items: center; font-size: 13px; line-height: 1.45; color: var(--quiet); }
.cm-author { font-weight: 500; color: var(--ink); }
.cm-note { font-size: 13px; color: var(--quiet); }
.cm-text { max-width: 760px; font-family: var(--font-sans); font-weight: 300; font-size: 16px; line-height: 1.7; }
.cm-text p + p { margin-top: 12px; }
.cm-reply { margin-top: 4px; }
.cm-reply a { /* the text link style, without the class WordPress does not let us add */
	display: inline-block; padding-block: 12px; margin-block: -12px; font-size: 12px; font-weight: 500; letter-spacing: 0.14px;
	text-transform: uppercase; line-height: 1.4; color: var(--sage-deep); text-decoration: none;
}
.cm-reply a > span, .cm-cancel a { display: inline-block; padding-bottom: 4px; border-bottom: 1.5px solid var(--sage); }
.cm-cancel a { margin-left: 12px; font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.14px; text-transform: uppercase; color: var(--sage-deep); text-decoration: none; vertical-align: middle; }

.comment-respond { display: grid; gap: 16px; }
.cm-note-top { margin-top: 16px; font-size: 13px; line-height: 1.6; color: var(--quiet); }
.cm-form { display: grid; gap: 16px; }
.cm-form .form-row { display: grid; gap: 8px; margin: 0; }
.cm-form .form-row textarea.input-text { height: 140px; min-height: 0; font-size: 16px; line-height: 1.5; }
.cm-cookies { margin: 0; }
.cm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* the spam honeypot, off screen */
.cm-form .form-row textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--error); } /* a link in a first comment (js/comments.js) */
.cm-form .form-submit { margin: 8px 0 0; }
.cm-form .form-submit .btn { width: 100%; }

@media (min-width: 768px) {
	.cm-list .children { margin-left: 24px; padding-left: 24px; }
	.cm-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.cm-form > * { grid-column: 1 / -1; }
	.cm-form > .cm-f-author, .cm-form > .cm-f-email { grid-column: auto; }
	.cm-form .form-row textarea.input-text { height: 160px; }
	.cm-form .form-submit .btn { width: auto; min-width: 160px; }
}
@media (min-width: 1024px) {
	.comment-respond { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
}

/* ---------- Post: more posts ---------- */
.rel-grid { margin-top: 40px; display: grid; gap: 16px; }
.rel-card { display: flex; align-items: center; gap: 16px; padding-block: 16px; text-decoration: none; }
.rel-img { flex: none; width: 64px; height: 64px; overflow: hidden; background: var(--ground); }
.rel-img img { width: 100%; height: 100%; object-fit: cover; }
.rel-text { display: grid; gap: 8px; }
.rel-cat { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; line-height: 1.4; text-transform: uppercase; color: var(--sage-deep); }
.rel-title { font-family: var(--font-sans); font-weight: 300; font-size: 16px; line-height: 1.35; }
.rel-card:hover .rel-title, .rel-card:focus-visible .rel-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

@media (min-width: 768px) {
	.rel-grid { margin-top: 48px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
	.rel-img { width: 72px; height: 72px; }
}